Desenvolvedor mostrou como construiu o Roomify — um visualizador de interiores com IA em React e Puter

O desenvolvedor full-stack Andrey mostrou como construiu o Roomify — uma aplicação web que transforma uma planta baixa comum em uma renderização 3D fotorrealista em segundos. O projeto é interessante não apenas pelo resultado, mas também pela sua arquitetura: em vez de um backend clássico, ele usa React no cliente e a plataforma Puter para armazenamento de arquivos, dados KV, serverless workers e chamadas de modelos de IA.

Arquitetura Sem Servidor

No coração do Roomify está uma stack bastante moderna e pragmática: React 19, TypeScript, React Router 7, Vite, Tailwind CSS, Lucide React e o SDK Puter.js. O autor escolheu Puter não como um serviço auxiliar, mas como uma substituição prática de um servidor separado. A plataforma fornece armazenamento de arquivos, um banco de dados chave-valor, serverless workers e acesso a modelos de IA diretamente do navegador. Isso possibilitou construir o projeto mais rapidamente, sem gastar tempo com DevOps, configuração de camada de API e suporte de infraestrutura de servidor própria.

O fluxo de dados funciona assim: o usuário carrega uma planta baixa no navegador, o frontend envia o arquivo para Puter, recebe uma URL pública e a passa para a função de criação de projeto worker. Se um render é necessário, um worker separado ai.render3d é iniciado, que recupera a imagem original, forma um prompt, chama Claude ou Gemini, salva a imagem pronta de volta no armazenamento de arquivos e atualiza os metadados do projeto em KV. Como resultado, o cliente recebe uma API quase completa sem seu próprio servidor e se comunica com ela através de chamadas puter.action.

Como o Interior É Gerado

O coração do Roomify é uma função que gera uma visualização 3D a partir de uma planta baixa 2D. No worker, o autor descreve a cena em texto: pede ao modelo que leve em conta paredes, janelas, portas, selecione um ângulo, adicione móveis, materiais, luz e sombras, e então retorne uma imagem no estilo de visualização arquitetônica profissional. Essa abordagem não requer ajuste manual de cena em Blender ou 3ds Max e permite que você mostre ao cliente um resultado compreensível muito mais rápido do que com um pipeline clássico de renderização de interiores.

"Transforme a planta baixa fornecida em uma imagem 3D de interior fotorrealista"

No frontend, tudo também foi feito com ênfase em um cenário de uso simples. A página principal mostra uma lista de projetos e permite carregar uma nova planta, e a página do visualizador inicia automaticamente a geração se o render ainda não existir. Para comparar o desenho original e a imagem pronta, react-compare-slider é usado para que o usuário veja imediatamente a diferença entre "antes" e "depois". O autor também forneceu proteção contra a re-execução da geração através de useRef, porque em React Strict Mode os efeitos em desenvolvimento podem ser acionados duas vezes.

Gargalos do Projeto

Durante o trabalho, descobriu-se que a parte mais complexa aqui não é a interface, mas a coordenação de restrições de plataforma, modelos de IA e lógica de navegador. O Roomify teve que ser adaptado ao tamanho do arquivo de entrada, atrasos de resposta do modelo e características de estado do cliente. Alguns problemas foram resolvidos de forma bastante pragmática: através de validação de frontend, salvamento intermediário de arquivos separado de metadados e flags adicionais que impedem a aplicação de criar um projeto ou gerar um render duas vezes.

• Limitação em imagens de entrada: até 10 MB e apenas JPG/PNG
• O tempo de geração pode chegar a 10–15 segundos
• Base64 é inconveniente de armazenar diretamente devido a limites de transmissão de dados
• Em modo dev, React poderia iniciar a geração novamente
• A adaptação móvel do compare-slider exigiu ajuste separado

Ao mesmo tempo, o projeto já funciona como um protótipo acabado, e o próximo passo do autor é bastante aplicado: adicionar seleção de estilo de interior, editar o resultado após a geração, suportar formatos vetoriais como SVG e DXF, uma aplicação móvel em React Native e integrações com sistemas BIM.

Roomify nesta forma mostra não mágica de IA ideal, mas um esquema de engenharia real onde um modelo generativo é incorporado em um produto de usuário e subordinado a um cenário específico — a transformação rápida de uma planta em uma visualização clara.

O Que Isso Significa

A história do Roomify mostra que pequenos produtos de IA já podem ser construídos sem um backend pesado e um longo ciclo de produção. Para desenvolvedores, este é um sinal de que a combinação de React, plataformas serverless e modelos multimodais está se tornando suficiente para testar rapidamente ideias na intersecção de design, imóveis e conteúdo visual.