update app

app.py

@@ -425,10 +425,7 @@ def generate_inference_stream(
             messages, tokenize=False, add_generation_prompt=True
         )
         inputs = gemma4_e2b_processor(
-            text=[text_input],
-            images=[image],
-            return_tensors="pt",
-            padding=True,
+            text=[text_input], images=[image], return_tensors="pt", padding=True,
         ).to(gemma4_e2b_model.device)
         streamer = TextIteratorStreamer(
             gemma4_e2b_processor.tokenizer,
@@ -590,16 +587,13 @@ async def homepage(request: Request):
             --wire:        #2a2a4a;
             --wire-active: #7c6af7;
         }
-
         * { 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%),
@@ -607,10 +601,8 @@ async def homepage(request: Request):
                 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;
+            overflow-x: auto; overflow-y: auto;
         }
-
         /* ── Top Bar ── */
         .top-bar {
             position: sticky; top: 0; left: 0; right: 0;
@@ -621,9 +613,9 @@ async def homepage(request: Request):
             gap: 12px; z-index: 1000;
             backdrop-filter: blur(12px);
         }
-        .top-bar .logo  { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; }
-        .top-bar .sep   { color: var(--node-border); }
-        .top-bar .sub   { font-size: 11px; color: var(--muted); }
+        .top-bar .logo { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; }
+        .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);
@@ -631,7 +623,6 @@ async def homepage(request: Request):
             padding: 3px 10px; border-radius: 20px;
             font-size: 10px; color: var(--accent);
         }
-
         /* ── Canvas ── */
         #canvas {
             position: relative;
@@ -640,7 +631,6 @@ async def homepage(request: Request):
             height: 900px;
             margin: 0 auto;
         }
-
         svg.wires {
             position: absolute; top: 0; left: 0;
             width: 100%; height: 100%;
@@ -657,17 +647,14 @@ async def homepage(request: Request):
             animation: flow 0.6s linear infinite;
         }
         @keyframes flow { to { stroke-dashoffset: -24; } }
-
         /* ── Nodes ── */
         .node {
-            position: absolute;
-            width: 295px;
+            position: absolute; width: 295px;
             background: var(--node-bg);
             border: 1px solid var(--node-border);
             border-radius: 9px;
             box-shadow: 0 8px 28px rgba(0,0,0,0.5);
-            z-index: 10;
-            display: flex; flex-direction: column;
+            z-index: 10; display: flex; flex-direction: column;
             transition: box-shadow 0.2s;
         }
         .node:hover {
@@ -675,7 +662,6 @@ async def homepage(request: Request):
                         0 0 0 1px rgba(124,106,247,0.3);
         }
         .node.fixed-height { height: 340px; }
-
         .node-header {
             background: var(--node-header);
             padding: 7px 12px;
@@ -684,8 +670,7 @@ async def homepage(request: Request):
             font-size: 11px; font-weight: 700;
             cursor: grab;
             display: flex; justify-content: space-between; align-items: center;
-            flex-shrink: 0;
-            user-select: none;
+            flex-shrink: 0; user-select: none;
         }
         .node-header:active { cursor: grabbing; }
         .node-header .id {
@@ -693,33 +678,27 @@ async def homepage(request: Request):
             background: rgba(255,255,255,0.04);
             padding: 2px 7px; border-radius: 4px;
         }
-
         .node-body {
             padding: 10px;
             display: flex; flex-direction: column; gap: 8px;
             flex: 1; overflow: hidden;
         }
-
         /* ── Ports ── */
         .port {
-            position: absolute;
-            width: 11px; height: 11px;
+            position: absolute; width: 11px; height: 11px;
             background: var(--node-bg);
             border: 2px solid var(--port);
             border-radius: 50%; z-index: 30;
         }
         .port.out { right: -6px; }
         .port.in  { left:  -6px; }
-
         /* ── Labels ── */
         label {
             font-size: 10px; color: var(--muted);
             font-weight: 600; display: block; margin-bottom: 3px;
             letter-spacing: 0.07em; text-transform: uppercase;
         }
-
         input[type="file"] { display: none; }
-
         /* ── Upload Zone ── */
         .file-upload {
             border: 1.5px dashed var(--node-border);
@@ -736,58 +715,38 @@ async def homepage(request: Request):
         }
         .file-upload svg { opacity: 0.5; transition: opacity 0.2s; }
         .file-upload:hover svg { opacity: 0.9; }
-
         /* ── Preview wrapper ── */
         .preview-wrap {
-            display: none;
-            position: relative;
-            border-radius: 7px;
-            overflow: hidden;
-            border: 1px solid var(--node-border);
-            background: #000;
+            display: none; position: relative;
+            border-radius: 7px; overflow: hidden;
+            border: 1px solid var(--node-border); background: #000;
         }
         .preview-wrap.visible { display: block; }
