Deploy latest Objectverse Diary UI

.gitignore

@@ -9,7 +9,7 @@ __pycache__/
 .venv/
 venv/
 .tmp/
-
+video/
 # Environment and secrets
 .env
 .env.*

README.md

@@ -21,6 +21,16 @@ Objectverse Diary is a small-model AI toy built for the Build Small Hackathon.
 
 Upload a photo of any everyday object. The app wakes it up, gives it a secret personality, writes its diary, and lets you chat with it.
 
+## Hackathon Submission Links
+
+Required public submission package for Build Small Hackathon:
+
+- Hugging Face Space: https://huggingface.co/spaces/build-small-hackathon/ObjectverseDiary
+- Demo video: https://youtu.be/5HbhP21hooA
+- Social media post: https://x.com/GeekCrafter/status/2064250293001576556?s=20
+
+These links cover the required Space link, short demo video, and social post for the official submission flow.
+
 ## Current Status
 
 Stable mock-safe local baseline, live MiniCPM-V Space vision, non-secret hosted vision diagnostics, optional llama.cpp text runtime wiring, a passing local LoRA v2 GGUF smoke test, public mock traces, Space validation evidence, a published curated v2 SFT dataset, a published Qwen 1.5B LoRA v2 adapter, and a published Q4_K_M GGUF are available.
@@ -147,6 +157,8 @@ The stable submission baseline supports:
 ## Stable Submission Evidence
 
 - Live MiniCPM-V Space: https://huggingface.co/spaces/build-small-hackathon/ObjectverseDiary
+- Published demo video: https://youtu.be/5HbhP21hooA
+- Published social media post: https://x.com/GeekCrafter/status/2064250293001576556?s=20
 - Initial acceptance report: `docs/INITIAL_STAGE_REPORT.md`
 - Runtime notes: `docs/RUNTIME.md`
 - Dataset preview notes: `docs/DATASET.md`

scripts/capture_demo_assets.py

