Single-stage layout: one image/video block, chat/raw response view, fixed equal heights.

- One media block (gr.File + scaled-to-fit previews) replaces the two tabs;
examples merged into one table (3 image rows + 1 video row).
- Right response block mirrors the live demo: segmented Chat/{ } Raw toggle,
chatbot + raw request/response JSON, pinned to a fixed 680px height that
matches the left column exactly; long text scrolls inside with transparent
hover-only scrollbars.
- analyze_image / analyze_video stay exposed as API/MCP tools; a MOCK mode
(MOSS_DEMO_MOCK=1) allows local UI work without torch/spaces.
- sdk bumped to gradio 6.15.1 (same as the realtime Space).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

README.md

@@ -4,7 +4,7 @@ emoji: 🧠
 colorFrom: gray
 colorTo: blue
 sdk: gradio
-sdk_version: 5.50.0
+sdk_version: 6.15.1
 app_file: app.py
 short_description: Image and video understanding with MOSS-VL multimodal model
 python_version: "3.12"

app.py

@@ -1,30 +1,56 @@
+"""MOSS-VL-Instruct Space — single-stage media QA demo.
+
+ONE media stage (image OR video upload) + prompt on the left; the response log
+with a chat/raw toggle on the right — mirroring the MOSS-VL-Realtime live demo
+styling. analyze_image / analyze_video stay exposed as API/MCP tools.
+
+MOCK mode (MOSS_DEMO_MOCK=1): no torch / spaces imports; canned responses for
+local UI work.
+"""
+
 import os
+import time
 
 os.environ.setdefault("PYTORCH_CUDA_ALLOC_CONF", "expandable_segments:True")
 
-import spaces
-import torch
+MOCK = os.getenv("MOSS_DEMO_MOCK") == "1"
+
 import gradio as gr
-from transformers import AutoModelForCausalLM, AutoProcessor
 
 MODEL_ID = "OpenMOSS-Team/MOSS-VL-Instruct-0708"
 
