update app

app.py

@@ -151,7 +151,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3.5-4B model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -183,7 +182,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3.5-2B model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -215,7 +213,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3-VL model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -247,7 +244,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] LFM-450M model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         conversation = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -276,7 +272,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] LFM-1.6B model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         conversation = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -353,31 +348,21 @@ async def homepage(request: Request):
         * { box-sizing: border-box; margin: 0; padding: 0; }
 
         html, body {
-            min-height: 100%;
+            width: 100%; height: 100%;
+            overflow: hidden;
             background: var(--bg);
             color: var(--text);
             font-family: 'JetBrains Mono', monospace;
         }
 
-        body {
-            background-image:
-                radial-gradient(circle at 20% 50%, rgba(124,106,247,0.04) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(78,205,196,0.04) 0%, transparent 50%),
-                linear-gradient(var(--grid) 1px, transparent 1px),
-                linear-gradient(90deg, var(--grid) 1px, transparent 1px);
-            background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
-            overflow-x: auto;
-            overflow-y: auto;
-        }
-
         /* ── Top Bar ── */
         .top-bar {
-            position: sticky; top: 0; left: 0; right: 0;
+            position: fixed; top: 0; left: 0; right: 0;
             height: 42px;
-            background: rgba(13,13,15,0.95);
+            background: rgba(13,13,15,0.97);
             border-bottom: 1px solid var(--node-border);
             display: flex; align-items: center; padding: 0 20px;
-            gap: 12px; z-index: 1000;
+            gap: 12px; z-index: 2000;
             backdrop-filter: blur(12px);
         }
         .top-bar .logo  { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; }
@@ -391,13 +376,27 @@ async def homepage(request: Request):
             font-size: 10px; color: var(--accent);
         }
 
-        /* ── Canvas ── */
-        #canvas {
-            position: relative;
-            width: 1360px;
-            min-height: calc(100vh - 42px);
-            height: 900px;
-            margin: 0 auto;
+        /* ── Viewport (the scrollable/zoomable area) ── */
+        #viewport {
+            position: fixed;
+            top: 42px; left: 0; right: 0; bottom: 0;
+            overflow: hidden;
+            cursor: default;
+        }
+
+        /* ── World (the zoomable container) ── */
+        #world {
+            position: absolute;
+            top: 0; left: 0;
+            width: 2400px;
+            height: 1600px;
+            transform-origin: 0 0;
+            background-image:
+                radial-gradient(circle at 20% 50%, rgba(124,106,247,0.04) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(78,205,196,0.04) 0%, transparent 50%),
+                linear-gradient(var(--grid) 1px, transparent 1px),
+                linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+            background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
         }
 
         svg.wires {
@@ -566,10 +565,7 @@ async def homepage(request: Request):
             width: 6px; height: 6px; border-radius: 50%;
             background: var(--muted); display: inline-block; margin-right: 6px;
         }
-        .status-dot.active {
-            background: var(--accent2);
-            box-shadow: 0 0 5px var(--accent2);
-        }
+        .status-dot.active { background: var(--accent2); box-shadow: 0 0 5px var(--accent2); }
 
         /* ── Model badges ── */
         .model-badge {
@@ -589,11 +585,105 @@ async def homepage(request: Request):
             flex-shrink: 0;
         }
 
