aicoding.amAI Coding Studio
Назад в блог
AI Engineering / Computer Vision

AR-примерка маникюра в браузере: MVP на React, Vite, MediaPipe и Canvas2D

Browser-based virtual manicure try-on MVP для beauty-бизнеса и интерактивных сайтов

Live camera UX, MediaPipe hand tracking, Canvas2D overlays и PNG nail assets

Computer vision proof of work от AI-разработчика и AI coding studio в Армении
AR try-on, beauty tech AI, browser computer vision и AI-assisted product development
ТемаAR Nail Try-On
ФокусBrowser CV MVP
СтатусMVP / VERIFIED
AR-примерка маникюра в браузере: MediaPipe hand tracking, Canvas2D и PNG-ногти Blue Ocean Navy
AR-примерка маникюра в браузере: MediaPipe hand tracking, Canvas2D и PNG-ногти Blue Ocean Navy
AR_NAIL_TRY_ON.LOG
$ npm run dev -- --host 127.0.0.1
> VITE ready at http://127.0.0.1:5173/
> camera: active
> canvas: 1280x720
> tracking: MediaPipe Hand Landmarker
> active style: Blue Ocean Navy #426
Разбор

Этот материал - инженерный разбор MVP, который мы собрали для идеи AR-примерки маникюра в браузере. Проект показывает, как AI-разработчик в Армении, AI developer in Yerevan, AI coding studio и команда product engineering могут быстро превратить неясную гипотезу из beauty-бизнеса в работающий browser-based computer vision prototype.

Идея продукта простая для пользователя и сложная для реализации: человек открывает сайт маникюрного салона, включает камеру, показывает руку, а система автоматически находит пальцы и визуально примеряет разные ногти. Для салона это может стать сильной digital-фичей: клиент видит Rose Tan #153, Blue Ocean Navy #426 или другие дизайны не на абстрактной карточке товара, а прямо на своей руке.

С технической стороны это не просто "поставить картинку на видео". Нужно решить несколько задач одновременно:

  • получить доступ к камере в браузере;
  • определить руку и 21 landmark пальцев;
  • понять, где должен находиться ноготь;
  • построить форму ногтя для большого, указательного, среднего, безымянного пальца и мизинца;
  • вставить цвет, texture или PNG-дизайн;
  • не отправлять кадры на сервер;
  • сделать UX пригодным для сайта;
  • оставить возможность ручной корректировки посадки;
  • не обещать больше, чем MVP реально умеет.

Именно поэтому стек был выбран прагматично: React, Vite, TypeScript, MediaPipe Tasks Vision, Canvas2D и статическая HTTPS-страница без backend. Это не тяжелое native-приложение, не Unity, не WebGL-проект и не custom ML pipeline. Это AI MVP для beauty tech, который можно встроить в сайт и постепенно улучшать.

Почему это важно для AI Armenia и локального бизнеса в Ереване

Для рынка Armenia, Yerevan, CIS и локальных сервисных бизнесов AI часто звучит абстрактно: chatbot, automation, RAG, LLM, AI agents. Но реальная ценность появляется там, где AI и computer vision создают понятный пользовательский сценарий. AR nail try-on для маникюрного салона - хороший пример такого сценария.

Пользователь не думает про MediaPipe, Canvas2D, landmark smoothing или PNG clipping. Он видит:

  • "я могу примерить маникюр";
  • "цвет выглядит примерно так на моей руке";
  • "мне легче выбрать дизайн";
  • "салон выглядит технологично";
  • "это не обычная страница услуг, а интерактивный AI experience".

Для сайта aicoding.am такой кейс важен как proof of work: AI developer Armenia, AI developer Yerevan, AI coding studio Armenia, custom AI development, browser computer vision MVP и AI-assisted product development показываются не словами, а рабочей системой.

Исходная задача

Первичная формулировка была не как формальная спецификация, а как продуктовая идея:

  • человек подносит руку к камере;
  • алгоритм видит пальцы и ногти;
  • система вставляет другие ногти вместо настоящих;
  • нужны готовые PNG-ногти;
  • особенно важен случай, когда ладонь повернута к камере: ногти не должны неестественно лежать поверх пальцев;
  • нужно сделать MVP, который потом можно встроить в сайт.

Из этого мы сформулировали технический план:

  • live camera first, а не photo upload;
  • Vite React TypeScript;
  • MediaPipe Hand Landmarker для отслеживания руки;
  • Canvas2D overlay поверх video;
  • landmark-derived nail masks вместо отдельной ML-модели сегментации ногтя;
  • optional calibration;
  • PNG support как демонстрационный режим;
  • local privacy: кадры не уходят на сервер;
  • статический production bundle для HTTPS hosting.

