AI-система віртуальної примірки макіяжу в реальному часі

Віртуальна примірка макіяжу: де ламається реальний час

Віртуальна примірка макіяжу в інтерфейсі виглядає як одна кнопка: увімкнув камеру — і на обличчі помада. Усередині це конвеєр із чотирьох щаблів — знаходить обличчя, веде ключові точки, накладає шар відтінку, віддає кадр на екран.

Поки щаблі вкладаються в бюджет часу одного кадру, картинка читається як дзеркало; щойно одна вибивається — як фільтр із запізненням.

Першим розсипається контур. Ключові точки між кадрами перескакують, маска «дихає» на межі губ і повік, і це помітно без наближення. Згладжування за історією кадрів прибирає тремтіння, але додає інерцію: обличчя вже повернулося, а контур ще доганяє.

Затримка відгуку під час відстеження обличчя відчувається найсильніше на русі — нахил голови, усмішка, поворот до джерела світла.

Якщо щаблі рахуються послідовно, камера встигає віддати кілька нових кадрів, поки обробляється попередній, і між жестом і реакцією з’являється розсинхрон. Тут допомагає розпаралелювання щаблів і окремий полегшений тракт на швидкі рухи.

Третє джерело — відтінок. Напівпрозорий шар змішується з базовим тоном шкіри, тому один і той самий пігмент на різних людях і за різного світла з’їжджає: тепле світло веде помаду в оранжевий, холодне — в бузковий.

Розповзання кольору по контуру під час зміни освітлення — найчастіша претензія до того, як працює віртуальний макіяж в реальному часі, і головне гальмо для підбору відтінків косметики онлайн: клієнт не довіряє кольору, який змінюється разом із лампою в кімнаті.

Розбираємо, як це закривається: де потрібна нормалізація за еталонним знімком шкіри, де — калібрування каталогу під реальні пігменти.

Точність накладання та стійкість відстеження обличчя

Якість примірки перестає бути питанням смаку: тримаємо чотири вимірювані показники — відхилення контуру губ і повік від реальних меж обличчя, стійкість відстеження під час повороту голови, частку кадрів із втратою обличчя та колірну розбіжність накладеного відтінку з еталоном.

Вимірюємо не на студійних фото, а на записах із звичайних камер, з якими користувач і буде працювати.

Стійкість відстеження тримається на щільній сітці лицьових точок і часовому згладжуванні: положення контуру між кадрами інтерполюється, тому макіяж не тремтить на губах під час міміки й не «пливе» на вилицях.

Базовий шар — MediaPipe Face Mesh, поверх нього свої фільтри та покадрова стабілізація. Коли обличчя перекрите рукою, волоссям або оправою окулярів, маска не з’їжджає: вона завмирає в останньому достовірному положенні й повертається до розрахунку, щойно зона знову видима.

Слабке освітлення — окремий сценарій. Перед розрахунком кадр нормалізується за яскравістю й шумом, поріг упевненості відстеження змінюється керовано, щоб не з’явилися хибні спрацювання на тінях.

На тестовому наборі частка кадрів із непевним контуром падає з двозначних значень до десятих часток відсотка — примірка залишається робочою за світла настільної лампи й у вечірньому приміщенні.

Перевіряємо на сценаріях реальної зйомки: контрове світло з вікна, лампа над столом, вечірнє освітлення, повороти голови до краю, активна міміка, руки біля обличчя.

Кожен сценарій — окремий прогін із покадровою розміткою, тому видно не абстрактну «плавність», а конкретику: стабільність кадру, частку зривів відстеження, колірну розбіжність відтінку на різних тонах шкіри. За цими числами замовник приймає роботу, а ми фіксуємо регресії під час наступних оновлень моделі.

Варіанти запуску: браузер, застосунок, дзеркало в точці продажів

Той самий алгоритм примірки макіяжу поводиться по-різному залежно від точки входу. Браузер, мобільний застосунок і дзеркало з камерою в точці продажів відрізняються доступом до камери, вимогами до каналу зв’язку й тим, де взагалі обчислюються модель і підбір відтінків.

Друге рішення — де виконується розрахунок: на пристрої відвідувача чи на сервері. Воно впливає на приватність, стабільність картинки й на те, як швидко ми зможемо оновлювати палітри та правила підбору.

На практиці частіше беруть гібрид: легка модель рахує на пристрої для швидкого зворотного зв’язку, а складні сцени й точний підбір відтінку йдуть на сервер.

Перед запуском ми прогоняємо обидва режими на вашому сценарії та фіксуємо, який із них дає потрібну плавність без втрати приватності.

