update app

app.py

@@ -17,6 +17,7 @@ from fastapi import Request, UploadFile, File, Form
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 from transformers import (
     Qwen3_5ForConditionalGeneration,
+    Qwen3VLForConditionalGeneration,
     AutoProcessor,
     AutoModelForImageTextToText,
     TextIteratorStreamer,
@@ -32,22 +33,41 @@ DTYPE = (
     else torch.float16
 )
 
-QWEN_MODEL_NAME = "Qwen/Qwen3.5-2B"
-LFM_MODEL_NAME = "LiquidAI/LFM2.5-VL-450M"
-CATEGORIES = ["Query", "Caption", "Point", "Detect"]
+QWEN_MODEL_NAME    = "Qwen/Qwen3.5-2B"
+QWEN_VL_MODEL_NAME = "Qwen/Qwen3-VL-2B-Instruct"
+LFM_MODEL_NAME     = "LiquidAI/LFM2.5-VL-450M"
 
-print(f"Loading Qwen model: {QWEN_MODEL_NAME} on {DEVICE}...")
+# ── Qwen3.5-2B ──────────────────────────────────────────
+print(f"Loading Qwen3.5 model: {QWEN_MODEL_NAME} on {DEVICE}...")
 try:
     qwen_model = Qwen3_5ForConditionalGeneration.from_pretrained(
         QWEN_MODEL_NAME, torch_dtype=DTYPE, device_map=DEVICE,
     ).eval()
     qwen_processor = AutoProcessor.from_pretrained(QWEN_MODEL_NAME)
-    print("Qwen model loaded successfully.")
+    print("Qwen3.5 model loaded successfully.")
 except Exception as e:
-    print(f"Warning: Qwen model loading failed. Error: {e}")
+    print(f"Warning: Qwen3.5 model loading failed. Error: {e}")
     qwen_model = None
     qwen_processor = None
 
+# ── Qwen3-VL-2B-Instruct ────────────────────────────────
+print(f"Loading Qwen3-VL model: {QWEN_VL_MODEL_NAME} on {DEVICE}...")
+try:
+    qwen_vl_model = Qwen3VLForConditionalGeneration.from_pretrained(
+        QWEN_VL_MODEL_NAME,
+        trust_remote_code=True,
+        torch_dtype=torch.bfloat16,
+    ).to(DEVICE).eval()
+    qwen_vl_processor = AutoProcessor.from_pretrained(
+        QWEN_VL_MODEL_NAME, trust_remote_code=True
+    )
+    print("Qwen3-VL model loaded successfully.")
+except Exception as e:
+    print(f"Warning: Qwen3-VL model loading failed. Error: {e}")
+    qwen_vl_model = None
+    qwen_vl_processor = None
+
+# ── LFM2.5-VL-450M ──────────────────────────────────────
 print(f"Loading LFM model: {LFM_MODEL_NAME} on {DEVICE}...")
 try:
     lfm_model = AutoModelForImageTextToText.from_pretrained(
@@ -81,7 +101,9 @@ def safe_parse_json(text: str):
 
 # --- Inference Generator (Streaming) ---
 @spaces.GPU(duration=120)
-def generate_inference_stream(image: Image.Image, category: str, prompt: str, model_id: str = "qwen"):
+def generate_inference_stream(
+    image: Image.Image, category: str, prompt: str, model_id: str = "qwen"
+):
     if category == "Query":
         full_prompt = prompt
     elif category == "Caption":
@@ -93,7 +115,55 @@ def generate_inference_stream(image: Image.Image, category: str, prompt: str, mo
     else:
         full_prompt = prompt
 
-    if model_id == "lfm":
+    # ── Qwen3-VL ────────────────────────────────────────
+    if model_id == "qwen_vl":
+        if qwen_vl_model is None or qwen_vl_processor is None:
+            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},
+                ],
+            }
+        ]
+
+        text_input = qwen_vl_processor.apply_chat_template(
+            messages, tokenize=False, add_generation_prompt=True
+        )
+        inputs = qwen_vl_processor(
+            text=[text_input], images=[image], return_tensors="pt", padding=True
+        ).to(qwen_vl_model.device)
+
+        streamer = TextIteratorStreamer(
+            qwen_vl_processor.tokenizer,
+            skip_prompt=True,
+            skip_special_tokens=True,
+            timeout=120,
+        )
+        thread = threading.Thread(
+            target=qwen_vl_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()
+
+    # ── LFM ─────────────────────────────────────────────
+    elif model_id == "lfm":
         if lfm_model is None or lfm_processor is None:
             yield f"data: {json.dumps({'chunk': '[Error] LFM model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
@@ -104,11 +174,10 @@ def generate_inference_stream(image: Image.Image, category: str, prompt: str, mo
                 "role": "user",
                 "content": [
                     {"type": "image", "image": image},
-                    {"type": "text", "text": full_prompt},
+                    {"type": "text",  "text":  full_prompt},
                 ],
             }
         ]
