update app

app.py

@@ -1,13 +1,11 @@
 import os
-import random
-import uuid
+import gc
 import json
 import time
-import asyncio
-from threading import Thread
-from pathlib import Path
+import base64
+import uuid
 from io import BytesIO
-from typing import Optional, Tuple, Dict, Any, Iterable
+from threading import Thread
 
 import gradio as gr
 import spaces
@@ -15,7 +13,6 @@ import torch
 import numpy as np
 from PIL import Image
 import cv2
-import requests
 import fitz
 
 from transformers import (
@@ -24,202 +21,12 @@ from transformers import (
     AutoProcessor,
     TextIteratorStreamer,
 )
-from transformers.image_utils import load_image
-
-from gradio.themes import Soft
-from gradio.themes.utils import colors, fonts, sizes
-
-colors.orange_red = colors.Color(
-    name="orange_red",
-    c50="#FFF0E5",
-    c100="#FFE0CC",
-    c200="#FFC299",
-    c300="#FFA366",
-    c400="#FF8533",
-    c500="#FF4500",
-    c600="#E63E00",
-    c700="#CC3700",
-    c800="#B33000",
-    c900="#992900",
-    c950="#802200",
-)
-
-class OrangeRedTheme(Soft):
-    def __init__(
-        self,
-        *,
-        primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.orange_red,
-        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_700)",
-            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            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",
-        )
-
-orange_red_theme = OrangeRedTheme()
-
-css = """
-#main-title h1 {
-    font-size: 2.3em !important;
-}
-#output-title h2 {
-    font-size: 2.2em !important;
-}
-
-/* RadioAnimated Styles */
-.ra-wrap{ width: fit-content; }
-.ra-inner{
-  position: relative; display: inline-flex; align-items: center; gap: 0; padding: 6px;
-  background: var(--neutral-200); border-radius: 9999px; overflow: hidden;
-}
-.ra-input{ display: none; }
-.ra-label{
-  position: relative; z-index: 2; padding: 8px 16px;
-  font-family: inherit; font-size: 14px; font-weight: 600;
-  color: var(--neutral-500); cursor: pointer; transition: color 0.2s; white-space: nowrap;
-}
-.ra-highlight{
-  position: absolute; z-index: 1; top: 6px; left: 6px;
-  height: calc(100% - 12px); border-radius: 9999px;
-  background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  transition: transform 0.2s, width 0.2s;
-}
-.ra-input:checked + .ra-label{ color: black; }
-
-/* Dark mode adjustments for Radio */
-.dark .ra-inner { background: var(--neutral-800); }
-.dark .ra-label { color: var(--neutral-400); }
-.dark .ra-highlight { background: var(--neutral-600); }
-.dark .ra-input:checked + .ra-label { color: white; }
-
-#gpu-duration-container {
-    padding: 10px;
-    border-radius: 8px;
-    background: var(--background-fill-secondary);
-    border: 1px solid var(--border-color-primary);
-    margin-top: 10px;
-}
-"""
 
 MAX_MAX_NEW_TOKENS = 4096
 DEFAULT_MAX_NEW_TOKENS = 1024
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
-
 print("Using device:", device)
 
