update app

app.py

@@ -33,11 +33,12 @@ DTYPE = (
     else torch.float16
 )
 
-QWEN_4B_MODEL_NAME  = "Qwen/Qwen3.5-4B"
-QWEN_2B_MODEL_NAME  = "Qwen/Qwen3.5-2B"
-QWEN_VL_MODEL_NAME  = "Qwen/Qwen3-VL-2B-Instruct"
-LFM_450_MODEL_NAME  = "LiquidAI/LFM2.5-VL-450M"
-LFM_16_MODEL_NAME   = "LiquidAI/LFM2.5-VL-1.6B"
+QWEN_4B_MODEL_NAME      = "Qwen/Qwen3.5-4B"
+QWEN_2B_MODEL_NAME      = "Qwen/Qwen3.5-2B"
+QWEN_VL_MODEL_NAME      = "Qwen/Qwen3-VL-2B-Instruct"
+LFM_450_MODEL_NAME      = "LiquidAI/LFM2.5-VL-450M"
+LFM_16_MODEL_NAME       = "LiquidAI/LFM2.5-VL-1.6B"
+QWEN_UNREDACTED_NAME    = "prithivMLmods/Qwen3.5-2B-Unredacted-MAX"
 
 # ── Qwen3.5-4B ──────────────────────────────────────────
 print(f"Loading Qwen3.5-4B model: {QWEN_4B_MODEL_NAME} on {DEVICE}...")
@@ -112,6 +113,19 @@ except Exception as e:
     lfm_16_model = None
     lfm_16_processor = None
 
+# ── Qwen3.5-2B-Unredacted-MAX ───────────────────────────
+print(f"Loading Qwen3.5-2B-Unredacted-MAX model: {QWEN_UNREDACTED_NAME} on {DEVICE}...")
+try:
+    qwen_unredacted_model = Qwen3_5ForConditionalGeneration.from_pretrained(
+        QWEN_UNREDACTED_NAME, torch_dtype=DTYPE, device_map=DEVICE,
+    ).eval()
+    qwen_unredacted_processor = AutoProcessor.from_pretrained(QWEN_UNREDACTED_NAME)
+    print("Qwen3.5-2B-Unredacted-MAX model loaded successfully.")
+except Exception as e:
+    print(f"Warning: Qwen3.5-2B-Unredacted-MAX model loading failed. Error: {e}")
+    qwen_unredacted_model = None
+    qwen_unredacted_processor = None
+
 
 # --- Utility Functions ---
 def safe_parse_json(text: str):
@@ -151,6 +165,7 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3.5-4B model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
+
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -182,6 +197,7 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3.5-2B model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
+
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -213,6 +229,7 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3-VL model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
+
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -244,6 +261,7 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] LFM-450M model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
+
         conversation = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -272,6 +290,7 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] LFM-1.6B model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