Это важный принцип AI product development: сначала не строить идеальную систему распознавания ногтевой пластины, а собрать MVP, который доказывает сценарий и выявляет реальные проблемы на камере.

Архитектура MVP

Технически MVP оформлен как Vite React app: это обычная frontend-страница, которую можно поднять локально, собрать в статический bundle и затем встроить в сайт или посадочную страницу салона.

Ключевая структура:

  • src/App.tsx - demo shell, registry стилей и default style;
  • src/ar/NailTryOnWidget.tsx - главный embeddable-компонент;
  • src/ar/handTracker.ts - загрузка MediaPipe model и inference wrapper;
  • src/ar/nailGeometry.ts - геометрия ногтей из landmarks;
  • src/ar/nailRenderer.ts - Canvas2D rendering;
  • src/ar/calibration.ts - per-finger calibration и localStorage;
  • src/ar/types.ts - типы NailStyle, NailMask, TrackedHand;
  • public/models/hand_landmarker.task - self-hosted MediaPipe model;
  • public/wasm/ - self-hosted MediaPipe WASM runtime;
  • public/nails/ - PNG-ассеты для примерки.

Система работает в браузере. Backend для v1 не нужен. Это важно для privacy, скорости разработки и простоты интеграции в сайт.

Camera flow

Камера запускается только после действия пользователя. Это нужно для мобильных браузеров и для UX доверия. MVP использует getUserMedia с несколькими fallback-пресетами:

  • ideal 1280x720, 30 FPS;
  • fallback 960x540;
  • fallback 640x480.

Видео идет в <video>, а overlay рисуется в <canvas>. Canvas подстраивается под фактический размер видеопотока. В Chrome проверке активный stream давал 1280x720.

Компонент умеет:

  • стартовать камеру;
  • остановить stream и вызвать track.stop();
  • закрыть MediaPipe tracker;
  • очистить canvas;
  • показать status: idle, loading, ready, detecting, lost, error.

Это не просто demo: для website embedding важно корректно освобождать камеру, не оставлять активные tracks и не ломать страницу после остановки.

Hand tracking: MediaPipe Hand Landmarker

Для распознавания руки используется @mediapipe/tasks-vision. Модель лежит локально в public/models/hand_landmarker.task, runtime WASM - в public/wasm.

Решение self-hosted:

  • не зависит от CDN в production;
  • проще контролировать deployment;
  • лучше подходит для статического HTTPS-сервера;
  • стабильнее для MVP, который должен жить внутри сайта.

Tracker настроен на одну руку:

  • numHands: 1;
  • running mode: VIDEO;
  • CPU delegate;
  • detection/presence/tracking confidence около 0.55-0.58.

Render loop ограничивает частоту inference, а canvas может перерисовываться чаще. Это стандартный компромисс для browser computer vision: не перегружать CPU, но сохранить визуальную отзывчивость.

Nail geometry: как из landmarks получить ногти

MediaPipe не дает границу ногтя. Он дает landmarks руки: wrist, MCP, PIP, DIP, TIP и другие точки. Поэтому MVP строит nail masks параметрически.

Для каждого пальца берутся DIP и TIP:

  • axis идет от DIP к TIP;
  • across перпендикулярен axis;
  • длина distal phalanx дает масштаб;
  • ширина оценивается из расстояний между суставами;
  • итоговая форма строится как Path2D.

После нескольких итераций простая форма была заменена на более женственную модель, основанную на параметрах:

  • L - длина ногтевой пластины;
  • W0 - ширина у основания;
  • Wm - ширина в середине;
  • W1 - ширина у кончика;
  • R0, Rm, R1 - радиусы поперечной кривизны;
  • dBase - глубина дуги кутикулы;
  • dTip - округление кончика;
  • E - видимое выступание ногтя.

В Canvas2D используется 2D-часть этой модели: ширина по длине, U-образная кутикула и мягкий округлый кончик. Радиусы сохранены в модели как база для дальнейшего 3D/шейдинг развития, но текущий MVP остается Canvas2D.

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

Посадка ногтя относительно TIP

Важная часть итераций была вокруг того, где начинать ноготь. Визуально пользователь ожидал, что верхняя tracked TIP-точка пальца будет связана с нижней частью ногтя. В коде это выразилось через nailAnchorDropRatio.

Сейчас посадка сдвинута ниже TIP на 25% высоты ногтя. Это не абсолютная медицинская истина, а MVP-эвристика, которую удобно дальше калибровать в live Chrome.

Почему так:

  • MediaPipe TIP часто находится на конце пальца, а искусственный длинный ноготь должен начинаться ниже;
  • у PNG-ногтей есть собственная высота и свободный край;
  • если ставить PNG прямо по TIP, он выглядит слишком высоко;
  • если опустить слишком сильно, ноготь начинает сидеть как наклейка на фаланге.

