Кейс NE pigments: как создавали мобильное приложение с AI, что пошло не так с ChatGPT и почему в этот раз было много математики

Задача

Создать мобильное приложение по подбору средств для перманентного макияжа и определения асимметрии на лице

Результаты

• Разработали нативные приложения iOS и Android для бьюти-мастеров
• Создали инструмент для подбора пигментов и корректоров по фото
• Внедрили и обучили нейросети для определения фототипа кожи
• Разработали редактор для определения ассиметрии на лице по фотографии
• Создали визуальный стиль
• Добавили карточки товаров для перехода в магазин NE pigments

Клиент 

NE pigments — производство профессиональных средств для перманентного макияжа

Сроки

8 месяцев

Летом 2024 года к нам пришли NE pigments — за разработкой мобильного приложения для мастеров перманентного макияжа. Нужно было интуитивно понятное, красивое и удобное решение для быстрого подбора профессиональных средств и определения ассиметрии на лице.

Аудитория — опытные и начинающие бьюти-мастера. Приложение должно было стать полезным инструментом для специалистов и тем самым дополнительно укрепить репутацию бренда. Кроме того, в интерфейсе планировалось создать карточки товаров для перехода в магазины NE pigments.

В этом кейсе — всё про то, как мы работали над приложением: как внедряли нейросети и взаимодействовали с клиентом на протяжении всего проекта, что учитывали при создании визуального стиля и почему в этот раз было много математики.

О чём расскажем: 

1. Задачи 
2. Результаты 
3. Каким получилось мобильное приложение
4. Как реализовывали: всё про процесс, инсайты и сложности 

Задачи

• Разработать визуальный стиль на основе фирменных цветов бренда — лавандового и белого. При этом не перегрузить интерфейс лишними деталями, чтобы приложение оставалось удобным и понятным для пользователей
• Выбрать, внедрить и обучить подходящие нейросети для определения фототипа кожи и наличия пигмента на лице
• Разработать инструмент по подбору пигмента и других средств по фотографии
• Создать редактор для определения ассиметрии на лице, чтобы начинающим мастерам было проще наносить перманентный макияж
• Добавить возможность перехода из приложения в магазин NE pigments на различных платформах
• Создать инструкцию по использованию с анимированными иллюстрациями

Результаты

• Разработали два приложения на русском и английском языках: одно — для iOS, второе — для Android. Внешне они практически идентичны, но каждое адаптировано под требования своей платформы
• Создали визуальный стиль
• Разработали интуитивно понятный интерфейс и удобную навигацию в приложении
• Подобрали, внедрили и обучили четыре нейросети для определения фототипа лица по Фитцпатрику и наличия пигмента на лице
• Создали инструмент «Симметрия» — для работы с формой бровей
• Разработали интерфейс камеры с нуля, потому что из-за особенностей работы стандартной камеры смартфона нейросеть неправильно обрабатывала полученные с неё фото альбомной ориентации
• Добавили возможность перехода из карточек товаров в магазины NE pigments
• Создали инструкцию и около 30 анимированных иллюстраций к ней

Клиент

NE pigments — это компания по производству профессиональных средств для перманентного макияжа. Основатель — автор курсов по перманентному макияжу и фаундер клуба INKUBATOR для бьюти-мастеров Елена Нечаева. Сейчас продукция NE pigments представлена в России и зарубежом.

Каким получилось мобильное приложение

Приложение состоит из двух фич: AI-инструмента для подбора пигмента и других средств для перманентного макияжа и инструмента «Симметрия». Когда пользователь видит инструмент впервые, на экране всплывает пошаговая инструкция с анимированными иллюстрациями. При повторном открытии инструкция не появляется, но её всегда можно просмотреть, нажав на i.

Как устроен AI-инструмент по подбору пигмента

Сначала AI-инструмент определяет фототип кожи по фотографии лица, а затем — наличие перманентного макияжа. Если макияжа нет — приложение подбирает варианты пигментов. Если есть — показывает подходящие средства для коррекции или предлагает удалить пигмент лазером. В некоторых случаях приложение предлагает смешать два средства для достижения подходящего цвета.

AI-инструмент состоит из четырёх нейросетей: первая определяет фототип, вторая — наличие бровей, третья — наличие перманента, четвёртая — цвет средства для коррекции. Для определения фототипа кожи искусственный интеллект использует шкалу Фитцпатрика — именно на неё обычно ориентируются профессиональные бьюти-мастера при подборе цвета пигмента или корректора.