Етапи впровадження: від розбору задачі до передачі системи

Порядок робіт улаштований так, щоб спірні місця сцени — відблиски від спалаху, холодне світло вітрини, темний тон шкіри — проявлялися на тестовому стенді, а не в день передачі. Далі — маршрут від першого розбору задачі до працюючої системи.

1. Аудит сценаріїв зйомки. Збираємо реальні умови: фронтальна камера телефона або веб-камера, світло з вікна чи від вітрини, великий план, повороти голови, усмішка. За кожним сценарієм фіксуємо, що система зобов’язана витримати й де має право відмовитися від результату замість хибного накладання.
2. Схема рішення. Узгоджуємо зони обличчя для відстеження, точки опори для накладання та порядок шарів — тон, рум’яна, тіні, губи, — а також те, як поводиться макіяж під час швидкого руху.
3. Підготовка еталонних наборів. Розмічаємо кадри за тонами шкіри, типами освітлення й віком. Набір фіксується, щоб ітерації порівнювалися між собою за одними й тими самими даними, а не «на око».
4. Налаштування палітр і правил накладання. Приводимо відтінки до передбачуваного результату за різного світла: змішування з тоном шкіри, щільність, поведінка на відблисках і на темних ділянках.
5. Приймальні перевірки. Прогоняємо контрольні сценарії: частка кадрів без зриву накладання, відгук на рух, стійкість на слабких пристроях. Розбіжності розбираємо до передачі, а не після запуску.
6. Передача в експлуатацію. Віддаємо конфігурації, документацію з палітр і правил, інструкцію з додавання нових відтінків, навчаємо команду замовника.

Така послідовність залишає систему, яку можна розвивати власними силами: нові відтінки й сценарії додаються налаштуванням, без переписування основи.

Що передаємо на руки: конфігурації, схеми й регламенти

Після здачі у вашої команди залишається не лише працюючий сервіс, а й комплект документів, за якими його можна розвивати без нас. Нижче — що саме входить у передачу й навіщо кожен артефакт потрібен на практиці: від правки однієї палітри до підключення нової вітрини.

• Комплект конфігурацій — пороги детекції обличчя, точки накладання та параметри відмальовування винесені в окремі файли, а не зашиті в код: відтінки й поведінка підкручуються без перезбирання та релізу.
• Схеми інтеграції із сайтом і застосунком — порядок викликів, формати запитів і відповідей, поведінка за недоступності сервісу та деградація до статичного прев’ю.
• Політики доступу до зображень — де зберігаються кадри, скільки живуть, хто і за якою ознакою їх запитує, що йде в аналітику. Закриває питання служби безпеки й вимог до персональних даних.
• Регламент оновлення палітр — як додати відтінок, відкалібрувати його під різне освітлення та викотити в бойовий контур, не ламаючи вже налаштовані набори.
• Еталонні кадри й метрики якості — набір тестових сцен, за якими кожна нова палітра й оновлення моделі перевіряються до викату: видно, стало краще чи гірше.
• Інструкція з розгортання й відкату — середовища, змінні, порядок викату та повернення на попередню версію за один крок.
• Каталог точок розширення — де підключити нові категорії продукту й які модулі при цьому задіюються.

Кейс: як ми прибрали підвисання й прискорили відгук

Кейс впровадження примірки почався з роздрібної мережі косметики Lumé: примірка відтінків працювала прямо в картці товару, покупчині нею користувалися, але до покупки доходила лише частина.

Шар тону з’являвся з відчутною паузою після повороту голови, маска «з’їжджала» під час руху та зміни освітлення, а на частині смартфонів сесія обривалася на середині. За логами примірку кидали 4 покупчині з 10, і майже ніхто з них не повертався в картку.

Що показав розбір

Вузьким місцем виявився не сам алгоритм накладання, а шлях кадру: стиснення, відправлення на сервер, очікування відповіді, зворотне відмальовування. Чим слабший канал і чим завантаженіший пристрій, тим довшим ставав цей ланцюжок — звідси й підвисання, і обриви.

Вимірювання на реальних пристроях дали метрики до змін: відгук примірки на рух голови — близько секунди, частка обірваних сесій — 23%, частка переходів від примірки до кошика — 6%.

Що змінили і що стало

Ми перенесли розрахунок накладання на пристрій покупця та переробили розмітку обличчя так, щоб вона спиралася на стійкі точки й не «дихала» між кадрами.

Додали керовану деградацію: за слабкого каналу примірка знижує деталізацію відтінку, але не рве сесію, а палітри тримаємо на пристрої — перемикання між тонами перестало бути окремим запитом.

