Un développeur a montré comment il a construit Roomify — un visualiseur d'intérieurs IA sur React et Puter

Le développeur full-stack Andrey a montré comment il a construit Roomify — une application web qui transforme un simple plan d'étage en un rendu 3D photorréaliste en quelques secondes. Le projet est intéressant non seulement par son résultat, mais aussi par son architecture : au lieu d'un backend classique, il utilise React côté client et la plateforme Puter pour le stockage de fichiers, les données KV, les serverless workers et les appels aux modèles d'IA.

Architecture Sans Serveur

Au cœur de Roomify se trouve une stack assez moderne et pragmatique : React 19, TypeScript, React Router 7, Vite, Tailwind CSS, Lucide React et le SDK Puter.js. L'auteur a choisi Puter non pas comme un service auxiliaire, mais comme un remplacement pratique d'un serveur séparé. La plateforme fournit un stockage de fichiers, une base de données clé-valeur, des serverless workers et l'accès aux modèles d'IA directement depuis le navigateur. Cela a permis de construire le projet plus rapidement, sans perdre de temps sur DevOps, la configuration d'une couche API et la maintenance de sa propre infrastructure serveur.

Le flux de données fonctionne ainsi : l'utilisateur télécharge un plan d'étage dans le navigateur, le frontend envoie le fichier à Puter, reçoit une URL publique et la transmet à la fonction worker de création de projet. Si un rendu est nécessaire, un worker séparé ai.render3d est lancé, qui récupère l'image source, forme un prompt, appelle Claude ou Gemini, enregistre l'image terminée dans le stockage de fichiers et met à jour les métadonnées du projet en KV. En résultat, le client reçoit une API presque complète sans son propre serveur et communique avec elle via les appels puter.action.

Comment l'Intérieur Est Généré

Le cœur de Roomify est une fonction qui génère une vue 3D à partir d'un plan 2D. Dans le worker, l'auteur décrit la scène en texte : il demande au modèle de tenir compte des murs, des fenêtres, des portes, de sélectionner un angle, d'ajouter des meubles, des matériaux, de la lumière et des ombres, puis de retourner une image dans le style de la visualisation architecturale professionnelle. Cette approche ne nécessite pas d'ajustement manuel de la scène dans Blender ou 3ds Max et permet de montrer au client un résultat compréhensible beaucoup plus rapidement qu'avec un pipeline classique de rendu d'intérieur.

"Transformez le plan d'étage donné en une image 3D d'intérieur photorréaliste"

Sur le frontend, tout est également conçu en mettant l'accent sur un scénario d'utilisation simple. La page principale affiche une liste de projets et permet de télécharger un nouveau plan, et la page du visualiseur lance automatiquement la génération si le rendu n'existe pas encore. Pour comparer le dessin original et l'image terminée, react-compare-slider est utilisé afin que l'utilisateur voie immédiatement la différence entre « avant » et « après ». L'auteur a également prévu une protection contre le relancement de la génération via useRef, car en React Strict Mode, les effets en développement peuvent se déclencher deux fois.

Goulots d'Étranglement du Projet

Au cours du travail, il s'est avéré que la partie la plus complexe ici n'est pas l'interface, mais la coordination des contraintes de plateforme, des modèles d'IA et de la logique du navigateur. Roomify a dû être adapté à la taille des fichiers d'entrée, aux délais de réponse des modèles et aux caractéristiques de l'état du client. Certains problèmes ont été résolus de manière assez pragmatique : par la validation sur le frontend, l'enregistrement intermédiaire des fichiers séparé des métadonnées et des drapeaux supplémentaires qui empêchent l'application de créer un projet ou de générer un rendu deux fois.

• Limitation sur les images d'entrée : jusqu'à 10 Mo et uniquement JPG/PNG
• Le temps de génération peut atteindre 10–15 secondes
• Base64 est gênant à stocker directement en raison des limites de transmission de données
• En mode dev, React pourrait relancer la génération
• L'adaptation mobile du compare-slider a nécessité un ajustement séparé

En même temps, le projet fonctionne déjà comme un prototype achevé, et la prochaine étape de l'auteur est tout à fait appliquée : ajouter la sélection du style d'intérieur, éditer le résultat après la génération, supporter les formats vectoriels comme SVG et DXF, une application mobile en React Native et les intégrations avec les systèmes BIM.

Roomify sous cette forme montre non pas une magie IA idéale, mais un vrai schéma d'ingénierie où un modèle génératif est intégré dans un produit utilisateur et soumis à un scénario spécifique — la transformation rapide d'un plan en une visualisation claire.

Ce que Cela Signifie

L'histoire de Roomify montre que les petits produits d'IA peuvent déjà être construits sans un backend lourd et un long cycle de production. Pour les développeurs, c'est un signal que la combinaison de React, des plataformes serverless et des modèles multimodaux devient suffisante pour tester rapidement des idées à l'intersection du design, de l'immobilier et du contenu visuel.