+
         conversation = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -294,6 +313,38 @@ def generate_inference_stream(
                 yield f"data: {json.dumps({'chunk': tok})}\n\n"
         thread.join()
 
+    # ── Qwen3.5-2B-Unredacted-MAX ───────────────────────
+    elif model_id == "qwen_unredacted":
+        if qwen_unredacted_model is None or qwen_unredacted_processor is None:
+            yield f"data: {json.dumps({'chunk': '[Error] Qwen3.5-2B-Unredacted-MAX model not loaded.'})}\n\n"
+            yield "data: [DONE]\n\n"
+            return
+
+        messages = [{"role": "user", "content": [
+            {"type": "image", "image": image},
+            {"type": "text",  "text":  full_prompt},
+        ]}]
+        text_input = qwen_unredacted_processor.apply_chat_template(
+            messages, tokenize=False, add_generation_prompt=True
+        )
+        inputs = qwen_unredacted_processor(
+            text=[text_input], images=[image], return_tensors="pt", padding=True
+        ).to(qwen_unredacted_model.device)
+        streamer = TextIteratorStreamer(
+            qwen_unredacted_processor.tokenizer,
+            skip_prompt=True, skip_special_tokens=True, timeout=120,
+        )
+        thread = threading.Thread(
+            target=qwen_unredacted_model.generate,
+            kwargs=dict(**inputs, streamer=streamer, max_new_tokens=1024,
+                        use_cache=True, temperature=1.5, min_p=0.1),
+        )
+        thread.start()
+        for tok in streamer:
+            if tok:
+                yield f"data: {json.dumps({'chunk': tok})}\n\n"
+        thread.join()
+
     yield "data: [DONE]\n\n"
 
 
@@ -348,55 +399,51 @@ async def homepage(request: Request):
         * { box-sizing: border-box; margin: 0; padding: 0; }
 
         html, body {
-            width: 100%; height: 100%;
-            overflow: hidden;
+            min-height: 100%;
             background: var(--bg);
             color: var(--text);
             font-family: 'JetBrains Mono', monospace;
         }
 
+        body {
+            background-image:
+                radial-gradient(circle at 20% 50%, rgba(124,106,247,0.04) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(78,205,196,0.04) 0%, transparent 50%),
+                linear-gradient(var(--grid) 1px, transparent 1px),
+                linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+            background-size: 100% 100%, 100% 100%, 28px 28px, 28px 28px;
+            overflow-x: auto;
+            overflow-y: auto;
+        }
+
         /* ── Top Bar ── */
         .top-bar {
-            position: fixed; top: 0; left: 0; right: 0;
-            height: 42px;
-            background: rgba(13,13,15,0.97);
+            position: sticky; top: 0; left: 0; right: 0;
+            height: 50px;
+            background: rgba(13,13,15,0.95);
             border-bottom: 1px solid var(--node-border);
-            display: flex; align-items: center; padding: 0 20px;
-            gap: 12px; z-index: 2000;
+            display: flex; align-items: center; padding: 0 28px;
+            gap: 16px; 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: 15px; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; }
+        .top-bar .sep   { color: var(--node-border); font-size: 15px; }
+        .top-bar .sub   { font-size: 13px; color: var(--muted); }
         .top-bar .badge {
             margin-left: auto;
             background: rgba(124,106,247,0.15);
             border: 1px solid rgba(124,106,247,0.3);
-            padding: 3px 10px; border-radius: 20px;
-            font-size: 10px; color: var(--accent);
+            padding: 4px 14px; border-radius: 20px;
+            font-size: 11px; color: var(--accent);
         }
 
-        /* ── Viewport (the scrollable/zoomable area) ── */
-        #viewport {
-            position: fixed;
-            top: 42px; left: 0; right: 0; bottom: 0;
-            overflow: hidden;
-            cursor: default;
-        }
-
-        /* ── World (the zoomable container) ── */
-        #world {
-            position: absolute;
-            top: 0; left: 0;
-            width: 2400px;
-            height: 1600px;
-            transform-origin: 0 0;
-            background-image:
-                radial-gradient(circle at 20% 50%, rgba(124,106,247,0.04) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(78,205,196,0.04) 0%, transparent 50%),
-                linear-gradient(var(--grid) 1px, transparent 1px),
-                linear-gradient(90deg, var(--grid) 1px, transparent 1px);
-            background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
+        /* ── Canvas ── */
+        #canvas {
+            position: relative;
+            width: 1560px;
+            min-height: calc(100vh - 50px);
+            height: 1060px;
+            margin: 0 auto;
         }
 
         svg.wires {
@@ -419,26 +466,26 @@ async def homepage(request: Request):
         /* ── Nodes ── */
         .node {
             position: absolute;
-            width: 295px;
+            width: 340px;
             background: var(--node-bg);
             border: 1px solid var(--node-border);
-            border-radius: 9px;
-            box-shadow: 0 8px 28px rgba(0,0,0,0.5);
+            border-radius: 11px;
+            box-shadow: 0 10px 34px rgba(0,0,0,0.5);
             z-index: 10;
             display: flex; flex-direction: column;
             transition: box-shadow 0.2s;
         }
         .node:hover {
-            box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,106,247,0.3);
+            box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,106,247,0.3);
         }
-        .node.fixed-height { height: 330px; }
+        .node.fixed-height { height: 390px; }
 
         .node-header {
             background: var(--node-header);
-            padding: 7px 12px;
+            padding: 9px 14px;
             border-bottom: 1px solid var(--node-border);
-            border-radius: 9px 9px 0 0;
-            font-size: 11px; font-weight: 700;
+            border-radius: 11px 11px 0 0;
+            font-size: 13px; font-weight: 700;
             cursor: grab;
             display: flex; justify-content: space-between; align-items: center;
             flex-shrink: 0;
@@ -446,32 +493,32 @@ async def homepage(request: Request):
         }
         .node-header:active { cursor: grabbing; }
         .node-header .id {
-            font-size: 10px; color: var(--muted);
+            font-size: 11px; color: var(--muted);
             background: rgba(255,255,255,0.04);
-            padding: 2px 7px; border-radius: 4px;
+            padding: 3px 9px; border-radius: 5px;
         }
 
         .node-body {
-            padding: 10px;
-            display: flex; flex-direction: column; gap: 8px;
+            padding: 13px;
+            display: flex; flex-direction: column; gap: 10px;
             flex: 1; overflow: hidden;
         }
 
         /* ── Ports ── */
         .port {
             position: absolute;
-            width: 11px; height: 11px;
+            width: 13px; height: 13px;
             background: var(--node-bg);
             border: 2px solid var(--port);
             border-radius: 50%; z-index: 30;
         }
-        .port.out { right: -6px; }
-        .port.in  { left:  -6px; }
+        .port.out { right: -7px; }
+        .port.in  { left:  -7px; }
 
         /* ── Labels ── */
         label {
-            font-size: 10px; color: var(--muted);
-            font-weight: 600; display: block; margin-bottom: 3px;
+            font-size: 11px; color: var(--muted);
+            font-weight: 600; display: block; margin-bottom: 4px;
             letter-spacing: 0.07em; text-transform: uppercase;
         }
 
