Un desarrollador muestra cómo creó Roomify, un visualizador de interiores con IA sobre React y Puter

Andrey, desarrollador full stack, ha mostrado cómo creó Roomify, una aplicación web que convierte un plano corriente de un espacio en un render 3D fotorrealista en pocos segundos. El proyecto interesa no solo por el resultado, sino por su arquitectura: en lugar de un backend clásico, usa React en el cliente y la plataforma Puter para almacenar archivos, datos KV, serverless workers y llamadas a modelos de IA.

Arquitectura sin servidor

Roomify se basa en un stack bastante moderno y, a la vez, pragmático: React 19, TypeScript, React Router 7, Vite, Tailwind CSS, Lucide React y el SDK de Puter.js. El autor eligió Puter no como un servicio adicional, sino como sustituto real de un servidor independiente. La plataforma ofrece almacenamiento de archivos, una base de datos clave-valor, serverless workers y acceso a modelos de IA directamente desde el navegador. Así pudo montar el proyecto más rápido, sin dedicar tiempo a DevOps, a configurar una capa de API ni a mantener su propia infraestructura de servidores.

El flujo de datos es este: el usuario sube un plano en el navegador, el frontend envía el archivo a Puter, recibe una URL pública y se la pasa a la función worker de creación de proyectos. Cuando hace falta un render, se lanza un worker aparte, ai.render3d, que recoge la imagen original, genera el prompt, llama a un modelo Claude o Gemini, guarda la imagen final en el almacenamiento de archivos y actualiza los metadatos del proyecto en KV. Como resultado, el cliente dispone de una API casi completa sin servidor propio y se comunica con ella mediante llamadas puter.action.

Cómo se genera el interior

El corazón de Roomify es la función que genera una vista 3D a partir de un plano 2D. En el worker, el autor describe la escena con texto: pide al modelo que tenga en cuenta paredes, ventanas y puertas, elija un ángulo de cámara, añada mobiliario, materiales, luz y sombras, y devuelva una imagen al estilo de la visualización arquitectónica profesional. Este enfoque no exige configurar la escena a mano en Blender ni en 3ds Max y permite enseñar al cliente un resultado claro bastante más rápido que con un pipeline clásico de render de interiores.

«Convierte este plano del espacio en una imagen 3D fotorrealista del interior»

El frontend también está pensado para un uso sencillo. La página principal muestra la lista de proyectos y permite subir un plano nuevo, mientras que la página del visualizador lanza la generación automáticamente si aún no hay render. Para comparar el plano original con la imagen final se usa react-compare-slider, de modo que el usuario ve de inmediato la diferencia entre el «antes» y el «después». El autor añadió además protección contra el relanzamiento de la generación mediante useRef, porque en React Strict Mode los efectos pueden ejecutarse dos veces durante el desarrollo.

Los cuellos de botella del proyecto

Sobre la marcha resultó que la parte más difícil no era la interfaz, sino encajar las limitaciones de la plataforma, de los modelos de IA y de la lógica del navegador. Roomify tuvo que adaptarse al tamaño de los archivos de entrada, a la latencia de respuesta del modelo y a las particularidades del estado en el cliente. Parte de los problemas se resolvió de forma bastante terrenal: con validación en el frontend, guardando los archivos por separado de los metadatos y con indicadores adicionales que impiden que la aplicación cree un proyecto o genere un render dos veces.

• Límite de imágenes de entrada: hasta 10 MB y solo JPG/PNG
• La generación puede tardar hasta 10–15 segundos
• Base64 resulta incómodo de almacenar directamente por los límites en los datos transmitidos
• En modo de desarrollo, React podía lanzar la generación de nuevo
• La adaptación móvil del compare-slider requirió un ajuste aparte

El proyecto ya funciona como un prototipo terminado, y los siguientes pasos del autor son bastante prácticos: añadir la elección de estilo de interior, la edición del resultado tras la generación, compatibilidad con formatos vectoriales como SVG y DXF, una aplicación móvil en React Native e integraciones con sistemas BIM. Así, Roomify no muestra la magia perfecta de la IA, sino un esquema de ingeniería real, donde un modelo generativo está integrado en un producto de usuario y subordinado a un escenario concreto: convertir rápidamente un plano en una visualización clara.

Qué significa esto

La historia de Roomify demuestra que ya se pueden crear pequeños productos de IA sin un backend pesado ni un ciclo de producción largo. Para los desarrolladores es una señal de que la combinación de React, plataformas serverless y modelos multimodales empieza a bastar para probar rápidamente ideas en la intersección entre diseño, inmobiliaria y contenido visual.