-
-        .img-preview {
-            width: 100%;
-            height: 170px;
-            object-fit: contain;
-            display: block;
-        }
-
+        .img-preview { width: 100%; height: 170px; object-fit: contain; display: block; }
         /* ── Clear button ── */
         .clear-btn {
-            position: absolute;
-            top: 6px; right: 6px;
-            width: 24px; height: 24px;
-            border-radius: 50%;
+            position: absolute; top: 6px; right: 6px;
+            width: 24px; height: 24px; border-radius: 50%;
             background: rgba(13,13,15,0.80);
             border: 1px solid var(--node-border);
-            color: var(--accent3);
-            cursor: pointer;
+            color: var(--accent3); cursor: pointer;
             display: flex; align-items: center; justify-content: center;
             transition: background 0.18s, border-color 0.18s, transform 0.12s;
-            z-index: 20;
-            backdrop-filter: blur(6px);
+            z-index: 20; backdrop-filter: blur(6px);
         }
         .clear-btn:hover {
             background: rgba(255,107,107,0.18);
-            border-color: var(--accent3);
-            transform: scale(1.08);
+            border-color: var(--accent3); transform: scale(1.08);
         }
         .clear-btn:active { transform: scale(0.95); }
         .clear-btn svg { pointer-events: none; }
-
         /* ── Filename chip ── */
         .img-chip {
-            display: none;
-            align-items: center; gap: 6px;
+            display: none; align-items: center; gap: 6px;
             background: rgba(124,106,247,0.08);
             border: 1px solid rgba(124,106,247,0.22);
-            border-radius: 5px;
-            padding: 4px 8px;
-            font-size: 9px; color: var(--muted);
-            overflow: hidden;
+            border-radius: 5px; padding: 4px 8px;
+            font-size: 9px; color: var(--muted); overflow: hidden;
         }
         .img-chip.visible { display: flex; }
         .img-chip .chip-dot {
@@ -800,13 +759,9 @@ async def homepage(request: Request):
             white-space: nowrap; flex: 1;
             color: var(--text); font-size: 9px;
         }