-        .canvas-footer { height: 36px; }
+        /* ══════════════════════════════════════════
+           ZOOM CONTROLS  — fixed bottom-right
+        ══════════════════════════════════════════ */
+        .zoom-bar {
+            position: fixed;
+            bottom: 24px; right: 24px;
+            z-index: 3000;
+            display: flex; align-items: center; gap: 0;
+            background: rgba(19,19,26,0.92);
+            border: 1px solid var(--node-border);
+            border-radius: 10px;
+            backdrop-filter: blur(14px);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.55);
+            overflow: hidden;
+            user-select: none;
+        }
+
+        .zoom-btn {
+            width: 36px; height: 36px;
+            display: flex; align-items: center; justify-content: center;
+            background: transparent;
+            border: none; cursor: pointer;
+            color: var(--muted);
+            font-size: 18px; font-weight: 700;
+            transition: background 0.15s, color 0.15s;
+            font-family: 'JetBrains Mono', monospace;
+            flex-shrink: 0;
+        }
+        .zoom-btn:hover { background: rgba(124,106,247,0.15); color: var(--accent); }
+        .zoom-btn:active { background: rgba(124,106,247,0.28); }
+
+        .zoom-divider {
+            width: 1px; height: 20px;
+            background: var(--node-border);
+            flex-shrink: 0;
+        }
+
+        .zoom-track {
+            position: relative;
+            width: 100px; height: 36px;
+            display: flex; align-items: center;
+            padding: 0 10px;
+            cursor: pointer;
+        }
+        .zoom-track-bg {
+            width: 100%; height: 3px;
+            background: var(--node-border);
+            border-radius: 3px;
+            position: relative;
+        }
+        .zoom-track-fill {
+            position: absolute; left: 0; top: 0; height: 100%;
+            background: linear-gradient(90deg, var(--accent), var(--accent2));
+            border-radius: 3px;
+            transition: width 0.1s;
+        }
+        .zoom-thumb {
+            position: absolute;
+            width: 13px; height: 13px;
+            background: #fff;
+            border: 2px solid var(--accent);
+            border-radius: 50%;
+            top: 50%; transform: translateY(-50%);
+            box-shadow: 0 0 6px rgba(124,106,247,0.5);
+            transition: left 0.1s;
+            pointer-events: none;
+        }
+
+        .zoom-label {
+            min-width: 42px; height: 36px;
+            display: flex; align-items: center; justify-content: center;
+            font-size: 10px; font-weight: 700;
+            color: var(--accent);
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: 0.04em;
+            border-left: 1px solid var(--node-border);
+            padding: 0 8px;
+        }
+
+        .zoom-reset {
+            height: 36px;
+            display: flex; align-items: center; justify-content: center;
+            background: transparent;
+            border: none; border-left: 1px solid var(--node-border);
+            cursor: pointer;
+            color: var(--muted);
+            font-size: 9px; font-weight: 700;
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: 0.06em;
+            padding: 0 10px;
+            transition: background 0.15s, color 0.15s;
+            text-transform: uppercase;
+        }
+        .zoom-reset:hover { background: rgba(78,205,196,0.12); color: var(--accent2); }
     </style>
 </head>
 <body>
 
+<!-- Top Bar -->
 <div class="top-bar">
     <span class="logo">MULTIMODAL EDGE</span>
     <span class="sep">|</span>
@@ -601,146 +691,357 @@ async def homepage(request: Request):
     <span class="badge">v2.3 — PENTA MODEL</span>
 </div>
 
-<div id="canvas">
-    <svg class="wires">
-        <path id="wire-img-task"   class="wire" />
-        <path id="wire-model-task" class="wire" />
-        <path id="wire-task-out"   class="wire" />
-        <path id="wire-task-gnd"   class="wire" />
-    </svg>
-
-    <!-- ─── ID 01 : Image Input ─── -->
-    <div class="node fixed-height" id="node-img" style="left:40px; top:52px;">
-        <div class="node-header">
-            <span><span class="status-dot" id="dot-img"></span>Input Image</span>
-            <span class="id">ID: 01</span>
-        </div>
-        <div class="node-body">
-            <div>
-                <label>Upload Image</label>
-                <div class="file-upload" id="dropZone">
-                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none"
-                         stroke="#7c6af7" stroke-width="1.5"
-                         stroke-linecap="round" stroke-linejoin="round">
-                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-                        <circle cx="8.5" cy="8.5" r="1.5"/>
-                        <polyline points="21 15 16 10 5 21"/>
-                    </svg>
-                    <span>Click or drop image here</span>
-                    <input type="file" id="fileInput" accept="image/*">
+<!-- Viewport + World -->
+<div id="viewport">
+    <div id="world">
+        <svg class="wires">
+            <path id="wire-img-task"   class="wire" />
+            <path id="wire-model-task" class="wire" />
+            <path id="wire-task-out"   class="wire" />
+            <path id="wire-task-gnd"   class="wire" />
+        </svg>
+
+        <!-- ─── ID 01 : Image Input ─── -->
+        <div class="node fixed-height" id="node-img" style="left:60px; top:60px;">
+            <div class="node-header">
+                <span><span class="status-dot" id="dot-img"></span>Input Image</span>
+                <span class="id">ID: 01</span>
+            </div>
+            <div class="node-body">
+                <div>
+                    <label>Upload Image</label>
+                    <div class="file-upload" id="dropZone">
+                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none"
+                             stroke="#7c6af7" stroke-width="1.5"
+                             stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                            <circle cx="8.5" cy="8.5" r="1.5"/>
+                            <polyline points="21 15 16 10 5 21"/>
+                        </svg>
+                        <span>Click or drop image here</span>
+                        <input type="file" id="fileInput" accept="image/*">
+                    </div>
+                    <img id="imgPreview" class="img-preview" />
                 </div>
