update app

app.py

@@ -1,15 +1,19 @@
-import gradio as gr
+import os
+import gc
+import base64
+import json
+import ast
+import re
+from io import BytesIO
 import torch
 import spaces
 import numpy as np
+from PIL import Image, ImageDraw, ImageFont
 import supervision as sv
 from typing import Iterable
-from gradio.themes import Soft
-from gradio.themes.utils import colors, fonts, sizes
-import json
-import ast
-import re
-from PIL import Image, ImageDraw, ImageFont
+import gradio as gr
+from gradio import Server
+from fastapi.responses import HTMLResponse
 from threading import Thread
 from transformers import (
     Qwen3_5ForConditionalGeneration,
@@ -17,328 +21,29 @@ from transformers import (
     TextIteratorStreamer,
 )
 
-
 # ------------------------------------------------------------------
-# Theme / Colors
+# Config & Constants
 # ------------------------------------------------------------------
-colors.steel_blue = colors.Color(
-    name="steel_blue",
-    c50="#EBF3F8", c100="#D3E5F0", c200="#A8CCE1", c300="#7DB3D2",
-    c400="#529AC3", c500="#4682B4", c600="#3E72A0", c700="#36638C",
-    c800="#2E5378", c900="#264364", c950="#1E3450",
-)
-
-
-class SteelBlueTheme(Soft):
-    def __init__(
-        self,
-        *,
-        primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.steel_blue,
-        neutral_hue: colors.Color | str = colors.slate,
-        text_size: sizes.Size | str = sizes.text_lg,
-        font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Outfit"), "Arial", "sans-serif",
-        ),
-        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace",
-        ),
-    ):
-        super().__init__(
-            primary_hue=primary_hue, secondary_hue=secondary_hue,
-            neutral_hue=neutral_hue, text_size=text_size,
-            font=font, font_mono=font_mono,
-        )
-        super().set(
-            background_fill_primary="*primary_50",
-            background_fill_primary_dark="*primary_900",
-            body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
-            body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",
-            button_primary_text_color="white",
-            button_primary_text_color_hover="white",
-            button_primary_background_fill="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_800)",
-            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_500)",
-            button_secondary_text_color="black",
-            button_secondary_text_color_hover="white",
-            button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
-            button_secondary_background_fill_hover="linear-gradient(90deg, *primary_400, *primary_400)",
-            button_secondary_background_fill_dark="linear-gradient(90deg, *primary_500, *primary_600)",
-            button_secondary_background_fill_hover_dark="linear-gradient(90deg, *primary_500, *primary_500)",
-            slider_color="*secondary_500",
-            slider_color_dark="*secondary_600",
-            block_title_text_weight="600",
-            block_border_width="3px",
-            block_shadow="*shadow_drop_lg",
-            button_primary_shadow="*shadow_drop_lg",
-            button_large_padding="11px",
-            color_accent_soft="*primary_100",
-            block_label_background_fill="*primary_200",
-        )
-
-
-steel_blue_theme = SteelBlueTheme()
-
-
-css = r"""
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
-
-body, .gradio-container { font-family: 'Outfit', sans-serif !important; }
-footer { display: none !important; }
-
-/* -- App Header -- */
-.app-header {
-    background: linear-gradient(135deg, #1E3450 0%, #264364 30%, #3E72A0 70%, #4682B4 100%);
-    border-radius: 16px; padding: 32px 40px; margin-bottom: 24px;
-    position: relative; overflow: hidden;
-    box-shadow: 0 8px 32px rgba(30,52,80,0.25);
-}
-.app-header::before {
-    content:''; position:absolute; top:-50%; right:-20%;
-    width:400px; height:400px;
-    background:radial-gradient(circle,rgba(255,255,255,0.06) 0%,transparent 70%);
-    border-radius:50%;
-}
-.app-header::after {
-    content:''; position:absolute; bottom:-30%; left:-10%;
-    width:300px; height:300px;
-    background:radial-gradient(circle,rgba(70,130,180,0.15) 0%,transparent 70%);
-    border-radius:50%;
-}
-.header-content {
-    display:flex; align-items:center; gap:24px;
-    position:relative; z-index:1;
-}
-.header-icon-wrap {
-    width:64px; height:64px; background:rgba(255,255,255,0.12);
-    border-radius:16px; display:flex; align-items:center; justify-content:center;
-    flex-shrink:0; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.15);
-}
-.header-icon-wrap svg { width:36px; height:36px; color:rgba(255,255,255,0.9); }
-.header-text h1 {
-    font-family:'Outfit',sans-serif; font-size:2rem; font-weight:700;
-    color:#fff; margin:0 0 8px 0; letter-spacing:-0.02em; line-height:1.2;
-}
-.header-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
-.meta-badge {
-    display:inline-flex; align-items:center; gap:6px;
-    background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.9);
-    padding:4px 12px; border-radius:20px;
-    font-family:'IBM Plex Mono',monospace; font-size:0.8rem; font-weight:500;
-    border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(4px);
-}
-.meta-badge svg { width:14px; height:14px; }
-.meta-sep {
-    width:4px; height:4px; background:rgba(255,255,255,0.35);
-    border-radius:50%; flex-shrink:0;
-}
-.meta-cap { color:rgba(255,255,255,0.65); font-size:0.85rem; font-weight:400; }
-
-/* -- Tab transitions -- */
-.gradio-tabitem { animation: tabFadeIn 0.35s ease-out; }
-@keyframes tabFadeIn {
-    from { opacity:0; transform:translateY(6px); }
-    to   { opacity:1; transform:translateY(0); }
-}
-
-/* -- Tab Intro Panels -- */
-.tab-intro {
-    display:flex; align-items:flex-start; gap:16px;
-    background:linear-gradient(135deg,rgba(70,130,180,0.06),rgba(70,130,180,0.02));
-    border:1px solid rgba(70,130,180,0.15); border-left:4px solid #4682B4;
-    border-radius:10px; padding:18px 22px; margin-bottom:20px;
-}
-.dark .tab-intro {
-    background:linear-gradient(135deg,rgba(70,130,180,0.1),rgba(70,130,180,0.04));
-    border-color:rgba(70,130,180,0.25);
-}
-.intro-icon {
-    width:40px; height:40px; background:rgba(70,130,180,0.1);
-    border-radius:10px; display:flex; align-items:center; justify-content:center;
-    flex-shrink:0; margin-top:2px;
-}
-.intro-icon svg { width:22px; height:22px; color:#4682B4; }
-.dark .intro-icon svg { color:#7DB3D2; }
-.intro-text { flex:1; }
-.intro-text p { margin:0; color:#2E5378; font-size:0.95rem; line-height:1.6; }
-.dark .intro-text p { color:#A8CCE1; }
-.intro-text p.intro-sub { color:#64748b; font-size:0.85rem; margin-top:4px; }
-.dark .intro-text p.intro-sub { color:#94a3b8; }
-
-/* -- Section Headers -- */
-.section-heading {
-    display:flex; align-items:center; gap:14px;
-    margin:22px 0 14px 0; padding:0 2px;
-}
-.heading-icon {
-    width:32px; height:32px;
-    background:linear-gradient(135deg,#4682B4,#3E72A0);
-    border-radius:8px; display:flex; align-items:center; justify-content:center;
-    flex-shrink:0; box-shadow:0 2px 8px rgba(70,130,180,0.2);
-}
-.heading-icon svg { width:18px; height:18px; color:#fff; }
-.heading-label {
-    font-family:'Outfit',sans-serif; font-weight:600; font-size:1.05rem;
-    color:#1E3450; letter-spacing:-0.01em;
-}
-.dark .heading-label { color:#D3E5F0; }
-.heading-line {
-    flex:1; height:1px;
-    background:linear-gradient(90deg,rgba(70,130,180,0.2),transparent);
-}
-
-/* -- Status Indicators -- */
-.status-indicator {
-    display:flex; align-items:center; gap:10px;
-    padding:10px 16px; margin-top:10px;
-    background:rgba(70,130,180,0.04); border:1px solid rgba(70,130,180,0.12);
-    border-radius:8px;
-}
-.dark .status-indicator {
-    background:rgba(70,130,180,0.08); border-color:rgba(70,130,180,0.2);
-}
-.status-dot {
-    width:8px; height:8px; background:#22c55e;
-    border-radius:50%; flex-shrink:0;
-    animation:statusPulse 2s ease-in-out infinite;
-}
-@keyframes statusPulse {
-    0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(34,197,94,0.4); }
-    50%     { opacity:0.7; box-shadow:0 0 0 4px rgba(34,197,94,0); }
-}
-.status-text { font-size:0.85rem; color:#64748b; font-style:italic; }
-.dark .status-text { color:#94a3b8; }
-
-/* -- Card Labels -- */
-.card-label {
-    display:flex; align-items:center; gap:8px;
-    font-family:'Outfit',sans-serif; font-weight:600; font-size:0.8rem;
-    text-transform:uppercase; letter-spacing:0.06em; color:#4682B4;
-    margin-bottom:14px; padding-bottom:10px;
-    border-bottom:1px solid rgba(70,130,180,0.1);
-}
-.dark .card-label { color:#7DB3D2; border-bottom-color:rgba(70,130,180,0.2); }
-.card-label svg { width:16px; height:16px; }
-
-/* -- Buttons -- */
-.primary {
-    border-radius:10px !important; font-weight:600 !important;
-    letter-spacing:0.02em !important; transition:all 0.25s ease !important;
-    font-family:'Outfit',sans-serif !important;
-}
-.primary:hover {
-    transform:translateY(-2px) !important;
-    box-shadow:0 6px 20px rgba(70,130,180,0.3) !important;
-}
-.primary:active { transform:translateY(0) !important; }
-
-/* -- Textbox -- */
-.gradio-textbox textarea {
-    font-family:'IBM Plex Mono',monospace !important;
-    font-size:0.92rem !important; line-height:1.7 !important;
-    border-radius:8px !important;
-}
-
-/* -- Accordion -- */
-.gradio-accordion {
-    border-radius:10px !important; border:1px solid rgba(70,130,180,0.15) !important;
-}
-.gradio-accordion>.label-wrap { border-radius:10px !important; }
-
-/* -- Labels -- */
-label { font-weight:600 !important; font-family:'Outfit',sans-serif !important; }
-
-/* -- Slider -- */
-.gradio-slider input[type="range"] { accent-color:#4682B4 !important; }
-
-/* -- Scrollbar -- */
-::-webkit-scrollbar { width:8px; height:8px; }
-::-webkit-scrollbar-track { background:rgba(70,130,180,0.04); border-radius:4px; }
-::-webkit-scrollbar-thumb { background:linear-gradient(135deg,#4682B4,#3E72A0); border-radius:4px; }
-::-webkit-scrollbar-thumb:hover { background:linear-gradient(135deg,#3E72A0,#2E5378); }
-
-/* -- Gallery -- */
-.gradio-gallery { border-radius:10px !important; }
-
-/* -- Divider -- */
-.section-divider {
-    height:1px; background:linear-gradient(90deg,transparent,rgba(70,130,180,0.2),transparent);
-    margin:16px 0; border:none;
-}
-
-/* -- Settings panel -- */
-.settings-note {
-    font-size:0.8rem; color:#64748b; margin-top:-4px; margin-bottom:8px;
-}
-.dark .settings-note { color:#94a3b8; }
-
-/* -- Responsive -- */
-@media (max-width: 768px) {
-    .app-header { padding: 20px 24px; }
-    .header-text h1 { font-size: 1.5rem; }
-    .header-content { flex-direction: column; align-items: flex-start; gap: 16px; }
-    .header-meta { gap: 8px; }
-}
-"""
-
-
-SVG_BRAIN = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"/></svg>'
-SVG_DETECT = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>'
-SVG_POINT = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/></svg>'
-SVG_ROUTE = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/></svg>'
-SVG_CHIP = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>'
-SVG_GEAR = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>'
-
 DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
