Разработка веб-приложений — удалённая работа в Москве

Разработка с нуля. Устройства для масштабирования: смартфоны. Техническое задание на разработку веб-приложения “Seletti Hybrid Face“ для выставки 1. Общие сведения Цель проекта: Создать развлекательный веб-сервис для посетителей стенда компании на выставке MosBuild 2026. Суть механики: Два пользователя создают совместный цифровой коллаж. Их лица, сфотографированные по отдельности, соединяются в единое целое (левая и правая половина) и вписываются в дизайн тарелок из коллекции Seletti Hybrid. Платформа: Мобильный веб-сайт (Web App), работающий в браузере смартфона (Safari, Chrome) без установки приложения. 2. Пользовательский сценарий (User Flow) 1. Вход: Посетители сканируют QR-код на стенде. 2. Лендинг: Открывается приветственная страница с кратким описанием и кнопкой «Начать». 3. Съемка Первого участника: * Открывается интерфейс камеры. * На экране отображается маска-трафарет (контур половины лица и головы). * Важно: Трафарет имеет четкие метки: линия роста волос и подбородок. * Пользователь совмещает свое лицо с трафаретом. * Делается фото (автоматически при фиксации или по кнопке). 4. Съемка Второго участника: * На экране отображается результат первого фото (одна половина заполнена, вторая пустая или полупрозрачная). * Второй участник совмещает свое лицо с трафаретом для второй половины круга. * Производится съемка. 5. Генерация: * Система обрабатывает фото. * Обработка ИИ (опционально, но желательно): Удаление реального фона за спинами людей. * Лица склеиваются в центре. * На задний план подставляется одна из текстур тарелок Seletti Hybrid. 6. Результат: * Пользователь видит готовое изображение: «Тарелка» с двумя половинками лиц. * Кнопки: «Скачать» (сохранить в галерею), «Поделиться», «Попробовать еще раз». 3. Технические требования 3.1. Фронтенд (Клиентская часть) * Технологии: HTML5, CSS3, JavaScript (React, Vue или чистый JS). * Работа с камерой: Использование getUserMedia API для доступа к камере прямо в браузере. * Ориентация: Только вертикальная (Mobile Portrait). * Кроссбраузерность: Корректная работа в iOS (Safari) 15+ и Android (Chrome). 3.2. Логика обработки изображений и ИИ (Computer Vision) Это критическая часть для качества картинки. Исполнитель должен реализовать: 1. Детекция лица (Face Detection): Использовать библиотеки типа MediaPipe Face Mesh или face-api.js. * Зачем: Чтобы система понимала, где находятся ключевые точки (подбородок, лоб, глаза) и помогала пользователю (или автоматически кропала фото), подгоняя масштаб лица под идеальный шаблон. Просто «попасть в кружочек» пользователю сложно, нужен софт-ассистент. 2. Удаление фона (Background Removal): * Требование: Поскольку съемка идет на выставке (где много визуального шума), необходимо автоматически вырезать людей и помещать их на чистый фон тарелки. * Решение: Использование нейросети для сегментации (например, Rembg на сервере или MediaPipe Selfie Segmentation на клиенте). 3.3. Бэкенд (Серверная часть) * Генерация итоговой картинки (сборка слоев: Фон тарелки + Лицо 1 + Лицо 2 + Логотип) может происходить как на клиенте (Canvas), так и на сервере (Python/Node.js). * Рекомендация: Серверная генерация предпочтительнее для высокого качества скачиваемого файла. 3.4. Дизайн и Ассеты * Заказчик предоставляет: логотипы, шрифты, изображения тарелок Seletti Hybrid в высоком качестве (исходники для фона). * Исполнитель разрабатывает: интерфейс веб-приложения (UI/UX). 4. Требования к исполнителю * Опыт работы с WebAR или веб-приложениями с использованием камеры. * Опыт работы с Canvas API и манипуляциями с изображениями. * Понимание работы нейросетей для веба (TensorFlow.js, MediaPipe) будет преимуществом. 5. Оценка сроков и стоимости Просьба предоставить оценку: 1. Стоимость разработки под ключ. 2. Сроки реализации. 3. Стоимость поддержки сервера (если требуется) на время выставки.