update app

app.py

@@ -788,6 +788,47 @@ async def homepage(request: Request):
             background: var(--node-border); cursor: not-allowed; color: #555;
         }
 
+        /* ── Output node body layout ── */
+        .output-node-body {
+            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;
+        }
+
+        /* ── 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;
+            font-size: 9px; font-weight: 700;
+            font-family: 'JetBrains Mono', monospace;
+            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:active { transform: scale(0.95); }
+        .copy-btn.copied {
+            background: rgba(78,205,196,0.15);
+            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);
@@ -797,6 +838,7 @@ async def homepage(request: Request):
             color: #c8c8e0; white-space: pre-wrap;
             user-select: text;
             font-family: 'JetBrains Mono', monospace;
+            min-height: 0;
         }
 
         /* ── Grounding ── */
@@ -986,8 +1028,19 @@ async def homepage(request: Request):
             <span><span class="status-dot" id="dot-out"></span>Output Stream</span>
             <span class="id">ID: 04</span>
         </div>
-        <div class="node-body">
-            <label>Streamed Result</label>
+        <div class="output-node-body">
+            <div class="output-header-row">
+                <label style="margin-bottom:0;">Streamed Result</label>
+                <button class="copy-btn" id="copyBtn" title="Copy result to clipboard">
+                    <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
+                </button>
+            </div>
             <div class="output-box" id="outputBox">Results will stream here...</div>
         </div>
     </div>
@@ -1231,18 +1284,63 @@ categorySelect.onchange = e => {
 };
 
 // ══════════════════════════════════════════════
-//  JSON PARSER
+//  ROBUST JSON EXTRACTOR
+//  Strips <think>…</think> blocks, then pulls
+//  the first JSON array or object from the text.
 // ══════════════════════════════════════════════
-function safeParseJSON(text) {
-    text = text.trim()
-               .replace(/^```(json)?\\s*/i, '')
-               .replace(/\\s*```$/, '')
-               .trim();
+function extractGroundingJSON(raw) {
+    // 1. Remove <think>…</think> blocks (including nested content)
+    let text = raw.replace(/<think>[\s\S]*?<\/think>/gi, '');
+
+    // 2. Strip markdown code fences  ```json … ```  or  ``` … ```
+    text = text.replace(/```(?:json)?\\s*/gi, '').replace(/```/g, '');
+
+    text = text.trim();
+
+    // 3. Try to find a JSON array first  [ … ]
+    const arrIdx = text.indexOf('[');
+    if (arrIdx !== -1) {
+        // Walk forward to find the matching closing bracket
+        let depth = 0, inStr = false, esc = false;
+        for (let i = arrIdx; 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(arrIdx, i + 1)); } catch(_) { break; }
+                }
+            }
+        }
+    }
+
+    // 4. Try to find a 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; }
+                }
+            }
+        }
+    }
+
+    // 5. Last resort — try parsing the whole cleaned text
     try { return JSON.parse(text); } catch(_) {}
