Draftly - AI Floor Plan to 3D Visualization

Situation

Architects, real estate agents, and homeowners often struggle to visualize a finished space from a flat 2D floor plan. Traditional 3D rendering software is expensive, complex, and slow. There was a clear need for an accessible, web-based tool that could instantly translate a basic blueprint into a stunning, photorealistic 3D top-down render using the latest advancements in AI.

Task

The goal was to build a consumer-facing AI tool that was intuitive and fast. The application needed to:

• Allow users to drag and drop standard 2D floor plans (JPG, PNG, WebP).
• Interface with a cutting-edge multimodal AI to generate accurate 3D architectural renders.
• Provide an interactive, side-by-side comparison of the original plan and the generated 3D image.
• Offer secure user authentication and cloud storage to save generated projects.
• Support one-click exporting of the final visual.

Action

I built Draftly as a modern web application, utilizing React Router v7 as the full-stack framework and deeply integrating Puter.js to handle the heavy backend lifting.

1. Seamless Cloud Infrastructure

• Bypassed the need to build a complex custom backend by leveraging Puter.js, which provided out-of-the-box user authentication, cloud hosting, and file storage for the uploaded blueprints and generated renders.
• Utilized Puter's AI gateway to securely interface with Gemini 2.5 Flash, keeping API keys safe while benefiting from ultra-fast model inference times.

2. AI Image Generation

• Engineered an optimized image-to-image prompt tailored for the Gemini 2.5 Flash model. The prompt instructs the AI to interpret architectural boundaries, doors, and windows, and render them with photorealistic lighting, textures, and top-down perspective.

3. Interactive Frontend Experience

• Built a highly responsive UI with React 19 and TailwindCSS v4, featuring a drag-and-drop upload zone for seamless user interaction.
• Integrated a custom before-and-after image slider using react-compare-slider, allowing users to directly interact with and compare the original blueprint against the AI-generated 3D render.

Result

Draftly successfully bridges the gap between technical blueprints and visual reality.

• Instant Visualization: It drastically reduces the time required to visualize a floor plan, executing a task in seconds that would normally take hours for a 3D artist.
• Streamlined Architecture: Relying on Puter.js for the entire backend layer proved highly efficient, drastically lowering infrastructure overhead and allowing complete focus on the AI integration and UI/UX.
• Engaging UI: The interactive slider and sleek design significantly boost user engagement, making the complex AI generation process feel like a simple, polished product feature.