Как мы сделали онлайн-примерку мебели для интернет-магазина

Задача

К нам пришёл интернет-магазин мебели на Tilda. Задача: дать покупателю посмотреть товар не в студийном интерьере из каталога, а в своей комнате.

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

Начали 26 сентября. Сейчас виджет уже запущен на сайте магазина в тестовом режиме.

Как работает онлайн-примерка мебели

Короткое видео с экрана телефона — весь путь от нажатия кнопки до готовой картинки.

Дальше то же самое по шагам.

Кнопка

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

В каталоге кнопка встаёт в один ряд с «В корзину».

На странице товара — отдельной кнопкой под ценой.

Фото комнаты

Открывается окно примерки: на телефоне во весь экран, на компьютере по центру. Снять комнату можно прямо здесь или выбрать готовое фото из галереи.

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

Место

Одно касание по фотографии — мебель встанет сюда. Можно не отмечать: тогда виджет сам ищет свободную стену и ставит низкую мебель под телевизор, а высокую — не под телевизор. С отметкой точнее.

Если на этом месте уже стоит старая мебель, есть переключатель «Заменить мою мебель»: прежняя тумба с фотографии убирается, новая встаёт на её место.

Ожидание и результат

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

Дальше — сравнение «было и стало». Под результатом стоит «В корзину»: покупатель принимает решение там же, где увидел мебель у себя дома. Рядом «Ещё вариант», «Другое фото», «Скачать» и «Поделиться».

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

Что получилось на реальных комнатах

Три комнаты, в каждой — разные товары из каталога магазина. Слева исходный снимок.

Всё, кроме примеряемой мебели, остаётся как на исходном фото: стены, двери, диван, ковёр, свет.

Это было главным требованием к результату. Нейросеть легко рисует красивую картинку и так же легко заодно перекрашивает стены и убирает диван — тогда покупатель смотрит уже не на свою комнату.

Что мы чинили

Первая версия работала «в целом нормально» — и именно это было проблемой.

Нейросеть убирала диван, чтобы освободить место

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

Добавили в запрос прямое требование сохранить все предметы, которые есть в кадре. И включили автоматическую сверку результата с исходным фото: если за пределами области, куда ставили мебель, картинка изменилась слишком сильно — результат бракуется и запускается повтор. Покупатель видит только то, что прошло проверку.

Светлый ореол на однотонных стенах

Готовая мебель вклеивается в исходное фото, чтобы остальная комната осталась нетронутой. Если стена и фасад близки по цвету, граница вклейки плыла: сбоку от тумбы появлялся светлый ореол.

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

Две примерки одновременно перетирали друг другу фото

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

Поймали только на параллельном прогоне. Имена сделали гарантированно уникальными.

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

Что под капотом

Между нажатием кнопки и картинкой происходит несколько шагов, о которых покупатель не знает:

• товар вырезается из студийного фото и подаётся как образец — чтобы в комнате оказалась именно эта модель с её фасадом и фурнитурой;

• ширина, высота и глубина берутся из карточки, поэтому мебель встаёт в масштабе комнаты;

• результат проверяется автоматически до показа покупателю;

• если основной сервис генерации молчит дольше ожидаемого, запрос уходит в запасной — покупатель этого не замечает.

На телефоне

Мобильный сценарий делали основным: комнату снимают там, где находятся.

Окно во весь экран, главные кнопки внизу.

• две кнопки вместо одной — открыть камеру или выбрать готовое фото;

• снимок уменьшается на устройстве перед отправкой, поэтому работает и на слабом интернете;

• если телефон держали боком или вверх ногами, фотография разворачивается сама;

• снятая комната запоминается — следующий товар примеряется без повторной съёмки.

Что получил магазин

Кроме кнопки для покупателя — админка под своим логином:

• Режим виджета: включён для всех, тестовый (кнопку видит только тот, кто открыл сайт по особой ссылке) или выключен. Переключается за секунды, в сайте ничего трогать не нужно.

• Лимиты: сколько примерок доступно одному покупателю, сколько вариантов одного товара, сколько запросов с одного адреса в час и сколько всего за сутки. Это потолок расходов и защита от автокликеров.

• Статистика: сколько примерок, по каким товарам, сколько занимало ожидание.

• Оценки: покупатель может оценить результат и указать причину. Видно, у каких товаров примерка выходит хуже.

• Фразы ожидания: правятся без программиста.

Отдельная ссылка «только просмотр» открывает статистику без кнопок управления — её можно дать маркетологу, не передавая доступ к настройкам.

События примерки уходят целями в Яндекс.Метрику магазина: видно, добавил ли покупатель товар в корзину и оформил ли заказ после примерки.

Фото комнат покупатель отправляет, подтвердив согласие на обработку. Файлы удаляются через сутки.

Подключение и сроки

Виджет ставится одной строкой кода — на Tilda это вставка кода в настройках сайта, на других платформах тот же тег в шаблоне.

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

Онлайн-примерка одежды

Механика переносится: фотография покупателя, товар из каталога, генерация, результат с кнопкой покупки. Меняются две вещи.

Образец. У мебели это вырезанный предмет, у одежды — вещь с её кроем и тем, как она лежит на фигуре. Готовить дольше.

Проверка. У мебели проверяем масштаб и то, что комната осталась прежней. У одежды добавляется посадка: вещь должна сесть на фигуру, а не быть пририсована поверх. Требования строже, времени нужно больше.

Покупатель при этом видит не модель на подиуме, а себя.

Хотите такую примерку у себя

Напишите в телеграм — @vakhtang_p. Покажу рабочее демо, посмотрим ваш каталог и платформу, разберём, что получится сделать, за какой срок и во сколько обойдётся.