Spaces:

prithivMLmods
/

Multimodal-Edge-Node

Running on Zero

App Files Files Community

prithivMLmods commited on 27 days ago

Commit

2969977

verified ·

1 Parent(s): c04b4d0

Update app.py

Browse files

Files changed (1) hide show

app.py +305 -252

app.py CHANGED Viewed

@@ -761,16 +761,18 @@ async def homepage(request: Request):
         .ground-header-row { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
         .ground-canvas-wrap {
             position: relative; flex: 1; border: 1px solid var(--node-border);
-            border-radius: 5px; overflow: hidden; background: #000; min-height: 0;
         }
         .ground-canvas-wrap canvas {
             width: 100%; height: 100%;
             object-fit: contain; display: block;
-            image-rendering: pixelated;
         }
         .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);
@@ -797,6 +799,17 @@ async def homepage(request: Request):
         .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; }
         .canvas-footer { height: 36px; }
     </style>
 </head>
 <body>
@@ -808,6 +821,12 @@ async def homepage(request: Request):
     <span class="badge">10x Vision Models</span>
 </div>
 <div id="canvas">
     <svg class="wires">
         <path id="wire-img-task"   class="wire" />
@@ -961,7 +980,7 @@ async def homepage(request: Request):
                     SAVE
                 </a>
             </div>