-
         inputs = lfm_processor.apply_chat_template(
             conversation,
             add_generation_prompt=True,
@@ -123,7 +192,6 @@ def generate_inference_stream(image: Image.Image, category: str, prompt: str, mo
             skip_special_tokens=True,
             timeout=120,
         )
-
         thread = threading.Thread(
             target=lfm_model.generate,
             kwargs=dict(
@@ -139,9 +207,10 @@ def generate_inference_stream(image: Image.Image, category: str, prompt: str, mo
                 yield f"data: {json.dumps({'chunk': tok})}\n\n"
         thread.join()
 
+    # ── Qwen3.5-2B (default) ────────────────────────────
     else:
         if qwen_model is None or qwen_processor is None:
-            yield f"data: {json.dumps({'chunk': '[Error] Qwen model not loaded.'})}\n\n"
+            yield f"data: {json.dumps({'chunk': '[Error] Qwen3.5 model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
 
@@ -150,15 +219,13 @@ def generate_inference_stream(image: Image.Image, category: str, prompt: str, mo
                 "role": "user",
                 "content": [
                     {"type": "image", "image": image},
-                    {"type": "text", "text": full_prompt},
+                    {"type": "text",  "text":  full_prompt},
                 ],
             }
         ]
-
         text_input = qwen_processor.apply_chat_template(
             messages, tokenize=False, add_generation_prompt=True
         )
-
         inputs = qwen_processor(
             text=[text_input], images=[image], return_tensors="pt", padding=True
         ).to(qwen_model.device)
@@ -169,7 +236,6 @@ def generate_inference_stream(image: Image.Image, category: str, prompt: str, mo
             skip_special_tokens=True,
             timeout=120,
         )
-
         thread = threading.Thread(
             target=qwen_model.generate,
             kwargs=dict(
@@ -193,10 +259,10 @@ def generate_inference_stream(image: Image.Image, category: str, prompt: str, mo
 # --- FastAPI Endpoints ---
 @app.post("/api/run")
 async def run_inference(
-    image: UploadFile = File(...),
-    category: str = Form(...),
-    prompt: str = Form(...),
-    model_id: str = Form("qwen"),
+    image:    UploadFile = File(...),
+    category: str        = Form(...),
+    prompt:   str        = Form(...),
+    model_id: str        = Form("qwen"),
 ):
     try:
         img_bytes = await image.read()
@@ -205,7 +271,7 @@ async def run_inference(
 
         return StreamingResponse(
             generate_inference_stream(img, category, prompt, model_id),
-            media_type="text/event-stream"
+            media_type="text/event-stream",
         )
     except Exception as e:
         return JSONResponse({"error": str(e)}, status_code=500)
@@ -224,18 +290,18 @@ async def homepage(request: Request):
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg: #0d0d0f;
-            --grid: #1a1a1f;
-            --node-bg: #13131a;
+            --bg:          #0d0d0f;
+            --grid:        #1a1a1f;
+            --node-bg:     #13131a;
             --node-header: #1c1c26;
             --node-border: #2a2a3a;
-            --accent: #7c6af7;
-            --accent2: #4ecdc4;
-            --accent3: #ff6b6b;
-            --text: #e8e8f0;
-            --muted: #6b6b8a;
-            --port: #4ecdc4;
-            --wire: #2a2a4a;
+            --accent:      #7c6af7;
+            --accent2:     #4ecdc4;
+            --accent3:     #ff6b6b;
+            --text:        #e8e8f0;
+            --muted:       #6b6b8a;
+            --port:        #4ecdc4;
+            --wire:        #2a2a4a;
             --wire-active: #7c6af7;
         }
 
@@ -259,10 +325,10 @@ async def homepage(request: Request):
             overflow-y: auto;
         }
 
+        /* ── Top Bar ── */
         .top-bar {
-            position: sticky;
-            top: 0; left: 0; right: 0;
-            height: 48px;
+            position: sticky; top: 0; left: 0; right: 0;
+            height: 44px;
             background: rgba(13,13,15,0.95);
             border-bottom: 1px solid var(--node-border);
             display: flex; align-items: center; padding: 0 20px;
@@ -270,21 +336,22 @@ async def homepage(request: Request):
             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 .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.15);
             border: 1px solid rgba(124,106,247,0.3);
-            padding: 3px 10px;
-            border-radius: 20px; font-size: 10px; color: var(--accent);
+            padding: 3px 10px; border-radius: 20px;
+            font-size: 10px; color: var(--accent);
         }
 
+        /* ── Canvas ── */
         #canvas {
             position: relative;
             width: 1340px;
-            min-height: calc(100vh - 48px);
-            height: 1000px;
+            min-height: calc(100vh - 44px);
+            height: 920px;
             margin: 0 auto;
         }
 
@@ -294,7 +361,6 @@ async def homepage(request: Request):
             pointer-events: none; z-index: 2;
             overflow: visible;
         }
-
         path.wire {
             fill: none; stroke: var(--wire); stroke-width: 2.5;
             stroke-linecap: round;
@@ -306,28 +372,27 @@ async def homepage(request: Request):
         }
         @keyframes flow { to { stroke-dashoffset: -24; } }
 
-        /* ─── Nodes ─── */
+        /* ── Nodes ── */
         .node {
             position: absolute;
             width: 300px;
             background: var(--node-bg);
             border: 1px solid var(--node-border);
             border-radius: 10px;
-            box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 0px rgba(124,106,247,0);
+            box-shadow: 0 10px 32px rgba(0,0,0,0.55), 0 0 0 0px rgba(124,106,247,0);
             z-index: 10;
-            display: flex;
-            flex-direction: column;
+            display: flex; flex-direction: column;
             transition: box-shadow 0.2s;
         }
         .node:hover {
-            box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,106,247,0.3);
+            box-shadow: 0 10px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,106,247,0.3);
         }
