Калькулятор ЛКМ
SaaS-калькулятор расхода краски с 3D-сценой и AI-перекраской фото через SAM2: 7 477 товаров, 40 641 цвет, ONNX-инференс на сервере.
Задача клиента
Перекраска стен по фото
ИИ-сегментация на сервере + резервный режим в браузере
Пользователь загружает фото комнаты, кликает по стене – и видит её в новом цвете. Выделение области делает нейросеть-сегментатор: основной режим считается на сервере, для слабых устройств есть облегчённая модель прямо в браузере (работает в фоновом потоке, не вешая интерфейс). Маска уточняется в два прохода, чтобы аккуратно ложиться по краям.
3D без тяжёлых движков
Сцена на CSS, два калькулятора
Комната и фасад дома показываются в объёме без WebGL и сторонних 3D-библиотек: каждая грань – обычный блок с CSS-трансформацией. Это лёгкий и быстрый подход, который работает даже на слабых машинах. Внутренний калькулятор (комната, ~2 700 строк) и наружный (фасад дома, ~13 000 строк) считают расход и сразу собирают список нужных банок.
Редактор плана помещения
SVG-план с привязкой к сетке, линиям и объектам
23 модуля, около 7 100 строк. Послойный SVG-план: сетка, оси, комнаты, стены, проёмы и направляющие. Бесконечная сетка с шагом 0.1 м, рисование полигонов комнат с автозамыканием, перегородки с привязкой под углы 0/45/90 и к узлам соседних стен. Площади из плана сразу идут в расчёт расхода.
const area = 25.4 // м² const consumption = 0.12 // л/м² const layers = 2 const substrate = 1.10 // штукатурка const tool = 1.00 // валик const liters = area * consumption * (substrate + (layers-1) * 1.0) * tool // → 6.4 л + 10% резерв = 7.0 л
Каталог и подбор банок
7 806 товаров, 40 641 цвет, перекрёстные фильтры
Каталог красок с фильтрами по бренду, типу, поверхности, материалу и десяткам других свойств. Счётчики у каждого фильтра считаются с учётом уже выбранных, варианты фасовки одного продукта группируются. Данные обновляются автоматически по расписанию из товарного фида, цвета – по официальным веерам брендов.
UX-решения
Мастер из 5 шагов
Расчёт разбит на понятные шаги: высота сцены подстраивается под активный шаг, недоступные шаги подсвечиваются, переходы плавные
Онбординг с подсказками
Пошаговый тур по интерфейсу с подсветкой элементов, аккуратной привязкой к экрану и блокировкой прокрутки на время подсказки
4 режима работы
Комната, фасад и фото в упрощённом и подробном вариантах; настройки сохраняются между сессиями и переживают обновления версии
Палитра перекраски
Пипетка с точным сравнением цвета, несколько слоёв-поверхностей, сравнение до/после и режимы наложения
Калькулятор расхода и подбор банок
Wizard на 5 шагов: геометрия → поверхности → окна и кровля → краска → результат. Учёт впитываемости поверхности, инструмента (валик / кисть / распылитель), числа слоёв.
PhotoPaint: AI-перекраска фото
SAM2 ONNX на сервере: клик по стене → маска за < 0.5 с. Guided filter post-processing, 5 blend modes (color, multiply, overlay, soft-light, hue).
Подбор колеровки по CIEDE2000
Цвет с фото или пипетки сравнивается с веерами брендов в Lab-пространстве. ΔE по CIEDE2000: ≤ 2.0 — практически неотличимо глазом, ≤ 5.0 — близкое, выше — заметная разница.
Технический стек
Результаты
«Мы сделали инструмент, который не просто считает литры краски, а позволяет спроектировать помещение, увидеть его в 3D и получить готовый список покупок с ценами, всё в одном окне браузера»