Именно поэтому включены landmarks по умолчанию: видно, где TIP, DIP, PIP и как маска ложится на палец.

PNG product rendering: Rose Tan #153 и Blue Ocean Navy #426

Самый важный продуктовый поворот: пользователь попросил не просто цвет, а точную вставку PNG-продукта. Были добавлены два ассета:

  • Rose Tan #153;
  • Blue Ocean Navy #426.

PNG были получены из скриншотов. Обработка была только техническая:

  • удалить белый фон через edge-connected background removal;
  • сохранить внутренние highlights;
  • оставить прозрачные углы;
  • обрезать лишние поля;
  • не перекрашивать;
  • не дорисовывать искусственные блики поверх PNG.

Это принципиально. Для salon, beauty tech и e-commerce важно показывать реальный визуал продукта, а не приближенный цвет. Поэтому для PNG-стилей renderer не добавляет synthetic contour, highlight или recolor.

В NailStyle добавлено поле:

ts
pngFit?: 'contain' | 'cover'

Для точных product PNG используется contain. Это значит, что исходная картинка сохраняет пропорции и целиком попадает в маску. Затем canvas clipping ограничивает ее формой ногтя.

Почему Canvas2D, а не Three.js

Для первого MVP Canvas2D лучше:

  • быстрее собрать;
  • меньше runtime complexity;
  • проще отлаживать в Chrome;
  • достаточно для live camera overlay;
  • легче встроить в обычный сайт;
  • нет необходимости в WebGL pipeline на первом этапе.

Three.js или WebGL могут понадобиться позже, если мы захотим:

  • реалистичный 3D curvature;
  • physically-based highlights;
  • depth mesh;
  • более точное наложение на разные углы пальца;
  • nail segmentation model;
  • hand surface reconstruction.

Но для MVP цель другая: доказать, что browser AR manicure try-on может работать на сайте.

Palm-facing behavior: ладонь к камере

Один из самых сложных UX-моментов - когда человек показывает ладонь. В реальности ногти находятся на обратной стороне пальцев. Если камера видит ладонь, overlay не должен просто лежать поверх пальцев.

Изначально обсуждалась более сложная логика:

  • скрывать только часть ногтя;
  • оставлять видимый свободный кончик длинного ногтя;
  • использовать собственный палец как occluder;
  • строить matte из finger capsules.

Но для текущего MVP пользователь выбрал более простое и надежное поведение: если hand pose считается palm-facing, ногти исчезают. Это дешевле, стабильнее и меньше ломает восприятие, чем полу-работающая "магия за пальцем".

В будущей версии можно вернуться к partial occlusion, но только после более надежного определения ориентации пальцев и, возможно, depth/segmentation logic.

Calibration и ручная настройка

MVP поддерживает optional edit mode. Пользователь может:

  • выбрать конкретный ноготь;
  • двигать посадку;
  • менять width scale;
  • менять height scale;
  • менять rotation;
  • reset fit.

Calibration хранится локально в браузере через localStorage. Аккаунты, backend и синхронизация в MVP не нужны.

Это важно, потому что руки у людей разные. Абсолютная универсальная посадка невозможна без более сильной модели. Но calibration позволяет быстро исправить ошибку на конкретной руке и проверить UX.

Privacy-first архитектура

Кадры камеры не отправляются на сервер. Обработка идет локально:

  • video stream живет в браузере;
  • MediaPipe inference работает на клиенте;
  • Canvas2D overlay рисуется локально;
  • PNG assets загружаются как обычные static files;
  • calibration хранится в localStorage.

Для AI Armenia, AI developer Yerevan и локальных бизнесов это важный selling point: интерактивная AI-фича не обязана сразу становиться риском по privacy. MVP можно показать клиентам без backend, без хранения изображений, без обработки персональных данных на сервере.

Что уже проверено

Проверки:

bash
npm run build
npm run lint

Обе команды проходили после последних изменений.

Chrome QA:

  • локальная страница открыта на http://127.0.0.1:5173/;
  • камера запускается;
  • active style: Blue Ocean Navy #426;
  • landmarks включены;
  • canvas активного stream: 1280x720;
  • tracking работает;
  • PNG отображается на ногтях.

Известный console noise:

text
INFO: Created TensorFlow Lite XNNPACK delegate for CPU.

Он появляется как error-level log, но в текущей проверке не означал падение.

Что не нужно преувеличивать

Это важная часть инженерного контента. Нельзя говорить, что MVP уже идеально распознает реальные границы ногтя. Он этого не делает.

Правильные claims:

  • browser-based AR nail try-on MVP;
  • MediaPipe hand tracking;
  • landmark-derived nail masks;
  • Canvas2D overlay;
  • exact PNG product preview with clipping;
  • local camera processing;
  • optional calibration;
  • static HTTPS deployment ready in principle.