-                <img id="imgPreview" class="img-preview" />
             </div>
+            <div class="port out" id="port-img-out" style="top:50%;transform:translateY(-50%);"></div>
         </div>
-        <div class="port out" id="port-img-out" style="top:50%;transform:translateY(-50%);"></div>
-    </div>
 
-    <!-- ─── ID 02 : Model Selector ─── -->
-    <div class="node fixed-height" id="node-model" style="left:40px; top:402px;">
-        <div class="node-header">
-            <span><span class="status-dot" id="dot-model"></span>Model Selector</span>
-            <span class="id">ID: 02</span>
-        </div>
-        <div class="node-body">
-            <div>
-                <label>Active Model</label>
-                <select id="modelSelect">
-                    <option value="qwen_4b">Qwen3.5-4B</option>
-                    <option value="qwen_2b">Qwen3.5-2B</option>
-                    <option value="qwen_vl">Qwen3-VL-2B-Instruct</option>
-                    <option value="lfm_450">LFM2.5-VL-450M (LiquidAI)</option>
-                    <option value="lfm_16">LFM2.5-VL-1.6B (LiquidAI)</option>
-                </select>
+        <!-- ─── ID 02 : Model Selector ─── -->
+        <div class="node fixed-height" id="node-model" style="left:60px; top:410px;">
+            <div class="node-header">
+                <span><span class="status-dot" id="dot-model"></span>Model Selector</span>
+                <span class="id">ID: 02</span>
             </div>
-            <div id="modelInfoBox" class="model-info-box"
-                 style="background:rgba(255,200,80,0.07);border:1px solid rgba(255,200,80,0.3);">
-                <span class="model-badge q4b">QWEN 3.5 · 4B</span><br><br>
-                Qwen3.5 4B multimodal model by Alibaba Cloud.
-                Enhanced capacity over 2B — richer reasoning, better instruction following.
+            <div class="node-body">
+                <div>
+                    <label>Active Model</label>
+                    <select id="modelSelect">
+                        <option value="qwen_4b">Qwen3.5-4B</option>
+                        <option value="qwen_2b">Qwen3.5-2B</option>
+                        <option value="qwen_vl">Qwen3-VL-2B-Instruct</option>
+                        <option value="lfm_450">LFM2.5-VL-450M (LiquidAI)</option>
+                        <option value="lfm_16">LFM2.5-VL-1.6B (LiquidAI)</option>
+                    </select>
+                </div>
+                <div id="modelInfoBox" class="model-info-box"
+                     style="background:rgba(255,200,80,0.07);border:1px solid rgba(255,200,80,0.3);">
+                    <span class="model-badge q4b">QWEN 3.5 · 4B</span><br><br>
+                    Qwen3.5 4B multimodal model by Alibaba Cloud.
+                    Enhanced capacity over 2B — richer reasoning &amp; better instruction following.
+                </div>
+                <div style="flex:1;"></div>
             </div>
-            <div style="flex:1;"></div>
+            <div class="port out" id="port-model-out" style="top:50%;transform:translateY(-50%);"></div>
         </div>
-        <div class="port out" id="port-model-out" style="top:50%;transform:translateY(-50%);"></div>
-    </div>
 
-    <!-- ─── ID 03 : Task Config ─── -->
-    <div class="node fixed-height" id="node-task" style="left:425px; top:52px;">
-        <div class="port in" id="port-task-in" style="top:50%;transform:translateY(-50%);"></div>
-        <div class="node-header">
-            <span><span class="status-dot" id="dot-task"></span>Task Config</span>
-            <span class="id">ID: 03</span>
-        </div>
-        <div class="node-body">
-            <div>
-                <label>Task Category</label>
-                <select id="categorySelect">
-                    <option value="Query">Query</option>
-                    <option value="Caption">Caption</option>
-                    <option value="Point">Point</option>
-                    <option value="Detect">Detect</option>
-                </select>
+        <!-- ─── ID 03 : Task Config ─── -->
+        <div class="node fixed-height" id="node-task" style="left:450px; top:60px;">
+            <div class="port in" id="port-task-in" style="top:50%;transform:translateY(-50%);"></div>
+            <div class="node-header">
+                <span><span class="status-dot" id="dot-task"></span>Task Config</span>
+                <span class="id">ID: 03</span>
             </div>
