update app

app.py

@@ -16,12 +16,14 @@ from gradio import Server
 from fastapi import Request, UploadFile, File, Form
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 from transformers import (
+    Qwen2_5_VLForConditionalGeneration,
     Qwen3_5ForConditionalGeneration,
     Qwen3VLForConditionalGeneration,
     AutoProcessor,
     AutoModelForImageTextToText,
     TextIteratorStreamer,
 )
+from qwen_vl_utils import process_vision_info
 
 # --- App Configuration & Initialization ---
 app = Server()
@@ -39,6 +41,7 @@ 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"
+QWEN25_VL_3B_NAME       = "Qwen/Qwen2.5-VL-3B-Instruct"
 
 # ── Qwen3.5-4B ──────────────────────────────────────────
 print(f"Loading Qwen3.5-4B model: {QWEN_4B_MODEL_NAME} on {DEVICE}...")
@@ -126,6 +129,21 @@ except Exception as e:
     qwen_unredacted_model = None
     qwen_unredacted_processor = None
 
+# ── Qwen2.5-VL-3B-Instruct ──────────────────────────────
+print(f"Loading Qwen2.5-VL-3B-Instruct model: {QWEN25_VL_3B_NAME} on {DEVICE}...")
+try:
+    qwen25_vl_3b_model = Qwen2_5_VLForConditionalGeneration.from_pretrained(
+        QWEN25_VL_3B_NAME,
+        torch_dtype="auto",
+        device_map="auto",
+    ).eval()
+    qwen25_vl_3b_processor = AutoProcessor.from_pretrained(QWEN25_VL_3B_NAME)
+    print("Qwen2.5-VL-3B-Instruct model loaded successfully.")
+except Exception as e:
+    print(f"Warning: Qwen2.5-VL-3B-Instruct model loading failed. Error: {e}")
+    qwen25_vl_3b_model = None
+    qwen25_vl_3b_processor = None
+
 
 # --- Utility Functions ---
 def safe_parse_json(text: str):
@@ -339,6 +357,42 @@ def generate_inference_stream(
                 yield f"data: {json.dumps({'chunk': tok})}\n\n"
         thread.join()
 
+    # ── Qwen2.5-VL-3B-Instruct ──────────────────────────
+    elif model_id == "qwen25_vl_3b":
+        if qwen25_vl_3b_model is None or qwen25_vl_3b_processor is None:
+            yield f"data: {json.dumps({'chunk': '[Error] Qwen2.5-VL-3B-Instruct 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 = qwen25_vl_3b_processor.apply_chat_template(
+            messages, tokenize=False, add_generation_prompt=True
+        )
+        image_inputs, video_inputs = process_vision_info(messages)
+        inputs = qwen25_vl_3b_processor(
+            text=[text_input],
+            images=image_inputs,
+            videos=video_inputs,
+            return_tensors="pt",
+            padding=True,
+        ).to(qwen25_vl_3b_model.device)
+        streamer = TextIteratorStreamer(
+            qwen25_vl_3b_processor.tokenizer,
+            skip_prompt=True, skip_special_tokens=True, timeout=120,
+        )
+        thread = threading.Thread(
+            target=qwen25_vl_3b_model.generate,
+            kwargs=dict(**inputs, streamer=streamer, max_new_tokens=1024,
+                        use_cache=True, temperature=1.0, do_sample=True),
+        )
+        thread.start()
+        for tok in streamer:
+            if tok:
+                yield f"data: {json.dumps({'chunk': tok})}\n\n"
+        thread.join()
+
     yield "data: [DONE]\n\n"
 
 
@@ -405,7 +459,7 @@ async def homepage(request: Request):
                 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;
+            background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
             overflow-x: auto;
             overflow-y: auto;
         }
@@ -413,30 +467,30 @@ async def homepage(request: Request):
         /* ── Top Bar ── */
         .top-bar {
             position: sticky; top: 0; left: 0; right: 0;
-            height: 50px;
+            height: 56px;
             background: rgba(13,13,15,0.95);
             border-bottom: 1px solid var(--node-border);
-            display: flex; align-items: center; padding: 0 28px;
-            gap: 16px; z-index: 1000;
+            display: flex; align-items: center; padding: 0 36px;
+            gap: 18px; z-index: 1000;
             backdrop-filter: blur(12px);
         }
