Desarrollador mostró cómo construyó Roomify — un visualizador de interiores con IA en React y Puter

El desarrollador full-stack Andrey mostró cómo construyó Roomify — una aplicación web que transforma un plano de planta ordinario en una representación 3D fotorrealista en segundos. El proyecto es interesante no solo por el resultado, sino también por su arquitectura: en lugar de un backend clásico, utiliza React en el cliente y la plataforma Puter para almacenamiento de archivos, datos KV, serverless workers y llamadas a modelos de IA.

Arquitectura Sin Servidor

En el corazón de Roomify se encuentra un stack bastante moderno y pragmático: React 19, TypeScript, React Router 7, Vite, Tailwind CSS, Lucide React y el SDK Puter.js. El autor eligió Puter no como un servicio auxiliar, sino como un reemplazo práctico de un servidor separado. La plataforma proporciona almacenamiento de archivos, una base de datos clave-valor, serverless workers y acceso a modelos de IA directamente desde el navegador. Esto permitió construir el proyecto más rápidamente, sin gastar tiempo en DevOps, configuración de capa de API y mantenimiento de infraestructura de servidor propia.

El flujo de datos se ve así: el usuario carga un plano en el navegador, el frontend envía el archivo a Puter, recibe una URL pública y la pasa a la función de worker de creación de proyecto. Si se necesita un render, se inicia un worker separado ai.render3d, que recupera la imagen original, forma un prompt, llama a Claude o Gemini, guarda la imagen terminada nuevamente en el almacenamiento de archivos y actualiza los metadatos del proyecto en KV. Como resultado, el cliente recibe una API casi completa sin su propio servidor y se comunica con ella a través de llamadas puter.action.

Cómo Se Genera el Interior

El corazón de Roomify es una función que genera una vista 3D a partir de un plano 2D. En el worker, el autor describe la escena en texto: pide al modelo que tenga en cuenta las paredes, ventanas, puertas, seleccione un ángulo, agregue muebles, materiales, luz y sombras, y luego devuelva una imagen en el estilo de visualización arquitectónica profesional. Este enfoque no requiere ajuste manual de escena en Blender o 3ds Max y permite mostrar al cliente un resultado comprensible mucho más rápido que con un pipeline clásico de renderizado de interiores.

"Transforma el plano de planta dado en una imagen 3D de interior fotorrealista"

En el frontend, todo también se hizo con énfasis en un escenario de uso simple. La página principal muestra una lista de proyectos y permite cargar un nuevo plano, y la página del visualizador inicia automáticamente la generación si el render aún no existe. Para comparar el dibujo original y la imagen terminada, se usa react-compare-slider para que el usuario vea inmediatamente la diferencia entre "antes" y "después". El autor también proporcionó protección contra la re-ejecución de generación a través de useRef, porque en React Strict Mode los efectos en desarrollo pueden dispararse dos veces.

Cuellos de Botella del Proyecto

Durante el trabajo, se descubrió que la parte más compleja aquí no es la interfaz, sino la coordinación de restricciones de plataforma, modelos de IA y lógica del navegador. Roomify tuvo que adaptarse al tamaño del archivo de entrada, retrasos en la respuesta del modelo y características del estado del cliente. Algunos problemas se resolvieron de manera bastante pragmática: a través de validación de frontend, guardado intermedio de archivos separado de metadatos y flags adicionales que evitan que la aplicación cree un proyecto o genere un render dos veces.

• Limitación en imágenes de entrada: hasta 10 MB y solo JPG/PNG
• El tiempo de generación puede llegar a 10–15 segundos
• Base64 es inconveniente de almacenar directamente debido a límites de transmisión de datos
• En modo dev, React podría iniciar la generación nuevamente
• La adaptación móvil de compare-slider requirió ajuste separado

Al mismo tiempo, el proyecto ya funciona como un prototipo terminado, y el siguiente paso del autor es bastante aplicado: agregar selección de estilo de interior, editar el resultado después de la generación, apoyar formatos vectoriales como SVG y DXF, una aplicación móvil en React Native e integraciones con sistemas BIM.

Roomify en esta forma muestra no la magia ideal de la IA, sino un esquema de ingeniería real donde un modelo generativo se incorpora en un producto de usuario y se subordina a un escenario específico: la transformación rápida de un plano en una visualización clara.

Qué Significa Esto

La historia de Roomify muestra que los pequeños productos de IA ya se pueden construir sin un backend pesado y un largo ciclo de producción. Para los desarrolladores, esta es una señal de que la combinación de React, plataformas serverless y modelos multimodales se está volviendo suficiente para probar rápidamente ideas en la intersección del diseño, bienes raíces y contenido visual.