update app

app.py

@@ -1,4 +1,3 @@
-
 import os
 import io
 import json
@@ -468,30 +467,30 @@ async def homepage(request: Request):
         /* ── Top Bar ── */
         .top-bar {
             position: sticky; top: 0; left: 0; right: 0;
-            height: 38px;
-            background: rgba(13,13,15,0.96);
+            height: 42px;
+            background: rgba(13,13,15,0.95);
             border-bottom: 1px solid var(--node-border);
-            display: flex; align-items: center; padding: 0 18px;
-            gap: 10px; z-index: 1000;
+            display: flex; align-items: center; padding: 0 20px;
+            gap: 12px; z-index: 1000;
             backdrop-filter: blur(12px);
         }
-        .top-bar .logo { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
-        .top-bar .sep  { color: var(--node-border); font-size: 12px; }
-        .top-bar .sub  { font-size: 10px; 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.13);
-            border: 1px solid rgba(124,106,247,0.28);
-            padding: 2px 9px; border-radius: 20px;
-            font-size: 9px; color: var(--accent); letter-spacing: 0.04em;
+            background: rgba(124,106,247,0.15);
+            border: 1px solid rgba(124,106,247,0.3);
+            padding: 3px 10px; border-radius: 20px;
+            font-size: 10px; color: var(--accent);
         }
 
         /* ── Canvas ── */
         #canvas {
             position: relative;
-            width: 1340px;
-            min-height: calc(100vh - 38px);
-            height: 820px;
+            width: 1360px;
+            min-height: calc(100vh - 42px);
+            height: 900px;
             margin: 0 auto;
         }
 
@@ -502,101 +501,100 @@ async def homepage(request: Request):
             overflow: visible;
         }
         path.wire {
-            fill: none; stroke: var(--wire); stroke-width: 2;
+            fill: none; stroke: var(--wire); stroke-width: 2.5;
             stroke-linecap: round;
         }
         path.wire.active {
-            stroke: var(--wire-active); stroke-width: 2.5;
-            stroke-dasharray: 7 3;
-            animation: flow 0.55s linear infinite;
+            stroke: var(--wire-active); stroke-width: 3;
+            stroke-dasharray: 8 4;
+            animation: flow 0.6s linear infinite;
         }
-        @keyframes flow { to { stroke-dashoffset: -20; } }
+        @keyframes flow { to { stroke-dashoffset: -24; } }
 
         /* ── Nodes ── */
         .node {
             position: absolute;
-            width: 288px;
+            width: 295px;
             background: var(--node-bg);
             border: 1px solid var(--node-border);
-            border-radius: 8px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.45);
+            border-radius: 9px;
+            box-shadow: 0 8px 28px rgba(0,0,0,0.5);
             z-index: 10;
             display: flex; flex-direction: column;
             transition: box-shadow 0.2s;
         }
         .node:hover {
-            box-shadow: 0 4px 20px rgba(0,0,0,0.45),
-                        0 0 0 1px rgba(124,106,247,0.28);
+            box-shadow: 0 8px 28px rgba(0,0,0,0.5),
+                        0 0 0 1px rgba(124,106,247,0.3);
         }
-        .node.fixed-height { height: 292px; }
+        .node.fixed-height { height: 340px; }
 
         .node-header {
             background: var(--node-header);
-            padding: 5px 10px;
+            padding: 7px 12px;
             border-bottom: 1px solid var(--node-border);
-            border-radius: 8px 8px 0 0;
-            font-size: 10px; font-weight: 700;
+            border-radius: 9px 9px 0 0;
+            font-size: 11px; font-weight: 700;
             cursor: grab;
             display: flex; justify-content: space-between; align-items: center;
             flex-shrink: 0;
             user-select: none;
-            letter-spacing: 0.03em;
         }
         .node-header:active { cursor: grabbing; }
         .node-header .id {
-            font-size: 9px; color: var(--muted);
+            font-size: 10px; color: var(--muted);
             background: rgba(255,255,255,0.04);
-            padding: 1px 6px; border-radius: 3px;
+            padding: 2px 7px; border-radius: 4px;
         }
 
         .node-body {
-            padding: 8px;
-            display: flex; flex-direction: column; gap: 6px;
+            padding: 10px;
+            display: flex; flex-direction: column; gap: 8px;
             flex: 1; overflow: hidden;
         }
 
         /* ── Ports ── */
         .port {
             position: absolute;
-            width: 10px; height: 10px;
+            width: 11px; height: 11px;
             background: var(--node-bg);
             border: 2px solid var(--port);
             border-radius: 50%; z-index: 30;
         }