@@ -479,20 +526,20 @@ async def homepage(request: Request):
 
         .file-upload {
             border: 1.5px dashed var(--node-border);
-            border-radius: 7px; padding: 12px 10px;
+            border-radius: 8px; padding: 14px 12px;
             text-align: center; cursor: pointer;
-            font-size: 11px; color: var(--muted);
+            font-size: 12px; 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: 5px;
+            display: flex; flex-direction: column; align-items: center; gap: 6px;
         }
         .file-upload:hover { border-color: var(--accent); background: rgba(124,106,247,0.04); }
         .file-upload svg { opacity: 0.5; transition: opacity 0.2s; }
         .file-upload:hover svg { opacity: 0.9; }
 
         .img-preview {
-            width: 100%; height: 170px;
-            object-fit: contain; border-radius: 5px;
+            width: 100%; height: 200px;
+            object-fit: contain; border-radius: 6px;
             display: none; background: #000;
             border: 1px solid var(--node-border);
         }
@@ -501,9 +548,9 @@ async def homepage(request: Request):
             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;
-            font-size: 11px; font-family: 'JetBrains Mono', monospace;
+            color: var(--text); padding: 8px 11px;
+            border-radius: 6px; outline: none;
+            font-size: 12px; font-family: 'JetBrains Mono', monospace;
             resize: none; transition: border-color 0.2s;
         }
         select:focus, textarea:focus { border-color: var(--accent); }
