Калькулятор ЛКМ
SaaS-калькулятор расхода краски с 3D-сценой и AI-перекраской фото через SAM2: 7 477 товаров, 40 641 цвет, ONNX-инференс на сервере.
Задача клиента
PhotoPaint — AI-перекраска фото
Серверный SAM2 ONNX + клиентский SlimSAM fallback
Серверный SAM2 Hiera Small ONNX (encoder 155MB + decoder 20MB) с CPU Execution Provider (4×4 threads). Endpoint flow: POST /sam/encode (multipart, лимит 20MB) кэширует embeddings в _cache[session_id] (TTL 600s, MAX 20) → POST /sam/decode (JSON points с label 0/1) делает 2 prediction passes (iterative refinement). Маска возвращается base64. Fallback в браузере: Xenova/slimsam-77-uniform (5.5M params, ~25MB) через @huggingface/transformers в Web Worker.
3D без Three.js
CSS perspective + preserve-3d, 2 калькулятора
Inside и Outside калькуляторы используют только CSS для 3D — каждый face это <div> с transform: rotateX/Y(...) translateZ(...). Inside (room3d/, 10 файлов, 2 773 LOC): camera, front_wall, paint, highlight, geometry, wall_nodes, floor_drag, apartment, controls. Outside (10 файлов, ~13 469 LOC): house3d.js — стены/крыша/цоколь/террасы/крыльцо/навесы; outside-ui-facade.js — UI фасадов A/B/C/D; outside-ui-calc.js — расчёт расхода и подбор банок.
Floorplan2D-редактор
SVG-план с snap к сетке/линиям/объектам
23 модуля, ~7 400 LOC. SVG-слои: layerGrid → layerAxes → layerRooms → layerWalls → layerOpenings2D → layerWallHits → layerGuides. Pattern-based «бесконечная» сетка (gridMinor 0.1м, gridMajor 1.0м). Polygon_draw: isDrawing, points[], previewLine, snap к сетке GRID_SNAP_M=0.1, замыкание при ≤15px к первой точке. Wall_draw: snapToGrid/snapToStraightLine (углы 0/45/90/135) / snapToObjects (углы комнат, середины стен), tolerance 0.05м.
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 л
Каталог + Feed-синхронизация
7 477 товаров, 40 641 цвет, кросс-фильтрация
5 FastAPI-роутеров (products / colors / brands / categories / sam) + /health + /stats. Products: 18 фильтров, grouped/grouped-by-key endpoints, packs (варианты фасовок через очищенный product_key), filters с cross-filtering (каждое поле = отдельный SQL). Cron: ежедневный update_feed.sh (01:00) скачивает mirkrasok.ru фид, нормализованный md5 → import_feed.py → map_brands.py. Еженедельный update_colors.sh (вс 02:00).
UX-решения
Wizard на 5 шагов
446 LOC, авто-резайз viewport под активный шаг, drag-handle для расширения, поддержка disabled-шагов, ANIM_MS=350мс
Tour-онбординг
789 LOC, coach-marks с placement:auto, 4 маски (N/E/S/W) + кольцо подсветки, fit/flip/clamp к viewport, lockScroll
4 режима
inside / outside / photo × simple / advanced. localStorage paint-calc-v19 — сохранение между версиями
PhotoPaint-палитра
CIEDE2000-пипетка, multi-surface слои, split-view, blend modes color/multiply/overlay/soft-light/hue
Калькулятор расхода и подбор банок
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 и получить готовый список покупок с ценами — всё в одном окне браузера»
