Desenvolvedor mostra como criou o Roomify, visualizador de interiores com IA em React e Puter

O desenvolvedor full stack Andrey mostrou como criou o Roomify, um aplicativo web que transforma uma planta comum de um ambiente em um render 3D fotorrealista em poucos segundos. O projeto chama atenção não só pelo resultado, mas também pela arquitetura: em vez de um backend clássico, usa React no cliente e a plataforma Puter para armazenar arquivos, dados KV, serverless workers e chamadas a modelos de IA.

Arquitetura sem servidor

O Roomify se apoia em um stack bastante moderno e, ao mesmo tempo, pragmático: React 19, TypeScript, React Router 7, Vite, Tailwind CSS, Lucide React e o SDK do Puter.js. O autor escolheu o Puter não como um serviço adicional, mas como substituto prático de um servidor separado. A plataforma oferece armazenamento de arquivos, banco de dados chave-valor, serverless workers e acesso a modelos de IA direto do navegador. Com isso, foi possível montar o projeto mais rápido, sem gastar tempo com DevOps, configuração de camada de API e manutenção de infraestrutura de servidores própria.

O fluxo de dados é este: o usuário envia a planta pelo navegador, o frontend manda o arquivo ao Puter, recebe uma URL pública e a repassa à função worker de criação do projeto. Quando é preciso gerar um render, entra em ação um worker separado, o ai.render3d, que pega a imagem original, monta o prompt, chama um modelo Claude ou Gemini, salva a imagem pronta de volta no armazenamento de arquivos e atualiza os metadados do projeto no KV. Como resultado, o cliente ganha uma API quase completa sem servidor próprio e conversa com ela por meio de chamadas puter.action.

Como o interior é gerado

O coração do Roomify é a função que gera uma vista 3D a partir de uma planta 2D. No worker, o autor descreve a cena em texto: pede ao modelo que considere paredes, janelas e portas, escolha um ângulo, acrescente móveis, materiais, luz e sombras e devolva uma imagem no estilo de visualização arquitetônica profissional. Essa abordagem dispensa a configuração manual da cena no Blender ou no 3ds Max e permite mostrar ao cliente um resultado claro bem mais rápido do que no pipeline clássico de render de interiores.

«Converta esta planta do ambiente em uma imagem 3D fotorrealista do interior»

O frontend também foi pensado para um uso simples. A página inicial exibe a lista de projetos e permite enviar uma nova planta, enquanto a página do visualizador inicia a geração automaticamente se ainda não houver render. Para comparar o desenho original com a imagem final, usa-se o react-compare-slider, para que o usuário veja de imediato a diferença entre o «antes» e o «depois». O autor também incluiu proteção contra a repetição da geração com useRef, porque no React Strict Mode os efeitos podem ser executados duas vezes em desenvolvimento.

Gargalos do projeto

No decorrer do trabalho, ficou claro que a parte mais difícil não era a interface, mas conciliar as limitações da plataforma, dos modelos de IA e da lógica do navegador. O Roomify precisou ser adaptado ao tamanho dos arquivos de entrada, à latência de resposta do modelo e às particularidades do estado no cliente. Parte dos problemas foi resolvida de modo bem pé no chão: com validação no frontend, salvamento dos arquivos separado dos metadados e flags adicionais que impedem o app de criar um projeto ou gerar um render duas vezes.

• Limite para imagens de entrada: até 10 MB e somente JPG/PNG
• A geração pode levar de 10 a 15 segundos
• Base64 é incômodo de armazenar diretamente por causa dos limites de dados transmitidos
• No modo dev, o React podia disparar a geração novamente
• A adaptação móvel do compare-slider exigiu um ajuste à parte

O projeto já funciona como um protótipo completo, e os próximos passos do autor são bem práticos: incluir a escolha de estilo de interior, edição do resultado após a geração, suporte a formatos vetoriais como SVG e DXF, um app móvel em React Native e integrações com sistemas BIM. Assim, o Roomify mostra não a mágica perfeita da IA, mas um esquema de engenharia real, em que um modelo generativo é incorporado a um produto para o usuário e subordinado a um cenário concreto: transformar rapidamente uma planta em uma visualização clara.

O que isso significa

A história do Roomify mostra que já é possível criar pequenos produtos de IA sem um backend pesado e sem um longo ciclo de produção. Para os desenvolvedores, é um sinal de que a combinação de React, plataformas serverless e modelos multimodais está se tornando suficiente para testar ideias rapidamente na interseção entre design, mercado imobiliário e conteúdo visual.