@@ -512,12 +559,12 @@ async def homepage(request: Request):
         button.run-btn {
             background: linear-gradient(135deg, var(--accent), #9b59b6);
             color: #fff; border: none;
-            padding: 8px; border-radius: 6px;
-            font-weight: 700; font-size: 11px;
+            padding: 10px; border-radius: 7px;
+            font-weight: 700; font-size: 13px;
             font-family: 'JetBrains Mono', monospace;
             cursor: pointer;
             transition: opacity 0.2s, transform 0.1s;
-            display: flex; justify-content: center; align-items: center; gap: 8px;
+            display: flex; justify-content: center; align-items: center; gap: 10px;
             letter-spacing: 0.04em; flex-shrink: 0;
         }
         button.run-btn:hover   { opacity: 0.9; }
@@ -527,9 +574,9 @@ async def homepage(request: Request):
         .output-box {
             background: rgba(0,0,0,0.4);
             border: 1px solid var(--node-border);
-            border-radius: 5px; padding: 10px;
+            border-radius: 6px; padding: 12px;
             flex: 1; overflow-y: auto;
-            font-size: 11px; line-height: 1.6;
+            font-size: 12px; line-height: 1.65;
             color: #c8c8e0; white-space: pre-wrap;
             user-select: text;
             font-family: 'JetBrains Mono', monospace;
@@ -539,7 +586,7 @@ async def homepage(request: Request):
         .ground-canvas-wrap {
             position: relative; flex: 1;
             border: 1px solid var(--node-border);
-            border-radius: 5px; overflow: hidden;
+            border-radius: 6px; overflow: hidden;
             background: #000; min-height: 0;
         }
         .ground-canvas-wrap canvas {
@@ -549,11 +596,11 @@ async def homepage(request: Request):
         .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;
+            font-size: 12px; color: var(--muted); text-align: center; padding: 12px;
         }
 
         .loader {
-            width: 11px; height: 11px;
+            width: 13px; height: 13px;
             border: 2px solid rgba(255,255,255,0.3);
             border-top-color: #fff; border-radius: 50%;
             animation: spin 0.7s linear infinite;
@@ -562,15 +609,18 @@ async def homepage(request: Request):
         @keyframes spin { to { transform: rotate(360deg); } }
 
         .status-dot {
-            width: 6px; height: 6px; border-radius: 50%;
-            background: var(--muted); display: inline-block; margin-right: 6px;
+            width: 7px; height: 7px; border-radius: 50%;
+            background: var(--muted); display: inline-block; margin-right: 7px;
+        }
+        .status-dot.active {
+            background: var(--accent2);
+            box-shadow: 0 0 6px 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;
-            border-radius: 4px; font-size: 9px; font-weight: 700;
+            display: inline-block; padding: 3px 9px;
+            border-radius: 5px; font-size: 10px; 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); }
@@ -578,470 +628,167 @@ async def homepage(request: Request):
         .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-info-box {
-            border-radius: 6px; padding: 9px;
-            font-size: 10px; color: var(--muted); line-height: 1.55;
-            flex-shrink: 0;
-        }
-
-        /* ══════════════════════════════════════════
-           ZOOM CONTROLS  — fixed bottom-right
-        ══════════════════════════════════════════ */
-        .zoom-bar {
-            position: fixed;
-            bottom: 24px; right: 24px;
-            z-index: 3000;
-            display: flex; align-items: center; gap: 0;
-            background: rgba(19,19,26,0.92);
-            border: 1px solid var(--node-border);
-            border-radius: 10px;
-            backdrop-filter: blur(14px);
-            box-shadow: 0 8px 32px rgba(0,0,0,0.55);
-            overflow: hidden;
-            user-select: none;
-        }
-
-        .zoom-btn {
-            width: 36px; height: 36px;
-            display: flex; align-items: center; justify-content: center;
-            background: transparent;
-            border: none; cursor: pointer;
-            color: var(--muted);
-            font-size: 18px; font-weight: 700;
-            transition: background 0.15s, color 0.15s;
-            font-family: 'JetBrains Mono', monospace;
+            border-radius: 7px; padding: 11px;
+            font-size: 11px; color: var(--muted); line-height: 1.6;
             flex-shrink: 0;
         }
-        .zoom-btn:hover { background: rgba(124,106,247,0.15); color: var(--accent); }
-        .zoom-btn:active { background: rgba(124,106,247,0.28); }
 
-        .zoom-divider {
-            width: 1px; height: 20px;
-            background: var(--node-border);
-            flex-shrink: 0;
-        }
-
-        .zoom-track {
-            position: relative;
-            width: 100px; height: 36px;
-            display: flex; align-items: center;
-            padding: 0 10px;
-            cursor: pointer;
-        }
-        .zoom-track-bg {
-            width: 100%; height: 3px;
-            background: var(--node-border);
-            border-radius: 3px;
-            position: relative;
-        }
-        .zoom-track-fill {
-            position: absolute; left: 0; top: 0; height: 100%;
-            background: linear-gradient(90deg, var(--accent), var(--accent2));
-            border-radius: 3px;
-            transition: width 0.1s;
-        }
-        .zoom-thumb {
-            position: absolute;
-            width: 13px; height: 13px;
-            background: #fff;
-            border: 2px solid var(--accent);
-            border-radius: 50%;
-            top: 50%; transform: translateY(-50%);
-            box-shadow: 0 0 6px rgba(124,106,247,0.5);
-            transition: left 0.1s;
-            pointer-events: none;
-        }
-
-        .zoom-label {
-            min-width: 42px; height: 36px;
-            display: flex; align-items: center; justify-content: center;
-            font-size: 10px; font-weight: 700;
-            color: var(--accent);
-            font-family: 'JetBrains Mono', monospace;
-            letter-spacing: 0.04em;
-            border-left: 1px solid var(--node-border);
-            padding: 0 8px;
-        }
-
-        .zoom-reset {
-            height: 36px;
-            display: flex; align-items: center; justify-content: center;
-            background: transparent;
-            border: none; border-left: 1px solid var(--node-border);
-            cursor: pointer;
-            color: var(--muted);
-            font-size: 9px; font-weight: 700;
-            font-family: 'JetBrains Mono', monospace;
-            letter-spacing: 0.06em;
-            padding: 0 10px;
-            transition: background 0.15s, color 0.15s;
-            text-transform: uppercase;
-        }
-        .zoom-reset:hover { background: rgba(78,205,196,0.12); color: var(--accent2); }
+        .canvas-footer { height: 44px; }
     </style>
 </head>
 <body>
 
-<!-- Top Bar -->
 <div class="top-bar">
     <span class="logo">MULTIMODAL EDGE</span>
     <span class="sep">|</span>
     <span class="sub">Node-Based Inference Canvas</span>
-    <span class="badge">v2.3 — PENTA MODEL</span>
+    <span class="badge">v2.4 — HEXA MODEL</span>
 </div>
 
-<!-- Viewport + World -->
-<div id="viewport">
-    <div id="world">
-        <svg class="wires">
-            <path id="wire-img-task"   class="wire" />
-            <path id="wire-model-task" class="wire" />
-            <path id="wire-task-out"   class="wire" />
-            <path id="wire-task-gnd"   class="wire" />
-        </svg>
-
-        <!-- ─── ID 01 : Image Input ─── -->
-        <div class="node fixed-height" id="node-img" style="left:60px; top:60px;">
-            <div class="node-header">
-                <span><span class="status-dot" id="dot-img"></span>Input Image</span>
-                <span class="id">ID: 01</span>
-            </div>
-            <div class="node-body">
-                <div>
-                    <label>Upload Image</label>
-                    <div class="file-upload" id="dropZone">
-                        <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" ry="2"/>
-                            <circle cx="8.5" cy="8.5" r="1.5"/>
-                            <polyline points="21 15 16 10 5 21"/>
-                        </svg>
-                        <span>Click or drop image here</span>
-                        <input type="file" id="fileInput" accept="image/*">
-                    </div>
-                    <img id="imgPreview" class="img-preview" />
+<div id="canvas">
+    <svg class="wires">
+        <path id="wire-img-task"   class="wire" />
+        <path id="wire-model-task" class="wire" />
+        <path id="wire-task-out"   class="wire" />
+        <path id="wire-task-gnd"   class="wire" />
+    </svg>
+
+    <!-- ─── ID 01 : Image Input ─── -->
+    <div class="node fixed-height" id="node-img" style="left:48px; top:60px;">
+        <div class="node-header">
+            <span><span class="status-dot" id="dot-img"></span>Input Image</span>
+            <span class="id">ID: 01</span>
+        </div>
+        <div class="node-body">
+            <div>
+                <label>Upload Image</label>
+                <div class="file-upload" id="dropZone">
+                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none"
+                         stroke="#7c6af7" stroke-width="1.5"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                        <circle cx="8.5" cy="8.5" r="1.5"/>
+                        <polyline points="21 15 16 10 5 21"/>
+                    </svg>
+                    <span>Click or drop image here</span>
+                    <input type="file" id="fileInput" accept="image/*">
                 </div>
+                <img id="imgPreview" class="img-preview" />
             </div>
-            <div class="port out" id="port-img-out" style="top:50%;transform:translateY(-50%);"></div>
         </div>
+        <div class="port out" id="port-img-out" style="top:50%;transform:translateY(-50%);"></div>
+    </div>
 
-        <!-- ─── ID 02 : Model Selector ─── -->
-        <div class="node fixed-height" id="node-model" style="left:60px; top:410px;">
-            <div class="node-header">
-                <span><span class="status-dot" id="dot-model"></span>Model Selector</span>
-                <span class="id">ID: 02</span>
+    <!-- ─── ID 02 : Model Selector ─── -->
+    <div class="node fixed-height" id="node-model" style="left:48px; top:472px;">
+        <div class="node-header">
+            <span><span class="status-dot" id="dot-model"></span>Model Selector</span>
+            <span class="id">ID: 02</span>
+        </div>
+        <div class="node-body">
+            <div>
+                <label>Active Model</label>
+                <select id="modelSelect">
+                    <option value="qwen_4b">Qwen3.5-4B</option>
+                    <option value="qwen_2b">Qwen3.5-2B</option>
+                    <option value="qwen_vl">Qwen3-VL-2B-Instruct</option>
+                    <option value="lfm_450">LFM2.5-VL-450M (LiquidAI)</option>
+                    <option value="lfm_16">LFM2.5-VL-1.6B (LiquidAI)</option>
+                    <option value="qwen_unredacted">Qwen3.5-2B-Unredacted-MAX</option>
+                </select>
             </div>
-            <div class="node-body">
-                <div>
-                    <label>Active Model</label>
-                    <select id="modelSelect">
-                        <option value="qwen_4b">Qwen3.5-4B</option>
-                        <option value="qwen_2b">Qwen3.5-2B</option>
-                        <option value="qwen_vl">Qwen3-VL-2B-Instruct</option>
-                        <option value="lfm_450">LFM2.5-VL-450M (LiquidAI)</option>
-                        <option value="lfm_16">LFM2.5-VL-1.6B (LiquidAI)</option>
-                    </select>
-                </div>
-                <div id="modelInfoBox" class="model-info-box"
-                     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 multimodal model by Alibaba Cloud.
-                    Enhanced capacity over 2B — richer reasoning &amp; better instruction following.
-                </div>
-                <div style="flex:1;"></div>
+            <div id="modelInfoBox" class="model-info-box"
+                 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 multimodal model by Alibaba Cloud.
+                Enhanced capacity over 2B — richer reasoning, better instruction following.
             </div>
-            <div class="port out" id="port-model-out" style="top:50%;transform:translateY(-50%);"></div>
+            <div style="flex:1;"></div>
         </div>
+        <div class="port out" id="port-model-out" style="top:50%;transform:translateY(-50%);"></div>
+    </div>
 
-        <!-- ─── ID 03 : Task Config ─── -->
-        <div class="node fixed-height" id="node-task" style="left:450px; top:60px;">
-            <div class="port in" id="port-task-in" style="top:50%;transform:translateY(-50%);"></div>
-            <div class="node-header">
-                <span><span class="status-dot" id="dot-task"></span>Task Config</span>
-                <span class="id">ID: 03</span>
+    <!-- ─── ID 03 : Task Config ─── -->
+    <div class="node fixed-height" id="node-task" style="left:490px; top:60px;">
+        <div class="port in" id="port-task-in" style="top:50%;transform:translateY(-50%);"></div>
+        <div class="node-header">
+            <span><span class="status-dot" id="dot-task"></span>Task Config</span>
+            <span class="id">ID: 03</span>
+        </div>
+        <div class="node-body">
+            <div>
+                <label>Task Category</label>
+                <select id="categorySelect">
+                    <option value="Query">Query</option>
+                    <option value="Caption">Caption</option>
+                    <option value="Point">Point</option>
+                    <option value="Detect">Detect</option>
+                </select>
             </div>
-            <div class="node-body">
-                <div>
-                    <label>Task Category</label>
-                    <select id="categorySelect">
-                        <option value="Query">Query</option>
-                        <option value="Caption">Caption</option>
-                        <option value="Point">Point</option>
-                        <option value="Detect">Detect</option>
-                    </select>
-                </div>
-                <div>
-                    <label>Prompt Directive</label>
-                    <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 class="loader" id="btnLoader"></span>
-                </button>
+            <div>
+                <label>Prompt Directive</label>
+                <textarea id="promptInput" rows="5"
+                    placeholder="e.g., Count the total number of boats and describe the environment."></textarea>
             </div>
-            <div class="port out" id="port-task-out" style="top:50%;transform:translateY(-50%);"></div>
+            <button class="run-btn" id="runBtn">
+                <span>Execute</span>
+                <span class="loader" id="btnLoader"></span>
+            </button>
         </div>
+        <div class="port out" id="port-task-out" style="top:50%;transform:translateY(-50%);"></div>
+    </div>
 
-        <!-- ─── ID 04 : Output Stream ─── -->
-        <div class="node fixed-height" id="node-out" style="left:840px; top:60px;">
-            <div class="port in" id="port-out-in" style="top:50%;transform:translateY(-50%);"></div>
-            <div class="node-header">
-                <span><span class="status-dot" id="dot-out"></span>Output Stream</span>
-                <span class="id">ID: 04</span>
-            </div>
-            <div class="node-body">
-                <label>Streamed Result</label>
-                <div class="output-box" id="outputBox">Results will stream here...</div>
-            </div>
+    <!-- ─── ID 04 : Output Stream ─── -->
+    <div class="node fixed-height" id="node-out" style="left:932px; top:60px;">
+        <div class="port in" id="port-out-in" style="top:50%;transform:translateY(-50%);"></div>
+        <div class="node-header">
+            <span><span class="status-dot" id="dot-out"></span>Output Stream</span>
+            <span class="id">ID: 04</span>
+        </div>
+        <div class="node-body">
+            <label>Streamed Result</label>
+            <div class="output-box" id="outputBox">Results will stream here...</div>
         </div>
+    </div>
 
-        <!-- ─── ID 05 : Grounding Visualiser ─── -->
-        <div class="node fixed-height" id="node-gnd" style="left:840px; top:410px;">
-            <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>
-            </div>
-            <div class="node-body">
-                <label>Point / Detect Overlay</label>
-                <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.
-                    </div>
+    <!-- ─── ID 05 : Grounding Visualiser ─── -->
+    <div class="node fixed-height" id="node-gnd" style="left:932px; top:472px;">
+        <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>
+        </div>
+        <div class="node-body">
+            <label>Point / Detect Overlay</label>
+            <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.
                 </div>
             </div>
         </div>
-
-    </div><!-- /#world -->
-</div><!-- /#viewport -->
-
-<!-- ══ ZOOM BAR ══ -->
-<div class="zoom-bar" id="zoomBar">
-    <!-- Zoom out -->
-    <button class="zoom-btn" id="zoomOut" title="Zoom Out">
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
-             stroke="currentColor" stroke-width="2" stroke-linecap="round">
-            <line x1="2" y1="7" x2="12" y2="7"/>
-        </svg>
-    </button>
-
-    <div class="zoom-divider"></div>
-
-    <!-- Slider track -->
-    <div class="zoom-track" id="zoomTrack">
-        <div class="zoom-track-bg">
-            <div class="zoom-track-fill" id="zoomFill"></div>
-        </div>
-        <div class="zoom-thumb" id="zoomThumb"></div>
     </div>
 
-    <div class="zoom-divider"></div>
-
-    <!-- Zoom in -->
-    <button class="zoom-btn" id="zoomIn" title="Zoom In">
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
-             stroke="currentColor" stroke-width="2" stroke-linecap="round">
-            <line x1="7" y1="2" x2="7" y2="12"/>
-            <line x1="2" y1="7" x2="12" y2="7"/>
-        </svg>
-    </button>
-
-    <div class="zoom-divider"></div>
-
-    <!-- Percentage label -->
-    <div class="zoom-label" id="zoomLabel">100%</div>
-
-    <!-- Reset -->
-    <button class="zoom-reset" id="zoomReset" title="Reset Zoom">FIT</button>
+    <div class="canvas-footer"></div>
 </div>
 
 <script>
-// ══════════════════════════════════════════════════════════
-//  PAN + ZOOM ENGINE
-// ════════════════════════════���═════════════════════════════
-const viewport = document.getElementById('viewport');
-const world    = document.getElementById('world');
-
-const ZOOM_MIN  = 0.25;
-const ZOOM_MAX  = 2.0;
-const ZOOM_STEP = 0.1;
-
-let scale  = 1.0;
-let panX   = 0;
-let panY   = 0;
-let isPanning = false;
-let panStartX, panStartY, panOriginX, panOriginY;
-
-function clamp(v, lo, hi) { return Math.min(Math.max(v, lo), hi); }
-
-function applyTransform() {
-    world.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
-    updateZoomUI();
-    updateWires();
-}
-
-// Centre the canvas initially
-function fitToView() {
-    const vw = viewport.clientWidth;
-    const vh = viewport.clientHeight;
-    scale = clamp(Math.min(vw / 1360, vh / 800), ZOOM_MIN, ZOOM_MAX);
-    panX  = (vw - 1360 * scale) / 2;
-    panY  = (vh - 800  * scale) / 2;
-    applyTransform();
-}
-
-// ── Zoom toward a point ──
-function zoomAt(newScale, cx, cy) {
-    newScale = clamp(newScale, ZOOM_MIN, ZOOM_MAX);
-    const ratio = newScale / scale;
-    panX = cx - ratio * (cx - panX);
-    panY = cy - ratio * (cy - panY);
-    scale = newScale;
-    applyTransform();
-}
-
-// ── Mouse wheel ──
-viewport.addEventListener('wheel', e => {
-    e.preventDefault();
-    const rect = viewport.getBoundingClientRect();
-    const cx = e.clientX - rect.left;
-    const cy = e.clientY - rect.top;
-    const delta = e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP;
-    zoomAt(scale + delta, cx, cy);
-}, { passive: false });
-
-// ── Middle-mouse / space-drag pan ──
-let spaceDown = false;
-document.addEventListener('keydown', e => { if (e.code === 'Space') { spaceDown = true; viewport.style.cursor = 'grab'; } });
-document.addEventListener('keyup',   e => { if (e.code === 'Space') { spaceDown = false; viewport.style.cursor = 'default'; } });
-
-viewport.addEventListener('mousedown', e => {
-    if (e.button === 1 || spaceDown) {
-        e.preventDefault();
-        isPanning = true;
-        panStartX = e.clientX; panStartY = e.clientY;
-        panOriginX = panX; panOriginY = panY;
-        viewport.style.cursor = 'grabbing';
-    }
-});
-window.addEventListener('mousemove', e => {
-    if (!isPanning) return;
-    panX = panOriginX + (e.clientX - panStartX);
-    panY = panOriginY + (e.clientY - panStartY);
-    applyTransform();
-});
-window.addEventListener('mouseup', e => {
-    if (isPanning) {
-        isPanning = false;
-        viewport.style.cursor = spaceDown ? 'grab' : 'default';
-    }
-});
-
-// ── Touch pan / pinch ──
-let lastTouches = null;
-viewport.addEventListener('touchstart', e => {
-    lastTouches = e.touches;
-}, { passive: true });
-viewport.addEventListener('touchmove', e => {
-    e.preventDefault();
-    if (e.touches.length === 1 && lastTouches?.length === 1) {
-        const dx = e.touches[0].clientX - lastTouches[0].clientX;
-        const dy = e.touches[0].clientY - lastTouches[0].clientY;
-        panX += dx; panY += dy;
-        applyTransform();
-    } else if (e.touches.length === 2 && lastTouches?.length === 2) {
-        const d0 = Math.hypot(lastTouches[0].clientX - lastTouches[1].clientX,
-                              lastTouches[0].clientY - lastTouches[1].clientY);
-        const d1 = Math.hypot(e.touches[0].clientX - e.touches[1].clientX,
-                              e.touches[0].clientY - e.touches[1].clientY);
-        const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
-        const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
-        const rect = viewport.getBoundingClientRect();
-        zoomAt(scale * (d1 / d0), midX - rect.left, midY - rect.top);
-    }
-    lastTouches = e.touches;
-}, { passive: false });
-
-// ══════════════════════════════════════════════════════════
-//  ZOOM BAR UI
-// ══════════════════════════════════════════════════════════
-const zoomInBtn  = document.getElementById('zoomIn');
-const zoomOutBtn = document.getElementById('zoomOut');
-const zoomReset  = document.getElementById('zoomReset');
-const zoomLabel  = document.getElementById('zoomLabel');
-const zoomFill   = document.getElementById('zoomFill');
-const zoomThumb  = document.getElementById('zoomThumb');
-const zoomTrack  = document.getElementById('zoomTrack');
-
-function updateZoomUI() {
-    const pct   = Math.round(scale * 100);
-    zoomLabel.textContent = `${pct}%`;
-
-    // Map scale [ZOOM_MIN … ZOOM_MAX] → [0 … 100]
-    const t = (scale - ZOOM_MIN) / (ZOOM_MAX - ZOOM_MIN);
-    const trackW = zoomTrack.getBoundingClientRect().width || 100;
-    const thumbPx = t * (trackW - 20) + 10; // 10px padding each side
-
-    zoomFill.style.width  = `${t * 100}%`;
-    zoomThumb.style.left  = `${thumbPx}px`;
-}
-
-// Zoom in / out buttons
-zoomInBtn.addEventListener('click', () => {
-    const cx = viewport.clientWidth  / 2;
-    const cy = viewport.clientHeight / 2;
-    zoomAt(scale + ZOOM_STEP, cx, cy);
-});
-zoomOutBtn.addEventListener('click', () => {
-    const cx = viewport.clientWidth  / 2;
-    const cy = viewport.clientHeight / 2;
-    zoomAt(scale - ZOOM_STEP, cx, cy);
-});
-
-// Reset / fit
-zoomReset.addEventListener('click', fitToView);
-
-// Drag on the slider track
-let sliderDragging = false;
-zoomTrack.addEventListener('mousedown', e => {
-    sliderDragging = true;
-    handleSliderMove(e);
-    e.stopPropagation();
-});
-window.addEventListener('mousemove', e => {
-    if (!sliderDragging) return;
-    handleSliderMove(e);
-});
-window.addEventListener('mouseup', () => { sliderDragging = false; });
-
-function handleSliderMove(e) {
-    const rect = zoomTrack.getBoundingClientRect();
-    const t    = clamp((e.clientX - rect.left - 10) / (rect.width - 20), 0, 1);
-    const newScale = ZOOM_MIN + t * (ZOOM_MAX - ZOOM_MIN);
-    const cx = viewport.clientWidth  / 2;
-    const cy = viewport.clientHeight / 2;
-    zoomAt(newScale, cx, cy);
-}
-
 // ══════════════════════════════════════════════
-//  WIRE DRAWING  (world-relative)
+//  WIRE DRAWING
 // ══════════════════════════════════════════════
+const canvasEl = document.getElementById('canvas');
+
 function portCenter(id) {
     const el = document.getElementById(id);
     if (!el) return { x: 0, y: 0 };
-    // Get position relative to #world (un-transformed)
-    let ox = 0, oy = 0, cur = el;
-    while (cur && cur !== world) {
-        ox += cur.offsetLeft; oy += cur.offsetTop;
-        cur = cur.offsetParent;
-    }
+    const er = el.getBoundingClientRect();
+    const cr = canvasEl.getBoundingClientRect();
     return {
-        x: ox + el.offsetWidth  / 2,
-        y: oy + el.offsetHeight / 2,
+        x: er.left + er.width  / 2 - cr.left,
+        y: er.top  + er.height / 2 - cr.top
     };
 }
 
@@ -1051,51 +798,45 @@ function bezier(p1, p2) {
 }
 
 function updateWires() {
-    const pairs = [
+    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'],
     ];
-    for (const [id, from, to] of pairs) {
+    for (const [id, from, to] of wires) {
         const el = document.getElementById(id);
         if (el) el.setAttribute('d', bezier(portCenter(from), portCenter(to)));
     }
 }
 
 // ══════════════════════════════════════════════
-//  NODE DRAGGING
+//  DRAGGING
 // ══════════════════════════════════════════════
 document.querySelectorAll('.node').forEach(node => {
     const header = node.querySelector('.node-header');
-    let dragging = false, sx, sy, il, it;
-
+    let drag = false, sx, sy, il, it;
     header.addEventListener('mousedown', e => {
-        dragging = true;
-        sx = e.clientX; sy = e.clientY;
+        drag = true; sx = e.clientX; sy = e.clientY;
         il = parseInt(node.style.left) || 0;
         it = parseInt(node.style.top)  || 0;
-        node.style.zIndex = 100;
-        e.preventDefault();
-        e.stopPropagation(); // don't trigger pan
+        node.style.zIndex = 100; e.preventDefault();
     });
-    window.addEventListener('mousemove', e => {
-        if (!dragging) return;
-        // Account for current scale when dragging
-        node.style.left = `${il + (e.clientX - sx) / scale}px`;
-        node.style.top  = `${it + (e.clientY - sy) / scale}px`;
+    document.addEventListener('mousemove', e => {
+        if (!drag) return;
+        node.style.left = `${il + e.clientX - sx}px`;
+        node.style.top  = `${it + e.clientY - sy}px`;
         updateWires();
     });
-    window.addEventListener('mouseup', () => {
-        if (dragging) { dragging = false; node.style.zIndex = 10; }
+    document.addEventListener('mouseup', () => {
+        if (drag) { drag = false; node.style.zIndex = 10; }
     });
 });
 
-// ══════════════════════════════════════════════
-//  INIT
-// ══════════════════════════════════════════════
-window.addEventListener('resize', () => { applyTransform(); });
-requestAnimationFrame(() => { fitToView(); });
+window.addEventListener('resize', updateWires);
+window.addEventListener('scroll', updateWires);
+document.addEventListener('scroll', updateWires, true);
+requestAnimationFrame(updateWires);
 
 // ══════════════════════════════════════════════
 //  FILE UPLOAD
@@ -1138,40 +879,52 @@ const MODEL_INFO = {
         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)',
+        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: {
         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)',
+        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 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)',
     },
     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)',
     },
 };
 
 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.innerHTML              = info.html;
+    modelInfoBox.style.background       = info.bg;
+    modelInfoBox.style.border           = `1px solid ${info.border}`;
 };
 
 // ══════════════════════════════════════════════
@@ -1252,6 +1005,7 @@ 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];
 
@@ -1264,11 +1018,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.strokeStyle = col; gCtx.strokeRect(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);
+
                 const tw = gCtx.measureText(lbl).width;
                 const ph = fs*1.4, pw = tw+10;
                 const lx = x1, ly = Math.max(0, y1-ph);
@@ -1291,13 +1051,16 @@ function drawGrounding(imgSrc, jsonText) {
                 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.beginPath();
                 gCtx.arc(x, y, r, 0, Math.PI*2);
-                gCtx.fillStyle = col; gCtx.fill();
+                gCtx.fillStyle   = col; gCtx.fill();
                 gCtx.strokeStyle = '#fff'; gCtx.stroke();
+
                 gCtx.fillStyle = '#fff';
                 gCtx.fillText(lbl, x+r+4, y+fs*0.4);
             }