-DTYPE = (
-    torch.bfloat16
-    if torch.cuda.is_available() and torch.cuda.is_bf16_supported()
-    else torch.float16
-)
-
-# ------------------------------------------------------------------
-# Model — swapped to Qwen3.8-27B (same Qwen3_5ForConditionalGeneration arch)
-# ------------------------------------------------------------------
+DTYPE = torch.bfloat16 if torch.cuda.is_available() and torch.cuda.is_bf16_supported() else torch.float16
 MODEL_NAME = "Qwen/Qwen3.8-27B"
 
-# Fixed GPU duration steps (seconds) — index-driven slider
-GPU_DURATIONS = [60, 90, 120, 150, 180, 250, 300]
-DEFAULT_GPU_DURATION_IDX = 1
-
-# ------------------------------------------------------------------
-# Example galleries — 4 examples per category, images 1.png -> 4.png
-# Drop matching files into an "examples/" folder next to this script.
-# ------------------------------------------------------------------
-
-# (image, prompt) — Object Detection tab
-DETECT_EXAMPLES = [
-    ["examples/1.jpg", "Detect the yellow car that is parked."],
-]
-
-# (image, prompt) — Point Localization tab
-POINT_EXAMPLES = [
-    ["examples/2.jpg", "Point to all the red cars."],
-]
-
-# (image, prompt) — Spatial Guidance tab
-SPATIAL_EXAMPLES = [
-    ["examples/3.jpg", "Map a path from the door to the lamp."],
-]
-
 BRIGHT_YELLOW = sv.Color(r=255, g=230, b=0)
 DARK_OUTLINE = sv.Color(r=40, g=40, b=40)
 BLACK = sv.Color(r=0, g=0, b=0)
 WHITE = sv.Color(r=255, g=255, b=255)
 
 # Spatial path colors