Прискорення відгуку примірки вийшло кратним: шар реагує на рух голови без помітної оком паузи. Частка обірваних сесій упала з 23% до 4%, перехід у кошик зріс із 6% до 14%, навантаження на сервери примірки знизилося майже в сім разів.

Клас відмов «інтерфейс підвис і втратив обличчя в кадрі» зник зовсім — замість нього покупець бачить лише м’яке зниження якості картинки, якого не помічає.

Чим примірка відрізняється від накладання фільтра?

Фільтр-маска — це готова напівпрозора текстура, приклеєна до обличчя за кількома опорними точками. Вона не знає ні тону шкіри, ні рельєфу губ: відтінок заданий заздалегідь, тому на смаглявій шкірі, за бокового світла або на блиску помади виглядає як наліпка. Звідси й характерний ефект «маски» — колір є, а косметики немає.

Примірка будується інакше: спочатку геометрія й колір, потім пігмент. Ми відновлюємо щільну сітку обличчя, сегментуємо зони губ, повік і шкіри, оцінюємо тон та освітлення за опорними ділянками кадру — і лише потім переносимо відтінок.

Губи й очі — найскладніша частина перенесення: там рельєф, відблиски, напівпрозорі переходи й тонка межа зі шкірою. Відтінок наноситься з урахуванням освітленості кадру, а блиск і текстура зберігаються — саме тому помада виглядає накладеною, а не намальованою.

Обмеження фільтра в тому, що він не розрізняє перекриття: волосся, окуляри, рука біля обличчя для нього не існують. Плюс тіні на масці не збігаються зі світлом у кадрі. Для розваги цього достатньо, для вибору відтінку косметики — ні.

Технічні сумніви перед запуском: відповідаємо по суті

На етапі вибору підрядника питання майже завжди ті самі: чи витримає сервіс потік покупців у залі, що побачать власники недорогих смартфонів, чи переживе примірка день розпродажу і куди йдуть фотографії облич. Нижче — прямі відповіді, засновані на будові контуру, а не на обіцянках.

Чи працюватиме примірка на недорогому смартфоні?

Модель постачається у двох гілках різної ваги. Легка тримає плавну картинку на пристроях минулих років без перегріву корпусу, важка вмикається лише там, де є запас продуктивності.

Якщо апарат не проходить поріг узагалі, показуємо примірку за завантаженим фото — покупець у будь-якому разі бачить відтінок на собі, а не порожній екран.

Що відбувається за пікового трафіку в день розпродажу?

Обчислювальний контур масштабується горизонтально: зі зростанням числа одночасних примірок додаються обчислювальні вузли, черга надає пріоритет уже розпочатим.

Перед запуском прогоняємо профіль із десятикратним сплеском — за перевантаження знижується частота оновлення шару, але сервіс залишається доступним і не роняє інші розділи магазину.

Обговоримо задачу: що підготувати до першої розмови

Щоб повернутися з планом і оцінкою робіт, а не із загальними питаннями, нам потрібен контекст задачі. Перша розмова зазвичай займає небагато часу, і її користь залежить від того, наскільки точно ви опишете, де примірка працює і що вважається результатом. Нижче — що підготувати.

• Сценарії використання примірки: картка товару в застосунку, екран у торговельній залі, промо-сторінка або камера біля вітрини. Від цього залежить, збираємо ми окремий модуль чи вбудовуємося в готовий інтерфейс.
• Каталог продуктів: знімки помад, тіней і тональних відтінків, їхні коди й групування за лініями. Акуратні вихідники й єдиний формат відчутно скорочують ручне налаштування.
• Вимоги до точності накладання: типи шкіри, слабке освітлення, рух людини в кадрі, окуляри й волосся, що закриває обличчя. Що вважаємо допустимим, а де примірка має чесно повідомити, що обличчя не розпізнано.
• Правила бренду: палітра, типографіка, подача продукту й підказки в інтерфейсі. Примірка має виглядати частиною вашого продукту, а не чужим блоком поверх нього.
• Технологічна база й обмеження: платформа застосунку або сайту, мова, де зберігається каталог, як модуль зв’яжеться із системами обліку й аналітикою.
• Критерії приймання й відповідальні: хто з боку бізнесу та ІТ приймає результат, що вважаємо готовим модулем, які звіти про використання потрібні.

Опишіть задачу у вільній формі — повернемося з оцінкою та планом робіт. Якщо частини даних поки немає, приходьте з тим, що є: разом накидаємо структуру й скажемо, які матеріали критичні, а що можна уточнити пізніше.