-class RadioAnimated(gr.HTML):
-    def __init__(self, choices, value=None, **kwargs):
-        if not choices or len(choices) < 2:
-            raise ValueError("RadioAnimated requires at least 2 choices.")
-        if value is None:
-            value = choices[0]
-
-        uid = uuid.uuid4().hex[:8]
-        group_name = f"ra-{uid}"
-
-        inputs_html = "\n".join(
-            f"""
-            <input class="ra-input" type="radio" name="{group_name}" id="{group_name}-{i}" value="{c}">
-            <label class="ra-label" for="{group_name}-{i}">{c}</label>
-            """
-            for i, c in enumerate(choices)
-        )
-
-        html_template = f"""
-        <div class="ra-wrap" data-ra="{uid}">
-          <div class="ra-inner">
-            <div class="ra-highlight"></div>
-            {inputs_html}
-          </div>
-        </div>
-        """
-
-        js_on_load = r"""
-        (() => {
-          const wrap = element.querySelector('.ra-wrap');
-          const inner = element.querySelector('.ra-inner');
-          const highlight = element.querySelector('.ra-highlight');
-          const inputs = Array.from(element.querySelectorAll('.ra-input'));
-
-          if (!inputs.length) return;
-
-          const choices = inputs.map(i => i.value);
-
-          function setHighlightByIndex(idx) {
-            const n = choices.length;
-            const pct = 100 / n;
-            highlight.style.width = `calc(${pct}% - 6px)`;
-            highlight.style.transform = `translateX(${idx * 100}%)`;
-          }
-
-          function setCheckedByValue(val, shouldTrigger=false) {
-            const idx = Math.max(0, choices.indexOf(val));
-            inputs.forEach((inp, i) => { inp.checked = (i === idx); });
-            setHighlightByIndex(idx);
-
-            props.value = choices[idx];
-            if (shouldTrigger) trigger('change', props.value);
-          }
-
-          setCheckedByValue(props.value ?? choices[0], false);
-
-          inputs.forEach((inp) => {
-            inp.addEventListener('change', () => {
-              setCheckedByValue(inp.value, true);
-            });
-          });
-        })();
-        """
-
-        super().__init__(
-            value=value,
-            html_template=html_template,
-            js_on_load=js_on_load,
-            **kwargs
-        )
-
-def apply_gpu_duration(val: str):
-    return int(val)
-
 MODEL_ID_Q4B = "Qwen/Qwen3-VL-4B-Instruct"
 processor_q4b = AutoProcessor.from_pretrained(MODEL_ID_Q4B, trust_remote_code=True)
 model_q4b = Qwen3VLForConditionalGeneration.from_pretrained(
@@ -265,20 +72,71 @@ model_x3b = Qwen2_5_VLForConditionalGeneration.from_pretrained(
     torch_dtype=torch.float16
 ).to(device).eval()
 
+MODEL_MAP = {
+    "Qwen3-VL-4B-Instruct": (processor_q4b, model_q4b),
+    "Qwen3-VL-8B-Instruct": (processor_q8b, model_q8b),
+    "Qwen3-VL-2B-Instruct": (processor_q2b, model_q2b),
+    "Qwen2.5-VL-7B-Instruct": (processor_m7b, model_m7b),
+    "Qwen2.5-VL-3B-Instruct": (processor_x3b, model_x3b),
+}
+
+MODEL_CHOICES = list(MODEL_MAP.keys())
+
+image_examples = [
+    {"query": "Perform OCR on the image...", "media": "examples/images/1.jpg", "model": "Qwen3-VL-4B-Instruct", "kind": "image"},
+    {"query": "Caption the image. Describe the safety measures shown in the image. Conclude whether the situation is (safe or unsafe)...", "media": "examples/images/2.jpg", "model": "Qwen3-VL-8B-Instruct", "kind": "image"},
+    {"query": "Solve the problem...", "media": "examples/images/3.png", "model": "Qwen3-VL-2B-Instruct", "kind": "image"},
+]
+
+pdf_examples = [
+    {"query": "Extract the content precisely.", "media": "examples/pdfs/doc1.pdf", "model": "Qwen2.5-VL-7B-Instruct", "kind": "pdf"},
+    {"query": "Analyze and provide a short report.", "media": "examples/pdfs/doc2.pdf", "model": "Qwen2.5-VL-3B-Instruct", "kind": "pdf"},
+]
+
+gif_examples = [
+    {"query": "Describe this GIF.", "media": "examples/gifs/1.gif", "model": "Qwen3-VL-4B-Instruct", "kind": "gif"},
+    {"query": "Describe this GIF.", "media": "examples/gifs/2.gif", "model": "Qwen3-VL-8B-Instruct", "kind": "gif"},
+]
+
+caption_examples = [
+    {"query": "Generate a detailed caption and structured visual attributes.", "media": "examples/captions/1.JPG", "model": "Qwen3-VL-4B-Instruct", "kind": "caption"},
+    {"query": "Generate a detailed caption and structured visual attributes.", "media": "examples/captions/2.jpeg", "model": "Qwen2.5-VL-7B-Instruct", "kind": "caption"},
+    {"query": "Generate a detailed caption and structured visual attributes.", "media": "examples/captions/3.jpeg", "model": "Qwen2.5-VL-3B-Instruct", "kind": "caption"},
+]
+
+all_examples = image_examples + pdf_examples + gif_examples + caption_examples
+
 
 def select_model(model_name: str):
-    if model_name == "Qwen3-VL-4B-Instruct":
-        return processor_q4b, model_q4b
-    elif model_name == "Qwen3-VL-8B-Instruct":
-        return processor_q8b, model_q8b
-    elif model_name == "Qwen3-VL-2B-Instruct":
-        return processor_q2b, model_q2b
-    elif model_name == "Qwen2.5-VL-7B-Instruct":
-        return processor_m7b, model_m7b
-    elif model_name == "Qwen2.5-VL-3B-Instruct":
-        return processor_x3b, model_x3b
-    else:
+    if model_name not in MODEL_MAP:
         raise ValueError("Invalid model selected.")
+    return MODEL_MAP[model_name]
+
+
+def pil_to_data_url(img: Image.Image, fmt="PNG"):
+    buf = BytesIO()
+    img.save(buf, format=fmt)
+    data = base64.b64encode(buf.getvalue()).decode()
+    mime = "image/png" if fmt.upper() == "PNG" else "image/jpeg"
+    return f"data:{mime};base64,{data}"
+
+
+def file_to_data_url(path):
+    if not os.path.exists(path):
+        return ""
+    ext = path.rsplit(".", 1)[-1].lower()
+    mime = {
+        "jpg": "image/jpeg",
+        "jpeg": "image/jpeg",
+        "png": "image/png",
+        "webp": "image/webp",
+        "gif": "image/gif",
+        "pdf": "application/pdf",
+    }.get(ext, "application/octet-stream")
+    with open(path, "rb") as f:
+        data = base64.b64encode(f.read()).decode()
+    return f"data:{mime};base64,{data}"
+
 
 def extract_gif_frames(gif_path: str):
     if not gif_path:
@@ -288,26 +146,12 @@ def extract_gif_frames(gif_path: str):
         frame_indices = np.linspace(0, total_frames - 1, min(total_frames, 10), dtype=int)
         frames = []
         for i in frame_indices:
-            gif.seek(i)
+            gif.seek(int(i))
             frames.append(gif.convert("RGB").copy())
     return frames
 
-def downsample_video(video_path):
-    vidcap = cv2.VideoCapture(video_path)
-    total_frames = int(vidcap.get(cv2.CAP_PROP_FRAME_COUNT))
-    frames = []
-    frame_indices = np.linspace(0, total_frames - 1, min(total_frames, 10), dtype=int)
-    for i in frame_indices:
-        vidcap.set(cv2.CAP_PROP_POS_FRAMES, i)
-        success, image = vidcap.read()
-        if success:
-            image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
-            pil_image = Image.fromarray(image)
-            frames.append(pil_image)
-    vidcap.release()
-    return frames
 
-def convert_pdf_to_images(file_path: str, dpi: int = 200):
+def convert_pdf_to_images(file_path: str, dpi: int = 160):
     if not file_path:
         return []
     images = []
@@ -318,14 +162,135 @@ def convert_pdf_to_images(file_path: str, dpi: int = 200):
         page = pdf_document.load_page(page_num)
         pix = page.get_pixmap(matrix=mat)
         img_data = pix.tobytes("png")
-        images.append(Image.open(BytesIO(img_data)))
+        images.append(Image.open(BytesIO(img_data)).convert("RGB"))
     pdf_document.close()
     return images
 
-def get_initial_pdf_state() -> Dict[str, Any]:
+
+def make_thumb_b64(path, kind="image", max_dim=240):
+    try:
+        if kind == "pdf":
+            pages = convert_pdf_to_images(path, dpi=120)
+            if not pages:
+                return ""
+            img = pages[0].convert("RGB")
+        elif kind == "gif":
+            frames = extract_gif_frames(path)
+            if not frames:
+                return ""
+            img = frames[0].convert("RGB")
+        else:
+            img = Image.open(path).convert("RGB")
+        img.thumbnail((max_dim, max_dim))
+        return pil_to_data_url(img, "JPEG")
+    except Exception as e:
+        print("Thumbnail error:", e)
+        return ""
+
+
+def build_example_cards_html():
+    cards = ""
+    for i, ex in enumerate(all_examples):
+        thumb = make_thumb_b64(ex["media"], ex["kind"])
+        media_badge = ex["kind"].upper()
+        prompt_short = ex["query"][:72] + ("..." if len(ex["query"]) > 72 else "")
+        cards += f"""
+        <div class="example-card" data-idx="{i}">
+            <div class="example-thumb-wrap">
+                {"<img src='" + thumb + "' alt=''>" if thumb else "<div class='example-thumb-placeholder'>Preview</div>"}
+                <div class="example-media-chip">{media_badge}</div>
+            </div>
+            <div class="example-meta-row">
+                <span class="example-badge">{ex["model"]}</span>
+            </div>
+            <div class="example-prompt-text">{prompt_short}</div>
+        </div>
+        """
+    return cards
+
+
+EXAMPLE_CARDS_HTML = build_example_cards_html()
+
+
+def get_initial_pdf_state():
     return {"pages": [], "total_pages": 0, "current_page_index": 0}
 
-def load_and_preview_pdf(file_path: Optional[str]) -> Tuple[Optional[Image.Image], Dict[str, Any], str]:
+
+def load_example_data(idx_str):
+    try:
+        idx = int(float(idx_str))
+    except Exception:
+        return json.dumps({"status": "error", "message": "Invalid example index"})
+    if idx < 0 or idx >= len(all_examples):
+        return json.dumps({"status": "error", "message": "Example index out of range"})
+    ex = all_examples[idx]
+
+    payload = {
+        "status": "ok",
+        "query": ex["query"],
+        "model": ex["model"],
+        "kind": ex["kind"],
+        "name": os.path.basename(ex["media"]),
+    }
+
+    if ex["kind"] == "pdf":
+        file_b64 = file_to_data_url(ex["media"])
+        pages = convert_pdf_to_images(ex["media"])
+        preview_b64 = pil_to_data_url(pages[0], "JPEG") if pages else ""
+        payload["file"] = file_b64
+        payload["preview"] = preview_b64
+        payload["page_info"] = f"Page 1 / {len(pages)}" if pages else "No file loaded"
+    else:
+        media_b64 = file_to_data_url(ex["media"])
+        if not media_b64:
+            return json.dumps({"status": "error", "message": f"Could not load example {ex['kind']}"})
+        payload["media"] = media_b64
+
+    return json.dumps(payload)
+
+
+def b64_to_pil(b64_str):
+    if not b64_str:
+        return None
+    try:
+        if b64_str.startswith("data:"):
+            _, data = b64_str.split(",", 1)
+        else:
+            data = b64_str
+        image_data = base64.b64decode(data)
+        return Image.open(BytesIO(image_data)).convert("RGB")
+    except Exception:
+        return None
+
+
+def b64_to_temp_file(b64_str, base_dir="/tmp/qwen3_vl_outpost_media"):
+    if not b64_str:
+        return None
+    try:
+        os.makedirs(base_dir, exist_ok=True)
+        if b64_str.startswith("data:"):
+            header, data = b64_str.split(",", 1)
+            mime = header.split(";")[0].replace("data:", "")
+        else:
+            data = b64_str
+            mime = "application/octet-stream"
+        ext = {
+            "application/pdf": ".pdf",
+            "image/gif": ".gif",
+            "image/png": ".png",
+            "image/jpeg": ".jpg",
+            "image/webp": ".webp",
+        }.get(mime, ".bin")
+        raw = base64.b64decode(data)
+        path = os.path.join(base_dir, f"{uuid.uuid4().hex}{ext}")
+        with open(path, "wb") as f:
+            f.write(raw)
+        return path
+    except Exception:
+        return None
+
+
+def load_and_preview_pdf(file_path):
     state = get_initial_pdf_state()
     if not file_path:
         return None, state, '<div style="text-align:center;">No file loaded</div>'
@@ -340,7 +305,8 @@ def load_and_preview_pdf(file_path: Optional[str]) -> Tuple[Optional[Image.Image
     except Exception as e:
         return None, state, f'<div style="text-align:center;">Failed to load preview: {e}</div>'
 
-def navigate_pdf_page(direction: str, state: Dict[str, Any]):
+
+def navigate_pdf_page(direction: str, state):
     if not state or not state["pages"]:
         return None, state, '<div style="text-align:center;">No file loaded</div>'
     current_index = state["current_page_index"]
@@ -356,154 +322,96 @@ def navigate_pdf_page(direction: str, state: Dict[str, Any]):
     page_info_html = f'<div style="text-align:center;">Page {new_index + 1} / {total_pages}</div>'
     return image_preview, state, page_info_html
 
-def calc_timeout_image(model_name: str, text: str, image: Image.Image, 
-                       max_new_tokens: int, temperature: float, top_p: float,
-                       top_k: int, repetition_penalty: float, gpu_timeout: int):
-    try:
-        return int(gpu_timeout)
-    except:
-        return 60
 
-def calc_timeout_video(model_name: str, text: str, video_path: str,
-                       max_new_tokens: int, temperature: float, top_p: float,
-                       top_k: int, repetition_penalty: float, gpu_timeout: int):
+def calc_timeout_generic(*args):
     try:
-        return int(gpu_timeout)
-    except:
+        return int(args[-1])
+    except Exception:
         return 60
 
-def calc_timeout_pdf(model_name: str, text: str, state: Dict[str, Any],
-                     max_new_tokens: int, temperature: float, top_p: float,
-                     top_k: int, repetition_penalty: float, gpu_timeout: int):
-    try:
-        return int(gpu_timeout)
-    except:
-        return 60
 
-def calc_timeout_caption(model_name: str, image: Image.Image,
-                         max_new_tokens: int, temperature: float, top_p: float,
-                         top_k: int, repetition_penalty: float, gpu_timeout: int):
-    try:
-        return int(gpu_timeout)
-    except:
-        return 60
-
-def calc_timeout_gif(model_name: str, text: str, gif_path: str,
-                     max_new_tokens: int, temperature: float, top_p: float,
-                     top_k: int, repetition_penalty: float, gpu_timeout: int):
-    try:
-        return int(gpu_timeout)
-    except:
-        return 60
-
-@spaces.GPU(duration=calc_timeout_image)
-def generate_image(model_name: str, text: str, image: Image.Image, 
-                   max_new_tokens: int = 1024, temperature: float = 0.6, 
-                   top_p: float = 0.9, top_k: int = 50, 
+@spaces.GPU(duration=calc_timeout_generic)
+def generate_image(model_name: str, text: str, image: Image.Image,
+                   max_new_tokens: int = 1024, temperature: float = 0.6,
+                   top_p: float = 0.9, top_k: int = 50,
                    repetition_penalty: float = 1.2, gpu_timeout: int = 60):
     if image is None:
-        yield "Please upload an image.", "Please upload an image."
-        return
-    try:
-        processor, model = select_model(model_name)
-    except ValueError as e:
-        yield str(e), str(e)
-        return
-        
+        raise gr.Error("Please upload an image.")
+    processor, model = select_model(model_name)
     messages = [{"role": "user", "content": [{"type": "image"}, {"type": "text", "text": text}]}]
     prompt_full = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
     inputs = processor(text=[prompt_full], images=[image], return_tensors="pt", padding=True).to(device)
     streamer = TextIteratorStreamer(processor, skip_prompt=True, skip_special_tokens=True)
-    generation_kwargs = {**inputs, "streamer": streamer, "max_new_tokens": max_new_tokens}
+    generation_kwargs = {
+        **inputs,
+        "streamer": streamer,
+        "max_new_tokens": int(max_new_tokens),
+        "do_sample": True,
+        "temperature": float(temperature),
+        "top_p": float(top_p),
+        "top_k": int(top_k),
+        "repetition_penalty": float(repetition_penalty),
+    }
     thread = Thread(target=model.generate, kwargs=generation_kwargs)
     thread.start()
     buffer = ""
     for new_text in streamer:
         buffer += new_text
         time.sleep(0.01)
-        yield buffer, buffer
-
-@spaces.GPU(duration=calc_timeout_video)
-def generate_video(model_name: str, text: str, video_path: str, 
-                   max_new_tokens: int = 1024, temperature: float = 0.6, 
-                   top_p: float = 0.9, top_k: int = 50, 
-                   repetition_penalty: float = 1.2, gpu_timeout: int = 90):
-    if video_path is None:
-        yield "Please upload a video.", "Please upload a video."
-        return
-    try:
-        processor, model = select_model(model_name)
-    except ValueError as e:
-        yield str(e), str(e)
-        return
+        yield buffer
+    gc.collect()
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
 
-    frames = downsample_video(video_path)
-    if not frames:
-        yield "Could not process video.", "Could not process video."
-        return
-        
-    messages = [{"role": "user", "content": [{"type": "text", "text": text}]}]
-    for frame in frames:
-        messages[0]["content"].insert(0, {"type": "image"})
-    prompt_full = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
-    inputs = processor(text=[prompt_full], images=frames, return_tensors="pt", padding=True).to(device)
-    streamer = TextIteratorStreamer(processor, skip_prompt=True, skip_special_tokens=True)
-    generation_kwargs = {**inputs, "streamer": streamer, "max_new_tokens": max_new_tokens, "do_sample": True, "temperature": temperature, "top_p": top_p, "top_k": top_k, "repetition_penalty": repetition_penalty}
-    thread = Thread(target=model.generate, kwargs=generation_kwargs)
-    thread.start()
-    buffer = ""
-    for new_text in streamer:
-        buffer += new_text
-        time.sleep(0.01)
-        yield buffer, buffer
 
-@spaces.GPU(duration=calc_timeout_pdf)
-def generate_pdf(model_name: str, text: str, state: Dict[str, Any], 
-                 max_new_tokens: int = 2048, temperature: float = 0.6, 
-                 top_p: float = 0.9, top_k: int = 50, 
+@spaces.GPU(duration=calc_timeout_generic)
+def generate_pdf(model_name: str, text: str, state,
+                 max_new_tokens: int = 2048, temperature: float = 0.6,
+                 top_p: float = 0.9, top_k: int = 50,
                  repetition_penalty: float = 1.2, gpu_timeout: int = 120):
     if not state or not state["pages"]:
-        yield "Please upload a PDF file first.", "Please upload a PDF file first."
-        return
-    try:
-        processor, model = select_model(model_name)
-    except ValueError as e:
-        yield str(e), str(e)
-        return
-
+        raise gr.Error("Please upload a PDF file first.")
+    processor, model = select_model(model_name)
     page_images = state["pages"]
     full_response = ""
     for i, image in enumerate(page_images):
         page_header = f"--- Page {i+1}/{len(page_images)} ---\n"
-        yield full_response + page_header, full_response + page_header
+        yield full_response + page_header
         messages = [{"role": "user", "content": [{"type": "image"}, {"type": "text", "text": text}]}]
         prompt_full = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
         inputs = processor(text=[prompt_full], images=[image], return_tensors="pt", padding=True).to(device)
         streamer = TextIteratorStreamer(processor, skip_prompt=True, skip_special_tokens=True)
-        generation_kwargs = {**inputs, "streamer": streamer, "max_new_tokens": max_new_tokens}
+        generation_kwargs = {
+            **inputs,
+            "streamer": streamer,
+            "max_new_tokens": int(max_new_tokens),
+            "do_sample": True,
+            "temperature": float(temperature),
+            "top_p": float(top_p),
+            "top_k": int(top_k),
+            "repetition_penalty": float(repetition_penalty),
+        }
         thread = Thread(target=model.generate, kwargs=generation_kwargs)
         thread.start()
         page_buffer = ""
         for new_text in streamer:
             page_buffer += new_text
-            yield full_response + page_header + page_buffer, full_response + page_header + page_buffer
+            yield full_response + page_header + page_buffer
             time.sleep(0.01)
         full_response += page_header + page_buffer + "\n\n"
+    gc.collect()
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
+
 
-@spaces.GPU(duration=calc_timeout_caption)
-def generate_caption(model_name: str, image: Image.Image, 
-                     max_new_tokens: int = 1024, temperature: float = 0.6, 
-                     top_p: float = 0.9, top_k: int = 50, 
+@spaces.GPU(duration=calc_timeout_generic)
+def generate_caption(model_name: str, image: Image.Image,
+                     max_new_tokens: int = 1024, temperature: float = 0.6,
+                     top_p: float = 0.9, top_k: int = 50,
                      repetition_penalty: float = 1.2, gpu_timeout: int = 60):
     if image is None:
-        yield "Please upload an image to caption.", "Please upload an image to caption."
-        return
-    try:
-        processor, model = select_model(model_name)
-    except ValueError as e:
-        yield str(e), str(e)
-        return
-        
+        raise gr.Error("Please upload an image to caption.")
+    processor, model = select_model(model_name)
     system_prompt = (
         "You are an AI assistant. For the given image, write a precise caption and provide a structured set of "
         "attributes describing visual elements like objects, people, actions, colors, and environment."
@@ -512,170 +420,1292 @@ def generate_caption(model_name: str, image: Image.Image,
     prompt_full = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
     inputs = processor(text=[prompt_full], images=[image], return_tensors="pt", padding=True).to(device)
     streamer = TextIteratorStreamer(processor, skip_prompt=True, skip_special_tokens=True)
-    generation_kwargs = {**inputs, "streamer": streamer, "max_new_tokens": max_new_tokens}
+    generation_kwargs = {
+        **inputs,
+        "streamer": streamer,
+        "max_new_tokens": int(max_new_tokens),
+        "do_sample": True,
+        "temperature": float(temperature),
+        "top_p": float(top_p),
+        "top_k": int(top_k),
+        "repetition_penalty": float(repetition_penalty),
+    }
     thread = Thread(target=model.generate, kwargs=generation_kwargs)
     thread.start()
     buffer = ""
     for new_text in streamer:
         buffer += new_text
         time.sleep(0.01)
-        yield buffer, buffer
+        yield buffer
+    gc.collect()
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
 
-@spaces.GPU(duration=calc_timeout_gif)
-def generate_gif(model_name: str, text: str, gif_path: str, 
-                 max_new_tokens: int = 1024, temperature: float = 0.6, 
-                 top_p: float = 0.9, top_k: int = 50, 
+
+@spaces.GPU(duration=calc_timeout_generic)
+def generate_gif(model_name: str, text: str, gif_path: str,
+                 max_new_tokens: int = 1024, temperature: float = 0.6,
+                 top_p: float = 0.9, top_k: int = 50,
                  repetition_penalty: float = 1.2, gpu_timeout: int = 90):
     if gif_path is None:
-        yield "Please upload a GIF.", "Please upload a GIF."
-        return
-    try:
-        processor, model = select_model(model_name)
-    except ValueError as e:
-        yield str(e), str(e)
-        return
-
+        raise gr.Error("Please upload a GIF.")
+    processor, model = select_model(model_name)
     frames = extract_gif_frames(gif_path)
     if not frames:
-        yield "Could not process GIF.", "Could not process GIF."
-        return
+        raise gr.Error("Could not process GIF.")
     messages = [{"role": "user", "content": [{"type": "text", "text": text}]}]
-    for frame in frames:
+    for _ in frames:
         messages[0]["content"].insert(0, {"type": "image"})
     prompt_full = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
     inputs = processor(text=[prompt_full], images=frames, return_tensors="pt", padding=True).to(device)
     streamer = TextIteratorStreamer(processor, skip_prompt=True, skip_special_tokens=True)
-    generation_kwargs = {**inputs, "streamer": streamer, "max_new_tokens": max_new_tokens, "do_sample": True, "temperature": temperature, "top_p": top_p, "top_k": top_k, "repetition_penalty": repetition_penalty}
+    generation_kwargs = {
+        **inputs,
+        "streamer": streamer,
+        "max_new_tokens": int(max_new_tokens),
+        "do_sample": True,
+        "temperature": float(temperature),
+        "top_p": float(top_p),
+        "top_k": int(top_k),
+        "repetition_penalty": float(repetition_penalty),
+    }
     thread = Thread(target=model.generate, kwargs=generation_kwargs)
     thread.start()
     buffer = ""
     for new_text in streamer:
         buffer += new_text
         time.sleep(0.01)
-        yield buffer, buffer
-
-image_examples = [["Perform OCR on the image...", "examples/images/1.jpg"],
-                  ["Caption the image. Describe the safety measures shown in the image. Conclude whether the situation is (safe or unsafe)...", "examples/images/2.jpg"],
-                  ["Solve the problem...", "examples/images/3.png"]]
-video_examples = [["Explain the Ad video in detail.", "examples/videos/1.mp4"],
-                  ["Explain the video in detail.", "examples/videos/2.mp4"]]
-pdf_examples = [["Extract the content precisely.", "examples/pdfs/doc1.pdf"],
-                ["Analyze and provide a short report.", "examples/pdfs/doc2.pdf"]]
-gif_examples = [["Describe this GIF.", "examples/gifs/1.gif"],
-                ["Describe this GIF.", "examples/gifs/2.gif"]]
-caption_examples = [["examples/captions/1.JPG"],
-                    ["examples/captions/2.jpeg"], ["examples/captions/3.jpeg"]]
+        yield buffer
+    gc.collect()
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
 
-with gr.Blocks() as demo:
-    pdf_state = gr.State(value=get_initial_pdf_state())
-    gr.Markdown("# **Qwen3-VL-Outpost**", elem_id="main-title")
-    with gr.Row():
-        with gr.Column(scale=2):
-            with gr.Tabs():
-                with gr.TabItem("Image Inference"):
-                    image_query = gr.Textbox(label="Query Input", placeholder="Enter your query here...")
-                    image_upload = gr.Image(type="pil", label="Upload Image", height=290)
-                    image_submit = gr.Button("Submit", variant="primary")
-                    gr.Examples(examples=image_examples, inputs=[image_query, image_upload])
-
-                with gr.TabItem("PDF Inference"):
-                    with gr.Row():
-                        with gr.Column(scale=1):
-                            pdf_query = gr.Textbox(label="Query Input", placeholder="e.g., 'Summarize this document'")
-                            pdf_upload = gr.File(label="Upload PDF", file_types=[".pdf"])
-                            pdf_submit = gr.Button("Submit", variant="primary")
-                        with gr.Column(scale=1):
-                            pdf_preview_img = gr.Image(label="PDF Preview", height=290)
-                            with gr.Row():
-                                prev_page_btn = gr.Button("◀ Previous")
-                                page_info = gr.HTML('<div style="text-align:center;">No file loaded</div>')
-                                next_page_btn = gr.Button("Next ▶")
-                    gr.Examples(examples=pdf_examples, inputs=[pdf_query, pdf_upload])
-
-                with gr.TabItem("Long Caption"):
-                    caption_image_upload = gr.Image(type="pil", label="Image to Caption", height=290)
-                    caption_submit = gr.Button("Generate Caption", variant="primary")
-                    gr.Examples(examples=caption_examples, inputs=[caption_image_upload])
-                    
-                with gr.TabItem("Video Inference"):
-                    video_query = gr.Textbox(label="Query Input", placeholder="Enter your query here...")
-                    video_upload = gr.Video(label="Upload Video(≤30s)", height=290)
-                    video_submit = gr.Button("Submit", variant="primary")
-                    gr.Examples(examples=video_examples, inputs=[video_query, video_upload])
-                    
-                with gr.TabItem("Gif Inference"):
-                    gif_query = gr.Textbox(label="Query Input", placeholder="e.g., 'What is happening in this gif?'")
-                    gif_upload = gr.Image(type="filepath", label="Upload GIF", height=290)
-                    gif_submit = gr.Button("Submit", variant="primary")
-                    gr.Examples(examples=gif_examples, inputs=[gif_query, gif_upload])
-                    
-            with gr.Accordion("Advanced options", open=False):
-                max_new_tokens = gr.Slider(label="Max new tokens", minimum=1, maximum=MAX_MAX_NEW_TOKENS, step=1, value=DEFAULT_MAX_NEW_TOKENS)
-                temperature = gr.Slider(label="Temperature", minimum=0.1, maximum=4.0, step=0.1, value=0.6)
-                top_p = gr.Slider(label="Top-p (nucleus sampling)", minimum=0.05, maximum=1.0, step=0.05, value=0.9)
-                top_k = gr.Slider(label="Top-k", minimum=1, maximum=1000, step=1, value=50)
-                repetition_penalty = gr.Slider(label="Repetition penalty", minimum=1.0, maximum=2.0, step=0.05, value=1.2)
-
-        with gr.Column(scale=3):
-            gr.Markdown("## Output", elem_id="output-title")
-            output = gr.Textbox(label="Raw Output Stream", interactive=True, lines=12)
-            with gr.Accordion("(Result.md)", open=False):
-                markdown_output = gr.Markdown(label="(Result.Md)")
-
-            model_choice = gr.Radio(
-                choices=[
-                    "Qwen3-VL-4B-Instruct",
-                    "Qwen3-VL-8B-Instruct",
-                    "Qwen3-VL-2B-Instruct",
-                    "Qwen2.5-VL-7B-Instruct",
-                    "Qwen2.5-VL-3B-Instruct"
-                ],
-                label="Select Model",
-                value="Qwen3-VL-4B-Instruct"
+
+def run_router(tab_kind, model_name, text, image_b64, pdf_b64, gif_b64, pdf_state_json,
+               max_new_tokens_v, temperature_v, top_p_v, top_k_v, repetition_penalty_v, gpu_timeout_v):
+    if tab_kind == "pdf":
+        temp_pdf_path = b64_to_temp_file(pdf_b64)
+        if not temp_pdf_path:
+            raise gr.Error("Could not decode uploaded PDF.")
+        try:
+            pages = convert_pdf_to_images(temp_pdf_path)
+            state = {"pages": pages, "total_pages": len(pages), "current_page_index": 0}
+            yield from generate_pdf(
+                model_name=model_name,
+                text=text,
+                state=state,
+                max_new_tokens=max_new_tokens_v,
+                temperature=temperature_v,
+                top_p=top_p_v,
+                top_k=top_k_v,
+                repetition_penalty=repetition_penalty_v,
+                gpu_timeout=gpu_timeout_v,
+            )
+        finally:
+            try:
+                os.remove(temp_pdf_path)
+            except Exception:
+                pass
+    elif tab_kind == "gif":
+        temp_gif_path = b64_to_temp_file(gif_b64)
+        if not temp_gif_path:
+            raise gr.Error("Could not decode uploaded GIF.")
+        try:
+            yield from generate_gif(
+                model_name=model_name,
+                text=text,
+                gif_path=temp_gif_path,
+                max_new_tokens=max_new_tokens_v,
+                temperature=temperature_v,
+                top_p=top_p_v,
+                top_k=top_k_v,
+                repetition_penalty=repetition_penalty_v,
+                gpu_timeout=gpu_timeout_v,
             )
-            
-            with gr.Row(elem_id="gpu-duration-container"):
-                with gr.Column():
-                    gr.Markdown("**GPU Duration (seconds)**")
-                    radioanimated_gpu_duration = RadioAnimated(
-                        choices=["60", "90", "120", "180", "240", "300"],
-                        value="60",
-                        elem_id="radioanimated_gpu_duration"
-                    )
-                    gpu_duration_state = gr.Number(value=60, visible=False)
-            
-            gr.Markdown("*Note: Higher GPU duration allows for longer processing but consumes more GPU quota.*")
-
-    radioanimated_gpu_duration.change(
-        fn=apply_gpu_duration, 
-        inputs=radioanimated_gpu_duration, 
-        outputs=[gpu_duration_state], 
-        api_visibility="private"
+        finally:
+            try:
+                os.remove(temp_gif_path)
+            except Exception:
+                pass
+    elif tab_kind == "caption":
+        image = b64_to_pil(image_b64)
+        yield from generate_caption(
+            model_name=model_name,
+            image=image,
+            max_new_tokens=max_new_tokens_v,
+            temperature=temperature_v,
+            top_p=top_p_v,
+            top_k=top_k_v,
+            repetition_penalty=repetition_penalty_v,
+            gpu_timeout=gpu_timeout_v,
+        )
+    else:
+        image = b64_to_pil(image_b64)
+        yield from generate_image(
+            model_name=model_name,
+            text=text,
+            image=image,
+            max_new_tokens=max_new_tokens_v,
+            temperature=temperature_v,
+            top_p=top_p_v,
+            top_k=top_k_v,
+            repetition_penalty=repetition_penalty_v,
+            gpu_timeout=gpu_timeout_v,
+        )
+
+
+def noop():
+    return None
+
+
+css = r"""
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%;overflow-x:hidden}
+body,.gradio-container{
+    background:#0f0f13!important;
+    font-family:'Inter',system-ui,-apple-system,sans-serif!important;
+    font-size:14px!important;color:#e4e4e7!important;min-height:100vh;overflow-x:hidden;
+}
+.dark body,.dark .gradio-container{background:#0f0f13!important;color:#e4e4e7!important}
+footer{display:none!important}
+.hidden-input{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
+
+#gradio-run-btn,#example-load-btn{
+    position:absolute!important;left:-9999px!important;top:-9999px!important;
+    width:1px!important;height:1px!important;opacity:0.01!important;
+    pointer-events:none!important;overflow:hidden!important;
+}
+
+.app-shell{
+    background:#18181b;border:1px solid #27272a;border-radius:16px;
+    margin:12px auto;max-width:1450px;overflow:hidden;
+    box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
+}
+.app-header{
+    background:linear-gradient(135deg,#18181b,#1e1e24);border-bottom:1px solid #27272a;
+    padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
+}
+.app-header-left{display:flex;align-items:center;gap:12px}
+.app-logo{
+    width:38px;height:38px;background:linear-gradient(135deg,#0000CD,#2645ff,#5876ff);
+    border-radius:10px;display:flex;align-items:center;justify-content:center;
+    box-shadow:0 4px 12px rgba(0,0,205,.35);
+}
+.app-logo svg{width:22px;height:22px;fill:#fff;flex-shrink:0}
+.app-title{
+    font-size:18px;font-weight:700;background:linear-gradient(135deg,#f5f5f5,#bdbdbd);
+    -webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.3px;
+}
+.app-badge{
+    font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;
+    background:rgba(0,0,205,.12);color:#8da1ff;border:1px solid rgba(0,0,205,.25);letter-spacing:.3px;
+}
+.app-badge.fast{background:rgba(38,69,255,.10);color:#90a3ff;border:1px solid rgba(38,69,255,.22)}
+
+.model-tabs-bar,.mode-tabs-bar{
+    background:#18181b;border-bottom:1px solid #27272a;padding:10px 16px;
+    display:flex;gap:8px;align-items:center;flex-wrap:wrap;
+}
+.mode-tabs-bar{padding-top:8px;padding-bottom:12px}
+.model-tab,.mode-tab{
+    display:inline-flex;align-items:center;justify-content:center;gap:6px;
+    min-width:32px;height:34px;background:transparent;border:1px solid #27272a;
+    border-radius:999px;cursor:pointer;font-size:12px;font-weight:600;padding:0 12px;
+    color:#ffffff!important;transition:all .15s ease;
+}
+.mode-tab{min-width:115px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
+.model-tab:hover,.mode-tab:hover{background:rgba(0,0,205,.12);border-color:rgba(0,0,205,.35)}
+.model-tab.active,.mode-tab.active{background:rgba(0,0,205,.22);border-color:#0000CD;color:#fff!important;box-shadow:0 0 0 2px rgba(0,0,205,.10)}
+.model-tab-label{font-size:12px;color:#ffffff!important;font-weight:600}
+
+.app-main-row{display:flex;gap:0;flex:1;overflow:hidden}
+.app-main-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #27272a}
+.app-main-right{width:500px;display:flex;flex-direction:column;flex-shrink:0;background:#18181b}
+
+#media-drop-zone{
+    position:relative;background:#09090b;height:440px;min-height:440px;max-height:440px;overflow:hidden;
+}
+#media-drop-zone.drag-over{outline:2px solid #0000CD;outline-offset:-2px;background:rgba(0,0,205,.04)}
+.upload-prompt-modern{
+    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:20;overflow:hidden;
+}
+.upload-click-area{
+    display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
+    padding:28px 36px;max-width:92%;max-height:92%;border:2px dashed #3f3f46;border-radius:16px;
+    background:rgba(0,0,205,.03);transition:all .2s ease;gap:8px;text-align:center;overflow:hidden;
+}
+.upload-click-area:hover{background:rgba(0,0,205,.08);border-color:#0000CD;transform:scale(1.02)}
+.upload-click-area:active{background:rgba(0,0,205,.12);transform:scale(.99)}
+.upload-click-area svg{width:86px;height:86px;max-width:100%;flex-shrink:0}
+.upload-main-text{color:#a1a1aa;font-size:14px;font-weight:600;margin-top:4px}
+.upload-sub-text{color:#71717a;font-size:12px}
+
+.single-preview-wrap{
+    width:100%;height:100%;display:none;align-items:center;justify-content:center;padding:16px;overflow:hidden;
+}
+.single-preview-card{
+    width:100%;height:100%;max-width:100%;max-height:100%;border-radius:14px;overflow:hidden;border:1px solid #27272a;background:#111114;
+    display:flex;align-items:center;justify-content:center;position:relative;
+}
+.single-preview-card img,.single-preview-card iframe{
+    width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;background:#000;border:none;
+}
+.preview-overlay-actions{
+    position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:5;
+}
+.preview-action-btn{
+    display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 12px;background:rgba(0,0,0,.65);
+    border:1px solid rgba(255,255,255,.14);border-radius:10px;cursor:pointer;color:#fff!important;font-size:12px;font-weight:600;transition:all .15s ease;
+}
+.preview-action-btn:hover{background:#0000CD;border-color:#0000CD}
+
+.pdf-nav-wrap{
+    position:absolute;left:12px;bottom:12px;z-index:6;display:flex;align-items:center;gap:8px;
+    background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);padding:8px 10px;border-radius:10px;
+}
+.pdf-nav-btn{
+    display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:30px;padding:0 10px;
+    background:#18181b;border:1px solid #27272a;border-radius:8px;color:#fff;cursor:pointer;font-size:12px;font-weight:700;
+}
+.pdf-nav-btn:hover{background:#0000CD;border-color:#0000CD}
+.pdf-page-indicator{font-size:12px;color:#d4d4d8;font-family:'JetBrains Mono',monospace}
+
+.hint-bar{
+    background:rgba(0,0,205,.06);border-top:1px solid #27272a;border-bottom:1px solid #27272a;
+    padding:10px 20px;font-size:13px;color:#a1a1aa;line-height:1.7;
+}
+.hint-bar b{color:#8da1ff;font-weight:600}
+.hint-bar kbd{
+    display:inline-block;padding:1px 6px;background:#27272a;border:1px solid #3f3f46;border-radius:4px;
+    font-family:'JetBrains Mono',monospace;font-size:11px;color:#a1a1aa;
+}
+
+.examples-section{border-top:1px solid #27272a;padding:12px 16px}
+.examples-title{
+    font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;
+}
+.examples-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
+.examples-scroll::-webkit-scrollbar{height:6px}
+.examples-scroll::-webkit-scrollbar-track{background:#09090b;border-radius:3px}
+.examples-scroll::-webkit-scrollbar-thumb{background:#27272a;border-radius:3px}
+.examples-scroll::-webkit-scrollbar-thumb:hover{background:#3f3f46}
+.example-card{
+    position:relative;flex-shrink:0;width:220px;background:#09090b;border:1px solid #27272a;border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s ease;
+}
+.example-card:hover{border-color:#0000CD;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,205,.15)}
+.example-card.loading{opacity:.5;pointer-events:none}
+.example-thumb-wrap{height:120px;overflow:hidden;background:#18181b;position:relative}
+.example-thumb-wrap img{width:100%;height:100%;object-fit:cover}
+.example-media-chip{
+    position:absolute;top:8px;left:8px;display:inline-flex;padding:3px 7px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.12);
+    border-radius:999px;font-size:10px;font-weight:700;color:#fff;letter-spacing:.5px;
+}
+.example-thumb-placeholder{
+    width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#18181b;color:#3f3f46;font-size:11px;
+}
+.example-meta-row{padding:6px 10px;display:flex;align-items:center;gap:6px}
+.example-badge{
+    display:inline-flex;padding:2px 7px;background:rgba(0,0,205,.12);border-radius:4px;font-size:10px;font-weight:600;color:#8da1ff;
+    font-family:'JetBrains Mono',monospace;white-space:nowrap;
+}
+.example-prompt-text{
+    padding:0 10px 8px;font-size:11px;color:#a1a1aa;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
+}
+
+.panel-card{border-bottom:1px solid #27272a}
+.panel-card-title{
+    padding:12px 20px;font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid rgba(39,39,42,.6);
+}
+.panel-card-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px}
+.modern-label{font-size:13px;font-weight:500;color:#a1a1aa;margin-bottom:4px;display:block}
+.modern-textarea{
+    width:100%;background:#09090b;border:1px solid #27272a;border-radius:8px;padding:10px 14px;font-family:'Inter',sans-serif;font-size:14px;color:#e4e4e7;
+    resize:none;outline:none;min-height:100px;transition:border-color .2s;
+}
+.modern-textarea:focus{border-color:#0000CD;box-shadow:0 0 0 3px rgba(0,0,205,.15)}
+.modern-textarea::placeholder{color:#3f3f46}
+.modern-textarea.error-flash{
+    border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.2)!important;animation:shake .4s ease;
+}
+@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
+
+.toast-notification{
+    position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120%);z-index:9999;padding:10px 24px;border-radius:10px;
+    font-family:'Inter',sans-serif;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);
+    transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;opacity:0;pointer-events:none;
+}
+.toast-notification.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
+.toast-notification.error{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification.warning{background:linear-gradient(135deg,#d97706,#b45309);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification.info{background:linear-gradient(135deg,#1e40af,#1d4ed8);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification .toast-icon{font-size:16px;line-height:1}
+.toast-notification .toast-text{line-height:1.3}
+
+.btn-run{
+    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,#0000CD,#1638b7);border:none;border-radius:10px;
+    padding:12px 24px;cursor:pointer;font-size:15px;font-weight:600;font-family:'Inter',sans-serif;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+    transition:all .2s ease;letter-spacing:-.2px;box-shadow:0 4px 16px rgba(0,0,205,.3),inset 0 1px 0 rgba(255,255,255,.1);
+}
+.btn-run:hover{
+    background:linear-gradient(135deg,#2645ff,#0000CD);transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,0,205,.45),inset 0 1px 0 rgba(255,255,255,.15);
+}
+.btn-run:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,205,.3)}
+#custom-run-btn,#custom-run-btn *,#run-btn-label,.btn-run,.btn-run *{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
+}
+
+.output-frame{border-bottom:1px solid #27272a;display:flex;flex-direction:column;position:relative}
+.output-frame .out-title,.output-frame .out-title *,#output-title-label{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+}
+.output-frame .out-title{
+    padding:10px 20px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid rgba(39,39,42,.6);
+    display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
+}
+.out-title-right{display:flex;gap:8px;align-items:center}
+.out-action-btn{
+    display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,205,.1);border:1px solid rgba(0,0,205,.2);border-radius:6px;cursor:pointer;padding:3px 10px;
+    font-size:11px;font-weight:500;color:#8da1ff!important;gap:4px;height:24px;transition:all .15s;
+}
+.out-action-btn:hover{background:rgba(0,0,205,.2);border-color:rgba(0,0,205,.35);color:#ffffff!important}
+.out-action-btn svg{width:12px;height:12px;fill:#8da1ff}
+.output-frame .out-body{
+    flex:1;background:#09090b;display:flex;align-items:stretch;justify-content:stretch;overflow:hidden;min-height:320px;position:relative;
+}
+.output-scroll-wrap{width:100%;height:100%;padding:0;overflow:hidden}
+.output-textarea{
+    width:100%;height:320px;min-height:320px;max-height:320px;background:#09090b;color:#e4e4e7;border:none;outline:none;padding:16px 18px;font-size:13px;line-height:1.6;
+    font-family:'JetBrains Mono',monospace;overflow:auto;resize:none;white-space:pre-wrap;
+}
+.output-textarea::placeholder{color:#52525b}
+.output-textarea.error-flash{box-shadow:inset 0 0 0 2px rgba(239,68,68,.6)}
+.modern-loader{
+    display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(9,9,11,.92);z-index:15;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(4px);
+}
+.modern-loader.active{display:flex}
+.modern-loader .loader-spinner{
+    width:36px;height:36px;border:3px solid #27272a;border-top-color:#0000CD;border-radius:50%;animation:spin .8s linear infinite;
+}
+@keyframes spin{to{transform:rotate(360deg)}}
+.modern-loader .loader-text{font-size:13px;color:#a1a1aa;font-weight:500}
+.loader-bar-track{width:200px;height:4px;background:#27272a;border-radius:2px;overflow:hidden}
+.loader-bar-fill{
+    height:100%;background:linear-gradient(90deg,#0000CD,#4d6dff,#0000CD);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px;
+}
+@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+
+.settings-group{border:1px solid #27272a;border-radius:10px;margin:12px 16px;padding:0;overflow:hidden}
+.settings-group-title{
+    font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;padding:10px 16px;border-bottom:1px solid #27272a;background:rgba(24,24,27,.5);
+}
+.settings-group-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
+.slider-row{display:flex;align-items:center;gap:10px;min-height:28px}
+.slider-row label{font-size:13px;font-weight:500;color:#a1a1aa;min-width:118px;flex-shrink:0}
+.slider-row input[type="range"]{
+    flex:1;-webkit-appearance:none;appearance:none;height:6px;background:#27272a;border-radius:3px;outline:none;min-width:0;
+}
+.slider-row input[type="range"]::-webkit-slider-thumb{
+    -webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#0000CD,#1638b7);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,205,.4);transition:transform .15s;
+}
+.slider-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
+.slider-row input[type="range"]::-moz-range-thumb{
+    width:16px;height:16px;background:linear-gradient(135deg,#0000CD,#1638b7);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(0,0,205,.4);
+}
+.slider-row .slider-val{
+    min-width:58px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;padding:3px 8px;background:#09090b;border:1px solid #27272a;border-radius:6px;color:#a1a1aa;flex-shrink:0;
+}
+
+.app-statusbar{
+    background:#18181b;border-top:1px solid #27272a;padding:6px 20px;display:flex;gap:12px;height:34px;align-items:center;font-size:12px;
+}
+.app-statusbar .sb-section{
+    padding:0 12px;flex:1;display:flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:#52525b;overflow:hidden;white-space:nowrap;
+}
+.app-statusbar .sb-section.sb-fixed{
+    flex:0 0 auto;min-width:110px;text-align:center;justify-content:center;padding:3px 12px;background:rgba(0,0,205,.08);border-radius:6px;color:#8da1ff;font-weight:500;
+}
+
+.exp-note{padding:10px 20px;font-size:12px;color:#52525b;border-top:1px solid #27272a;text-align:center}
+.exp-note a{color:#8da1ff;text-decoration:none}
+.exp-note a:hover{text-decoration:underline}
+
+::-webkit-scrollbar{width:8px;height:8px}
+::-webkit-scrollbar-track{background:#09090b}
+::-webkit-scrollbar-thumb{background:#27272a;border-radius:4px}
+::-webkit-scrollbar-thumb:hover{background:#3f3f46}
+
+@media(max-width:980px){
+    .app-main-row{flex-direction:column}
+    .app-main-right{width:100%}
+    .app-main-left{border-right:none;border-bottom:1px solid #27272a}
+}
+"""
+
+gallery_js = r"""
+() => {
+function init() {
+    if (window.__outpostInitDone) return;
+
+    const dropZone = document.getElementById('media-drop-zone');
+    const uploadPrompt = document.getElementById('upload-prompt');
+    const uploadClick = document.getElementById('upload-click-area');
+    const fileInput = document.getElementById('custom-file-input');
+    const previewWrap = document.getElementById('single-preview-wrap');
+    const previewImg = document.getElementById('single-preview-img');
+    const previewPdf = document.getElementById('single-preview-pdf');
+    const btnUpload = document.getElementById('preview-upload-btn');
+    const btnClear = document.getElementById('preview-clear-btn');
+    const promptInput = document.getElementById('custom-query-input');
+    const runBtnEl = document.getElementById('custom-run-btn');
+    const outputArea = document.getElementById('custom-output-textarea');
+    const mediaStatus = document.getElementById('sb-media-status');
+    const exampleResultContainer = document.getElementById('example-result-data');
+    const pdfPrevBtn = document.getElementById('pdf-prev-btn');
+    const pdfNextBtn = document.getElementById('pdf-next-btn');
+    const pdfPageInfo = document.getElementById('pdf-page-info');
+
+    if (!dropZone || !fileInput || !promptInput || !previewWrap || !previewImg || !previewPdf) {
+        setTimeout(init, 250);
+        return;
+    }
+
+    window.__outpostInitDone = true;
+    let mediaState = null;
+    let currentMode = 'image';
+    let toastTimer = null;
+    let examplePoller = null;
+    let lastSeenExamplePayload = null;
+
+    function showToast(message, type) {
+        let toast = document.getElementById('app-toast');
+        if (!toast) {
+            toast = document.createElement('div');
+            toast.id = 'app-toast';
+            toast.className = 'toast-notification';
+            toast.innerHTML = '<span class="toast-icon"></span><span class="toast-text"></span>';
+            document.body.appendChild(toast);
+        }
+        const icon = toast.querySelector('.toast-icon');
+        const text = toast.querySelector('.toast-text');
+        toast.className = 'toast-notification ' + (type || 'error');
+        if (type === 'warning') icon.textContent = '\u26A0';
+        else if (type === 'info') icon.textContent = '\u2139';
+        else icon.textContent = '\u2717';
+        text.textContent = message;
+        if (toastTimer) clearTimeout(toastTimer);
+        void toast.offsetWidth;
+        toast.classList.add('visible');
+        toastTimer = setTimeout(() => toast.classList.remove('visible'), 3500);
+    }
+
+    function showLoader() {
+        const l = document.getElementById('output-loader');
+        if (l) l.classList.add('active');
+        const sb = document.getElementById('sb-run-state');
+        if (sb) sb.textContent = 'Processing...';
+    }
+    function hideLoader() {
+        const l = document.getElementById('output-loader');
+        if (l) l.classList.remove('active');
+        const sb = document.getElementById('sb-run-state');
+        if (sb) sb.textContent = 'Done';
+    }
+    window.__hideLoader = hideLoader;
+
+    function flashPromptError() {
+        promptInput.classList.add('error-flash');
+        promptInput.focus();
+        setTimeout(() => promptInput.classList.remove('error-flash'), 800);
+    }
+
+    function flashOutputError() {
+        if (!outputArea) return;
+        outputArea.classList.add('error-flash');
+        setTimeout(() => outputArea.classList.remove('error-flash'), 800);
+    }
+
+    function getValueFromContainer(containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return '';
+        const el = container.querySelector('textarea, input');
+        return el ? (el.value || '') : '';
+    }
+
+    function setGradioValue(containerId, value) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        container.querySelectorAll('input, textarea').forEach(el => {
+            if (el.type === 'file' || el.type === 'range' || el.type === 'checkbox') return;
+            const proto = el.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+            const ns = Object.getOwnPropertyDescriptor(proto, 'value');
+            if (ns && ns.set) {
+                ns.set.call(el, value);
+                el.dispatchEvent(new Event('input', {bubbles:true, composed:true}));
+                el.dispatchEvent(new Event('change', {bubbles:true, composed:true}));
+            }
+        });
+    }
+
+    function syncMediaToGradio() {
+        setGradioValue('hidden-image-b64', mediaState && (mediaState.mode === 'image' || mediaState.mode === 'caption') ? mediaState.b64 : '');
+        setGradioValue('hidden-pdf-b64', mediaState && mediaState.mode === 'pdf' ? mediaState.b64 : '');
+        setGradioValue('hidden-gif-b64', mediaState && mediaState.mode === 'gif' ? mediaState.b64 : '');
+        if (mediaStatus) mediaStatus.textContent = mediaState ? (`1 ${mediaState.mode} uploaded`) : `No ${currentMode} uploaded`;
+    }
+
+    function syncPromptToGradio() {
+        setGradioValue('prompt-gradio-input', promptInput.value);
+    }
+
+    function syncModelToGradio(name) {
+        setGradioValue('hidden-model-name', name);
+    }
+
+    function syncModeToGradio(mode) {
+        setGradioValue('hidden-mode-name', mode);
+    }
+
+    function resetPdfState() {
+        window.__pdfPages = [];
+        window.__pdfPageIndex = 0;
+        if (pdfPageInfo) pdfPageInfo.textContent = 'No file loaded';
+    }
+
+    function renderPdfPage() {
+        if (!window.__pdfPages || !window.__pdfPages.length) {
+            previewImg.src = '';
+            previewImg.style.display = 'none';
+            previewPdf.style.display = 'none';
+            if (pdfPageInfo) pdfPageInfo.textContent = 'No file loaded';
+            return;
+        }
+        const idx = Math.max(0, Math.min(window.__pdfPageIndex || 0, window.__pdfPages.length - 1));
+        window.__pdfPageIndex = idx;
+        previewPdf.style.display = 'none';
+        previewImg.src = window.__pdfPages[idx];
+        previewImg.style.display = 'block';
+        if (pdfPageInfo) pdfPageInfo.textContent = `Page ${idx + 1} / ${window.__pdfPages.length}`;
+    }
+
+    function renderPreview() {
+        if (!mediaState) {
+            previewImg.src = '';
+            previewPdf.removeAttribute('src');
+            previewImg.style.display = 'none';
+            previewPdf.style.display = 'none';
+            previewWrap.style.display = 'none';
+            resetPdfState();
+            if (uploadPrompt) uploadPrompt.style.display = 'flex';
+            syncMediaToGradio();
+            return;
+        }
+
+        previewWrap.style.display = 'flex';
+        if (uploadPrompt) uploadPrompt.style.display = 'none';
+
+        if (mediaState.mode === 'pdf') {
+            previewImg.style.display = 'none';
+            previewPdf.style.display = 'none';
+            renderPdfPage();
+        } else {
+            resetPdfState();
+            previewPdf.removeAttribute('src');
+            previewPdf.style.display = 'none';
+            previewImg.src = mediaState.preview || mediaState.b64;
+            previewImg.style.display = 'block';
+        }
+
+        syncMediaToGradio();
+    }
+
+    function setPreviewFromFileReader(b64, name, mode) {
+        mediaState = {b64, name: name || 'file', mode: mode || currentMode};
+        renderPreview();
+    }
+
+    function clearPreview() {
+        mediaState = null;
+        renderPreview();
+    }
+    window.__clearPreview = clearPreview;
+
+    function processFile(file) {
+        if (!file) return;
+        const mode = currentMode;
+        if (mode === 'image' || mode === 'caption') {
+            if (!file.type.startsWith('image/')) {
+                showToast('Only image files are supported in this mode', 'error');
+                return;
+            }
+        } else if (mode === 'gif') {
+            const ok = file.type === 'image/gif' || file.name.toLowerCase().endsWith('.gif');
+            if (!ok) {
+                showToast('Only GIF files are supported in GIF mode', 'error');
+                return;
+            }
+        } else if (mode === 'pdf') {
+            const ok = file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf');
+            if (!ok) {
+                showToast('Only PDF files are supported in PDF mode', 'error');
+                return;
+            }
+        }
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const b64 = e.target.result;
+            if (mode === 'pdf') {
+                mediaState = {b64, name: file.name, mode: 'pdf'};
+                resetPdfState();
+                renderPreview();
+            } else if (mode === 'gif') {
+                setPreviewFromFileReader(b64, file.name, 'gif');
+            } else if (mode === 'caption') {
+                setPreviewFromFileReader(b64, file.name, 'caption');
+            } else {
+                setPreviewFromFileReader(b64, file.name, 'image');
+            }
+        };
+        reader.readAsDataURL(file);
+    }
+
+    function updateAccept() {
+        if (currentMode === 'pdf') fileInput.accept = '.pdf,application/pdf';
+        else if (currentMode === 'gif') fileInput.accept = '.gif,image/gif';
+        else fileInput.accept = 'image/*';
+
+        const main = document.getElementById('upload-main-text');
+        const sub = document.getElementById('upload-sub-text');
+
+        if (currentMode === 'pdf') {
+            if (main) main.textContent = 'Click or drag a PDF here';
+            if (sub) sub.textContent = 'Upload one PDF document for page-wise multimodal analysis';
+        } else if (currentMode === 'gif') {
+            if (main) main.textContent = 'Click or drag a GIF here';
+            if (sub) sub.textContent = 'Upload one animated GIF for multimodal motion understanding';
+        } else if (currentMode === 'caption') {
+            if (main) main.textContent = 'Click or drag an image here';
+            if (sub) sub.textContent = 'Upload one image for long caption and visual attribute generation';
+        } else {
+            if (main) main.textContent = 'Click or drag an image here';
+            if (sub) sub.textContent = 'Upload one document, page, chart, screenshot, or scene image for vision tasks';
+        }
+
+        if (!mediaState && mediaStatus) mediaStatus.textContent = `No ${currentMode} uploaded`;
+    }
+
+    function activateModelTab(name) {
+        document.querySelectorAll('.model-tab[data-model]').forEach(btn => {
+            btn.classList.toggle('active', btn.getAttribute('data-model') === name);
+        });
+        syncModelToGradio(name);
+    }
+
+    function activateModeTab(mode) {
+        currentMode = mode;
+        document.querySelectorAll('.mode-tab[data-mode]').forEach(btn => {
+            btn.classList.toggle('active', btn.getAttribute('data-mode') === mode);
+        });
+        syncModeToGradio(mode);
+        updateAccept();
+
+        const title = document.getElementById('instruction-title');
+        const promptLabel = document.getElementById('query-label');
+        const runLabel = document.getElementById('run-btn-label');
+        const textarea = document.getElementById('custom-query-input');
+
+        if (mode === 'caption') {
+            if (title) title.textContent = 'Caption Instruction';
+            if (promptLabel) promptLabel.textContent = 'Caption Prompt';
+            if (runLabel) runLabel.textContent = 'Generate Caption';
+            if (textarea) textarea.placeholder = 'e.g., generate a detailed caption with structured attributes...';
+        } else if (mode === 'pdf') {
+            if (title) title.textContent = 'Document Instruction';
+            if (promptLabel) promptLabel.textContent = 'PDF Query';
+            if (runLabel) runLabel.textContent = 'Run PDF Inference';
+            if (textarea) textarea.placeholder = 'e.g., summarize this PDF, extract content precisely, analyze the report...';
+        } else if (mode === 'gif') {
+            if (title) title.textContent = 'GIF Instruction';
+            if (promptLabel) promptLabel.textContent = 'GIF Query';
+            if (runLabel) runLabel.textContent = 'Run GIF Inference';
+            if (textarea) textarea.placeholder = 'e.g., what is happening in this gif? describe the motion and scene...';
+        } else {
+            if (title) title.textContent = 'Vision Instruction';
+            if (promptLabel) promptLabel.textContent = 'Query Input';
+            if (runLabel) runLabel.textContent = 'Run Inference';
+            if (textarea) textarea.placeholder = 'e.g., perform OCR, solve the problem, describe the image, extract visible text...';
+        }
+
+        if (mediaState && mediaState.mode !== mode) clearPreview();
+    }
+
+    window.__activateModeTab = activateModeTab;
+    window.__activateModelTab = activateModelTab;
+
+    if (uploadClick) uploadClick.addEventListener('click', () => fileInput.click());
+    if (btnUpload) btnUpload.addEventListener('click', () => fileInput.click());
+    if (btnClear) btnClear.addEventListener('click', clearPreview);
+
+    fileInput.addEventListener('change', (e) => {
+        const file = e.target.files && e.target.files[0] ? e.target.files[0] : null;
+        if (file) processFile(file);
+        e.target.value = '';
+    });
+
+    dropZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropZone.classList.add('drag-over');
+    });
+    dropZone.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+    });
+    dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        if (e.dataTransfer.files && e.dataTransfer.files.length) processFile(e.dataTransfer.files[0]);
+    });
+
+    promptInput.addEventListener('input', syncPromptToGradio);
+
+    document.querySelectorAll('.model-tab[data-model]').forEach(btn => {
+        btn.addEventListener('click', () => activateModelTab(btn.getAttribute('data-model')));
+    });
+    document.querySelectorAll('.mode-tab[data-mode]').forEach(btn => {
+        btn.addEventListener('click', () => activateModeTab(btn.getAttribute('data-mode')));
+    });
+
+    if (pdfPrevBtn) {
+        pdfPrevBtn.addEventListener('click', () => {
+            if (!window.__pdfPages || !window.__pdfPages.length) return;
+            window.__pdfPageIndex = Math.max(0, (window.__pdfPageIndex || 0) - 1);
+            renderPdfPage();
+        });
+    }
+    if (pdfNextBtn) {
+        pdfNextBtn.addEventListener('click', () => {
+            if (!window.__pdfPages || !window.__pdfPages.length) return;
+            window.__pdfPageIndex = Math.min(window.__pdfPages.length - 1, (window.__pdfPageIndex || 0) + 1);
+            renderPdfPage();
+        });
+    }
+
+    activateModelTab('Qwen3-VL-4B-Instruct');
+    activateModeTab('image');
+
+    function syncSlider(customId, gradioId) {
+        const slider = document.getElementById(customId);
+        const valSpan = document.getElementById(customId + '-val');
+        if (!slider) return;
+        slider.addEventListener('input', () => {
+            if (valSpan) valSpan.textContent = slider.value;
+            const container = document.getElementById(gradioId);
+            if (!container) return;
+            container.querySelectorAll('input[type="range"],input[type="number"]').forEach(el => {
+                const ns = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                if (ns && ns.set) {
+                    ns.set.call(el, slider.value);
+                    el.dispatchEvent(new Event('input', {bubbles:true, composed:true}));
+                    el.dispatchEvent(new Event('change', {bubbles:true, composed:true}));
+                }
+            });
+        });
+    }
+
+    syncSlider('custom-max-new-tokens', 'gradio-max-new-tokens');
+    syncSlider('custom-temperature', 'gradio-temperature');
+    syncSlider('custom-top-p', 'gradio-top-p');
+    syncSlider('custom-top-k', 'gradio-top-k');
+    syncSlider('custom-repetition-penalty', 'gradio-repetition-penalty');
+    syncSlider('custom-gpu-duration', 'gradio-gpu-duration');
+
+    function validateBeforeRun() {
+        const promptVal = promptInput.value.trim();
+        if (currentMode !== 'caption' && !promptVal) {
+            showToast('Please enter your instruction', 'warning');
+            flashPromptError();
+            return false;
+        }
+        if (!mediaState) {
+            showToast(`Please upload a ${currentMode}`, 'error');
+            return false;
+        }
+        if (mediaState.mode !== currentMode) {
+            showToast(`Uploaded media does not match ${currentMode} mode`, 'error');
+            return false;
+        }
+        const currentModel = (document.querySelector('.model-tab.active') || {}).dataset?.model;
+        if (!currentModel) {
+            showToast('Please select a model', 'error');
+            return false;
+        }
+        return true;
+    }
+
+    window.__clickGradioRunBtn = function() {
+        if (!validateBeforeRun()) return;
+        syncPromptToGradio();
+        syncMediaToGradio();
+        const activeModel = document.querySelector('.model-tab.active');
+        const activeMode = document.querySelector('.mode-tab.active');
+        if (activeModel) syncModelToGradio(activeModel.getAttribute('data-model'));
+        if (activeMode) syncModeToGradio(activeMode.getAttribute('data-mode'));
+        if (outputArea) outputArea.value = '';
+        showLoader();
+        setTimeout(() => {
+            const gradioBtn = document.getElementById('gradio-run-btn');
+            if (!gradioBtn) return;
+            const btn = gradioBtn.querySelector('button');
+            if (btn) btn.click(); else gradioBtn.click();
+        }, 180);
+    };
+
+    if (runBtnEl) runBtnEl.addEventListener('click', () => window.__clickGradioRunBtn());
+
+    const copyBtn = document.getElementById('copy-output-btn');
+    if (copyBtn) {
+        copyBtn.addEventListener('click', async () => {
+            try {
+                const text = outputArea ? outputArea.value : '';
+                if (!text.trim()) {
+                    showToast('No output to copy', 'warning');
+                    flashOutputError();
+                    return;
+                }
+                await navigator.clipboard.writeText(text);
+                showToast('Output copied to clipboard', 'info');
+            } catch(e) {
+                showToast('Copy failed', 'error');
+            }
+        });
+    }
+
+    const saveBtn = document.getElementById('save-output-btn');
+    if (saveBtn) {
+        saveBtn.addEventListener('click', () => {
+            const text = outputArea ? outputArea.value : '';
+            if (!text.trim()) {
+                showToast('No output to save', 'warning');
+                flashOutputError();
+                return;
+            }
+            const blob = new Blob([text], {type: 'text/plain;charset=utf-8'});
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = 'qwen3_vl_outpost_output.txt';
+            document.body.appendChild(a);
+            a.click();
+            setTimeout(() => {
+                URL.revokeObjectURL(a.href);
+                document.body.removeChild(a);
+            }, 200);
+            showToast('Output saved', 'info');
+        });
+    }
+
+    function applyExamplePayload(raw) {
+        try {
+            const data = JSON.parse(raw);
+            if (data.status !== 'ok') {
+                document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
+                showToast(data.message || 'Failed to load example', 'error');
+                return;
+            }
+
+            if (data.kind) activateModeTab(data.kind);
+            if (data.model) activateModelTab(data.model);
+
+            if (data.query) {
+                promptInput.value = data.query;
+                syncPromptToGradio();
+            }
+
+            if (data.kind === 'pdf') {
+                mediaState = {b64: data.file || '', name: data.name || 'example.pdf', mode: 'pdf'};
+                window.__pdfPages = data.preview ? [data.preview] : [];
+                window.__pdfPageIndex = 0;
+                if (pdfPageInfo) pdfPageInfo.textContent = data.page_info || 'Page 1 / 1';
+                renderPreview();
+            } else {
+                mediaState = {
+                    b64: data.media || '',
+                    preview: data.media || '',
+                    name: data.name || 'example_file',
+                    mode: data.kind === 'caption' ? 'caption' : data.kind
+                };
+                renderPreview();
+            }
+
+            document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
+            showToast('Example loaded', 'info');
+        } catch (e) {
+            document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
+            showToast('Failed to parse example data', 'error');
+        }
+    }
+
+    function startExamplePolling() {
+        if (examplePoller) clearInterval(examplePoller);
+        let attempts = 0;
+        examplePoller = setInterval(() => {
+            attempts += 1;
+            const current = getValueFromContainer('example-result-data');
+            if (current && current !== lastSeenExamplePayload) {
+                lastSeenExamplePayload = current;
+                clearInterval(examplePoller);
+                examplePoller = null;
+                applyExamplePayload(current);
+                return;
+            }
+            if (attempts >= 80) {
+                clearInterval(examplePoller);
+                examplePoller = null;
+                document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
+                showToast('Example load timed out', 'error');
+            }
+        }, 150);
+    }
+
+    document.querySelectorAll('.example-card[data-idx]').forEach(card => {
+        card.addEventListener('click', () => {
+            const idx = card.getAttribute('data-idx');
+            document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
+            card.classList.add('loading');
+            showToast('Loading example...', 'info');
+
+            setGradioValue('example-result-data', '');
+            setGradioValue('example-idx-input', idx);
+
+            setTimeout(() => {
+                const btn = document.getElementById('example-load-btn');
+                if (btn) {
+                    const b = btn.querySelector('button');
+                    if (b) b.click(); else btn.click();
+                }
+                startExamplePolling();
+            }, 220);
+        });
+    });
+
+    const observerTarget = document.getElementById('example-result-data');
+    if (observerTarget) {
+        const obs = new MutationObserver(() => {
+            const current = getValueFromContainer('example-result-data');
+            if (current && current !== lastSeenExamplePayload) {
+                lastSeenExamplePayload = current;
+                if (examplePoller) {
+                    clearInterval(examplePoller);
+                    examplePoller = null;
+                }
+                applyExamplePayload(current);
+            }
+        });
+        obs.observe(observerTarget, {childList:true, subtree:true, characterData:true, attributes:true});
+    }
+
+    if (outputArea) outputArea.value = '';
+    const sb = document.getElementById('sb-run-state');
+    if (sb) sb.textContent = 'Ready';
+    if (mediaStatus) mediaStatus.textContent = 'No image uploaded';
+}
+init();
+}
+"""
+
+wire_outputs_js = r"""
+() => {
+function watchOutputs() {
+    const resultContainer = document.getElementById('gradio-result');
+    const outArea = document.getElementById('custom-output-textarea');
+    if (!resultContainer || !outArea) { setTimeout(watchOutputs, 500); return; }
+
+    let lastText = '';
+
+    function syncOutput() {
+        const el = resultContainer.querySelector('textarea') || resultContainer.querySelector('input');
+        if (!el) return;
+        const val = el.value || '';
+        if (val !== lastText) {
+            lastText = val;
+            outArea.value = val;
+            outArea.scrollTop = outArea.scrollHeight;
+            if (window.__hideLoader && val.trim()) window.__hideLoader();
+        }
+    }
+
+    const observer = new MutationObserver(syncOutput);
+    observer.observe(resultContainer, {childList:true, subtree:true, characterData:true, attributes:true});
+    setInterval(syncOutput, 500);
+}
+watchOutputs();
+}
+"""
+
+OUTPOST_LOGO_SVG = """
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2l8 4v6c0 5-3.5 8.8-8 10-4.5-1.2-8-5-8-10V6l8-4Zm0 3.2L7 7.7v4.2c0 3.4 2.2 6 5 7 2.8-1 5-3.6 5-7V7.7l-5-2.5Z" fill="white"/>
+  <circle cx="12" cy="12" r="2.2" fill="white"/>
+</svg>
+"""
+
+UPLOAD_PREVIEW_SVG = """
+<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#0000CD" stroke-width="2" stroke-dasharray="4 3"/>
+    <polygon points="12,62 30,40 42,50 54,34 68,62" fill="rgba(0,0,205,0.15)" stroke="#0000CD" stroke-width="1.5"/>
+    <circle cx="28" cy="30" r="6" fill="rgba(0,0,205,0.2)" stroke="#0000CD" stroke-width="1.5"/>
+</svg>
+"""
+
+COPY_SVG = """<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 1H4C2.9 1 2 1.9 2 3v12h2V3h12V1zm3 4H8C6.9 5 6 5.9 6 7v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>"""
+SAVE_SVG = """<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7l-4-4zM7 5h8v4H7V5zm12 14H5v-6h14v6z"/></svg>"""
+
+MODEL_TABS_HTML = "".join([
+    f'<button class="model-tab{" active" if m == "Qwen3-VL-4B-Instruct" else ""}" data-model="{m}"><span class="model-tab-label">{m}</span></button>'
+    for m in MODEL_CHOICES
+])
+
+MODE_TABS_HTML = """
+<button class="mode-tab active" data-mode="image">Image Inference</button>
+<button class="mode-tab" data-mode="pdf">PDF Inference</button>
+<button class="mode-tab" data-mode="caption">Long Caption</button>
+<button class="mode-tab" data-mode="gif">GIF Inference</button>
+"""
+
+with gr.Blocks() as demo:
+    hidden_mode_name = gr.Textbox(value="image", elem_id="hidden-mode-name", elem_classes="hidden-input", container=False)
+    hidden_image_b64 = gr.Textbox(value="", elem_id="hidden-image-b64", elem_classes="hidden-input", container=False)
+    hidden_pdf_b64 = gr.Textbox(value="", elem_id="hidden-pdf-b64", elem_classes="hidden-input", container=False)
+    hidden_gif_b64 = gr.Textbox(value="", elem_id="hidden-gif-b64", elem_classes="hidden-input", container=False)
+    hidden_pdf_state = gr.Textbox(value="", elem_id="hidden-pdf-state", elem_classes="hidden-input", container=False)
+    prompt = gr.Textbox(value="", elem_id="prompt-gradio-input", elem_classes="hidden-input", container=False)
+    hidden_model_name = gr.Textbox(value="Qwen3-VL-4B-Instruct", elem_id="hidden-model-name", elem_classes="hidden-input", container=False)
+
+    max_new_tokens = gr.Slider(minimum=1, maximum=MAX_MAX_NEW_TOKENS, step=1, value=DEFAULT_MAX_NEW_TOKENS, elem_id="gradio-max-new-tokens", elem_classes="hidden-input", container=False)
+    temperature = gr.Slider(minimum=0.1, maximum=4.0, step=0.1, value=0.6, elem_id="gradio-temperature", elem_classes="hidden-input", container=False)
+    top_p = gr.Slider(minimum=0.05, maximum=1.0, step=0.05, value=0.9, elem_id="gradio-top-p", elem_classes="hidden-input", container=False)
+    top_k = gr.Slider(minimum=1, maximum=1000, step=1, value=50, elem_id="gradio-top-k", elem_classes="hidden-input", container=False)
+    repetition_penalty = gr.Slider(minimum=1.0, maximum=2.0, step=0.05, value=1.2, elem_id="gradio-repetition-penalty", elem_classes="hidden-input", container=False)
+    gpu_duration_state = gr.Number(value=60, elem_id="gradio-gpu-duration", elem_classes="hidden-input", container=False)
+
+    result = gr.Textbox(value="", elem_id="gradio-result", elem_classes="hidden-input", container=False)
+
+    example_idx = gr.Textbox(value="", elem_id="example-idx-input", elem_classes="hidden-input", container=False)
+    example_result = gr.Textbox(value="", elem_id="example-result-data", elem_classes="hidden-input", container=False)
+    example_load_btn = gr.Button("Load Example", elem_id="example-load-btn")
+
+    gr.HTML(f"""
+    <div class="app-shell">
+        <div class="app-header">
+            <div class="app-header-left">
+                <div class="app-logo">{OUTPOST_LOGO_SVG}</div>
+                <span class="app-title">Qwen3-VL-Outpost</span>
+                <span class="app-badge">multimodal lab</span>
+                <span class="app-badge fast">Image + PDF + GIF</span>
+            </div>
+        </div>
+
+        <div class="model-tabs-bar">
+            {MODEL_TABS_HTML}
+        </div>
+
+        <div class="mode-tabs-bar">
+            {MODE_TABS_HTML}
+        </div>
+
+        <div class="app-main-row">
+            <div class="app-main-left">
+                <div id="media-drop-zone">
+                    <div id="upload-prompt" class="upload-prompt-modern">
+                        <div id="upload-click-area" class="upload-click-area">
+                            {UPLOAD_PREVIEW_SVG}
+                            <span id="upload-main-text" class="upload-main-text">Click or drag an image here</span>
+                            <span id="upload-sub-text" class="upload-sub-text">Upload one image, PDF, or GIF for multimodal inference</span>
+                        </div>
+                    </div>
+
+                    <input id="custom-file-input" type="file" accept="image/*" style="display:none;" />
+
+                    <div id="single-preview-wrap" class="single-preview-wrap">
+                        <div class="single-preview-card">
+                            <img id="single-preview-img" src="" alt="Preview" style="display:none;">
+                            <iframe id="single-preview-pdf" style="display:none;"></iframe>
+                            <div id="pdf-nav" class="pdf-nav-wrap">
+                                <button id="pdf-prev-btn" class="pdf-nav-btn">◀</button>
+                                <span id="pdf-page-info" class="pdf-page-indicator">No file loaded</span>
+                                <button id="pdf-next-btn" class="pdf-nav-btn">▶</button>
+                            </div>
+                            <div class="preview-overlay-actions">
+                                <button id="preview-upload-btn" class="preview-action-btn" title="Replace">Upload</button>
+                                <button id="preview-clear-btn" class="preview-action-btn" title="Clear">Clear</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="hint-bar">
+                    <b>Modes:</b> Image, PDF, Long Caption, GIF &nbsp;&middot;&nbsp;
+                    <b>Model:</b> Switch between Qwen VL variants &nbsp;&middot;&nbsp;
+                    <kbd>Clear</kbd> removes the current media
+                </div>
+
+                <div class="examples-section">
+                    <div class="examples-title">Quick Examples</div>
+                    <div class="examples-scroll">
+                        {EXAMPLE_CARDS_HTML}
+                    </div>
+                </div>
+            </div>
+
+            <div class="app-main-right">
+                <div class="panel-card">
+                    <div id="instruction-title" class="panel-card-title">Vision Instruction</div>
+                    <div class="panel-card-body">
+                        <label id="query-label" class="modern-label" for="custom-query-input">Query Input</label>
+                        <textarea id="custom-query-input" class="modern-textarea" rows="4" placeholder="e.g., perform OCR, summarize the PDF, describe the GIF, generate a long caption..."></textarea>
+                    </div>
+                </div>
+
+                <div style="padding:12px 20px;">
+                    <button id="custom-run-btn" class="btn-run">
+                        <span id="run-btn-label">Run Inference</span>
+                    </button>
+                </div>
+
+                <div class="output-frame">
+                    <div class="out-title">
+                        <span id="output-title-label">Raw Output Stream</span>
+                        <div class="out-title-right">
+                            <button id="copy-output-btn" class="out-action-btn" title="Copy">{COPY_SVG} Copy</button>
+                            <button id="save-output-btn" class="out-action-btn" title="Save">{SAVE_SVG} Save File</button>
+                        </div>
+                    </div>
+                    <div class="out-body">
+                        <div class="modern-loader" id="output-loader">
+                            <div class="loader-spinner"></div>
+                            <div class="loader-text">Running inference...</div>
+                            <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
+                        </div>
+                        <div class="output-scroll-wrap">
+                            <textarea id="custom-output-textarea" class="output-textarea" placeholder="Raw output will appear here..." readonly></textarea>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="settings-group">
+                    <div class="settings-group-title">Advanced Settings</div>
+                    <div class="settings-group-body">
+                        <div class="slider-row">
+                            <label>Max new tokens</label>
+                            <input type="range" id="custom-max-new-tokens" min="1" max="{MAX_MAX_NEW_TOKENS}" step="1" value="{DEFAULT_MAX_NEW_TOKENS}">
+                            <span class="slider-val" id="custom-max-new-tokens-val">{DEFAULT_MAX_NEW_TOKENS}</span>
+                        </div>
+                        <div class="slider-row">
+                            <label>Temperature</label>
+                            <input type="range" id="custom-temperature" min="0.1" max="4.0" step="0.1" value="0.6">
+                            <span class="slider-val" id="custom-temperature-val">0.6</span>
+                        </div>
+                        <div class="slider-row">
+                            <label>Top-p</label>
+                            <input type="range" id="custom-top-p" min="0.05" max="1.0" step="0.05" value="0.9">
+                            <span class="slider-val" id="custom-top-p-val">0.9</span>
+                        </div>
+                        <div class="slider-row">
+                            <label>Top-k</label>
+                            <input type="range" id="custom-top-k" min="1" max="1000" step="1" value="50">
+                            <span class="slider-val" id="custom-top-k-val">50</span>
+                        </div>
+                        <div class="slider-row">
+                            <label>Repetition penalty</label>
+                            <input type="range" id="custom-repetition-penalty" min="1.0" max="2.0" step="0.05" value="1.2">
+                            <span class="slider-val" id="custom-repetition-penalty-val">1.2</span>
+                        </div>
+                        <div class="slider-row">
+                            <label>GPU Duration (seconds)</label>
+                            <input type="range" id="custom-gpu-duration" min="60" max="300" step="30" value="60">
+                            <span class="slider-val" id="custom-gpu-duration-val">60</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="exp-note">
+            Experimental Qwen VL workspace
+        </div>
+
+        <div class="app-statusbar">
+            <div class="sb-section" id="sb-media-status">No image uploaded</div>
+            <div class="sb-section sb-fixed" id="sb-run-state">Ready</div>
+        </div>
+    </div>
+    """)
+
+    run_btn = gr.Button("Run", elem_id="gradio-run-btn")
+
+    demo.load(fn=noop, inputs=None, outputs=None, js=gallery_js)
+    demo.load(fn=noop, inputs=None, outputs=None, js=wire_outputs_js)
+
+    run_btn.click(
+        fn=run_router,
+        inputs=[
+            hidden_mode_name,
+            hidden_model_name,
+            prompt,
+            hidden_image_b64,
+            hidden_pdf_b64,
+            hidden_gif_b64,
+            hidden_pdf_state,
+            max_new_tokens,
+            temperature,
+            top_p,
+            top_k,
+            repetition_penalty,
+            gpu_duration_state,
+        ],
+        outputs=[result],
+        js=r"""(mode, model, p, img, pdf, gif, pdfs, mnt, t, tp, tk, rp, gd) => {
+            const modelEl = document.querySelector('.model-tab.active');
+            const modeEl = document.querySelector('.mode-tab.active');
+            const modelVal = modelEl ? modelEl.getAttribute('data-model') : model;
+            const modeVal = modeEl ? modeEl.getAttribute('data-mode') : mode;
+            const promptEl = document.getElementById('custom-query-input');
+            const promptVal = promptEl ? promptEl.value : p;
+
+            let imgVal = img, pdfVal = pdf, gifVal = gif;
+            const imgContainer = document.getElementById('hidden-image-b64');
+            const pdfContainer = document.getElementById('hidden-pdf-b64');
+            const gifContainer = document.getElementById('hidden-gif-b64');
+
+            if (imgContainer) {
+                const inner = imgContainer.querySelector('textarea, input');
+                if (inner) imgVal = inner.value;
+            }
+            if (pdfContainer) {
+                const inner = pdfContainer.querySelector('textarea, input');
+                if (inner) pdfVal = inner.value;
+            }
+            if (gifContainer) {
+                const inner = gifContainer.querySelector('textarea, input');
+                if (inner) gifVal = inner.value;
+            }
+
+            return [modeVal, modelVal, promptVal, imgVal, pdfVal, gifVal, pdfs, mnt, t, tp, tk, rp, gd];
+        }""",
     )
 
-    image_submit.click(fn=generate_image,
-                       inputs=[model_choice, image_query, image_upload, max_new_tokens, temperature, top_p, top_k, repetition_penalty, gpu_duration_state],
-                       outputs=[output, markdown_output])
-    
-    video_submit.click(fn=generate_video,
-                       inputs=[model_choice, video_query, video_upload, max_new_tokens, temperature, top_p, top_k, repetition_penalty, gpu_duration_state],
-                       outputs=[output, markdown_output])
-    
-    pdf_submit.click(fn=generate_pdf,
-                     inputs=[model_choice, pdf_query, pdf_state, max_new_tokens, temperature, top_p, top_k, repetition_penalty, gpu_duration_state],
-                     outputs=[output, markdown_output])
-                     
-    gif_submit.click(fn=generate_gif,
-                     inputs=[model_choice, gif_query, gif_upload, max_new_tokens, temperature, top_p, top_k, repetition_penalty, gpu_duration_state],
-                     outputs=[output, markdown_output])
-                     
-    caption_submit.click(fn=generate_caption,
-                         inputs=[model_choice, caption_image_upload, max_new_tokens, temperature, top_p, top_k, repetition_penalty, gpu_duration_state],
-                         outputs=[output, markdown_output])
-
-    pdf_upload.change(fn=load_and_preview_pdf, inputs=[pdf_upload], outputs=[pdf_preview_img, pdf_state, page_info])
-    prev_page_btn.click(fn=lambda s: navigate_pdf_page("prev", s), inputs=[pdf_state], outputs=[pdf_preview_img, pdf_state, page_info])
-    next_page_btn.click(fn=lambda s: navigate_pdf_page("next", s), inputs=[pdf_state], outputs=[pdf_preview_img, pdf_state, page_info])
+    example_load_btn.click(
+        fn=load_example_data,
+        inputs=[example_idx],
+        outputs=[example_result],
+        queue=False,
+    )
 
 if __name__ == "__main__":
-    demo.queue(max_size=50).launch(theme=orange_red_theme, css=css, mcp_server=True, ssr_mode=False, show_error=True)
+    demo.queue(max_size=50).launch(
+        css=css,
+        mcp_server=True,
+        ssr_mode=False,
+        show_error=True,
+        allowed_paths=["examples"],
+    )