Фотографию можно загрузить из галереи устройства или сделать в самом мобильном приложении.

Если пользователь выбирает второй вариант — открывается камера. Зелёный цвет маски подсказывает пользователю, где лучше расположить лицо в кадре.

Как устроен инструмент «Симметрия»

Он автоматически определяет ассиметрию лице по фотографии. Как и в случае с AI-инструментом по подбору пигмента, фотографию можно загрузить из галереи или сделать в самом приложении. Готовое изображение также можно сохранить и переслать.

«Симметрия» рассчитана для новичков, которые, в отличие от опытных мастеров, не так быстро и легко распознают асимметрию на лице. А это важный навык для специалиста — чем лучше он видит асимметрию, тем точнее определяет зоны, где нужно нанести пигмент или средство для коррекции.

Для работы с симметрией внедрили разные жесты, исключив при этом их наложение друг на друга. Касание экрана одним пальцем — для управления линиями, двумя — для зума и поворота фотографии. Главной задачей было сделать управление профессиональным инструментом простым и понятным. Возможности «Симметрии»: перемещение горизонтальных и вертикальных линий, вращение, перемещение и фиксация фотографии, изменение масштаба, сброс изменений.

Как реализовывали: всё про процесс, инсайты и сложности

Первое, что мы сделали — изучили принцип нанесения и коррекции перманентного макияжа, чтобы продумать принцип и логику приложения. А дальше — погрузились в дизайн и разработку. На протяжении всего проекта наша команда оставалась на связи с клиентом и демонстрировала промежуточные результаты — подробнее об этом также рассказываем в кейсе.

Как обучали нейросети и почему отказались от ChatGPT

Если коротко: ChatGPT часто ошибался. Например, неправильно определял фототип кожи по Фитцпатрику.

Теперь подробнее. По идее на первой встрече с клиентом мы решили использовать ChatGPT, но через несколько недель обнаружили себя в сценарии «Хьюстон, у нас проблемы»: чем дольше мы обучали чат-бот, тем чаще он ошибался. А в какой-то момент ChatGPT просто начал отказываться определять тип кожи. Мы не могли понять, что происходит и, как оказалось, не были в этом одни — выяснилось, что пользователи всего мира сталкиваются с тем, что чат-бот иногда «ленится» и отказывается выполнять задачи. Некоторые даже называют этот феноменом сезонной депрессии ChatGPT.

Поэтому мы переключились на план Б: подобрали и внедрили «более обучаемые нейросети». Вообще работа с нейронками — самый болезненный этап проекта. Чтобы обучить AI определять фототип кожи по Фитцпатрику и определять наличие пигмента на лице, мы загрузили больше 1600 фотографий разных людей.

Обучали так: загружали фото человека, описывали его пол, расу, тип кожи, цвет волос, возраст. Главной задачей было загрузить как можно больше изображений: чем больше нейронка видит типажей, тем лучше их определяет. Причём нужно было научить определять приоритеты, потому что в начале AI больше ориентировалась на черты лица, а не на цвет кожи. Отсюда возникала путаница — AI могла определить человека одной расы как другой.

В итоге мы научили ИИ корректно распознавать 6 фототипов по Фицпатрику: кельтский, нордический, тёмный европейский, индонезийский, афроамериканский, средиземноморский.

Почему разрабатывали интерфейс камеры с нуля или что не так с камерой iPhone

Дело в том, что камера iPhone не могла отправить фото, снятое в альбомной ориентации, нейронке.

Как вообще фотография попадает из камеры в приложение NE pigments: матрица камеры определяет лицо → передает данные нейронке → она анализирует лицо, определяет фототип кожи и наличие пигмента. После этого нейронка отправляет результаты бэкенду приложения, а тот — подбирает подходящие средства или предлагает удалить старый пигмент ремувером.

И вот чтобы передать данные нейронке, нужно провести много вычислений. А всё потому что матрица камеры и изображение на экране имеют разную систему координат: если не рассчитать каждую деталь — ИИ не получит фотографию.

