DreamLayout

Sketch Your Vision, Build Your Reality.

Comment

Inspiration

The journey of DreamLayout began with a simple observation: the barrier between a creative vision for a space and a professional architectural blueprint is too high. Traditional CAD software is complex, and hiring an architect for every initial idea is costly. We wanted to build a tool that democratizes architectural design—an intelligent companion that listens to your abstract ideas, understands your site's unique geometry, and delivers production-ready plans in seconds.

What it does

DreamLayout is a premium AI-powered platform that transforms hand-drawn site outlines and text descriptions into high-fidelity, scalable SVG floor plans.

  • Intelligent Sketching: Users can draw their site's shape on a digital canvas.
  • Architectural Brain: Powered by Gemini 2.5 Flash, it doesn’t just draw rooms; it provides a professional Design Philosophy, explaining why certain rooms are placed for optimal flow and light.
  • SVG Blueprints: Outputs clean, numbered, and professional vector graphics.
  • Vector Intelligence: Uses FAISS to index user profiles and design preferences for personalized experiences.

How we built it

We architected DreamLayout using a modern, high-performance tech stack:

  • Backend: Built with FastAPI for ultra-fast asynchronous API handling.
  • AI Core: Integrated Gemini 2.5 Flash via LangChain (LCEL) to orchestrate complex architectural reasoning.
  • Vector Search: Employed FAISS (Facebook AI Similarity Search) for indexing user profiles. We utilize the $L_2$ Euclidean distance for similarity matching:
    $$d(x, y) = \sqrt{\sum_{i=1}^n (x_i - y_i)^2}$$
  • Geometry Processing: The system calculates site areas and rectifies rough user sketches into orthogonal shapes. For area validation, we apply the Shoelace formula:
    $$Area = \frac{1}{2} \left| \sum_{i=1}^{n-1} x_i y_{i+1} + x_n y_1 - \sum_{i=1}^{n-1} x_{i+1} y_i - x_1 y_n \right|$$
  • UI/UX: Crafted with Tailwind CSS and Jinja2 to provide a premium, “dark-mode first” aesthetic with micro-animations.
  • Storage: Cloudinary for lightning-fast SVG delivery and SQLite for relational data persistence.

Challenges we ran into

  • Geometry Rectification: Converting messy user-drawn coordinates from the HTML5 Canvas into clean architectural polygons was challenging. We solved this using LLM-based geometric normalization prompts that interpret intent over raw pixels.
  • SVG Standardization: Ensuring generated SVGs rendered perfectly across devices required strict normalization, including XML namespaces and precise viewBox handling.
  • Context-Aware Design: Balancing user preferences with architectural best practices required fine-tuning LangChain prompts to prioritize structural logic.

Accomplishments that we're proud of

  • Instant Blueprints: Reduced the time from idea to layout from hours to seconds.
  • AI Design Philosophy: The AI acts as a consultant, providing a clear design rationale alongside visuals.
  • Vector Search Integration: Successfully implemented FAISS for personalized design experiences.

What we learned

  • Prompt Engineering for SVG: Gemini excels at generating structured graphic code when given strict geometric constraints.
  • Asynchronous Workflows: Mastering FastAPI async handling to keep the UI responsive during heavy AI processing.
  • Human-Centric Design: Translating complex architectural logic into an intuitive, user-friendly dashboard.

What's next for DreamLayout

  • 3D Exploration: Integrating Three.js to enable walk-through 3D experiences.
  • Material & Cost Estimation: Adding intelligence to estimate construction costs using local material pricing.
  • Collaborative Workspace: Enabling real-time collaboration between homeowners and professional architects.

Built With

Share this project:

Updates