-        .port.out { right: -5px; }
-        .port.in  { left:  -5px; }
+        .port.out { right: -6px; }
+        .port.in  { left:  -6px; }
 
         /* ── Labels ── */
         label {
-            font-size: 9px; color: var(--muted);
-            font-weight: 600; display: block; margin-bottom: 2px;
-            letter-spacing: 0.08em; text-transform: uppercase;
+            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: 1px dashed var(--node-border);
-            border-radius: 6px; padding: 10px 8px;
+            border: 1.5px dashed var(--node-border);
+            border-radius: 7px; padding: 12px 10px;
             text-align: center; cursor: pointer;
-            font-size: 10px; color: var(--muted);
+            font-size: 11px; color: var(--muted);
             transition: border-color 0.2s, background 0.2s;
             background: rgba(255,255,255,0.01);
-            display: flex; flex-direction: column; align-items: center; gap: 4px;
+            display: flex; flex-direction: column; align-items: center; gap: 5px;
         }
         .file-upload:hover {
             border-color: var(--accent);
             background: rgba(124,106,247,0.04);
         }
-        .file-upload svg { opacity: 0.45; transition: opacity 0.2s; }
-        .file-upload:hover svg { opacity: 0.85; }
+        .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: 6px;
+            border-radius: 7px;
             overflow: hidden;
             border: 1px solid var(--node-border);
             background: #000;
@@ -605,7 +603,7 @@ async def homepage(request: Request):
 
         .img-preview {
             width: 100%;
-            height: 148px;
+            height: 170px;
             object-fit: contain;
             display: block;
         }
@@ -613,34 +611,35 @@ async def homepage(request: Request):
         /* ── Clear button ── */
         .clear-btn {
             position: absolute;
-            top: 5px; right: 5px;
-            width: 20px; height: 20px;
+            top: 6px; right: 6px;
+            width: 24px; height: 24px;
             border-radius: 50%;
-            background: rgba(13,13,15,0.78);
-            border: 1px solid rgba(255,107,107,0.45);
+            background: rgba(13,13,15,0.80);
+            border: 1px solid var(--node-border);
             color: var(--accent3);
             cursor: pointer;
             display: flex; align-items: center; justify-content: center;
-            transition: background 0.15s, transform 0.12s;
+            transition: background 0.18s, border-color 0.18s, transform 0.12s;
             z-index: 20;
-            backdrop-filter: blur(4px);
+            backdrop-filter: blur(6px);
         }
         .clear-btn:hover {
-            background: rgba(255,107,107,0.20);
+            background: rgba(255,107,107,0.18);
             border-color: var(--accent3);
-            transform: scale(1.1);
+            transform: scale(1.08);
         }
-        .clear-btn:active { transform: scale(0.93); }
+        .clear-btn:active { transform: scale(0.95); }
         .clear-btn svg { pointer-events: none; }
 
         /* ── Filename chip ── */
         .img-chip {
             display: none;
-            align-items: center; gap: 5px;
-            background: rgba(124,106,247,0.07);
-            border: 1px solid rgba(124,106,247,0.18);
-            border-radius: 4px;
-            padding: 3px 7px;
+            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;
         }
         .img-chip.visible { display: flex; }
@@ -654,48 +653,46 @@ 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;
+        }
 