-
-        .node.fixed-height { height: 420px; }
+        /* ↓ reduced from 420px → 370px */
+        .node.fixed-height { height: 370px; }
 
         .node-header {
             background: var(--node-header);
-            padding: 10px 14px;
+            padding: 8px 13px;
             border-bottom: 1px solid var(--node-border);
             border-radius: 10px 10px 0 0;
             font-size: 11px; font-weight: 700;
@@ -344,27 +409,26 @@ async def homepage(request: Request):
         }
 
         .node-body {
-            padding: 14px;
-            display: flex; flex-direction: column; gap: 12px;
+            padding: 12px;
+            display: flex; flex-direction: column; gap: 10px;
             flex: 1; overflow: hidden;
         }
 
-        /* ─── Ports ─── */
+        /* ── Ports ── */
         .port {
             position: absolute;
             width: 12px; height: 12px;
             background: var(--node-bg);
             border: 2px solid var(--port);
-            border-radius: 50%;
-            z-index: 30;
+            border-radius: 50%; z-index: 30;
         }
         .port.out { right: -7px; }
-        .port.in  { left: -7px; }
+        .port.in  { left:  -7px; }
 
-        /* ─── Form Elements ─── */
+        /* ── Labels ── */
         label {
             font-size: 10px; color: var(--muted);
-            font-weight: 600; display: block; margin-bottom: 4px;
+            font-weight: 600; display: block; margin-bottom: 3px;
             letter-spacing: 0.08em; text-transform: uppercase;
         }
 
@@ -372,23 +436,21 @@ async def homepage(request: Request):
 
         .file-upload {
             border: 1.5px dashed var(--node-border);
-            border-radius: 8px; padding: 16px 12px;
+            border-radius: 8px; padding: 14px 10px;
             text-align: center; cursor: pointer;
             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: 8px;
+            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: 230px;
-            object-fit: contain;
-            border-radius: 6px;
-            display: none;
-            background: #000;
+            width: 100%; height: 190px;
+            object-fit: contain; border-radius: 6px;
+            display: none; background: #000;
             border: 1px solid var(--node-border);
         }
 
@@ -396,7 +458,7 @@ async def homepage(request: Request):
             width: 100%;
             background: rgba(0,0,0,0.3);
             border: 1px solid var(--node-border);
-            color: var(--text); padding: 9px 11px;
+            color: var(--text); padding: 8px 10px;
             border-radius: 6px; outline: none;
             font-size: 12px; font-family: 'JetBrains Mono', monospace;
             resize: none; transition: border-color 0.2s;