@@ -0,0 +1,490 @@
+"""Capture real Objectverse Diary UI assets for the HyperFrames demo video.
+
+This script starts the local Gradio app with explicit mock runtimes, drives a
+system Chrome instance through the Chrome DevTools Protocol, and saves
+screenshots into ``video/objectverse-diary-demo/assets``.
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import os
+import shutil
+import signal
+import socket
+import subprocess
+import textwrap
+import time
+import urllib.request
+from pathlib import Path
+
+
+PROJECT_ROOT = Path(__file__).resolve().parents[1]
+DEFAULT_ASSET_DIR = PROJECT_ROOT / "video" / "objectverse-diary-demo" / "assets"
+DEFAULT_TRACE_DIR = PROJECT_ROOT / ".tmp" / "demo-video-traces"
+DEFAULT_CHROME_PATHS = [
+    Path("/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"),
+    Path("/Applications/Chromium.app/Contents/MacOS/Chromium"),
+]
+
+
+NODE_CAPTURE_SCRIPT = r"""
+const fs = require("fs");
+const path = require("path");
+const http = require("http");
+const { spawn } = require("child_process");
+
+const options = JSON.parse(process.argv[1] || process.argv[2]);
+const chromeArgs = [
+  "--headless=new",
+  "--disable-gpu",
+  "--hide-scrollbars",
+  "--mute-audio",
+  "--no-first-run",
+  "--no-default-browser-check",
+  "--disable-background-networking",
+  "--disable-sync",
+  "--disable-extensions",
+  "--disable-features=Translate",
+  "--remote-debugging-port=0",
+  `--user-data-dir=${options.profileDir}`,
+  "about:blank",
+];
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function requestJson(url) {
+  return new Promise((resolve, reject) => {
+    http.get(url, (res) => {
+      let body = "";
+      res.setEncoding("utf8");
+      res.on("data", (chunk) => (body += chunk));
+      res.on("end", () => {
+        try {
+          resolve(JSON.parse(body));
+        } catch (error) {
+          reject(error);
+        }
+      });
+    }).on("error", reject);
+  });
+}
+
+async function openWebSocket(url) {
+  if (typeof WebSocket === "undefined") {
+    throw new Error("Node WebSocket global is unavailable. Node 22+ is required.");
+  }
+  return new Promise((resolve, reject) => {
+    const socket = new WebSocket(url);
+    socket.addEventListener("open", () => resolve(socket), { once: true });
+    socket.addEventListener("error", (event) => reject(event.error || new Error("WebSocket error")), { once: true });
+  });
+}
+
+function makeClient(socket) {
+  let id = 0;
+  const pending = new Map();
+  socket.addEventListener("message", (event) => {
+    const message = JSON.parse(event.data);
+    if (message.id && pending.has(message.id)) {
+      const { resolve, reject } = pending.get(message.id);
+      pending.delete(message.id);
+      if (message.error) reject(new Error(`${message.error.message || "CDP error"} ${message.error.data || ""}`));
+      else resolve(message.result || {});
+    }
+  });
+  return {
+    send(method, params = {}) {
+      const commandId = ++id;
+      socket.send(JSON.stringify({ id: commandId, method, params }));
+      return new Promise((resolve, reject) => {
+        pending.set(commandId, { resolve, reject });
+        setTimeout(() => {
+          if (pending.has(commandId)) {
+            pending.delete(commandId);
+            reject(new Error(`Timed out waiting for ${method}`));
+          }
+        }, 15000);
+      });
+    },
+    close() {
+      socket.close();
+    },
+  };
+}
+
+async function waitForExpression(client, expression, timeoutMs = 20000) {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    const result = await client.send("Runtime.evaluate", {
+      expression,
+      returnByValue: true,
+      awaitPromise: true,
+    });
+    if (result.result && result.result.value) return true;
+    await sleep(250);
+  }
+  let debugValue = {};
+  try {
+    const debug = await client.send("Runtime.evaluate", {
+      expression: "(() => ({ href: location.href, readyState: document.readyState, text: document.body ? document.body.innerText.slice(0, 500) : '', html: document.documentElement ? document.documentElement.outerHTML.slice(0, 500) : '' }))()",
+      returnByValue: true,
+    });
+    debugValue = debug.result ? debug.result.value : {};
+  } catch (error) {
+    debugValue = { debugError: String(error) };
+  }
+  throw new Error(`Timed out waiting for expression: ${expression}\nCurrent page: ${JSON.stringify(debugValue, null, 2)}`);
+}
+
+async function evaluate(client, expression) {
+  return client.send("Runtime.evaluate", {
+    expression,
+    returnByValue: true,
+    awaitPromise: true,
+  });
+}
+
+function withGradioRoot(source) {
+  return `
+    (() => {
+      const app = document.querySelector('gradio-app');
+      const root = app && app.shadowRoot ? app.shadowRoot : document;
+      const pageText = document.body ? document.body.innerText : '';
+      ${source}
+    })()
+  `;
+}
+
+async function screenshot(client, name) {
+  await sleep(650);
+  const result = await client.send("Page.captureScreenshot", {
+    format: "png",
+    captureBeyondViewport: false,
+    fromSurface: true,
+  });
+  const output = path.join(options.assetDir, `${name}.png`);
+  fs.writeFileSync(output, Buffer.from(result.data, "base64"));
+  console.log(output);
+}
+
+async function main() {
+  fs.mkdirSync(options.assetDir, { recursive: true });
+  fs.mkdirSync(options.profileDir, { recursive: true });
+  const chrome = spawn(options.chromePath, chromeArgs, { stdio: ["ignore", "ignore", "pipe"] });
+  let stderr = "";
+  chrome.stderr.on("data", (chunk) => {
+    stderr += chunk.toString();
+  });
+
+  let debuggerUrl = "";
+  const start = Date.now();
+  while (Date.now() - start < 12000) {
+    const match = stderr.match(/DevTools listening on (ws:\/\/[^\s]+)/);
+    if (match) {
+      debuggerUrl = match[1];
+      break;
+    }
+    await sleep(100);
+  }
+  if (!debuggerUrl) {
+    chrome.kill("SIGTERM");
+    throw new Error("Could not find Chrome DevTools WebSocket URL.");
+  }
+
+  const debugPort = new URL(debuggerUrl).port;
+  const browserSocket = await openWebSocket(debuggerUrl);
+  const browserClient = makeClient(browserSocket);
+  const createdTarget = await browserClient.send("Target.createTarget", {
+    url: options.appUrl,
+  });
+  browserClient.close();
+  await sleep(500);
+
+  const targets = await requestJson(`http://127.0.0.1:${debugPort}/json/list`);
+  const pageTarget = targets.find((target) => target.id === createdTarget.targetId) || targets.find(
+    (target) =>
+      target.type === "page" &&
+      target.webSocketDebuggerUrl &&
+      String(target.url || "").startsWith(options.appUrl)
+  );
+  if (!pageTarget) {
+    chrome.kill("SIGTERM");
+    throw new Error("Could not find a Chrome page target.");
+  }
+
+  const socket = await openWebSocket(pageTarget.webSocketDebuggerUrl);
+  const client = makeClient(socket);
+  try {
+    await client.send("Page.enable");
+    await client.send("Runtime.enable");
+    await client.send("Emulation.setDeviceMetricsOverride", {
+      width: 1920,
+      height: 1080,
+      deviceScaleFactor: 1,
+      mobile: false,
+    });
+    await client.send("Page.navigate", { url: options.appUrl });
+    await waitForExpression(client, withGradioRoot("return Boolean(root.querySelector('#objectverse-app') || pageText.includes('Objectverse Diary'));"), 60000);
+    await sleep(3000);
+    await screenshot(client, "01-hero");
+
+    await evaluate(client, withGradioRoot(`
+        const button = [...root.querySelectorAll('button')].find((el) => el.textContent.includes('OVD-001'));
+        if (!button) throw new Error('Coffee mug example button not found');
+        button.click();
+        return true;
+    `));
+    await waitForExpression(client, withGradioRoot("return pageText.includes('CoffeeMug worth is awake');"), 35000);
+    await sleep(1300);
+    await screenshot(client, "02-intake-awake");
+
+    const captureScroll = async (name, selector, offset = -120) => {
+      await evaluate(client, withGradioRoot(`
+          const el = document.querySelector(${JSON.stringify(selector)});
+          const shadowEl = root.querySelector(${JSON.stringify(selector)});
+          const target = shadowEl || el;
+          if (!target) throw new Error('Missing selector ${selector}');
+          target.scrollIntoView({ block: 'start', inline: 'nearest' });
+          window.scrollBy(0, ${offset});
+          return true;
+      `));
+      await screenshot(client, name);
+    };
+
+    await captureScroll("03-object-file", "#results", -80);
+    await captureScroll("04-diary", "#diary-output", -190);
+    await captureScroll("05-share-card", "#share-chat", -80);
+
+    await evaluate(client, withGradioRoot(`
+        const input = root.querySelector('#chat-panel textarea');
+        if (!input) throw new Error('Chat textarea not found');
+        input.value = "What have you been hiding on my desk?";
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        const button = [...root.querySelectorAll('#chat-panel button')].find((el) => el.textContent.trim() === 'Ask');
+        if (!button) throw new Error('Ask button not found');
+        button.click();
+        return true;
+    `));
+    await waitForExpression(client, withGradioRoot("return pageText.includes('unlimited office hours');"), 20000);
+    await evaluate(client, withGradioRoot(`
+        const input = root.querySelector('#chat-panel textarea');
+        if (input) {
+          input.value = "";
+          input.dispatchEvent(new Event('input', { bubbles: true }));
+          input.blur();
+        }
+        return true;
+    `));
+    await captureScroll("06-chat", "#chat-panel", -140);
+
+    await evaluate(client, withGradioRoot(`
+        const label = [...root.querySelectorAll('button, summary, [role="button"], .label-wrap, .accordion')].find((el) => el.textContent.includes('Developer details'));
+        const trigger = label ? (label.closest('button, summary, [role="button"]') || label) : null;
+        if (!trigger) throw new Error('Developer details trigger not found');
+        const expanded = trigger.getAttribute('aria-expanded');
+        if (expanded !== 'true') trigger.click();
+        window.scrollTo({ top: document.body.scrollHeight, behavior: 'instant' });
+        return true;
+    `));
+    await waitForExpression(client, withGradioRoot("return pageText.includes('Trace saved') || pageText.includes('sample-01');"), 10000);
+    await sleep(1200);
+    await screenshot(client, "07-trace");
+  } finally {
+    client.close();
+    chrome.kill("SIGTERM");
+  }
+}
+
+main().catch((error) => {
+  console.error(error.stack || String(error));
+  process.exit(1);
+});
+"""
+
+
+def parse_args() -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument("--asset-dir", type=Path, default=DEFAULT_ASSET_DIR)
+    parser.add_argument("--trace-dir", type=Path, default=DEFAULT_TRACE_DIR)
+    parser.add_argument("--port", type=int, default=7860)
+    parser.add_argument("--chrome-path", type=Path, default=None)
+    parser.add_argument("--python", type=Path, default=PROJECT_ROOT / ".venv" / "bin" / "python")
+    parser.add_argument(
+        "--use-uv",
+        action="store_true",
+        help="Run the app in a temporary uv environment instead of the project virtualenv.",
+    )
+    return parser.parse_args()
+
+
+def find_free_port(preferred: int) -> int:
+    for port in range(preferred, preferred + 50):
+        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as probe:
+            probe.settimeout(0.2)
+            if probe.connect_ex(("127.0.0.1", port)) != 0:
+                return port
+    raise RuntimeError("Could not find a free local port for Gradio.")
+
+
+def wait_for_http(url: str, timeout: float = 45.0) -> None:
+    deadline = time.time() + timeout
+    last_error: Exception | None = None
+    while time.time() < deadline:
+        try:
+            with urllib.request.urlopen(url, timeout=3) as response:
+                if response.status < 500:
+                    return
+        except Exception as exc:  # noqa: BLE001 - retain last startup error for diagnostics.
+            last_error = exc
+        time.sleep(0.5)
+    raise RuntimeError(f"Timed out waiting for {url}: {last_error}")
+
+
+def chrome_path(explicit_path: Path | None) -> Path:
+    candidates = [explicit_path] if explicit_path else []
+    candidates.extend(DEFAULT_CHROME_PATHS)
+    for candidate in candidates:
+        if candidate and candidate.exists():
+            return candidate
+    raise RuntimeError("Could not find Chrome. Pass --chrome-path with a Chrome or Chromium executable.")
+
+
+def start_gradio(
+    python_path: Path,
+    port: int,
+    trace_dir: Path,
+    *,
+    use_uv: bool = False,
+) -> subprocess.Popen[str]:
+    env = os.environ.copy()
+    env.update(
+        {
+            "OBJECTVERSE_VISION_BACKEND": "mock",
+            "OBJECTVERSE_TEXT_BACKEND": "mock",
+            "TRACE_OUTPUT_DIR": str(trace_dir),
+            "GRADIO_SERVER_NAME": "127.0.0.1",
+            "GRADIO_SERVER_PORT": str(port),
+        }
+    )
+    return subprocess.Popen(
+        _app_command(python_path, use_uv),
+        cwd=PROJECT_ROOT,
+        env=env,
+        text=True,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.STDOUT,
+    )
+
+
+def _app_command(python_path: Path, use_uv: bool) -> list[str]:
+    if not use_uv:
+        return [str(python_path), "app.py"]
+
+    return [
+        "uv",
+        "run",
+        "--no-project",
+        "--with",
+        "gradio>=4.44,<6",
+        "--with",
+        "pydantic>=2.7,<3",
+        "--with",
+        "spaces>=0.30",
+        "--python",
+        str(python_path),
+        "python",
+        "app.py",
+    ]
+
+
+def run_node_capture(app_url: str, asset_dir: Path, chrome: Path) -> None:
+    profile_dir = PROJECT_ROOT / ".tmp" / "demo-video-chrome-profile"
+    if profile_dir.exists():
+        shutil.rmtree(profile_dir)
+    options = {
+        "appUrl": app_url,
+        "assetDir": str(asset_dir),
+        "profileDir": str(profile_dir),
+        "chromePath": str(chrome),
+    }
+    node = subprocess.run(
+        ["node", "-e", NODE_CAPTURE_SCRIPT, json.dumps(options)],
+        cwd=PROJECT_ROOT,
+        text=True,
+        check=False,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.STDOUT,
+    )
+    print(node.stdout, end="")
+    if node.returncode != 0:
+        raise RuntimeError(f"Node UI capture failed with exit code {node.returncode}.")
+
+
+def main() -> int:
+    args = parse_args()
+    asset_dir = args.asset_dir.resolve()
+    trace_dir = args.trace_dir.resolve()
+    python_path = args.python.resolve()
+    if not args.use_uv and not python_path.exists():
+        raise RuntimeError(f"Python interpreter not found: {python_path}")
+    if args.use_uv and shutil.which("uv") is None:
+        raise RuntimeError("uv is required when --use-uv is set.")
+    chrome = chrome_path(args.chrome_path)
+    port = find_free_port(args.port)
+    app_url = f"http://127.0.0.1:{port}"
+    asset_dir.mkdir(parents=True, exist_ok=True)
+    trace_dir.mkdir(parents=True, exist_ok=True)
+
+    print(
+        textwrap.dedent(
+            f"""
+            Capturing Objectverse Diary demo assets
+            app: {app_url}
+            assets: {asset_dir}
+            traces: {trace_dir}
+            chrome: {chrome}
+            """
+        ).strip()
+    )
+
+    server = start_gradio(python_path, port, trace_dir, use_uv=args.use_uv)
+    try:
+        wait_for_http(app_url)
+        run_node_capture(app_url, asset_dir, chrome)
+    finally:
+        if server.poll() is None:
+            server.send_signal(signal.SIGINT)
+            try:
+                server.wait(timeout=8)
+            except subprocess.TimeoutExpired:
+                server.terminate()
+                server.wait(timeout=8)
+        if server.stdout:
+            output = server.stdout.read()
+            if output:
+                print(output)
+
+    expected = [
+        "01-hero.png",
+        "02-intake-awake.png",
+        "03-object-file.png",
+        "04-diary.png",
+        "05-share-card.png",
+        "06-chat.png",
+        "07-trace.png",
+    ]
+    missing = [name for name in expected if not (asset_dir / name).exists()]
+    if missing:
+        raise RuntimeError(f"Missing captured assets: {', '.join(missing)}")
+    print("Captured assets:")
+    for name in expected:
+        print(f"- {asset_dir / name}")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

src/ui/layout.py

@@ -90,6 +90,16 @@ UI_CONTROL_SCRIPT = r"""
   const CJK_WRAP_RE = /[\u3400-\u9fff，。！？、；：：“”‘’（）《》【】]+/g;
   const SKIP_TEXT_SELECTOR = "script, style, textarea, input, select, option, svg, .lang-zh, .auto-zh";
 
