Create app.py

app.py

@@ -0,0 +1,1095 @@
+"""
+Blueprint Room Extractor — Flask Server
+"""
+from __future__ import annotations
+
+import base64
+import io
+import json
+import os
+import threading
+import time
+import traceback
+import uuid
+from typing import Any, Dict, List, Optional
+
+import cv2
+import numpy as np
+from flask import Flask, Response, jsonify, render_template_string, request
+from PIL import Image
+
+from wall_pipeline import WallPipeline, _GPU
+
+app = Flask(__name__)
+
+# ── In-memory session store ──────────────────────────────────────────────────
+_sessions: Dict[str, Dict] = {}
+_sessions_lock = threading.Lock()
+
+
+def _new_session() -> str:
+    sid = str(uuid.uuid4())
+    with _sessions_lock:
+        _sessions[sid] = {
+            "original_bgr"  : None,   # np.ndarray
+            "wall_mask"     : None,
+            "room_mask"     : None,
+            "rooms"         : [],      # list of room dicts
+            "stage_images"  : {},      # key -> np.ndarray
+            "calibration"   : {},
+            "door_lines"    : [],      # manual door seal lines [(x1,y1,x2,y2),...]
+            "log"           : [],
+            "progress"      : 0,
+            "status"        : "idle",
+        }
+    return sid
+
+
+def _get_session(sid: str) -> Optional[Dict]:
+    with _sessions_lock:
+        return _sessions.get(sid)
+
+
+# ── Image helpers ─────────────────────────────────────────────────────────────
+def _bgr_to_b64(img: np.ndarray, max_dim: int = 2048) -> str:
+    h, w = img.shape[:2]
+    if max(h, w) > max_dim:
+        scale = max_dim / max(h, w)
+        img   = cv2.resize(img, (int(w*scale), int(h*scale)), interpolation=cv2.INTER_AREA)
+    _, buf = cv2.imencode(".jpg", img, [cv2.IMWRITE_JPEG_QUALITY, 88])
+    return base64.b64encode(buf.tobytes()).decode()
+
+
+def _mask_to_b64(mask: np.ndarray, max_dim: int = 2048) -> str:
+    vis = cv2.cvtColor(mask, cv2.COLOR_GRAY2BGR)
+    return _bgr_to_b64(vis, max_dim)
+
+
+def _composite_overlay(orig: np.ndarray, rooms: List[Dict],
+                         wall_mask: np.ndarray) -> np.ndarray:
+    """Render original image + wall overlay + room polygons."""
+    vis = orig.copy()
+    # Overlay walls (semi-transparent blue)
+    if wall_mask is not None:
+        wm = wall_mask
+        if wm.shape[:2] != vis.shape[:2]:
+            wm = cv2.resize(wm, (vis.shape[1], vis.shape[0]),
+                            interpolation=cv2.INTER_NEAREST)
+        wall_vis = np.zeros_like(vis)
+        wall_vis[wm > 0] = (0, 80, 220)
+        vis = cv2.addWeighted(vis, 0.85, wall_vis, 0.4, 0)
+    # Draw room fills
+    rng = np.random.default_rng(7)
+    for room in rooms:
+        color = rng.integers(80, 200, 3).tolist()
+        segs  = room.get("segmentation", [])
+        for seg in segs:
+            pts = np.array(seg, dtype=np.int32).reshape(-1, 2)
+            if len(pts) >= 3:
+                overlay = vis.copy()
+                cv2.fillPoly(overlay, [pts], color)
+                vis = cv2.addWeighted(vis, 0.55, overlay, 0.45, 0)
+                cv2.polylines(vis, [pts], True, color, 2)
+        # Label
+        cx, cy = room.get("centroid", [0, 0])
+        label  = room.get("label", f"#{room['id']}")
+        cv2.putText(vis, label, (cx-20, cy),
+                    cv2.FONT_HERSHEY_SIMPLEX, 0.55, (255,255,255), 2, cv2.LINE_AA)
+        cv2.putText(vis, str(room["id"]), (cx-6, cy+18),
+                    cv2.FONT_HERSHEY_SIMPLEX, 0.45, (220,220,0), 1, cv2.LINE_AA)
+    return vis
+
+
+# ── Routes ────────────────────────────────────────────────────────────────────
+@app.route("/")
+def index():
+    return render_template_string(HTML_PAGE)
+
+
+@app.route("/api/session", methods=["POST"])
+def create_session():
+    sid = _new_session()
+    return jsonify({"session_id": sid})
+
+
+@app.route("/api/upload", methods=["POST"])
+def upload():
+    sid  = request.form.get("session_id", "")
+    sess = _get_session(sid)
+    if sess is None:
+        return jsonify({"error": "Invalid session"}), 400
+
+    file  = request.files.get("image")
+    if file is None:
+        return jsonify({"error": "No image"}), 400
+
+    buf  = np.frombuffer(file.read(), np.uint8)
+    img  = cv2.imdecode(buf, cv2.IMREAD_COLOR)
+    if img is None:
+        return jsonify({"error": "Could not decode image"}), 400
+
+    # Downscale very large images to keep processing fast
+    max_px = 2400
+    h, w   = img.shape[:2]
+    if max(h, w) > max_px:
+        scale = max_px / max(h, w)
+        img   = cv2.resize(img, (int(w*scale), int(h*scale)), interpolation=cv2.INTER_AREA)
+
+    with _sessions_lock:
+        sess["original_bgr"] = img
+        sess["wall_mask"]    = None
+        sess["room_mask"]    = None
+        sess["rooms"]        = []
+        sess["stage_images"] = {}
+        sess["door_lines"]   = []
+        sess["log"]          = []
+        sess["progress"]     = 0
+        sess["status"]       = "uploaded"
+
+    preview = _bgr_to_b64(img)
+    return jsonify({"preview": preview,
+                    "width" : img.shape[1],
+                    "height": img.shape[0]})
+
+
+@app.route("/api/run", methods=["POST"])
+def run_pipeline():
+    data = request.get_json(force=True)
+    sid  = data.get("session_id", "")
+    sess = _get_session(sid)
+    if sess is None or sess["original_bgr"] is None:
+        return jsonify({"error": "No image uploaded"}), 400
+
+    def _worker():
+        logs = []
+        def progress(msg, pct):
+            logs.append(msg)
+            with _sessions_lock:
+                sess["log"]      = logs[:]
+                sess["progress"] = pct
+
+        try:
+            with _sessions_lock:
+                sess["status"] = "running"
+
+            pipe = WallPipeline(progress_cb=progress)
+            walls, rooms_mask, cal = pipe.run(
+                sess["original_bgr"],
+                extra_door_lines=sess.get("door_lines", [])
+            )
+
+            # Auto-detect rooms from filtered mask
+            contours, _ = cv2.findContours(
+                rooms_mask, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+            rooms = []
+            for idx, cnt in enumerate(contours, 1):
+                area = cv2.contourArea(cnt)
+                bx, by, bw, bh = cv2.boundingRect(cnt)
+                M  = cv2.moments(cnt)
+                cx = int(M["m10"]/M["m00"]) if M["m00"] else bx+bw//2
+                cy = int(M["m01"]/M["m00"]) if M["m00"] else by+bh//2
+                seg = cnt[:,0,:].tolist()
+                seg = [v for pt in seg for v in pt]
+                rooms.append({
+                    "id"          : idx,
+                    "label"       : f"Room {idx}",
+                    "segmentation": [seg],
+                    "area"        : float(area),
+                    "bbox"        : [bx, by, bw, bh],
+                    "centroid"    : [cx, cy],
+                    "confidence"  : 0.95,
+                    "isAi"        : True,
+                })
+
+            with _sessions_lock:
+                sess["wall_mask"]    = walls
+                sess["room_mask"]    = rooms_mask
+                sess["rooms"]        = rooms
+                sess["stage_images"] = pipe.stage_images
+                sess["calibration"]  = cal.as_dict() if cal else {}
+                sess["status"]       = "done"
+                sess["progress"]     = 100
+
+        except Exception as exc:
+            tb = traceback.format_exc()
+            with _sessions_lock:
+                sess["status"] = "error"
+                sess["log"]    = logs + [f"ERROR: {exc}", tb]
+
+    t = threading.Thread(target=_worker, daemon=True)
+    t.start()
+    return jsonify({"started": True})
+
+
+@app.route("/api/progress", methods=["GET"])
+def progress():
+    sid  = request.args.get("session_id", "")
+    sess = _get_session(sid)
+    if sess is None:
+        return jsonify({"error": "Invalid session"}), 400
+    with _sessions_lock:
+        return jsonify({
+            "status"  : sess["status"],
+            "progress": sess["progress"],
+            "log"     : sess["log"][-6:] if sess["log"] else [],
+        })
+
+
+@app.route("/api/result", methods=["GET"])
+def result():
+    sid  = request.args.get("session_id", "")
+    sess = _get_session(sid)
+    if sess is None:
+        return jsonify({"error": "Invalid session"}), 400
+
+    orig  = sess.get("original_bgr")
+    walls = sess.get("wall_mask")
+    rooms = sess.get("rooms", [])
+
+    if orig is None:
+        return jsonify({"error": "No image"}), 400
+
+    composite = _composite_overlay(orig, rooms, walls)
+    return jsonify({
+        "composite"  : _bgr_to_b64(composite),
+        "wall_mask"  : _mask_to_b64(walls) if walls is not None else None,
+        "rooms"      : rooms,
+        "calibration": sess.get("calibration", {}),
+        "gpu"        : _GPU,
+    })
+
+
+@app.route("/api/stages", methods=["GET"])
+def stages():
+    sid  = request.args.get("session_id", "")
+    sess = _get_session(sid)
+    if sess is None:
+        return jsonify({"error": "Invalid session"}), 400
+
+    stage_imgs = sess.get("stage_images", {})
+    result     = {}
+    for key, img in stage_imgs.items():
+        if img is not None and isinstance(img, np.ndarray):
+            if len(img.shape) == 2:
+                disp = cv2.cvtColor(img, cv2.COLOR_GRAY2BGR)
+            else:
+                disp = img
+            result[key] = _bgr_to_b64(disp, max_dim=800)
+    return jsonify(result)
+
+
+@app.route("/api/wand", methods=["POST"])
+def wand():
+    """Click-to-segment: flood-fill from clicked pixel."""
+    data = request.get_json(force=True)
+    sid  = data.get("session_id", "")
+    sess = _get_session(sid)
+    if sess is None or sess["wall_mask"] is None:
+        return jsonify({"error": "Run pipeline first"}), 400
+
+    click_x = int(data.get("x", 0))
+    click_y = int(data.get("y", 0))
+
+    pipe    = WallPipeline()
+    new_room = pipe.wand_segment(
+        sess["wall_mask"], click_x, click_y, sess["rooms"]
+    )
+    if new_room is None:
+        return jsonify({"error": "No room found at that location"}), 400
+
+    with _sessions_lock:
+        sess["rooms"].append(new_room)
+
+    orig      = sess["original_bgr"]
+    composite = _composite_overlay(orig, sess["rooms"], sess["wall_mask"])
+    return jsonify({
+        "room"     : new_room,
+        "composite": _bgr_to_b64(composite),
+        "rooms"    : sess["rooms"],
+    })
+
+
+@app.route("/api/remove_room", methods=["POST"])
+def remove_room():
+    data   = request.get_json(force=True)
+    sid    = data.get("session_id", "")
+    room_id = int(data.get("room_id", -1))
+    sess   = _get_session(sid)
+    if sess is None:
+        return jsonify({"error": "Invalid session"}), 400
+
+    with _sessions_lock:
+        before = len(sess["rooms"])
+        sess["rooms"] = [r for r in sess["rooms"] if r["id"] != room_id]
+        removed = before - len(sess["rooms"])
+
+    if removed == 0:
+        return jsonify({"error": f"Room {room_id} not found"}), 404
+
+    orig      = sess["original_bgr"]
+    composite = _composite_overlay(orig, sess["rooms"], sess["wall_mask"])
+    return jsonify({
+        "composite": _bgr_to_b64(composite),
+        "rooms"    : sess["rooms"],
+        "removed"  : room_id,
+    })
+
+
+@app.route("/api/add_door_line", methods=["POST"])
+def add_door_line():
+    data = request.get_json(force=True)
+    sid  = data.get("session_id", "")
+    sess = _get_session(sid)
+    if sess is None:
+        return jsonify({"error": "Invalid session"}), 400
+
+    x1 = int(data.get("x1", 0))
+    y1 = int(data.get("y1", 0))
+    x2 = int(data.get("x2", 0))
+    y2 = int(data.get("y2", 0))
+
+    with _sessions_lock:
+        sess["door_lines"].append((x1, y1, x2, y2))
+
+    # If wall mask exists, paint immediately
+    orig  = sess["original_bgr"]
+    walls = sess["wall_mask"]
+    if walls is not None:
+        stroke = sess.get("calibration", {}).get("stroke_width", 3)
+        lw = max(3, stroke)
+        cv2.line(walls, (x1, y1), (x2, y2), 255, lw)
+        # Re-segment rooms
+        pipe = WallPipeline()
+        rooms_mask = pipe._segment_rooms(walls)
+        valid_mask, contours = pipe._filter_rooms(rooms_mask, orig.shape)
+        rooms = []
+        for idx, cnt in enumerate(contours, 1):
+            area = cv2.contourArea(cnt)
+            bx_, by_, bw_, bh_ = cv2.boundingRect(cnt)
+            M  = cv2.moments(cnt)
+            cx = int(M["m10"]/M["m00"]) if M["m00"] else bx_+bw_//2
+            cy = int(M["m01"]/M["m00"]) if M["m00"] else by_+bh_//2
+            seg = cnt[:,0,:].tolist()
+            seg = [v for pt in seg for v in pt]
+            rooms.append({
+                "id": idx, "label": f"Room {idx}",
+                "segmentation": [seg],
+                "area": float(area),
+                "bbox": [bx_, by_, bw_, bh_],
+                "centroid": [cx, cy],
+                "confidence": 0.95,
+            })
+        with _sessions_lock:
+            sess["wall_mask"] = walls
+            sess["room_mask"] = valid_mask
+            sess["rooms"]     = rooms
+
+    composite = _composite_overlay(orig, sess["rooms"], sess["wall_mask"])
+    return jsonify({
+        "composite"  : _bgr_to_b64(composite),
+        "rooms"      : sess["rooms"],
+        "door_lines" : sess["door_lines"],
+    })
+
+
+@app.route("/api/clear_door_lines", methods=["POST"])
+def clear_door_lines():
+    data = request.get_json(force=True)
+    sid  = data.get("session_id", "")
+    sess = _get_session(sid)
+    if sess is None:
+        return jsonify({"error": "Invalid session"}), 400
+    with _sessions_lock:
+        sess["door_lines"] = []
+    return jsonify({"cleared": True})
+
+
+@app.route("/api/export", methods=["GET"])
+def export_json():
+    sid  = request.args.get("session_id", "")
+    sess = _get_session(sid)
+    if sess is None:
+        return jsonify({"error": "Invalid session"}), 400
+    rooms = sess.get("rooms", [])
+    safe  = []
+    for r in rooms:
+        safe.append({k: v for k, v in r.items()
+                     if k in ("id","label","area","bbox","centroid","confidence")})
+    return Response(
+        json.dumps({"rooms": safe, "count": len(safe)}, indent=2),
+        mimetype="application/json",
+        headers={"Content-Disposition": "attachment; filename=rooms.json"}
+    )
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+#  HTML / CSS / JS  (single-page app)
+# ─────────────────────────────────────────────────────────────────────────────
+HTML_PAGE = r"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>Blueprint Room Extractor</title>
+<style>
+/* ── Reset & base ── */
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0b0c10;--panel:#13151c;--panel2:#1a1d27;--border:#252836;
+  --accent:#00d4aa;--accent2:#6c63ff;--warn:#f59e0b;--danger:#ef4444;
+  --text:#e8eaf0;--muted:#8b90a0;--font:'JetBrains Mono',monospace;
+}
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Syne:wght@400;600;800&display=swap');
+html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;overflow:hidden}
+
+/* ── Layout ── */
+#app{display:grid;grid-template-columns:320px 1fr 280px;grid-template-rows:56px 1fr 38px;height:100vh;gap:0}
+header{grid-column:1/-1;background:var(--panel);border-bottom:1px solid var(--border);
+       display:flex;align-items:center;gap:16px;padding:0 20px}
+header h1{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;
+          background:linear-gradient(135deg,var(--accent),var(--accent2));
+          -webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}
+.gpu-badge{padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.8px;
+           background:rgba(108,99,255,.18);color:var(--accent2);border:1px solid var(--accent2)}
+.gpu-badge.on{background:rgba(0,212,170,.18);color:var(--accent);border-color:var(--accent)}
+
+/* ── Left panel ── */
+#left{background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
+.section-title{font-family:'Syne',sans-serif;font-size:11px;font-weight:600;color:var(--muted);
+               text-transform:uppercase;letter-spacing:1.2px;padding-bottom:6px;border-bottom:1px solid var(--border)}
+
+/* ── Upload zone ── */
+#drop-zone{border:2px dashed var(--border);border-radius:10px;padding:24px 16px;text-align:center;
+           cursor:pointer;transition:all .2s;color:var(--muted);position:relative}
+#drop-zone:hover,#drop-zone.over{border-color:var(--accent);color:var(--accent);background:rgba(0,212,170,.04)}
+#drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}
+#drop-zone .icon{font-size:28px;margin-bottom:6px}
+#drop-zone p{font-size:11px}
+
+/* ── Buttons ── */
+.btn{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;border:none;cursor:pointer;
+     font-family:var(--font);font-size:12px;font-weight:500;transition:all .15s;width:100%;justify-content:center}
+.btn-primary{background:linear-gradient(135deg,var(--accent),#00b890);color:#001a14}
+.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
+.btn-secondary{background:var(--panel2);color:var(--text);border:1px solid var(--border)}
+.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
+.btn-danger{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.3)}
+.btn-danger:hover{background:rgba(239,68,68,.25)}
+.btn-warn{background:rgba(245,158,11,.13);color:var(--warn);border:1px solid rgba(245,158,11,.3)}
+.btn-warn:hover{background:rgba(245,158,11,.22)}
+.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
+
+/* ── Tool panel ── */
+.tool-group{display:flex;flex-direction:column;gap:8px}
+.tool-row{display:flex;gap:7px}
+.tool-btn{flex:1;padding:8px 6px;border-radius:7px;border:1px solid var(--border);background:var(--panel2);
+          color:var(--muted);cursor:pointer;font-size:18px;transition:all .15s;font-family:var(--font)}
+.tool-btn:hover{border-color:var(--accent);color:var(--accent)}
+.tool-btn.active{border-color:var(--accent);background:rgba(0,212,170,.12);color:var(--accent)}
+.tool-label{font-size:10px;color:var(--muted);text-align:center;margin-top:2px}
+
+/* ── Inputs ── */
+.field{display:flex;flex-direction:column;gap:5px}
+.field label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
+.field input{background:var(--panel2);border:1px solid var(--border);border-radius:6px;
+             color:var(--text);font-family:var(--font);font-size:12px;padding:7px 10px;width:100%}
+.field input:focus{outline:none;border-color:var(--accent)}
+.coord-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px}
+.coord-row input{text-align:center}
+
+/* ── Progress ── */
+#progress-bar-wrap{height:4px;background:var(--panel2);border-radius:2px;overflow:hidden;margin-top:4px}
+#progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s}
+#status-text{font-size:11px;color:var(--muted)}
+
+/* ── Center canvas area ── */
+#center{background:var(--bg);overflow:hidden;position:relative;display:flex;flex-direction:column}
+#viewer-toolbar{background:var(--panel);border-bottom:1px solid var(--border);
+                padding:8px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
+.zoom-ctrl{display:flex;align-items:center;gap:6px}
+.zoom-ctrl label{font-size:11px;color:var(--muted);min-width:38px}
+.zoom-ctrl input[type=range]{width:90px;accent-color:var(--accent)}
+.zoom-val{font-size:11px;color:var(--accent);min-width:38px}
+#canvas-wrap{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;position:relative}
+#img-layer{position:relative;transform-origin:top left;display:inline-block;line-height:0}
+#img-layer img{display:block;max-width:none;cursor:crosshair;user-select:none}
+#img-layer canvas{position:absolute;top:0;left:0;pointer-events:none}
+.crosshair-cursor{cursor:crosshair!important}
+.default-cursor{cursor:default!important}
+
+/* ── Tab view (stages) ── */
+#tabs{display:flex;gap:1px;background:var(--bg);padding:0 14px}
+.tab{padding:8px 14px;font-size:11px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all .15s}
+.tab:hover{color:var(--text)}
+.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
+
+/* ── Right panel ── */
+#right{background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
+#rooms-list{display:flex;flex-direction:column;gap:6px}
+.room-card{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;
+           display:flex;align-items:center;gap:8px;transition:border-color .15s}
+.room-card:hover{border-color:var(--accent)}
+.room-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
+.room-info{flex:1;min-width:0}
+.room-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.room-meta{font-size:10px;color:var(--muted)}
+.room-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 5px;
+          border-radius:4px;transition:all .15s}
+.room-del:hover{color:var(--danger);background:rgba(239,68,68,.1)}
+
+/* ── Calibration display ── */
+.cal-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
+.cal-item{background:var(--panel2);border-radius:6px;padding:7px 10px}
+.cal-key{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}
+.cal-val{font-size:13px;font-weight:500;color:var(--accent);margin-top:2px}
+
+/* ── Log ── */
+#log-box{background:var(--panel2);border-radius:8px;padding:10px;font-size:10px;color:var(--muted);
+         max-height:130px;overflow-y:auto;line-height:1.6}
+
+/* ── Status bar ── */
+footer{grid-column:1/-1;background:var(--panel);border-top:1px solid var(--border);
+       padding:0 16px;display:flex;align-items:center;gap:16px;font-size:10px;color:var(--muted)}
+footer span{display:flex;align-items:center;gap:5px}
+.dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
+.dot.green{background:var(--accent)}
+.dot.orange{background:var(--warn);animation:pulse .8s infinite}
+.dot.red{background:var(--danger)}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
+
+/* ── Stage grid ── */
+#stages-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
+.stage-card{background:var(--panel2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
+.stage-card img{width:100%;display:block}
+.stage-card-label{padding:4px 8px;font-size:10px;color:var(--muted)}
+
+/* ── Divider ── */
+.divider{height:1px;background:var(--border);margin:2px 0}
+
+/* ── Toast ── */
+#toast{position:fixed;bottom:50px;left:50%;transform:translateX(-50%) translateY(20px);
+       background:var(--panel);border:1px solid var(--border);border-radius:10px;
+       padding:10px 20px;font-size:12px;opacity:0;transition:all .3s;pointer-events:none;z-index:999}
+#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
+#toast.err{border-color:var(--danger);color:var(--danger)}
+#toast.ok{border-color:var(--accent);color:var(--accent)}
+</style>
+</head>
+<body>
+<div id="app">
+
+<!-- HEADER -->
+<header>
+  <div>🏗️</div>
+  <h1>Blueprint Room Extractor</h1>
+  <div class="gpu-badge" id="gpu-badge">CPU</div>
+  <div style="flex:1"></div>
+  <button class="btn btn-secondary" style="width:auto" onclick="exportJSON()">⬇ Export JSON</button>
+</header>
+
+<!-- LEFT PANEL -->
+<div id="left">
+
+  <div class="section-title">Image</div>
+  <div id="drop-zone">
+    <input type="file" id="file-input" accept="image/*" onchange="handleFile(this.files[0])"/>
+    <div class="icon">🖼️</div>
+    <p>Drop blueprint or click to upload</p>
+  </div>
+
+  <button class="btn btn-primary" id="run-btn" disabled onclick="runPipeline()">
+    ⚡ Run Wall Extraction
+  </button>
+
+  <div id="progress-bar-wrap"><div id="progress-bar"></div></div>
+  <div id="status-text">Idle</div>
+
+  <div class="divider"></div>
+  <div class="section-title">Tools</div>
+
+  <div class="tool-group">
+    <div class="tool-row">
+      <div style="flex:1;text-align:center">
+        <button class="tool-btn" id="tool-pan" onclick="setTool('pan')" title="Pan / Zoom">🔍</button>
+        <div class="tool-label">Pan/Zoom</div>
+      </div>
+      <div style="flex:1;text-align:center">
+        <button class="tool-btn active" id="tool-wand" onclick="setTool('wand')" title="Magic Wand">🪄</button>
+        <div class="tool-label">Wand</div>
+      </div>
+      <div style="flex:1;text-align:center">
+        <button class="tool-btn" id="tool-door" onclick="setTool('door')" title="Door Seal">🚪</button>
+        <div class="tool-label">Door Line</div>
+      </div>
+    </div>
+    <div id="tool-hint" style="font-size:10px;color:var(--muted);text-align:center;padding:4px 0">
+      Wand: click image to detect room
+    </div>
+  </div>
+
+  <div class="divider"></div>
+
+  <!-- DOOR LINE manual entry -->
+  <div class="section-title">🚪 Door Seal Line</div>
+  <div style="font-size:10px;color:var(--muted);margin-bottom:4px">Enter pixel coords or click on image with Door tool</div>
+  <div class="coord-row">
+    <div class="field"><label>X1</label><input id="dl-x1" type="number" value="0" min="0"/></div>
+    <div class="field"><label>Y1</label><input id="dl-y1" type="number" value="0" min="0"/></div>
+    <div class="field"><label>X2</label><input id="dl-x2" type="number" value="100" min="0"/></div>
+    <div class="field"><label>Y2</label><input id="dl-y2" type="number" value="0" min="0"/></div>
+  </div>
+  <button class="btn btn-warn" onclick="addDoorLine()">🚪 Add Door Seal Line</button>
+  <button class="btn btn-secondary" onclick="clearDoorLines()" style="font-size:11px">Clear All Door Lines</button>
+  <div id="door-lines-list" style="font-size:10px;color:var(--muted)"></div>
+
+  <div class="divider"></div>
+
+  <!-- REMOVE ROOM -->
+  <div class="section-title">🗑️ Remove Room</div>
+  <div style="display:flex;gap:6px">
+    <div class="field" style="flex:1"><label>Room ID</label><input id="remove-id" type="number" min="1" value="1"/></div>
+    <button class="btn btn-danger" style="width:auto;margin-top:16px;padding:8px 12px" onclick="removeRoom()">Del</button>
+  </div>
+
+</div>
+
+<!-- CENTER: canvas + tab strip -->
+<div id="center">
+  <div id="viewer-toolbar">
+    <div class="zoom-ctrl">
+      <label>Zoom</label>
+      <input type="range" id="zoom-slider" min="20" max="500" value="100" oninput="applyZoom(this.value)"/>
+      <span class="zoom-val" id="zoom-val">100%</span>
+    </div>
+    <div class="zoom-ctrl">
+      <label>Pan X</label>
+      <input type="range" id="pan-x" min="-2000" max="2000" value="0" oninput="applyPan()"/>
+    </div>
+    <div class="zoom-ctrl">
+      <label>Pan Y</label>
+      <input type="range" id="pan-y" min="-2000" max="2000" value="0" oninput="applyPan()"/>
+    </div>
+    <button class="btn btn-secondary" style="width:auto;padding:5px 12px;font-size:11px" onclick="resetView()">⌂ Reset</button>
+    <div id="tabs" style="flex:1;display:flex;justify-content:flex-end">
+      <div class="tab active" onclick="switchTab('result')">Result</div>
+      <div class="tab" onclick="switchTab('walls')">Walls</div>
+      <div class="tab" onclick="switchTab('stages')">Stages</div>
+    </div>
+  </div>
+  <div id="canvas-wrap">
+    <!-- Result tab -->
+    <div id="tab-result" style="position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center">
+      <div id="img-layer">
+        <img id="main-img" src="" alt="" style="display:none" onclick="onCanvasClick(event)"/>
+        <canvas id="overlay-canvas"></canvas>
+      </div>
+    </div>
+    <!-- Walls tab -->
+    <div id="tab-walls" style="display:none;width:100%;height:100%;align-items:center;justify-content:center">
+      <img id="walls-img" src="" style="max-width:100%;max-height:100%;border-radius:6px"/>
+    </div>
+    <!-- Stages tab -->
+    <div id="tab-stages" style="display:none;overflow-y:auto;width:100%;height:100%">
+      <div id="stages-grid"></div>
+    </div>
+  </div>
+</div>
+
+<!-- RIGHT PANEL -->
+<div id="right">
+  <div class="section-title">Rooms (<span id="room-count">0</span>)</div>
+  <div id="rooms-list"><div style="color:var(--muted);font-size:11px;text-align:center;padding:20px 0">Run pipeline to detect rooms</div></div>
+
+  <div class="divider"></div>
+  <div class="section-title">Calibration</div>
+  <div class="cal-grid" id="cal-grid">
+    <div style="color:var(--muted);font-size:11px;grid-column:1/-1">—</div>
+  </div>
+
+  <div class="divider"></div>
+  <div class="section-title">Log</div>
+  <div id="log-box">Ready.</div>
+</div>
+
+<!-- FOOTER -->
+<footer>
+  <span><div class="dot" id="status-dot"></div><span id="footer-status">Idle</span></span>
+  <span id="footer-coords" style="font-family:monospace">x:— y:—</span>
+  <span style="margin-left:auto" id="footer-rooms">0 rooms</span>
+</footer>
+
+</div><!-- #app -->
+
+<div id="toast"></div>
+
+<script>
+// ── State ──────────────────────────────────────────────────────────────────
+let SID = null;
+let activeTool = 'wand';
+let zoomLevel  = 100;
+let imgW = 0, imgH = 0;
+let doorStart = null;
+let pollingTimer = null;
+let doorLines = [];
+
+const ROOM_COLORS = ['#00d4aa','#6c63ff','#f59e0b','#ef4444','#10b981',
+                     '#3b82f6','#ec4899','#8b5cf6','#14b8a6','#f97316'];
+
+// ── Init ────────────────────────────────────────────────────────────────────
+async function init(){
+  const r = await fetch('/api/session',{method:'POST'});
+  const d = await r.json();
+  SID = d.session_id;
+}
+init();
+
+// ── File handling ─────────────────────────────────────────────────────────
+const dz = document.getElementById('drop-zone');
+dz.addEventListener('dragover', e=>{e.preventDefault();dz.classList.add('over')});
+dz.addEventListener('dragleave', ()=>dz.classList.remove('over'));
+dz.addEventListener('drop', e=>{e.preventDefault();dz.classList.remove('over');
+  if(e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0])});
+
+async function handleFile(file){
+  if(!file||!SID) return;
+  const fd = new FormData();
+  fd.append('session_id', SID);
+  fd.append('image', file);
+  setStatus('Uploading...','orange');
+  const r = await fetch('/api/upload',{method:'POST',body:fd});
+  const d = await r.json();
+  if(d.error){toast(d.error,true);return;}
+  imgW = d.width; imgH = d.height;
+  showMainImg('data:image/jpeg;base64,'+d.preview);
+  document.getElementById('run-btn').disabled = false;
+  setStatus('Image loaded','green');
+  toast('Image loaded ✓');
+}
+
+// ── Pipeline ──────────────────────────────────────────────────────────────
+async function runPipeline(){
+  if(!SID) return;
+  document.getElementById('run-btn').disabled = true;
+  setStatus('Running...','orange');
+  setLog(['Starting wall extraction pipeline...']);
+  setProgress(0);
+
+  const r = await fetch('/api/run',{method:'POST',
+    headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({session_id:SID})});
+  const d = await r.json();
+  if(d.error){toast(d.error,true);document.getElementById('run-btn').disabled=false;return;}
+
+  pollingTimer = setInterval(pollProgress, 700);
+}
+
+async function pollProgress(){
+  const r = await fetch('/api/progress?session_id='+SID);
+  const d = await r.json();
+  setProgress(d.progress||0);
+  if(d.log) setLog(d.log);
+  setStatus(d.status==='running'?'Processing…':d.status, d.status==='error'?'red':d.status==='done'?'green':'orange');
+  if(d.status==='done'||d.status==='error'){
+    clearInterval(pollingTimer);
+    if(d.status==='done') loadResult();
+    document.getElementById('run-btn').disabled = false;
+  }
+}
+
+async function loadResult(){
+  const r = await fetch('/api/result?session_id='+SID);
+  const d = await r.json();
+  if(d.error){toast(d.error,true);return;}
+
+  // GPU badge
+  const badge = document.getElementById('gpu-badge');
+  badge.textContent = d.gpu ? 'GPU ⚡' : 'CPU';
+  badge.className   = 'gpu-badge'+(d.gpu?' on':'');
+
+  showMainImg('data:image/jpeg;base64,'+d.composite);
+  if(d.wall_mask) document.getElementById('walls-img').src='data:image/jpeg;base64,'+d.wall_mask;
+  updateRooms(d.rooms||[]);
+  updateCalibration(d.calibration||{});
+  loadStages();
+  toast(`✓ Detected ${(d.rooms||[]).length} rooms`,'ok');
+}
+
+async function loadStages(){
+  const r = await fetch('/api/stages?session_id='+SID);
+  const d = await r.json();
+  const grid = document.getElementById('stages-grid');
+  grid.innerHTML='';
+  const labels = {
+    '01_title_removed':'1. Title Block Removed',
+    '02_colors_removed':'2. Colors Removed',
+    '03_door_arcs':'3. Door Arcs Closed',
+    '04_walls_raw':'4. Walls Extracted',
+    '05b_no_fixtures':'5b. Fixtures Removed',
+    '05c_thin_removed':'5c. Thin Lines Removed',
+    '05d_bridged':'5d. Endpoints Bridged',
+    '05e_doors_closed':'5e. Door Openings Closed',
+    '05f_dangling_removed':'5f. Dangling Lines Removed',
+    '05g_large_gaps':'5g. Large Gaps Sealed',
+    '07_rooms':'7. Room Segmentation',
+    '08_rooms_filtered':'8. Filtered Rooms',
+  };
+  for(const [key, b64] of Object.entries(d)){
+    const card = document.createElement('div');
+    card.className='stage-card';
+    card.innerHTML=`<img src="data:image/jpeg;base64,${b64}"/>
+      <div class="stage-card-label">${labels[key]||key}</div>`;
+    grid.appendChild(card);
+  }
+}
+
+// ── Wand tool ─────────────────────────────────────────────────────────────
+async function onCanvasClick(e){
+  const img = document.getElementById('main-img');
+  if(!img.src||img.src==='') return;
+
+  const rect = img.getBoundingClientRect();
+  const scaleX = imgW / (rect.width  * (zoomLevel/100));
+  const scaleY = imgH / (rect.height * (zoomLevel/100));
+  const rawX = (e.clientX - rect.left) * scaleX;
+  const rawY = (e.clientY - rect.top)  * scaleY;
+  const px = Math.round(rawX / (zoomLevel/100));
+  const py = Math.round(rawY / (zoomLevel/100));
+
+  if(activeTool==='wand'){
+    await doWand(Math.round(rawX), Math.round(rawY));
+  } else if(activeTool==='door'){
+    await doDoorClick(Math.round(rawX), Math.round(rawY));
+  }
+}
+
+function getImgCoords(e){
+  const img = document.getElementById('main-img');
+  const rect = img.getBoundingClientRect();
+  // account for CSS zoom transform
+  const zoom = zoomLevel/100;
+  const x = Math.round((e.clientX - rect.left) / zoom);
+  const y = Math.round((e.clientY - rect.top)  / zoom);
+  return {x,y};
+}
+
+function onImgMouseMove(e){
+  const {x,y} = getImgCoords(e);
+  document.getElementById('footer-coords').textContent=`x:${x} y:${y}`;
+}
+
+async function doWand(x,y){
+  if(!SID){toast('Run pipeline first',true);return;}
+  toast('🪄 Detecting room...');
+  const r = await fetch('/api/wand',{method:'POST',
+    headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({session_id:SID,x,y})});
+  const d = await r.json();
+  if(d.error){toast(d.error,true);return;}
+  showMainImg('data:image/jpeg;base64,'+d.composite);
+  updateRooms(d.rooms||[]);
+  toast(`✓ Added Room ${d.room.id}`);
+}
+
+// ── Door line tool ─────────────────────────────────────────────────────────
+async function doDoorClick(x,y){
+  if(doorStart===null){
+    doorStart = {x,y};
+    document.getElementById('dl-x1').value=x;
+    document.getElementById('dl-y1').value=y;
+    toast(`Door start: (${x},${y}) — click end point`);
+  } else {
+    document.getElementById('dl-x2').value=x;
+    document.getElementById('dl-y2').value=y;
+    doorStart = null;
+    await addDoorLine();
+  }
+}
+
+async function addDoorLine(){
+  if(!SID) return;
+  const x1=+document.getElementById('dl-x1').value;
+  const y1=+document.getElementById('dl-y1').value;
+  const x2=+document.getElementById('dl-x2').value;
+  const y2=+document.getElementById('dl-y2').value;
+  const r = await fetch('/api/add_door_line',{method:'POST',
+    headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({session_id:SID,x1,y1,x2,y2})});
+  const d = await r.json();
+  if(d.error){toast(d.error,true);return;}
+  doorLines = d.door_lines||[];
+  renderDoorLinesList();
+  showMainImg('data:image/jpeg;base64,'+d.composite);
+  updateRooms(d.rooms||[]);
+  toast(`✓ Door seal line added`);
+}
+
+async function clearDoorLines(){
+  if(!SID) return;
+  await fetch('/api/clear_door_lines',{method:'POST',
+    headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({session_id:SID})});
+  doorLines=[];
+  renderDoorLinesList();
+  toast('Door lines cleared');
+}
+
+function renderDoorLinesList(){
+  const el = document.getElementById('door-lines-list');
+  if(!doorLines.length){el.textContent='No door lines';return;}
+  el.innerHTML=doorLines.map((l,i)=>
+    `<div style="padding:2px 0;border-bottom:1px solid var(--border)">#${i+1}: (${l[0]},${l[1]})→(${l[2]},${l[3]})</div>`
+  ).join('');
+}
+
+// ── Remove room ───────────────────────────────────────────────────────────
+async function removeRoom(){
+  const id = +document.getElementById('remove-id').value;
+  if(!SID||!id) return;
+  const r = await fetch('/api/remove_room',{method:'POST',
+    headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({session_id:SID,room_id:id})});
+  const d = await r.json();
+  if(d.error){toast(d.error,true);return;}
+  showMainImg('data:image/jpeg;base64,'+d.composite);
+  updateRooms(d.rooms||[]);
+  toast(`✓ Room ${id} removed`);
+}
+
+// ── View helpers ──────────────────────────────────────────────────────────
+function showMainImg(src){
+  const img = document.getElementById('main-img');
+  img.src=src;
+  img.style.display='block';
+  img.onmousemove = onImgMouseMove;
+  img.onclick = onCanvasClick;
+}
+
+function applyZoom(v){
+  zoomLevel = +v;
+  document.getElementById('zoom-val').textContent=v+'%';
+  const layer = document.getElementById('img-layer');
+  const panX  = document.getElementById('pan-x').value;
+  const panY  = document.getElementById('pan-y').value;
+  layer.style.transform=`scale(${v/100}) translate(${panX}px,${panY}px)`;
+}
+
+function applyPan(){
+  applyZoom(zoomLevel);
+}
+
+function resetView(){
+  zoomLevel=100;
+  document.getElementById('zoom-slider').value=100;
+  document.getElementById('pan-x').value=0;
+  document.getElementById('pan-y').value=0;
+  applyZoom(100);
+}
+
+function setTool(t){
+  activeTool=t;
+  document.querySelectorAll('.tool-btn').forEach(b=>b.classList.remove('active'));
+  document.getElementById('tool-'+t).classList.add('active');
+  const hints = {
+    pan:'Pan/Zoom: use sliders above the canvas',
+    wand:'Wand: click image to detect & add a room',
+    door:'Door: click two points to draw a seal line'
+  };
+  document.getElementById('tool-hint').textContent=hints[t];
+  doorStart=null;
+}
+
+function switchTab(name){
+  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
+  event.target.classList.add('active');
+  document.getElementById('tab-result').style.display=name==='result'?'flex':'none';
+  document.getElementById('tab-walls').style.display =name==='walls' ?'flex':'none';
+  document.getElementById('tab-stages').style.display=name==='stages'?'block':'none';
+}
+
+// ── Room list ─────────────────────────────────────────────────────────────
+function updateRooms(rooms){
+  const list = document.getElementById('rooms-list');
+  document.getElementById('room-count').textContent=rooms.length;
+  document.getElementById('footer-rooms').textContent=rooms.length+' rooms';
+  if(!rooms.length){
+    list.innerHTML='<div style="color:var(--muted);font-size:11px;text-align:center;padding:12px">No rooms detected</div>';
+    return;
+  }
+  list.innerHTML=rooms.map((r,i)=>{
+    const col=ROOM_COLORS[i%ROOM_COLORS.length];
+    const areaPx=Math.round(r.area||0);
+    return `<div class="room-card">
+      <div class="room-dot" style="background:${col}"></div>
+      <div class="room-info">
+        <div class="room-name">#${r.id} ${r.label||''}</div>
+        <div class="room-meta">${areaPx.toLocaleString()} px² · [${(r.bbox||[]).join(',')}]</div>
+      </div>
+      <button class="room-del" title="Delete room" onclick="quickDelete(${r.id})">✕</button>
+    </div>`;
+  }).join('');
+}
+
+async function quickDelete(id){
+  document.getElementById('remove-id').value=id;
+  await removeRoom();
+}
+
+// ── Calibration ───────────────────────────────────────────────────────────
+function updateCalibration(cal){
+  const grid = document.getElementById('cal-grid');
+  const entries=[
+    ['Stroke','stroke_width','px'],
+    ['Bridge gap','bridge_max_gap','px'],
+    ['Door gap','door_gap','px'],
+    ['Min dim','min_component_dim','px'],
+  ];
+  grid.innerHTML=entries.map(([label,key,unit])=>`
+    <div class="cal-item">
+      <div class="cal-key">${label}</div>
+      <div class="cal-val">${cal[key]??'—'}${cal[key]!==undefined?unit:''}</div>
+    </div>`).join('');
+}
+
+// ── Misc ─────────────────────────────────────────────────────────────────
+function setProgress(pct){
+  document.getElementById('progress-bar').style.width=pct+'%';
+  document.getElementById('status-text').textContent=pct+'%';
+}
+
+function setLog(lines){
+  const el=document.getElementById('log-box');
+  el.innerHTML=lines.map(l=>`<div>${l}</div>`).join('');
+  el.scrollTop=el.scrollHeight;
+}
+
+function setStatus(msg,color=''){
+  document.getElementById('footer-status').textContent=msg;
+  const dot=document.getElementById('status-dot');
+  dot.className='dot'+(color?' '+color:'');
+}
+
+function toast(msg,err=false){
+  const t=document.getElementById('toast');
+  t.textContent=msg;
+  t.className='show'+(err?' err':' ok');
+  clearTimeout(t._tid);
+  t._tid=setTimeout(()=>{t.className=''},2800);
+}
+
+async function exportJSON(){
+  if(!SID) return;
+  window.location='/api/export?session_id='+SID;
+}
+</script>
+</body>
+</html>
+"""
+
+if __name__ == "__main__":
+    print("=" * 60)
+    print(" Blueprint Room Extractor")
+    print(f" GPU acceleration: {'ON (CuPy)' if _GPU else 'OFF (CPU fallback)'}")
+    print(" Open: http://localhost:7860")
+    print("=" * 60)
+    app.run(host="0.0.0.0", port=7860, debug=False, threaded=True)