-
-
Home page, along with an animated demo to give users a better idea of how the app works.
-
User dashboard, where they can save and access their designs, optimized by Harmony.
-
Initial analysis results of images, using Gemini Vision.
-
3D Map generation of the room, made to scale and rendered with our custom Three.js library.
-
Final design page, allowing users to explore more harmonious layouts, along with seeing problem areas with our heatmap.
Inspiration
This started because organizing dorm rooms can be brutal. I kept rearranging furniture in a cramped space, and every time I’d finish, I’d realize the layout still felt off… after doing all the lifting. I wanted a faster way to know what would work before committing.
What it does
Harmony is a guided, AI-powered room redesign tool. You upload two photos of your room, and Harmony turns them into a 3D recreation you can explore. It then scores the layout with a “harmony” rating (how open it feels, how easy it is to move around, and whether the placement makes sense) and visualizes problem areas with a heatmap.
If the layout isn’t great, you can generate an improved version automatically. Harmony proposes a reorganized arrangement, gives it a new score, and lets you compare the original vs optimized layout side-by-side, including heatmap overlays, so the improvement is obvious. Everything is saved to your design so you can come back, tweak, and iterate without redoing the process.
How we built it
Gemini handles the first pass from the photos and outputs room dims + objects. Claude normalizes the output so it matches our schema (including rules like chair/table pairing, inward-facing seats, and variable table length). The backend is FastAPI (Python) served via Uvicorn, with a SQLite file DB (harmony.db) storing designs, images, AI outputs, renders, scores, and heatmaps. Auth is a simple bearer token approach (username as token) with Argon2 password hashing.
The frontend is React 19 + Vite + Tailwind v4, and we render 3D with Three.js (npm for the live demo, CDN in saved renders). Our furniture presets have fixed real-world footprints, so everything stays scaled correctly. The scoring uses hard geometry checks (grid/clearance/traversability/door blocking), and the optimizer searches candidate spots/rotations while keeping walkable space and re-applying chair-facing logic.
Challenges we ran into
Depth is tricky to read from one photo for AI, so we require two views. LLM outputs can also be inconsistent, so we had to be strict about schemas and allowed object types. Early on, our pathing and collision checks were kind of fragile, so we added stronger clearance rules and fixed a few grid mutation bugs. We also had to keep the 3D renderer lightweight so it stays smooth in-browser.
Accomplishments that we're proud of
We got the full pipeline working: photos → JSON → cleaned schema → 3D room. The harmony score usually lines up with what a person would call “good flow.” The heatmap makes problems obvious instantly. And the optimizer actually improves layouts in a meaningful way instead of doing random shuffles.
What we learned
Honestly, the biggest lesson was that constraints matter a lot. Fixed furniture presets, simple rotation rules, and “no sizes” made the outputs way more stable. Also, AI works best here when it’s paired with hard geometry checks instead of trying to let the model do everything.
What's next for Harmony
Two main things: Tune prompts/models to cut down on weird hallucinated variants and speed up responses. Add multi-door + window awareness so traffic flow and walkway suggestions feel way more realistic.
Log in or sign up for Devpost to join the conversation.