@@ -407,7 +469,7 @@ async def homepage(request: Request):
         button.run-btn {
             background: linear-gradient(135deg, var(--accent), #9b59b6);
             color: #fff; border: none;
-            padding: 10px; border-radius: 7px;
+            padding: 9px; border-radius: 7px;
             font-weight: 700; font-size: 12px;
             font-family: 'JetBrains Mono', monospace;
             cursor: pointer;
@@ -415,47 +477,39 @@ async def homepage(request: Request):
             display: flex; justify-content: center; align-items: center; gap: 8px;
             letter-spacing: 0.04em;
         }
-        button.run-btn:hover { opacity: 0.9; }
-        button.run-btn:active { transform: scale(0.98); }
+        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-box {
             background: rgba(0,0,0,0.4);
             border: 1px solid var(--node-border);
-            border-radius: 6px; padding: 12px;
-            flex: 1;
-            overflow-y: auto;
+            border-radius: 6px; padding: 11px;
+            flex: 1; overflow-y: auto;
             font-size: 12px; line-height: 1.6;
             color: #c8c8e0; white-space: pre-wrap;
             user-select: text;
             font-family: 'JetBrains Mono', monospace;
         }
 
-        /* Grounding canvas */
+        /* Grounding */
         .ground-canvas-wrap {
             position: relative; flex: 1;
             border: 1px solid var(--node-border);
             border-radius: 6px; overflow: hidden;
-            background: #000;
-            min-height: 0;
-        }
-        .ground-canvas-wrap canvas {
-            width: 100%; height: 100%;
-            object-fit: contain;
-            display: block;
+            background: #000; min-height: 0;
         }
+        .ground-canvas-wrap canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
         .ground-placeholder {
             position: absolute; inset: 0;
             display: flex; align-items: center; justify-content: center;
-            font-size: 11px; color: var(--muted); text-align: center;
-            padding: 12px;
+            font-size: 11px; color: var(--muted); text-align: center; padding: 12px;
         }
 
         .loader {
             width: 12px; height: 12px;
             border: 2px solid rgba(255,255,255,0.3);
-            border-top-color: #fff;
-            border-radius: 50%;
+            border-top-color: #fff; border-radius: 50%;
             animation: spin 0.7s linear infinite;
             display: none;
         }
@@ -463,8 +517,7 @@ async def homepage(request: Request):
 
         .status-dot {
             width: 7px; height: 7px; border-radius: 50%;
-            background: var(--muted); display: inline-block;
-            margin-right: 6px;
+            background: var(--muted); display: inline-block; margin-right: 6px;
         }
         .status-dot.active { background: var(--accent2); box-shadow: 0 0 6px var(--accent2); }
 
@@ -473,13 +526,11 @@ async def homepage(request: Request):
             border-radius: 4px; font-size: 9px; font-weight: 700;
             letter-spacing: 0.06em; text-transform: uppercase;
         }