-            <div>
-                <label>Prompt Directive</label>
-                <textarea id="promptInput" rows="4"
-                    placeholder="e.g., Count the total number of boats and describe the environment."></textarea>
+            <div class="node-body">
+                <div>
+                    <label>Task Category</label>
+                    <select id="categorySelect">
+                        <option value="Query">Query</option>
+                        <option value="Caption">Caption</option>
+                        <option value="Point">Point</option>
+                        <option value="Detect">Detect</option>
+                    </select>
+                </div>
+                <div>
+                    <label>Prompt Directive</label>
+                    <textarea id="promptInput" rows="4"
+                        placeholder="e.g., Count the total number of boats and describe the environment."></textarea>
+                </div>
+                <button class="run-btn" id="runBtn">
+                    <span>Execute</span>
+                    <span class="loader" id="btnLoader"></span>
+                </button>
             </div>
-            <button class="run-btn" id="runBtn">
-                <span>Execute</span>
-                <span class="loader" id="btnLoader"></span>
-            </button>
+            <div class="port out" id="port-task-out" style="top:50%;transform:translateY(-50%);"></div>
         </div>
-        <div class="port out" id="port-task-out" style="top:50%;transform:translateY(-50%);"></div>
-    </div>
 
-    <!-- ─── ID 04 : Output Stream ─── -->
-    <div class="node fixed-height" id="node-out" style="left:810px; top:52px;">
-        <div class="port in" id="port-out-in" style="top:50%;transform:translateY(-50%);"></div>
-        <div class="node-header">
-            <span><span class="status-dot" id="dot-out"></span>Output Stream</span>
-            <span class="id">ID: 04</span>
-        </div>
-        <div class="node-body">
-            <label>Streamed Result</label>
-            <div class="output-box" id="outputBox">Results will stream here...</div>
+        <!-- ─── ID 04 : Output Stream ─── -->
+        <div class="node fixed-height" id="node-out" style="left:840px; top:60px;">
+            <div class="port in" id="port-out-in" style="top:50%;transform:translateY(-50%);"></div>
+            <div class="node-header">
+                <span><span class="status-dot" id="dot-out"></span>Output Stream</span>
+                <span class="id">ID: 04</span>
+            </div>
+            <div class="node-body">
+                <label>Streamed Result</label>
+                <div class="output-box" id="outputBox">Results will stream here...</div>
+            </div>
         </div>
-    </div>
 
-    <!-- ─── ID 05 : Grounding Visualiser ─── -->
-    <div class="node fixed-height" id="node-gnd" style="left:810px; top:402px;">
-        <div class="port in" id="port-gnd-in" style="top:50%;transform:translateY(-50%);"></div>
-        <div class="node-header">
-            <span><span class="status-dot" id="dot-gnd"></span>View Grounding</span>
-            <span class="id">ID: 05</span>
-        </div>
-        <div class="node-body">
-            <label>Point / Detect Overlay</label>
-            <div class="ground-canvas-wrap">
-                <canvas id="groundCanvas"></canvas>
-                <div class="ground-placeholder" id="groundPlaceholder">
-                    Active for Point / Detect tasks.<br>Run inference to visualise.
+        <!-- ─── ID 05 : Grounding Visualiser ─── -->
+        <div class="node fixed-height" id="node-gnd" style="left:840px; top:410px;">
+            <div class="port in" id="port-gnd-in" style="top:50%;transform:translateY(-50%);"></div>
+            <div class="node-header">
+                <span><span class="status-dot" id="dot-gnd"></span>View Grounding</span>
+                <span class="id">ID: 05</span>
+            </div>
+            <div class="node-body">
+                <label>Point / Detect Overlay</label>
+                <div class="ground-canvas-wrap">
+                    <canvas id="groundCanvas"></canvas>
+                    <div class="ground-placeholder" id="groundPlaceholder">
+                        Active for Point / Detect tasks.<br>Run inference to visualise.
+                    </div>
                 </div>
             </div>
         </div>