Загвоздка в том, что у каждого фото, снятого на фронтальную камеру iPhone, сохраняется своя ориентация: альбомная или портретная. Ориентация записывается в метаданных, то есть в самом файле изображения, где также содержится информация о дате, времени, локации съёмки и так далее — и они тоже мешают ИИ обрабатывать информацию. Это первый момент.

Идём дальше: если лицо во время съёмки было расположено в нижней правой части экрана, то на фото по умолчанию оно будет находиться в том же месте, даже если перевернуть смартфон. Происходит это на уровне операционной системы. Что, разумеется, удобно для пользователей: как ни поворачивай экран — всё отображается корректно.

Максим, разработчик:
«Мы же должны были избавиться от этого эффекта, потому что нейросеть не могла работать с фотографией альбомной ориентацией. Важно было, чтобы изображение не “переворачивалось” на уровне операционной системы и программного кода изображения.»

Поэтому никакой камеры, в её привычном понимании, в приложении нет — это имитация. Также мы использовали фонарик для имитации вспышки и добавили звук затвора.  Результат — всё выглядит настолько реалистично, что пользователи не замечают разницы.

И таких вычислений было достаточно. Ещё пример — когда пользователь получает подборку подходящих пигментов, он видит часть загруженной фотографии в верхней части экрана, то есть приложение автоматически определяет и кадрирует участок с бровью. Так вот для реализации этой небольшой детали наши разработчики тоже провели немало вычислений.

Также все экраны в «Симметрии» нужно было верстать в альбомной ориентации, то есть использовать боковую вёрстку. А боковая вёрстка сложнее обычной, потому что если, например, пользователь должен видеть на экране отступ слева, значит, нужно расположить его сверху. То есть мысленно переворачивать каждую деталь, чтобы на выходе представить изображение в альбомной ориентации.

Как работали над дизайном приложения

За основу взяли фирменный стиль NE pigments, плюс опирались на их личные предпочтения. Также по их просьбе сделали упор на визуале и по-максимуму отказались от текста. Всего вышло 4 итерации правок по дизайну.

Один из наших главных принципов — не бездумно следовать ТЗ, а предлагать улучшения, чтобы клиент получил действительно хороший продукт на выходе. Тем более, в процессе работы, периодически всплывают моменты, которые было сложно или невозможно предусмотреть в ТЗ.

Например, изначально клиент просил представить контент на этом экране только в виде иконок. Но когда мы начали разрабатывать прототип экрана, поняли, что клиентам будет сложно ориентироваться только на иконки — слишком уж не типичные на них изображения.

В чём суть: одно дело, когда речь идёт об узнаваемых образах. К примеру, абсолютное большинство поймёт, что подразумевается под иконкой с перечёркнутой сигаретой или цифрами «24/7», текст здесь не нужен. Но если человек видит изображение впервые, он как минимум тратит время на то, чтобы разобраться, а как максимум — просто не понимает, что оно значит. И чем больше таких иконок, тем сложнее воспринимать информацию. Поэтому мы предложили всё же добавить лаконичные надписи — в итоге клиент, пусть и не сразу, но согласился.

И ещё парочка инсайтов. Одной из самых непростых и интересных задач стала работа над «Симметрией» — мы добивались того, чтобы пользователи интуитивно и без подсказок понимали, как ей пользоваться. В идеале хотели представить всё так, чтобы бьюти-мастерам даже не пришлось смотреть инструкцию.

Таже на некоторых экранах нужно было уместить большое количество цветных деталей. А чем больше таких элементов, тем сложнее пользователю ориентироваться в приложении, потому что они «перекрикивают» друг друга. Мы всегда убираем лишние детали и цвета, но в этот раз нашему дизайнеру понадобилось проявить всё своё мастерство.

Как коммуницировали с клиентом во время проекта

Обычно мы созваниваемся по видеосвязи с клиентами каждые 1-2 недели и показываем промежуточные результаты. Так всем удобнее: клиент видит, что над проектом работают, а не просто отрабатывают часы, он может быстро вносить правки, а нам не нужно каждый раз всё переделывать с нуля.

Но NE pigments важно было просматривать промежуточные результаты в удобное для них время, а не в назначенный час в условном Google Meets. Поэтому мы выбрали другой формат: записывали результаты на видео и отправляли их клиенту. Так, наш дизайнер включал запись экрана → демонстрировал на экране прототипы дизайна с анимацией → комментировал их → отправлял на согласование. Обратную связь мы получали таким же способом.