Кейсы / 03
Сервис изображений и видео для карточек на маркетплейсах
Продавец загружает фото товара и пару строк о нём, а получает готовую инфографику, ИИ-фото и видео под требования площадок. Сделано целиком: от движков генерации и рендера до тарифов, оплаты и админки.
- роль
- Full-stack, единственный разработчик
- срок
- 12 дней до готовности к запуску
- год
- 2026
- формат
- SaaS с подпиской, лендинг, кабинет, админка
задача
Продавцу на Wildberries, Ozon или Я.Маркете на каждый товар нужно несколько изображений: главное фото, преимущества, характеристики, размеры, а теперь ещё и видео. Дизайнер делает это днями, шаблоны в графических редакторах требуют навыков. Заказчик хотел сервис, который собирает всё это из одного фото товара.
Главная сложность — текст. Модель изображений, которая рисует инфографику целиком, искажает кириллицу, а такую картинку потом не поправить. Вторая — экономика: каждый вызов модели стоит денег, а бесплатный пробный доступ без регистрации притягивает ботов.
решение
Инфографика собирается не картинкой, а настоящей вёрсткой. Карточка описана деревом из 17 типов блоков с правилами: в какие зоны холста блок можно поставить, сколько в нём символов, какой нужен контраст. Любая правка — от модели или от пользователя в редакторе — проходит одну и ту же проверку правил, поэтому сломать карточку нельзя. Правила реализованы дважды, на TypeScript в браузере и на PHP на сервере, и сверяются общими эталонными тестами. Языковая модель пишет тексты по фактам продавца и пошагово выбирает дизайн из вариантов, а финальную проверку делает настоящий браузер: не влез текст — система сама ужимает и перерисовывает.
Премиум-режим — ИИ-агент, который верстает карточку с нуля на HTML и Tailwind. Его код проходит белый список тегов и свойств и рендерится в песочнице без скриптов и сети. На отрисованной карточке автоматически проверяются вылезший и обрезанный текст, наложения и контраст по реальным пикселям; проблемы вместе со скриншотом уходят агенту на доработку, побеждает лучшая итерация в пределах бюджета времени.
Для видео есть два пути. Анимация самой вёрстки: 30 клипов, 5 стилей, переходы между карточками, а один и тот же код строит превью в кабинете и mp4 на сервере, поэтому пользователь видит ровно то, что скачает. И ИИ-видео по фото через API с асинхронным опросом. Фон с фото товара вырезается своей нейросетью на сервере, без внешних вызовов.
Деньги — через кредиты: лоты с разными сроками жизни и неизменяемый журнал операций. Кредиты резервируются вместе с созданием задачи и списываются только за то, что получилось; повторный клик не спишет дважды. Вебхукам платёжного шлюза система не верит на слово и перечитывает статус платежа под блокировкой. Очереди разделены по ресурсам и тарифам, а гостевые задачи крутятся на отдельных обработчиках и не могут занять мощности платных пользователей.
как работал
Монорепозиторий: API, кабинет, лендинг, рендер-сервис, сервис вырезки фона и общие пакеты, всё в Docker и через один Justfile. Тяжёлые и внешние зависимости — модели, рендер, вырезка, платежи — спрятаны за интерфейсами, в тестах работают подделки, а случайный сетевой запрос из теста падает. Каждый вызов модели пишется в журнал с задержкой и токенами, а провайдеры и модели для каждой роли переключаются в админке без деплоя.
результат
Для заказчика это значит: продавец получает инфографику с чистыми редактируемыми текстами без дизайнера, пробует сервис на своём товаре без регистрации, а внешние расходы на модели держатся под контролем лимитов и журнала.
За 12 дней один инженер собрал готовую к запуску систему: 20 моделей данных, больше сотни API-маршрутов, около 300 автотестов, лендинг, кабинет с редактором карточек и админку на 10 разделов, 88 шаблонов. До запуска остаются внешние вещи на стороне заказчика: юрлицо, боевые ключи платёжного шлюза и почтового провайдера.
стек подробно
- фронтенд
- Vue 3, TypeScript, Pinia, shadcn-vue (Reka UI), Tailwind CSS; лендинг на Astro с Vue-островами
- бэкенд
- Laravel 13, PHP 8.5, Octane (Swoole), Sanctum, Horizon, laravel/ai
- данные
- PostgreSQL, Redis (очереди по ресурсам и тарифам, кэш)
- realtime
- Laravel Reverb (WebSocket) с откатом на опрос при обрыве связи
- рендер
- Свой сервис на Bun, Playwright Chromium и ffmpeg — PNG карточек, покадровое видео, поиск иконок по-русски
- ИИ
- Языковые модели для текстов, выбора дизайна, ревизии и вёрстки; модели изображений и видео через API; роли и резервные модели в админке, журнал всех вызовов
- обработка фото
- Вырезка фона на rembg и BiRefNet в отдельном контейнере, imgproxy с подписанными URL и водяным знаком
- платежи
- Платёжный шлюз с подписками и автопродлением; кредиты на лотах, резерв и списание, неизменяемый журнал
- защита
- Гостевые лимиты по cookie, отпечатку и IP, капча при всплесках, очистка скрытых Unicode-символов, проверка ввода моделью параллельно генерации
- инфраструктура
- Docker Compose, OpenResty, VPS; рендер и вырезка во внутренней сети без выхода наружу
- качество
- Pest (≈270 тестов), Bun test с общими эталонами для TS и PHP, Pint, vue-tsc, astro check