update app

app.py

@@ -94,7 +94,6 @@ def generate_inference_stream(image: Image.Image, category: str, prompt: str, mo
         full_prompt = prompt
 
     if model_id == "lfm":
-        # LFM2.5-VL inference
         if lfm_model is None or lfm_processor is None:
             yield f"data: {json.dumps({'chunk': '[Error] LFM model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
@@ -141,7 +140,6 @@ def generate_inference_stream(image: Image.Image, category: str, prompt: str, mo
         thread.join()
 
     else:
-        # Qwen3.5 inference
         if qwen_model is None or qwen_processor is None:
             yield f"data: {json.dumps({'chunk': '[Error] Qwen model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
@@ -241,24 +239,31 @@ async def homepage(request: Request):
             --wire-active: #7c6af7;
         }
 
-        * { box-sizing: border-box; }
-        body {
-            margin: 0; padding: 0; overflow: hidden;
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        html, body {
+            min-height: 100%;
             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;
-            color: var(--text);
-            font-family: 'JetBrains Mono', monospace;
-            user-select: none;
+            overflow-x: auto;
+            overflow-y: auto;
         }
 
         .top-bar {
-            position: fixed; top: 0; left: 0; right: 0;
-            height: 48px; background: rgba(13,13,15,0.9);
+            position: sticky;
+            top: 0; left: 0; right: 0;
+            height: 48px;
+            background: rgba(13,13,15,0.95);
             border-bottom: 1px solid var(--node-border);
             display: flex; align-items: center; padding: 0 20px;
             gap: 12px; z-index: 1000;
@@ -268,21 +273,26 @@ async def homepage(request: Request):
         .top-bar .sep { color: var(--node-border); }
         .top-bar .sub { font-size: 11px; color: var(--muted); }
         .top-bar .badge {
-            margin-left: auto; background: rgba(124,106,247,0.15);
-            border: 1px solid rgba(124,106,247,0.3); padding: 3px 10px;
+            margin-left: auto;
+            background: rgba(124,106,247,0.15);
+            border: 1px solid rgba(124,106,247,0.3);
+            padding: 3px 10px;
             border-radius: 20px; font-size: 10px; color: var(--accent);
         }
 
         #canvas {
-            position: relative; width: 100vw; height: 100vh;
-            padding-top: 48px;
-            overflow: hidden;
+            position: relative;
+            width: 1340px;
+            min-height: calc(100vh - 48px);
+            height: 1000px;
+            margin: 0 auto;
         }
 
         svg.wires {
             position: absolute; top: 0; left: 0;
             width: 100%; height: 100%;
             pointer-events: none; z-index: 2;
+            overflow: visible;
         }
 
         path.wire {
@@ -313,10 +323,7 @@ async def homepage(request: Request):
             box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,106,247,0.3);
         }
 
-        /* Fixed height nodes */
-        .node.fixed-height {
-            height: 420px;
-        }
+        .node.fixed-height { height: 420px; }
 
         .node-header {
             background: var(--node-header);
@@ -324,8 +331,10 @@ async def homepage(request: Request):
             border-bottom: 1px solid var(--node-border);
             border-radius: 10px 10px 0 0;
             font-size: 11px; font-weight: 700;
-            cursor: grab; display: flex; justify-content: space-between; align-items: center;
+            cursor: grab;
+            display: flex; justify-content: space-between; align-items: center;
             flex-shrink: 0;
+            user-select: none;
         }
         .node-header:active { cursor: grabbing; }
         .node-header .id {
@@ -368,12 +377,14 @@ async def homepage(request: Request):
             font-size: 11px; color: var(--muted);
             transition: border-color 0.2s, background 0.2s;
             background: rgba(255,255,255,0.01);
+            display: flex; flex-direction: column; align-items: center; gap: 8px;
         }
         .file-upload:hover { border-color: var(--accent); background: rgba(124,106,247,0.04); }
-        .file-upload .icon { font-size: 22px; margin-bottom: 6px; }
+        .file-upload svg { opacity: 0.5; transition: opacity 0.2s; }
+        .file-upload:hover svg { opacity: 0.9; }
 
         .img-preview {
-            width: 100%; height: 190px;
+            width: 100%; height: 230px;
             object-fit: contain;
             border-radius: 6px;
             display: none;
@@ -431,6 +442,7 @@ async def homepage(request: Request):
         .ground-canvas-wrap canvas {
             width: 100%; height: 100%;
             object-fit: contain;
+            display: block;
         }
         .ground-placeholder {
             position: absolute; inset: 0;
@@ -449,7 +461,6 @@ async def homepage(request: Request):
         }
         @keyframes spin { to { transform: rotate(360deg); } }
 
-        /* Status dot */
         .status-dot {
             width: 7px; height: 7px; border-radius: 50%;
             background: var(--muted); display: inline-block;
@@ -457,7 +468,6 @@ async def homepage(request: Request):
         }
         .status-dot.active { background: var(--accent2); box-shadow: 0 0 6px var(--accent2); }
 
-        /* Model badge */
         .model-badge {
             display: inline-block; padding: 2px 8px;
             border-radius: 4px; font-size: 9px; font-weight: 700;
@@ -465,6 +475,11 @@ async def homepage(request: Request):
         }
         .model-badge.qwen { background: rgba(124,106,247,0.2); color: var(--accent); border: 1px solid rgba(124,106,247,0.3); }
         .model-badge.lfm  { background: rgba(78,205,196,0.15); color: var(--accent2); border: 1px solid rgba(78,205,196,0.3); }
+
+        /* scroll hint at bottom */
+        .canvas-footer {
+            height: 40px;
+        }
     </style>
 </head>
 <body>
@@ -478,17 +493,14 @@ async def homepage(request: Request):
 
 <div id="canvas">
     <svg class="wires">
-        <!-- Left col → Task node -->
         <path id="wire-img-task"   class="wire" />
         <path id="wire-model-task" class="wire" />
-        <!-- Task → Output -->
         <path id="wire-task-out"   class="wire" />
-        <!-- Task → Ground -->
         <path id="wire-task-gnd"   class="wire" />
     </svg>
 
-    <!-- ─── ID 01 : Image Input (left col, top) ─── -->
-    <div class="node fixed-height" id="node-img" style="left:60px; top:68px;">
+    <!-- ─── ID 01 : Image Input ─── -->
+    <div class="node fixed-height" id="node-img" style="left:40px; top:60px;">
         <div class="node-header">
             <span><span class="status-dot" id="dot-img"></span>Input Image</span>
             <span class="id">ID: 01</span>
@@ -497,19 +509,22 @@ async def homepage(request: Request):
             <div>
                 <label>Upload Image</label>
                 <div class="file-upload" id="dropZone">
-                    <div class="icon">🖼️</div>
-                    Click or drop image here
+                    <svg width="36" height="36" 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>
         </div>
-        <!-- OUT port: vertically centered on right edge -->
         <div class="port out" id="port-img-out" style="top:50%; transform:translateY(-50%);"></div>
     </div>
 
-    <!-- ─── ID 02 : Model Selector (left col, bottom) ─── -->
-    <div class="node fixed-height" id="node-model" style="left:60px; top:508px;">
+    <!-- ─── ID 02 : Model Selector ─── -->
+    <div class="node fixed-height" id="node-model" style="left:40px; top:500px;">
         <div class="node-header">
             <span><span class="status-dot" id="dot-model"></span>Model Selector</span>
             <span class="id">ID: 02</span>
@@ -525,17 +540,15 @@ async def homepage(request: Request):
             <div id="modelInfoBox" style="background:rgba(124,106,247,0.07); border:1px solid rgba(124,106,247,0.2); border-radius:6px; padding:10px; font-size:10px; color:var(--muted); line-height:1.6;">
                 <span class="model-badge qwen">QWEN</span>
                 <br><br>
-                Qwen3.5 2B parameter multimodal model by Alibaba Cloud. Supports Query, Caption, Point & Detect tasks with streaming output.
+                Qwen3.5 2B parameter multimodal model by Alibaba Cloud. Supports Query, Caption, Point &amp; Detect tasks with streaming output.
             </div>
             <div style="flex:1;"></div>
         </div>
-        <!-- OUT port: vertically centered on right edge -->
         <div class="port out" id="port-model-out" style="top:50%; transform:translateY(-50%);"></div>
     </div>
 
-    <!-- ─── ID 03 : Task Node (right col, row 1) ─── -->
-    <div class="node fixed-height" id="node-task" style="left:460px; top:68px;">
-        <!-- IN port aligned to accept wires from ID01 and ID02 -->
+    <!-- ─── ID 03 : Task Node ─── -->
+    <div class="node fixed-height" id="node-task" style="left:430px; 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>
@@ -560,12 +573,11 @@ async def homepage(request: Request):
                 <span class="loader" id="btnLoader"></span>
             </button>
         </div>
-        <!-- OUT port -->
         <div class="port out" id="port-task-out" style="top:50%; transform:translateY(-50%);"></div>
     </div>
 
-    <!-- ─── ID 04 : Output Node (right col, row 1, further right) ─── -->
-    <div class="node fixed-height" id="node-out" style="left:860px; top:68px;">
+    <!-- ─── ID 04 : Output Node ─── -->
+    <div class="node fixed-height" id="node-out" style="left:820px; 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>
@@ -577,8 +589,8 @@ async def homepage(request: Request):
         </div>
     </div>
 
-    <!-- ─── ID 05 : Grounding Visualiser (right col, row 2) ─── -->
-    <div class="node fixed-height" id="node-gnd" style="left:860px; top:508px;">
+    <!-- ─── ID 05 : Grounding Visualiser ─── -->
+    <div class="node fixed-height" id="node-gnd" style="left:820px; top:500px;">
         <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>
@@ -594,17 +606,25 @@ async def homepage(request: Request):
             </div>
         </div>
     </div>
+
+    <div class="canvas-footer"></div>
 </div>
 
 <script>
 // ══════════════════════════════════════════════
-//  WIRE DRAWING
+//  WIRE DRAWING  (relative to #canvas)
 // ══════════════════════════════════════════════
+const canvasEl = document.getElementById('canvas');
+
 function portCenter(id) {
     const el = document.getElementById(id);
-    if (!el) return {x:0,y:0};
-    const r = el.getBoundingClientRect();
-    return { x: r.left + r.width/2, y: r.top + r.height/2 };
+    if (!el) return { x: 0, y: 0 };
+    const er = el.getBoundingClientRect();
+    const cr = canvasEl.getBoundingClientRect();
+    return {
+        x: er.left + er.width  / 2 - cr.left,
+        y: er.top  + er.height / 2 - cr.top
+    };
 }
 
 function bezier(p1, p2) {
@@ -634,8 +654,8 @@ document.querySelectorAll('.node').forEach(node => {
 
     header.addEventListener('mousedown', e => {
         drag = true; sx = e.clientX; sy = e.clientY;
-        il = parseInt(node.style.left)||0;
-        it = parseInt(node.style.top)||0;
+        il = parseInt(node.style.left) || 0;
+        it = parseInt(node.style.top)  || 0;
         node.style.zIndex = 100;
         e.preventDefault();
     });
@@ -651,7 +671,8 @@ document.querySelectorAll('.node').forEach(node => {
 });
 
 window.addEventListener('resize', updateWires);
-// Delay first draw so layout is complete
+window.addEventListener('scroll', updateWires);
+document.addEventListener('scroll', updateWires, true);
 requestAnimationFrame(() => { updateWires(); });
 
 // ══════════════════════════════════════════════
@@ -670,15 +691,14 @@ function handleFile(file) {
     imgPreview.style.display = 'block';
     dropZone.style.display   = 'none';
     dotImg.classList.add('active');
-    // Wait for layout then redraw wires
     requestAnimationFrame(updateWires);
 }
 
-dropZone.onclick  = () => fileInput.click();
-fileInput.onchange = e => handleFile(e.target.files[0]);
-dropZone.ondragover  = e => { e.preventDefault(); dropZone.style.borderColor = 'var(--accent)'; };
-dropZone.ondragleave = ()=> { dropZone.style.borderColor = ''; };
-dropZone.ondrop      = e => {
+dropZone.onclick     = () => fileInput.click();
+fileInput.onchange   = e  => handleFile(e.target.files[0]);
+dropZone.ondragover  = e  => { e.preventDefault(); dropZone.style.borderColor = 'var(--accent)'; };
+dropZone.ondragleave = ()  => { dropZone.style.borderColor = ''; };
+dropZone.ondrop      = e  => {
     e.preventDefault(); dropZone.style.borderColor = '';
     if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
 };
@@ -692,7 +712,7 @@ const dotModel     = document.getElementById('dot-model');
 dotModel.classList.add('active');
 
 const MODEL_INFO = {
-    qwen: `<span class="model-badge qwen">QWEN</span><br><br>Qwen3.5 2B parameter multimodal model by Alibaba Cloud. Supports Query, Caption, Point & Detect tasks with streaming output.`,
+    qwen: `<span class="model-badge qwen">QWEN</span><br><br>Qwen3.5 2B parameter multimodal model by Alibaba Cloud. Supports Query, Caption, Point &amp; Detect tasks with streaming output.`,
     lfm:  `<span class="model-badge lfm">LFM</span><br><br>LFM2.5-VL 450M parameter vision-language model by LiquidAI. Ultra-lightweight edge model with strong grounding capabilities.`,
 };
 
@@ -715,6 +735,28 @@ categorySelect.onchange = e => {
     promptInput.placeholder = PLACEHOLDERS[e.target.value] || '';
 };
 
+// ══════════════════════════════════════════════
+//  JSON PARSER  (robust)
+// ══════════════════════════════════════════════
+function safeParseJSON(text) {
+    // Strip markdown fences
+    text = text.trim()
+               .replace(/^```(json)?\\s*/i, '')
+               .replace(/\\s*```$/,         '')
+               .trim();
+    try { return JSON.parse(text); } catch(_) {}
+    // Try to extract first JSON array or object
+    const arrMatch = text.match(/\\[\\s*[\\s\\S]*?\\]/);
+    if (arrMatch) {
+        try { return JSON.parse(arrMatch[0]); } catch(_) {}
+    }
+    const objMatch = text.match(/\\{[\\s\\S]*?\\}/);
+    if (objMatch) {
+        try { return JSON.parse(objMatch[0]); } catch(_) {}
+    }
+    return null;
+}
+
 // ══════════════════════════════════════════════
 //  GROUNDING VISUALIZER
 // ══════════════════════════════════════════════
@@ -722,53 +764,145 @@ const groundCanvas      = document.getElementById('groundCanvas');
 const groundPlaceholder = document.getElementById('groundPlaceholder');
 const gCtx              = groundCanvas.getContext('2d');
 
+/*
+  Handles all common model output formats:
+    bbox_2d : [x1,y1,x2,y2]  — pixel or normalised
+    bbox    : [x1,y1,x2,y2]
+    point_2d: [x,y]           — pixel or normalised
+    point   : [x,y]
+    raw arrays of 4 numbers → bbox
+    raw arrays of 2 numbers → point
+*/
 function drawGrounding(imgSrc, jsonText) {
     const parsed = safeParseJSON(jsonText);
-    if (!parsed || (Array.isArray(parsed) && parsed.length === 0)) return;
+    if (!parsed) {
+        console.warn('Grounding: could not parse JSON:', jsonText);
+        return;
+    }
 
     const img = new Image();
     img.onload = () => {
-        groundCanvas.width  = img.naturalWidth;
-        groundCanvas.height = img.naturalHeight;
+        const W = img.naturalWidth;
+        const H = img.naturalHeight;
+        groundCanvas.width  = W;
+        groundCanvas.height = H;
         gCtx.drawImage(img, 0, 0);
         groundPlaceholder.style.display = 'none';
 
-        const W = img.naturalWidth, H = img.naturalHeight;
-        gCtx.strokeStyle = '#4ecdc4';
-        gCtx.lineWidth   = Math.max(2, W/200);
-        gCtx.fillStyle   = 'rgba(78,205,196,0.25)';
-        gCtx.font        = `bold ${Math.max(12, W/40)}px JetBrains Mono, monospace`;
+        const lw   = Math.max(2, W / 200);
+        const fs   = Math.max(12, W / 40);
+        gCtx.lineWidth = lw;
+        gCtx.font      = `bold ${fs}px JetBrains Mono, monospace`;
 
+        // Normalise to array of items
         const items = Array.isArray(parsed) ? parsed : [parsed];
+
         items.forEach((item, i) => {
-            // Point format: [x, y] or {x, y}
-            if (Array.isArray(item) && item.length === 2 && typeof item[0] === 'number') {
-                const [x, y] = item;
-                const px = x * W, py = y * H;
+            // ── Detect / bbox ──
+            let bbox = null;
+            if (item && item.bbox_2d && Array.isArray(item.bbox_2d) && item.bbox_2d.length === 4) {
+                bbox = item.bbox_2d;
+            } else if (item && item.bbox && Array.isArray(item.bbox) && item.bbox.length === 4) {
+                bbox = item.bbox;
+            } else if (Array.isArray(item) && item.length === 4 && item.every(n => typeof n === 'number')) {
+                bbox = item;
+            }
+
+            if (bbox) {
+                let [x1, y1, x2, y2] = bbox;
+                // Auto-detect pixel vs normalised (values > 2 → pixel coords)
+                const isNorm = x1 <= 1 && y1 <= 1 && x2 <= 1 && y2 <= 1;
+                if (isNorm) { x1*=W; y1*=H; x2*=W; y2*=H; }
+                const bw = x2 - x1, bh = y2 - y1;
+                const label = item.label || `${i+1}`;
+                const colors = [
+                    '#4ecdc4','#7c6af7','#ff6b6b','#ffd93d',
+                    '#6bcb77','#ff922b','#cc5de8','#339af0'
+                ];
+                const col = colors[i % colors.length];
+
+                // Fill
+                gCtx.fillStyle = col.replace(/^#/,'') === col
+                    ? col + '33'
+                    : hexToRgba(col, 0.18);
+                gCtx.fillRect(x1, y1, bw, bh);
+
+                // Stroke
+                gCtx.strokeStyle = col;
+                gCtx.strokeRect(x1, y1, bw, bh);
+
+                // Label pill
+                const textW = gCtx.measureText(label).width;
+                const ph = fs * 1.4, pw = textW + 10;
+                const lx = x1, ly = Math.max(0, y1 - ph);
+                gCtx.fillStyle = col;
+                roundRect(gCtx, lx, ly, pw, ph, 4);
+                gCtx.fill();
+                gCtx.fillStyle = '#fff';
+                gCtx.fillText(label, lx + 5, ly + ph * 0.75);
+                return;
+            }
+
+            // ── Point ──
+            let pt = null;
+            if (item && item.point_2d && Array.isArray(item.point_2d) && item.point_2d.length === 2) {
+                pt = item.point_2d;
+            } else if (item && item.point && Array.isArray(item.point) && item.point.length === 2) {
+                pt = item.point;
+            } else if (Array.isArray(item) && item.length === 2 && item.every(n => typeof n === 'number')) {
+                pt = item;
+            }
+
+            if (pt) {
+                let [x, y] = pt;
+                const isNorm = x <= 1 && y <= 1;
+                if (isNorm) { x *= W; y *= H; }
+                const r = Math.max(8, W / 60);
+                const col = '#4ecdc4';
+
+                // Outer ring
+                gCtx.beginPath();
+                gCtx.arc(x, y, r * 1.6, 0, Math.PI * 2);
+                gCtx.fillStyle = 'rgba(78,205,196,0.15)';
+                gCtx.fill();
+
+                // Main dot
                 gCtx.beginPath();
-                gCtx.arc(px, py, Math.max(8, W/60), 0, Math.PI*2);
+                gCtx.arc(x, y, r, 0, Math.PI * 2);
+                gCtx.fillStyle = col;
                 gCtx.fill();
+                gCtx.strokeStyle = '#fff';
                 gCtx.stroke();
-            }
-            // BBox format: [x1,y1,x2,y2] or {x1,y1,x2,y2}
-            if (Array.isArray(item) && item.length === 4) {
-                const [x1,y1,x2,y2] = item;
-                const bx = x1*W, by = y1*H, bw = (x2-x1)*W, bh = (y2-y1)*H;
-                gCtx.fillRect(bx, by, bw, bh);
-                gCtx.strokeRect(bx, by, bw, bh);
-                gCtx.fillStyle = '#4ecdc4';
-                gCtx.fillText(`${i+1}`, bx+4, by+gCtx.font.match(/\d+/)[0]*1.1);
-                gCtx.fillStyle = 'rgba(78,205,196,0.25)';
+
+                // Label
+                const label = item.label || `${i+1}`;
+                gCtx.fillStyle = '#fff';
+                gCtx.fillText(label, x + r + 4, y + fs * 0.4);
             }
         });
     };
     img.src = imgSrc;
 }
 
-function safeParseJSON(text) {
-    text = text.trim().replace(/^```(json)?/, '').replace(/```$/, '').trim();
-    try { return JSON.parse(text); } catch(_){}
-    try { return eval('(' + text + ')'); } catch(_) { return null; }
+function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1,3),16);
+    const g = parseInt(hex.slice(3,5),16);
+    const b = parseInt(hex.slice(5,7),16);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
 }
 
 // ══════════════════════════════════════════════
@@ -841,7 +975,7 @@ runBtn.onclick = async () => {
 
         dotOut.classList.add('active');
 
-        // Visualise grounding if applicable
+        // Visualise grounding
         const cat = categorySelect.value;
         if ((cat === 'Point' || cat === 'Detect') && fullText.trim()) {
             dotGnd.classList.add('active');