-        .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 .logo  { font-size: 17px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
+        .top-bar .sep   { color: var(--node-border); font-size: 17px; }
+        .top-bar .sub   { font-size: 14px; 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: 4px 14px; border-radius: 20px;
-            font-size: 11px; color: var(--accent);
+            padding: 5px 16px; border-radius: 20px;
+            font-size: 12px; color: var(--accent);
         }
 
         /* ── Canvas ── */
         #canvas {
             position: relative;
-            width: 1560px;
-            min-height: calc(100vh - 50px);
-            height: 1080px;
+            width: 1760px;
+            min-height: calc(100vh - 56px);
+            height: 1180px;
             margin: 0 auto;
         }
 
@@ -460,26 +514,27 @@ async def homepage(request: Request):
         /* ── Nodes ── */
         .node {
             position: absolute;
-            width: 340px;
+            width: 380px;
             background: var(--node-bg);
             border: 1px solid var(--node-border);
-            border-radius: 11px;
-            box-shadow: 0 10px 34px rgba(0,0,0,0.5);
+            border-radius: 13px;
+            box-shadow: 0 12px 38px rgba(0,0,0,0.55);
             z-index: 10;
             display: flex; flex-direction: column;
             transition: box-shadow 0.2s;
         }
         .node:hover {
-            box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,106,247,0.3);
+            box-shadow: 0 12px 38px rgba(0,0,0,0.55),
+                        0 0 0 1px rgba(124,106,247,0.35);
         }
-        .node.fixed-height { height: 420px; }
+        .node.fixed-height { height: 470px; }
 
         .node-header {
             background: var(--node-header);
-            padding: 9px 14px;
+            padding: 11px 16px;
             border-bottom: 1px solid var(--node-border);
-            border-radius: 11px 11px 0 0;
-            font-size: 13px; font-weight: 700;
+            border-radius: 13px 13px 0 0;
+            font-size: 14px; font-weight: 700;
             cursor: grab;
             display: flex; justify-content: space-between; align-items: center;
             flex-shrink: 0;
@@ -487,32 +542,32 @@ async def homepage(request: Request):
         }
         .node-header:active { cursor: grabbing; }
         .node-header .id {
-            font-size: 11px; color: var(--muted);
+            font-size: 12px; color: var(--muted);
             background: rgba(255,255,255,0.04);
-            padding: 3px 9px; border-radius: 5px;
+            padding: 3px 10px; border-radius: 6px;
         }
 
         .node-body {
-            padding: 13px;
-            display: flex; flex-direction: column; gap: 10px;
+            padding: 15px;
+            display: flex; flex-direction: column; gap: 12px;
             flex: 1; overflow: hidden;
         }
 
         /* ── Ports ── */
         .port {
             position: absolute;
-            width: 13px; height: 13px;
+            width: 15px; height: 15px;
             background: var(--node-bg);
             border: 2px solid var(--port);
             border-radius: 50%; z-index: 30;
         }
-        .port.out { right: -7px; }
-        .port.in  { left:  -7px; }
+        .port.out { right: -8px; }
+        .port.in  { left:  -8px; }
 
         /* ── Labels ── */
         label {
-            font-size: 11px; color: var(--muted);
-            font-weight: 600; display: block; margin-bottom: 4px;
+            font-size: 12px; color: var(--muted);
+            font-weight: 600; display: block; margin-bottom: 5px;
             letter-spacing: 0.07em; text-transform: uppercase;
         }
 