+
+    </div><!-- /#world -->
+</div><!-- /#viewport -->
+
+<!-- ══ ZOOM BAR ══ -->
+<div class="zoom-bar" id="zoomBar">
+    <!-- Zoom out -->
+    <button class="zoom-btn" id="zoomOut" title="Zoom Out">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="2" y1="7" x2="12" y2="7"/>
+        </svg>
+    </button>
+
+    <div class="zoom-divider"></div>
+
+    <!-- Slider track -->
+    <div class="zoom-track" id="zoomTrack">
+        <div class="zoom-track-bg">
+            <div class="zoom-track-fill" id="zoomFill"></div>
+        </div>
+        <div class="zoom-thumb" id="zoomThumb"></div>
     </div>
 
-    <div class="canvas-footer"></div>
+    <div class="zoom-divider"></div>
+
+    <!-- Zoom in -->
+    <button class="zoom-btn" id="zoomIn" title="Zoom In">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="7" y1="2" x2="7" y2="12"/>
+            <line x1="2" y1="7" x2="12" y2="7"/>
+        </svg>
+    </button>
+
+    <div class="zoom-divider"></div>
+
+    <!-- Percentage label -->
+    <div class="zoom-label" id="zoomLabel">100%</div>
+
+    <!-- Reset -->
+    <button class="zoom-reset" id="zoomReset" title="Reset Zoom">FIT</button>
 </div>
 
 <script>
