😝 вайбкод для Йоты

В Йоте постепенно обновляется стиль. Целевая аудитория зумеры, поэтому фотки и 3д чуть-чуть всратые. Это хорошо видно на странице Архива — штука, где абоненты могут делиться своими тарифами и лутать с этого деньги

Для тарифов в Архиве используются коллажные аватарки, которые можно собрать в конструкторе. Этот стиль постепенно перетекает в основной личный кабинет, поэтому пока копалась с задачей по профилю решила реализовать идею:

Что если не собирать аватар из кусков чужих фото, а дать пользователям возможность делать аватарку на основе своего лица

Короче, села на выходных и завайбкодила в клоде за час генератор аватарок на JS. Шаги такие:
— обсудила с иишкой идею
— скинула векторные фоновые формы, маски для рта и глаз, куда должны подставляться фото
— поделилась через мср фигмой, где лежит позиционирование кусочков
— по ui обозначила только акцентный цвет

Что получилось вы видите на видосе и можете попробовать сами. В комментах оставила файл, который можно открыть на компе в хроме

Из интересного. Получилось реализовать распознавание лица (я думала это будет сложно), если я покажу фак, то он не будет делать из него аватар. Распознавание работает на основе MediaPipe Face Landmarker. Это готовая модель от Google, которая работает в браузере пользователя. А еще если сфоткаться с наклоном головы, то он глаза или рот выровняются для финальной аватарки

Короче, вот такой кейсик персонализации. Поделилась с менеджером, будем узнавать, можно ли это будет реально адаптировать для лк