@@ -526,12 +581,12 @@ async def homepage(request: Request):
 
         .file-upload {
             border: 1.5px dashed var(--node-border);
-            border-radius: 8px; padding: 18px 12px;
+            border-radius: 10px; padding: 22px 14px;
             text-align: center; cursor: pointer;
-            font-size: 12px; color: var(--muted);
+            font-size: 13px; 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: 6px;
+            display: flex; flex-direction: column; align-items: center; gap: 8px;
         }
         .file-upload:hover {
             border-color: var(--accent);
@@ -544,7 +599,7 @@ async def homepage(request: Request):
         .preview-wrap {
             display: none;
             position: relative;
-            border-radius: 8px;
+            border-radius: 10px;
             overflow: hidden;
             border: 1px solid var(--node-border);
             background: #000;
@@ -553,16 +608,16 @@ async def homepage(request: Request):
 
         .img-preview {
             width: 100%;
-            height: 210px;
+            height: 235px;
             object-fit: contain;
             display: block;
         }
 
-        /* ── Clear button overlaid on preview ── */
+        /* ── Clear button ── */
         .clear-btn {
             position: absolute;
-            top: 7px; right: 7px;
-            width: 28px; height: 28px;
+            top: 8px; right: 8px;
+            width: 32px; height: 32px;
             border-radius: 50%;
             background: rgba(13,13,15,0.82);
             border: 1px solid var(--node-border);
@@ -574,44 +629,44 @@ async def homepage(request: Request):
             backdrop-filter: blur(6px);
         }
         .clear-btn:hover {
-            background: rgba(255,107,107,0.18);
+            background: rgba(255,107,107,0.20);
             border-color: var(--accent3);
             transform: scale(1.08);
         }
-        .clear-btn:active { transform: scale(0.96); }
+        .clear-btn:active { transform: scale(0.95); }
         .clear-btn svg { pointer-events: none; }
 
-        /* ── Image filename chip ── */
+        /* ── Filename chip ── */
         .img-chip {
             display: none;
-            align-items: center; gap: 7px;
+            align-items: center; gap: 8px;
             background: rgba(124,106,247,0.08);
             border: 1px solid rgba(124,106,247,0.22);
-            border-radius: 6px;
-            padding: 5px 10px;
-            font-size: 10px; color: var(--muted);
+            border-radius: 7px;
+            padding: 6px 12px;
+            font-size: 11px; color: var(--muted);
             overflow: hidden;
         }
         .img-chip.visible { display: flex; }
         .img-chip .chip-dot {
-            width: 6px; height: 6px; border-radius: 50%;
+            width: 7px; height: 7px; border-radius: 50%;
             background: var(--accent2); flex-shrink: 0;
-            box-shadow: 0 0 5px var(--accent2);
+            box-shadow: 0 0 6px var(--accent2);
         }
         .img-chip .chip-name {
             overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; flex: 1;
-            color: var(--text);
+            color: var(--text); font-size: 11px;
         }
-        .img-chip .chip-size { color: var(--muted); flex-shrink: 0; }
+        .img-chip .chip-size { color: var(--muted); flex-shrink: 0; font-size: 11px; }
 
         select, textarea {
             width: 100%;
             background: rgba(0,0,0,0.3);
             border: 1px solid var(--node-border);
-            color: var(--text); padding: 8px 11px;
-            border-radius: 6px; outline: none;
-            font-size: 12px; font-family: 'JetBrains Mono', monospace;
+            color: var(--text); padding: 9px 13px;
+            border-radius: 7px; outline: none;
+            font-size: 13px; font-family: 'JetBrains Mono', monospace;
             resize: none; transition: border-color 0.2s;
         }
         select:focus, textarea:focus { border-color: var(--accent); }
@@ -620,13 +675,13 @@ async def homepage(request: Request):
         button.run-btn {
             background: linear-gradient(135deg, var(--accent), #9b59b6);
             color: #fff; border: none;
-            padding: 10px; border-radius: 7px;
-            font-weight: 700; font-size: 13px;
+            padding: 12px; border-radius: 8px;
+            font-weight: 700; font-size: 14px;
             font-family: 'JetBrains Mono', monospace;
             cursor: pointer;
             transition: opacity 0.2s, transform 0.1s;
             display: flex; justify-content: center; align-items: center; gap: 10px;
-            letter-spacing: 0.04em; flex-shrink: 0;
+            letter-spacing: 0.05em; flex-shrink: 0;
         }
         button.run-btn:hover   { opacity: 0.9; }
         button.run-btn:active  { transform: scale(0.98); }
@@ -637,9 +692,9 @@ async def homepage(request: Request):
         .output-box {
             background: rgba(0,0,0,0.4);
             border: 1px solid var(--node-border);
-            border-radius: 6px; padding: 12px;
+            border-radius: 7px; padding: 14px;
             flex: 1; overflow-y: auto;
-            font-size: 12px; line-height: 1.65;
+            font-size: 13px; line-height: 1.7;
             color: #c8c8e0; white-space: pre-wrap;
             user-select: text;
             font-family: 'JetBrains Mono', monospace;
@@ -649,7 +704,7 @@ async def homepage(request: Request):
         .ground-canvas-wrap {
             position: relative; flex: 1;
             border: 1px solid var(--node-border);
-            border-radius: 6px; overflow: hidden;
+            border-radius: 7px; overflow: hidden;
             background: #000; min-height: 0;
         }
         .ground-canvas-wrap canvas {
@@ -659,11 +714,11 @@ async def homepage(request: Request):
         .ground-placeholder {
             position: absolute; inset: 0;
             display: flex; align-items: center; justify-content: center;
-            font-size: 12px; color: var(--muted); text-align: center; padding: 12px;
+            font-size: 13px; color: var(--muted); text-align: center; padding: 14px;
         }
 
         .loader {
-            width: 13px; height: 13px;
+            width: 15px; height: 15px;
             border: 2px solid rgba(255,255,255,0.3);
             border-top-color: #fff; border-radius: 50%;
             animation: spin 0.7s linear infinite;
@@ -672,34 +727,35 @@ async def homepage(request: Request):
         @keyframes spin { to { transform: rotate(360deg); } }
 
         .status-dot {
-            width: 7px; height: 7px; border-radius: 50%;
-            background: var(--muted); display: inline-block; margin-right: 7px;
+            width: 8px; height: 8px; border-radius: 50%;
+            background: var(--muted); display: inline-block; margin-right: 8px;
         }
         .status-dot.active {
             background: var(--accent2);
-            box-shadow: 0 0 6px var(--accent2);
+            box-shadow: 0 0 7px var(--accent2);
         }
 
         /* ── Model badges ── */
         .model-badge {
-            display: inline-block; padding: 3px 9px;
-            border-radius: 5px; font-size: 10px; font-weight: 700;
-            letter-spacing: 0.06em; text-transform: uppercase;
+            display: inline-block; padding: 3px 10px;
+            border-radius: 6px; font-size: 10px; font-weight: 700;
+            letter-spacing: 0.07em; 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.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: 7px; padding: 11px;
-            font-size: 11px; color: var(--muted); line-height: 1.6;
+            border-radius: 8px; padding: 13px;
+            font-size: 12px; color: var(--muted); line-height: 1.65;
             flex-shrink: 0;
         }
 
-        .canvas-footer { height: 44px; }
+        .canvas-footer { height: 50px; }
     </style>
 </head>
 <body>
@@ -708,7 +764,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.4 — HEXA MODEL</span>
+    <span class="badge">v2.5 — HEPTA MODEL</span>
 </div>
 
 <div id="canvas">
@@ -720,7 +776,7 @@ async def homepage(request: Request):
     </svg>
 
     <!-- ─── ID 01 : Image Input ─── -->
-    <div class="node fixed-height" id="node-img" style="left:48px; top:60px;">
+    <div class="node fixed-height" id="node-img" style="left:55px; top:70px;">
         <div class="node-header">
             <span><span class="status-dot" id="dot-img"></span>Input Image</span>
             <span class="id">ID: 01</span>
@@ -729,9 +785,9 @@ async def homepage(request: Request):
             <div>
                 <label>Upload Image</label>
 
-                <!-- Drop zone (shown when no image) -->
+                <!-- Drop zone -->
                 <div class="file-upload" id="dropZone">
-                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none"
+                    <svg width="38" height="38" 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"/>
@@ -742,12 +798,11 @@ async def homepage(request: Request):
                     <input type="file" id="fileInput" accept="image/*">
                 </div>
 
-                <!-- Preview (shown when image loaded) -->
+                <!-- Preview -->
                 <div class="preview-wrap" id="previewWrap">
                     <img id="imgPreview" class="img-preview" />
-                    <!-- Clear button -->
                     <button class="clear-btn" id="clearBtn" title="Remove image">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                        <svg width="15" height="15" 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"/>
@@ -757,7 +812,7 @@ async def homepage(request: Request):
                 </div>
 
                 <!-- Filename chip -->
-                <div class="img-chip" id="imgChip" style="margin-top:7px;">
+                <div class="img-chip" id="imgChip" style="margin-top:8px;">
                     <span class="chip-dot"></span>
                     <span class="chip-name" id="chipName">—</span>
                     <span class="chip-size" id="chipSize"></span>
@@ -768,7 +823,7 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 02 : Model Selector ─── -->
-    <div class="node fixed-height" id="node-model" style="left:48px; top:502px;">
+    <div class="node fixed-height" id="node-model" style="left:55px; top:562px;">
         <div class="node-header">
             <span><span class="status-dot" id="dot-model"></span>Model Selector</span>
             <span class="id">ID: 02</span>
@@ -783,6 +838,7 @@ async def homepage(request: Request):
                     <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>
+                    <option value="qwen25_vl_3b">Qwen2.5-VL-3B-Instruct</option>
                 </select>
             </div>
             <div id="modelInfoBox" class="model-info-box"
@@ -797,7 +853,7 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 03 : Task Config ─── -->
-    <div class="node fixed-height" id="node-task" style="left:490px; top:60px;">
+    <div class="node fixed-height" id="node-task" style="left:548px; top:70px;">
         <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>
@@ -815,7 +871,7 @@ async def homepage(request: Request):
             </div>
             <div>
                 <label>Prompt Directive</label>
-                <textarea id="promptInput" rows="5"
+                <textarea id="promptInput" rows="6"
                     placeholder="e.g., Count the total number of boats and describe the environment."></textarea>
             </div>
             <button class="run-btn" id="runBtn">
@@ -827,7 +883,7 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 04 : Output Stream ─── -->
-    <div class="node fixed-height" id="node-out" style="left:932px; top:60px;">
+    <div class="node fixed-height" id="node-out" style="left:1042px; top:70px;">
         <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>
@@ -840,7 +896,7 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 05 : Grounding Visualiser ─── -->
-    <div class="node fixed-height" id="node-gnd" style="left:932px; top:502px;">
+    <div class="node fixed-height" id="node-gnd" style="left:1042px; top:562px;">
         <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>
@@ -884,10 +940,10 @@ function bezier(p1, p2) {
 
 function updateWires() {
     const wires = [
-        ['wire-img-task',   'port-img-out',   'port-task-in'],
-        ['wire-model-task', 'port-model-out',  'port-task-in'],
-        ['wire-task-out',   'port-task-out',   'port-out-in'],
-        ['wire-task-gnd',   'port-task-out',   'port-gnd-in'],
+        ['wire-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 wires) {
         const el = document.getElementById(id);
@@ -928,64 +984,51 @@ requestAnimationFrame(updateWires);
 // ══════════════════════════════════════════════
 let currentFile = null;
 
-const dropZone   = document.getElementById('dropZone');
-const fileInput  = document.getElementById('fileInput');
-const previewWrap= document.getElementById('previewWrap');
-const imgPreview = document.getElementById('imgPreview');
-const clearBtn   = document.getElementById('clearBtn');
-const imgChip    = document.getElementById('imgChip');
-const chipName   = document.getElementById('chipName');
-const chipSize   = document.getElementById('chipSize');
-const dotImg     = document.getElementById('dot-img');
+const dropZone    = document.getElementById('dropZone');
+const fileInput   = document.getElementById('fileInput');
+const previewWrap = document.getElementById('previewWrap');
+const imgPreview  = document.getElementById('imgPreview');
+const clearBtn    = document.getElementById('clearBtn');
+const imgChip     = document.getElementById('imgChip');
+const chipName    = document.getElementById('chipName');
+const chipSize    = document.getElementById('chipSize');
+const dotImg      = document.getElementById('dot-img');
 
 function formatBytes(bytes) {
     if (bytes < 1024)       return bytes + ' B';
-    if (bytes < 1024*1024)  return (bytes/1024).toFixed(1) + ' KB';
-    return (bytes/(1024*1024)).toFixed(1) + ' MB';
+    if (bytes < 1048576)    return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
 }
 
 function handleFile(file) {
     if (!file || !file.type.startsWith('image/')) return;
     currentFile = file;
-
-    // preview
     imgPreview.src = URL.createObjectURL(file);
     previewWrap.classList.add('visible');
     dropZone.style.display = 'none';
-
-    // chip
     chipName.textContent = file.name;
     chipSize.textContent = formatBytes(file.size);
     imgChip.classList.add('visible');
-
     dotImg.classList.add('active');
     requestAnimationFrame(updateWires);
 }
 
 function clearImage() {
     currentFile = null;
-
-    // reset preview
     imgPreview.src = '';
     previewWrap.classList.remove('visible');
     dropZone.style.display = '';
-
-    // reset chip
     imgChip.classList.remove('visible');
     chipName.textContent = '—';
     chipSize.textContent = '';
-
-    // reset file input so same file can be re-selected
     fileInput.value = '';
-
     dotImg.classList.remove('active');
     requestAnimationFrame(updateWires);
 }
 
 dropZone.onclick     = () => fileInput.click();
 fileInput.onchange   = e  => handleFile(e.target.files[0]);
-clearBtn.onclick     = (e) => { e.stopPropagation(); clearImage(); };
-
+clearBtn.onclick     = e  => { e.stopPropagation(); clearImage(); };
 dropZone.ondragover  = e  => { e.preventDefault(); dropZone.style.borderColor = 'var(--accent)'; };
 dropZone.ondragleave = ()  => { dropZone.style.borderColor = ''; };
 dropZone.ondrop      = e  => {
@@ -1044,14 +1087,21 @@ const MODEL_INFO = {
         bg:     'rgba(255,80,160,0.07)',
         border: 'rgba(255,80,160,0.25)',
     },
+    qwen25_vl_3b: {
+        html:   `<span class="model-badge q25vl3b">QWEN 2.5-VL · 3B</span><br><br>
+                 Qwen2.5-VL-3B-Instruct by Alibaba Cloud. Powerful 3B vision-language model
+                 with strong grounding, OCR &amp; multi-task visual reasoning via qwen_vl_utils.`,
+        bg:     'rgba(80,180,255,0.07)',
+        border: 'rgba(80,180,255,0.25)',
+    },
 };
 
 modelSelect.onchange = () => {
     const info = MODEL_INFO[modelSelect.value];
     if (!info) return;
     modelInfoBox.innerHTML = info.html;
-    modelInfoBox.style.background  = info.bg;
-    modelInfoBox.style.border      = `1px solid ${info.border}`;
+    modelInfoBox.style.background = info.bg;
+    modelInfoBox.style.border     = `1px solid ${info.border}`;
 };
 
 // ══════════════════════════════════════════════
@@ -1127,7 +1177,7 @@ function drawGrounding(imgSrc, jsonText) {
         groundPlaceholder.style.display = 'none';
 
         const lw = Math.max(2, W/200);
-        const fs = Math.max(12, W/40);
+        const fs = Math.max(13, W/40);
         gCtx.lineWidth = lw;
         gCtx.font      = `bold ${fs}px JetBrains Mono, monospace`;
 
@@ -1157,12 +1207,12 @@ function drawGrounding(imgSrc, jsonText) {
                 gCtx.strokeRect(x1, y1, bw, bh);
 
                 const tw = gCtx.measureText(lbl).width;
-                const ph = fs*1.4, pw = tw+10;
+                const ph = fs*1.4, pw = tw+12;
                 const lx = x1, ly = Math.max(0, y1-ph);
                 gCtx.fillStyle = col;
-                roundRect(gCtx, lx, ly, pw, ph, 4); gCtx.fill();
+                roundRect(gCtx, lx, ly, pw, ph, 5); gCtx.fill();
                 gCtx.fillStyle = '#fff';
-                gCtx.fillText(lbl, lx+5, ly+ph*0.76);
+                gCtx.fillText(lbl, lx+6, ly+ph*0.76);
                 return;
             }
 
@@ -1176,7 +1226,7 @@ function drawGrounding(imgSrc, jsonText) {
             if (pt) {
                 let [x,y] = pt;
                 if (x <= 1 && y <= 1) { x*=W; y*=H; }
-                const r   = Math.max(8, W/60);
+                const r   = Math.max(9, W/60);
                 const lbl = item?.label || `${i+1}`;
 
                 gCtx.beginPath();
@@ -1189,7 +1239,7 @@ function drawGrounding(imgSrc, jsonText) {
                 gCtx.strokeStyle = '#fff'; gCtx.stroke();
 
                 gCtx.fillStyle = '#fff';
-                gCtx.fillText(lbl, x+r+4, y+fs*0.4);
+                gCtx.fillText(lbl, x+r+5, y+fs*0.4);
             }
         });
     };