Неправильные claims:

  • "идеальное распознавание ногтевой пластины";
  • "медицински точная геометрия";
  • "точное соответствие цвета лака";
  • "production-ready mobile AR";
  • "полная сегментация руки и ногтя";
  • "универсальная посадка для всех рук без калибровки".

Эта честность полезна и для SEO, и для доверия. AI developer Armenia, AI development Yerevan, computer vision developer, AR try-on engineer - все эти запросы должны вести не к пустому marketing claim, а к доказуемому инженерному результату.

Почему это хороший кейс для aicoding.am

Этот проект хорошо ложится в позиционирование aicoding.am:

  • AI-assisted product development;
  • vibe coding with engineering discipline;
  • browser computer vision;
  • custom AI MVP for business;
  • practical React development;
  • production-minded prototype;
  • AI developer in Armenia;
  • AI coding studio in Yerevan;
  • automation and product engineering.

Кейс показывает не просто "мы умеем писать React". Он показывает полный цикл:

  1. Из нечеткой идеи выделить MVP.
  2. Найти подходящий existing AI/CV runtime.
  3. Не переусложнять ML-модель в v1.
  4. Сделать live camera UX.
  5. Итеративно править геометрию по скриншотам.
  6. Добавить exact product PNG rendering.
  7. Проверить через Chrome.
  8. Зафиксировать архитектурные решения, ограничения MVP и проверочные команды, чтобы следующая итерация разработки не начиналась заново.

Для клиента это сильнее, чем абстрактная фраза "мы внедряем AI". Здесь видно, как AI coding превращается в конкретный интерфейс.

Ключевые SEO-сущности

Эта статья должна помогать по запросам:

  • AI разработчик в Армении;
  • AI разработка Ереван;
  • AI developer Armenia;
  • AI developer Yerevan;
  • AI coding studio Armenia;
  • AI product development Armenia;
  • AI для бизнеса Армения;
  • computer vision developer Armenia;
  • AR try-on app development;
  • AR примерка маникюра;
  • виртуальная примерка ногтей;
  • AI для маникюрного салона;
  • beauty tech AI;
  • MediaPipe React developer;
  • Vite React computer vision app;
  • browser-based AI MVP;
  • custom AI development for beauty salons.

Но важно использовать эти keywords естественно. Статья должна ранжироваться не за счет keyword stuffing, а за счет entity coverage: Armenia, Yerevan, AI developer, React, MediaPipe, computer vision, AR try-on, beauty salon, manicure, Canvas2D, Vite, TypeScript, privacy-first, static hosting, MVP.

Следующие инженерные шаги

Чтобы превратить MVP в более сильный demo для сайта или клиента, следующие шаги:

  1. Проверить mobile Safari и Android Chrome.
  2. Подстроить palm-facing thresholds по реальным live poses.
  3. Сделать режим "debug off" для публичной демонстрации.
  4. Добавить больше PNG-продуктов из каталога салона.
  5. Улучшить пер-палец fitting для разных длин ногтей.
  6. Добавить screenshot capture для клиента.
  7. Проверить HTTPS hosting и camera permissions.
  8. Добавить copy: "visual preview only, color may vary by lighting and screen".
  9. Рассмотреть segmentation model, если landmark masks перестанут хватать.
  10. Подготовить embeddable API для сайта салона.

Итог

Мы уже сделали working MVP: browser-only AR Nail Try-On на React, Vite, TypeScript, MediaPipe и Canvas2D. Система запускает камеру, отслеживает руку, строит параметрические nail masks, вставляет точные PNG-ногти, поддерживает calibration, не отправляет кадры на сервер и проходит build/lint.

Это не финальная commercial AR-платформа, но это реальный AI product prototype. Для aicoding.am это сильный кейс в направлении AI Armenia, AI developer Yerevan, custom AI development, computer vision MVP, browser AR и AI-assisted product development для локального бизнеса.

Главный результат: из идеи "человек подносит руку, а сайт примеряет ногти" получился работающий инженерный фундамент, который можно развивать в production-ready beauty tech feature.

Business use

Где это применимо

Beauty salons, e-commerce и interactive websites с практическим AI MVP

Этот кейс полезен локальным сервисным бизнесам, которые хотят проверить computer vision идею на сайте до инвестиций в полноценное AR-приложение или custom ML model.

  • Маникюрные салоны и beauty-бизнесы, которым нужна виртуальная примерка или interactive product preview.
  • Основатели, которые хотят протестировать browser-based computer vision перед mobile app или custom segmentation.
  • Команды, которые ищут AI-разработчика в Армении или Ереване для практического MVP.

Обсудить AI-автоматизацию