Add GitHub Sponsors + Buy Me A Coffee

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: [AnonymousNomad]
+custom: ["https://www.buymeacoffee.com/anonymousnomad"]

.gitignore

@@ -0,0 +1,5 @@
+__pycache__/
+*.pyc
+*.pyo
+.env
+.DS_Store

README.md

@@ -1,38 +1,124 @@
+<p align="center">
+  <img src="https://img.shields.io/badge/Vitalis-DevCore-7c3aed?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI0IiBzdHJva2U9IiM3YzNhZWQiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik0xNCAxOGw0LTQgNCA0LTIgMi0yLTItMiAyeiIgZmlsbD0iIzdjM2FlZCIvPjwvc3ZnPg==" alt="Vitalis DevCore"/>
+</p>
+
+<h1 align="center">Vitalis DevCore — 3D Blueprint Builder</h1>
+
+<p align="center">
+  <strong>→ Rival Codex: Natural Language → Interactive 3D Architecture</strong>
+</p>
+
+<p align="center">
+  <a href="https://huggingface.co/spaces/FerrellSyntheticIntelligence/Vitalis-DevCore">
+    <img src="https://img.shields.io/badge/🤗%20HF%20Spaces-Live-7c3aed?style=flat-square" alt="HF Spaces"/>
+  </a>
+  <a href="https://github.com/AnonymousNomad/Vitalis-DevCore">
+    <img src="https://img.shields.io/badge/GitHub-Source-181717?style=flat-square&logo=github" alt="GitHub"/>
+  </a>
+  <a href="https://www.buymeacoffee.com/anonymousnomad">
+    <img src="https://img.shields.io/badge/Sponsor-%E2%9D%A4%EF%B8%8F-ff69b4?style=flat-square" alt="Sponsor"/>
+  </a>
+</p>
+
 ---
-title: Vitalis DevCore — 3D Blueprint Builder
-emoji: 🏗️
-colorFrom: blue
-colorTo: indigo
-sdk: gradio
-sdk_version: 6.19.0
-app_file: app.py
-pinned: false
----
 
-# Vitalis DevCore — 3D Blueprint Builder
+## Overview
+
+Vitalis DevCore transforms natural language building descriptions into interactive 3D architectural blueprints. Describe any building in plain English — "2000 sq ft ranch with 3 bedrooms and 2 baths" — and get a fully explorable 3D model with rooms, style-specific roofs, measurement labels, and camera controls.
 
-Interactive 3D architectural visualizer. Describe a building in natural language and see it rendered as an explorable 3D model in your browser.
+**The system is live on HuggingFace Spaces** — no GPU, no install, just describe and build.
 
 ## Features
 