-        .img-chip .chip-size {
-            color: var(--muted); flex-shrink: 0; font-size: 9px;
-        }
-
+        .img-chip .chip-size { color: var(--muted); flex-shrink: 0; font-size: 9px; }
         select, textarea {
-            width: 100%;
-            background: rgba(0,0,0,0.3);
+            width: 100%; background: rgba(0,0,0,0.3);
             border: 1px solid var(--node-border);
             color: var(--text); padding: 7px 9px;
             border-radius: 5px; outline: none;
@@ -815,65 +770,47 @@ async def homepage(request: Request):
         }
         select:focus, textarea:focus { border-color: var(--accent); }
         select option { background: #1c1c26; }
-
         button.run-btn {
             background: linear-gradient(135deg, var(--accent), #9b59b6);
-            color: #fff; border: none;
-            padding: 8px; border-radius: 6px;
+            color: #fff; border: none; padding: 8px; border-radius: 6px;
             font-weight: 700; font-size: 11px;
-            font-family: 'JetBrains Mono', monospace;
-            cursor: pointer;
+            font-family: 'JetBrains Mono', monospace; cursor: pointer;
             transition: opacity 0.2s, transform 0.1s;
             display: flex; justify-content: center; align-items: center; gap: 8px;
             letter-spacing: 0.04em; flex-shrink: 0;
         }
-        button.run-btn:hover   { opacity: 0.9; }
-        button.run-btn:active  { transform: scale(0.98); }
-        button.run-btn:disabled {
-            background: var(--node-border); cursor: not-allowed; color: #555;
-        }
-
-        /* ── Output node body layout ── */
+        button.run-btn:hover  { opacity: 0.9; }
+        button.run-btn:active { transform: scale(0.98); }
+        button.run-btn:disabled { background: var(--node-border); cursor: not-allowed; color: #555; }
+        /* ── Output node ── */
         .output-node-body {
-            padding: 10px;
-            display: flex; flex-direction: column; gap: 6px;
-            flex: 1; overflow: hidden;
+            padding: 10px; display: flex; flex-direction: column;
+            gap: 6px; flex: 1; overflow: hidden;
         }
-
-        /* ── Output header row ── */
         .output-header-row {
             display: flex; align-items: center;
-            justify-content: space-between;
-            flex-shrink: 0;
+            justify-content: space-between; flex-shrink: 0;
         }
-
         /* ── Copy button ── */
         .copy-btn {
             display: flex; align-items: center; gap: 5px;
             background: rgba(124,106,247,0.10);
             border: 1px solid rgba(124,106,247,0.25);
-            border-radius: 5px;
-            padding: 3px 8px;
+            border-radius: 5px; padding: 3px 8px;
             font-size: 9px; font-weight: 700;
             font-family: 'JetBrains Mono', monospace;
-            color: var(--accent);
-            cursor: pointer;
+            color: var(--accent); cursor: pointer;
             letter-spacing: 0.05em;
             transition: background 0.18s, border-color 0.18s, transform 0.1s;
             flex-shrink: 0;
         }
-        .copy-btn:hover {
-            background: rgba(124,106,247,0.22);
-            border-color: var(--accent);
-        }
+        .copy-btn:hover { background: rgba(124,106,247,0.22); border-color: var(--accent); }
         .copy-btn:active { transform: scale(0.95); }
         .copy-btn.copied {
             background: rgba(78,205,196,0.15);
-            border-color: var(--accent2);
-            color: var(--accent2);
+            border-color: var(--accent2); color: var(--accent2);
         }
         .copy-btn svg { pointer-events: none; flex-shrink: 0; }
-
         .output-box {
             background: rgba(0,0,0,0.4);
             border: 1px solid var(--node-border);
@@ -882,10 +819,8 @@ async def homepage(request: Request):
             font-size: 11px; line-height: 1.6;
             color: #c8c8e0; white-space: pre-wrap;
             user-select: text;
-            font-family: 'JetBrains Mono', monospace;
-            min-height: 0;
+            font-family: 'JetBrains Mono', monospace; min-height: 0;
         }
-
         /* ── Grounding ── */
         .ground-canvas-wrap {
             position: relative; flex: 1;
@@ -893,34 +828,24 @@ async def homepage(request: Request):
             border-radius: 5px; overflow: hidden;
             background: #000; min-height: 0;
         }
-        .ground-canvas-wrap canvas {
-            width: 100%; height: 100%;
-            object-fit: contain; display: block;
-        }
+        .ground-canvas-wrap canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
         .ground-placeholder {
             position: absolute; inset: 0;
             display: flex; align-items: center; justify-content: center;
             font-size: 11px; color: var(--muted); text-align: center; padding: 10px;
         }
-
         .loader {
             width: 11px; height: 11px;
             border: 2px solid rgba(255,255,255,0.3);
             border-top-color: #fff; border-radius: 50%;
-            animation: spin 0.7s linear infinite;
-            display: none;
+            animation: spin 0.7s linear infinite; display: none;
         }
         @keyframes spin { to { transform: rotate(360deg); } }
-
         .status-dot {
             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 {
             display: inline-block; padding: 2px 7px;
@@ -937,13 +862,10 @@ async def homepage(request: Request):
         .model-badge.lfm16    { background: rgba(107,203,119,0.15); color: #6bcb77;        border: 1px solid rgba(107,203,119,0.35); }
         .model-badge.qunred   { background: rgba(255,80,160,0.15);  color: #ff50a0;        border: 1px solid rgba(255,80,160,0.35); }
         .model-badge.q25vl3b  { background: rgba(80,180,255,0.15);  color: #50b4ff;        border: 1px solid rgba(80,180,255,0.35); }
-
         .model-info-box {
             border-radius: 6px; padding: 9px;
-            font-size: 10px; color: var(--muted); line-height: 1.55;
-            flex-shrink: 0;
+            font-size: 10px; color: var(--muted); line-height: 1.55; flex-shrink: 0;
         }
-
         .canvas-footer { height: 36px; }
     </style>
 </head>
@@ -953,7 +875,7 @@ async def homepage(request: Request):
     <span class="logo">MULTIMODAL EDGE</span>
     <span class="sep">|</span>
     <span class="sub">Node-Based Inference Canvas</span>
-    <span class="badge">v2.8 — DECA MODEL</span>
+    <span class="badge">10x Vision Models</span>
 </div>
 
 <div id="canvas">
@@ -1118,29 +1040,23 @@ async def homepage(request: Request):
 //  WIRE DRAWING
 // ══════════════════════════════════════════════
 const canvasEl = document.getElementById('canvas');
-
 function portCenter(id) {
     const el = document.getElementById(id);
-    if (!el) return { x: 0, y: 0 };
+    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
-    };
+    return { x: er.left + er.width/2 - cr.left, y: er.top + er.height/2 - cr.top };
 }
-
 function bezier(p1, p2) {
     const dx = Math.abs(p2.x - p1.x) * 0.55;
     return `M ${p1.x} ${p1.y} C ${p1.x+dx} ${p1.y}, ${p2.x-dx} ${p2.y}, ${p2.x} ${p2.y}`;
 }
-
 function updateWires() {
     const wires = [
         ['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'],
+        ['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) {
         const el = document.getElementById(id);
@@ -1156,8 +1072,7 @@ document.querySelectorAll('.node').forEach(node => {
     let drag = false, sx, sy, il, it;
     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();
     });
     document.addEventListener('mousemove', e => {
@@ -1166,11 +1081,8 @@ document.querySelectorAll('.node').forEach(node => {
         node.style.top  = `${it + e.clientY - sy}px`;
         updateWires();
     });
-    document.addEventListener('mouseup', () => {
-        if (drag) { drag = false; node.style.zIndex = 10; }
-    });
+    document.addEventListener('mouseup', () => { if (drag) { drag=false; node.style.zIndex=10; } });
 });
-
 window.addEventListener('resize', updateWires);
 window.addEventListener('scroll', updateWires);
 document.addEventListener('scroll', updateWires, true);
@@ -1180,7 +1092,6 @@ requestAnimationFrame(updateWires);
 //  FILE UPLOAD + CLEAR
 // ══════════════════════════════════════════════
 let currentFile = null;
-
 const dropZone    = document.getElementById('dropZone');
 const fileInput   = document.getElementById('fileInput');
 const previewWrap = document.getElementById('previewWrap');
@@ -1191,12 +1102,11 @@ const chipName    = document.getElementById('chipName');
 const chipSize    = document.getElementById('chipSize');
 const dotImg      = document.getElementById('dot-img');
 
-function formatBytes(bytes) {
-    if (bytes < 1024)     return bytes + ' B';
-    if (bytes < 1048576)  return (bytes / 1024).toFixed(1) + ' KB';
-    return (bytes / 1048576).toFixed(1) + ' MB';
+function formatBytes(b) {
+    if (b < 1024)    return b + ' B';
+    if (b < 1048576) return (b/1024).toFixed(1) + ' KB';
+    return (b/1048576).toFixed(1) + ' MB';
 }
-
 function handleFile(file) {
     if (!file || !file.type.startsWith('image/')) return;
     currentFile = file;
@@ -1209,27 +1119,22 @@ function handleFile(file) {
     dotImg.classList.add('active');
     requestAnimationFrame(updateWires);
 }
-
 function clearImage() {
-    currentFile = null;
-    imgPreview.src = '';
+    currentFile = null; imgPreview.src = '';
     previewWrap.classList.remove('visible');
     dropZone.style.display = '';
     imgChip.classList.remove('visible');
-    chipName.textContent = '—';
-    chipSize.textContent = '';
-    fileInput.value = '';
-    dotImg.classList.remove('active');
+    chipName.textContent = '—'; chipSize.textContent = '';
+    fileInput.value = ''; dotImg.classList.remove('active');
     requestAnimationFrame(updateWires);
 }
-
 dropZone.onclick     = () => fileInput.click();
 fileInput.onchange   = e  => handleFile(e.target.files[0]);
 clearBtn.onclick     = e  => { e.stopPropagation(); clearImage(); };
-dropZone.ondragover  = e  => { e.preventDefault(); dropZone.style.borderColor = 'var(--accent)'; };
-dropZone.ondragleave = ()  => { dropZone.style.borderColor = ''; };
+dropZone.ondragover  = e  => { e.preventDefault(); dropZone.style.borderColor='var(--accent)'; };
+dropZone.ondragleave = ()  => { dropZone.style.borderColor=''; };
 dropZone.ondrop      = e  => {
-    e.preventDefault(); dropZone.style.borderColor = '';
+    e.preventDefault(); dropZone.style.borderColor='';
     if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
 };
 
@@ -1246,80 +1151,69 @@ const MODEL_INFO = {
         html:   `<span class="model-badge q4bunred">QWEN 3.5 · 4B UNREDACTED MAX</span><br><br>
                  Qwen3.5-4B-Unredacted-MAX by prithivMLmods. Uncensored fine-tune of Qwen3.5-4B
                  with extended instruction-following &amp; unrestricted reasoning.`,
-        bg:     'rgba(255,80,80,0.07)',
-        border: 'rgba(255,80,80,0.30)',
+        bg: 'rgba(255,80,80,0.07)', border: 'rgba(255,80,80,0.30)',
     },
     qwen_4b: {
         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)',
+                 Enhanced capacity — richer reasoning &amp; better instruction following.`,
+        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_2b: {
         html:   `<span class="model-badge qvl2b">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)',
     },
     qwen_vl_4b: {
         html:   `<span class="model-badge qvl4b">QWEN3-VL · 4B</span><br><br>
                  Qwen3-VL-4B-Instruct — enhanced vision-language model by Alibaba Cloud.
                  Superior spatial grounding, richer OCR &amp; stronger multi-step reasoning.`,
-        bg:     'rgba(255,100,80,0.07)',
-        border: 'rgba(255,100,80,0.25)',
+        bg: 'rgba(255,100,80,0.07)', border: 'rgba(255,100,80,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)',
     },
     gemma4_e2b: {
         html:   `<span class="model-badge g4e2b">GEMMA 4 · E2B</span><br><br>
                  Gemma4-E2B-it by Google DeepMind. Efficient 2B multimodal model
                  with strong vision-language understanding &amp; instruction-following.`,
-        bg:     'rgba(66,197,107,0.07)',
-        border: 'rgba(66,197,107,0.25)',
+        bg: 'rgba(66,197,107,0.07)', border: 'rgba(66,197,107,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)',
     },
     qwen_unredacted: {
         html:   `<span class="model-badge qunred">QWEN 3.5 · 2B UNREDACTED MAX</span><br><br>
                  Qwen3.5-2B-Unredacted-MAX by prithivMLmods. Fine-tuned variant of Qwen3.5-2B
                  with uncensored &amp; extended instruction-following capabilities.`,
-        bg:     'rgba(255,80,160,0.07)',
-        border: 'rgba(255,80,160,0.25)',
+        bg: 'rgba(255,80,160,0.07)', border: 'rgba(255,80,160,0.25)',
     },
     qwen25_vl_3b: {
         html:   `<span class="model-badge q25vl3b">QWEN 2.5-VL · 3B</span><br><br>
                  Qwen2.5-VL-3B-Instruct by Alibaba Cloud. Powerful 3B vision-language model
                  with strong grounding, OCR &amp; multi-task visual reasoning.`,
-        bg:     'rgba(80,180,255,0.07)',
-        border: 'rgba(80,180,255,0.25)',
+        bg: 'rgba(80,180,255,0.07)', border: 'rgba(80,180,255,0.25)',
     },
 };
-
 modelSelect.onchange = () => {
     const info = MODEL_INFO[modelSelect.value];
     if (!info) return;
     modelInfoBox.innerHTML = info.html;
     modelInfoBox.style.background = info.bg;
-    modelInfoBox.style.border     = `1px solid ${info.border}`;
+    modelInfoBox.style.border = `1px solid ${info.border}`;
 };
 
 // ══════════════════════════════════════════════
@@ -1327,71 +1221,105 @@ modelSelect.onchange = () => {
 // ══════════════════════════════════════════════
 const categorySelect = document.getElementById('categorySelect');
 const promptInput    = document.getElementById('promptInput');
-const PLACEHOLDERS   = {
+const PLACEHOLDERS = {
     Query:   'e.g., Count the total number of boats and describe the environment.',
     Caption: 'e.g., short | normal | detailed',
     Point:   'e.g., The gun held by the person.',
     Detect:  'e.g., The headlight of the car.',
 };
-categorySelect.onchange = e => {
-    promptInput.placeholder = PLACEHOLDERS[e.target.value] || '';
-};
+categorySelect.onchange = e => { promptInput.placeholder = PLACEHOLDERS[e.target.value] || ''; };
 
 // ══════════════════════════════════════════════
 //  ROBUST JSON EXTRACTOR
-//  Strips <think>…</think> blocks then pulls
-//  the first JSON array or object from the text.
+//  Strategy:
+//  1. Strip ALL <think>…</think> blocks (greedy,
+//     handles the tag appearing after the JSON too)
+//  2. Strip markdown fences
+//  3. Find the LAST occurrence of a JSON array [ ]
+//     or object { } — models typically emit the
+//     clean JSON block after their reasoning prose
+//  4. Use a bracket-depth walker to extract it
+//     precisely without cutting off nested objects
 // ══════════════════════════════════════════════
 function extractGroundingJSON(raw) {
-    // 1. Remove <think>…</think> blocks
-    let text = raw.replace(/<think>[\s\S]*?<\/think>/gi, '');
+    // Step 1 — kill ALL <think> … </think> sections
+    // Use greedy .* with DOTALL flag emulation via [\s\S]
+    // Run multiple passes in case of nested/malformed tags
+    let text = raw;
+    let prev = null;
+    while (prev !== text) {
+        prev = text;
+        text = text.replace(/<think>[\s\S]*?<\/think>/gi, '');
+    }
 
-    // 2. Strip markdown code fences
-    text = text.replace(/```(?:json)?\\s*/gi, '').replace(/```/g, '');
+    // Step 2 — strip markdown code fences  ```json … ```
+    text = text.replace(/```(?:json)?[\\s\\S]*?```/gi, function(m) {
+        // Keep the inner content, just remove the fences
+        return m.replace(/```(?:json)?/gi, '').replace(/```/g, '');
+    });
 
+    // Step 3 — strip any remaining lone fence markers
+    text = text.replace(/```/g, '');
     text = text.trim();
 
-    // 3. Try JSON array first  [ … ]
-    const arrIdx = text.indexOf('[');
-    if (arrIdx !== -1) {
+    // Helper: walk from startIdx and extract a balanced
+    // bracket expression (open/close must match).
+    function extractBalanced(str, startIdx, openCh, closeCh) {
         let depth = 0, inStr = false, esc = false;
-        for (let i = arrIdx; i < text.length; i++) {
-            const c = text[i];
-            if (esc)          { esc = false; continue; }
+        for (let i = startIdx; i < str.length; i++) {
+            const c = str[i];
+            if (esc)         { esc = false; continue; }
             if (c === '\\\\') { esc = true;  continue; }
-            if (c === '"')    { inStr = !inStr; continue; }
-            if (inStr)        continue;
-            if (c === '[')    depth++;
-            if (c === ']') {
+            if (c === '"')   { inStr = !inStr; continue; }
+            if (inStr)       continue;
+            if (c === openCh)  depth++;
+            if (c === closeCh) {
                 depth--;
                 if (depth === 0) {
-                    try { return JSON.parse(text.slice(arrIdx, i + 1)); } catch(_) { break; }
+                    try { return JSON.parse(str.slice(startIdx, i + 1)); }
+                    catch(_) { return null; }
                 }
             }
         }
+        return null;
     }
 
-    // 4. Try JSON object  { … }
-    const objIdx = text.indexOf('{');
-    if (objIdx !== -1) {
-        let depth = 0, inStr = false, esc = false;
-        for (let i = objIdx; i < text.length; i++) {
-            const c = text[i];
-            if (esc)          { esc = false; continue; }
-            if (c === '\\\\') { esc = true;  continue; }
-            if (c === '"')    { inStr = !inStr; continue; }
-            if (inStr)        continue;
-            if (c === '{')    depth++;
-            if (c === '}') {
-                depth--;
-                if (depth === 0) {
-                    try { return JSON.parse(text.slice(objIdx, i + 1)); } catch(_) { break; }
-                }
-            }
-        }
+    // Step 4 — find the LAST JSON array in the text
+    // (models often emit prose first, JSON last)
+    let lastArrIdx = -1;
+    for (let i = text.length - 1; i >= 0; i--) {
+        if (text[i] === '[') { lastArrIdx = i; break; }
+    }
+    if (lastArrIdx !== -1) {
+        const result = extractBalanced(text, lastArrIdx, '[', ']');
+        if (result !== null) return result;
+    }
+
+    // Step 5 — find the LAST JSON object in the text
+    let lastObjIdx = -1;
+    for (let i = text.length - 1; i >= 0; i--) {
+        if (text[i] === '{') { lastObjIdx = i; break; }
+    }
+    if (lastObjIdx !== -1) {
+        const result = extractBalanced(text, lastObjIdx, '{', '}');
+        if (result !== null) return result;
     }
 
-    // 5. Last resort
+    // Step 6 — try FIRST array (fallback)
+    const firstArr = text.indexOf('[');
+    if (firstArr !== -1) {
+        const result = extractBalanced(text, firstArr, '[', ']');
+        if (result !== null) return result;
+    }
+
+    // Step 7 — try FIRST object (fallback)
+    const firstObj = text.indexOf('{');
+    if (firstObj !== -1) {
+        const result = extractBalanced(text, firstObj, '{', '}');
+        if (result !== null) return result;
+    }
+
+    // Step 8 — last resort full parse
     try { return JSON.parse(text); } catch(_) {}
     return null;
 }
@@ -1403,10 +1331,7 @@ const groundCanvas      = document.getElementById('groundCanvas');
 const groundPlaceholder = document.getElementById('groundPlaceholder');
 const gCtx              = groundCanvas.getContext('2d');
 
-const PALETTE = [
-    '#4ecdc4','#7c6af7','#ff6b6b','#ffd93d',
-    '#6bcb77','#ff922b','#cc5de8','#339af0'
-];
+const PALETTE = ['#4ecdc4','#7c6af7','#ff6b6b','#ffd93d','#6bcb77','#ff922b','#cc5de8','#339af0'];
 
 function hexToRgba(hex, alpha) {
     const r = parseInt(hex.slice(1,3),16);
@@ -1414,21 +1339,20 @@ function hexToRgba(hex, alpha) {
     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.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();
 }
 
 function drawGrounding(imgSrc, rawText) {
     const parsed = extractGroundingJSON(rawText);
     if (!parsed) {
-        console.warn('Grounding: could not extract JSON from output:', rawText);
+        console.warn('Grounding: could not extract JSON:', rawText.slice(0, 200));
         return;
     }
 
@@ -1440,17 +1364,17 @@ function drawGrounding(imgSrc, rawText) {
         gCtx.drawImage(img, 0, 0);
         groundPlaceholder.style.display = 'none';
 
-        const lw = Math.max(2, W / 200);
-        const fs = Math.max(12, W / 40);
+        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`;
+        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];
 
-            // ── Bounding box ─────────────────────────────
+            // ── Detect: bounding box ─────────────────────
             let bbox = null;
             if (Array.isArray(item?.bbox_2d) && item.bbox_2d.length === 4)
                 bbox = item.bbox_2d;
@@ -1461,30 +1385,35 @@ function drawGrounding(imgSrc, rawText) {
                 bbox = item;
 
             if (bbox) {
-                let [x1, y1, x2, y2] = bbox.map(Number);
+                let [x1,y1,x2,y2] = bbox.map(Number);
+                // Handle normalised 0-1 coords
                 if (x1 <= 1 && y1 <= 1 && x2 <= 1 && y2 <= 1) {
-                    x1 *= W; y1 *= H; x2 *= W; y2 *= H;
+                    x1*=W; y1*=H; x2*=W; y2*=H;
                 }
-                const bw  = x2 - x1, bh = y2 - y1;
-                const lbl = item?.label ?? `obj ${i + 1}`;
+                // Swap if inverted
+                if (x2 < x1) [x1,x2] = [x2,x1];
+                if (y2 < y1) [y1,y2] = [y2,y1];
+
+                const bw  = x2-x1, bh = y2-y1;
+                const lbl = (item?.label ?? `obj ${i+1}`).toString();
 
-                gCtx.fillStyle   = hexToRgba(col, 0.18);
-                gCtx.fillRect(x1, y1, bw, bh);
+                gCtx.fillStyle   = hexToRgba(col, 0.20);
+                gCtx.fillRect(x1,y1,bw,bh);
                 gCtx.strokeStyle = col;
-                gCtx.strokeRect(x1, y1, bw, bh);
+                gCtx.lineWidth   = lw;
+                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);
+                const ph = fs*1.45, pw = tw+12;
+                const lx = x1, ly = Math.max(0, y1-ph);
                 gCtx.fillStyle = col;
-                roundRect(gCtx, lx, ly, pw, ph, 4);
-                gCtx.fill();
+                roundRect(gCtx,lx,ly,pw,ph,4); gCtx.fill();
                 gCtx.fillStyle = '#fff';
-                gCtx.fillText(lbl, lx + 5, ly + ph * 0.76);
+                gCtx.fillText(lbl, lx+6, ly+ph*0.76);
                 return;
             }
 
-            // ── Point ────────────────────────────────────
+            // ── Point: 2-D coordinate ─────────────────────
             let pt = null;
             if (Array.isArray(item?.point_2d) && item.point_2d.length === 2)
                 pt = item.point_2d;
@@ -1495,28 +1424,28 @@ function drawGrounding(imgSrc, rawText) {
                 pt = item;
 
             if (pt) {
-                let [x, y] = pt.map(Number);
-                if (x <= 1 && y <= 1) { x *= W; y *= H; }
-                const r   = Math.max(8, W / 60);
-                const lbl = item?.label ?? `pt ${i + 1}`;
+                let [x,y] = pt.map(Number);
+                if (x <= 1 && y <= 1) { x*=W; y*=H; }
+                const r   = Math.max(8, W/60);
+                const lbl = (item?.label ?? `pt ${i+1}`).toString();
 
                 gCtx.beginPath();
-                gCtx.arc(x, y, r * 1.7, 0, Math.PI * 2);
-                gCtx.fillStyle = hexToRgba(col, 0.15);
-                gCtx.fill();
+                gCtx.arc(x, y, r*1.8, 0, Math.PI*2);
+                gCtx.fillStyle = hexToRgba(col, 0.18); gCtx.fill();
 
                 gCtx.beginPath();
-                gCtx.arc(x, y, r, 0, Math.PI * 2);
-                gCtx.fillStyle   = col;
-                gCtx.fill();
+                gCtx.arc(x, y, r, 0, Math.PI*2);
+                gCtx.fillStyle   = col; gCtx.fill();
                 gCtx.strokeStyle = '#fff';
+                gCtx.lineWidth   = Math.max(1.5, lw);
                 gCtx.stroke();
 
                 gCtx.fillStyle = '#fff';
-                gCtx.fillText(lbl, x + r + 4, y + fs * 0.4);
+                gCtx.fillText(lbl, x+r+5, y+fs*0.4);
             }
         });
     };
+    img.onerror = () => console.error('Grounding: failed to load image for overlay.');
     img.src = imgSrc;
 }
 
@@ -1527,6 +1456,17 @@ const copyBtn   = document.getElementById('copyBtn');
 const outputBox = document.getElementById('outputBox');
 let   copyTimer = null;
 
+function resetCopyBtn() {
+    copyBtn.classList.remove('copied');
+    copyBtn.innerHTML = `
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2.2"
+             stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+        </svg> COPY`;
+}
+
 copyBtn.onclick = () => {
     const txt = outputBox.innerText || '';
     if (!txt || txt === 'Results will stream here...') return;
@@ -1539,24 +1479,12 @@ copyBtn.onclick = () => {
                 <polyline points="20 6 9 17 4 12"/>
             </svg> COPIED`;
         clearTimeout(copyTimer);
-        copyTimer = setTimeout(() => {
-            copyBtn.classList.remove('copied');
-            copyBtn.innerHTML = `
-                <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
-                     stroke="currentColor" stroke-width="2.2"
-                     stroke-linecap="round" stroke-linejoin="round">
-                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-                </svg> COPY`;
-        }, 2000);
+        copyTimer = setTimeout(resetCopyBtn, 2000);
     }).catch(() => {
         const ta = document.createElement('textarea');
-        ta.value = txt;
-        ta.style.position = 'fixed'; ta.style.opacity = '0';
-        document.body.appendChild(ta);
-        ta.select();
-        document.execCommand('copy');
-        document.body.removeChild(ta);
+        ta.value = txt; ta.style.position='fixed'; ta.style.opacity='0';
+        document.body.appendChild(ta); ta.select();
+        document.execCommand('copy'); document.body.removeChild(ta);
     });
 };
 
@@ -1585,16 +1513,7 @@ runBtn.onclick = async () => {
     dotOut.classList.remove('active');
     dotGnd.classList.remove('active');
     allWires.forEach(id => document.getElementById(id)?.classList.add('active'));
-
-    // Reset copy button
-    copyBtn.classList.remove('copied');
-    copyBtn.innerHTML = `
-        <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
-             stroke="currentColor" stroke-width="2.2"
-             stroke-linecap="round" stroke-linejoin="round">
-            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-        </svg> COPY`;
+    resetCopyBtn();
 
     const formData = new FormData();
     formData.append('image',    currentFile);
@@ -1603,9 +1522,10 @@ runBtn.onclick = async () => {
     formData.append('model_id', modelSelect.value);
 
     let fullText = '';
+    let imgObjectURL = URL.createObjectURL(currentFile);
 
     try {
-        const response = await fetch('/api/run', { method: 'POST', body: formData });
+        const response = await fetch('/api/run', { method:'POST', body:formData });
         if (!response.ok) {
             const err = await response.json();
             throw new Error(err.error || 'Execution failed.');
@@ -1618,12 +1538,12 @@ runBtn.onclick = async () => {
         while (true) {
             const { value, done } = await reader.read();
             if (done) break;
-            buffer += decoder.decode(value, { stream: true });
+            buffer += decoder.decode(value, { stream:true });
             const lines = buffer.split('\\n\\n');
             buffer = lines.pop();
             for (const line of lines) {
                 if (!line.startsWith('data: ')) continue;
-                const payload = line.replace('data: ', '');
+                const payload = line.replace('data: ','');
                 if (payload === '[DONE]') break;
                 try {
                     const data = JSON.parse(payload);
@@ -1638,13 +1558,15 @@ runBtn.onclick = async () => {
 
         dotOut.classList.add('active');
 
-        // Attempt grounding overlay for Point / Detect
+        // ── Grounding overlay (Point / Detect) ──────────
         const cat = categorySelect.value;
         if ((cat === 'Point' || cat === 'Detect') && fullText.trim()) {
             const parsed = extractGroundingJSON(fullText);
-            if (parsed) {
+            if (parsed !== null) {
                 dotGnd.classList.add('active');
-                drawGrounding(URL.createObjectURL(currentFile), fullText);
+                drawGrounding(imgObjectURL, fullText);
+            } else {
+                console.warn('No grounding JSON found in output.');
             }
         }