Un développeur explique comment il a créé Roomify, un visualiseur d'intérieurs par IA sous React et Puter

Andrey, développeur full stack, a montré comment il a créé Roomify, une application web qui transforme un plan de pièce ordinaire en rendu 3D photoréaliste en quelques secondes. Le projet intéresse non seulement par son résultat, mais aussi par son architecture : au lieu d'un backend classique, il s'appuie sur React côté client et sur la plateforme Puter pour le stockage de fichiers, les données KV, les serverless workers et les appels à des modèles d'IA.

Une architecture sans serveur

Roomify repose sur une stack assez moderne mais pragmatique : React 19, TypeScript, React Router 7, Vite, Tailwind CSS, Lucide React et le SDK Puter.js. L'auteur a choisi Puter non comme un service supplémentaire, mais comme un véritable remplaçant d'un serveur dédié. La plateforme fournit un stockage de fichiers, une base clé-valeur, des serverless workers et un accès aux modèles d'IA directement depuis le navigateur. Cela a permis de monter le projet plus vite, sans perdre de temps en DevOps, en configuration d'une couche d'API ni en maintenance d'une infrastructure serveur propre.

Le flux de données se présente ainsi : l'utilisateur charge un plan 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. Lorsqu'un rendu est nécessaire, un worker distinct, ai.render3d, se lance : il récupère l'image source, construit un prompt, appelle un modèle Claude ou Gemini, enregistre l'image finale dans le stockage de fichiers et met à jour les métadonnées du projet dans KV. Résultat : le client dispose d'une API presque complète sans serveur propre et dialogue avec elle via des appels puter.action.

Comment l'intérieur est généré

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

«

Convertis ce plan de pièce en une image 3D photoréaliste de l'intérieur »

Le frontend est lui aussi conçu pour un usage simple. La page d'accueil affiche la liste des projets et permet de charger un nouveau plan, tandis que la page du visualiseur lance automatiquement la génération s'il n'y a pas encore de rendu. Pour comparer le plan d'origine et l'image finale, react-compare-slider permet à l'utilisateur de voir tout de suite la différence entre l'« avant » et l'« après ». L'auteur a aussi prévu une protection contre le relancement de la génération avec useRef, car en React Strict Mode les effets peuvent s'exécuter deux fois en développement.

Les points durs du projet

En cours de route, il s'est avéré que la partie la plus difficile n'était pas l'interface, mais l'articulation entre les contraintes de la plateforme, des modèles d'IA et de la logique du navigateur. Roomify a dû être adapté à la taille des fichiers d'entrée, à la latence de réponse du modèle et aux particularités de l'état côté client. Une partie des problèmes a été réglée de façon plutôt terre à terre : validation côté frontend, enregistrement des fichiers séparément des métadonnées et indicateurs supplémentaires qui empêchent l'application de créer un projet ou de générer un rendu deux fois.

• Limite des images d'entrée : jusqu'à 10 Mo et uniquement JPG/PNG
• La génération peut prendre jusqu'à 10–15 secondes
• Le Base64 est peu pratique à stocker directement en raison des limites sur les données transmises
• En mode dev, React pouvait relancer la génération
• L'adaptation mobile du compare-slider a demandé une mise au point à part

Le projet fonctionne déjà comme un prototype abouti, et les prochaines étapes de l'auteur sont plutôt concrètes : ajouter le choix du style d'intérieur, l'édition du résultat après génération, la prise en charge de formats vectoriels comme SVG et DXF, une application mobile en React Native et des intégrations avec des systèmes BIM. Sous cette forme, Roomify ne montre pas la magie parfaite de l'IA, mais un véritable schéma d'ingénierie, où un modèle génératif est intégré à un produit utilisateur et subordonné à un scénario précis : transformer rapidement un plan en visualisation parlante.

Ce que cela signifie

L'histoire de Roomify montre qu'on peut désormais créer de petits produits d'IA sans backend lourd ni long cycle de production. Pour les développeurs, c'est le signe que l'association de React, de plateformes serverless et de modèles multimodaux devient suffisante pour tester rapidement des idées à la croisée du design, de l'immobilier et du contenu visuel.