-        /* ── Inputs ── */
         select, textarea {
             width: 100%;
-            background: rgba(0,0,0,0.28);
+            background: rgba(0,0,0,0.3);
             border: 1px solid var(--node-border);
-            color: var(--text); padding: 5px 8px;
+            color: var(--text); padding: 7px 9px;
             border-radius: 5px; outline: none;
-            font-size: 10px; font-family: 'JetBrains Mono', monospace;
+            font-size: 11px; font-family: 'JetBrains Mono', monospace;
             resize: none; transition: border-color 0.2s;
-            line-height: 1.4;
         }
         select:focus, textarea:focus { border-color: var(--accent); }
         select option { background: #1c1c26; }
 
-        /* ── Run Button ── */
         button.run-btn {
             background: linear-gradient(135deg, var(--accent), #9b59b6);
             color: #fff; border: none;
-            padding: 6px 10px; border-radius: 5px;
-            font-weight: 700; font-size: 10px;
+            padding: 8px; border-radius: 6px;
+            font-weight: 700; font-size: 11px;
             font-family: 'JetBrains Mono', monospace;
             cursor: pointer;
             transition: opacity 0.2s, transform 0.1s;
-            display: flex; justify-content: center; align-items: center; gap: 6px;
-            letter-spacing: 0.05em; flex-shrink: 0;
+            display: flex; justify-content: center; align-items: center; gap: 8px;
+            letter-spacing: 0.04em; flex-shrink: 0;
         }
-        button.run-btn:hover  { opacity: 0.88; }
-        button.run-btn:active { transform: scale(0.97); }
+        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 ── */
         .output-box {
-            background: rgba(0,0,0,0.35);
+            background: rgba(0,0,0,0.4);
             border: 1px solid var(--node-border);
-            border-radius: 5px; padding: 8px;
+            border-radius: 5px; padding: 10px;
             flex: 1; overflow-y: auto;
-            font-size: 10px; line-height: 1.55;
-            color: #c0c0da; white-space: pre-wrap;
+            font-size: 11px; line-height: 1.6;
+            color: #c8c8e0; white-space: pre-wrap;
             user-select: text;
             font-family: 'JetBrains Mono', monospace;
         }
@@ -714,53 +711,48 @@ async def homepage(request: Request):
         .ground-placeholder {
             position: absolute; inset: 0;
             display: flex; align-items: center; justify-content: center;
-            font-size: 10px; color: var(--muted);
-            text-align: center; padding: 8px; line-height: 1.5;
+            font-size: 11px; color: var(--muted); text-align: center; padding: 10px;
         }
 
-        /* ── Model info box ── */
-        .model-info-box {
-            border-radius: 5px; padding: 7px 8px;
-            font-size: 9px; color: var(--muted); line-height: 1.5;
-            flex-shrink: 0;
-        }
-
-        /* ── Model badges ── */
-        .model-badge {
-            display: inline-block; padding: 1px 6px;
-            border-radius: 3px; font-size: 8px; font-weight: 700;
-            letter-spacing: 0.06em; text-transform: uppercase;
-        }
-        .model-badge.q4b     { background: rgba(255,200,80,0.14);  color: #ffc850;        border: 1px solid rgba(255,200,80,0.32); }
-        .model-badge.q2b     { background: rgba(124,106,247,0.18); color: var(--accent);  border: 1px solid rgba(124,106,247,0.28); }
-        .model-badge.qvl     { background: rgba(255,150,50,0.14);  color: #ff9632;        border: 1px solid rgba(255,150,50,0.32); }
-        .model-badge.lfm450  { background: rgba(78,205,196,0.14);  color: var(--accent2); border: 1px solid rgba(78,205,196,0.28); }
-        .model-badge.lfm16   { background: rgba(107,203,119,0.14); color: #6bcb77;        border: 1px solid rgba(107,203,119,0.32); }
-        .model-badge.qunred  { background: rgba(255,80,160,0.14);  color: #ff50a0;        border: 1px solid rgba(255,80,160,0.32); }
-        .model-badge.q25vl3b { background: rgba(80,180,255,0.14);  color: #50b4ff;        border: 1px solid rgba(80,180,255,0.32); }
-
-        /* ── Loader ── */
         .loader {
-            width: 10px; height: 10px;
-            border: 2px solid rgba(255,255,255,0.25);
+            width: 11px; height: 11px;
+            border: 2px solid rgba(255,255,255,0.3);
             border-top-color: #fff; border-radius: 50%;
-            animation: spin 0.65s linear infinite;
+            animation: spin 0.7s linear infinite;
             display: none;
         }
         @keyframes spin { to { transform: rotate(360deg); } }
 
-        /* ── Status dot ── */
         .status-dot {
-            width: 5px; height: 5px; border-radius: 50%;
-            background: var(--muted); display: inline-block; margin-right: 5px;
-            flex-shrink: 0;
+            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);
         }
 
-        .canvas-footer { height: 28px; }
+        /* ── Model badges ── */
+        .model-badge {
+            display: inline-block; padding: 2px 7px;
+            border-radius: 4px; font-size: 9px; font-weight: 700;
+            letter-spacing: 0.06em; text-transform: uppercase;
+        }
+        .model-badge.q4b     { background: rgba(255,200,80,0.15);  color: #ffc850;        border: 1px solid rgba(255,200,80,0.35); }
+        .model-badge.q2b     { background: rgba(124,106,247,0.2);  color: var(--accent);  border: 1px solid rgba(124,106,247,0.3); }
+        .model-badge.qvl     { background: rgba(255,150,50,0.15);  color: #ff9632;        border: 1px solid rgba(255,150,50,0.35); }
+        .model-badge.lfm450  { background: rgba(78,205,196,0.15);  color: var(--accent2); border: 1px solid rgba(78,205,196,0.3); }
+        .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;
+        }
+
+        .canvas-footer { height: 36px; }
     </style>
 </head>
 <body>
@@ -769,7 +761,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.5 · HEPTA MODEL</span>
+    <span class="badge">v2.5 — HEPTA MODEL</span>
 </div>
 
 <div id="canvas">
@@ -781,37 +773,43 @@ async def homepage(request: Request):
     </svg>
 
     <!-- ─── ID 01 : Image Input ─── -->
-    <div class="node fixed-height" id="node-img" style="left:38px; top:46px;">
+    <div class="node fixed-height" id="node-img" style="left:40px; top:52px;">
         <div class="node-header">
             <span><span class="status-dot" id="dot-img"></span>Input Image</span>
-            <span class="id">ID · 01</span>
+            <span class="id">ID: 01</span>
         </div>
         <div class="node-body">
             <div>
                 <label>Upload Image</label>
+
+                <!-- Drop zone -->
                 <div class="file-upload" id="dropZone">
-                    <svg width="26" height="26" viewBox="0 0 24 24" fill="none"
+                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none"
                          stroke="#7c6af7" stroke-width="1.5"
                          stroke-linecap="round" stroke-linejoin="round">
-                        <rect x="3" y="3" width="18" height="18" rx="2"/>
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                         <circle cx="8.5" cy="8.5" r="1.5"/>
                         <polyline points="21 15 16 10 5 21"/>
                     </svg>
-                    <span>Click or drop image</span>
+                    <span>Click or drop image here</span>
                     <input type="file" id="fileInput" accept="image/*">
                 </div>
+
+                <!-- Preview -->
                 <div class="preview-wrap" id="previewWrap">
                     <img id="imgPreview" class="img-preview" />
-                    <button class="clear-btn" id="clearBtn" title="Clear image">
-                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none"
-                             stroke="currentColor" stroke-width="2.8"
+                    <button class="clear-btn" id="clearBtn" title="Remove image">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+                             stroke="currentColor" stroke-width="2.5"
                              stroke-linecap="round" stroke-linejoin="round">
                             <line x1="18" y1="6" x2="6" y2="18"/>
                             <line x1="6" y1="6" x2="18" y2="18"/>
                         </svg>
                     </button>
                 </div>
-                <div class="img-chip" id="imgChip" style="margin-top:5px;">
+
+                <!-- Filename chip -->
+                <div class="img-chip" id="imgChip" style="margin-top:6px;">
                     <span class="chip-dot"></span>
                     <span class="chip-name" id="chipName">—</span>
                     <span class="chip-size" id="chipSize"></span>
@@ -822,10 +820,10 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 02 : Model Selector ─── -->
-    <div class="node fixed-height" id="node-model" style="left:38px; top:356px;">
+    <div class="node fixed-height" id="node-model" style="left:40px; top:412px;">
         <div class="node-header">
             <span><span class="status-dot" id="dot-model"></span>Model Selector</span>
-            <span class="id">ID · 02</span>
+            <span class="id">ID: 02</span>
         </div>
         <div class="node-body">
             <div>
@@ -841,9 +839,10 @@ async def homepage(request: Request):
                 </select>
             </div>
             <div id="modelInfoBox" class="model-info-box"
-                 style="background:rgba(255,200,80,0.06);border:1px solid rgba(255,200,80,0.28);">
+                 style="background:rgba(255,200,80,0.07);border:1px solid rgba(255,200,80,0.3);">
                 <span class="model-badge q4b">QWEN 3.5 · 4B</span><br><br>
-                Qwen3.5-4B by Alibaba Cloud — enhanced reasoning &amp; instruction following.
+                Qwen3.5 4B multimodal model by Alibaba Cloud.
+                Enhanced capacity over 2B — richer reasoning, better instruction following.
             </div>
             <div style="flex:1;"></div>
         </div>
@@ -851,11 +850,11 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 03 : Task Config ─── -->
-    <div class="node fixed-height" id="node-task" style="left:416px; top:46px;">
+    <div class="node fixed-height" id="node-task" style="left:425px; top:52px;">
         <div class="port in" id="port-task-in" style="top:50%;transform:translateY(-50%);"></div>
         <div class="node-header">
             <span><span class="status-dot" id="dot-task"></span>Task Config</span>
-            <span class="id">ID · 03</span>
+            <span class="id">ID: 03</span>
         </div>
         <div class="node-body">
             <div>
@@ -869,11 +868,11 @@ async def homepage(request: Request):
             </div>
             <div>
                 <label>Prompt Directive</label>
-                <textarea id="promptInput" rows="3"
-                    placeholder="e.g., Describe the scene in detail."></textarea>
+                <textarea id="promptInput" rows="4"
+                    placeholder="e.g., Count the total number of boats and describe the environment."></textarea>
             </div>
             <button class="run-btn" id="runBtn">
-                <span>▶ Execute</span>
+                <span>Execute</span>
                 <span class="loader" id="btnLoader"></span>
             </button>
         </div>
@@ -881,11 +880,11 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 04 : Output Stream ─── -->
-    <div class="node fixed-height" id="node-out" style="left:794px; top:46px;">
+    <div class="node fixed-height" id="node-out" style="left:810px; top:52px;">
         <div class="port in" id="port-out-in" style="top:50%;transform:translateY(-50%);"></div>
         <div class="node-header">
             <span><span class="status-dot" id="dot-out"></span>Output Stream</span>
-            <span class="id">ID · 04</span>
+            <span class="id">ID: 04</span>
         </div>
         <div class="node-body">
             <label>Streamed Result</label>
@@ -894,11 +893,11 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 05 : Grounding Visualiser ─── -->
-    <div class="node fixed-height" id="node-gnd" style="left:794px; top:356px;">
+    <div class="node fixed-height" id="node-gnd" style="left:810px; top:412px;">
         <div class="port in" id="port-gnd-in" style="top:50%;transform:translateY(-50%);"></div>
         <div class="node-header">
             <span><span class="status-dot" id="dot-gnd"></span>View Grounding</span>
-            <span class="id">ID · 05</span>
+            <span class="id">ID: 05</span>
         </div>
         <div class="node-body">
             <label>Point / Detect Overlay</label>
@@ -981,6 +980,7 @@ requestAnimationFrame(updateWires);
 //  FILE UPLOAD + CLEAR
 // ══════════════════════════════════════════════
 let currentFile = null;
+
 const dropZone    = document.getElementById('dropZone');
 const fileInput   = document.getElementById('fileInput');
 const previewWrap = document.getElementById('previewWrap');
@@ -991,10 +991,10 @@ const chipName    = document.getElementById('chipName');
 const chipSize    = document.getElementById('chipSize');
 const dotImg      = document.getElementById('dot-img');
 
-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 formatBytes(bytes) {
+    if (bytes < 1024)     return bytes + ' B';
+    if (bytes < 1048576)  return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
 }
 
 function handleFile(file) {
@@ -1043,32 +1043,53 @@ dotModel.classList.add('active');
 
 const MODEL_INFO = {
     qwen_4b: {
-        html:   `<span class="model-badge q4b">QWEN 3.5 · 4B</span><br><br>Qwen3.5-4B by Alibaba Cloud — enhanced reasoning &amp; instruction following.`,
-        bg:     'rgba(255,200,80,0.06)', border: 'rgba(255,200,80,0.28)',
+        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)',
     },
     qwen_2b: {
-        html:   `<span class="model-badge q2b">QWEN 3.5 · 2B</span><br><br>Qwen3.5-2B by Alibaba Cloud — lightweight &amp; fast for all task types.`,
-        bg:     'rgba(124,106,247,0.06)', border: 'rgba(124,106,247,0.22)',
+        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)',
     },
     qwen_vl: {
-        html:   `<span class="model-badge qvl">QWEN3-VL · 2B</span><br><br>Qwen3-VL-2B-Instruct — strong spatial grounding, OCR &amp; vision tasks.`,
-        bg:     'rgba(255,150,50,0.06)', border: 'rgba(255,150,50,0.22)',
+        html:   `<span class="model-badge qvl">QWEN3-VL · 2B</span><br><br>
+                 Qwen3-VL-2B-Instruct — dedicated vision-language model by Alibaba Cloud.
+                 Strong spatial grounding, OCR &amp; instruction-following.`,
+        bg:     'rgba(255,150,50,0.07)',
+        border: 'rgba(255,150,50,0.25)',
     },
     lfm_450: {
-        html:   `<span class="model-badge lfm450">LFM · 450M</span><br><br>LFM2.5-VL 450M by LiquidAI — ultra-lightweight edge grounding model.`,
-        bg:     'rgba(78,205,196,0.06)', border: 'rgba(78,205,196,0.22)',
+        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)',
     },
     lfm_16: {
-        html:   `<span class="model-badge lfm16">LFM · 1.6B</span><br><br>LFM2.5-VL 1.6B by LiquidAI — richer reasoning &amp; visual understanding.`,
-        bg:     'rgba(107,203,119,0.06)', border: 'rgba(107,203,119,0.22)',
+        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)',
     },
     qwen_unredacted: {
-        html:   `<span class="model-badge qunred">QWEN 3.5 · 2B UNREDACTED</span><br><br>Qwen3.5-2B-Unredacted-MAX by prithivMLmods — uncensored fine-tune.`,
-        bg:     'rgba(255,80,160,0.06)', border: 'rgba(255,80,160,0.22)',
+        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)',
     },
     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 grounding &amp; OCR.`,
-        bg:     'rgba(80,180,255,0.06)', border: 'rgba(80,180,255,0.22)',
+        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)',
     },
 };
 
@@ -1086,7 +1107,7 @@ modelSelect.onchange = () => {
 const categorySelect = document.getElementById('categorySelect');
 const promptInput    = document.getElementById('promptInput');
 const PLACEHOLDERS   = {
-    Query:   'e.g., Count the boats and describe the scene.',
+    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.',
@@ -1104,10 +1125,10 @@ function safeParseJSON(text) {
                .replace(/\\s*```$/, '')
                .trim();
     try { return JSON.parse(text); } catch(_) {}
-    const am = text.match(/\\[[\\s\\S]*?\\]/);
-    if (am) { try { return JSON.parse(am[0]); } catch(_) {} }
-    const om = text.match(/\\{[\\s\\S]*?\\}/);
-    if (om) { try { return JSON.parse(om[0]); } 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;
 }
 
@@ -1143,6 +1164,7 @@ function roundRect(ctx, x, y, w, h, r) {
 function drawGrounding(imgSrc, jsonText) {
     const parsed = safeParseJSON(jsonText);
     if (!parsed) { console.warn('Grounding: could not parse JSON:', jsonText); return; }
+
     const img = new Image();
     img.onload = () => {
         const W = img.naturalWidth, H = img.naturalHeight;
@@ -1157,9 +1179,11 @@ function drawGrounding(imgSrc, jsonText) {
         gCtx.font      = `bold ${fs}px JetBrains Mono, monospace`;
 
         const items = Array.isArray(parsed) ? parsed : [parsed];
+
         items.forEach((item, i) => {
             const col = PALETTE[i % PALETTE.length];
 
+            // ── Bounding box ──
             let bbox = null;
             if (item?.bbox_2d?.length === 4)  bbox = item.bbox_2d;
             else if (item?.bbox?.length === 4) bbox = item.bbox;
@@ -1168,13 +1192,17 @@ function drawGrounding(imgSrc, jsonText) {
 
             if (bbox) {
                 let [x1,y1,x2,y2] = bbox;
-                if (x1<=1&&y1<=1&&x2<=1&&y2<=1) { x1*=W; y1*=H; x2*=W; y2*=H; }
-                const bw = x2-x1, bh = y2-y1;
+                if (x1 <= 1 && y1 <= 1 && x2 <= 1 && y2 <= 1) {
+                    x1*=W; y1*=H; x2*=W; y2*=H;
+                }
+                const bw  = x2-x1, bh = y2-y1;
                 const lbl = item?.label || `${i+1}`;
-                gCtx.fillStyle   = hexToRgba(col,0.18);
-                gCtx.fillRect(x1,y1,bw,bh);
+
+                gCtx.fillStyle   = hexToRgba(col, 0.18);
+                gCtx.fillRect(x1, y1, bw, bh);
                 gCtx.strokeStyle = col;
-                gCtx.strokeRect(x1,y1,bw,bh);
+                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);
@@ -1185,6 +1213,7 @@ function drawGrounding(imgSrc, jsonText) {
                 return;
             }
 
+            // ── Point ──
             let pt = null;
             if (item?.point_2d?.length === 2)  pt = item.point_2d;
             else if (item?.point?.length === 2) pt = item.point;
@@ -1193,16 +1222,19 @@ function drawGrounding(imgSrc, jsonText) {
 
             if (pt) {
                 let [x,y] = pt;
-                if (x<=1&&y<=1) { x*=W; y*=H; }
+                if (x <= 1 && y <= 1) { x*=W; y*=H; }
                 const r   = Math.max(8, W/60);
                 const lbl = item?.label || `${i+1}`;
+
                 gCtx.beginPath();
                 gCtx.arc(x, y, r*1.6, 0, Math.PI*2);
-                gCtx.fillStyle = hexToRgba(col,0.15); gCtx.fill();
+                gCtx.fillStyle = hexToRgba(col, 0.15); gCtx.fill();
+
                 gCtx.beginPath();
                 gCtx.arc(x, y, r, 0, Math.PI*2);
                 gCtx.fillStyle   = col; gCtx.fill();
                 gCtx.strokeStyle = '#fff'; gCtx.stroke();
+
                 gCtx.fillStyle = '#fff';
                 gCtx.fillText(lbl, x+r+4, y+fs*0.4);
             }
@@ -1301,4 +1333,4 @@ runBtn.onclick = async () => {
 """
 
 if __name__ == "__main__":
-    app.launch(show_error=True)
+    app.launch(show_error=True)