-processor = AutoProcessor.from_pretrained(
-    MODEL_ID,
-    trust_remote_code=True,
-    frame_extract_num_threads=1,
-)
-model = AutoModelForCausalLM.from_pretrained(
-    MODEL_ID,
-    trust_remote_code=True,
-    torch_dtype=torch.bfloat16,
-    attn_implementation="sdpa",
-).to("cuda")
+if not MOCK:
+    import spaces
+    import torch
+    from transformers import AutoModelForCausalLM, AutoProcessor
+
+    processor = AutoProcessor.from_pretrained(
+        MODEL_ID,
+        trust_remote_code=True,
+        frame_extract_num_threads=1,
+    )
+    model = AutoModelForCausalLM.from_pretrained(
+        MODEL_ID,
+        trust_remote_code=True,
+        torch_dtype=torch.bfloat16,
+        attn_implementation="sdpa",
+    ).to("cuda")
+else:
+    class _MockSpaces:
+        """Effect-free stand-in for the spaces module in MOCK mode."""
+
+        @staticmethod
+        def GPU(*args, **kwargs):
+            if args and callable(args[0]):
+                return args[0]
+            return lambda fn: fn
+
+    spaces = _MockSpaces()
 
 
 @spaces.GPU(duration=120)
 def analyze_image(
-    image,
+    image: str,
     prompt: str,
     max_new_tokens: int,
     temperature: float,
@@ -34,7 +60,7 @@ def analyze_image(
     """Analyze an image with a text prompt.
 
     Args:
-        image: The input image to analyze.
+        image: Path of the input image to analyze.
         prompt: Text instruction or question about the image.
         max_new_tokens: Maximum number of tokens to generate.
         temperature: Sampling temperature (1.0 = greedy when do_sample=False).
@@ -45,8 +71,14 @@ def analyze_image(
         return "Please upload an image."
     if not prompt.strip():
         prompt = "Describe this image in detail."
+    if MOCK:
+        time.sleep(1.2)
+        return (
+            f"[MOCK] Scripted image analysis for {os.path.basename(image)} — prompt: {prompt!r}.\n\n"
+            + "This is a long mock paragraph to exercise scrolling in the response view. " * 12
+        )
 
-    result = model.offline_image_generate(
+    return model.offline_image_generate(
         processor,
         prompt=prompt,
         image=image,
@@ -55,12 +87,11 @@ def analyze_image(
         top_p=float(top_p),
         do_sample=do_sample,
     )
-    return result
 
 
 @spaces.GPU(duration=180)
 def analyze_video(
-    video,
+    video: str,
     prompt: str,
     max_new_tokens: int,
     temperature: float,
@@ -72,7 +103,7 @@ def analyze_video(
     """Analyze a video with a text prompt.
 
     Args:
-        video: The input video file to analyze.
+        video: Path of the input video file to analyze.
         prompt: Text instruction or question about the video.
         max_new_tokens: Maximum number of tokens to generate.
         temperature: Sampling temperature (1.0 = greedy when do_sample=False).
@@ -85,8 +116,14 @@ def analyze_video(
         return "Please upload a video."
     if not prompt.strip():
         prompt = "Describe this video in detail."
+    if MOCK:
+        time.sleep(1.5)
+        return (
+            f"[MOCK] Scripted video analysis for {os.path.basename(video)} — prompt: {prompt!r}.\n\n"
+            + "This is a long mock paragraph to exercise scrolling in the response view. " * 12
+        )
 
-    result = model.offline_video_generate(
+    return model.offline_video_generate(
         processor,
         prompt=prompt,
         video=video,
@@ -97,105 +134,253 @@ def analyze_video(
         max_frames=int(max_frames),
         do_sample=do_sample,
     )
-    return result
 
 
-CSS = """
-#col-container { max-width: 1100px; margin: 0 auto; }
-.dark .gradio-container { color: var(--body-text-color); }
-"""
+# --- UI glue ---
+
+IMAGE_EXTS = {".png", ".jpg", ".jpeg", ".webp", ".bmp", ".gif"}
+
+
+def classify_media(path):
+    return "image" if os.path.splitext(path)[1].lower() in IMAGE_EXTS else "video"
+
+
+def _file_path(value):
+    """Normalize a gr.File value (str | list | dict | None) to a path or None."""
+    if isinstance(value, list):
+        value = value[0] if value else None
+    if isinstance(value, dict):
+        value = value.get("path") or value.get("name")
+    return value or None
+
+
+def run_analyze(media, prompt_text, max_new_tokens, temperature, top_p, do_sample, video_fps, max_frames):
+    path = _file_path(media)
+    if not path:
+        gr.Warning("Upload an image or video first · 请先上传图片或视频")
+        yield gr.skip(), gr.skip()
+        return
+    kind = classify_media(path)
+    prompt_text = (prompt_text or "").strip() or f"Describe this {kind} in detail."
+
+    history = [
+        {"role": "user", "content": {"path": path}},
+        {"role": "user", "content": prompt_text},
+        {"role": "assistant", "content": "⏳ Analyzing · 分析中…"},
+    ]
+    params = {
+        "max_new_tokens": int(max_new_tokens),
+        "temperature": float(temperature),
+        "top_p": float(top_p),
+        "do_sample": bool(do_sample),
+    }
+    if kind == "video":
+        params.update(video_fps=float(video_fps), max_frames=int(max_frames))
+    events = [{"event": "request", "media": os.path.basename(path), "kind": kind, "prompt": prompt_text, "params": params}]
+    yield history, events
+
+    t0 = time.monotonic()
+    try:
+        if kind == "image":
+            result = analyze_image(path, prompt_text, max_new_tokens, temperature, top_p, do_sample)
+        else:
+            result = analyze_video(path, prompt_text, max_new_tokens, temperature, top_p, video_fps, max_frames, do_sample)
+    except Exception as exc:
+        history[-1] = {"role": "assistant", "content": f"⚠️ {type(exc).__name__}: {exc}"}
+        events.append({"event": "error", "message": f"{type(exc).__name__}: {exc}"})
+        yield history, events
+        return
+    history[-1] = {"role": "assistant", "content": result}
+    events.append({"event": "response", "elapsed_s": round(time.monotonic() - t0, 2), "text": result})
+    yield history, events
+
 
-with gr.Blocks(theme=gr.themes.Citrus(), css=CSS) as demo:
-    gr.Markdown(
-        """
-        # MOSS-VL-Instruct-0708
-        An 11B multimodal vision-language model for image and video understanding.
-        Upload an image or video and ask any question about it.
-        [Model Card](https://huggingface.co/OpenMOSS-Team/MOSS-VL-Instruct-0708) |
-        [GitHub](https://github.com/OpenMOSS/MOSS-VL)
-        """
+def on_media_change(value):
+    path = _file_path(value)
+    if not path:
+        return gr.update(visible=True), gr.update(visible=False, value=None), gr.update(visible=False, value=None)
+    kind = classify_media(path)
+    return (
+        gr.update(visible=False),
+        gr.update(visible=kind == "video", value=path if kind == "video" else None),
+        gr.update(visible=kind == "image", value=path if kind == "image" else None),
     )
 
-    with gr.Tab("Image Understanding"):
-        with gr.Row():
-            with gr.Column(scale=1):
-                img_input = gr.Image(type="filepath", label="Input Image")
-                img_prompt = gr.Textbox(
-                    label="Prompt",
-                    placeholder="Describe this image in detail.",
-                    value="Describe this image in detail.",
-                    lines=2,
-                )
-                img_btn = gr.Button("Analyze Image", variant="primary")
-            with gr.Column(scale=1):
-                img_output = gr.Textbox(label="Response", lines=12, show_copy_button=True)
 
-        with gr.Accordion("Advanced Settings", open=False):
-            with gr.Row():
-                img_max_tokens = gr.Slider(64, 2048, value=512, step=64, label="Max New Tokens")
-                img_temperature = gr.Slider(0.1, 2.0, value=1.0, step=0.1, label="Temperature")
-                img_top_p = gr.Slider(0.1, 1.0, value=1.0, step=0.05, label="Top-p")
-                img_do_sample = gr.Checkbox(label="Do Sample", value=False)
+def clear_media():
+    return (
+        gr.update(visible=True, value=None),
+        gr.update(visible=False, value=None),
+        gr.update(visible=False, value=None),
+    )
+
+
+def toggle_view(choice):
+    chat = choice == "chat"
+    return gr.update(visible=chat), gr.update(visible=not chat)
 
-        gr.Examples(
-            examples=[
-                ["example_bill.png", "Extract the store name, waiter name, bill number, number of people, items purchased with their quantities and amounts, total amount, and print time from this receipt. Output in JSON format.", 512, 1.0, 1.0, False],
-                ["astronaut.jpg", "Describe this image in detail.", 256, 1.0, 1.0, False],
-                ["bird_kingfisher.jpg", "What species of bird is this? Describe its appearance and habitat.", 256, 1.0, 1.0, False],
-            ],
-            inputs=[img_input, img_prompt, img_max_tokens, img_temperature, img_top_p, img_do_sample],
-            outputs=img_output,
-            fn=analyze_image,
-            cache_examples=True,
-            cache_mode="lazy",
-        )
 
-        img_btn.click(
-            fn=analyze_image,
-            inputs=[img_input, img_prompt, img_max_tokens, img_temperature, img_top_p, img_do_sample],
-            outputs=img_output,
-            api_name="analyze_image",
+CSS = """
+#col-container { max-width: 1250px; margin: 0 auto; --console-h: 46px; --stage-h: 680px; }
+/* FIXED overall height: the right response block is pinned to --stage-h and its
+   content scrolls inside; the left column stretches to match, with the media
+   widget absorbing the spare height above the prompt + action row */
+#message-stage {
+  flex-grow: 0 !important; height: var(--stage-h); min-height: var(--stage-h); max-height: var(--stage-h);
+  display: flex; flex-direction: column;
+}
+#media-stage { flex-grow: 1 !important; display: flex; flex-direction: column; min-height: 0; }
+#media-stage > *, #media-stage .styler,
+#message-stage > *, #message-stage .styler {
+  flex-grow: 1 !important; display: flex; flex-direction: column; min-height: 0;
+}
+#stage-file, #preview-video, #preview-image { flex-grow: 1 !important; min-height: 0; }
+/* chat/raw fill the fixed stage and scroll internally — never grow with content */
+#chatbot, #raw-json {
+  flex-grow: 1 !important; min-height: 0 !important; height: auto !important; max-height: none !important;
+}
+#stage-file .boundedheight, #preview-video .boundedheight, #preview-image .boundedheight,
+#stage-file [data-testid="file"], #preview-video video, #preview-image img {
+  height: 100% !important; max-height: none !important;
+}
+/* media scales to fit its fixed frame */
+#preview-image img, #preview-video video { object-fit: contain; width: 100%; }
+/* segmented chat/raw toggle: two half-width buttons, centered text, no radio
+   dot — black = off, accent yellow = on (same as the live demo) */
+#view-toggle { flex-grow: 0 !important; flex-shrink: 0 !important; min-height: fit-content; }
+#view-toggle .wrap { display: flex; flex-direction: row; gap: 0; width: 100%; }
+#view-toggle label {
+  flex: 1 1 50%; justify-content: center; text-align: center; margin: 0;
+  padding: var(--spacing-sm) 0; cursor: pointer; border-radius: 0;
+  background: #141414; color: #9aa0a6; border: 1px solid var(--border-color-primary);
+  transition: background 0.15s, color 0.15s;
+}
+#view-toggle label:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
+#view-toggle label:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
+#view-toggle label.selected { background: var(--color-accent); color: #111; font-weight: 600; }
+#view-toggle input[type="radio"] { display: none; }
+/* prompt + action row stay natural-sized at the column bottom — including the
+   .form element gradio wraps around the textbox, which is flex-grow:1 by
+   default and would otherwise eat the column's spare height */
+#prompt-block, #action-row { flex-grow: 0 !important; }
+#col-container .form:has(#prompt-block) { flex-grow: 0 !important; }
+#action-row { margin-top: auto; }
+#action-row button { height: var(--console-h); min-height: var(--console-h); white-space: nowrap; }
+/* scrollbars: invisible until the pointer is over the thin scrollbar strip;
+   no track rail, no arrow buttons. (Firefox has no thumb-hover selector, so
+   it falls back to a thin transparent bar revealed on container hover.) */
+@supports not selector(::-webkit-scrollbar) {
+  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
+  *:hover { scrollbar-color: rgba(128, 128, 128, 0.45) transparent; }
+}
+::-webkit-scrollbar { width: 8px; height: 8px; background: transparent !important; }
+::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent !important; }
+::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
+::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: rgba(128, 128, 128, 0.55) !important; }
+"""
+
+with gr.Blocks(title="MOSS-VL-Instruct Demo") as demo:
+    with gr.Column(elem_id="col-container"):
+        gr.Markdown(
+            "# MOSS-VL-Instruct-0708\n\n"
+            "An 11B multimodal vision-language model for image and video understanding. "
+            "Upload an image or video and ask any question about it.\n\n"
+            "[Model Card](https://huggingface.co/OpenMOSS-Team/MOSS-VL-Instruct-0708) | "
+            "[GitHub](https://github.com/OpenMOSS/MOSS-VL)"
+            + ("\n\n`MOCK mode — scripted model responses`" if MOCK else "")
         )
 
-    with gr.Tab("Video Understanding"):
-        with gr.Row():
-            with gr.Column(scale=1):
-                vid_input = gr.Video(label="Input Video")
-                vid_prompt = gr.Textbox(
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=5):
+                with gr.Group(elem_id="media-stage"):
+                    media_file = gr.File(
+                        file_types=["image", "video"],
+                        label="Image or video · 图片或视频",
+                        height=430,
+                        elem_id="stage-file",
+                    )
+                    preview_video = gr.Video(
+                        visible=False, interactive=False, height=430, show_label=False,
+                        autoplay=False, elem_id="preview-video",
+                    )
+                    preview_image = gr.Image(
+                        visible=False, interactive=False, height=430, show_label=False,
+                        elem_id="preview-image",
+                    )
+                prompt = gr.Textbox(
                     label="Prompt",
-                    placeholder="Describe this video in detail.",
-                    value="Describe this video in detail.",
-                    lines=2,
+                    lines=3,
+                    placeholder="Describe this image/video in detail.",
+                    elem_id="prompt-block",
                 )
-                vid_btn = gr.Button("Analyze Video", variant="primary")
-            with gr.Column(scale=1):
-                vid_output = gr.Textbox(label="Response", lines=12, show_copy_button=True)
+                with gr.Row(elem_id="action-row"):
+                    clear_btn = gr.Button("Clear media · 清除媒体", variant="secondary")
+                    analyze_btn = gr.Button("▶ Analyze · 分析", variant="primary")
+
+            with gr.Column(scale=6):
+                with gr.Group(elem_id="message-stage"):
+                    view_toggle = gr.Radio(
+                        [("💬 Chat", "chat"), ("{ } Raw", "raw")],
+                        value="chat",
+                        show_label=False,
+                        container=False,
+                        elem_id="view-toggle",
+                    )
+                    chatbot = gr.Chatbot(
+                        height=560,
+                        show_label=False,
+                        buttons=["copy"],
+                        autoscroll=True,
+                        elem_id="chatbot",
+                    )
+                    raw_json = gr.JSON(
+                        value=[], show_label=False, visible=False, height=560, elem_id="raw-json"
+                    )
 
         with gr.Accordion("Advanced Settings", open=False):
             with gr.Row():
-                vid_max_tokens = gr.Slider(64, 2048, value=512, step=64, label="Max New Tokens")
-                vid_temperature = gr.Slider(0.1, 2.0, value=1.0, step=0.1, label="Temperature")
-                vid_top_p = gr.Slider(0.1, 1.0, value=1.0, step=0.05, label="Top-p")
-                vid_fps = gr.Slider(0.5, 4.0, value=1.0, step=0.5, label="Video FPS")
-                vid_max_frames = gr.Slider(8, 256, value=64, step=8, label="Max Frames")
-                vid_do_sample = gr.Checkbox(label="Do Sample", value=False)
+                max_new_tokens = gr.Slider(64, 2048, value=512, step=64, label="Max New Tokens")
+                temperature = gr.Slider(0.1, 2.0, value=1.0, step=0.1, label="Temperature")
+                top_p = gr.Slider(0.1, 1.0, value=1.0, step=0.05, label="Top-p")
+                do_sample = gr.Checkbox(label="Do Sample", value=False)
+            with gr.Row():
+                video_fps = gr.Slider(0.5, 4.0, value=1.0, step=0.5, label="Video FPS (video only)")
+                max_frames = gr.Slider(8, 256, value=64, step=8, label="Max Frames (video only)")
 
         gr.Examples(
             examples=[
-                ["example_video.mp4", "Describe what happens in this video.", 512, 1.0, 1.0, 1.0, 64, False],
+                ["example_bill.png", "Extract the store name, waiter name, bill number, number of people, items purchased with their quantities and amounts, total amount, and print time from this receipt. Output in JSON format."],
+                ["astronaut.jpg", "Describe this image in detail."],
+                ["bird_kingfisher.jpg", "What species of bird is this? Describe its appearance and habitat."],
+                ["example_video.mp4", "Describe what happens in this video."],
             ],
-            inputs=[vid_input, vid_prompt, vid_max_tokens, vid_temperature, vid_top_p, vid_fps, vid_max_frames, vid_do_sample],
-            outputs=vid_output,
-            fn=analyze_video,
-            cache_examples=True,
-            cache_mode="lazy",
+            inputs=[media_file, prompt],
+            label="Examples",
         )
 
-        vid_btn.click(
-            fn=analyze_video,
-            inputs=[vid_input, vid_prompt, vid_max_tokens, vid_temperature, vid_top_p, vid_fps, vid_max_frames, vid_do_sample],
-            outputs=vid_output,
-            api_name="analyze_video",
-        )
+    media_file.change(
+        on_media_change, [media_file],
+        [media_file, preview_video, preview_image], api_name=False,
+    )
+    clear_btn.click(
+        clear_media, None,
+        [media_file, preview_video, preview_image], api_name=False,
+    )
+    view_toggle.change(toggle_view, [view_toggle], [chatbot, raw_json], api_name=False)
+    analyze_btn.click(
+        run_analyze,
+        inputs=[media_file, prompt, max_new_tokens, temperature, top_p, do_sample, video_fps, max_frames],
+        outputs=[chatbot, raw_json],
+        api_name=False,
+        show_progress="hidden",
+    )
+
+    gr.api(analyze_image, api_name="analyze_image")
+    gr.api(analyze_video, api_name="analyze_video")
+
 
-demo.launch(mcp_server=True)
+if __name__ == "__main__":
+    # gradio 6.x: theme/css/mcp_server are launch() parameters
+    demo.queue(max_size=32)
+    demo.launch(theme=gr.themes.Citrus(), css=CSS, mcp_server=True)