-            <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.
@@ -1158,172 +1177,131 @@ const PLACEHOLDERS = {
 categorySelect.onchange = e => { promptInput.placeholder = PLACEHOLDERS[e.target.value]||''; };
 // ══════════════════════════════════════════════
-//  ROBUST JSON EXTRACTOR  (FIXED)
 // ══════════════════════════════════════════════
 function extractGroundingJSON(raw) {
-    // 1. Strip <think>…</think> blocks
     let text = raw;
-    let prev = null;
-    while (prev !== text) {
-        prev = text;
-        text = text.replace(/<think>[\s\S]*?<\/think>/gi, '');
     }
-    // 2. Strip markdown fences
-    text = text.replace(/```(?:json)?([\s\S]*?)```/gi, '$1');
-    text = text.replace(/```/g, '').trim();
-    // 3. Balanced bracket extractor (searches forward from a given index)
     function extractBalanced(str, startIdx, openCh, closeCh) {
         let depth = 0, inStr = false, esc = false;
         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 === openCh)  depth++;
             if (c === closeCh) {
                 depth--;
                 if (depth === 0) {
-                    try { return JSON.parse(str.slice(startIdx, i + 1)); } catch(_) { return null; }
                 }
             }
         }
         return null;
     }
-    // 4. Collect ALL array and object candidates from the text, prefer arrays
-    const arrayCandidates  = [];
-    const objectCandidates = [];
     for (let i = 0; i < text.length; i++) {
-        if (text[i] === '[') {
-            const r = extractBalanced(text, i, '[', ']');
-            if (r !== null) arrayCandidates.push(r);
-        }
-        if (text[i] === '{') {
-            const r = extractBalanced(text, i, '{', '}');
-            if (r !== null) objectCandidates.push(r);
-        }
     }
-    // 5. Pick the best grounding candidate:
-    //    - Must contain at least one item with recognisable bbox or point keys
-    const BBOX_KEYS  = ['bbox_2d','bbox','box','bounding_box','coordinates','xyxy','xywh'];
-    const POINT_KEYS = ['point_2d','point','center','centroid','coordinates','xy'];
-    function looksLikeGrounding(obj) {
-        if (typeof obj !== 'object' || obj === null) return false;
-        const keys = Object.keys(obj).map(k => k.toLowerCase());
-        return (
-            BBOX_KEYS.some(k  => keys.includes(k)) ||
-            POINT_KEYS.some(k => keys.includes(k)) ||
-            // plain [x1,y1,x2,y2] or [x,y] array of numbers
-            (Array.isArray(obj) && obj.length >= 2 && obj.every(n => typeof n === 'number'))
-        );
-    }
-    // Check arrays of objects first
-    for (const arr of arrayCandidates) {
-        if (Array.isArray(arr)) {
-            // Array of numbers → could be direct coords
-            if (arr.every(n => typeof n === 'number') && (arr.length === 2 || arr.length === 4)) return arr;
-            // Array of grounding objects
-            if (arr.length > 0 && arr.every(o => looksLikeGrounding(o))) return arr;
         }
     }
-    // Single object
-    for (const obj of objectCandidates) {
-        if (looksLikeGrounding(obj)) return obj;
     }
-    // Fallback: return any array or object found
-    if (arrayCandidates.length)  return arrayCandidates[0];
-    if (objectCandidates.length) return objectCandidates[0];
-    // Last resort: direct parse
-    try { return JSON.parse(text); } catch(_) {}
-    return null;
-}
-// ══════════════════════════════════════════════
-//  NORMALISE COORDS  (FIXED)
-// ══════════════════════════════════════════════
-/**
- * Decide whether coords are normalised [0..1] or absolute pixels.
- * Rule: treat as normalised only when ALL values are strictly in (0,1).
- * A value like 150 is clearly pixels; 0.45 is clearly normalised.
- */
-function isNormalised(coords, W, H) {
-    // If any value exceeds 1.0 it must be pixel coords
-    return coords.every(v => v >= 0 && v <= 1.0) && Math.max(...coords) <= 1.0;
-}
-function toPixelBbox(bbox, W, H) {
-    let [x1, y1, x2, y2] = bbox.map(Number);
-    if (isNormalised([x1, y1, x2, y2], W, H)) { x1*=W; y1*=H; x2*=W; y2*=H; }
-    if (x2 < x1) [x1, x2] = [x2, x1];
-    if (y2 < y1) [y1, y2] = [y2, y1];
-    return [x1, y1, x2, y2];
-}
-function toPixelPoint(pt, W, H) {
-    let [x, y] = pt.map(Number);
-    if (isNormalised([x, y], W, H)) { x*=W; y*=H; }
-    return [x, y];
 }
 // ══════════════════════════════════════════════
-//  EXTRACT BBOX / POINT FROM OBJECT  (FIXED)
 // ══════════════════════════════════════════════
-const BBOX_KEY_LIST  = ['bbox_2d','bbox','box','bounding_box','coordinates','xyxy','xywh'];
-const POINT_KEY_LIST = ['point_2d','point','center','centroid','xy'];
-function findBbox(item) {
-    if (!item || typeof item !== 'object') return null;
-    // Direct array of 4 numbers
-    if (Array.isArray(item) && item.length === 4 && item.every(n => typeof n === 'number')) return item;
-    const lc = {};
-    for (const [k, v] of Object.entries(item)) lc[k.toLowerCase()] = v;
-    for (const key of BBOX_KEY_LIST) {
-        if (lc[key] && Array.isArray(lc[key]) && lc[key].length === 4) return lc[key];
-    }
-    // xmin/ymin/xmax/ymax style
-    if ('xmin' in lc && 'ymin' in lc && 'xmax' in lc && 'ymax' in lc) {
-        return [lc.xmin, lc.ymin, lc.xmax, lc.ymax];
-    }
-    // x/y/width/height style
-    if ('x' in lc && 'y' in lc && 'width' in lc && 'height' in lc) {
-        return [lc.x, lc.y, lc.x + lc.width, lc.y + lc.height];
     }
-    return null;
-}
-function findPoint(item) {
-    if (!item || typeof item !== 'object') return null;
-    // Direct array of 2 numbers
-    if (Array.isArray(item) && item.length === 2 && item.every(n => typeof n === 'number')) return item;
-    const lc = {};
-    for (const [k, v] of Object.entries(item)) lc[k.toLowerCase()] = v;
-    for (const key of POINT_KEY_LIST) {
-        if (lc[key] && Array.isArray(lc[key]) && lc[key].length === 2) return lc[key];
     }
-    if ('x' in lc && 'y' in lc) return [lc.x, lc.y];
-    return null;
-}
-function getLabel(item, idx, taskCat) {
-    if (!item || typeof item !== 'object' || Array.isArray(item)) {
-        return taskCat === 'Point' ? `pt ${idx+1}` : `obj ${idx+1}`;
-    }
-    const lc = {};
-    for (const [k, v] of Object.entries(item)) lc[k.toLowerCase()] = v;
-    return (lc.label ?? lc.name ?? lc.class ?? lc.category ?? (taskCat==='Point' ? `pt ${idx+1}` : `obj ${idx+1}`)).toString();
 }
 // ══════════════════════════════════════════════
-//  GROUNDING VISUALIZER  (FIXED)
 // ══════════════════════════════════════════════
 const groundCanvas      = document.getElementById('groundCanvas');
 const groundPlaceholder = document.getElementById('groundPlaceholder');
 const gCtx              = groundCanvas.getContext('2d');
 const downloadBtn       = document.getElementById('downloadBtn');
@@ -1334,12 +1312,15 @@ function hexToRgba(hex, alpha) {
     const r=parseInt(hex.slice(1,3),16), g=parseInt(hex.slice(3,5),16), 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();
 }
 function updateDownloadBtn() {
@@ -1350,118 +1331,149 @@ function updateDownloadBtn() {
     downloadBtn.style.display = 'flex';
 }
-function drawGrounding(imgSrc, rawText, taskCat) {
     const parsed = extractGroundingJSON(rawText);
     if (!parsed) {
-        console.warn('Grounding: no JSON found. Raw text snippet:', rawText.slice(0, 300));
-        groundPlaceholder.textContent = 'No grounding data found in output.';
         groundPlaceholder.style.display = 'flex';
         return;
     }
-    console.log('Grounding parsed:', JSON.stringify(parsed).slice(0, 500));
     const img = new Image();
     img.onload = () => {
-        const W = img.naturalWidth, H = img.naturalHeight;
         groundCanvas.width  = W;
         groundCanvas.height = H;
-        gCtx.drawImage(img, 0, 0);
         groundPlaceholder.style.display = 'none';
-        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 always be an array
         const items = Array.isArray(parsed) ? parsed : [parsed];
-        // Check whether ALL items are plain numbers (flat coords array)
-        const allNumbers = items.every(v => typeof v === 'number');
-        if (allNumbers) {
-            // Could be [x1,y1,x2,y2] or [x,y]
-            const col = PALETTE[0];
-            if (items.length === 4) {
-                const [x1,y1,x2,y2] = toPixelBbox(items, W, H);
-                drawBox(x1,y1,x2-x1,y2-y1,col,'obj 1',lw,fs);
-            } else if (items.length === 2) {
-                const [x,y] = toPixelPoint(items, W, H);
-                drawDot(x,y,col,'pt 1',lw,fs,W);
             }
-        } else {
-            items.forEach((item, i) => {
-                const col = PALETTE[i % PALETTE.length];
-                const lbl = getLabel(item, i, taskCat);
-                // Try bbox first
-                const bboxRaw = findBbox(item);
-                if (bboxRaw) {
-                    const [x1,y1,x2,y2] = toPixelBbox(bboxRaw, W, H);
-                    drawBox(x1, y1, x2-x1, y2-y1, col, lbl, lw, fs);
-                    return;
-                }
-                // Try point
-                const ptRaw = findPoint(item);
-                if (ptRaw) {
-                    const [x,y] = toPixelPoint(ptRaw, W, H);
-                    drawDot(x, y, col, lbl, lw, fs, W);
-                    return;
-                }
-                console.warn('Grounding item unrecognised:', item);
-            });
-        }
         updateDownloadBtn();
     };
-    img.onerror = () => {
-        console.error('Grounding: failed to load image.');
         groundPlaceholder.textContent = 'Failed to load image for overlay.';
         groundPlaceholder.style.display = 'flex';
     };
-    img.src = imgSrc;
-}
-function drawBox(x1, y1, bw, bh, col, lbl, lw, fs) {
-    // Fill
-    gCtx.fillStyle = hexToRgba(col, 0.20);
-    gCtx.fillRect(x1, y1, bw, bh);
-    // Border
-    gCtx.strokeStyle = col;
-    gCtx.lineWidth   = lw;
-    gCtx.strokeRect(x1, y1, bw, bh);
-    // Label pill
-    const tw = gCtx.measureText(lbl).width;
-    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();
-    gCtx.fillStyle = '#fff';
-    gCtx.fillText(lbl, lx + 6, ly + ph * 0.76);
-}
-function drawDot(x, y, col, lbl, lw, fs, W) {
-    const r = Math.max(8, W / 60);
-    // Outer glow ring
-    gCtx.beginPath();
-    gCtx.arc(x, y, r * 1.8, 0, Math.PI * 2);
-    gCtx.fillStyle = hexToRgba(col, 0.18);
-    gCtx.fill();
-    // Dot
-    gCtx.beginPath();
-    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();
-    // Label
-    gCtx.fillStyle = '#fff';
-    gCtx.fillText(lbl, x + r + 5, y + fs * 0.4);
 }
 // ══════════════════════════════════════════════
@@ -1513,64 +1525,105 @@ runBtn.onclick = async () => {
     const promptStr = promptInput.value.trim();
     if (!promptStr)  { alert('Please enter a prompt directive.'); return; }
-    runBtn.disabled=true; btnLoader.style.display='inline-block';
-    outputBox.innerText=''; outputBox.style.color='';
-    groundPlaceholder.style.display='flex';
-    groundPlaceholder.textContent='Active for Point / Detect tasks.\\nRun inference to visualise.';
-    gCtx.clearRect(0,0,groundCanvas.width,groundCanvas.height);
-    downloadBtn.style.display='none';
     dotTask.classList.add('active');
-    dotOut.classList.remove('active'); dotGnd.classList.remove('active');
-    allWires.forEach(id=>document.getElementById(id)?.classList.add('active'));
     resetCopyBtn();
-    const formData=new FormData();
     formData.append('image',    currentFile);
     formData.append('category', categorySelect.value);
     formData.append('prompt',   promptStr);
     formData.append('model_id', modelSelect.value);
-    let fullText='';
-    // Keep a stable object URL for the image
     const imgObjectURL = URL.createObjectURL(currentFile);
-    const taskCat      = categorySelect.value;
     try {
-        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.'); }
-        const reader=response.body.getReader(), decoder=new TextDecoder('utf-8');
-        let buffer='';
         while (true) {
-            const {value,done}=await reader.read(); if(done)break;
-            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: ','');
-                if (payload==='[DONE]') break;
                 try {
-                    const data=JSON.parse(payload);
-                    if (data.chunk) { fullText+=data.chunk; outputBox.innerText=fullText; outputBox.scrollTop=outputBox.scrollHeight; }
-                } catch(_) {}
             }
         }
         dotOut.classList.add('active');
-        // Grounding overlay for Point / Detect
-        if ((taskCat==='Point' || taskCat==='Detect') && fullText.trim()) {
-            dotGnd.classList.add('active');
-            // Small delay so the canvas wrapper has finished any layout reflow
-            setTimeout(() => drawGrounding(imgObjectURL, fullText, taskCat), 80);
         }
-    } catch(err) {
-        outputBox.innerText=`[Error] ${err.message}`; outputBox.style.color='#ff6b6b';
     } finally {
-        runBtn.disabled=false; btnLoader.style.display='none';
         dotTask.classList.remove('active');
-        allWires.forEach(id=>document.getElementById(id)?.classList.remove('active'));
     }
 };
 </script>

         .ground-header-row { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
         .ground-canvas-wrap {
             position: relative; flex: 1; border: 1px solid var(--node-border);
+            border-radius: 5px; overflow: hidden; background: #111; min-height: 0;
         }
         .ground-canvas-wrap canvas {
+            position: absolute; top: 0; left: 0;
             width: 100%; height: 100%;
             object-fit: contain; display: block;
+            image-rendering: auto;
         }
         .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;
+            pointer-events: none; z-index: 5;
         }
         .loader {
             width: 11px; height: 11px; border: 2px solid rgba(255,255,255,0.3);
         .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; }
         .canvas-footer { height: 36px; }
+        /* ── Debug panel ── */
+        #debugPanel {
+            position: fixed; bottom: 12px; right: 12px; z-index: 9999;
+            background: rgba(13,13,15,0.95); border: 1px solid var(--node-border);
+            border-radius: 7px; padding: 8px 12px; font-size: 10px; color: var(--muted);
+            max-width: 340px; display: none; backdrop-filter: blur(8px);
+        }
+        #debugPanel.visible { display: block; }
+        #debugPanel .dbg-title { color: var(--accent2); font-weight: 700; margin-bottom: 4px; }
+        #debugPanel pre { white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow-y: auto; color: #a0a0c0; }
     </style>
 </head>
 <body>
     <span class="badge">10x Vision Models</span>
 </div>
+<!-- Debug panel (toggle with D key) -->
+<div id="debugPanel">
+    <div class="dbg-title">⬡ GROUNDING DEBUG</div>
+    <pre id="debugPre"></pre>
+</div>
 <div id="canvas">
     <svg class="wires">
         <path id="wire-img-task"   class="wire" />
                     SAVE
                 </a>
             </div>
+            <div class="ground-canvas-wrap" id="groundWrap">
                 <canvas id="groundCanvas"></canvas>
                 <div class="ground-placeholder" id="groundPlaceholder">
                     Active for Point / Detect tasks.<br>Run inference to visualise.
 categorySelect.onchange = e => { promptInput.placeholder = PLACEHOLDERS[e.target.value]||''; };
 // ══════════════════════════════════════════════
+//  DEBUG PANEL  (press D to toggle)
+// ══════════════════════════════════════════════
+const debugPanel = document.getElementById('debugPanel');
+const debugPre   = document.getElementById('debugPre');
+let   debugVisible = false;
+document.addEventListener('keydown', e => {
+    if (e.key === 'd' || e.key === 'D') {
+        debugVisible = !debugVisible;
+        debugPanel.classList.toggle('visible', debugVisible);
+    }
+});
+function dbg(msg) {
+    debugPre.textContent = msg;
+    console.log('[GROUNDING]', msg);
+}
+// ══════════════════════════════════════════════
+//  ROBUST JSON EXTRACTOR  (handles all model output styles)
 // ══════════════════════════════════════════════
 function extractGroundingJSON(raw) {
+    // Step 1: strip <think>…</think> blocks completely
     let text = raw;
+    for (let i = 0; i < 10; i++) {
+        const next = text.replace(/<think>[\s\S]*?<\/think>/gi, '');
+        if (next === text) break;
+        text = next;
     }
+    // Step 2: strip markdown fences
+    text = text.replace(/```(?:json)?\\s*/gi, '').replace(/```/g, '').trim();
+    dbg('Cleaned text (first 400):' + text.slice(0, 400));
+    // Step 3: Balanced bracket extractor
     function extractBalanced(str, startIdx, openCh, closeCh) {
         let depth = 0, inStr = false, esc = false;
         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 === openCh)  depth++;
             if (c === closeCh) {
                 depth--;
                 if (depth === 0) {
+                    try { return JSON.parse(str.slice(startIdx, i + 1)); }
+                    catch (_) { return null; }
                 }
             }
         }
         return null;
     }
+    // Step 4: scan for ALL '[' positions, try each from last to first
+    const bracketPositions = [];
+    const bracePositions   = [];
     for (let i = 0; i < text.length; i++) {
+        if (text[i] === '[') bracketPositions.push(i);
+        if (text[i] === '{') bracePositions.push(i);
     }
+    // Prefer arrays (most models return [{...}, {...}])
+    for (let i = bracketPositions.length - 1; i >= 0; i--) {
+        const r = extractBalanced(text, bracketPositions[i], '[', ']');
+        if (r !== null && Array.isArray(r) && r.length > 0) {
+            dbg('Found array at pos ' + bracketPositions[i] + ': ' + JSON.stringify(r).slice(0, 200));
+            return r;
         }
     }
+    // Try objects
+    for (let i = bracePositions.length - 1; i >= 0; i--) {
+        const r = extractBalanced(text, bracePositions[i], '{', '}');
+        if (r !== null) {
+            dbg('Found object at pos ' + bracePositions[i] + ': ' + JSON.stringify(r).slice(0, 200));
+            return r;
+        }
     }
+    // Step 5: try whole-text parse
+    try { return JSON.parse(text); } catch (_) {}
+    dbg('No JSON found. Raw tail: ' + text.slice(-300));
+    return null;
 }
 // ══════════════════════════════════════════════
+//  COORDINATE NORMALISER
+//  Handles: absolute pixels, 0-1 fractions, 0-1000 Qwen scale
 // ══════════════════════════════════════════════
+function normaliseCoords(arr, W, H) {
+    // arr is [x1,y1,x2,y2] or [x,y]
+    const nums = arr.map(Number);
+    if (arr.length === 4) {
+        let [x1,y1,x2,y2] = nums;
+        // Qwen VL often uses 0-1000 normalised coords
+        const maxVal = Math.max(x1, y1, x2, y2);
+        if (maxVal <= 1.0 && maxVal > 0) {
+            // 0-1 fraction
+            return [x1*W, y1*H, x2*W, y2*H];
+        } else if (maxVal <= 1000 && maxVal > 1) {
+            // 0-1000 scale (Qwen VL convention)
+            return [x1/1000*W, y1/1000*H, x2/1000*W, y2/1000*H];
+        }
+        // Already in pixels
+        return [x1, y1, x2, y2];
     }
+    if (arr.length === 2) {
+        let [x, y] = nums;
+        const maxVal = Math.max(x, y);
+        if (maxVal <= 1.0 && maxVal > 0) return [x*W, y*H];
+        if (maxVal <= 1000 && maxVal > 1) return [x/1000*W, y/1000*H];
+        return [x, y];
     }
+    return nums;
 }
 // ══════════════════════════════════════════════
+//  GROUNDING VISUALIZER
 // ══════════════════════════════════════════════
 const groundCanvas      = document.getElementById('groundCanvas');
+const groundWrap        = document.getElementById('groundWrap');
 const groundPlaceholder = document.getElementById('groundPlaceholder');
 const gCtx              = groundCanvas.getContext('2d');
 const downloadBtn       = document.getElementById('downloadBtn');
     const r=parseInt(hex.slice(1,3),16), g=parseInt(hex.slice(3,5),16), b=parseInt(hex.slice(5,7),16);
     return `rgba(${r},${g},${b},${alpha})`;
 }
+function drawRoundRect(ctx, x, y, w, h, r) {
+    r = Math.min(r, w/2, h/2);
+    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();
 }
 function updateDownloadBtn() {
     downloadBtn.style.display = 'flex';
 }
+function drawGrounding(imgSrc, rawText) {
     const parsed = extractGroundingJSON(rawText);
     if (!parsed) {
+        dbg('drawGrounding: no JSON parsed from output.');
+        groundPlaceholder.textContent = 'No grounding coordinates found in model output.';
         groundPlaceholder.style.display = 'flex';
         return;
     }
     const img = new Image();
+    img.crossOrigin = 'anonymous';
     img.onload = () => {
+        const W = img.naturalWidth  || img.width  || 512;
+        const H = img.naturalHeight || img.height || 512;
+        // Set canvas to image natural size for crisp drawing
         groundCanvas.width  = W;
         groundCanvas.height = H;
+        // Draw base image
+        gCtx.drawImage(img, 0, 0, W, H);
+        // Hide placeholder — canvas is now populated
         groundPlaceholder.style.display = 'none';
+        const lw = Math.max(2, W / 180);
+        const fs = Math.max(11, Math.min(W / 35, 22));
         gCtx.lineWidth = lw;
         const items = Array.isArray(parsed) ? parsed : [parsed];
+        dbg('Drawing ' + items.length + ' item(s) on ' + W + 'x' + H);
+        items.forEach((item, i) => {
+            const col = PALETTE[i % PALETTE.length];
+            // ── Try to extract bbox ───────────────────────
+            let rawBbox = null;
+            if (Array.isArray(item?.bbox_2d) && item.bbox_2d.length === 4) rawBbox = item.bbox_2d;
+            else if (Array.isArray(item?.bbox)   && item.bbox.length   === 4) rawBbox = item.bbox;
+            else if (Array.isArray(item?.box)    && item.box.length    === 4) rawBbox = item.box;
+            // flat array of 4 numbers
+            else if (Array.isArray(item) && item.length === 4 && item.every(v => typeof v === 'number'))
+                rawBbox = item;
+            if (rawBbox) {
+                let [x1, y1, x2, y2] = normaliseCoords(rawBbox, W, H);
+                // Ensure x1<x2, y1<y2
+                if (x2 < x1) [x1, x2] = [x2, x1];
+                if (y2 < y1) [y1, y2] = [y2, y1];
+                const bw = x2 - x1, bh = y2 - y1;
+                // Fill
+                gCtx.fillStyle = hexToRgba(col, 0.18);
+                gCtx.fillRect(x1, y1, bw, bh);
+                // Border
+                gCtx.strokeStyle = col;
+                gCtx.lineWidth   = lw;
+                gCtx.strokeRect(x1, y1, bw, bh);
+                // Corner accent marks
+                const cLen = Math.min(bw, bh, 18);
+                gCtx.lineWidth = lw * 1.8;
+                [[x1,y1],[x2,y1],[x2,y2],[x1,y2]].forEach(([cx,cy]) => {
+                    const sx = cx === x1 ? 1 : -1, sy = cy === y1 ? 1 : -1;
+                    gCtx.beginPath();
+                    gCtx.moveTo(cx + sx*cLen, cy);
+                    gCtx.lineTo(cx, cy);
+                    gCtx.lineTo(cx, cy + sy*cLen);
+                    gCtx.strokeStyle = col;
+                    gCtx.stroke();
+                });
+                gCtx.lineWidth = lw;
+                // Label
+                const lbl = (item?.label ?? item?.class_name ?? item?.name ?? `obj ${i+1}`).toString();
+                gCtx.font = `bold ${fs}px JetBrains Mono, monospace`;
+                const tw  = gCtx.measureText(lbl).width;
+                const ph  = fs * 1.5, pw = tw + 14;
+                const lx  = Math.max(0, Math.min(x1, W - pw));
+                const ly  = y1 - ph > 0 ? y1 - ph : y1 + 2;
+                drawRoundRect(gCtx, lx, ly, pw, ph, 4);
+                gCtx.fillStyle = col; gCtx.fill();
+                gCtx.fillStyle = '#fff';
+                gCtx.fillText(lbl, lx + 7, ly + ph * 0.74);
+                return;
             }
+            // ── Try to extract point ──────────────────────
+            let rawPt = null;
+            if (Array.isArray(item?.point_2d) && item.point_2d.length === 2) rawPt = item.point_2d;
+            else if (Array.isArray(item?.point)   && item.point.length   === 2) rawPt = item.point;
+            else if (Array.isArray(item?.coord)   && item.coord.length   === 2) rawPt = item.coord;
+            else if (Array.isArray(item) && item.length === 2 && item.every(v => typeof v === 'number'))
+                rawPt = item;
+            if (rawPt) {
+                let [x, y] = normaliseCoords(rawPt, W, H);
+                const r = Math.max(7, Math.min(W / 55, 18));
+                const lbl = (item?.label ?? item?.name ?? `pt ${i+1}`).toString();
+                // Outer glow ring
+                gCtx.beginPath(); gCtx.arc(x, y, r * 2.2, 0, Math.PI*2);
+                gCtx.fillStyle = hexToRgba(col, 0.15); gCtx.fill();
+                // Middle ring
+                gCtx.beginPath(); gCtx.arc(x, y, r * 1.4, 0, Math.PI*2);
+                gCtx.fillStyle = hexToRgba(col, 0.25); gCtx.fill();
+                // Core dot
+                gCtx.beginPath(); 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();
+                // Centre dot
+                gCtx.beginPath(); gCtx.arc(x, y, r * 0.3, 0, Math.PI*2);
+                gCtx.fillStyle = '#fff'; gCtx.fill();
+                // Label
+                gCtx.font = `bold ${fs}px JetBrains Mono, monospace`;
+                const tw  = gCtx.measureText(lbl).width;
+                const ph  = fs * 1.45, pw = tw + 12;
+                const lx  = Math.min(x + r + 6, W - pw);
+                const ly  = Math.max(0, y - ph/2);
+                drawRoundRect(gCtx, lx, ly, pw, ph, 4);
+                gCtx.fillStyle = col; gCtx.fill();
+                gCtx.fillStyle = '#fff';
+                gCtx.fillText(lbl, lx + 6, ly + ph * 0.74);
+            }
+        });
         updateDownloadBtn();
     };
+    img.onerror = (e) => {
+        dbg('Image load error: ' + e);
         groundPlaceholder.textContent = 'Failed to load image for overlay.';
         groundPlaceholder.style.display = 'flex';
     };
+    img.src = imgSrc;
 }
 // ══════════════════════════════════════════════
     const promptStr = promptInput.value.trim();
     if (!promptStr)  { alert('Please enter a prompt directive.'); return; }
+    // Reset UI
+    runBtn.disabled = true;
+    btnLoader.style.display = 'inline-block';
+    outputBox.innerText = '';
+    outputBox.style.color = '';
+    groundPlaceholder.style.display = 'flex';
+    groundPlaceholder.textContent = 'Running inference…';
+    gCtx.clearRect(0, 0, groundCanvas.width, groundCanvas.height);
+    groundCanvas.width  = 1;   // reset canvas
+    groundCanvas.height = 1;
+    downloadBtn.style.display = 'none';
     dotTask.classList.add('active');
+    dotOut.classList.remove('active');
+    dotGnd.classList.remove('active');
+    allWires.forEach(id => document.getElementById(id)?.classList.add('active'));
     resetCopyBtn();
+    const formData = new FormData();
     formData.append('image',    currentFile);
     formData.append('category', categorySelect.value);
     formData.append('prompt',   promptStr);
     formData.append('model_id', modelSelect.value);
+    let fullText = '';
+    // Create a stable object URL for this run
     const imgObjectURL = URL.createObjectURL(currentFile);
     try {
+        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.');
+        }
+        const reader  = response.body.getReader();
+        const decoder = new TextDecoder('utf-8');
+        let buffer = '';
         while (true) {
+            const { value, done } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\\n\\n');
+            buffer = lines.pop();  // keep incomplete chunk
             for (const line of lines) {
                 if (!line.startsWith('data: ')) continue;
+                const payload = line.slice(6);   // remove 'data: '
+                if (payload === '[DONE]') break;
                 try {
+                    const data = JSON.parse(payload);
+                    if (data.chunk) {
+                        fullText += data.chunk;
+                        outputBox.innerText = fullText;
+                        outputBox.scrollTop = outputBox.scrollHeight;
+                    }
+                } catch (_) {}
             }
         }
         dotOut.classList.add('active');
+        // ── Grounding overlay ─────────────────────────
+        const cat = categorySelect.value;
+        if ((cat === 'Point' || cat === 'Detect') && fullText.trim()) {
+            groundPlaceholder.textContent = 'Parsing coordinates…';
+            groundPlaceholder.style.display = 'flex';
+            // Small delay so the UI updates before heavy canvas work
+            setTimeout(() => {
+                const parsed = extractGroundingJSON(fullText);
+                if (parsed !== null) {
+                    dotGnd.classList.add('active');
+                    drawGrounding(imgObjectURL, fullText);
+                } else {
+                    groundPlaceholder.textContent =
+                        'No grounding JSON detected in model output. ' +
+                        'Try rephrasing your prompt or use a VL model.';
+                    groundPlaceholder.style.display = 'flex';
+                    dbg('No JSON found. Full output: ' + fullText.slice(0, 500));
+                }
+            }, 50);
+        } else if (cat !== 'Point' && cat !== 'Detect') {
+            groundPlaceholder.textContent = 'Active for Point / Detect tasks. Run inference to visualise.';
+            groundPlaceholder.style.display = 'flex';
         }
+    } catch (err) {
+        outputBox.innerText = `[Error] ${err.message}`;
+        outputBox.style.color = '#ff6b6b';
+        groundPlaceholder.textContent = 'Inference error — see Output Stream node.';
+        groundPlaceholder.style.display = 'flex';
     } finally {
+        runBtn.disabled = false;
+        btnLoader.style.display = 'none';
         dotTask.classList.remove('active');
+        allWires.forEach(id => document.getElementById(id)?.classList.remove('active'));
+        // Revoke object URL after a delay to allow canvas drawing
+        setTimeout(() => URL.revokeObjectURL(imgObjectURL), 10000);
     }
 };
 </script>