-        .model-badge.qwen { background: rgba(124,106,247,0.2); color: var(--accent); border: 1px solid rgba(124,106,247,0.3); }
-        .model-badge.lfm  { background: rgba(78,205,196,0.15); color: var(--accent2); border: 1px solid rgba(78,205,196,0.3); }
+        .model-badge.qwen    { background: rgba(124,106,247,0.2); color: var(--accent);  border: 1px solid rgba(124,106,247,0.3); }
+        .model-badge.qwen-vl { background: rgba(255,150,50,0.15);  color: #ff9632;        border: 1px solid rgba(255,150,50,0.35); }
+        .model-badge.lfm     { background: rgba(78,205,196,0.15);  color: var(--accent2); border: 1px solid rgba(78,205,196,0.3); }
 
-        /* scroll hint at bottom */
-        .canvas-footer {
-            height: 40px;
-        }
+        .canvas-footer { height: 40px; }
     </style>
 </head>
 <body>
@@ -488,7 +539,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.0 — DUAL MODEL</span>
+    <span class="badge">v2.1 — TRI MODEL</span>
 </div>
 
 <div id="canvas">
@@ -500,7 +551,7 @@ async def homepage(request: Request):
     </svg>
 
     <!-- ─── ID 01 : Image Input ─── -->
-    <div class="node fixed-height" id="node-img" style="left:40px; top:60px;">
+    <div class="node fixed-height" id="node-img" style="left:40px; top:56px;">
         <div class="node-header">
             <span><span class="status-dot" id="dot-img"></span>Input Image</span>
             <span class="id">ID: 01</span>
@@ -509,7 +560,9 @@ async def homepage(request: Request):
             <div>
                 <label>Upload Image</label>
                 <div class="file-upload" id="dropZone">
-                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#7c6af7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <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"/>
@@ -520,11 +573,11 @@ async def homepage(request: Request):
                 <img id="imgPreview" class="img-preview" />
             </div>
         </div>
-        <div class="port out" id="port-img-out" style="top:50%; transform:translateY(-50%);"></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:40px; top:500px;">
+    <div class="node fixed-height" id="node-model" style="left:40px; top:446px;">
         <div class="node-header">
             <span><span class="status-dot" id="dot-model"></span>Model Selector</span>
             <span class="id">ID: 02</span>
@@ -534,22 +587,25 @@ async def homepage(request: Request):
                 <label>Active Model</label>
                 <select id="modelSelect">
                     <option value="qwen">Qwen3.5-2B (Vision-Language)</option>
+                    <option value="qwen_vl">Qwen3-VL-2B-Instruct</option>
                     <option value="lfm">LFM2.5-VL-450M (LiquidAI)</option>
                 </select>
             </div>
-            <div id="modelInfoBox" style="background:rgba(124,106,247,0.07); border:1px solid rgba(124,106,247,0.2); border-radius:6px; padding:10px; font-size:10px; color:var(--muted); line-height:1.6;">
-                <span class="model-badge qwen">QWEN</span>
-                <br><br>
-                Qwen3.5 2B parameter multimodal model by Alibaba Cloud. Supports Query, Caption, Point &amp; Detect tasks with streaming output.
+            <div id="modelInfoBox"
+                 style="background:rgba(124,106,247,0.07);border:1px solid rgba(124,106,247,0.2);
+                        border-radius:6px;padding:10px;font-size:10px;color:var(--muted);line-height:1.6;">
+                <span class="model-badge qwen">QWEN 3.5</span><br><br>
+                Qwen3.5 2B parameter multimodal model by Alibaba Cloud.
+                Supports Query, Caption, Point &amp; Detect with streaming output.
             </div>
             <div style="flex:1;"></div>
         </div>
-        <div class="port out" id="port-model-out" style="top:50%; transform:translateY(-50%);"></div>
+        <div class="port out" id="port-model-out" style="top:50%;transform:translateY(-50%);"></div>
     </div>
 
-    <!-- ─── ID 03 : Task Node ─── -->
-    <div class="node fixed-height" id="node-task" style="left:430px; top:60px;">
-        <div class="port in" id="port-task-in" style="top:50%; transform:translateY(-50%);"></div>
+    <!-- ─── ID 03 : Task Config ─── -->
+    <div class="node fixed-height" id="node-task" style="left:430px; top:56px;">
+        <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>
@@ -566,19 +622,20 @@ async def homepage(request: Request):
             </div>
             <div>
                 <label>Prompt Directive</label>
-                <textarea id="promptInput" rows="5" placeholder="e.g., Count the total number of boats and describe the environment."></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 class="loader" id="btnLoader"></span>
             </button>
         </div>
-        <div class="port out" id="port-task-out" style="top:50%; transform:translateY(-50%);"></div>
+        <div class="port out" id="port-task-out" style="top:50%;transform:translateY(-50%);"></div>
     </div>
 
-    <!-- ─── ID 04 : Output Node ─── -->
-    <div class="node fixed-height" id="node-out" style="left:820px; top:60px;">
-        <div class="port in" id="port-out-in" style="top:50%; transform:translateY(-50%);"></div>
+    <!-- ─── ID 04 : Output Stream ─── -->
+    <div class="node fixed-height" id="node-out" style="left:820px; top:56px;">
+        <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>
@@ -590,8 +647,8 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 05 : Grounding Visualiser ─── -->
-    <div class="node fixed-height" id="node-gnd" style="left:820px; top:500px;">
-        <div class="port in" id="port-gnd-in" style="top:50%; transform:translateY(-50%);"></div>
+    <div class="node fixed-height" id="node-gnd" style="left:820px; top:446px;">
+        <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>
@@ -612,7 +669,7 @@ async def homepage(request: Request):
 
 <script>
 // ══════════════════════════════════════════════
-//  WIRE DRAWING  (relative to #canvas)
+//  WIRE DRAWING
 // ══════════════════════════════════════════════
 const canvasEl = document.getElementById('canvas');
 
@@ -651,13 +708,11 @@ function updateWires() {
 document.querySelectorAll('.node').forEach(node => {
     const header = node.querySelector('.node-header');
     let drag = false, sx, sy, il, it;
-
     header.addEventListener('mousedown', e => {
         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();
+        node.style.zIndex = 100; e.preventDefault();
     });
     document.addEventListener('mousemove', e => {
         if (!drag) return;
@@ -673,7 +728,7 @@ document.querySelectorAll('.node').forEach(node => {
 window.addEventListener('resize', updateWires);
 window.addEventListener('scroll', updateWires);
 document.addEventListener('scroll', updateWires, true);
-requestAnimationFrame(() => { updateWires(); });
+requestAnimationFrame(updateWires);
 
 // ══════════════════════════════════════════════
 //  FILE UPLOAD
@@ -704,7 +759,7 @@ dropZone.ondrop      = e  => {
 };
 
 // ══════════════════════════════════════════════
-//  MODEL SELECTOR INFO
+//  MODEL SELECTOR
 // ══════════════════════════════════════════════
 const modelSelect  = document.getElementById('modelSelect');
 const modelInfoBox = document.getElementById('modelInfoBox');
@@ -712,8 +767,18 @@ const dotModel     = document.getElementById('dot-model');
 dotModel.classList.add('active');
 
 const MODEL_INFO = {
-    qwen: `<span class="model-badge qwen">QWEN</span><br><br>Qwen3.5 2B parameter multimodal model by Alibaba Cloud. Supports Query, Caption, Point &amp; Detect tasks with streaming output.`,
-    lfm:  `<span class="model-badge lfm">LFM</span><br><br>LFM2.5-VL 450M parameter vision-language model by LiquidAI. Ultra-lightweight edge model with strong grounding capabilities.`,
+    qwen: `
+        <span class="model-badge qwen">QWEN 3.5</span><br><br>
+        Qwen3.5 2B parameter multimodal model by Alibaba Cloud.
+        Supports Query, Caption, Point &amp; Detect with streaming output.`,
+    qwen_vl: `
+        <span class="model-badge qwen-vl">QWEN3-VL</span><br><br>
+        Qwen3-VL-2B-Instruct — dedicated vision-language model by Alibaba Cloud.
+        Strong spatial grounding, OCR, and instruction-following capabilities.`,
+    lfm: `
+        <span class="model-badge lfm">LFM</span><br><br>
+        LFM2.5-VL 450M parameter vision-language model by LiquidAI.
+        Ultra-lightweight edge model with strong grounding capabilities.`,
 };
 
 modelSelect.onchange = () => {
@@ -721,7 +786,7 @@ modelSelect.onchange = () => {
 };
 
 // ══════════════════════════════════════════════
-//  CATEGORY → PLACEHOLDER
+//  CATEGORY PLACEHOLDER
 // ══════════════════════════════════════════════
 const categorySelect = document.getElementById('categorySelect');
 const promptInput    = document.getElementById('promptInput');
@@ -736,24 +801,18 @@ categorySelect.onchange = e => {
 };
 
 // ══════════════════════════════════════════════
-//  JSON PARSER  (robust)
+//  JSON PARSER
 // ═════════════════════════════════════���════════
 function safeParseJSON(text) {
-    // Strip markdown fences
     text = text.trim()
                .replace(/^```(json)?\\s*/i, '')
-               .replace(/\\s*```$/,         '')
+               .replace(/\\s*```$/, '')
                .trim();
     try { return JSON.parse(text); } catch(_) {}
-    // Try to extract first JSON array or object
-    const arrMatch = text.match(/\\[\\s*[\\s\\S]*?\\]/);
-    if (arrMatch) {
-        try { return JSON.parse(arrMatch[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(_) {}
-    }
+    if (objMatch) { try { return JSON.parse(objMatch[0]); } catch(_) {} }
     return null;
 }
 
@@ -764,147 +823,107 @@ const groundCanvas      = document.getElementById('groundCanvas');
 const groundPlaceholder = document.getElementById('groundPlaceholder');
 const gCtx              = groundCanvas.getContext('2d');
 
-/*
-  Handles all common model output formats:
-    bbox_2d : [x1,y1,x2,y2]  — pixel or normalised
-    bbox    : [x1,y1,x2,y2]
-    point_2d: [x,y]           — pixel or normalised
-    point   : [x,y]
-    raw arrays of 4 numbers → bbox
-    raw arrays of 2 numbers → point
-*/
+const PALETTE = [
+    '#4ecdc4','#7c6af7','#ff6b6b','#ffd93d',
+    '#6bcb77','#ff922b','#cc5de8','#339af0'
+];
+
+function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1,3),16);
+    const g = parseInt(hex.slice(3,5),16);
+    const b = parseInt(hex.slice(5,7),16);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x+r, y);
+    ctx.lineTo(x+w-r, y); ctx.quadraticCurveTo(x+w, y, x+w, y+r);
+    ctx.lineTo(x+w, y+h-r); ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
+    ctx.lineTo(x+r, y+h); ctx.quadraticCurveTo(x, y+h, x, y+h-r);
+    ctx.lineTo(x, y+r); ctx.quadraticCurveTo(x, y, x+r, y);
+    ctx.closePath();
+}
+
 function drawGrounding(imgSrc, jsonText) {
     const parsed = safeParseJSON(jsonText);
-    if (!parsed) {
-        console.warn('Grounding: could not parse JSON:', jsonText);
-        return;
-    }
+    if (!parsed) { console.warn('Grounding: could not parse JSON:', jsonText); return; }
 
     const img = new Image();
     img.onload = () => {
-        const W = img.naturalWidth;
-        const H = img.naturalHeight;
+        const W = img.naturalWidth, H = img.naturalHeight;
         groundCanvas.width  = W;
         groundCanvas.height = H;
         gCtx.drawImage(img, 0, 0);
         groundPlaceholder.style.display = 'none';
 
-        const lw   = Math.max(2, W / 200);
-        const fs   = Math.max(12, W / 40);
+        const lw = Math.max(2, W/200);
+        const fs = Math.max(12, W/40);
         gCtx.lineWidth = lw;
         gCtx.font      = `bold ${fs}px JetBrains Mono, monospace`;
 
-        // Normalise to array of items
         const items = Array.isArray(parsed) ? parsed : [parsed];
 
         items.forEach((item, i) => {
-            // ── Detect / bbox ──
+            const col = PALETTE[i % PALETTE.length];
+
+            // ── Bounding box ──
             let bbox = null;
-            if (item && item.bbox_2d && Array.isArray(item.bbox_2d) && item.bbox_2d.length === 4) {
-                bbox = item.bbox_2d;
-            } else if (item && item.bbox && Array.isArray(item.bbox) && item.bbox.length === 4) {
-                bbox = item.bbox;
-            } else if (Array.isArray(item) && item.length === 4 && item.every(n => typeof n === 'number')) {
-                bbox = item;
-            }
+            if (item?.bbox_2d?.length === 4) bbox = item.bbox_2d;
+            else if (item?.bbox?.length  === 4) bbox = item.bbox;
+            else if (Array.isArray(item) && item.length === 4 && item.every(n => typeof n === 'number')) bbox = item;
 
             if (bbox) {
-                let [x1, y1, x2, y2] = bbox;
-                // Auto-detect pixel vs normalised (values > 2 → pixel coords)
-                const isNorm = x1 <= 1 && y1 <= 1 && x2 <= 1 && y2 <= 1;
-                if (isNorm) { x1*=W; y1*=H; x2*=W; y2*=H; }
-                const bw = x2 - x1, bh = y2 - y1;
-                const label = item.label || `${i+1}`;
-                const colors = [
-                    '#4ecdc4','#7c6af7','#ff6b6b','#ffd93d',
-                    '#6bcb77','#ff922b','#cc5de8','#339af0'
-                ];
-                const col = colors[i % colors.length];
-
-                // Fill
-                gCtx.fillStyle = col.replace(/^#/,'') === col
-                    ? col + '33'
-                    : hexToRgba(col, 0.18);
-                gCtx.fillRect(x1, y1, bw, bh);
+                let [x1,y1,x2,y2] = bbox;
+                // Auto-detect normalised vs pixel
+                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 label = item?.label || `${i+1}`;
 
-                // Stroke
+                gCtx.fillStyle   = hexToRgba(col, 0.18);
+                gCtx.fillRect(x1, y1, bw, bh);
                 gCtx.strokeStyle = col;
                 gCtx.strokeRect(x1, y1, bw, bh);
 
-                // Label pill
-                const textW = gCtx.measureText(label).width;
-                const ph = fs * 1.4, pw = textW + 10;
-                const lx = x1, ly = Math.max(0, y1 - ph);
+                const tw  = gCtx.measureText(label).width;
+                const ph  = fs * 1.4, pw = tw + 10;
+                const lx  = x1, ly = Math.max(0, y1 - ph);
                 gCtx.fillStyle = col;
-                roundRect(gCtx, lx, ly, pw, ph, 4);
-                gCtx.fill();
+                roundRect(gCtx, lx, ly, pw, ph, 4); gCtx.fill();
                 gCtx.fillStyle = '#fff';
-                gCtx.fillText(label, lx + 5, ly + ph * 0.75);
+                gCtx.fillText(label, lx+5, ly + ph*0.76);
                 return;
             }
 
             // ── Point ──
             let pt = null;
-            if (item && item.point_2d && Array.isArray(item.point_2d) && item.point_2d.length === 2) {
-                pt = item.point_2d;
-            } else if (item && item.point && Array.isArray(item.point) && item.point.length === 2) {
-                pt = item.point;
-            } else if (Array.isArray(item) && item.length === 2 && item.every(n => typeof n === 'number')) {
-                pt = item;
-            }
+            if (item?.point_2d?.length === 2) pt = item.point_2d;
+            else if (item?.point?.length  === 2) pt = item.point;
+            else if (Array.isArray(item) && item.length === 2 && item.every(n => typeof n === 'number')) pt = item;
 
             if (pt) {
-                let [x, y] = pt;
-                const isNorm = x <= 1 && y <= 1;
-                if (isNorm) { x *= W; y *= H; }
-                const r = Math.max(8, W / 60);
-                const col = '#4ecdc4';
+                let [x,y] = pt;
+                if (x <= 1 && y <= 1) { x*=W; y*=H; }
+                const r = Math.max(8, W/60);
+                const label = item?.label || `${i+1}`;
 
-                // Outer ring
                 gCtx.beginPath();
-                gCtx.arc(x, y, r * 1.6, 0, Math.PI * 2);
-                gCtx.fillStyle = 'rgba(78,205,196,0.15)';
-                gCtx.fill();
+                gCtx.arc(x, y, r*1.6, 0, Math.PI*2);
+                gCtx.fillStyle = hexToRgba(col, 0.15); gCtx.fill();
 
-                // Main dot
                 gCtx.beginPath();
-                gCtx.arc(x, y, r, 0, Math.PI * 2);
-                gCtx.fillStyle = col;
-                gCtx.fill();
-                gCtx.strokeStyle = '#fff';
-                gCtx.stroke();
+                gCtx.arc(x, y, r, 0, Math.PI*2);
+                gCtx.fillStyle   = col; gCtx.fill();
+                gCtx.strokeStyle = '#fff'; gCtx.stroke();
 
-                // Label
-                const label = item.label || `${i+1}`;
                 gCtx.fillStyle = '#fff';
-                gCtx.fillText(label, x + r + 4, y + fs * 0.4);
+                gCtx.fillText(label, x + r + 4, y + fs*0.4);
             }
         });
     };
     img.src = imgSrc;
 }
 
-function hexToRgba(hex, alpha) {
-    const r = parseInt(hex.slice(1,3),16);
-    const g = parseInt(hex.slice(3,5),16);
-    const b = parseInt(hex.slice(5,7),16);
-    return `rgba(${r},${g},${b},${alpha})`;
-}
-
-function roundRect(ctx, x, y, w, h, r) {
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + w - r, y);
-    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-    ctx.lineTo(x + w, y + h - r);
-    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-    ctx.lineTo(x + r, y + h);
-    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-    ctx.lineTo(x, y + r);
-    ctx.quadraticCurveTo(x, y, x + r, y);
-    ctx.closePath();
-}
-
 // ══════════════════════════════════════════════
 //  RUN INFERENCE
 // ══════════════════════════════════════════════
@@ -921,7 +940,6 @@ runBtn.onclick = async () => {
     const promptStr = promptInput.value.trim();
     if (!promptStr) { alert('Please enter a prompt directive.'); return; }
 
-    // UI: running state
     runBtn.disabled = true;
     btnLoader.style.display = 'inline-block';
     outputBox.innerText = '';
@@ -974,8 +992,6 @@ runBtn.onclick = async () => {
         }
 
         dotOut.classList.add('active');
-
-        // Visualise grounding
         const cat = categorySelect.value;
         if ((cat === 'Point' || cat === 'Detect') && fullText.trim()) {
             dotGnd.classList.add('active');