Developer revealed how he built Roomify — an AI interior visualizer on React and Puter

Фулл-стек-разработчик Андрей показал, как собрал Roomify — веб-приложение, которое превращает обычный план помещения в фотореалистичный 3D-рендер за несколько секунд. Проект интересен не только результатом, но и архитектурой: вместо классического бэкенда он использует React на клиенте и платформу Puter для хранения файлов, KV-данных, serverless workers и вызовов AI-моделей.

Архитектура без сервера В основе

Roomify лежит довольно современный, но при этом прагматичный стек: React 19, TypeScript, React Router 7, Vite, Tailwind CSS, Lucide React и SDK Puter.js. Автор выбрал Puter не как дополнительный сервис, а как фактическую замену отдельному серверу.

Платформа даёт файловое хранилище, key-value базу, serverless workers и доступ к AI-моделям прямо из браузера. За счёт этого проект можно было собрать быстрее, не тратя время на DevOps, настройку API-слоя и поддержку собственной серверной инфраструктуры. Поток данных выглядит так: пользователь загружает план помещения в браузере, фронтенд отправляет файл в Puter, получает публичный URL и передаёт его worker-функции создания проекта.

Если нужен рендер, запускается отдельный worker ai.render3d, который забирает исходное изображение, формирует промпт, обращается к модели Claude или Gemini, сохраняет готовую картинку обратно в файловое хранилище и обновляет метаданные проекта в KV. В результате клиент получает почти полноценный API без собственного сервера и общается с ним через вызовы **puter.

action**.

Как генерируется интерьер Сердце Roomify — функция генерации 3D-вида по 2D-плану.

В worker автор описывает сцену текстом: просит модель учесть стены, окна, двери, подобрать ракурс, добавить мебель, материалы, свет и тени, а затем вернуть изображение в стиле профессиональной архитектурной визуализации. Такой подход не требует ручной настройки сцены в Blender или 3ds Max и позволяет показать заказчику понятный результат заметно быстрее, чем при классическом пайплайне интерьерного рендера.

«Преобразуй данный план помещения в фотореалистичное 3D-изображение интерьера»

На фронтенде всё тоже сделано с упором на простой сценарий использования. Главная страница показывает список проектов и позволяет загрузить новый план, а страница визуализатора автоматически запускает генерацию, если рендера ещё нет. Для сравнения исходного чертежа и готовой картинки используется react-compare-slider, чтобы пользователь сразу видел разницу между «до» и «после». Отдельно автор предусмотрел защиту от повторного запуска генерации через useRef, потому что в React Strict Mode эффекты в разработке могут срабатывать дважды.

Узкие места проекта

По ходу работы выяснилось, что самый сложный участок здесь не интерфейс, а стыковка ограничений платформы, AI-моделей и браузерной логики. Roomify пришлось адаптировать под размер входных файлов, задержки ответа модели и особенности клиентского состояния. Часть проблем решалась довольно приземлённо: через валидацию на фронте, промежуточное сохранение файлов отдельно от метаданных и дополнительные флаги, которые не дают приложению создать проект или сгенерировать рендер дважды.

• Ограничение на входные изображения: до 10 МБ и только JPG/PNG Время генерации может доходить до 10–15 секунд Base64 неудобно хранить напрямую из-за лимитов на передаваемые данные В dev-режиме React мог запускать генерацию повторно Мобильная адаптация compare-slider потребовала отдельной доводки При этом проект уже работает как законченный прототип, а следующий шаг у автора вполне прикладной: добавить выбор стиля интерьера, редактирование результата после генерации, поддержку векторных форматов вроде SVG и DXF, мобильное приложение на React Native и интеграции с BIM-системами. Roomify в таком виде показывает не идеальную магию AI, а реальную инженерную схему, где генеративная модель встроена в пользовательский продукт и подчинена конкретному сценарию — быстрому превращению плана в наглядную визуализацию.

Что это значит

История Roomify показывает, что небольшие AI-продукты уже можно собирать без тяжёлого бэкенда и длинного production-цикла. Для разработчиков это сигнал, что связка React, serverless-платформ и мультимодальных моделей становится достаточной, чтобы быстро проверять идеи на стыке дизайна, недвижимости и визуального контента.