+// ══════════════════════════════════════════════════════════
+//  PAN + ZOOM ENGINE
+// ══════════════════════════════════════════════════════════
+const viewport = document.getElementById('viewport');
+const world    = document.getElementById('world');
+
+const ZOOM_MIN  = 0.25;
+const ZOOM_MAX  = 2.0;
+const ZOOM_STEP = 0.1;
+
+let scale  = 1.0;
+let panX   = 0;
+let panY   = 0;
+let isPanning = false;
+let panStartX, panStartY, panOriginX, panOriginY;
+
+function clamp(v, lo, hi) { return Math.min(Math.max(v, lo), hi); }
+
+function applyTransform() {
+    world.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
+    updateZoomUI();
+    updateWires();
+}
+
+// Centre the canvas initially
+function fitToView() {
+    const vw = viewport.clientWidth;
+    const vh = viewport.clientHeight;
+    scale = clamp(Math.min(vw / 1360, vh / 800), ZOOM_MIN, ZOOM_MAX);
+    panX  = (vw - 1360 * scale) / 2;
+    panY  = (vh - 800  * scale) / 2;
+    applyTransform();
+}
+
+// ── Zoom toward a point ──
+function zoomAt(newScale, cx, cy) {
+    newScale = clamp(newScale, ZOOM_MIN, ZOOM_MAX);
+    const ratio = newScale / scale;
+    panX = cx - ratio * (cx - panX);
+    panY = cy - ratio * (cy - panY);
+    scale = newScale;
+    applyTransform();
+}
+
+// ── Mouse wheel ──
+viewport.addEventListener('wheel', e => {
+    e.preventDefault();
+    const rect = viewport.getBoundingClientRect();
+    const cx = e.clientX - rect.left;
+    const cy = e.clientY - rect.top;
+    const delta = e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP;
+    zoomAt(scale + delta, cx, cy);
+}, { passive: false });
+
+// ── Middle-mouse / space-drag pan ──
+let spaceDown = false;
+document.addEventListener('keydown', e => { if (e.code === 'Space') { spaceDown = true; viewport.style.cursor = 'grab'; } });
+document.addEventListener('keyup',   e => { if (e.code === 'Space') { spaceDown = false; viewport.style.cursor = 'default'; } });
+
+viewport.addEventListener('mousedown', e => {
+    if (e.button === 1 || spaceDown) {
+        e.preventDefault();
+        isPanning = true;
+        panStartX = e.clientX; panStartY = e.clientY;
+        panOriginX = panX; panOriginY = panY;
+        viewport.style.cursor = 'grabbing';
+    }
+});
+window.addEventListener('mousemove', e => {
+    if (!isPanning) return;
+    panX = panOriginX + (e.clientX - panStartX);
+    panY = panOriginY + (e.clientY - panStartY);
+    applyTransform();
+});
+window.addEventListener('mouseup', e => {
+    if (isPanning) {
+        isPanning = false;
+        viewport.style.cursor = spaceDown ? 'grab' : 'default';
+    }
+});
+
+// ── Touch pan / pinch ──
+let lastTouches = null;
+viewport.addEventListener('touchstart', e => {
+    lastTouches = e.touches;
+}, { passive: true });
+viewport.addEventListener('touchmove', e => {
+    e.preventDefault();
+    if (e.touches.length === 1 && lastTouches?.length === 1) {
+        const dx = e.touches[0].clientX - lastTouches[0].clientX;
+        const dy = e.touches[0].clientY - lastTouches[0].clientY;
+        panX += dx; panY += dy;
+        applyTransform();
+    } else if (e.touches.length === 2 && lastTouches?.length === 2) {
+        const d0 = Math.hypot(lastTouches[0].clientX - lastTouches[1].clientX,
+                              lastTouches[0].clientY - lastTouches[1].clientY);
+        const d1 = Math.hypot(e.touches[0].clientX - e.touches[1].clientX,
+                              e.touches[0].clientY - e.touches[1].clientY);
+        const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+        const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+        const rect = viewport.getBoundingClientRect();
+        zoomAt(scale * (d1 / d0), midX - rect.left, midY - rect.top);
+    }
+    lastTouches = e.touches;
+}, { passive: false });
+
+// ══════════════════════════════════════════════════════════
+//  ZOOM BAR UI
+// ══════════════════════════════════════════════════════════
+const zoomInBtn  = document.getElementById('zoomIn');
+const zoomOutBtn = document.getElementById('zoomOut');
+const zoomReset  = document.getElementById('zoomReset');
+const zoomLabel  = document.getElementById('zoomLabel');
+const zoomFill   = document.getElementById('zoomFill');
+const zoomThumb  = document.getElementById('zoomThumb');
+const zoomTrack  = document.getElementById('zoomTrack');
+
+function updateZoomUI() {
+    const pct   = Math.round(scale * 100);
+    zoomLabel.textContent = `${pct}%`;
+
+    // Map scale [ZOOM_MIN … ZOOM_MAX] → [0 … 100]
+    const t = (scale - ZOOM_MIN) / (ZOOM_MAX - ZOOM_MIN);
+    const trackW = zoomTrack.getBoundingClientRect().width || 100;
+    const thumbPx = t * (trackW - 20) + 10; // 10px padding each side
+
+    zoomFill.style.width  = `${t * 100}%`;
+    zoomThumb.style.left  = `${thumbPx}px`;
+}
+
+// Zoom in / out buttons
+zoomInBtn.addEventListener('click', () => {
+    const cx = viewport.clientWidth  / 2;
+    const cy = viewport.clientHeight / 2;
+    zoomAt(scale + ZOOM_STEP, cx, cy);
+});
+zoomOutBtn.addEventListener('click', () => {
+    const cx = viewport.clientWidth  / 2;
+    const cy = viewport.clientHeight / 2;
+    zoomAt(scale - ZOOM_STEP, cx, cy);
+});
+
+// Reset / fit
+zoomReset.addEventListener('click', fitToView);
+
+// Drag on the slider track
+let sliderDragging = false;
+zoomTrack.addEventListener('mousedown', e => {
+    sliderDragging = true;
+    handleSliderMove(e);
+    e.stopPropagation();
+});
+window.addEventListener('mousemove', e => {
+    if (!sliderDragging) return;
+    handleSliderMove(e);
+});
+window.addEventListener('mouseup', () => { sliderDragging = false; });
+
+function handleSliderMove(e) {
+    const rect = zoomTrack.getBoundingClientRect();
+    const t    = clamp((e.clientX - rect.left - 10) / (rect.width - 20), 0, 1);
+    const newScale = ZOOM_MIN + t * (ZOOM_MAX - ZOOM_MIN);
+    const cx = viewport.clientWidth  / 2;
+    const cy = viewport.clientHeight / 2;
+    zoomAt(newScale, cx, cy);
+}
+
 // ══════════════════════════════════════════════
-//  WIRE DRAWING
+//  WIRE DRAWING  (world-relative)
 // ══════════════════════════════════════════════
-const canvasEl = document.getElementById('canvas');
-
 function portCenter(id) {
     const el = document.getElementById(id);
     if (!el) return { x: 0, y: 0 };
-    const er = el.getBoundingClientRect();
-    const cr = canvasEl.getBoundingClientRect();
+    // Get position relative to #world (un-transformed)
+    let ox = 0, oy = 0, cur = el;
+    while (cur && cur !== world) {
+        ox += cur.offsetLeft; oy += cur.offsetTop;
+        cur = cur.offsetParent;
+    }
     return {
-        x: er.left + er.width  / 2 - cr.left,
-        y: er.top  + er.height / 2 - cr.top
+        x: ox + el.offsetWidth  / 2,
+        y: oy + el.offsetHeight / 2,
     };
 }
 