-    const arrMatch = text.match(/\\[[\\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;
 }
 
@@ -1275,9 +1373,13 @@ function roundRect(ctx, x, y, w, h, r) {
     ctx.closePath();
 }
 
-function drawGrounding(imgSrc, jsonText) {
-    const parsed = safeParseJSON(jsonText);
-    if (!parsed) { console.warn('Grounding: could not parse JSON:', jsonText); return; }
+function drawGrounding(imgSrc, rawText) {
+    // ── Extract JSON from raw model output (handles <think> blocks etc.) ──
+    const parsed = extractGroundingJSON(rawText);
+    if (!parsed) {
+        console.warn('Grounding: could not extract JSON from output:', rawText);
+        return;
+    }
 
     const img = new Image();
     img.onload = () => {
@@ -1287,82 +1389,147 @@ function drawGrounding(imgSrc, jsonText) {
         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`;
 
+        // Normalise to array
         const items = Array.isArray(parsed) ? parsed : [parsed];
 
         items.forEach((item, i) => {
             const col = PALETTE[i % PALETTE.length];
 
-            // ── Bounding box ──
+            // ── Detect: bounding box ─────────────────────────
+            // Accept bbox_2d, bbox, or a raw 4-number array
             let bbox = null;
-            if (item?.bbox_2d?.length === 4)  bbox = item.bbox_2d;
-            else if (item?.bbox?.length === 4) bbox = item.bbox;
-            else if (Array.isArray(item) && item.length === 4 &&
-                     item.every(n => typeof n === 'number')) bbox = item;
+            if (Array.isArray(item?.bbox_2d) && item.bbox_2d.length === 4)
+                bbox = item.bbox_2d;
+            else if (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;
+                let [x1, y1, x2, y2] = bbox.map(Number);
+
+                // Normalised 0-1 coords → pixel 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 || `${i+1}`;
 
+                const bw  = x2 - x1;
+                const bh  = y2 - y1;
+                const lbl = item?.label ?? `obj ${i + 1}`;
+
+                // Filled rect + stroke
                 gCtx.fillStyle   = hexToRgba(col, 0.18);
                 gCtx.fillRect(x1, y1, bw, bh);
                 gCtx.strokeStyle = col;
                 gCtx.strokeRect(x1, y1, bw, bh);
 
+                // Label pill above the box
                 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.4, pw = tw + 10;
+                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 + 5, ly + ph * 0.76);
                 return;
             }
 
-            // ── Point ──
+            // ── Point: 2-D coordinate ────────────────────────
+            // Accept point_2d, point, or a raw 2-number array
             let pt = null;
-            if (item?.point_2d?.length === 2)  pt = item.point_2d;
-            else if (item?.point?.length === 2) pt = item.point;
-            else if (Array.isArray(item) && item.length === 2 &&
-                     item.every(n => typeof n === 'number')) pt = item;
+            if (Array.isArray(item?.point_2d) && item.point_2d.length === 2)
+                pt = item.point_2d;
+            else if (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;
-                if (x <= 1 && y <= 1) { x*=W; y*=H; }
-                const r   = Math.max(8, W/60);
-                const lbl = item?.label || `${i+1}`;
+                let [x, y] = pt.map(Number);
+
+                // Normalised 0-1 coords → pixel coords
+                if (x <= 1 && y <= 1) { x *= W; y *= H; }
 
+                const r   = Math.max(8, W / 60);
+                const lbl = item?.label ?? `pt ${i + 1}`;
+
+                // Outer glow ring
                 gCtx.beginPath();
-                gCtx.arc(x, y, r*1.6, 0, Math.PI*2);
-                gCtx.fillStyle = hexToRgba(col, 0.15); gCtx.fill();
+                gCtx.arc(x, y, r * 1.7, 0, Math.PI * 2);
+                gCtx.fillStyle = hexToRgba(col, 0.15);
+                gCtx.fill();
 
+                // Solid dot
                 gCtx.beginPath();
-                gCtx.arc(x, y, r, 0, Math.PI*2);
-                gCtx.fillStyle   = col; gCtx.fill();
-                gCtx.strokeStyle = '#fff'; gCtx.stroke();
+                gCtx.arc(x, y, r, 0, Math.PI * 2);
+                gCtx.fillStyle   = col;
+                gCtx.fill();
+                gCtx.strokeStyle = '#fff';
+                gCtx.stroke();
 
+                // Label to the right of the dot
                 gCtx.fillStyle = '#fff';
-                gCtx.fillText(lbl, x+r+4, y+fs*0.4);
+                gCtx.fillText(lbl, x + r + 4, y + fs * 0.4);
             }
         });
     };
     img.src = imgSrc;
 }
 
+// ══════════════════════════════════════════════
+//  COPY BUTTON
+// ══════════════════════════════════════════════
+const copyBtn   = document.getElementById('copyBtn');
+const outputBox = document.getElementById('outputBox');
+let   copyTimer = null;
+
+copyBtn.onclick = () => {
+    const txt = outputBox.innerText || '';
+    if (!txt || txt === 'Results will stream here...') return;
+    navigator.clipboard.writeText(txt).then(() => {
+        copyBtn.classList.add('copied');
+        copyBtn.innerHTML = `
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" stroke-width="2.5"
+                 stroke-linecap="round" stroke-linejoin="round">
+                <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);
+    }).catch(() => {
+        // Fallback for older browsers
+        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);
+    });
+};
+
 // ══════════════════════════════════════════════
 //  RUN INFERENCE
 // ══════════════════════════════════════════════
 const runBtn    = document.getElementById('runBtn');
 const btnLoader = document.getElementById('btnLoader');
-const outputBox = document.getElementById('outputBox');
 const allWires  = ['wire-img-task','wire-model-task','wire-task-out','wire-task-gnd'];
 const dotTask   = document.getElementById('dot-task');
 const dotOut    = document.getElementById('dot-out');
@@ -1384,6 +1551,16 @@ runBtn.onclick = async () => {
     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`;
+
     const formData = new FormData();
     formData.append('image',    currentFile);
     formData.append('category', categorySelect.value);
@@ -1425,10 +1602,15 @@ runBtn.onclick = async () => {
         }
 
         dotOut.classList.add('active');
+
+        // ── Attempt grounding overlay for Point / Detect ──
         const cat = categorySelect.value;
         if ((cat === 'Point' || cat === 'Detect') && fullText.trim()) {
-            dotGnd.classList.add('active');
-            drawGrounding(URL.createObjectURL(currentFile), fullText);
+            const parsed = extractGroundingJSON(fullText);
+            if (parsed) {
+                dotGnd.classList.add('active');
+                drawGrounding(URL.createObjectURL(currentFile), fullText);
+            }
         }
 
     } catch (err) {