Add gradio.Server app for ThinkingCap-Qwen3.6-27B

- app.py: gradio.Server backend with @app .api() generate endpoint,
ZeroGPU xlarge, bf16 model load at startup, Qwen3 thinking-trace parsing
- index.html: vanilla HTML/CSS/JS chat UI via Gradio JS Client with
collapsible reasoning panel + thinking-token counter
- requirements.txt + ZeroGPU-compatible python_version (3.12)

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

README.md

@@ -5,7 +5,7 @@ colorFrom: yellow
 colorTo: purple
 sdk: gradio
 sdk_version: 6.19.0
-python_version: '3.13'
+python_version: '3.12'
 app_file: app.py
 pinned: false
 ---

app.py

@@ -0,0 +1,213 @@
+"""
+ThinkingCap-Qwen3.6-27B — Hugging Face Space
+============================================
+
+Custom chat frontend (vanilla HTML/CSS/JS in index.html) talking to a
+Gradio backend built with `gradio.Server`.
+
+`gradio.Server` extends FastAPI. We expose one queued, ZeroGPU-backed
+endpoint, `generate`, via `@app.api()` so it goes through Gradio's queue /
+concurrency engine and is callable from the Gradio JS Client. A plain
+`@app.get("/")` serves the static index.html.
+
+Run locally:  python app.py
+On Spaces:    select ZeroGPU hardware + xlarge GPU (96 GB) in Space settings
+             (see README). The 27B bf16 model needs the larger VRAM tier.
+"""
+
+import os
+import re
+import sys
+from typing import Optional
+
+import spaces
+import torch
+from PIL import Image
+from gradio import Server
+from gradio.data_classes import FileData
+from transformers import AutoModelForImageTextToText, AutoProcessor
+
+MODEL_ID = os.environ.get("MODEL_ID", "bottlecapai/ThinkingCap-Qwen3.6-27B")
+
+# Defaults mirror the model card's evaluation settings.
+DEFAULT_MAX_NEW_TOKENS = 32768
+DEFAULT_TEMPERATURE = 1.0
+DEFAULT_TOP_P = 0.95
+DEFAULT_TOP_K = 20
+
+# Qwen3 reasoning-trace tags. Built by concatenation so the literal markers
+# never appear together in source.
+_THINK_OPEN = "<" + "think" + ">"
+_THINK_CLOSE = "<" + "/think" + ">"
+_THINK_RE = re.compile(
+    re.escape(_THINK_OPEN) + r"(.*?)" + re.escape(_THINK_CLOSE), re.DOTALL
+)
+
+# ---------------------------------------------------------------------------
+# Model load (root level so ZeroGPU's CUDA emulation is active during startup;
+# real CUDA is used inside @spaces.GPU).
+# ---------------------------------------------------------------------------
+print(f"[app] loading {MODEL_ID} ...", flush=True)
+try:
+    processor = AutoProcessor.from_pretrained(MODEL_ID, trust_remote_code=True)
+    model = AutoModelForImageTextToText.from_pretrained(
+        MODEL_ID,
+        dtype=torch.bfloat16,
+        trust_remote_code=True,
+    )
+    model.to("cuda").eval()
+    print("[app] model ready.", flush=True)
+except Exception as e:  # pragma: no cover - surface clearly on Spaces logs
+    print(f"[app] FAILED to load model: {e}", file=sys.stderr, flush=True)
+    raise
+
+
+# ---------------------------------------------------------------------------
+# Backend
+# ---------------------------------------------------------------------------
+app = Server()
+
+
+def _load_image(image: Optional[FileData]) -> Optional[Image.Image]:
+    """Accept a Gradio FileData (dict-like or object) and return a PIL image."""
+    if image is None:
+        return None
+    path = image["path"] if isinstance(image, dict) else image.path
+    if not path or not os.path.exists(path):
+        return None
+    return Image.open(path).convert("RGB")
+
+
+def _build_messages(prompt: str, image: Optional[Image.Image]) -> list:
+    """Build a Qwen-VL style chat message list with an optional image."""
+    if image is None:
+        return [{"role": "user", "content": prompt}]
+    return [
+        {
+            "role": "user",
+            "content": [
+                {"type": "image", "image": image},
+                {"type": "text", "text": prompt},
+            ],
+        }
+    ]
+
+
+def _split_thinking(text: str) -> tuple[str, str]:
+    """Split a Qwen3 reasoning trace into (thinking, answer)."""
+    matches = list(_THINK_RE.finditer(text))
+    if not matches:
+        return "", text.strip()
+    last = matches[-1]
+    thinking = last.group(1).strip()
+    answer = text[last.end():].strip()
+    if not answer:
+        answer = text[: matches[0].start()].strip()
+    return thinking, answer
+
+
+def _tidy(text: str) -> str:
+    """Drop trailing partial tags / leftover special tokens for a clean answer."""
+    text = text.strip()
+    if _THINK_OPEN in text and _THINK_CLOSE not in text:
+        text = text.split(_THINK_OPEN, 1)[0].strip()
+    return text
+
+
+@app.api()
+@spaces.GPU(size="xlarge", duration=300)
+def generate(
+    prompt: str,
+    image: Optional[FileData] = None,
+    history: Optional[list] = None,
+    max_new_tokens: int = DEFAULT_MAX_NEW_TOKENS,
+    temperature: float = DEFAULT_TEMPERATURE,
+    top_p: float = DEFAULT_TOP_P,
+    top_k: int = DEFAULT_TOP_K,
+    enable_thinking: bool = True,
+) -> dict:
+    """Generate one response from ThinkingCap-Qwen3.6-27B.
+
+    Parameters mirror the model card's recommended sampling. Returns the raw
+    text plus parsed thinking/answer and a thinking-token count, so the
+    frontend can render a collapsible reasoning panel.
+    """
+    history = history or []
+    image_pil = _load_image(image)
+
+    messages: list = []
+    for turn in history:
+        role = turn.get("role", "user")
+        content = turn.get("content", "")
+        if role == "assistant":
+            _, ans = _split_thinking(content)
+            messages.append({"role": "assistant", "content": ans or content})
+        else:
+            messages.append({"role": "user", "content": content})
+    messages.append(_build_messages(prompt, image_pil)[0])
+
+    try:
+        text = processor.apply_chat_template(
+            messages,
+            tokenize=False,
+            add_generation_prompt=True,
+            enable_thinking=enable_thinking,
+        )
+    except TypeError:
+        text = processor.apply_chat_template(
+            messages, tokenize=False, add_generation_prompt=True
+        )
+
+    inputs = processor(
+        text=[text],
+        images=[image_pil] if image_pil is not None else None,
+        return_tensors="pt",
+    ).to(model.device)
+
+    prompt_len = inputs["input_ids"].shape[-1]
+
+    with torch.inference_mode():
+        out_ids = model.generate(
+            **inputs,
+            max_new_tokens=int(max_new_tokens),
+            do_sample=float(temperature) > 0,
+            temperature=max(float(temperature), 1e-5),
+            top_p=float(top_p),
+            top_k=int(top_k),
+        )
+
+    generated = out_ids[0, prompt_len:]
+    full = processor.tokenizer.decode(generated, skip_special_tokens=False)
+    full = _tidy(full)
+
+    thinking, answer = _split_thinking(full)
+    thinking_tokens = len(processor.tokenizer.encode(thinking)) if thinking else 0
+
+    return {
+        "raw": full,
+        "thinking": thinking,
+        "answer": answer,
+        "thinking_tokens": thinking_tokens,
+    }
+
+
+# ---------------------------------------------------------------------------
+# Static frontend
+# ---------------------------------------------------------------------------
+_STATIC_DIR = os.path.dirname(os.path.abspath(__file__))
+
+
+@app.get("/")
+async def homepage():
+    html_path = os.path.join(_STATIC_DIR, "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return f.read()
+
+
+@app.get("/health")
+async def health():
+    return {"ok": True, "model": MODEL_ID}
+
+
+if __name__ == "__main__":
+    app.launch(show_error=True, show_api=True)

index.html

@@ -0,0 +1,413 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>ThinkingCap · Qwen 3.6 27B</title>
+<style>
+  :root {
+    --hf-yellow: #FFD21E;
+    --hf-yellow-dark: #FFB400;
+    --bg: #fafafa;
+    --panel: #ffffff;
+    --ink: #1f2937;
+    --muted: #6b7280;
+    --line: #e5e7eb;
+    --user-bubble: #fff7d6;
+    --user-border: #ffe78a;
+    --assistant-bubble: #ffffff;
+    --think-bg: #f3f4f6;
+    --think-ink: #4b5563;
+    --danger: #dc2626;
+    --radius: 14px;
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; margin: 0; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background: var(--bg);
+    color: var(--ink);
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  /* Header */
+  header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 18px;
+    background: var(--panel);
+    border-bottom: 1px solid var(--line);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+    z-index: 5;
+  }
+  .logo {
+    width: 38px; height: 38px;
+    background: var(--hf-yellow);
+    border-radius: 10px;
+    display: grid; place-items: center;
+    font-size: 22px;
+  }
+  .titles { line-height: 1.2; }
+  .titles h1 { margin: 0; font-size: 16px; font-weight: 700; }
+  .titles p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
+  .spacer { flex: 1; }
+  .pill {
+    font-size: 11px; color: var(--muted);
+    border: 1px solid var(--line); border-radius: 999px;
+    padding: 4px 10px; background: var(--panel);
+  }
+  .icon-btn {
+    border: 1px solid var(--line); background: var(--panel);
+    border-radius: 10px; width: 38px; height: 38px;
+    cursor: pointer; font-size: 18px; color: var(--ink);
+    display: grid; place-items: center;
+  }
+  .icon-btn:hover { background: #f3f4f6; }
+
+  /* Settings drawer */
+  #settings {
+    display: none;
+    background: var(--panel);
+    border-bottom: 1px solid var(--line);
+    padding: 14px 18px;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 14px 22px;
+  }
+  #settings.open { display: grid; }
+  .field { display: flex; flex-direction: column; gap: 6px; }
+  .field label { font-size: 12px; font-weight: 600; color: var(--muted); }
+  .field .row { display: flex; align-items: center; gap: 8px; }
+  .field input[type=range] { flex: 1; }
+  .field .val { font-size: 12px; min-width: 42px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
+  .field input[type=number] { width: 90px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
+  .switch { position: relative; width: 40px; height: 22px; }
+  .switch input { opacity: 0; width: 0; height: 0; }
+  .slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: .2s; cursor: pointer; }
+  .slider:before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
+  .switch input:checked + .slider { background: var(--hf-yellow-dark); }
+  .switch input:checked + .slider:before { transform: translateX(18px); }
+  .reset-btn { align-self: end; }
+
+  /* Chat */
+  main { flex: 1; overflow-y: auto; padding: 22px 18px 10px; }
+  #messages { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+  .msg { display: flex; gap: 10px; max-width: 100%; }
+  .msg.user { flex-direction: row-reverse; }
+  .avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 15px; }
+  .msg.user .avatar { background: var(--hf-yellow); }
+  .msg.assistant .avatar { background: #eef2ff; }
+  .bubble { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); max-width: 78%; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.5; font-size: 14.5px; }
+  .msg.user .bubble { background: var(--user-bubble); border-color: var(--user-border); border-top-right-radius: 4px; }
+  .msg.assistant .bubble { background: var(--assistant-bubble); border-top-left-radius: 4px; }
+  .bubble img.thumb { max-width: 220px; max-height: 220px; border-radius: 8px; margin-bottom: 8px; display: block; }
+
+  /* Reasoning panel */
+  .thinking { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--think-bg); }
+  .thinking summary { cursor: pointer; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--think-ink); display: flex; align-items: center; gap: 8px; list-style: none; }
+  .thinking summary::-webkit-details-marker { display: none; }
+  .thinking summary .chev { transition: transform .15s; }
+  .thinking[open] summary .chev { transform: rotate(90deg); }
+  .thinking .body { padding: 0 12px 10px; font-size: 13px; color: var(--think-ink); white-space: pre-wrap; line-height: 1.55; }
+  .tok-count { margin-left: auto; font-weight: 500; color: var(--hf-yellow-dark); font-variant-numeric: tabular-nums; }
+  .answer { white-space: pre-wrap; }
+
+  /* Pending / error */
+  .pending .bubble { display: flex; align-items: center; gap: 10px; color: var(--muted); }
+  .spinner { width: 14px; height: 14px; border: 2px solid #d1d5db; border-top-color: var(--hf-yellow-dark); border-radius: 50%; animation: spin .8s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .elapsed { font-size: 12px; font-variant-numeric: tabular-nums; }
+  .error .bubble { border-color: #fecaca; background: #fef2f2; color: var(--danger); }
+
+  /* Empty state */
+  #empty { text-align: center; color: var(--muted); padding: 60px 20px; max-width: 540px; margin: 0 auto; }
+  #empty h2 { color: var(--ink); font-size: 19px; margin: 14px 0 6px; }
+  #empty p { font-size: 14px; line-height: 1.55; }
+  .examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
+  .examples button { font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; cursor: pointer; color: var(--ink); }
+  .examples button:hover { border-color: var(--hf-yellow-dark); background: #fffdf0; }
+
+  /* Composer */
+  footer { border-top: 1px solid var(--line); background: var(--panel); padding: 12px 18px; }
+  .composer { max-width: 820px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
+  .composer .attach { position: relative; }
+  .composer .attach input { display: none; }
+  .composer .btn { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; width: 40px; height: 40px; cursor: pointer; font-size: 18px; color: var(--ink); display: grid; place-items: center; flex-shrink: 0; }
+  .composer .btn:hover { background: #f3f4f6; }
+  .composer .btn.primary { background: var(--hf-yellow); border-color: var(--hf-yellow-dark); color: #1f2937; font-weight: 700; }
+  .composer .btn.primary:disabled { opacity: .5; cursor: not-allowed; }
+  #prompt { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14.5px; line-height: 1.4; max-height: 180px; outline: none; }
+  #prompt:focus { border-color: var(--hf-yellow-dark); }
+  .img-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff7d6; border: 1px solid var(--user-border); border-radius: 999px; padding: 4px 8px 4px 4px; font-size: 12px; margin-right: 8px; }
+  .img-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
+  .img-chip .x { cursor: pointer; color: var(--muted); font-weight: 700; }
+  .hint { max-width: 820px; margin: 6px auto 0; font-size: 11px; color: var(--muted); text-align: center; }
+</style>
+</head>
+<body>
+  <header>
+    <div class="logo">🤗</div>
+    <div class="titles">
+      <h1>ThinkingCap · Qwen 3.6 27B</h1>
+      <p>Token-efficient reasoning — same answers, ~50% fewer thinking tokens</p>
+    </div>
+    <div class="spacer"></div>
+    <span class="pill" id="status">connecting…</span>
+    <button class="icon-btn" id="gear" title="Settings">⚙️</button>
+  </header>
+
+  <div id="settings">
+    <div class="field">
+      <label>Thinking mode</label>
+      <div class="row">
+        <label class="switch"><input type="checkbox" id="s-enable" checked /><span class="slider"></span></label>
+        <span style="font-size:12px;color:var(--muted)">emit &lt;think&gt; trace</span>
+      </div>
+    </div>
+    <div class="field">
+      <label>Max new tokens</label>
+      <input type="number" id="s-max" value="32768" min="256" step="256" />
+    </div>
+    <div class="field">
+      <label>Temperature <span class="val" id="v-temp">1.0</span></label>
+      <div class="row"><input type="range" id="s-temp" min="0" max="2" step="0.05" value="1.0" /></div>
+    </div>
+    <div class="field">
+      <label>Top-p <span class="val" id="v-topp">0.95</span></label>
+      <div class="row"><input type="range" id="s-topp" min="0.1" max="1" step="0.01" value="0.95" /></div>
+    </div>
+    <div class="field">
+      <label>Top-k <span class="val" id="v-topk">20</span></label>
+      <div class="row"><input type="range" id="s-topk" min="0" max="100" step="1" value="20" /></div>
+    </div>
+    <div class="field reset-btn">
+      <button class="btn" id="s-reset" style="width:auto;height:34px;padding:0 14px;font-size:13px;">Reset defaults</button>
+    </div>
+  </div>
+
+  <main>
+    <div id="messages">
+      <div id="empty">
+        <div style="font-size:40px">🧠</div>
+        <h2>Chat with ThinkingCap-Qwen3.6-27B</h2>
+        <p>A finetune of Qwen 3.6 27B that keeps the answer quality while cutting thinking tokens by ~50% on average (and &gt;90% in best cases). Ask anything — reasoning, math, code, or upload an image.</p>
+        <div class="examples">
+          <button>Explain why 0.1 + 0.2 ≠ 0.3 in floating point</button>
+          <button>Write a Python function to debounce calls</button>
+          <button>What's a good name for a token-efficient reasoning model?</button>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <footer>
+    <div class="composer">
+      <div class="attach">
+        <button class="btn" id="attach-btn" title="Attach image">📎</button>
+        <input type="file" id="file-input" accept="image/*" />
+      </div>
+      <textarea id="prompt" rows="1" placeholder="Message ThinkingCap…  (Enter to send, Shift+Enter for newline)"></textarea>
+      <button class="btn primary" id="send" title="Send">➤</button>
+    </div>
+    <div class="hint" id="img-hint"></div>
+  </footer>
+
+<script type="module">
+import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+const $ = (s) => document.querySelector(s);
+const messagesEl = $("#messages");
+const emptyEl = $("#empty");
+const promptEl = $("#prompt");
+const sendBtn = $("#send");
+const fileInput = $("#file-input");
+const statusEl = $("#status");
+const imgHint = $("#img-hint");
+
+// Conversation history sent to the backend (text-only; images are per-turn).
+let history = [];
+let client = null;
+let busy = false;
+let pendingFile = null;       // File object selected for the next message
+
+// --- Settings --------------------------------------------------------------
+const DEFAULTS = { enable: true, max: 32768, temp: 1.0, topp: 0.95, topk: 20 };
+const settings = { ...DEFAULTS };
+
+function readSettings() {
+  settings.enable = $("#s-enable").checked;
+  settings.max = parseInt($("#s-max").value, 10) || DEFAULTS.max;
+  settings.temp = parseFloat($("#s-temp").value);
+  settings.topp = parseFloat($("#s-topp").value);
+  settings.topk = parseInt($("#s-topk").value, 10);
+  $("#v-temp").textContent = settings.temp.toFixed(2);
+  $("#v-topp").textContent = settings.topp.toFixed(2);
+  $("#v-topk").textContent = settings.topk;
+}
+["s-enable","s-max","s-temp","s-topp","s-topk"].forEach(id => $("#" + id).addEventListener("input", readSettings));
+$("#s-reset").addEventListener("click", () => {
+  $("#s-enable").checked = DEFAULTS.enable;
+  $("#s-max").value = DEFAULTS.max;
+  $("#s-temp").value = DEFAULTS.temp;
+  $("#s-topp").value = DEFAULTS.topp;
+  $("#s-topk").value = DEFAULTS.topk;
+  readSettings();
+});
+readSettings();
+
+$("#gear").addEventListener("click", () => $("#settings").classList.toggle("open"));
+
+// --- Connect to the Gradio backend ----------------------------------------
+(async () => {
+  try {
+    client = await Client.connect(window.location.origin);
+    statusEl.textContent = "ready";
+    statusEl.style.color = "#16a34a";
+  } catch (e) {
+    statusEl.textContent = "offline";
+    statusEl.style.color = "var(--danger)";
+    console.error(e);
+  }
+})();
+
+// --- Composer behaviour ---------------------------------------------------
+function autosize() {
+  promptEl.style.height = "auto";
+  promptEl.style.height = Math.min(promptEl.scrollHeight, 180) + "px";
+}
+promptEl.addEventListener("input", autosize);
+promptEl.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
+});
+sendBtn.addEventListener("click", send);
+
+// Image attach
+$("#attach-btn").addEventListener("click", () => fileInput.click());
+fileInput.addEventListener("change", () => {
+  const f = fileInput.files[0];
+  if (!f) return;
+  pendingFile = f;
+  const url = URL.createObjectURL(f);
+  imgHint.innerHTML = `<span class="img-chip"><img src="${url}" />${escapeHtml(f.name)} <span class="x" id="rm-img">✕</span></span>`;
+  $("#rm-img").addEventListener("click", clearImage);
+});
+function clearImage() {
+  pendingFile = null;
+  fileInput.value = "";
+  imgHint.innerHTML = "";
+}
+
+// Example chips
+document.querySelectorAll(".examples button").forEach(b =>
+  b.addEventListener("click", () => { promptEl.value = b.textContent; autosize(); promptEl.focus(); })
+);
+
+// --- Render helpers --------------------------------------------------------
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, c => ({ "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;", "'":"&#39;" }[c]));
+}
+
+function addUserBubble(text, imgUrl) {
+  if (emptyEl) emptyEl.remove();
+  const el = document.createElement("div");
+  el.className = "msg user";
+  const imgHtml = imgUrl ? `<img class="thumb" src="${imgUrl}" />` : "";
+  el.innerHTML = `<div class="avatar">🧑</div><div class="bubble">${imgHtml}${escapeHtml(text)}</div>`;
+  messagesEl.appendChild(el);
+  scrollDown();
+}
+
+function addPendingBubble() {
+  const el = document.createElement("div");
+  el.className = "msg assistant pending";
+  el.id = "pending";
+  el.innerHTML = `<div class="avatar">🧠</div>
+    <div class="bubble"><span class="spinner"></span> thinking… <span class="elapsed" data-t0>0.0s</span></div>`;
+  messagesEl.appendChild(el);
+  scrollDown();
+  const t0 = performance.now();
+  const tick = () => {
+    const node = el.querySelector("[data-t0]");
+    if (!node) return;
+    node.textContent = ((performance.now() - t0) / 1000).toFixed(1) + "s";
+    el._timer = requestAnimationFrame(tick);
+  };
+  tick();
+  return el;
+}
+
+function finalizeBubble(pendingEl, data) {
+  cancelAnimationFrame(pendingEl._timer);
+  const { thinking, answer, thinking_tokens } = data;
+  const thinkHtml = thinking
+    ? `<details class="thinking" ${settings.enable ? "" : ""}>
+         <summary><span class="chev">▸</span> Reasoning <span class="tok-count">${thinking_tokens} thinking tokens</span></summary>
+         <div class="body">${escapeHtml(thinking)}</div>
+       </details>`
+    : "";
+  const ansHtml = answer ? `<div class="answer">${escapeHtml(answer)}</div>` : "";
+  pendingEl.classList.remove("pending");
+  pendingEl.querySelector(".bubble").innerHTML = thinkHtml + ansHtml;
+  scrollDown();
+}
+
+function showError(pendingEl, msg) {
+  cancelAnimationFrame(pendingEl._timer);
+  pendingEl.classList.remove("pending");
+  pendingEl.classList.add("error");
+  pendingEl.querySelector(".bubble").innerHTML = "⚠️ " + escapeHtml(msg);
+}
+
+function scrollDown() { messagesEl.parentElement.scrollTop = messagesEl.parentElement.scrollHeight; }
+
+// --- Send -----------------------------------------------------------------
+async function send() {
+  const text = promptEl.value.trim();
+  if ((!text && !pendingFile) || busy || !client) return;
+  busy = true;
+  sendBtn.disabled = true;
+
+  const imgUrl = pendingFile ? URL.createObjectURL(pendingFile) : null;
+  addUserBubble(text || "(image)", imgUrl);
+
+  const payload = {
+    prompt: text || "Describe this image.",
+    image: pendingFile ? handle_file(pendingFile) : null,
+    history,
+    max_new_tokens: settings.max,
+    temperature: settings.temp,
+    top_p: settings.topp,
+    top_k: settings.topk,
+    enable_thinking: settings.enable,
+  };
+
+  // Record the user turn in history (text only).
+  history.push({ role: "user", content: text || "(image)" });
+
+  promptEl.value = "";
+  clearImage();
+  autosize();
+
+  const pendingEl = addPendingBubble();
+  try {
+    const result = await client.predict("/generate", payload);
+    const data = result.data[0] || {};
+    finalizeBubble(pendingEl, data);
+    history.push({ role: "assistant", content: data.answer || data.raw || "" });
+  } catch (e) {
+    console.error(e);
+    showError(pendingEl, (e && e.message) ? e.message : "Generation failed.");
+    // Roll back the user turn we optimistically added.
+    history.pop();
+  } finally {
+    busy = false;
+    sendBtn.disabled = false;
+    promptEl.focus();
+  }
+}
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,5 @@
+gradio==6.19.0
+spaces>=0.36
+transformers>=4.56
+accelerate>=1.0
+Pillow>=10.0