@@ -750,45 +1051,51 @@ function bezier(p1, p2) {
 }
 
 function updateWires() {
-    const wires = [
+    const pairs = [
         ['wire-img-task',   'port-img-out',  'port-task-in'],
         ['wire-model-task', 'port-model-out', 'port-task-in'],
         ['wire-task-out',   'port-task-out',  'port-out-in'],
         ['wire-task-gnd',   'port-task-out',  'port-gnd-in'],
     ];
-    for (const [id, from, to] of wires) {
+    for (const [id, from, to] of pairs) {
         const el = document.getElementById(id);
         if (el) el.setAttribute('d', bezier(portCenter(from), portCenter(to)));
     }
 }
 
 // ══════════════════════════════════════════════
-//  DRAGGING
+//  NODE DRAGGING
 // ══════════════════════════════════════════════
 document.querySelectorAll('.node').forEach(node => {
     const header = node.querySelector('.node-header');
-    let drag = false, sx, sy, il, it;
+    let dragging = false, sx, sy, il, it;
+
     header.addEventListener('mousedown', e => {
-        drag = true; sx = e.clientX; sy = e.clientY;
+        dragging = true;
+        sx = e.clientX; sy = e.clientY;
         il = parseInt(node.style.left) || 0;
         it = parseInt(node.style.top)  || 0;
-        node.style.zIndex = 100; e.preventDefault();
+        node.style.zIndex = 100;
+        e.preventDefault();
+        e.stopPropagation(); // don't trigger pan
     });
-    document.addEventListener('mousemove', e => {
-        if (!drag) return;
-        node.style.left = `${il + e.clientX - sx}px`;
-        node.style.top  = `${it + e.clientY - sy}px`;
+    window.addEventListener('mousemove', e => {
+        if (!dragging) return;
+        // Account for current scale when dragging
+        node.style.left = `${il + (e.clientX - sx) / scale}px`;
+        node.style.top  = `${it + (e.clientY - sy) / scale}px`;
         updateWires();
     });
-    document.addEventListener('mouseup', () => {
-        if (drag) { drag = false; node.style.zIndex = 10; }
+    window.addEventListener('mouseup', () => {
+        if (dragging) { dragging = false; node.style.zIndex = 10; }
     });
 });
 
-window.addEventListener('resize', updateWires);
-window.addEventListener('scroll', updateWires);
-document.addEventListener('scroll', updateWires, true);
-requestAnimationFrame(updateWires);
+// ══════════════════════════════════════════════
+//  INIT
+// ══════════════════════════════════════════════
+window.addEventListener('resize', () => { applyTransform(); });
+requestAnimationFrame(() => { fitToView(); });
 
 // ══════════════════════════════════════════════
 //  FILE UPLOAD
@@ -831,46 +1138,40 @@ const MODEL_INFO = {
         html:   `<span class="model-badge q4b">QWEN 3.5 · 4B</span><br><br>
                  Qwen3.5 4B multimodal model by Alibaba Cloud.
                  Enhanced capacity over 2B — richer reasoning &amp; better instruction following.`,
-        bg:     'rgba(255,200,80,0.07)',
-        border: 'rgba(255,200,80,0.30)',
+        bg:     'rgba(255,200,80,0.07)', border: 'rgba(255,200,80,0.30)',
     },
     qwen_2b: {
         html:   `<span class="model-badge q2b">QWEN 3.5 · 2B</span><br><br>
                  Qwen3.5 2B multimodal model by Alibaba Cloud.
                  Lightweight &amp; fast — ideal for quick Query, Caption, Point &amp; Detect tasks.`,
-        bg:     'rgba(124,106,247,0.07)',
-        border: 'rgba(124,106,247,0.25)',
+        bg:     'rgba(124,106,247,0.07)', border: 'rgba(124,106,247,0.25)',
     },
     qwen_vl: {
         html:   `<span class="model-badge qvl">QWEN3-VL · 2B</span><br><br>
                  Qwen3-VL-2B-Instruct — dedicated vision-language model by Alibaba Cloud.
                  Strong spatial grounding, OCR &amp; instruction-following.`,
-        bg:     'rgba(255,150,50,0.07)',
-        border: 'rgba(255,150,50,0.25)',
+        bg:     'rgba(255,150,50,0.07)', border: 'rgba(255,150,50,0.25)',
     },
     lfm_450: {
         html:   `<span class="model-badge lfm450">LFM · 450M</span><br><br>
                  LFM2.5-VL 450M by LiquidAI. Ultra-lightweight edge model
                  with solid grounding capabilities.`,
-        bg:     'rgba(78,205,196,0.07)',
-        border: 'rgba(78,205,196,0.25)',
+        bg:     'rgba(78,205,196,0.07)', border: 'rgba(78,205,196,0.25)',
     },
     lfm_16: {
         html:   `<span class="model-badge lfm16">LFM · 1.6B</span><br><br>
                  LFM2.5-VL 1.6B by LiquidAI. Larger liquid-state model offering
                  enhanced reasoning &amp; richer visual understanding.`,
-        bg:     'rgba(107,203,119,0.07)',
-        border: 'rgba(107,203,119,0.25)',
+        bg:     'rgba(107,203,119,0.07)', border: 'rgba(107,203,119,0.25)',
     },
 };
 
 modelSelect.onchange = () => {
     const info = MODEL_INFO[modelSelect.value];
     if (!info) return;
-    modelInfoBox.innerHTML              = info.html;
-    modelInfoBox.style.background       = info.bg;
-    modelInfoBox.style.borderColor      = info.border;
-    modelInfoBox.style.border           = `1px solid ${info.border}`;
+    modelInfoBox.innerHTML    = info.html;
+    modelInfoBox.style.background  = info.bg;
+    modelInfoBox.style.border      = `1px solid ${info.border}`;
 };
 
 // ══════════════════════════════════════════════
@@ -951,7 +1252,6 @@ function drawGrounding(imgSrc, jsonText) {
         gCtx.font      = `bold ${fs}px JetBrains Mono, monospace`;
 
         const items = Array.isArray(parsed) ? parsed : [parsed];
-
         items.forEach((item, i) => {
             const col = PALETTE[i % PALETTE.length];
 
@@ -964,17 +1264,11 @@ function drawGrounding(imgSrc, jsonText) {
 
             if (bbox) {
                 let [x1,y1,x2,y2] = bbox;
-                if (x1 <= 1 && y1 <= 1 && x2 <= 1 && y2 <= 1) {
-                    x1*=W; y1*=H; x2*=W; y2*=H;
-                }
-                const bw  = x2-x1, bh = y2-y1;
+                if (x1 <= 1 && y1 <= 1 && x2 <= 1 && y2 <= 1) { x1*=W; y1*=H; x2*=W; y2*=H; }
+                const bw = x2-x1, bh = y2-y1;
                 const lbl = item?.label || `${i+1}`;
-
-                gCtx.fillStyle   = hexToRgba(col, 0.18);
-                gCtx.fillRect(x1, y1, bw, bh);
-                gCtx.strokeStyle = col;
-                gCtx.strokeRect(x1, y1, bw, bh);
-
+                gCtx.fillStyle   = hexToRgba(col, 0.18); gCtx.fillRect(x1, y1, bw, bh);
+                gCtx.strokeStyle = col; gCtx.strokeRect(x1, y1, bw, bh);
                 const tw = gCtx.measureText(lbl).width;
                 const ph = fs*1.4, pw = tw+10;
                 const lx = x1, ly = Math.max(0, y1-ph);
@@ -997,16 +1291,13 @@ function drawGrounding(imgSrc, jsonText) {
                 if (x <= 1 && y <= 1) { x*=W; y*=H; }
                 const r   = Math.max(8, W/60);
                 const lbl = item?.label || `${i+1}`;
-
                 gCtx.beginPath();
                 gCtx.arc(x, y, r*1.6, 0, Math.PI*2);
                 gCtx.fillStyle = hexToRgba(col, 0.15); gCtx.fill();
-
                 gCtx.beginPath();
                 gCtx.arc(x, y, r, 0, Math.PI*2);
-                gCtx.fillStyle   = col; gCtx.fill();
+                gCtx.fillStyle = col; gCtx.fill();
                 gCtx.strokeStyle = '#fff'; gCtx.stroke();
-
                 gCtx.fillStyle = '#fff';
                 gCtx.fillText(lbl, x+r+4, y+fs*0.4);
             }