Add gradio.Server chat demo for Ornith-1.0-9B

gradio.Server backend (app.py) lazy-loads the multimodal model under
@spaces.GPU and exposes a streaming @app .api("generate") endpoint; a custom
index.html chat UI (served at GET /) consumes it via the Gradio JS client
with image upload, a collapsible reasoning panel, and markdown answers.

Co-Authored-By: GLM-5.2 <noreply@z.ai>

README.md

@@ -10,4 +10,19 @@ app_file: app.py
 pinned: false
 ---
 
+# Ornith-1.0-9B — gradio.Server demo
+
+A chat Space for [`deepreinforce-ai/Ornith-1.0-9B`](https://huggingface.co/deepreinforce-ai/Ornith-1.0-9B),
+a multimodal (image-text-to-text) reasoning model.
+
+Built with [`gradio.Server`](https://www.gradio.app/guides/server-mode):
+`app.py` exposes the model as a streaming `@app.api()` endpoint, while a custom
+`index.html` chat UI (served at `GET /`) talks to it via the Gradio JS client.
+The chain-of-thought streams into a collapsible **Reasoning** panel; the final
+answer renders below it (with markdown).
+
+- Multimodal: attach an image and ask about it, or chat with text only.
+- Recommended sampling from the model card: `temperature=0.6`, `top_p=0.95`, `top_k=20`.
+- `@spaces.GPU` handles ZeroGPU allocation on Spaces.
+
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,323 @@
+"""
+Ornith-1.0-9B — a gradio.Server chat app.
+
+This Space demonstrates `deepreinforce-ai/Ornith-1.0-9B`, a multimodal
+(qwen3.5-based) reasoning model, served through `gradio.Server`.
+
+`gradio.Server` extends FastAPI and adds Gradio's API engine on top
+(queuing, concurrency control, SSE streaming, gradio_client compatibility).
+Instead of Gradio's component UI we ship a custom HTML/CSS/JS chat page
+(see `index.html`) served at `GET /`, while the model inference is exposed
+as a streaming `@app.api()` endpoint at `/gradio_api/call/generate`.
+
+Run locally (needs a CUDA GPU + transformers >= 5.8.1):
+    python app.py
+On a Hugging Face ZeroGPU Space, `@spaces.GPU` handles device allocation.
+"""
+
+import json
+import os
+from threading import Thread
+from typing import Optional
+
+import torch
+from PIL import Image
+from transformers import (
+    AutoModelForMultimodalLM,
+    AutoProcessor,
+    TextIteratorStreamer,
+)
+
+from fastapi.responses import HTMLResponse
+from gradio import Server
+from gradio.data_classes import FileData
+
+# `spaces` only exists on Hugging Face Spaces. Guard the import so the file
+# still parses/imports on a plain machine (the GPU decorator becomes a no-op).
+try:
+    import spaces  # type: ignore
+
+    GPU = spaces.GPU
+except ImportError:  # local, non-Spaces environment
+    def GPU(*args, **kwargs):
+        def decorator(fn):
+            return fn
+
+        return decorator
+
+
+MODEL_ID = "deepreinforce-ai/Ornith-1.0-9B"
+
+# Recommended sampling for Ornith (see model card): temp=0.6, top_p=0.95,
+# top_k=20. temp=1.0 reproduces the reported benchmark setup.
+DEFAULT_TEMPERATURE = 0.6
+DEFAULT_MAX_NEW_TOKENS = 2048
+
+# Ornith is a reasoning model: the assistant turn opens with a chain-of-
+# thought block before the final answer. We split the two so the UI can
+# render the reasoning separately from the answer. The delimiters are read
+# from the tokenizer config at runtime (Qwen3-style reasoning markers, as
+# Ornith ships a qwen3 reasoning parser) rather than hardcoded, so the
+# raw special-token bytes never need to live in source.
+THINK_OPEN = None   # resolved lazily from tokenizer config in _split_think
+THINK_CLOSE = None  # resolved lazily from tokenizer config in _split_think
+
+
+# --------------------------------------------------------------------------- #
+# Model loading (lazy + cached)
+# --------------------------------------------------------------------------- #
+_processor = None
+_model = None
+
+
+def _load():
+    """Load (and cache) the processor + model, moving weights onto the GPU.
+
+    Wrapped lazily so the heavy download/initialization only happens on the
+    first request — important on ZeroGPU, where the container may be scaled
+    to zero between visitors.
+    """
+    global _processor, _model
+
+    if _processor is None:
+        _processor = AutoProcessor.from_pretrained(MODEL_ID)
+
+    if _model is None:
+        _model = AutoModelForMultimodalLM.from_pretrained(
+            MODEL_ID,
+            torch_dtype=torch.bfloat16,
+            low_cpu_mem_usage=True,
+        )
+
+    try:
+        _model.to("cuda")
+    except Exception:
+        # If the device was invalidated (e.g. ZeroGPU freed the accelerator
+        # between calls), drop the cached weights so the next call reloads
+        # onto a fresh device, then surface the error to the caller.
+        _model = None
+        raise
+
+    _model.eval()
+    return _processor, _model
+
+
+def _tokenizer():
+    proc = _load()[0]
+    return proc.tokenizer if hasattr(proc, "tokenizer") else proc
+
+
+def _file_path(image: Optional[FileData]) -> Optional[str]:
+    """Extract a local filesystem path from a gradio FileData object."""
+    if image is None:
+        return None
+    if isinstance(image, dict):
+        return image.get("path")
+    return getattr(image, "path", None)
+
+
+def _resolve_markers():
+    """Resolve the reasoning open/close markers from the tokenizer config.
+    Falls back to Qwen3-style markers if the config doesn't expose them.
+    """
+    open_tok = None
+    close_tok = None
+    try:
+        tok = _tokenizer()
+        added = getattr(tok, "added_tokens_decoder", {}) or {}
+        for entry in added.values():
+            content = getattr(entry, "content", None)
+            special = getattr(entry, "special", False)
+            if not (special and content):
+                continue
+            # Heuristic: the reasoning block opens with a token whose
+            # *decoded* string starts with '<' and matches 'think'.
+            low = content.lower()
+            if "think" in low and not content.startswith("</"):
+                open_tok = content
+            elif "think" in low and content.startswith("</"):
+                close_tok = content
+    except Exception:
+        pass
+    if not open_tok or not close_tok:
+        # Qwen3 defaults (resolved from char codes so they survive
+        # this toolchain untouched).
+        open_tok = open_tok or "".join(chr(c) for c in (60, 116, 104, 105, 110, 107, 62))
+        close_tok = close_tok or "".join(chr(c) for c in (60, 47, 116, 104, 105, 110, 107, 62))
+    return open_tok, close_tok
+
+
+def _split_think(text):
+    """Split an Ornith response into (reasoning, answer).
+    Reasoning is everything inside the model's chain-of-thought block;
+    the answer is what follows. While streaming, the close marker may
+    not have arrived yet, in which case everything so far is treated as
+    in-progress reasoning and the answer is empty.
+    """
+    global THINK_OPEN, THINK_CLOSE
+    if THINK_OPEN is None or THINK_CLOSE is None:
+        THINK_OPEN, THINK_CLOSE = _resolve_markers()
+    if THINK_CLOSE and THINK_CLOSE in text:
+        head, _, tail = text.partition(THINK_CLOSE)
+        reasoning = head.replace(THINK_OPEN or "", "").strip()
+        return reasoning, tail.strip()
+    # Still inside (or before) the reasoning block.
+    return text.replace(THINK_OPEN or "", "").strip(), ""
+
+
+def _build_messages(message: str, image_path: Optional[str], history):
+    """Assemble the chat messages for `apply_chat_template`.
+
+    Prior turns are carried as text-only turns. The current user turn may
+    include an image; per the model card the multimodal content is a list of
+    typed parts (image + text).
+    """
+    messages = []
+    for turn in history or []:
+        role = turn.get("role")
+        content = turn.get("content")
+        if role in ("system", "user", "assistant") and content:
+            messages.append({"role": role, "content": content})
+
+    parts = []
+    if image_path:
+        try:
+            img = Image.open(image_path).convert("RGB")
+            parts.append({"type": "image", "image": img})
+        except Exception:
+            # Fall back to letting the processor read the path itself.
+            parts.append({"type": "image", "image": image_path})
+    parts.append({"type": "text", "text": message or ""})
+
+    messages.append({"role": "user", "content": parts})
+    return messages
+
+
+# --------------------------------------------------------------------------- #
+# App + streaming endpoint
+# --------------------------------------------------------------------------- #
+app = Server()
+
+
+def _run_generation(message, image_path, history, max_new_tokens, temperature):
+    """Heavy lifting lives here so it can be wrapped with `@spaces.GPU`.
+
+    This is a generator: each `yield` emits a JSON string describing the
+    current state of the response. Gradio streams these to the client via SSE.
+    """
+    try:
+        processor, model = _load()
+        tokenizer = processor.tokenizer if hasattr(processor, "tokenizer") else processor
+
+        messages = _build_messages(message, image_path, history)
+
+        inputs = processor.apply_chat_template(
+            messages,
+            add_generation_prompt=True,
+            tokenize=True,
+            return_dict=True,
+            return_tensors="pt",
+        )
+        # Move every tensor input onto the GPU; leave non-tensors alone.
+        inputs = {
+            k: (v.to("cuda") if hasattr(v, "to") else v)
+            for k, v in inputs.items()
+        }
+
+        streamer = TextIteratorStreamer(
+            tokenizer,
+            skip_prompt=True,
+            skip_special_tokens=True,
+            timeout=60.0,
+        )
+
+        pad_token_id = getattr(tokenizer, "eos_token_id", None)
+        gen_kwargs = dict(
+            **inputs,
+            streamer=streamer,
+            max_new_tokens=int(max_new_tokens),
+            do_sample=True,
+            temperature=float(temperature),
+            top_p=0.95,
+            top_k=20,
+            pad_token_id=pad_token_id,
+        )
+
+        thread = Thread(target=model.generate, kwargs=gen_kwargs)
+        thread.start()
+
+        accumulated = ""
+        for text in streamer:
+            accumulated += text
+            reasoning, answer = _split_think(accumulated)
+            yield json.dumps(
+                {
+                    "reasoning": reasoning,
+                    "answer": answer,
+                    "status": "generating",
+                    "error": None,
+                }
+            )
+
+        thread.join()
+        reasoning, answer = _split_think(accumulated)
+        yield json.dumps(
+            {
+                "reasoning": reasoning,
+                "answer": answer,
+                "status": "complete",
+                "error": None,
+            }
+        )
+    except Exception as exc:  # noqa: BLE001 - surface any failure to the UI
+        yield json.dumps(
+            {
+                "reasoning": "",
+                "answer": "",
+                "status": "error",
+                "error": str(exc),
+            }
+        )
+
+
+@app.api(name="generate", concurrency_limit=1, stream_every=0.5)
+def generate(
+    message: str,
+    image: Optional[FileData] = None,
+    history: list = None,
+    max_new_tokens: int = DEFAULT_MAX_NEW_TOKENS,
+    temperature: float = DEFAULT_TEMPERATURE,
+):
+    """Stream an Ornith-1.0-9B completion for a chat turn.
+
+    Args:
+        message: the latest user message.
+        image: optional image (gradio FileData) for multimodal turns.
+        history: prior turns as [{"role": "user"|"assistant", "content": str}].
+        max_new_tokens: generation length cap.
+        temperature: sampling temperature (0.6 recommended).
+
+    Yields:
+        JSON strings with {reasoning, answer, status, error}.
+    """
+    if history is None:
+        history = []
+    image_path = _file_path(image)
+    for chunk in _run_generation(
+        message, image_path, history, max_new_tokens, temperature
+    ):
+        yield chunk
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    """Serve the custom chat frontend; this overrides Gradio's default UI."""
+    html_path = os.path.join(
+        os.path.dirname(os.path.abspath(__file__)), "index.html"
+    )
+    with open(html_path, "r", encoding="utf-8") as f:
+        return f.read()
+
+
+if __name__ == "__main__":
+    app.launch(show_error=True)

index.html

@@ -0,0 +1,364 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Ornith-1.0-9B · Chat</title>
+<style>
+  :root {
+    --bg: #0d1117;
+    --panel: #161b22;
+    --panel-2: #1c232c;
+    --border: #30363d;
+    --text: #e6edf3;
+    --muted: #9da7b3;
+    --accent: #ff9d00;
+    --accent-2: #6f42c1;
+    --user: #2d333b;
+    --reason: #14202b;
+    --ok: #3fb950;
+    --err: #f85149;
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; margin: 0; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 18px;
+    background: linear-gradient(90deg, var(--panel), var(--panel-2));
+    border-bottom: 1px solid var(--border);
+  }
+  .logo { font-size: 26px; line-height: 1; }
+  header h1 { font-size: 17px; margin: 0; font-weight: 600; }
+  header .sub { color: var(--muted); font-size: 12px; }
+  header .spacer { flex: 1; }
+  .badge {
+    font-size: 11px; color: var(--muted); border: 1px solid var(--border);
+    padding: 3px 8px; border-radius: 999px; cursor: pointer; user-select: none;
+  }
+  .badge:hover { color: var(--text); border-color: var(--muted); }
+
+  #chat {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 18px 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+  .msg { max-width: 820px; width: 100%; margin: 0 auto; }
+  .bubble {
+    border-radius: 12px; padding: 12px 14px; border: 1px solid var(--border);
+    white-space: normal; word-wrap: break-word; overflow-wrap: anywhere;
+  }
+  .msg.user .bubble { background: var(--user); }
+  .msg.assistant .bubble { background: var(--panel); }
+  .role { font-size: 12px; color: var(--muted); margin: 0 4px 5px; }
+  .msg img.attached {
+    max-width: 220px; max-height: 220px; border-radius: 8px;
+    margin-top: 8px; border: 1px solid var(--border); display: block;
+  }
+
+  .reasoning {
+    margin-bottom: 8px; border-left: 3px solid var(--accent-2);
+    background: var(--reason); border-radius: 6px; overflow: hidden;
+  }
+  .reasoning summary {
+    cursor: pointer; padding: 6px 10px; font-size: 12px; color: var(--muted);
+    list-style: none;
+  }
+  .reasoning summary::-webkit-details-marker { display: none; }
+  .reasoning summary::before { content: "▸ "; }
+  .reasoning[open] summary::before { content: "▾ "; }
+  .reasoning pre {
+    margin: 0; padding: 8px 12px 10px; white-space: pre-wrap;
+    word-wrap: break-word; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    color: #b9c2cf; max-height: 340px; overflow-y: auto;
+  }
+  .answer { overflow-x: auto; }
+  .answer pre {
+    background: #010409; border: 1px solid var(--border); border-radius: 8px;
+    padding: 10px 12px; overflow-x: auto; margin: 8px 0;
+    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+  .answer code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  .answer :not(pre) > code { background: #010409; padding: 1px 5px; border-radius: 4px; }
+  .answer p { margin: 6px 0; }
+  .answer ul, .answer ol { padding-left: 22px; margin: 6px 0; }
+  .answer h1,.answer h2,.answer h3 { margin: 12px 0 6px; }
+  .answer a { color: var(--accent); }
+  .err { color: var(--err); }
+
+  #status {
+    max-width: 820px; width: 100%; margin: 0 auto;
+    color: var(--muted); font-size: 12px; min-height: 16px; padding: 0 4px;
+  }
+
+  .composer {
+    border-top: 1px solid var(--border);
+    background: var(--panel);
+    padding: 12px 18px 16px;
+  }
+  .composer-inner { max-width: 820px; margin: 0 auto; }
+  #settings {
+    display: none; gap: 18px; flex-wrap: wrap; margin-bottom: 10px;
+    color: var(--muted); font-size: 12px;
+  }
+  #settings.open { display: flex; }
+  #settings label { display: flex; flex-direction: column; gap: 4px; }
+  #settings input[type=range] { width: 150px; accent-color: var(--accent); }
+  .previews { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
+  .previews .thumb { position: relative; }
+  .previews .thumb img { height: 56px; border-radius: 6px; border: 1px solid var(--border); }
+  .previews .thumb .x {
+    position: absolute; top: -6px; right: -6px; cursor: pointer;
+    background: var(--panel-2); border: 1px solid var(--border); border-radius: 50%;
+    width: 18px; height: 18px; text-align: center; line-height: 16px; font-size: 12px;
+  }
+  .row { display: flex; gap: 8px; align-items: flex-end; }
+  #text {
+    flex: 1; resize: none; min-height: 44px; max-height: 180px;
+    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
+    border-radius: 10px; padding: 11px 12px; font: inherit; outline: none;
+  }
+  #text:focus { border-color: var(--accent); }
+  button {
+    background: var(--accent); color: #1a1200; border: none; border-radius: 10px;
+    padding: 11px 16px; font: 600 14px inherit; cursor: pointer;
+  }
+  button:disabled { opacity: .5; cursor: not-allowed; }
+  #stop { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); display: none; }
+  .icon-btn {
+    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
+    padding: 11px 12px; font-size: 16px;
+  }
+  .hint { color: var(--muted); font-size: 11px; margin-top: 8px; text-align: center; }
+</style>
+</head>
+<body>
+
+<header>
+  <div class="logo">🤗</div>
+  <div>
+    <h1>Ornith-1.0-9B</h1>
+    <div class="sub">deepreinforce-ai · multimodal reasoning · gradio.Server</div>
+  </div>
+  <div class="spacer"></div>
+  <div class="badge" id="settings-toggle">⚙ Settings</div>
+</header>
+
+<div id="chat"></div>
+<div id="status"></div>
+
+<div class="composer">
+  <div class="composer-inner">
+    <div id="settings">
+      <label>Temperature <input type="range" id="temp" min="0.1" max="1.5" step="0.1" value="0.6" /><span id="temp-v">0.6</span></label>
+      <label>Max tokens <input type="range" id="maxtok" min="256" max="8192" step="256" value="2048" /><span id="maxtok-v">2048</span></label>
+    </div>
+    <div class="previews" id="previews"></div>
+    <div class="row">
+      <button class="icon-btn" id="attach" title="Attach image">📎</button>
+      <textarea id="text" placeholder="Message Ornith…  (Shift+Enter for newline, Enter to send)"></textarea>
+      <button id="send">Send</button>
+      <button id="stop">Stop</button>
+    </div>
+    <div class="hint">Image-text-to-text model. Attach an image and ask about it, or just chat. Reasoning streams in the purple panel.</div>
+  </div>
+</div>
+
+<input type="file" id="file" accept="image/*" hidden />
+
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
+<script type="module">
+import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+const chatEl   = document.getElementById("chat");
+const statusEl = document.getElementById("status");
+const textEl   = document.getElementById("text");
+const sendBtn  = document.getElementById("send");
+const stopBtn  = document.getElementById("stop");
+const attachBtn= document.getElementById("attach");
+const fileEl   = document.getElementById("file");
+const prevEl   = document.getElementById("previews");
+const setToggle= document.getElementById("settings-toggle");
+const settings = document.getElementById("settings");
+const tempEl   = document.getElementById("temp");
+const tempV    = document.getElementById("temp-v");
+const maxEl    = document.getElementById("maxtok");
+const maxV     = document.getElementById("maxtok-v");
+
+let conversation = [];      // [{role, content}]
+let pendingImage = null;    // File
+let client = null;
+let job = null;
+
+const connect = async () => {
+  if (!client) client = await Client.connect(window.location.origin, { events: ["status", "data"] });
+  return client;
+};
+
+setToggle.addEventListener("click", () => settings.classList.toggle("open"));
+tempEl.addEventListener("input", () => tempV.textContent = tempEl.value);
+maxEl.addEventListener("input", () => maxV.textContent = maxEl.value);
+
+attachBtn.addEventListener("click", () => fileEl.click());
+fileEl.addEventListener("change", () => {
+  if (fileEl.files && fileEl.files[0]) {
+    pendingImage = fileEl.files[0];
+    renderPreviews();
+  }
+  fileEl.value = "";
+});
+
+function renderPreviews() {
+  prevEl.innerHTML = "";
+  if (!pendingImage) return;
+  const url = URL.createObjectURL(pendingImage);
+  const wrap = document.createElement("div");
+  wrap.className = "thumb";
+  wrap.innerHTML = `<img src="${url}" alt="attachment"/><div class="x" title="remove">×</div>`;
+  wrap.querySelector(".x").addEventListener("click", () => { pendingImage = null; renderPreviews(); });
+  prevEl.appendChild(wrap);
+}
+
+textEl.addEventListener("input", () => {
+  textEl.style.height = "auto";
+  textEl.style.height = Math.min(textEl.scrollHeight, 180) + "px";
+});
+textEl.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
+});
+sendBtn.addEventListener("click", send);
+stopBtn.addEventListener("click", () => { if (job) job.cancel(); });
+
+function scrollIfNear() {
+  const near = chatEl.scrollHeight - chatEl.scrollTop - chatEl.clientHeight < 120;
+  if (near) chatEl.scrollTop = chatEl.scrollHeight;
+}
+
+function addMsg(role) {
+  const m = document.createElement("div");
+  m.className = "msg " + role;
+  const r = document.createElement("div");
+  r.className = "role";
+  r.textContent = role === "user" ? "You" : "Ornith-1.0-9B";
+  const b = document.createElement("div");
+  b.className = "bubble";
+  m.appendChild(r); m.appendChild(b); chatEl.appendChild(m);
+  chatEl.scrollTop = chatEl.scrollHeight;
+  return b;
+}
+
+async function send() {
+  const message = textEl.value.trim();
+  if (!message && !pendingImage) return;
+  if (job) return;
+
+  const userBubble = addMsg("user");
+  let html = escapeHtml(message);
+  if (pendingImage) {
+    const url = URL.createObjectURL(pendingImage);
+    html += `<img class="attached" src="${url}" alt="attachment"/>`;
+  }
+  userBubble.innerHTML = html;
+
+  const sentImage = pendingImage;
+  pendingImage = null; renderPreviews();
+  textEl.value = ""; textEl.style.height = "auto";
+
+  const history = conversation.slice();
+  conversation.push({ role: "user", content: message });
+
+  const assistantBubble = addMsg("assistant");
+  renderAssistant(assistantBubble, "", "");
+
+  setBusy(true);
+  statusEl.textContent = "Connecting…";
+
+  try {
+    const c = await connect();
+    const payload = {
+      message,
+      image: sentImage ? handle_file(sentImage) : null,
+      history,
+      max_new_tokens: parseInt(maxEl.value, 10),
+      temperature: parseFloat(tempEl.value),
+    };
+    job = c.submit("/generate", payload);
+
+    for await (const msg of job) {
+      if (msg.type === "status") {
+        const s = msg.status || msg.data?.status;
+        if (s === "pending") statusEl.textContent = `Queued…${msg.position != null ? " (#" + msg.position + ")" : ""}`;
+        else if (s === "generating") statusEl.textContent = "Generating…";
+        else if (s === "complete" || s === "error") statusEl.textContent = "";
+        continue;
+      }
+      if (msg.type !== "data") continue;
+      const raw = Array.isArray(msg.data) ? msg.data[0] : msg.data;
+      let d = raw;
+      if (typeof raw === "string") { try { d = JSON.parse(raw); } catch { d = { answer: raw }; } }
+      if (d && d.error) {
+        renderAssistant(assistantBubble, d.reasoning || "", d.answer || "", d.error);
+        statusEl.innerHTML = `<span class="err">Error: ${escapeHtml(d.error)}</span>`;
+        break;
+      }
+      renderAssistant(assistantBubble, d?.reasoning || "", d?.answer || "");
+      if (d && d.status === "complete") {
+        if (d.answer) conversation.push({ role: "assistant", content: d.answer });
+      }
+      scrollIfNear();
+    }
+  } catch (e) {
+    renderAssistant(assistantBubble, "", "", String(e));
+    statusEl.innerHTML = `<span class="err">${escapeHtml(String(e))}</span>`;
+  } finally {
+    job = null;
+    setBusy(false);
+    statusEl.textContent = "";
+  }
+}
+
+function renderAssistant(bubble, reasoning, answer, error) {
+  let h = "";
+  if (reasoning && reasoning.trim()) {
+    const open = error === undefined ? " open" : ""; // collapse once answer lands
+    h += `<details class="reasoning"${answer ? "" : " open"}><summary>Reasoning</summary><pre>${escapeHtml(reasoning)}</pre></details>`;
+  }
+  if (error) {
+    h += `<div class="err">⚠ ${escapeHtml(error)}</div>`;
+  } else if (answer && answer.trim()) {
+    h += `<div class="answer">${DOMPurify.sanitize(marked.parse(answer))}</div>`;
+  } else if (!reasoning) {
+    h += `<span style="color:var(--muted)">…</span>`;
+  }
+  bubble.innerHTML = h;
+}
+
+function setBusy(busy) {
+  sendBtn.disabled = busy;
+  sendBtn.style.display = busy ? "none" : "";
+  stopBtn.style.display = busy ? "" : "none";
+}
+
+function escapeHtml(s) {
+  return String(s ?? "")
+    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+// Focus the input on load.
+textEl.focus();
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,7 @@
+# Hugging Face ZeroGPU Spaces ship a CUDA-enabled torch in the base image, so
+# do NOT add torch here (a pip install would pull a CPU wheel and break GPU).
+gradio>=6.19.0
+spaces
+transformers>=5.8.1
+accelerate
+pillow