-- **Natural language input** — "2000 sq ft ranch house with 3 bedrooms and 2 baths"
-- **Real-time 3D rendering** — Three.js in-browser, fully interactive (orbit, zoom, pan)
-- **Structured parsing** — Extracts dimensions, style, stories, rooms, features
-- **Live labels** — Room names rendered as floating sprites
-- **No GPU required** — All rendering client-side
+| Feature | Description |
+|---|---|
+| **Natural Language Parsing** | Extracts dimensions, style, stories, bedrooms, bathrooms, garage, extra rooms from plain English |
+| **Architecture Styles** | Modern, Ranch, Colonial, Victorian, Cabin, Craftsman, Farmhouse, Tudor — each with style-specific roofs |
+| **Style-Specific Roofs** | Flat (modern), Gable (colonial/cabin), Hip (ranch), Steep-gable (victorian/tudor), Low-gable (craftsman) |
+| **Live 3D Rendering** | Three.js in-browser — walls, floors, roof, shadows, lighting |
+| **Room Labels** | Floating sprites showing room names |
+| **Measurement Overlays** | Dimension labels on each room (width/depth in feet) |
+| **Interactive Controls** | Orbit (rotate), Pan (move), Tour (auto walkthrough) |
+| **JSON Export** | Download blueprint data as structured JSON |
+| **Extra Room Support** | Office, Library, Deck, Loft, Garage, Basement, and more |
+
+## How It Works
+
+```
+"30x40 modern 2-story with 4 bedrooms and a garage"
+  ↓
+NL Parser → Structured Blueprint JSON → Three.js Scene → Interactive 3D
+```
+
+## Quick Start
+
+### Try It Live (no install)
+1. Open [Vitalis DevCore on HF Spaces](https://huggingface.co/spaces/FerrellSyntheticIntelligence/Vitalis-DevCore)
+2. Type a building description or click an example prompt
+3. Click **Build Blueprint**
+4. Use mouse to orbit/zoom/pan the 3D model
+5. Click **Tour** for auto walkthrough or **Export** to download
 
-## Example Prompts
+### Example Prompts
+```
+"2000 sq ft ranch house with 3 bedrooms and 2 baths"
+"modern 2-story house 30x40 with 4 bedrooms 3 bathrooms and a garage"
+"small cabin 800 sq ft with 1 bedroom and a loft"
+"victorian 3500 sq ft 5 bedroom 3 bath with office and library"
+"30 feet by 50 feet modern house with 4 bedrooms and a deck"
+```
 
-- `2000 sq ft ranch house with 3 bedrooms and 2 baths`
-- `modern 2-story house 30x40 with 4 bedrooms 3 bathrooms and a garage`
-- `small cabin 800 sq ft with 1 bedroom and a loft`
-- `victorian 3500 sq ft 5 bedroom 3 bath with office and library`
-- `my house is 50 feet wide and 60 feet long with 3 bedrooms`
+### Run Locally
+```bash
+git clone https://github.com/AnonymousNomad/Vitalis-DevCore.git
+cd Vitalis-DevCore
+pip install -r requirements.txt
+python app.py
+```
 
 ## Architecture
 
 ```
-User Input → NL Parser → Blueprint JSON → Three.js HTML → Browser Render
+devcore/
+├── parser.py      # Natural language → structured blueprint data
+│   ├── 7 extractors (sqft, dimensions, style, stories, bedrooms, bathrooms, extras)
+│   └── Room layout generator with smart positioning
+��── builder.py     # Blueprint → Three.js HTML with style-specific roofs
+│   ├── Measurements overlay
+│   └── JSON export support
+└── templates/
+    └── viewer.html  # Full Three.js scene with orbit/tour/pan controls
 ```
 
-Built for the Vitalis ecosystem by FerrellSyntheticIntelligence.
+### Roof Styles by Architecture
+
+| Style | Roof | Description |
+|-------|------|-------------|
+| Modern | Flat | Clean, minimal horizontal lines |
+| Ranch/Hip | Hip | Sloped on all four sides |
+| Colonial | Gable | Classic triangular gable ends |
+| Victorian | Steep-gable | Dramatic steep pitch with dormers |
+| Craftsman | Low-gable | Low-pitch with wide eaves |
+| Cabin | Gable | Simple rustic gable |
+| Farmhouse | Gable | Traditional gable |
+
+## Sponsor
+
+If you find this tool useful for architecture visualization or design education:
+
+<p align="center">
+  <a href="https://www.buymeacoffee.com/anonymousnomad">
+    <img src="https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black" alt="Buy Me A Coffee"/>
+  </a>
+  <a href="https://github.com/sponsors/AnonymousNomad">
+    <img src="https://img.shields.io/badge/GitHub_Sponsor-%23EA4AAA?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Sponsor"/>
+  </a>
+</p>
+
+## License
+
+MIT — build on it, share it, make it better.
+
+---
+
+*Built by FerrellSyntheticIntelligence for the Vitalis ecosystem.*

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
+import json
 from devcore.parser import parse_description
-from devcore.builder import description_to_blueprint
+from devcore.builder import description_to_blueprint, blueprint_to_json
 
 EXAMPLE_PROMPTS = [
     "2000 sq ft ranch house with 3 bedrooms and 2 baths",
@@ -16,7 +17,7 @@ EXAMPLE_PROMPTS = [
 def build_blueprint(description):
     if not description or not description.strip():
         html = _render_empty("Enter a description of the building you want to visualize.")
-        return html, "No description provided.", ""
+        return html, "No description provided.", "", ""
     try:
         html = description_to_blueprint(description)
         data = parse_description(description)
@@ -29,10 +30,12 @@ def build_blueprint(description):
             f"🛏️ {f['bedrooms']} bed · 🚿 {f['bathrooms']} bath · "
             f"{'🚗 Garage' if f['garage'] else 'No garage'}"
         )
-        return html, summary, details
+        roof = s.get("roof_style", "gable")
+        extras = f"🏗️ {roof} roof · 🖱️ Orbit/Pan/Tour modes · 📥 Export JSON"
+        return html, summary, details, extras
     except Exception as e:
         html = _render_empty(f"Error: {e}")
-        return html, f"Failed to build: {e}", ""
+        return html, f"Failed to build: {e}", "", ""
 
 
 def _render_empty(message):
@@ -89,30 +92,46 @@ with gr.Blocks(title="Vitalis DevCore — 3D Blueprint Builder", theme=gr.themes
     with gr.Accordion("Blueprint Details", open=False):
         details_display = gr.Markdown(label="Details")
 
+    extras_display = gr.Markdown(label="Features")
+
     def on_build(desc):
-        html, summary, details = build_blueprint(desc)
-        return html, summary, details
+        html, summary, details, extras = build_blueprint(desc)
+        return html, summary, details, extras
 
     build_btn.click(
         fn=on_build,
         inputs=[prompt],
-        outputs=[model_display, summary_display, details_display],
+        outputs=[model_display, summary_display, details_display, extras_display],
     )
     prompt.submit(
         fn=on_build,
         inputs=[prompt],
-        outputs=[model_display, summary_display, details_display],
+        outputs=[model_display, summary_display, details_display, extras_display],
     )
 
     gr.Markdown("---")
-    gr.Markdown("""
-    ### How it works
-    1. **Parse** — Natural language description → structured blueprint data
-    2. **Generate** — Blueprint → Three.js 3D scene with walls, rooms, roof, labels
-    3. **Render** — Interactive model with orbit controls (drag to rotate, scroll to zoom)
-
-    *Built with Three.js · All rendering happens in your browser — no server-side graphics needed*
-    """)
+    with gr.Row():
+        gr.Markdown("""
+        ### View Controls
+        - **Orbit** — Drag to rotate, scroll to zoom
+        - **Pan** — Drag to move view
+        - **Tour** — Auto- camera walkthrough of rooms
+        - **Export** — Download blueprint as JSON
+
+        *Style-specific roofs: gable, hip, flat, steep-gable · Measurements shown on each room · All rendering in-browser*
+        """)
+    with gr.Accordion("JSON Blueprint Data (read-only)", open=False):
+        json_display = gr.Markdown("Build a blueprint first.")
+        def show_json(desc):
+            if not desc or not desc.strip():
+                return "Enter a description."
+            try:
+                return "```json\n" + blueprint_to_json(desc) + "\n```"
+            except:
+                return "Invalid description."
+        prompt.change(show_json, inputs=[prompt], outputs=json_display)
+
+    gr.Markdown("*Vitalis DevCore — Natural Language → 3D Blueprint · Built with Three.js*")
 
 
 if __name__ == "__main__":

devcore/builder.py

@@ -1,5 +1,4 @@
-import json
-import os
+import json, os
 from devcore.parser import parse_description
 
 TEMPLATE_PATH = os.path.join(os.path.dirname(__file__), "templates", "viewer.html")
@@ -16,13 +15,15 @@ def _build_threejs_html(data):
     w = scene["width"]
     d = scene["depth"]
     s = scene["stories"]
+    roof_style = scene.get("roof_style", "gable")
+
+    wall_height = 8 if s <= 1 else 9
+    floor_height = 0.5
 
     room_meshes = []
     wall_meshes = []
     label_data = []
-
-    wall_height = 8 if s <= 1 else 9
-    floor_height = 0.5
+    measurements = []
 
     for room in rooms:
         rx, rz = room["x"], room["z"]
@@ -30,78 +31,70 @@ def _build_threejs_html(data):
         floor_n = room.get("floor", 0)
         cy = floor_n * (wall_height + floor_height) + floor_height / 2
         exterior = room.get("exterior", False)
-
         color = room["color"]
 
         room_meshes.append({
             "x": rx, "z": rz, "w": rw, "d": rd,
             "y": cy, "h": floor_height,
-            "color": color,
-            "name": room["name"],
-            "exterior": exterior,
+            "color": color, "name": room["name"], "exterior": exterior,
         })
 
         lx = rx + rw / 2
         lz = rz + rd / 2
-        label_data.append({
-            "x": lx, "z": lz, "y": cy + 0.3,
-            "text": room["name"],
-        })
+        label_data.append({"x": lx, "z": lz, "y": cy + 0.3, "text": room["name"]})
 
-        hw = rw / 2
-        hd = rd / 2
+        measurements.append({
+            "x": rx + rw / 2, "z": rz - 1, "y": 0.1,
+            "text": f"{rw:.0f}'",
+            "dim": "width",
+        })
+        measurements.append({
+            "x": rx - 1, "z": rz + rd / 2, "y": 0.1,
+            "text": f"{rd:.0f}'",
+            "dim": "depth",
+        })
 
         if not exterior:
             for side in ["north", "south", "east", "west"]:
                 wall_meshes.append({
-                    "side": side,
-                    "x": rx, "z": rz, "w": rw, "d": rd,
-                    "h": wall_height,
+                    "side": side, "x": rx, "z": rz,
+                    "w": rw, "d": rd, "h": wall_height,
                     "room_name": room["name"],
                 })
 
-    roof_height = wall_height + 4
-    roof_mesh = {
-        "w": w * 1.15,
-        "d": d * 1.15,
-        "y": s * (wall_height + floor_height),
-        "h": roof_height,
-        "color": "#5a4a3a",
+    roof_h = 4 if roof_style == "flat" else 6
+    roof_elev = s * (wall_height + floor_height)
+    roof_info = {
+        "w": w * 1.15, "d": d * 1.15, "y": roof_elev,
+        "h": roof_h, "style": roof_style, "color": "#5a4a3a",
+        "pitch": 0.5 if roof_style == "steep-gable" else (0.3 if roof_style == "low-gable" else 0.4),
     }
 
     blueprint = {
         "scene": {
-            "width": w,
-            "depth": d,
-            "stories": s,
-            "wall_height": wall_height,
-            "floor_height": floor_height,
+            "width": w, "depth": d, "stories": s,
+            "wall_height": wall_height, "floor_height": floor_height,
+            "roof_style": roof_style, "style": scene.get("style", "modern"),
         },
         "floors": room_meshes,
         "walls": wall_meshes,
-        "roof": roof_mesh,
+        "roof": roof_info,
         "labels": label_data,
+        "measurements": measurements,
         "summary": data["summary"],
         "features": data["features"],
     }
 
-    html = _render_html(blueprint)
-    return html
+    return _render_html(blueprint)
 
 
 def _render_html(blueprint):
     bp_json = json.dumps(blueprint)
-
     with open(TEMPLATE_PATH, "r") as f:
         template = f.read()
-
-    html = template.replace("/* BLUEPRINT_DATA */", f"const BLUEPRINT = {bp_json};")
-    return html
+    return template.replace("/* BLUEPRINT_DATA */", f"const BLUEPRINT = {bp_json};")
 
 
-if __name__ == "__main__":
-    html = description_to_blueprint("2000 sq ft ranch house with 3 bedrooms and 2 baths")
-    print(f"Generated {len(html)} bytes of HTML")
-    with open("/tmp/test_blueprint.html", "w") as f:
-        f.write(html)
-    print("Saved to /tmp/test_blueprint.html")
+def blueprint_to_json(text):
+    data = parse_description(text)
+    return json.dumps(data, indent=2)

devcore/parser.py

@@ -11,6 +11,17 @@ STYLES = {
     "farmhouse": "farmhouse",
 }
 
+ROOF_STYLES = {
+    "ranch": "hip", "rambler": "hip",
+    "colonial": "gable", "cape": "gable",
+    "modern": "flat", "contemporary": "flat",
+    "victorian": "steep-gable",
+    "craftsman": "low-gable",
+    "cabin": "gable", "cottage": "gable",
+    "tudor": "steep-gable",
+    "farmhouse": "gable",
+}
+
 ROOM_COLORS = {
     "living": "#e8dcc8", "family": "#e8dcc8",
     "kitchen": "#d4e8d0", "dining": "#e0d0c0",
@@ -42,12 +53,14 @@ def parse_description(text):
 
     rooms = _generate_rooms(width, depth, stories, bedrooms, bathrooms, garage, extra_rooms, style)
 
+    roof_style = ROOF_STYLES.get(style, "gable")
     return {
         "structure": {
             "width": width,
             "depth": depth,
             "stories": stories,
             "style": style,
+            "roof_style": roof_style,
             "sqft": sqft or (width * depth * stories),
         },
         "rooms": rooms,

devcore/templates/viewer.html

@@ -5,24 +5,35 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Vitalis DevCore — 3D Blueprint</title>
 <style>
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0a0a1a; overflow: hidden; color: #fff; }
-#canvas-container { width: 100vw; height: 100vh; display: block; }
-#info-overlay { position: fixed; top: 16px; left: 16px; background: rgba(10,10,30,0.85); border: 1px solid rgba(100,60,255,0.3); border-radius: 12px; padding: 16px 20px; max-width: 320px; font-size: 13px; line-height: 1.5; backdrop-filter: blur(8px); z-index: 10; }
-#info-overlay h2 { font-size: 16px; margin-bottom: 6px; color: #a78bfa; }
-#info-overlay p { color: #c4b5fd; margin: 2px 0; }
-#info-overlay .badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; margin: 2px; background: rgba(100,60,255,0.2); color: #a78bfa; border: 1px solid rgba(100,60,255,0.2); }
-#controls-hint { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(10,10,30,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 16px; font-size: 12px; color: #888; backdrop-filter: blur(4px); z-index: 10; }
-.label-2d { position: absolute; color: rgba(255,255,255,0.6); font-size: 11px; font-weight: 500; text-shadow: 0 0 8px rgba(0,0,0,0.8); pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap; }
+*{margin:0;padding:0;box-sizing:border-box;}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0a1a;overflow:hidden;color:#fff;}
+#canvas-container{width:100vw;height:100vh;display:block;}
+#info-overlay{position:fixed;top:16px;left:16px;background:rgba(10,10,30,0.85);border:1px solid rgba(100,60,255,0.3);border-radius:12px;padding:16px 20px;max-width:340px;font-size:13px;line-height:1.5;backdrop-filter:blur(8px);z-index:10;}
+#info-overlay h2{font-size:16px;margin-bottom:6px;color:#a78bfa;}
+#info-overlay p{color:#c4b5fd;margin:2px 0;font-size:12px;}
+.badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;margin:2px;background:rgba(100,60,255,0.15);color:#a78bfa;border:1px solid rgba(100,60,255,0.2);}
+.badge-dim{background:rgba(50,180,100,0.15);color:#6ee7a7;border-color:rgba(50,180,100,0.2);}
+#controls-hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(10,10,30,0.7);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:8px 16px;font-size:12px;color:#888;backdrop-filter:blur(4px);z-index:10;display:flex;gap:16px;}
+#controls-hint span{cursor:pointer;padding:2px 8px;border-radius:4px;transition:background 0.2s;}
+#controls-hint span:hover{background:rgba(100,60,255,0.2);color:#a78bfa;}
+#controls-hint .active{background:rgba(100,60,255,0.3);color:#a78bfa;}
+.tool-btn{position:fixed;bottom:20px;right:20px;background:rgba(100,60,255,0.2);border:1px solid rgba(100,60,255,0.3);border-radius:8px;padding:8px 14px;font-size:12px;color:#a78bfa;cursor:pointer;backdrop-filter:blur(4px);z-index:10;transition:all 0.2s;}
+.tool-btn:hover{background:rgba(100,60,255,0.4);}
 </style>
 </head>
 <body>
 <div id="info-overlay">
-  <h2>🏗️ Blueprint</h2>
+  <h2>🏗️ <span id="style-name">Blueprint</span></h2>
   <p id="summary-text">Loading...</p>
   <div id="features" style="margin-top:6px;"></div>
+  <div id="dimensions" style="margin-top:4px;font-size:11px;color:#6ee7a7;"></div>
 </div>
-<div id="controls-hint">🖱️ Drag to orbit  ·  Scroll to zoom  ·  Right-drag to pan</div>
+<div id="controls-hint">
+  <span data-mode="orbit" class="active">🔄 Orbit</span>
+  <span data-mode="pan">✋ Pan</span>
+  <span data-mode="tour">🎬 Tour</span>
+</div>
+<button class="tool-btn" id="export-btn">📥 Export JSON</button>
 <div id="canvas-container"></div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
@@ -31,17 +42,20 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
 <script>
 /* BLUEPRINT_DATA */
 
-function initScene(data) {
-  const container = document.getElementById('canvas-container');
-  const w = container.clientWidth;
-  const h = container.clientHeight;
+var BP = BLUEPRINT;
+var scene, camera, renderer, controls;
+var tourActive = false, tourPoints = [], tourIdx = 0;
+
+function initScene() {
+  var container = document.getElementById('canvas-container');
+  var w = container.clientWidth, h = container.clientHeight;
 
-  const scene = new THREE.Scene();
+  scene = new THREE.Scene();
   scene.background = new THREE.Color(0x0a0a1a);
-  scene.fog = new THREE.Fog(0x0a0a1a, 100, 200);
+  scene.fog = new THREE.Fog(0x0a0a1a, 120, 200);
 
-  const camera = new THREE.PerspectiveCamera(40, w / h, 0.1, 500);
-  const renderer = new THREE.WebGLRenderer({ antialias: true });
+  camera = new THREE.PerspectiveCamera(40, w/h, 0.1, 500);
+  renderer = new THREE.WebGLRenderer({antialias:true});
   renderer.setSize(w, h);
   renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
   renderer.shadowMap.enabled = true;
@@ -50,238 +64,220 @@ function initScene(data) {
   renderer.toneMappingExposure = 1.2;
   container.appendChild(renderer.domElement);
 
-  const controls = new THREE.OrbitControls(camera, renderer.domElement);
+  controls = new THREE.OrbitControls(camera, renderer.domElement);
   controls.enableDamping = true;
   controls.dampingFactor = 0.08;
-  controls.maxPolarAngle = Math.PI / 2.1;
-  controls.minDistance = 5;
-  controls.maxDistance = 150;
+  controls.maxPolarAngle = Math.PI / 2.05;
+  controls.minDistance = 3;
+  controls.maxDistance = 120;
 
   // Lights
-  const ambient = new THREE.AmbientLight(0x404060, 0.6);
-  scene.add(ambient);
-
-  const sun = new THREE.DirectionalLight(0xffeedd, 1.2);
+  scene.add(new THREE.AmbientLight(0x404060, 0.5));
+  var sun = new THREE.DirectionalLight(0xffeedd, 1.4);
   sun.position.set(40, 60, 30);
   sun.castShadow = true;
   sun.shadow.mapSize.width = 2048;
   sun.shadow.mapSize.height = 2048;
-  sun.shadow.camera.near = 0.5;
-  sun.shadow.camera.far = 150;
   scene.add(sun);
-
-  const fill = new THREE.DirectionalLight(0x8888ff, 0.4);
-  fill.position.set(-30, 20, -20);
-  scene.add(fill);
-
-  const hemi = new THREE.HemisphereLight(0x8888ff, 0x444422, 0.6);
-  scene.add(hemi);
+  scene.add(new THREE.DirectionalLight(0x8888ff, 0.3).position.set(-30, 20, -20));
+  scene.add(new THREE.HemisphereLight(0x8888ff, 0x444422, 0.5));
 
   // Ground
-  const groundGeo = new THREE.PlaneGeometry(200, 200);
-  const groundMat = new THREE.MeshStandardMaterial({
-    color: 0x181830,
-    roughness: 0.9,
-    metalness: 0.0,
-    transparent: true,
-    opacity: 0.8,
-  });
-  const ground = new THREE.Mesh(groundGeo, groundMat);
-  ground.rotation.x = -Math.PI / 2;
-  ground.position.y = -0.25;
-  ground.receiveShadow = true;
-  scene.add(ground);
-
-  // Grid
-  const grid = new THREE.GridHelper(100, 40, 0x444488, 0x333366);
+  var gnd = new THREE.Mesh(
+    new THREE.PlaneGeometry(200, 200),
+    new THREE.MeshStandardMaterial({color:0x181830,roughness:0.9,metalness:0,transparent:true,opacity:0.8})
+  );
+  gnd.rotation.x = -Math.PI/2;
+  gnd.position.y = -0.25;
+  gnd.receiveShadow = true;
+  scene.add(gnd);
+  var grid = new THREE.GridHelper(100, 40, 0x444488, 0x333366);
   grid.position.y = 0.01;
   scene.add(grid);
 
-  const bp = data.scene;
-  const cx = bp.width / 2;
-  const cz = bp.depth / 2;
-  const sw = bp.width;
-  const sd = bp.depth;
+  var sp = BP.scene;
+  var sw = sp.width, sd = sp.depth;
 
   // Foundation outline
-  const outlineMat = new THREE.LineBasicMaterial({ color: 0x6666cc, transparent: true, opacity: 0.4 });
-  const outlineGeo = new THREE.BufferGeometry();
-  const outlineVerts = new Float32Array([
-    0, 0, 0, sw, 0, 0, sw, 0, sd, 0, 0, sd, 0, 0, 0
-  ]);
-  outlineGeo.setAttribute('position', new THREE.BufferAttribute(outlineVerts, 3));
-  const outline = new THREE.Line(outlineGeo, outlineMat);
-  outline.position.y = 0.02;
-  scene.add(outline);
+  var ol = new THREE.Line(
+    new THREE.BufferGeometry().setAttribute('position', new THREE.BufferAttribute(new Float32Array([0,0,0,sw,0,0,sw,0,sd,0,0,sd,0,0,0]),3)),
+    new THREE.LineBasicMaterial({color:0x6666cc,transparent:true,opacity:0.4})
+  );
+  ol.position.y = 0.02;
+  scene.add(ol);
 
   // Floors
-  const floorMat = new THREE.MeshStandardMaterial({ roughness: 0.7, metalness: 0.05 });
-
-  data.floors.forEach(function(f) {
-    const geo = new THREE.BoxGeometry(f.w, f.h, f.d);
-    const mat = floorMat.clone();
-    mat.color = new THREE.Color(f.color || 0x444466);
-    mat.transparent = true;
-    mat.opacity = f.exterior ? 0.5 : 0.85;
-    const mesh = new THREE.Mesh(geo, mat);
-    mesh.position.set(f.x + f.w/2, f.y, f.z + f.d/2);
-    mesh.castShadow = true;
-    mesh.receiveShadow = true;
+  BP.floors.forEach(function(f) {
+    var g = new THREE.BoxGeometry(f.w, f.h, f.d);
+    var m = new THREE.MeshStandardMaterial({roughness:0.7,metalness:0.05,color:f.color||0x444466,transparent:true,opacity:f.exterior?0.4:0.8});
+    var mesh = new THREE.Mesh(g, m);
+    mesh.position.set(f.x+f.w/2, f.y, f.z+f.d/2);
+    mesh.castShadow = true; mesh.receiveShadow = true;
     scene.add(mesh);
-
     if (!f.exterior) {
-      const edge = new THREE.EdgesGeometry(geo);
-      const line = new THREE.LineSegments(edge, new THREE.LineBasicMaterial({
-        color: 0x8888cc, transparent: true, opacity: 0.3
-      }));
-      line.position.copy(mesh.position);
-      scene.add(line);
+      var e = new THREE.LineSegments(new THREE.EdgesGeometry(g), new THREE.LineBasicMaterial({color:0x8888cc,transparent:true,opacity:0.15}));
+      e.position.copy(mesh.position);
+      scene.add(e);
     }
   });
 
   // Walls
-  const wallMat = new THREE.MeshStandardMaterial({
-    color: 0x444488, roughness: 0.6, metalness: 0.1,
-    transparent: true, opacity: 0.15, wireframe: false,
-  });
-
-  data.walls.forEach(function(w) {
-    var wx, wz, ww, wd, wh = w.h;
-    var margin = 0.05;
-
-    if (w.side === 'north') {
-      wx = w.x; wz = w.z; ww = w.w; wd = 0.15;
-    } else if (w.side === 'south') {
-      wx = w.x; wz = w.z + w.d; ww = w.w; wd = 0.15;
-    } else if (w.side === 'east') {
-      wx = w.x + w.w; wz = w.z; ww = 0.15; wd = w.d;
-    } else {
-      wx = w.x; wz = w.z; ww = 0.15; wd = w.d;
-    }
-
-    const geo = new THREE.BoxGeometry(ww, wh, wd);
-    const mat = wallMat.clone();
-    mat.color = new THREE.Color(0x6666aa);
-    const mesh = new THREE.Mesh(geo, mat);
-    mesh.position.set(wx + ww/2, wh/2, wz + wd/2);
+  BP.walls.forEach(function(w) {
+    var wx, wz, ww, wd;
+    if (w.side === 'north') { wx = w.x; wz = w.z; ww = w.w; wd = 0.15; }
+    else if (w.side === 'south') { wx = w.x; wz = w.z+w.d; ww = w.w; wd = 0.15; }
+    else if (w.side === 'east') { wx = w.x+w.w; wz = w.z; ww = 0.15; wd = w.d; }
+    else { wx = w.x; wz = w.z; ww = 0.15; wd = w.d; }
+    var g = new THREE.BoxGeometry(ww, w.h, wd);
+    var m = new THREE.MeshStandardMaterial({color:0x555599,roughness:0.6,metalness:0.1,transparent:true,opacity:0.1});
+    var mesh = new THREE.Mesh(g, m);
+    mesh.position.set(wx+ww/2, w.h/2, wz+wd/2);
     scene.add(mesh);
   });
 
   // Roof
-  const roof = data.roof;
-  const roofMat = new THREE.MeshStandardMaterial({
-    color: new THREE.Color(roof.color || 0x5a4a3a),
-    roughness: 0.8, metalness: 0.0,
+  var rf = BP.roof;
+  var roofMesh;
+  if (rf.style === 'flat') {
+    var rg = new THREE.BoxGeometry(rf.w, rf.h*0.3, rf.d);
+    var rm = new THREE.MeshStandardMaterial({color:rf.color||0x5a4a3a,roughness:0.8,metalness:0});
+    roofMesh = new THREE.Mesh(rg, rm);
+    roofMesh.position.set(sw/2, rf.y, sd/2);
+  } else if (rf.style === 'gable' || rf.style === 'steep-gable' || rf.style === 'low-gable') {
+    var shape = new THREE.Shape();
+    var pitch = rf.pitch || 0.4;
+    var ridgeH = rf.w * pitch * 0.5;
+    shape.moveTo(-rf.w/2, 0);
+    shape.lineTo(0, ridgeH);
+    shape.lineTo(rf.w/2, 0);
+    shape.lineTo(-rf.w/2, 0);
+    var extrudeSettings = {steps:1,depth:rf.d,bevelEnabled:true,bevelThickness:0.5,bevelSize:0.3,bevelSegments:2};
+    var rg = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+    var rm = new THREE.MeshStandardMaterial({color:rf.color||0x5a4a3a,roughness:0.8,metalness:0,side:THREE.DoubleSide});
+    roofMesh = new THREE.Mesh(rg, rm);
+    roofMesh.position.set(sw/2, rf.y, sd/2 - rf.d/2);
+    roofMesh.rotation.x = 0;
+  } else {
+    var rg = new THREE.ConeGeometry(Math.max(rf.w,rf.d)*0.6, rf.h, 4);
+    var rm = new THREE.MeshStandardMaterial({color:rf.color||0x5a4a3a,roughness:0.8,metalness:0});
+    roofMesh = new THREE.Mesh(rg, rm);
+    roofMesh.position.set(sw/2, rf.y + rf.h/2, sd/2);
+    roofMesh.rotation.y = Math.PI/4;
+  }
+  if (roofMesh) { roofMesh.castShadow = true; scene.add(roofMesh); }
+
+  // Measurements
+  BP.measurements.forEach(function(m) {
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    canvas.width = 256; canvas.height = 64;
+    ctx.fillStyle = 'rgba(50,180,100,0.15)';
+    ctx.beginPath(); ctx.roundRect(20,8,216,48,6); ctx.fill();
+    ctx.strokeStyle = 'rgba(50,180,100,0.4)'; ctx.lineWidth=1; ctx.stroke();
+    ctx.fillStyle = '#6ee7a7'; ctx.font = 'bold 24px monospace'; ctx.textAlign='center'; ctx.textBaseline='middle';
+    ctx.fillText(m.text, 128, 32);
+
+    var tex = new THREE.CanvasTexture(canvas);
+    tex.needsUpdate = true;
+    var sp = new THREE.Sprite(new THREE.SpriteMaterial({map:tex,transparent:true,depthTest:false,sizeAttenuation:true}));
+    sp.position.set(m.x, m.y + 0.5, m.z);
+    sp.scale.set(m.dim === 'width' ? 4 : 2.5, 1, 1);
+    scene.add(sp);
   });
-  const roofGeo = new THREE.ConeGeometry(Math.max(roof.w, roof.d) * 0.7, roof.h, 4);
-  const roofMesh = new THREE.Mesh(roofGeo, roofMat);
-  roofMesh.position.set(sw/2, roof.y, sd/2);
-  roofMesh.rotation.y = Math.PI / 4;
-  roofMesh.castShadow = true;
-  scene.add(roofMesh);
-
-  // Labels using sprites
-  data.labels.forEach(function(l) {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = 512;
-    canvas.height = 128;
 
-    ctx.shadowColor = 'rgba(0,0,0,0.8)';
-    ctx.shadowBlur = 12;
-
-    ctx.fillStyle = 'rgba(10,10,30,0.6)';
-    const tw = ctx.measureText(l.text).width || 200;
-    const rw = Math.min(tw + 40, 500);
-    const rh = 60;
-    const rx = (canvas.width - rw) / 2;
-    const ry = (canvas.height - rh) / 2;
-    ctx.shadowBlur = 0;
+  // Labels
+  BP.labels.forEach(function(l) {
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    canvas.width = 512; canvas.height = 100;
+    ctx.shadowColor = 'rgba(0,0,0,0.8)'; ctx.shadowBlur = 10;
     ctx.fillStyle = 'rgba(20,20,50,0.5)';
-    ctx.beginPath();
-    ctx.roundRect(rx, ry, rw, rh, 8);
-    ctx.fill();
-    ctx.strokeStyle = 'rgba(100,60,255,0.3)';
-    ctx.lineWidth = 1;
-    ctx.stroke();
-
-    ctx.shadowColor = 'rgba(0,0,0,0.6)';
-    ctx.shadowBlur = 6;
+    ctx.beginPath(); ctx.roundRect(50,12,412,76,10); ctx.fill();
+    ctx.strokeStyle = 'rgba(100,60,255,0.2)'; ctx.lineWidth=1; ctx.stroke();
+    ctx.shadowColor = 'rgba(0,0,0,0.5)'; ctx.shadowBlur = 4;
     ctx.fillStyle = l.text.includes('Upper') ? 'rgba(180,180,220,0.6)' : '#ffffff';
-    ctx.font = 'bold 32px -apple-system, BlinkMacSystemFont, sans-serif';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(l.text, canvas.width / 2, canvas.height / 2);
-
-    const texture = new THREE.CanvasTexture(canvas);
-    texture.needsUpdate = true;
-
-    const spriteMat = new THREE.SpriteMaterial({
-      map: texture,
-      transparent: true,
-      depthTest: false,
-      sizeAttenuation: true,
-    });
-    const sprite = new THREE.Sprite(spriteMat);
-    sprite.position.set(l.x, l.y + 2, l.z);
-    sprite.scale.set(8, 2, 1);
-    scene.add(sprite);
+    ctx.font = 'bold 28px -apple-system, BlinkMacSystemFont, sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(l.text, 256, 50);
+    var tex = new THREE.CanvasTexture(canvas);
+    tex.needsUpdate = true;
+    var sp = new THREE.Sprite(new THREE.SpriteMaterial({map:tex,transparent:true,depthTest:false,sizeAttenuation:true}));
+    sp.position.set(l.x, l.y + 2.5, l.z);
+    sp.scale.set(6, 1.2, 1);
+    scene.add(sp);
   });
 
-  // Camera position
-  const dist = Math.max(sw, sd) * 1.3 + 10;
-  camera.position.set(dist * 0.6, dist * 0.7, dist * 0.8);
-  controls.target.set(sw / 2, 1, sd / 2);
+  // Position camera
+  var dist = Math.max(sw, sd) * 1.2 + 8;
+  camera.position.set(dist*0.6, dist*0.6, dist*0.7);
+  controls.target.set(sw/2, 1, sd/2);
   controls.update();
 
+  // Tour points
+  tourPoints = BP.labels.map(function(l) { return {x:l.x, y:3, z:l.z}; });
+
   // Resize
   window.addEventListener('resize', function() {
-    const w2 = container.clientWidth;
-    const h2 = container.clientHeight;
-    camera.aspect = w2 / h2;
-    camera.updateProjectionMatrix();
+    var w2 = container.clientWidth, h2 = container.clientHeight;
+    camera.aspect = w2/h2; camera.updateProjectionMatrix();
     renderer.setSize(w2, h2);
   });
 
-  function animate() {
-    requestAnimationFrame(animate);
-    controls.update();
-    renderer.render(scene, camera);
-  }
   animate();
 }
 
-// RoundRect polyfill for labels
-if (!CanvasRenderingContext2D.prototype.roundRect) {
-  CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
-    if (r > w/2) r = w/2;
-    if (r > h/2) r = h/2;
-    this.moveTo(x + r, y);
-    this.arcTo(x + w, y, x + w, y + h, r);
-    this.arcTo(x + w, y + h, x, y + h, r);
-    this.arcTo(x, y + h, x, y, r);
-    this.arcTo(x, y, x + w, y, r);
-    return this;
-  };
+function animate() {
+  requestAnimationFrame(animate);
+  if (tourActive && tourPoints.length > 0) {
+    var p = tourPoints[tourIdx];
+    controls.target.lerp(new THREE.Vector3(p.x, p.y, p.z), 0.03);
+    var dist = controls.target.distanceTo(camera.position);
+    if (dist < 2) { tourIdx = (tourIdx + 1) % tourPoints.length; }
+  }
+  controls.update();
+  renderer.render(scene, camera);
 }
 
-// Update info overlay
-document.getElementById('summary-text').textContent = BLUEPRINT.summary || 'No description available.';
-var feat = BLUEPRINT.features || {};
+// UI
+document.getElementById('summary-text').textContent = BP.summary || 'No description.';
+document.getElementById('style-name').textContent = (BP.scene.style || 'Modern').charAt(0).toUpperCase() + (BP.scene.style||'Modern').slice(1);
+
+var feat = BP.features || {};
 var featHtml = '';
-var featMap = {
-  bedrooms: '🛏️', bathrooms: '🚿', stories: '🏠', garage: '🚗'
-};
-for (var k in feat) {
-  if (featMap[k]) {
-    var val = feat[k];
-    if (k === 'garage') val = val ? 'Yes' : 'No';
-    featHtml += '<span class="badge">' + featMap[k] + ' ' + k.charAt(0).toUpperCase() + k.slice(1) + ': ' + val + '</span>';
-  }
-}
+var dimHtml = '';
+if (feat.bedrooms !== undefined) featHtml += '<span class="badge">🛏️ ' + feat.bedrooms + ' bed</span>';
+if (feat.bathrooms !== undefined) featHtml += '<span class="badge">🚿 ' + feat.bathrooms + ' bath</span>';
+if (feat.stories !== undefined) featHtml += '<span class="badge">🏠 ' + feat.stories + ' story</span>';
+if (feat.garage !== undefined) featHtml += '<span class="badge">🚗 ' + (feat.garage ? 'Garage' : 'No garage') + '</span>';
+featHtml += '<span class="badge badge-dim">📐 ' + BP.scene.width + 'ft x ' + BP.scene.depth + 'ft</span>';
 document.getElementById('features').innerHTML = featHtml;
 
-initScene(BLUEPRINT);
+var sqft = BP.scene.width * BP.scene.depth * (BP.scene.stories || 1);
+document.getElementById('dimensions').textContent = '≈ ' + sqft + ' sq ft total';
+
+// Control mode switching
+document.querySelectorAll('#controls-hint span').forEach(function(el) {
+  el.addEventListener('click', function() {
+    document.querySelectorAll('#controls-hint span').forEach(function(e) { e.classList.remove('active'); });
+    el.classList.add('active');
+    var mode = el.dataset.mode;
+    if (mode === 'orbit') { tourActive = false; controls.enableRotate = true; controls.enablePan = true; }
+    else if (mode === 'pan') { tourActive = false; controls.enableRotate = false; controls.enablePan = true; }
+    else if (mode === 'tour') { tourActive = true; tourIdx = 0; controls.enableRotate = true; controls.enablePan = true; }
+  });
+});
+
+// Export
+document.getElementById('export-btn').addEventListener('click', function() {
+  var json = JSON.stringify(BP, null, 2);
+  var blob = new Blob([json], {type:'application/json'});
+  var a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = 'blueprint.json';
+  a.click();
+});
+
+initScene();
 </script>
 </body>
 </html>