-SPATIAL_LINE = (46, 130, 180)      # steel blue
-SPATIAL_DOT = (46, 130, 180)
+SPATIAL_LINE = (255, 69, 0)       # OrangeRed
+SPATIAL_DOT = (255, 69, 0)
 SPATIAL_RING = (255, 255, 255)
-SPATIAL_LABEL_BG = (30, 52, 80)
+SPATIAL_LABEL_BG = (80, 20, 0)
 SPATIAL_LABEL_TXT = (255, 255, 255)
-SPATIAL_ARROW = (230, 149, 0)      # warm accent for direction
+SPATIAL_ARROW = (255, 165, 0)     # Orange for direction
 
+# ------------------------------------------------------------------
+# Model Loading
+# ------------------------------------------------------------------
 print(f"Loading model: {MODEL_NAME} ...")
 qwen_model = Qwen3_5ForConditionalGeneration.from_pretrained(
     MODEL_NAME, torch_dtype=DTYPE, device_map=DEVICE, attn_implementation="kernels-community/flash-attn2@v3",
@@ -346,20 +51,61 @@ qwen_model = Qwen3_5ForConditionalGeneration.from_pretrained(
 qwen_processor = AutoProcessor.from_pretrained(MODEL_NAME)
 print("Model loaded.")
 
+# ------------------------------------------------------------------
+# Examples Config
+# ------------------------------------------------------------------
+EXAMPLES_CONFIG = [
+    {"image": "examples/1.jpg", "prompt": "Detect the yellow car that is parked.", "mode": "Detect"},
+    {"image": "examples/2.jpg", "prompt": "Point to all the red cars.", "mode": "Point"},
+    {"image": "examples/3.jpg", "prompt": "Map a path from the door to the lamp.", "mode": "Spatial"},
+]
+
+def make_thumb_b64(path, max_dim=220):
+    if not os.path.exists(path):
+        return ""
+    try:
+        img = Image.open(path).convert("RGB")
+        img.thumbnail((max_dim, max_dim), Image.LANCZOS)
+        buf = BytesIO()
+        img.save(buf, format="JPEG", quality=65)
+        return f"data:image/jpeg;base64,{base64.b64encode(buf.getvalue()).decode()}"
+    except Exception as e:
+        return ""
+
+def encode_full_image(path):
+    if not os.path.exists(path):
+        return ""
+    try:
+        with open(path, "rb") as f:
+            data = f.read()
+        ext = path.rsplit(".", 1)[-1].lower()
+        mime = {"jpg": "image/jpeg", "jpeg": "image/jpeg", "png": "image/png", "webp": "image/webp"}.get(ext, "image/jpeg")
+        return f"data:{mime};base64,{base64.b64encode(data).decode()}"
+    except Exception as e:
+        return ""
+
+def build_client_config():
+    examples = []
+    for i, ex in enumerate(EXAMPLES_CONFIG):
+        examples.append({
+            "idx": i,
+            "thumb": make_thumb_b64(ex["image"]),
+            "prompt": ex["prompt"],
+            "mode": ex["mode"],
+        })
+    return {"examples": examples, "modes": ["Detect", "Point", "Spatial"], "default_mode": "Detect"}
+
+print("Building client config…")
+CLIENT_CONFIG = build_client_config()
 
 # ------------------------------------------------------------------
-# Robust JSON Parsing & Data Extraction
+# Helpers
 # ------------------------------------------------------------------
 def safe_parse_json(text: str):
-    """Thoroughly extract JSON arrays/objects from raw model text."""
-    # Remove markdown code blocks
     text = re.sub(r"```(json)?", "", text).strip()
-
-    # Find the first JSON list or dict in the text
     match = re.search(r'(\[.*\]|\{.*\})', text, re.DOTALL)
     if match:
         json_str = match.group(1)
-        # Clean up trailing commas that break JSON parsers
         json_str_clean = re.sub(r',\s*([}\]])', r'\1', json_str)
         try:
             return json.loads(json_str_clean)
@@ -368,8 +114,6 @@ def safe_parse_json(text: str):
                 return ast.literal_eval(json_str_clean)
             except Exception:
                 pass
-
-    # Fallback to whole text
     text_clean = re.sub(r',\s*([}\]])', r'\1', text)
     try:
         return json.loads(text_clean)
@@ -381,26 +125,20 @@ def safe_parse_json(text: str):
         pass
     return []
 
-
 def _extract_point(item: dict):
-    """Find point coordinates regardless of key naming variations."""
-    if not isinstance(item, dict):
-        return None
+    if not isinstance(item, dict): return None
     for k in ["point_2d", "point", "points", "coordinate", "coordinates", "xy"]:
         if k in item and isinstance(item[k], (list, tuple)) and len(item[k]) == 2:
             return item[k]
     return None
 
 def _extract_bbox(item: dict):
-    """Find bbox coordinates regardless of key naming variations."""
-    if not isinstance(item, dict):
-        return None
+    if not isinstance(item, dict): return None
     for k in ["bbox_2d", "bbox", "box", "bounding_box", "xyxy"]:
         if k in item and isinstance(item[k], (list, tuple)) and len(item[k]) == 4:
             return item[k]
     return None
 
-
 def _load_font(size: int = 16):
     size = max(6, int(size))
     try:
@@ -411,33 +149,23 @@ def _load_font(size: int = 16):
         except (IOError, OSError):
             return ImageFont.load_default()
 
+def pil_to_b64_png(image: Image.Image) -> str:
+    buf = BytesIO()
+    image.save(buf, format="PNG")
+    return f"data:image/png;base64,{base64.b64encode(buf.getvalue()).decode()}"
 
-# ------------------------------------------------------------------
-# Annotation (sizes are now configurable)
-# ------------------------------------------------------------------
-def annotate_image(
-    image: Image.Image,
-    result: dict,
-    point_radius: int = 6,
-    box_thickness: int = 2,
-    text_scale: float = 0.5,
-):
-    """Annotate image with bounding boxes (Detect) or keypoints (Point)."""
-    if not isinstance(image, Image.Image) or not isinstance(result, dict):
-        return image
+def annotate_image(image: Image.Image, result: dict, point_radius: int = 6, box_thickness: int = 2, text_scale: float = 0.5):
+    if not isinstance(image, Image.Image) or not isinstance(result, dict): return image
     image = image.convert("RGB")
     ow, oh = image.size
-
     point_radius = max(1, int(point_radius))
     box_thickness = max(1, int(box_thickness))
     text_scale = max(0.1, float(text_scale))
     text_thickness = max(1, round(text_scale * 2))
 
-    # --- Point localization ---
     if "points" in result and result["points"]:
         pts = [[int(p["x"] * ow), int(p["y"] * oh)] for p in result["points"]]
-        if not pts:
-            return image
+        if not pts: return image
         kp = sv.KeyPoints(xy=np.array(pts).reshape(1, -1, 2))
         scene = np.array(image.copy())
         scene = sv.VertexAnnotator(radius=point_radius + 3, color=DARK_OUTLINE).annotate(scene=scene, key_points=kp)
@@ -459,7 +187,6 @@ def annotate_image(
                 ).annotate(scene=scene, detections=sv.Detections(xyxy=np.array(tb)), labels=vl)
         return Image.fromarray(scene)
 
-    # --- Object detection ---
     if "objects" in result and result["objects"]:
         boxes, labels = [], []
         for obj in result["objects"]:
@@ -468,8 +195,7 @@ def annotate_image(
                 obj.get("x_max", 0.0) * ow, obj.get("y_max", 0.0) * oh,
             ])
             labels.append(obj.get("label", "object"))
-        if not boxes:
-            return image
+        if not boxes: return image
         scene = np.array(image.copy())
         h, w = scene.shape[:2]
         masks = np.zeros((len(boxes), h, w), dtype=bool)
@@ -478,8 +204,7 @@ def annotate_image(
             x2, y2 = min(w, int(box[2])), min(h, int(box[3]))
             masks[i, y1:y2, x1:x2] = True
         dets = sv.Detections(xyxy=np.array(boxes), mask=masks)
-        if len(dets) == 0:
-            return image
+        if len(dets) == 0: return image
         scene = sv.MaskAnnotator(color=BRIGHT_YELLOW, opacity=0.18, color_lookup=sv.ColorLookup.INDEX).annotate(scene=scene, detections=dets)
         scene = sv.BoxAnnotator(color=BRIGHT_YELLOW, thickness=box_thickness, color_lookup=sv.ColorLookup.INDEX).annotate(scene=scene, detections=dets)
         scene = sv.LabelAnnotator(
@@ -489,61 +214,41 @@ def annotate_image(
         return Image.fromarray(scene)
     return image
 
-
-def annotate_spatial_path(
-    image: Image.Image,
-    result: dict,
-    dot_radius: int = 6,
-    line_width: int = 4,
-    text_scale: float = 0.5,
-):
-    """
-    Draw a spatial map: connecting dots (waypoints) that form a path/route
-    between mapped objects in the image.
-    """
-    if not isinstance(image, Image.Image) or not isinstance(result, dict):
-        return image
+def annotate_spatial_path(image: Image.Image, result: dict, dot_radius: int = 6, line_width: int = 4, text_scale: float = 0.5):
+    if not isinstance(image, Image.Image) or not isinstance(result, dict): return image
     image = image.convert("RGB")
     w, h = image.size
-    if "points" not in result or not result["points"]:
-        return image
+    if "points" not in result or not result["points"]: return image
 
     dot_radius = max(1, int(dot_radius))
     line_width = max(1, int(line_width))
     text_scale = max(0.1, float(text_scale))
 
     draw = ImageDraw.Draw(image, "RGBA")
-    font_label = _load_font(16 * text_scale * 2)   # text_scale ~0.5 -> 16px baseline
+    font_label = _load_font(16 * text_scale * 2)
     font_num = _load_font(14 * text_scale * 2)
 
     points = result["points"]
     pts = [(int(p["x"] * w), int(p["y"] * h)) for p in points]
     labels = [p.get("label", f"P{i+1}") for i, p in enumerate(points)]
 
-    scale_ratio = dot_radius / 8.0  # relative to original default size
+    scale_ratio = dot_radius / 8.0
 
-    # --- 1) Draw connecting path lines (with subtle glow) ---
     if len(pts) >= 2:
-        # outer soft glow
         for i in range(len(pts) - 1):
             draw.line([pts[i], pts[i+1]], fill=SPATIAL_LINE + (60,), width=line_width + 6)
-        # main path
         for i in range(len(pts) - 1):
             draw.line([pts[i], pts[i+1]], fill=SPATIAL_LINE, width=line_width)
 
-        # --- 2) Arrowheads to indicate direction ---
         for i in range(len(pts) - 1):
             x1, y1 = pts[i]
             x2, y2 = pts[i+1]
             dx, dy = x2 - x1, y2 - y1
             length = (dx * dx + dy * dy) ** 0.5
-            if length < 12:
-                continue
+            if length < 12: continue
             ux, uy = dx / length, dy / length
-            # arrow base near the destination point
             offset = 18 * scale_ratio
             bx, by = x2 - ux * offset, y2 - uy * offset
-            # perpendicular
             px, py = -uy, ux
             aw, ah = 7 * scale_ratio, 9 * scale_ratio
             p1 = (bx + px * aw, by + py * aw)
@@ -551,83 +256,72 @@ def annotate_spatial_path(
             p3 = (bx + ux * ah, by + uy * ah)
             draw.polygon([p1, p2, p3], fill=SPATIAL_ARROW)
 
-    # --- 3) Draw waypoint dots ---
     for i, (cx, cy) in enumerate(pts):
         halo_r = dot_radius + 8
         ring_r = dot_radius + 3
-        # outer halo
         draw.ellipse((cx - halo_r, cy - halo_r, cx + halo_r, cy + halo_r), fill=SPATIAL_LINE + (50,))
-        # white ring
-        draw.ellipse((cx - ring_r, cy - ring_r, cx + ring_r, cy + ring_r),
-                     outline=SPATIAL_RING, width=max(1, round(3 * scale_ratio)))
-        # solid inner dot
-        draw.ellipse((cx - dot_radius, cy - dot_radius, cx + dot_radius, cy + dot_radius),
-                     fill=SPATIAL_DOT, outline=SPATIAL_DOT)
-        # number badge
+        draw.ellipse((cx - ring_r, cy - ring_r, cx + ring_r, cy + ring_r), outline=SPATIAL_RING, width=max(1, round(3 * scale_ratio)))
+        draw.ellipse((cx - dot_radius, cy - dot_radius, cx + dot_radius, cy + dot_radius), fill=SPATIAL_DOT, outline=SPATIAL_DOT)
         num_text = str(i + 1)
         nbbox = draw.textbbox((0, 0), num_text, font=font_num)
         nw = nbbox[2] - nbbox[0]
         nh = nbbox[3] - nbbox[1]
         nx, ny = cx - nw // 2, cy - nh // 2 - 1
-        # tiny number on the dot
         draw.text((nx, ny), num_text, fill=SPATIAL_RING, font=font_num)
 
-    # --- 4) Labels next to each waypoint ---
     for i, (cx, cy) in enumerate(pts):
         label = f"{i+1}. {labels[i]}"
         bbox = draw.textbbox((0, 0), label, font=font_label)
         tw, th = bbox[2] - bbox[0], bbox[3] - bbox[1]
         lx, ly = cx + dot_radius + 10, cy - th - 8
-        # background pill
         pad = 5
-        draw.rectangle(
-            (lx - pad, ly - pad, lx + tw + pad, ly + th + pad),
-            fill=SPATIAL_LABEL_BG,
-            outline=SPATIAL_LINE, width=1,
-        )
+        draw.rectangle((lx - pad, ly - pad, lx + tw + pad, ly + th + pad), fill=SPATIAL_LABEL_BG, outline=SPATIAL_LINE, width=1)
         draw.text((lx, ly), label, fill=SPATIAL_LABEL_TXT, font=font_label)
 
-    # --- 5) Legend / summary footer ---
     n_pts = len(pts)
     legend_text = f"Spatial map · {n_pts} waypoints · path length {len(pts)-1} segments"
     legend_font = _load_font(13 * text_scale * 2)
     bbox = draw.textbbox((0, 0), legend_text, font=legend_font)
     tw, th = bbox[2] - bbox[0], bbox[3] - bbox[1]
     fx, fy = 10, h - th - 22
-    draw.rectangle((fx - 8, fy - 6, fx + tw + 16, fy + th + 10),
-                   fill=SPATIAL_LABEL_BG + (220,))
+    draw.rectangle((fx - 8, fy - 6, fx + tw + 16, fy + th + 10), fill=SPATIAL_LABEL_BG + (220,))
     draw.text((fx, fy), legend_text, fill=SPATIAL_LABEL_TXT, font=legend_font)
 
     return image
 
-
-# ------------------------------------------------------------------
-# Dynamic GPU duration
-# ------------------------------------------------------------------
-def get_gpu_duration(image, category, prompt, point_radius, box_thickness, text_scale, gpu_duration_seconds):
-    """
-    ZeroGPU allows the `duration` argument of @spaces.GPU to be a callable
-    that receives the same arguments as the decorated function and returns
-    the number of seconds to request for that specific call. This lets the
-    GPU Duration slider in the UI directly control the allocation per run.
-    """
-    try:
-        return int(gpu_duration_seconds)
-    except (TypeError, ValueError):
-        return GPU_DURATIONS[DEFAULT_GPU_DURATION_IDX]
-
-
 # ------------------------------------------------------------------
-# Main pipeline
+# Gradio Server (Server mode): FastAPI + Gradio queue/API engine
 # ------------------------------------------------------------------
-@spaces.GPU(size="xlarge", duration=get_gpu_duration)
-def process_inputs(image, category, prompt, point_radius, box_thickness, text_scale, gpu_duration_seconds):
-    if image is None:
+app = Server(title="Qwen3.8-27B-Object-Detection")
+
+@app.mcp.tool(name="run_inference")
+@app.api(name="run_inference")
+@spaces.GPU(size="xlarge", duration=90)
+def infer(
+    image_b64: str,
+    mode: str,
+    prompt: str,
+    point_radius: int,
+    box_thickness: int,
+    text_scale: float,
+) -> dict:
+    """Runs object detection, point localization, or spatial mapping."""
+    gc.collect()
+    torch.cuda.empty_cache()
+
+    if not image_b64:
         raise gr.Error("Please upload an image.")
-    if not prompt or not prompt.strip():
+    if not prompt or prompt.strip() == "":
         raise gr.Error("Please provide a prompt.")
-    image = image.convert("RGB")
-    image.thumbnail((512, 512))
+
+    try:
+        header, data = image_b64.split(",", 1)
+        pil_image = Image.open(BytesIO(base64.b64decode(data))).convert("RGB")
+    except Exception as e:
+        raise gr.Error(f"Invalid image data: {e}")
+
+    pil_image.thumbnail((512, 512))
+    category = mode
 
     if category == "Detect":
         full_prompt = (
@@ -655,7 +349,7 @@ def process_inputs(image, category, prompt, point_radius, box_thickness, text_sc
     messages = [{
         "role": "user",
         "content": [
-            {"type": "image", "image": image},
+            {"type": "image", "image": pil_image},
             {"type": "text", "text": full_prompt},
         ],
     }]
@@ -663,7 +357,7 @@ def process_inputs(image, category, prompt, point_radius, box_thickness, text_sc
         messages, tokenize=False, add_generation_prompt=True
     )
     inputs = qwen_processor(
-        text=[text], images=[image],
+        text=[text], images=[pil_image],
         return_tensors="pt", padding=True,
     ).to(qwen_model.device)
 
@@ -678,35 +372,29 @@ def process_inputs(image, category, prompt, point_radius, box_thickness, text_sc
             streamer=streamer,
             max_new_tokens=2048,
             use_cache=True,
-            do_sample=False,  # Deterministic for reliable JSON
+            do_sample=False,
         ),
     )
     thread.start()
     full_text = ""
     for tok in streamer:
         full_text += tok
-        yield image, full_text
     thread.join()
 
-    # ----- Post-process for each category -----
+    result_text = full_text
+    result_image = pil_image.copy()
+
     if category == "Point":
         parsed = safe_parse_json(full_text)
-        # Handle dict containing the list
         if isinstance(parsed, dict):
-            list_found = False
             for k in ["points", "keypoints", "point"]:
                 if k in parsed and isinstance(parsed[k], list):
                     parsed = parsed[k]
-                    list_found = True
                     break
-            if not list_found:
-                # fallback to first list value found
+            else:
                 for v in parsed.values():
-                    if isinstance(v, list):
-                        parsed = v
-                        break
-                else:
-                    parsed = []
+                    if isinstance(v, list): parsed = v; break
+                else: parsed = []
 
         result = {"points": []}
         if isinstance(parsed, list):
@@ -714,36 +402,25 @@ def process_inputs(image, category, prompt, point_radius, box_thickness, text_sc
                 pt = _extract_point(item)
                 if pt:
                     x, y = pt
-                    result["points"].append({
-                        "label": item.get("label", ""),
-                        "x": x / 1000.0, "y": y / 1000.0,
-                    })
+                    result["points"].append({"label": item.get("label", ""), "x": x / 1000.0, "y": y / 1000.0})
 
         if result["points"]:
-            yield annotate_image(
-                image.copy(), result,
-                point_radius=point_radius, box_thickness=box_thickness, text_scale=text_scale,
-            ), json.dumps(result, indent=2)
+            result_image = annotate_image(pil_image.copy(), result, point_radius, box_thickness, text_scale)
+            result_text = json.dumps(result, indent=2)
         else:
-            yield image.copy(), f"Could not extract any points.\nRaw model output:\n{full_text}"
+            result_text = f"Could not extract any points.\nRaw model output:\n{full_text}"
 
     elif category == "Detect":
         parsed = safe_parse_json(full_text)
-        # Handle dict containing the list
         if isinstance(parsed, dict):
-            list_found = False
             for k in ["objects", "detections", "bboxes", "boxes", "results"]:
                 if k in parsed and isinstance(parsed[k], list):
                     parsed = parsed[k]
-                    list_found = True
                     break
-            if not list_found:
+            else:
                 for v in parsed.values():
-                    if isinstance(v, list):
-                        parsed = v
-                        break
-                else:
-                    parsed = []
+                    if isinstance(v, list): parsed = v; break
+                else: parsed = []
 
         result = {"objects": []}
         if isinstance(parsed, list):
@@ -758,30 +435,22 @@ def process_inputs(image, category, prompt, point_radius, box_thickness, text_sc
                     })
 
         if result["objects"]:
-            yield annotate_image(
-                image.copy(), result,
-                point_radius=point_radius, box_thickness=box_thickness, text_scale=text_scale,
-            ), json.dumps(result, indent=2)
+            result_image = annotate_image(pil_image.copy(), result, point_radius, box_thickness, text_scale)
+            result_text = json.dumps(result, indent=2)
         else:
-            yield image.copy(), f"Could not extract any objects.\nRaw model output:\n{full_text}"
+            result_text = f"Could not extract any objects.\nRaw model output:\n{full_text}"
 
     elif category == "Spatial":
         parsed = safe_parse_json(full_text)
-        # Handle dict containing the list
         if isinstance(parsed, dict):
-            list_found = False
             for k in ["points", "waypoints", "path", "route", "nodes", "map"]:
                 if k in parsed and isinstance(parsed[k], list):
                     parsed = parsed[k]
-                    list_found = True
                     break
-            if not list_found:
+            else:
                 for v in parsed.values():
-                    if isinstance(v, list):
-                        parsed = v
-                        break
-                else:
-                    parsed = []
+                    if isinstance(v, list): parsed = v; break
+                else: parsed = []
 
         result = {"points": []}
         if isinstance(parsed, list):
@@ -789,293 +458,48 @@ def process_inputs(image, category, prompt, point_radius, box_thickness, text_sc
                 pt = _extract_point(item)
                 if pt:
                     x, y = pt
-                    result["points"].append({
-                        "label": item.get("label", "waypoint"),
-                        "x": x / 1000.0, "y": y / 1000.0,
-                    })
+                    result["points"].append({"label": item.get("label", "waypoint"), "x": x / 1000.0, "y": y / 1000.0})
 
         if result["points"]:
-            wp_lines = "\n".join(
-                f"  {i+1}. {p['label']}  →  ({p['x']:.3f}, {p['y']:.3f})"
-                for i, p in enumerate(result["points"])
-            )
-            summary = (
+            wp_lines = "\n".join(f"  {i+1}. {p['label']}  →  ({p['x']:.3f}, {p['y']:.3f})" for i, p in enumerate(result["points"]))
+            result_text = (
                 f"Spatial map generated.\n"
                 f"Waypoints ({len(result['points'])}):\n{wp_lines}\n"
                 f"Path segments: {max(0, len(result['points']) - 1)}"
             )
-            yield annotate_spatial_path(
-                image.copy(), result,
-                dot_radius=point_radius, line_width=box_thickness * 2, text_scale=text_scale,
-            ), summary
+            result_image = annotate_spatial_path(pil_image.copy(), result, point_radius, box_thickness * 2, text_scale)
         else:
-            yield image.copy(), f"Could not extract any spatial waypoints.\nRaw model output:\n{full_text}"
-
-
-def on_gpu_duration_change(idx):
-    seconds = GPU_DURATIONS[int(idx)]
-    return f"**GPU budget:** {seconds}s requested per run", seconds
-
-
-# ------------------------------------------------------------------
-# HTML building blocks
-# ------------------------------------------------------------------
-def html_header():
-    return f"""
-    <div class="app-header">
-        <div class="header-content">
-            <div class="header-icon-wrap">{SVG_BRAIN}</div>
-            <div class="header-text">
-                <h1>Qwen3.8 27B &mdash; Object-Detection</h1>
-                <div class="header-meta">
-                    <span class="meta-badge">{SVG_CHIP} {MODEL_NAME}</span>
-                    <span class="meta-sep"></span>
-                    <span class="meta-cap">Object Detection</span>
-                    <span class="meta-sep"></span>
-                    <span class="meta-cap">Point Localization</span>
-                    <span class="meta-sep"></span>
-                    <span class="meta-cap">Spatial Guidance</span>
-                </div>
-            </div>
-        </div>
-    </div>
-    """
-
+            result_text = f"Could not extract any spatial waypoints.\nRaw model output:\n{full_text}"
 
-def html_tab_intro(icon_svg, title, description, detail=""):
-    sub = f'<p class="intro-sub">{detail}</p>' if detail else ""
-    return f"""
-    <div class="tab-intro">
-        <div class="intro-icon">{icon_svg}</div>
-        <div class="intro-text">
-            <p><strong>{title}</strong> &mdash; {description}</p>
-            {sub}
-        </div>
-    </div>
-    """
-
-
-def html_status_indicator(text):
-    return f"""
-    <div class="status-indicator">
-        <span class="status-dot"></span>
-        <span class="status-text">{text}</span>
-    </div>
-    """
-
-
-def html_divider():
-    return '<div class="section-divider"></div>'
-
-
-# ------------------------------------------------------------------
-# Gradio UI
-# ------------------------------------------------------------------
-with gr.Blocks() as demo:
-
-    gr.HTML(html_header())
-
-    # ================================================================
-    # Global Visualization & Performance Settings
-    # (shared across all tabs)
-    # ================================================================
-    with gr.Accordion("Visualization & Performance Settings", open=False):
-        gr.HTML(html_tab_intro(
-            SVG_GEAR,
-            "Settings",
-            "Tune how bounding boxes / points / waypoints are drawn, and how much "
-            "GPU time is requested for each run.",
-        ))
-        with gr.Row():
-            point_radius_slider = gr.Slider(
-                minimum=2, maximum=20, step=1, value=4,
-                label="Point / Waypoint Radius (px)",
-                info="Size of point markers and spatial waypoint dots",
-            )
-            box_thickness_slider = gr.Slider(
-                minimum=1, maximum=8, step=1, value=1,
-                label="Bounding Box Thickness (px)",
-                info="Also scales the spatial path line width",
-            )
-            text_scale_slider = gr.Slider(
-                minimum=0.2, maximum=1.5, step=0.05, value=0.4,
-                label="Label Text Scale",
-                info="Size of labels drawn on the image",
-            )
-        with gr.Row():
-            gpu_duration_slider = gr.Slider(
-                minimum=0, maximum=len(GPU_DURATIONS) - 1, step=1,
-                value=DEFAULT_GPU_DURATION_IDX,
-                label="GPU Duration",
-                info="Steps: 60 · 90 · 120 · 150 · 180 · 250 · 300 seconds",
-            )
-            gpu_duration_label = gr.Markdown(
-                f"**GPU budget:** {GPU_DURATIONS[DEFAULT_GPU_DURATION_IDX]}s requested per run"
-            )
-        gpu_duration_state = gr.State(GPU_DURATIONS[DEFAULT_GPU_DURATION_IDX])
-
-        gpu_duration_slider.change(
-            fn=on_gpu_duration_change,
-            inputs=[gpu_duration_slider],
-            outputs=[gpu_duration_label, gpu_duration_state],
-        )
-
-    with gr.Tabs():
-
-        # =============================================================
-        # Object Detection Tab
-        # =============================================================
-        with gr.Tab("Object Detection"):
-            gr.HTML(html_tab_intro(
-                SVG_DETECT,
-                "Object Detection",
-                "Draw bounding boxes around the objects you describe. "
-                "Just tell the model what to find and it returns precise coordinates.",
-                "The app overlays masks and boxes automatically.",
-            ))
-            with gr.Row():
-                with gr.Column():
-                    det_img = gr.Image(type="pil", label="Upload Image", height=350)
-                    det_prompt = gr.Textbox(
-                        label="What to detect",
-                        placeholder="e.g., all cars, the people, the red sign",
-                        lines=3,
-                    )
-                    det_btn = gr.Button("Detect Objects", variant="primary")
-                    gr.HTML(html_divider())
-                    gr.Examples(
-                        examples=DETECT_EXAMPLES,
-                        inputs=[det_img, det_prompt],
-                        label="Examples",
-                    )
-                with gr.Column(scale=2):
-                    det_out_img = gr.Image(label="Detected Objects", height=380)
-                    det_out_text = gr.Textbox(label="Detection Result", lines=10, interactive=True)
-                    gr.HTML(html_status_indicator("Bounding boxes are drawn automatically."))
-
-            def _det_wrapper(image, prompt, point_radius, box_thickness, text_scale, gpu_duration_seconds):
-                outputs = None
-                for outputs in process_inputs(
-                    image, "Detect", prompt,
-                    point_radius, box_thickness, text_scale, gpu_duration_seconds,
-                ):
-                    pass
-                return outputs if outputs else (image, "")
-
-            det_btn.click(
-                fn=_det_wrapper,
-                inputs=[
-                    det_img, det_prompt,
-                    point_radius_slider, box_thickness_slider, text_scale_slider,
-                    gpu_duration_state,
-                ],
-                outputs=[det_out_img, det_out_text],
-            )
-
-        # =============================================================
-        # Point Localization Tab
-        # =============================================================
-        with gr.Tab("Point Localization"):
-            gr.HTML(html_tab_intro(
-                SVG_POINT,
-                "Point Localization",
-                "Locate specific points of interest in the image — the tip of an object, "
-                "a particular feature, or anything you can describe.",
-                "Returns precise 2D coordinates highlighted on the image.",
-            ))
-            with gr.Row():
-                with gr.Column():
-                    pt_img = gr.Image(type="pil", label="Upload Image", height=350)
-                    pt_prompt = gr.Textbox(
-                        label="What to locate",
-                        placeholder="e.g., the tip of the pen / the gun held by the person",
-                        lines=3,
-                    )
-                    pt_btn = gr.Button("Locate Point", variant="primary")
-                    gr.HTML(html_divider())
-                    gr.Examples(
-                        examples=POINT_EXAMPLES,
-                        inputs=[pt_img, pt_prompt],
-                        label="Examples",
-                    )
-                with gr.Column(scale=2):
-                    pt_out_img = gr.Image(label="Localized Point", height=380)
-                    pt_out_text = gr.Textbox(label="Localization Result", lines=10, interactive=True)
-                    gr.HTML(html_status_indicator("Points are highlighted with bright markers."))
-
-            def _pt_wrapper(image, prompt, point_radius, box_thickness, text_scale, gpu_duration_seconds):
-                outputs = None
-                for outputs in process_inputs(
-                    image, "Point", prompt,
-                    point_radius, box_thickness, text_scale, gpu_duration_seconds,
-                ):
-                    pass
-                return outputs if outputs else (image, "")
-
-            pt_btn.click(
-                fn=_pt_wrapper,
-                inputs=[
-                    pt_img, pt_prompt,
-                    point_radius_slider, box_thickness_slider, text_scale_slider,
-                    gpu_duration_state,
-                ],
-                outputs=[pt_out_img, pt_out_text],
-            )
-
-        # =============================================================
-        # Spatial Guidance Tab
-        # =============================================================
-        with gr.Tab("Spatial Guidance"):
-            gr.HTML(html_tab_intro(
-                SVG_ROUTE,
-                "Spatial Guidance",
-                "Map a path or spatial route between objects in the image. "
-                "The model identifies key waypoints, and the app draws connecting dots, "
-                "directional arrows, and labels to produce a spatial map.",
-                "Use cases: navigation paths, object-to-object routes, spatial relationships.",
-            ))
-            with gr.Row():
-                with gr.Column():
-                    sp_img = gr.Image(type="pil", label="Upload Image", height=350)
-                    sp_prompt = gr.Textbox(
-                        label="Describe the path / spatial map",
-                        placeholder="e.g., Map a path from the door to the window / "
-                                   "spatial route between the chair and the desk",
-                        lines=3,
-                    )
-                    sp_btn = gr.Button("Generate Spatial Map", variant="primary")
-                    gr.HTML(html_divider())
-                    gr.Examples(
-                        examples=SPATIAL_EXAMPLES,
-                        inputs=[sp_img, sp_prompt],
-                        label="Examples",
-                    )
-                with gr.Column(scale=2):
-                    sp_out_img = gr.Image(label="Spatial Map Output", height=380)
-                    sp_out_text = gr.Textbox(label="Spatial Summary", lines=10, interactive=True)
-                    gr.HTML(html_status_indicator(
-                        "Waypoints are connected with directional arrows to form a clear path."
-                    ))
-
-            def _sp_wrapper(image, prompt, point_radius, box_thickness, text_scale, gpu_duration_seconds):
-                outputs = None
-                for outputs in process_inputs(
-                    image, "Spatial", prompt,
-                    point_radius, box_thickness, text_scale, gpu_duration_seconds,
-                ):
-                    pass
-                return outputs if outputs else (image, "")
-
-            sp_btn.click(
-                fn=_sp_wrapper,
-                inputs=[
-                    sp_img, sp_prompt,
-                    point_radius_slider, box_thickness_slider, text_scale_slider,
-                    gpu_duration_state,
-                ],
-                outputs=[sp_out_img, sp_out_text],
-            )
+    return {"image": pil_to_b64_png(result_image), "text": result_text}
 
+@app.api(name="load_example", queue=False)
+def load_example(idx: float) -> dict:
+    try:
+        i = int(idx)
+    except (ValueError, TypeError):
+        i = -1
+    if i < 0 or i >= len(EXAMPLES_CONFIG):
+        return {"image": "", "prompt": "", "mode": "Detect", "name": "", "status": "error"}
+    ex = EXAMPLES_CONFIG[i]
+    b64 = encode_full_image(ex["image"])
+    return {
+        "image": b64,
+        "prompt": ex["prompt"],
+        "mode": ex["mode"],
+        "name": os.path.basename(ex["image"]),
+        "status": "ok" if b64 else "error"
+    }
+
+@app.get("/api/config")
+def client_config():
+    return CLIENT_CONFIG
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return f.read()
 
 if __name__ == "__main__":
-    demo.launch(css=css, theme=steel_blue_theme, show_error=True, ssr_mode=False)
+    app.launch(show_error=True, mcp_server=True)