+  function readStoredTheme() {
+    try {
+      return localStorage.getItem("objectverse-theme") === "light" ? "light" : "dark";
+    } catch {
+      return "dark";
+    }
+  }
+
+  root.dataset.ovTheme = readStoredTheme();
+
   function syncLanguageButtons(value) {
     document.querySelectorAll("[data-lang-toggle]").forEach((button) => {
       const active = button.dataset.langToggle === value;
@@ -98,6 +108,34 @@ UI_CONTROL_SCRIPT = r"""
     });
   }
 
+  function syncThemeButtons(value) {
+    const isLight = value === "light";
+    document.querySelectorAll("[data-theme-toggle]").forEach((button) => {
+      button.dataset.themeToggle = value;
+      button.classList.toggle("active", isLight);
+      button.setAttribute("aria-pressed", String(isLight));
+      button.setAttribute("aria-label", isLight ? "Switch to dark theme" : "Switch to light theme");
+      button.setAttribute("title", isLight ? "Switch to dark theme" : "Switch to light theme");
+      button.querySelectorAll("[data-theme-icon]").forEach((icon) => {
+        const hidden = icon.dataset.themeIcon !== value;
+        icon.hidden = hidden;
+        icon.toggleAttribute("hidden", hidden);
+      });
+    });
+  }
+
+  function syncControls() {
+    syncLanguageButtons(root.dataset.ovLang === "zh" ? "zh" : "en");
+    syncThemeButtons(root.dataset.ovTheme === "light" ? "light" : "dark");
+  }
+
+  function scheduleControlSync() {
+    syncControls();
+    window.setTimeout(syncControls, 50);
+    window.setTimeout(syncControls, 250);
+    window.setTimeout(syncControls, 1000);
+  }
+
   function applyLanguage(value) {
     const language = value === "zh" ? "zh" : "en";
     root.dataset.ovLang = language;
@@ -107,11 +145,27 @@ UI_CONTROL_SCRIPT = r"""
     syncLanguageButtons(language);
   }
 
+  function applyTheme(value) {
+    const theme = value === "light" ? "light" : "dark";
+    root.dataset.ovTheme = theme;
+    if (document.body) {
+      document.body.dataset.ovTheme = theme;
+    }
+    try {
+      localStorage.setItem("objectverse-theme", theme);
+    } catch {
+      // Local storage can be unavailable in embedded previews.
+    }
+    syncThemeButtons(theme);
+  }
+
   function initControls() {
     root.lang = "en";
     applyLanguage("en");
+    applyTheme(readStoredTheme());
     normalizeGradioChrome(document.body);
     wrapChineseText(document.body);
+    scheduleControlSync();
   }
 
   function normalizeString(value) {
@@ -199,6 +253,13 @@ UI_CONTROL_SCRIPT = r"""
     const langButton = event.target.closest("[data-lang-toggle]");
     if (langButton) {
       applyLanguage(langButton.dataset.langToggle);
+      return;
+    }
+
+    const themeButton = event.target.closest("[data-theme-toggle]");
+    if (themeButton) {
+      const currentTheme = root.dataset.ovTheme === "light" ? "light" : "dark";
+      applyTheme(currentTheme === "light" ? "dark" : "light");
     }
   });
 
@@ -211,6 +272,7 @@ UI_CONTROL_SCRIPT = r"""
   const observer = new MutationObserver(() => {
     normalizeGradioChrome(document.body);
     wrapChineseText(document.body);
+    syncControls();
   });
   if (document.body) {
     observer.observe(document.body, { childList: true, subtree: true });
@@ -339,10 +401,32 @@ def build_app() -> gr.Blocks:
                     </div>
                   </div>
                   <div class="top-controls" aria-label="Display controls">
-                    <span>Language</span>
-                    <div class="segmented-control">
-                      <button type="button" class="active" data-lang-toggle="en" aria-pressed="true">EN</button>
-                      <button type="button" data-lang-toggle="zh" aria-pressed="false">ZH</button>
+                    <div class="top-actions" aria-label="Project links and theme">
+                      <a class="icon-link" href="https://x.com/GeekCrafter/status/2064250293001576556?s=20" target="_blank" rel="noopener noreferrer" aria-label="Open X social post" title="X post">
+                        <span class="x-mark" aria-hidden="true">X</span>
+                      </a>
+                      <a class="icon-link" href="https://youtu.be/5HbhP21hooA" target="_blank" rel="noopener noreferrer" aria-label="Open YouTube demo video" title="YouTube demo">
+                        <svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
+                          <rect x="3" y="6" width="18" height="12" rx="3"></rect>
+                          <path d="M10 9.5v5l5-2.5-5-2.5Z"></path>
+                        </svg>
+                      </a>
+                      <button type="button" class="icon-link theme-toggle" data-theme-toggle="dark" aria-pressed="false" aria-label="Switch to light theme" title="Switch to light theme">
+                        <svg data-theme-icon="dark" aria-hidden="true" viewBox="0 0 24 24" focusable="false">
+                          <path d="M20 15.5A8.5 8.5 0 0 1 8.5 4a7.2 7.2 0 1 0 11.5 11.5Z"></path>
+                        </svg>
+                        <svg data-theme-icon="light" aria-hidden="true" viewBox="0 0 24 24" focusable="false" hidden>
+                          <circle cx="12" cy="12" r="4"></circle>
+                          <path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"></path>
+                        </svg>
+                      </button>
+                    </div>
+                    <div class="language-control">
+                      <span>Language</span>
+                      <div class="segmented-control">
+                        <button type="button" class="active" data-lang-toggle="en" aria-pressed="true">EN</button>
+                        <button type="button" data-lang-toggle="zh" aria-pressed="false">ZH</button>
+                      </div>
                     </div>
                   </div>
                 </header>

src/ui/styles.css

@@ -8,6 +8,9 @@
   --ov-bg: #161513;
   --ov-bg-panel: rgba(30, 28, 25, 0.82);
   --ov-bg-panel-solid: #1f1d1a;
+  --ov-bg-subtle: rgba(22, 21, 19, 0.52);
+  --ov-bg-field: rgba(22, 21, 19, 0.36);
+  --ov-bg-chip: rgba(212, 175, 55, 0.06);
   --ov-bg-input: #1b1a18;
   --ov-border-faint: rgba(212, 175, 55, 0.16);
   --ov-border-light: rgba(212, 175, 55, 0.34);
@@ -23,6 +26,25 @@
   --font-serif: Georgia, serif;
 }
 
+html[data-ov-theme="light"] {
+  --ov-bg: #f4ecdd;
+  --ov-bg-panel: rgba(255, 250, 240, 0.86);
+  --ov-bg-panel-solid: #fff7e8;
+  --ov-bg-subtle: rgba(255, 247, 232, 0.72);
+  --ov-bg-field: rgba(255, 247, 232, 0.78);
+  --ov-bg-chip: rgba(142, 104, 29, 0.08);
+  --ov-bg-input: #fffaf0;
+  --ov-border-faint: rgba(142, 104, 29, 0.18);
+  --ov-border-light: rgba(142, 104, 29, 0.36);
+  --ov-text-main: #2f2a22;
+  --ov-text-soft: #453b2d;
+  --ov-text-muted: #756a58;
+  --ov-text-dark: #2a261f;
+  --ov-gold: #8e681d;
+  --ov-gold-bright: #6f4f0f;
+  --ov-red: #a94e3d;
+}
+
 .lang-zh,
 .auto-zh {
   display: none !important;
@@ -148,7 +170,7 @@ footer,
   border: 1px solid var(--ov-border-light);
   border-radius: 999px;
   color: var(--ov-gold-bright) !important;
-  background: rgba(212, 175, 55, 0.06);
+  background: var(--ov-bg-chip);
   font-family: var(--font-typewriter);
   font-size: 12px;
   line-height: 1.2;
@@ -165,14 +187,94 @@ footer,
 
 .top-controls {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   min-width: 176px;
   color: var(--ov-text-muted);
   font-family: var(--font-typewriter);
   font-size: 12px;
 }
 
+.top-actions,
+.language-control {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.top-actions {
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.language-control {
+  justify-content: flex-end;
+}
+
+.icon-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--ov-border-light);
+  border-radius: 8px;
+  background: var(--ov-bg-subtle);
+  color: var(--ov-gold) !important;
+  text-decoration: none !important;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s, color 0.2s;
+}
+
+.icon-link:hover,
+.icon-link:focus {
+  border-color: var(--ov-gold);
+  background: var(--ov-bg-chip);
+  color: var(--ov-gold-bright) !important;
+  outline: none;
+}
+
+.icon-link svg {
+  width: 19px;
+  height: 19px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.icon-link svg[hidden] {
+  display: none !important;
+}
+
+.icon-link[href*="youtu"] svg rect {
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+.icon-link[href*="youtu"] svg path {
+  fill: var(--ov-bg);
+  stroke: var(--ov-bg);
+}
+
+.x-mark {
+  font-family: var(--font-typewriter);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.theme-toggle {
+  padding: 0;
+}
+
+.theme-toggle.active {
+  background: var(--ov-gold);
+  color: var(--ov-text-dark) !important;
+}
+
 .segmented-control {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -180,7 +282,7 @@ footer,
   overflow: hidden;
   border: 1px solid var(--ov-border-light);
   border-radius: 6px;
-  background: rgba(22, 21, 19, 0.65);
+  background: var(--ov-bg-subtle);
 }
 
 .segmented-control button {
@@ -216,7 +318,7 @@ footer,
   border: 1px solid var(--ov-border-faint);
   border-left: 4px solid var(--ov-border-light);
   border-radius: 8px;
-  background: rgba(30, 28, 25, 0.72);
+  background: var(--ov-bg-panel);
 }
 
 .archive-status strong {
@@ -261,7 +363,7 @@ footer,
 .gradio-container .box {
   border-color: var(--ov-border-faint) !important;
   border-radius: 8px !important;
-  background: rgba(22, 21, 19, 0.52) !important;
+  background: var(--ov-bg-subtle) !important;
   box-shadow: none !important;
 }
 
@@ -294,7 +396,7 @@ footer,
   min-height: 176px;
   border: 1px dashed var(--ov-border-light) !important;
   border-radius: 8px;
-  background: rgba(22, 21, 19, 0.38) !important;
+  background: var(--ov-bg-field) !important;
   color: var(--ov-text-muted) !important;
   text-align: center;
 }
@@ -330,7 +432,7 @@ footer,
   padding: 10px !important;
   border: 1px solid var(--ov-border-faint) !important;
   border-radius: 6px !important;
-  background: rgba(22, 21, 19, 0.36) !important;
+  background: var(--ov-bg-field) !important;
   text-align: center;
   cursor: pointer;
 }
@@ -401,7 +503,7 @@ button.example-card {
   padding: 11px 12px !important;
   border: 1px solid var(--ov-border-faint) !important;
   border-radius: 6px !important;
-  background: rgba(22, 21, 19, 0.58) !important;
+  background: var(--ov-bg-subtle) !important;
   color: var(--ov-text-main) !important;
   font-family: var(--font-typewriter) !important;
   text-align: left !important;
@@ -491,7 +593,7 @@ button.example-card * {
   border: 1px dashed var(--ov-border-light);
   border-radius: 8px;
   color: var(--ov-text-muted) !important;
-  background: rgba(22, 21, 19, 0.32);
+  background: var(--ov-bg-field);
   text-align: center;
 }
 
@@ -591,7 +693,7 @@ button.example-card * {
   padding: 22px;
   border: 1px solid var(--ov-border-light);
   border-radius: 8px;
-  background: rgba(22, 21, 19, 0.7);
+  background: var(--ov-bg-subtle);
 }
 
 .card-header {
@@ -621,7 +723,7 @@ button.example-card * {
 .quiet-button {
   border: 1px solid var(--ov-border-light) !important;
   border-radius: 6px !important;
-  background: rgba(22, 21, 19, 0.45) !important;
+  background: var(--ov-bg-subtle) !important;
   color: var(--ov-gold) !important;
   font-family: var(--font-typewriter) !important;
 }
@@ -629,7 +731,7 @@ button.example-card * {
 .developer-details {
   border: 1px solid var(--ov-border-faint) !important;
   border-radius: 8px !important;
-  background: rgba(30, 28, 25, 0.58) !important;
+  background: var(--ov-bg-panel) !important;
 }
 
 .developer-json-grid {
@@ -645,7 +747,7 @@ button.example-card * {
 }
 
 .gradio-container :is(.chatbot, .json-holder, pre) {
-  background: rgba(22, 21, 19, 0.5) !important;
+  background: var(--ov-bg-subtle) !important;
 }
 
 @media (max-width: 980px) {
@@ -667,7 +769,12 @@ button.example-card * {
   }
 
   .top-controls {
-    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .top-actions,
+  .language-control {
+    justify-content: flex-start;
   }
 }