Update app.py

app.py

@@ -1,12 +1,11 @@
 import os
 import gc
 import re
-import ast
 import json
-import base64
-import random
 import uuid
 import time
+import base64
+import random
 from io import BytesIO
 from threading import Thread
 
@@ -31,6 +30,16 @@ MAX_INPUT_TOKEN_LENGTH = int(os.getenv("MAX_INPUT_TOKEN_LENGTH", "4096"))
 device = torch.device("cuda:0" if torch.cuda.is_available() else "cpu")
 print("Using device:", device)
 
+
+def load_model(model_id, cls, **kwargs):
+    return cls.from_pretrained(
+        model_id,
+        trust_remote_code=True,
+        torch_dtype=torch.float16,
+        **kwargs
+    ).to(device).eval()
+
+
 MODEL_ID_N = "prithivMLmods/DeepCaption-VLA-7B"
 processor_n = AutoProcessor.from_pretrained(MODEL_ID_N, trust_remote_code=True)
 model_n = Qwen2_5_VLForConditionalGeneration.from_pretrained(
@@ -83,21 +92,24 @@ MODEL_MAP = {
     "coreOCR-7B-050325-preview": (processor_k, model_k),
     "SpaceOm-3B": (processor_y, model_y),
 }
+
 MODEL_CHOICES = list(MODEL_MAP.keys())
 
 image_examples = [
-    {"query": "type out the messy hand-writing as accurately as you can.", "image": "images/1.jpg", "model": "coreOCR-7B-050325-preview"},
-    {"query": "count the number of birds and explain the scene in detail.", "image": "images/2.jpeg", "model": "DeepCaption-VLA-7B"},
-    {"query": "how far is the Goal from the penalty taker in this image?.", "image": "images/3.png", "model": "SpaceThinker-3B"},
-    {"query": "approximately how many meters apart are the chair and bookshelf?.", "image": "images/4.png", "model": "SkyCaptioner-V1"},
-    {"query": "how far is the man in the red hat from the pallet of boxes in feet?.", "image": "images/5.jpg", "model": "SpaceOm-3B"},
+    {"query": "type out the messy hand-writing as accurately as you can.", "media": "images/1.jpg", "model": "coreOCR-7B-050325-preview", "mode": "image"},
+    {"query": "count the number of birds and explain the scene in detail.", "media": "images/2.jpeg", "model": "DeepCaption-VLA-7B", "mode": "image"},
+    {"query": "how far is the Goal from the penalty taker in this image?.", "media": "images/3.png", "model": "SpaceThinker-3B", "mode": "image"},
+    {"query": "approximately how many meters apart are the chair and bookshelf?.", "media": "images/4.png", "model": "SkyCaptioner-V1", "mode": "image"},
+    {"query": "how far is the man in the red hat from the pallet of boxes in feet?.", "media": "images/5.jpg", "model": "SpaceOm-3B", "mode": "image"},
 ]
 
 video_examples = [
-    {"query": "give the highlights of the movie scene video.", "video": "videos/1.mp4", "model": "DeepCaption-VLA-7B"},
-    {"query": "explain the advertisement in detail.", "video": "videos/2.mp4", "model": "SkyCaptioner-V1"},
+    {"query": "give the highlights of the movie scene video.", "media": "videos/1.mp4", "model": "DeepCaption-VLA-7B", "mode": "video"},
+    {"query": "explain the advertisement in detail.", "media": "videos/2.mp4", "model": "SkyCaptioner-V1", "mode": "video"},
 ]
 
+all_examples = image_examples + video_examples
+
 
 def pil_to_data_url(img: Image.Image, fmt="PNG"):
     buf = BytesIO()
@@ -119,16 +131,24 @@ def file_to_data_url(path):
         "mp4": "video/mp4",
         "mov": "video/quicktime",
         "webm": "video/webm",
-        "mkv": "video/x-matroska",
     }.get(ext, "application/octet-stream")
     with open(path, "rb") as f:
         data = base64.b64encode(f.read()).decode()
     return f"data:{mime};base64,{data}"
 
 
-def make_thumb_b64(path, max_dim=240):
+def make_thumb_b64(path, mode="image", max_dim=240):
     try:
-        img = Image.open(path).convert("RGB")
+        if mode == "video":
+            cap = cv2.VideoCapture(path)
+            ok, frame = cap.read()
+            cap.release()
+            if not ok:
+                return ""
+            frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+            img = Image.fromarray(frame).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:
@@ -136,53 +156,20 @@ def make_thumb_b64(path, max_dim=240):
         return ""
 
 
-def make_video_thumb_b64(path, max_dim=240):
-    try:
-        cap = cv2.VideoCapture(path)
-        total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
-        target = max(0, total_frames // 2)
-        cap.set(cv2.CAP_PROP_POS_FRAMES, target)
-        success, frame = cap.read()
-        cap.release()
-        if not success:
-            return ""
-        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
-        img = Image.fromarray(frame).convert("RGB")
-        img.thumbnail((max_dim, max_dim))
-        return pil_to_data_url(img, "JPEG")
-    except Exception as e:
-        print("Video thumbnail error:", e)
-        return ""
-
-
 def build_example_cards_html():
     cards = ""
-    for i, ex in enumerate(image_examples):
-        thumb = make_thumb_b64(ex["image"])
+    for i, ex in enumerate(all_examples):
+        thumb = make_thumb_b64(ex["media"], ex["mode"])
         prompt_short = ex["query"][:72] + ("..." if len(ex["query"]) > 72 else "")
+        media_badge = "VIDEO" if ex["mode"] == "video" else "IMAGE"
         cards += f"""
-        <div class="example-card" data-kind="image" data-idx="{i}">
+        <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>
-                <span class="example-badge kind">IMAGE</span>
-            </div>
-            <div class="example-prompt-text">{prompt_short}</div>
-        </div>
-        """
-    for i, ex in enumerate(video_examples):
-        thumb = make_video_thumb_b64(ex["video"])
-        prompt_short = ex["query"][:72] + ("..." if len(ex["query"]) > 72 else "")
-        cards += f"""
-        <div class="example-card" data-kind="video" data-idx="{i}">
-            <div class="example-thumb-wrap">
-                {"<img src='" + thumb + "' alt=''>" if thumb else "<div class='example-thumb-placeholder'>Video</div>"}
-            </div>
-            <div class="example-meta-row">
-                <span class="example-badge">{ex["model"]}</span>
-                <span class="example-badge kind video">VIDEO</span>
             </div>
             <div class="example-prompt-text">{prompt_short}</div>
         </div>
@@ -193,63 +180,84 @@ def build_example_cards_html():
 EXAMPLE_CARDS_HTML = build_example_cards_html()
 
 
-def load_example_data(kind, idx_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]
+    media_b64 = file_to_data_url(ex["media"])
+    if not media_b64:
+        return json.dumps({"status": "error", "message": f"Could not load example {ex['mode']}"})
+    return json.dumps({
+        "status": "ok",
+        "query": ex["query"],
+        "media": media_b64,
+        "model": ex["model"],
+        "mode": ex["mode"],
+        "name": os.path.basename(ex["media"]),
+    })
+
+
+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
 
-    if kind == "image":
-        if idx < 0 or idx >= len(image_examples):
-            return json.dumps({"status": "error", "message": "Example index out of range"})
-        ex = image_examples[idx]
-        img_b64 = file_to_data_url(ex["image"])
-        if not img_b64:
-            return json.dumps({"status": "error", "message": "Could not load example image"})
-        return json.dumps({
-            "status": "ok",
-            "kind": "image",
-            "query": ex["query"],
-            "file": img_b64,
-            "model": ex["model"],
-            "name": os.path.basename(ex["image"]),
-        })
-
-    if kind == "video":
-        if idx < 0 or idx >= len(video_examples):
-            return json.dumps({"status": "error", "message": "Example index out of range"})
-        ex = video_examples[idx]
-        vid_b64 = file_to_data_url(ex["video"])
-        if not vid_b64:
-            return json.dumps({"status": "error", "message": "Could not load example video"})
-        return json.dumps({
-            "status": "ok",
-            "kind": "video",
-            "query": ex["query"],
-            "file": vid_b64,
-            "model": ex["model"],
-            "name": os.path.basename(ex["video"]),
-        })
-
-    return json.dumps({"status": "error", "message": "Invalid example kind"})
+
+def b64_to_temp_video(b64_str):
+    if not b64_str:
+        return None
+    try:
+        if b64_str.startswith("data:"):
+            header, data = b64_str.split(",", 1)
+            mime = header.split(";")[0].replace("data:", "")
+        else:
+            data = b64_str
+            mime = "video/mp4"
+        ext = {
+            "video/mp4": ".mp4",
+            "video/webm": ".webm",
+            "video/quicktime": ".mov",
+        }.get(mime, ".mp4")
+        raw = base64.b64decode(data)
+        temp_dir = os.path.join("/tmp", "visionscope_r2_media")
+        os.makedirs(temp_dir, exist_ok=True)
+        path = os.path.join(temp_dir, f"{uuid.uuid4().hex}{ext}")
+        with open(path, "wb") as f:
+            f.write(raw)
+        return path
+    except Exception:
+        return None
 
 
 def downsample_video(video_path):
     vidcap = cv2.VideoCapture(video_path)
     total_frames = int(vidcap.get(cv2.CAP_PROP_FRAME_COUNT))
-    fps = vidcap.get(cv2.CAP_PROP_FPS)
+    fps = vidcap.get(cv2.CAP_PROP_FPS) or 1.0
     frames = []
-    if total_frames <= 0 or fps <= 0:
+    frame_count = min(total_frames, 10) if total_frames > 0 else 0
+    if frame_count == 0:
         vidcap.release()
         return frames
-    frame_indices = np.linspace(0, total_frames - 1, min(total_frames, 10), dtype=int)
+    frame_indices = np.linspace(0, total_frames - 1, frame_count, dtype=int)
     for i in frame_indices:
         vidcap.set(cv2.CAP_PROP_POS_FRAMES, int(i))
         success, image = vidcap.read()
         if success:
             image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
             pil_image = Image.fromarray(image)
-            timestamp = round(i / fps, 2)
+            timestamp = round(float(i) / float(fps), 2)
             frames.append((pil_image, timestamp))
     vidcap.release()
     return frames
@@ -276,7 +284,7 @@ def generate_image(model_name, text, image, max_new_tokens=1024, temperature=0.6
     if image is None:
         raise gr.Error("Please upload an image.")
     if not text or not str(text).strip():
-        raise gr.Error("Please enter your vision/query instruction.")
+        raise gr.Error("Please enter your instruction.")
     if len(str(text)) > MAX_INPUT_TOKEN_LENGTH * 8:
         raise gr.Error("Query is too long. Please shorten your input.")
 
@@ -290,7 +298,12 @@ def generate_image(model_name, text, image, max_new_tokens=1024, temperature=0.6
         ]
     }]
 
-    prompt_full = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
+    prompt_full = processor.apply_chat_template(
+        messages,
+        tokenize=False,
+        add_generation_prompt=True
+    )
+
     inputs = processor(
         text=[prompt_full],
         images=[image],
@@ -305,11 +318,11 @@ def generate_image(model_name, text, image, max_new_tokens=1024, temperature=0.6
         **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),
-        "do_sample": True,
     }
 
     thread = Thread(target=model.generate, kwargs=generation_kwargs)
@@ -333,21 +346,21 @@ def generate_video(model_name, text, video_path, max_new_tokens=1024, temperatur
     if not video_path:
         raise gr.Error("Please upload a video.")
     if not text or not str(text).strip():
-        raise gr.Error("Please enter your vision/query instruction.")
+        raise gr.Error("Please enter your instruction.")
     if len(str(text)) > MAX_INPUT_TOKEN_LENGTH * 8:
         raise gr.Error("Query is too long. Please shorten your input.")
 
     processor, model = MODEL_MAP[model_name]
     frames = downsample_video(video_path)
     if not frames:
-        raise gr.Error("Failed to read video frames.")
+        raise gr.Error("Could not read the uploaded video.")
 
     messages = [
         {"role": "system", "content": [{"type": "text", "text": "You are a helpful assistant."}]},
         {"role": "user", "content": [{"type": "text", "text": text}]}
     ]
-    for frame in frames:
-        image, timestamp = frame
+
+    for image, timestamp in frames:
         messages[1]["content"].append({"type": "text", "text": f"Frame {timestamp}:"})
         messages[1]["content"].append({"type": "image", "image": image})
 
@@ -387,6 +400,43 @@ def generate_video(model_name, text, video_path, max_new_tokens=1024, temperatur
         torch.cuda.empty_cache()
 
 
+def run_inference(mode, model_name, text, image_b64, video_b64, max_new_tokens_v, temperature_v, top_p_v, top_k_v, repetition_penalty_v, gpu_timeout_v):
+    if mode == "video":
+        temp_video_path = b64_to_temp_video(video_b64)
+        if not temp_video_path:
+            raise gr.Error("Could not decode uploaded video.")
+        try:
+            yield from generate_video(
+                model_name=model_name,
+                text=text,
+                video_path=temp_video_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,
+            )
+        finally:
+            try:
+                os.remove(temp_video_path)
+            except Exception:
+                pass
+    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
 
@@ -396,11 +446,11 @@ css = r"""
 *{box-sizing:border-box;margin:0;padding:0}
 html,body{height:100%;overflow-x:hidden}
 body,.gradio-container{
-    background:#0b1020!important;
+    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:#0b1020!important;color:#e4e4e7!important}
+.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}
 
@@ -411,51 +461,64 @@ footer{display:none!important}
 }
 
 .app-shell{
-    background:#11182d;border:1px solid #1e2b52;border-radius:16px;
+    background:#18181b;border:1px solid #27272a;border-radius:16px;
     margin:12px auto;max-width:1400px;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,#11182d,#152042);border-bottom:1px solid #1e2b52;
+    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,#0000FF,#2e5bff,#6d8dff);
+    width:38px;height:38px;background:linear-gradient(135deg,#0000FF,#335CFF,#6680FF);
     border-radius:10px;display:flex;align-items:center;justify-content:center;
     box-shadow:0 4px 12px rgba(0,0,255,.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,#b8c5ff);
+    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,255,.12);color:#8ea2ff;border:1px solid rgba(0,0,255,.25);letter-spacing:.3px;
+    background:rgba(0,0,255,.12);color:#8aa2ff;border:1px solid rgba(0,0,255,.25);letter-spacing:.3px;
 }
-.app-badge.fast{background:rgba(46,91,255,.10);color:#93a7ff;border:1px solid rgba(46,91,255,.22)}
+.app-badge.fast{background:rgba(51,92,255,.10);color:#7f9cff;border:1px solid rgba(51,92,255,.22)}
 
-.mode-tabs-bar,.model-tabs-bar{
-    background:#11182d;border-bottom:1px solid #1e2b52;padding:10px 16px;
+.model-tabs-bar{
+    background:#18181b;border-bottom:1px solid #27272a;padding:10px 16px;
     display:flex;gap:8px;align-items:center;flex-wrap:wrap;
 }
-.model-tab,.mode-tab{
+.model-tab{
     display:inline-flex;align-items:center;justify-content:center;gap:6px;
-    min-width:32px;height:34px;background:transparent;border:1px solid #243669;
+    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;
 }
-.model-tab:hover,.mode-tab:hover{background:rgba(0,0,255,.12);border-color:rgba(0,0,255,.35)}
-.model-tab.active,.mode-tab.active{background:rgba(0,0,255,.22);border-color:#0000FF;color:#fff!important;box-shadow:0 0 0 2px rgba(0,0,255,.10)}
-.model-tab-label,.mode-tab-label{font-size:12px;color:#ffffff!important;font-weight:600}
+.model-tab:hover{background:rgba(0,0,255,.12);border-color:rgba(0,0,255,.35)}
+.model-tab.active{background:rgba(0,0,255,.22);border-color:#0000FF;color:#fff!important;box-shadow:0 0 0 2px rgba(0,0,255,.10)}
+.model-tab-label{font-size:12px;color:#ffffff!important;font-weight:600}
+
+.mode-tabs-bar{
+    background:#18181b;border-bottom:1px solid #27272a;padding:10px 16px 12px;
+    display:flex;gap:8px;align-items:center;flex-wrap:wrap;
+}
+.mode-tab{
+    display:inline-flex;align-items:center;justify-content:center;gap:6px;
+    min-width:110px;height:34px;background:transparent;border:1px solid #27272a;
+    border-radius:999px;cursor:pointer;font-size:12px;font-weight:700;padding:0 14px;
+    color:#ffffff!important;transition:all .15s ease;text-transform:uppercase;letter-spacing:.5px;
+}
+.mode-tab:hover{background:rgba(0,0,255,.12);border-color:rgba(0,0,255,.35)}
+.mode-tab.active{background:rgba(0,0,255,.22);border-color:#0000FF;color:#fff!important;box-shadow:0 0 0 2px rgba(0,0,255,.10)}
 
 .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 #1e2b52}
-.app-main-right{width:470px;display:flex;flex-direction:column;flex-shrink:0;background:#11182d}
+.app-main-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #27272a}
+.app-main-right{width:470px;display:flex;flex-direction:column;flex-shrink:0;background:#18181b}
 
 #media-drop-zone{
-    position:relative;background:#08101d;height:440px;min-height:440px;max-height:440px;
+    position:relative;background:#09090b;height:440px;min-height:440px;max-height:440px;
     overflow:hidden;
 }
 #media-drop-zone.drag-over{outline:2px solid #0000FF;outline-offset:-2px;background:rgba(0,0,255,.04)}
@@ -466,7 +529,7 @@ footer{display:none!important}
 .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 #32446d;border-radius:16px;
+    border:2px dashed #3f3f46;border-radius:16px;
     background:rgba(0,0,255,.03);transition:all .2s ease;gap:8px;text-align:center;
     overflow:hidden;
 }
@@ -482,7 +545,7 @@ footer{display:none!important}
 }
 .single-preview-card{
     width:100%;height:100%;max-width:100%;max-height:100%;border-radius:14px;
-    overflow:hidden;border:1px solid #1e2b52;background:#0d1425;
+    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 video{
@@ -501,63 +564,67 @@ footer{display:none!important}
 .preview-action-btn:hover{background:#0000FF;border-color:#0000FF}
 
 .hint-bar{
-    background:rgba(0,0,255,.06);border-top:1px solid #1e2b52;border-bottom:1px solid #1e2b52;
+    background:rgba(0,0,255,.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:#8ea2ff;font-weight:600}
+.hint-bar b{color:#8aa2ff;font-weight:600}
 .hint-bar kbd{
-    display:inline-block;padding:1px 6px;background:#1b2646;border:1px solid #2d3b6d;
+    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 #1e2b52;padding:12px 16px}
+.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:#08101d;border-radius:3px}
-.examples-scroll::-webkit-scrollbar-thumb{background:#243669;border-radius:3px}
-.examples-scroll::-webkit-scrollbar-thumb:hover{background:#38529a}
+.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{
-    flex-shrink:0;width:220px;background:#08101d;border:1px solid #1e2b52;
+    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:#0000FF;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,255,.15)}
 .example-card.loading{opacity:.5;pointer-events:none}
-.example-thumb-wrap{height:120px;overflow:hidden;background:#11182d}
+.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:#11182d;color:#3f4e78;font-size:11px;
+    background:#18181b;color:#3f3f46;font-size:11px;
 }
-.example-meta-row{padding:6px 10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.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,255,.12);border-radius:4px;
-    font-size:10px;font-weight:600;color:#93a7ff;font-family:'JetBrains Mono',monospace;white-space:nowrap;
+    font-size:10px;font-weight:600;color:#8aa2ff;font-family:'JetBrains Mono',monospace;white-space:nowrap;
 }
-.example-badge.kind{background:rgba(100,130,255,.12);color:#bfd0ff}
-.example-badge.kind.video{background:rgba(0,90,255,.12);color:#a7c4ff}
 .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 #1e2b52}
+.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(30,43,82,.6);
+    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:#08101d;border:1px solid #1e2b52;border-radius:8px;
+    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:#0000FF;box-shadow:0 0 0 3px rgba(0,0,255,.15)}
-.modern-textarea::placeholder{color:#4e5d89}
+.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;
 }
@@ -572,21 +639,21 @@ footer{display:none!important}
 }
 .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,#1d4ed8,#1e40af);color:#fff;border:1px solid rgba(255,255,255,.15)}
-.toast-notification.info{background:linear-gradient(135deg,#0000FF,#1d4ed8);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,#1d4ed8,#1e40af);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,#0000FF,#1d4ed8);border:none;border-radius:10px;
+    background:linear-gradient(135deg,#0000FF,#003DCC);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,255,.3),inset 0 1px 0 rgba(255,255,255,.1);
 }
 .btn-run:hover{
-    background:linear-gradient(135deg,#315cff,#0000FF);transform:translateY(-1px);
+    background:linear-gradient(135deg,#335CFF,#0000FF);transform:translateY(-1px);
     box-shadow:0 6px 24px rgba(0,0,255,.45),inset 0 1px 0 rgba(255,255,255,.15);
 }
 .btn-run:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,255,.3)}
@@ -594,7 +661,7 @@ footer{display:none!important}
     color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
 }
 
-.output-frame{border-bottom:1px solid #1e2b52;display:flex;flex-direction:column;position:relative}
+.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{
@@ -603,104 +670,104 @@ footer{display:none!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(30,43,82,.6);
+    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,255,.1);
     border:1px solid rgba(0,0,255,.2);border-radius:6px;cursor:pointer;padding:3px 10px;
-    font-size:11px;font-weight:500;color:#93a7ff!important;gap:4px;height:24px;transition:all .15s;
+    font-size:11px;font-weight:500;color:#8aa2ff!important;gap:4px;height:24px;transition:all .15s;
 }
 .out-action-btn:hover{background:rgba(0,0,255,.2);border-color:rgba(0,0,255,.35);color:#ffffff!important}
-.out-action-btn svg{width:12px;height:12px;fill:#93a7ff}
+.out-action-btn svg{width:12px;height:12px;fill:#8aa2ff}
 .output-frame .out-body{
-    flex:1;background:#08101d;display:flex;align-items:stretch;justify-content:stretch;
+    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:#08101d;color:#e4e4e7;
+    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:#5f6d96}
+.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(8,16,29,.92);
+    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 #243669;border-top-color:#0000FF;
+    width:36px;height:36px;border:3px solid #27272a;border-top-color:#0000FF;
     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:#243669;border-radius:2px;overflow:hidden}
+.loader-bar-track{width:200px;height:4px;background:#27272a;border-radius:2px;overflow:hidden}
 .loader-bar-fill{
-    height:100%;background:linear-gradient(90deg,#0000FF,#4b74ff,#0000FF);
+    height:100%;background:linear-gradient(90deg,#0000FF,#6680FF,#0000FF);
     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 #1e2b52;border-radius:10px;margin:12px 16px;padding:0;overflow:hidden}
+.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 #1e2b52;background:rgba(17,24,45,.5);
+    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:#243669;
+    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,#0000FF,#1d4ed8);
+    -webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#0000FF,#003DCC);
     border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,255,.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,#0000FF,#1d4ed8);
+    width:16px;height:16px;background:linear-gradient(135deg,#0000FF,#003DCC);
     border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(0,0,255,.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:#08101d;border:1px solid #1e2b52;
+    font-weight:500;padding:3px 8px;background:#09090b;border:1px solid #27272a;
     border-radius:6px;color:#a1a1aa;flex-shrink:0;
 }
 
 .app-statusbar{
-    background:#11182d;border-top:1px solid #1e2b52;padding:6px 20px;
+    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:#6b7cae;overflow:hidden;white-space:nowrap;
+    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,255,.08);border-radius:6px;color:#93a7ff;font-weight:500;
+    padding:3px 12px;background:rgba(0,0,255,.08);border-radius:6px;color:#8aa2ff;font-weight:500;
 }
 
-.exp-note{padding:10px 20px;font-size:12px;color:#6b7cae;border-top:1px solid #1e2b52;text-align:center}
-.exp-note a{color:#93a7ff;text-decoration:none}
+.exp-note{padding:10px 20px;font-size:12px;color:#52525b;border-top:1px solid #27272a;text-align:center}
+.exp-note a{color:#8aa2ff;text-decoration:none}
 .exp-note a:hover{text-decoration:underline}
 
 ::-webkit-scrollbar{width:8px;height:8px}
-::-webkit-scrollbar-track{background:#08101d}
-::-webkit-scrollbar-thumb{background:#243669;border-radius:4px}
-::-webkit-scrollbar-thumb:hover{background:#38529a}
+::-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 #1e2b52}
+    .app-main-left{border-right:none;border-bottom:1px solid #27272a}
 }
 """
 
@@ -730,7 +797,8 @@ function init() {
     }
 
     window.__visionScopeInitDone = true;
-    let fileState = null;
+    let mediaState = null;
+    let currentMode = 'image';
     let toastTimer = null;
 
     function showToast(message, type) {
@@ -798,10 +866,10 @@ function init() {
         });
     }
 
-    function syncFileToGradio() {
-        setGradioValue('hidden-file-b64', fileState ? fileState.b64 : '');
-        setGradioValue('hidden-input-kind', fileState ? fileState.kind : getActiveMode());
-        const txt = fileState ? ('1 ' + fileState.kind + ' uploaded') : ('No ' + getActiveMode() + ' uploaded');
+    function syncMediaToGradio() {
+        setGradioValue('hidden-image-b64', mediaState && mediaState.mode === 'image' ? mediaState.b64 : '');
+        setGradioValue('hidden-video-b64', mediaState && mediaState.mode === 'video' ? mediaState.b64 : '');
+        const txt = mediaState ? (`1 ${mediaState.mode} uploaded`) : `No ${currentMode} uploaded`;
         if (mediaStatus) mediaStatus.textContent = txt;
     }
 
@@ -815,90 +883,63 @@ function init() {
 
     function syncModeToGradio(mode) {
         setGradioValue('hidden-mode-name', mode);
-        setGradioValue('hidden-input-kind', fileState ? fileState.kind : mode);
-        const sub = document.getElementById('upload-sub-text');
-        const main = document.getElementById('upload-main-text');
-        if (mode === 'video') {
-            if (main) main.textContent = 'Click or drag a video here';
-            if (sub) sub.textContent = 'Upload one short video clip for multimodal video understanding';
-        } else {
-            if (main) main.textContent = 'Click or drag an image here';
-            if (sub) sub.textContent = 'Upload one document, page, receipt, screenshot, or scene image for OCR and vision tasks';
-        }
-        if (!fileState && mediaStatus) mediaStatus.textContent = 'No ' + mode + ' uploaded';
-    }
-
-    function getActiveMode() {
-        const active = document.querySelector('.mode-tab.active');
-        return active ? active.getAttribute('data-mode') : 'image';
     }
 
-    function activateModeTab(name) {
-        document.querySelectorAll('.mode-tab[data-mode]').forEach(btn => {
-            btn.classList.toggle('active', btn.getAttribute('data-mode') === name);
-        });
-        syncModeToGradio(name);
-        if (fileState && fileState.kind !== name) {
-            clearPreview();
+    function renderPreview() {
+        if (!mediaState) {
+            previewImg.src = '';
+            previewVideo.src = '';
+            previewImg.style.display = 'none';
+            previewVideo.style.display = 'none';
+            previewWrap.style.display = 'none';
+            if (uploadPrompt) uploadPrompt.style.display = 'flex';
+            syncMediaToGradio();
+            return;
         }
-    }
-    window.__activateModeTab = activateModeTab;
 
-    function activateModelTab(name) {
-        document.querySelectorAll('.model-tab[data-model]').forEach(btn => {
-            btn.classList.toggle('active', btn.getAttribute('data-model') === name);
-        });
-        syncModelToGradio(name);
-    }
-    window.__activateModelTab = activateModelTab;
-
-    function setPreview(kind, b64, name) {
-        fileState = {kind, b64, name: name || kind};
-        if (kind === 'video') {
-            previewVideo.src = b64;
-            previewVideo.style.display = 'block';
+        if (mediaState.mode === 'video') {
+            previewImg.src = '';
             previewImg.style.display = 'none';
-            previewVideo.load();
+            previewVideo.src = mediaState.b64;
+            previewVideo.style.display = 'block';
+            previewWrap.style.display = 'flex';
         } else {
-            previewImg.src = b64;
-            previewImg.style.display = 'block';
-            previewVideo.style.display = 'none';
+            previewVideo.pause();
             previewVideo.removeAttribute('src');
+            previewVideo.load();
+            previewVideo.style.display = 'none';
+            previewImg.src = mediaState.b64;
+            previewImg.style.display = 'block';
+            previewWrap.style.display = 'flex';
         }
-        previewWrap.style.display = 'flex';
         if (uploadPrompt) uploadPrompt.style.display = 'none';
-        activateModeTab(kind);
-        syncFileToGradio();
+        syncMediaToGradio();
+    }
+
+    function setPreview(b64, name, mode) {
+        mediaState = {b64, name: name || 'file', mode: mode || currentMode};
+        renderPreview();
     }
     window.__setPreview = setPreview;
 
     function clearPreview() {
-        fileState = null;
-        previewImg.src = '';
-        previewVideo.pause();
-        previewVideo.removeAttribute('src');
-        previewVideo.load();
-        previewWrap.style.display = 'none';
-        if (uploadPrompt) uploadPrompt.style.display = 'flex';
-        syncFileToGradio();
+        mediaState = null;
+        renderPreview();
     }
     window.__clearPreview = clearPreview;
 
     function processFile(file) {
         if (!file) return;
-        const mode = getActiveMode();
-
-        if (mode === 'image' && !file.type.startsWith('image/')) {
+        if (currentMode === 'image' && !file.type.startsWith('image/')) {
             showToast('Only image files are supported in Image mode', 'error');
             return;
         }
-        if (mode === 'video' && !file.type.startsWith('video/')) {
+        if (currentMode === 'video' && !file.type.startsWith('video/')) {
             showToast('Only video files are supported in Video mode', 'error');
             return;
         }
-
         const reader = new FileReader();
-        reader.onload = (e) => setPreview(mode, e.target.result, file.name);
+        reader.onload = (e) => setPreview(e.target.result, file.name, currentMode);
         reader.readAsDataURL(file);
     }
 
@@ -908,6 +949,17 @@ function init() {
         e.target.value = '';
     });
 
+    function updateAccept() {
+        fileInput.accept = currentMode === 'video' ? 'video/*' : 'image/*';
+        const main = document.getElementById('upload-main-text');
+        const sub = document.getElementById('upload-sub-text');
+        if (main) main.textContent = currentMode === 'video' ? 'Click or drag a video here' : 'Click or drag an image here';
+        if (sub) sub.textContent = currentMode === 'video'
+            ? 'Upload one short video clip for multimodal video understanding'
+            : 'Upload one document, page, receipt, screenshot, or scene image for vision tasks';
+        if (!mediaState && mediaStatus) mediaStatus.textContent = `No ${currentMode} uploaded`;
+    }
+
     if (uploadClick) uploadClick.addEventListener('click', () => fileInput.click());
     if (btnUpload) btnUpload.addEventListener('click', () => fileInput.click());
     if (btnClear) btnClear.addEventListener('click', clearPreview);
@@ -928,18 +980,32 @@ function init() {
 
     promptInput.addEventListener('input', syncPromptToGradio);
 
-    document.querySelectorAll('.model-tab[data-model]').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const model = btn.getAttribute('data-model');
-            activateModelTab(model);
+    function activateModelTab(name) {
+        document.querySelectorAll('.model-tab[data-model]').forEach(btn => {
+            btn.classList.toggle('active', btn.getAttribute('data-model') === name);
         });
-    });
+        syncModelToGradio(name);
+    }
+    window.__activateModelTab = activateModelTab;
 
-    document.querySelectorAll('.mode-tab[data-mode]').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const mode = btn.getAttribute('data-mode');
-            activateModeTab(mode);
+    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();
+        if (mediaState && mediaState.mode !== mode) {
+            clearPreview();
+        }
+    }
+    window.__activateModeTab = activateModeTab;
+
+    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')));
     });
 
     activateModelTab('DeepCaption-VLA-7B');
@@ -973,24 +1039,22 @@ function init() {
 
     function validateBeforeRun() {
         const promptVal = promptInput.value.trim();
-        const currentMode = getActiveMode();
-
-        if (!fileState && !promptVal) {
-            showToast('Please upload a file and enter your instruction', 'error');
+        if (!mediaState && !promptVal) {
+            showToast(`Please upload a ${currentMode} and enter your instruction`, 'error');
             flashPromptError();
             return false;
         }
-        if (!fileState) {
-            showToast('Please upload a ' + currentMode, 'error');
+        if (!mediaState) {
+            showToast(`Please upload a ${currentMode}`, 'error');
             return false;
         }
-        if (!promptVal) {
-            showToast('Please enter your vision/query instruction', 'warning');
-            flashPromptError();
+        if (mediaState.mode !== currentMode) {
+            showToast(`Uploaded media does not match ${currentMode} mode`, 'error');
             return false;
         }
-        if (fileState.kind !== currentMode) {
-            showToast('Uploaded file type does not match active mode', 'error');
+        if (!promptVal) {
+            showToast('Please enter your instruction', 'warning');
+            flashPromptError();
             return false;
         }
         const currentModel = (document.querySelector('.model-tab.active') || {}).dataset?.model;
@@ -1004,10 +1068,11 @@ function init() {
     window.__clickGradioRunBtn = function() {
         if (!validateBeforeRun()) return;
         syncPromptToGradio();
-        syncFileToGradio();
+        syncMediaToGradio();
         const activeModel = document.querySelector('.model-tab.active');
         if (activeModel) syncModelToGradio(activeModel.getAttribute('data-model'));
-        syncModeToGradio(getActiveMode());
+        const activeMode = document.querySelector('.mode-tab.active');
+        if (activeMode) syncModeToGradio(activeMode.getAttribute('data-mode'));
         if (outputArea) outputArea.value = '';
         showLoader();
         setTimeout(() => {
@@ -1027,6 +1092,7 @@ function init() {
                 const text = outputArea ? outputArea.value : '';
                 if (!text.trim()) {
                     showToast('No output to copy', 'warning');
+                    flashOutputError();
                     return;
                 }
                 await navigator.clipboard.writeText(text);
@@ -1063,12 +1129,10 @@ function init() {
     document.querySelectorAll('.example-card[data-idx]').forEach(card => {
         card.addEventListener('click', () => {
             const idx = card.getAttribute('data-idx');
-            const kind = card.getAttribute('data-kind');
             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-kind-input', kind);
             setGradioValue('example-idx-input', idx);
             setTimeout(() => {
                 const btn = document.getElementById('example-load-btn');
@@ -1090,13 +1154,13 @@ function init() {
             const data = JSON.parse(el.value);
             if (data.status === 'ok') {
                 window.__lastExampleVal = el.value;
-                if (data.file && data.kind) setPreview(data.kind, data.file, data.name || 'example');
+                if (data.mode) activateModeTab(data.mode);
+                if (data.media) setPreview(data.media, data.name || 'example', data.mode || 'image');
                 if (data.query) {
                     promptInput.value = data.query;
                     syncPromptToGradio();
                 }
                 if (data.model) activateModelTab(data.model);
-                if (data.kind) activateModeTab(data.kind);
                 document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
                 showToast('Example loaded', 'info');
             } else if (data.status === 'error') {
@@ -1150,10 +1214,9 @@ watchOutputs();
 }
 """
 
-APP_LOGO_SVG = """
+VISION_LOGO_SVG = """
 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 2 4 6v6c0 5 3.4 9.4 8 10 4.6-.6 8-5 8-10V6l-8-4Z" fill="white"/>
-  <path d="M9 11.5 11 13.5 15.5 9" stroke="#0000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 5C6.5 5 2.1 8.4 1 12c1.1 3.6 5.5 7 11 7s9.9-3.4 11-7c-1.1-3.6-5.5-7-11-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2.2A1.8 1.8 0 1 0 12 10a1.8 1.8 0 0 0 0 3.6Z" fill="white"/>
 </svg>
 """
 
@@ -1174,14 +1237,14 @@ MODEL_TABS_HTML = "".join([
 ])
 
 MODE_TABS_HTML = """
-<button class="mode-tab active" data-mode="image"><span class="mode-tab-label">Image Inference</span></button>
-<button class="mode-tab" data-mode="video"><span class="mode-tab-label">Video Inference</span></button>
+<button class="mode-tab active" data-mode="image">Image Inference</button>
+<button class="mode-tab" data-mode="video">Video Inference</button>
 """
 
 with gr.Blocks() as demo:
-    hidden_file_b64 = gr.Textbox(value="", elem_id="hidden-file-b64", elem_classes="hidden-input", container=False)
     hidden_mode_name = gr.Textbox(value="image", elem_id="hidden-mode-name", elem_classes="hidden-input", container=False)
-    hidden_input_kind = gr.Textbox(value="image", elem_id="hidden-input-kind", elem_classes="hidden-input", container=False)
+    hidden_image_b64 = gr.Textbox(value="", elem_id="hidden-image-b64", elem_classes="hidden-input", container=False)
+    hidden_video_b64 = gr.Textbox(value="", elem_id="hidden-video-b64", 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="DeepCaption-VLA-7B", elem_id="hidden-model-name", elem_classes="hidden-input", container=False)
 
@@ -1194,7 +1257,6 @@ with gr.Blocks() as demo:
 
     result = gr.Textbox(value="", elem_id="gradio-result", elem_classes="hidden-input", container=False)
 
-    example_kind = gr.Textbox(value="", elem_id="example-kind-input", 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")
@@ -1203,21 +1265,21 @@ with gr.Blocks() as demo:
     <div class="app-shell">
         <div class="app-header">
             <div class="app-header-left">
-                <div class="app-logo">{APP_LOGO_SVG}</div>
+                <div class="app-logo">{VISION_LOGO_SVG}</div>
                 <span class="app-title">VisionScope R2</span>
                 <span class="app-badge">vision enabled</span>
-                <span class="app-badge fast">Blue Suite</span>
+                <span class="app-badge fast">Image + Video</span>
             </div>
         </div>
 
-        <div class="mode-tabs-bar">
-            {MODE_TABS_HTML}
-        </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">
@@ -1225,11 +1287,11 @@ with gr.Blocks() as demo:
                         <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 document, page, receipt, screenshot, or scene image for OCR and vision tasks</span>
+                            <span id="upload-sub-text" class="upload-sub-text">Upload one document, page, receipt, screenshot, or scene image for vision tasks</span>
                         </div>
                     </div>
 
-                    <input id="custom-file-input" type="file" accept="image/*,video/*" style="display:none;" />
+                    <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">
@@ -1244,9 +1306,10 @@ with gr.Blocks() as demo:
                 </div>
 
                 <div class="hint-bar">
-                    <b>Upload:</b> Click or drag to add an image or video &nbsp;&middot;&nbsp;
+                    <b>Upload:</b> Click or drag media into the panel &nbsp;&middot;&nbsp;
                     <b>Mode:</b> Switch between image and video inference &nbsp;&middot;&nbsp;
-                    <b>Model:</b> Choose model tabs from the header
+                    <b>Model:</b> Change models from the header &nbsp;&middot;&nbsp;
+                    <kbd>Clear</kbd> removes the current media
                 </div>
 
                 <div class="examples-section">
@@ -1262,13 +1325,13 @@ with gr.Blocks() as demo:
                     <div class="panel-card-title">Vision Instruction</div>
                     <div class="panel-card-body">
                         <label class="modern-label" for="custom-query-input">Query Input</label>
-                        <textarea id="custom-query-input" class="modern-textarea" rows="4" placeholder="e.g., extract the text, describe the image, explain the scene, summarize the video, count objects, estimate distance..."></textarea>
+                        <textarea id="custom-query-input" class="modern-textarea" rows="4" placeholder="e.g., describe the scene, read the handwriting, explain the video, summarize frames, extract visible text, estimate distance..."></textarea>
                     </div>
                 </div>
 
                 <div style="padding:12px 20px;">
                     <button id="custom-run-btn" class="btn-run">
-                        <span id="run-btn-label">Run Vision</span>
+                        <span id="run-btn-label">Run Inference</span>
                     </button>
                 </div>
 
@@ -1283,7 +1346,7 @@ with gr.Blocks() as demo:
                     <div class="out-body">
                         <div class="modern-loader" id="output-loader">
                             <div class="loader-spinner"></div>
-                            <div class="loader-text">Running vision inference...</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">
@@ -1331,7 +1394,7 @@ with gr.Blocks() as demo:
         </div>
 
         <div class="exp-note">
-            Experimental Vision Suite &middot; Open on <a href="https://github.com/PRITHIVSAKTHIUR/VisionScope-R2" target="_blank">GitHub</a>
+            Experimental vision suite &middot; Open on <a href="https://github.com/PRITHIVSAKTHIUR/VisionScope-R2" target="_blank">GitHub</a>
         </div>
 
         <div class="app-statusbar">
@@ -1343,86 +1406,17 @@ with gr.Blocks() as demo:
 
     run_btn = gr.Button("Run", elem_id="gradio-run-btn")
 
-    def b64_to_pil(b64_str):
-        if not b64_str:
-            return None
-        try:
-            if b64_str.startswith("data:image"):
-                _, 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_video(b64_str):
-        if not b64_str:
-            return None
-        try:
-            header, data = b64_str.split(",", 1) if "," in b64_str else ("", b64_str)
-            os.makedirs("/tmp/visionscope_r2", exist_ok=True)
-            ext = ".mp4"
-            if "video/webm" in header:
-                ext = ".webm"
-            elif "video/quicktime" in header:
-                ext = ".mov"
-            elif "video/x-matroska" in header:
-                ext = ".mkv"
-            path = f"/tmp/visionscope_r2/{uuid.uuid4().hex}{ext}"
-            with open(path, "wb") as f:
-                f.write(base64.b64decode(data))
-            return path
-        except Exception:
-            return None
-
-    def run_vision(mode_name, model_name, text, file_b64, max_new_tokens_v, temperature_v, top_p_v, top_k_v, repetition_penalty_v, gpu_timeout_v):
-        if mode_name == "video":
-            temp_video_path = b64_to_temp_video(file_b64)
-            if not temp_video_path:
-                raise gr.Error("Failed to decode uploaded video.")
-            try:
-                yield from generate_video(
-                    model_name=model_name,
-                    text=text,
-                    video_path=temp_video_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,
-                )
-            finally:
-                try:
-                    if os.path.exists(temp_video_path):
-                        os.remove(temp_video_path)
-                except Exception:
-                    pass
-        else:
-            image = b64_to_pil(file_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,
-            )
-
     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_vision,
+        fn=run_inference,
         inputs=[
             hidden_mode_name,
             hidden_model_name,
             prompt,
-            hidden_file_b64,
+            hidden_image_b64,
+            hidden_video_b64,
             max_new_tokens,
             temperature,
             top_p,
@@ -1431,26 +1425,36 @@ with gr.Blocks() as demo:
             gpu_duration_state,
         ],
         outputs=[result],
-        js=r"""(mode, model, p, filev, mnt, t, tp, tk, rp, gd) => {
+        js=r"""(mode, model, p, img, vid, mnt, t, tp, tk, rp, gd) => {
             const modelEl = document.querySelector('.model-tab.active');
             const modeEl = document.querySelector('.mode-tab.active');
-            const chosenModel = modelEl ? modelEl.getAttribute('data-model') : model;
-            const chosenMode = modeEl ? modeEl.getAttribute('data-mode') : mode;
+            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;
-            const fileContainer = document.getElementById('hidden-file-b64');
-            let fileVal = filev;
-            if (fileContainer) {
-                const inner = fileContainer.querySelector('textarea, input');
-                if (inner) fileVal = inner.value;
+
+            let imgVal = img;
+            let vidVal = vid;
+
+            const imgContainer = document.getElementById('hidden-image-b64');
+            const vidContainer = document.getElementById('hidden-video-b64');
+
+            if (imgContainer) {
+                const inner = imgContainer.querySelector('textarea, input');
+                if (inner) imgVal = inner.value;
             }
-            return [chosenMode, chosenModel, promptVal, fileVal, mnt, t, tp, tk, rp, gd];
+            if (vidContainer) {
+                const inner = vidContainer.querySelector('textarea, input');
+                if (inner) vidVal = inner.value;
+            }
+
+            return [modeVal, modelVal, promptVal, imgVal, vidVal, mnt, t, tp, tk, rp, gd];
         }""",
     )
 
     example_load_btn.click(
         fn=load_example_data,
-        inputs=[example_kind, example_idx],
+        inputs=[example_idx],
         outputs=[example_result],
         queue=False,
     )