Add hiro-translation-api Gradio demo

README.md

@@ -9,6 +9,31 @@ python_version: '3.13'
 app_file: app.py
 pinned: false
 license: apache-2.0
+short_description: Patent translation demo via hiro-translation-api
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# HIRO Translation
+
+Patent translation demo powered by **hiro-translation-api** (stage).
+
+- **stream** — SSE streaming, segment-by-segment display
+- **fast** — single JSON response with full translation
+- Default backend: `stage-s-patsnaprd-hiro-translation-api-internet.patsnap.info`
+
+## Files
+
+| File | Purpose |
+|------|---------|
+| `app.py` | Gradio UI |
+| `api_client.py` | HTTP client for `/compute/hiro_translation_api` |
+| `requirements.txt` | Python dependencies (`requests`; Gradio is pre-installed on Spaces) |
+
+## Local run
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+Check out the [Spaces config reference](https://huggingface.co/docs/hub/spaces-config-reference).
+

api_client.py

@@ -0,0 +1,92 @@
+"""HTTP client for hiro-translation-api (stage gateway)."""
+
+from __future__ import annotations
+
+import json
+from collections.abc import Iterator
+from typing import Any
+
+import requests
+
+DEFAULT_BASE = (
+    "http://stage-s-patsnaprd-hiro-translation-api-internet.patsnap.info"
+)
+API_PREFIX = "/compute/hiro_translation_api"
+
+
+def _api_url(base_url: str, path: str) -> str:
+    return f"{base_url.rstrip('/')}{API_PREFIX}{path}"
+
+
+def health_ok(base_url: str = DEFAULT_BASE) -> tuple[bool, str]:
+    try:
+        r = requests.get(_api_url(base_url, "/health"), timeout=12)
+        r.raise_for_status()
+        data = r.json()
+        if data.get("status") != "OK":
+            return False, f"异常响应: {r.text[:200]}"
+        upstream = data.get("upstream", "UNKNOWN")
+        if upstream == "OK":
+            return True, "服务正常 · 上游 OK"
+        return False, f"网关在线，上游不可用 ({upstream})"
+    except requests.RequestException as exc:
+        return False, str(exc)
+
+
+def translate_fast(
+    text: str,
+    lang: str,
+    *,
+    base_url: str = DEFAULT_BASE,
+    timeout: int = 1800,
+) -> dict[str, Any]:
+    r = requests.post(
+        _api_url(base_url, "/translate"),
+        json={"text": text, "lang": lang, "mode": "fast"},
+        timeout=timeout,
+    )
+    if r.status_code >= 400:
+        try:
+            err = r.json().get("error", r.text[:500])
+        except json.JSONDecodeError:
+            err = r.text[:500]
+        raise RuntimeError(err)
+    return r.json()
+
+
+def _iter_sse_json(resp: requests.Response) -> Iterator[dict[str, Any]]:
+    for raw in resp.iter_lines(decode_unicode=True):
+        if not raw:
+            continue
+        line = raw.strip()
+        if not line.startswith("data:"):
+            continue
+        payload = line[5:].lstrip()
+        if not payload:
+            continue
+        chunk = json.loads(payload)
+        if isinstance(chunk, dict) and chunk.get("error"):
+            raise RuntimeError(str(chunk["error"]))
+        yield chunk
+
+
+def stream_translate(
+    text: str,
+    lang: str,
+    *,
+    base_url: str = DEFAULT_BASE,
+    timeout: int = 1800,
+) -> Iterator[dict[str, Any]]:
+    with requests.post(
+        _api_url(base_url, "/translate"),
+        json={"text": text, "lang": lang, "mode": "stream"},
+        stream=True,
+        timeout=timeout,
+    ) as resp:
+        if resp.status_code >= 400:
+            try:
+                err = resp.json().get("error", resp.text[:500])
+            except (json.JSONDecodeError, ValueError):
+                err = resp.text[:500]
+            raise RuntimeError(err)
+        yield from _iter_sse_json(resp)

app.py

@@ -0,0 +1,832 @@
+"""
+Gradio demo — HIRO Translation API (hiro-translation-api).
+
+Calls stage gateway by default:
+  http://stage-s-patsnaprd-hiro-translation-api-internet.patsnap.info
+"""
+
+from __future__ import annotations
+
+import html
+import json
+import time
+
+import gradio as gr
+
+from api_client import DEFAULT_BASE, health_ok, stream_translate, translate_fast
+
+CUSTOM_CSS = """
+.gradio-container {
+  max-width: 100% !important;
+}
+
+.main-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem 0;
+  color: var(--block-title-text-color, var(--color-accent, var(--body-text-color)));
+}
+
+.status-pill {
+  display: inline-block;
+  padding: 0.4rem 0.75rem;
+  border-radius: var(--block-radius);
+  font-size: 0.8rem;
+  line-height: 1.4;
+  border: 1px solid var(--block-border-color);
+  background: var(--block-background-fill);
+  color: var(--body-text-color);
+}
+.status-pill.ok {
+  border-color: var(--border-color-accent-subdued, var(--block-border-color));
+  color: var(--color-accent, var(--body-text-color));
+}
+.status-pill.err {
+  border-color: var(--error-border-color, var(--block-border-color));
+  color: var(--error-text-color, var(--body-text-color));
+}
+
+.col-header {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--body-text-color-subdued);
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--block-border-color);
+  background: var(--block-background-fill);
+}
+
+.pairs-wrap {
+  max-height: 62vh;
+  overflow-y: auto;
+  overflow-anchor: auto;
+  border: 1px solid var(--block-border-color);
+  border-radius: var(--block-radius);
+  background: var(--block-background-fill);
+}
+
+.pair-block {
+  border-bottom: 1px solid var(--block-border-color);
+}
+.pair-block:last-child { border-bottom: none; }
+
+.pair-idx {
+  padding: 0.35rem 1rem;
+  font-size: 0.7rem;
+  color: var(--body-text-color-subdued);
+  background: var(--body-background-fill);
+  border-bottom: 1px solid var(--block-border-color);
+}
+
+.pair-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+
+.pair-cell {
+  padding: 0.85rem 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  line-height: 1.55;
+  color: var(--body-text-color);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.pair-cell.src {
+  border-right: 1px solid var(--block-border-color);
+  background: var(--input-background-fill);
+}
+.pair-cell.tgt {
+  background: var(--background-fill-secondary, var(--block-background-fill));
+}
+
+.header-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.empty-hint {
+  padding: 3rem 1rem;
+  text-align: center;
+  color: var(--body-text-color-subdued);
+  font-size: 0.9rem;
+}
+
+.results-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.results-panel-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.progress-section {
+  flex: 0 0 auto;
+  padding: 0.6rem 0.85rem;
+  border: 1px solid var(--block-border-color);
+  border-radius: var(--block-radius);
+  background: var(--block-background-fill);
+}
+
+.progress-meta {
+  font-size: 0.8rem;
+  color: var(--body-text-color-subdued);
+  margin-bottom: 0.45rem;
+  line-height: 1.4;
+}
+
+.progress-track {
+  height: 6px;
+  border-radius: 999px;
+  background: var(--background-fill-secondary, var(--input-background-fill));
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--button-primary-background-fill);
+}
+
+.progress-pct {
+  margin-top: 0.35rem;
+  font-size: 0.72rem;
+  color: var(--body-text-color-subdued);
+  text-align: right;
+}
+
+#input-box textarea {
+  font-size: 0.95rem !important;
+  line-height: 1.6 !important;
+  border-radius: var(--block-radius) !important;
+}
+
+.toolbar-row > :last-child {
+  margin-left: auto;
+}
+
+.hiro-full-translation {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: pre-wrap;
+  border: 0;
+  resize: none;
+}
+
+footer { display: none !important; }
+"""
+
+RESULTS_SHELL_HTML = """
+<div class="results-stack">
+  <textarea class="hiro-full-translation" readonly aria-hidden="true" tabindex="-1"></textarea>
+  <div class="progress-section">
+    <div class="progress-meta" id="hiro-progress-meta">就绪</div>
+    <div class="progress-track">
+      <div class="progress-fill" id="hiro-progress-fill" style="width:0%"></div>
+    </div>
+    <div class="progress-pct" id="hiro-progress-pct">0%</div>
+  </div>
+  <div class="pairs-wrap" id="hiro-pairs-scroll">
+    <div id="hiro-pairs-header"></div>
+    <div id="hiro-pairs-body">
+      <div class="empty-hint">翻译结果将显示在此处</div>
+    </div>
+  </div>
+</div>
+"""
+
+LANG_OPTIONS = [
+    ("中文", "zh"),
+    ("英语", "en"),
+    ("日语", "ja"),
+    ("韩语", "ko"),
+    ("德语", "de"),
+    ("法语", "fr"),
+    ("俄语", "ru"),
+    ("西班牙语", "es"),
+    ("葡萄牙语", "pt"),
+    ("意大利语", "it"),
+    ("荷兰语", "nl"),
+    ("阿拉伯语", "ar"),
+    ("印地语", "hi"),
+    ("泰语", "th"),
+    ("越南语", "vi"),
+    ("印尼语", "id"),
+    ("土耳其语", "tr"),
+    ("波兰语", "pl"),
+]
+
+EXAMPLES = [
+    ["一种低损耗换热器", "zh", "en"],
+    [
+        "The present invention relates to a heat exchanger comprising a plurality of fluid passages.",
+        "en",
+        "zh",
+    ],
+    [
+        "1.一种蓝莓早促快发春梢的绿色生产技术，其特征在于，包括：(1)新主枝的培养、(2)调节树体结构。",
+        "zh",
+        "en",
+    ],
+    [
+        "## 技术领域\n\n本发明涉及一种换热器。",
+        "zh",
+        "en",
+    ],
+]
+
+_STREAM_YIELD_INTERVAL_S = 0.12
+_STREAM_YIELD_MIN_NEW_SEGMENTS = 8
+
+
+def _resolve_base(api_base: str) -> str:
+    return (api_base or DEFAULT_BASE).strip().rstrip("/")
+
+
+def check_service(api_base: str) -> str:
+    ok, msg = health_ok(_resolve_base(api_base))
+    base = _resolve_base(api_base)
+    if ok:
+        return (
+            f'<span class="status-pill ok">● 在线<br>'
+            f'<span style="opacity:0.85">{html.escape(base)}</span></span>'
+        )
+    return (
+        f'<span class="status-pill err">● 不可用<br>'
+        f'<span style="opacity:0.85">{html.escape(msg)}</span></span>'
+    )
+
+
+def _parse_progress(progress: str | None) -> tuple[int, int]:
+    if not progress or "/" not in progress:
+        return 0, 0
+    try:
+        cur, total = progress.split("/", 1)
+        return int(cur.strip()), int(total.strip())
+    except ValueError:
+        return 0, 0
+
+
+def _full_translation_text(pairs: list[tuple[str, str]]) -> str:
+    return "".join(trans for _, trans in pairs if trans)
+
+
+def _pairs_for_display(pairs: list[tuple[str, str]]) -> list[tuple[str, str]]:
+    return [(orig, trans) for orig, trans in pairs if orig.strip() or trans.strip()]
+
+
+def _progress_percent(progress: str | None, pair_count: int) -> float:
+    cur, total = _parse_progress(progress)
+    if total > 0:
+        return min(100.0, round(100.0 * cur / total, 1))
+    if pair_count > 0:
+        return 100.0
+    return 0.0
+
+
+def _stream_state_payload(
+    *,
+    visible_pairs: list[tuple[str, str]],
+    full: str,
+    lang: str,
+    percent: float,
+    status: str,
+    reset: bool = False,
+) -> str:
+    return json.dumps(
+        {
+            "reset": reset,
+            "visible_pairs": visible_pairs,
+            "total_visible_count": len(visible_pairs),
+            "full": full,
+            "percent": max(0.0, min(100.0, float(percent))),
+            "status": status,
+            "lang": lang,
+        },
+        ensure_ascii=False,
+    )
+
+
+def _pack_outputs(*, stream_payload: str, panel_visible: bool, copy_enabled: bool) -> tuple:
+    return (
+        stream_payload,
+        gr.update(visible=panel_visible),
+        gr.update(interactive=copy_enabled),
+    )
+
+
+def _empty_outputs():
+    payload = _stream_state_payload(
+        visible_pairs=[],
+        full="",
+        lang="zh2en",
+        percent=0,
+        status="等待输入…",
+        reset=True,
+    )
+    return _pack_outputs(stream_payload=payload, panel_visible=False, copy_enabled=False)
+
+
+def _translation_outputs(
+    pairs: list[tuple[str, str]],
+    *,
+    lang: str,
+    percent: float,
+    status: str,
+    panel_visible: bool = True,
+    reset: bool = False,
+):
+    visible = _pairs_for_display(pairs)
+    full = _full_translation_text(pairs)
+    payload = _stream_state_payload(
+        visible_pairs=visible,
+        full=full,
+        lang=lang,
+        percent=percent,
+        status=status,
+        reset=reset,
+    )
+    return _pack_outputs(
+        stream_payload=payload,
+        panel_visible=panel_visible,
+        copy_enabled=bool(full.strip()),
+    )
+
+
+COPY_TRANSLATION_JS = """
+() => {
+    const ta = document.querySelector(".hiro-full-translation");
+    const text = ta ? ta.value : "";
+    if (!String(text).trim()) {
+        alert("暂无译文可复制");
+        return [];
+    }
+    const copyFallback = (value) => {
+        const el = document.createElement("textarea");
+        el.value = value;
+        el.style.position = "fixed";
+        el.style.left = "-9999px";
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand("copy");
+        document.body.removeChild(el);
+    };
+    const done = () => {
+        const btn = document.getElementById("copy-translation-btn");
+        if (!btn) return;
+        const label = btn.querySelector("button") || btn;
+        const orig = label.textContent;
+        label.textContent = "已复制";
+        setTimeout(() => { label.textContent = orig; }, 1500);
+    };
+    if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(String(text)).then(done).catch(() => {
+            copyFallback(String(text));
+            done();
+        });
+    } else {
+        copyFallback(String(text));
+        done();
+    }
+    return [];
+}
+"""
+
+UPDATE_RESULTS_JS = """
+(stateJson) => {
+    if (window.__hiroApplyStreamState == null) {
+        window.__hiroApplyStreamState = (raw) => {
+            if (window.__hiroResults == null) {
+                window.__hiroResults = { count: 0, layout: null, lastJson: "" };
+            }
+            if (raw === window.__hiroResults.lastJson) return;
+            window.__hiroResults.lastJson = raw;
+
+            const store = window.__hiroResults;
+            const esc = (value) => {
+                const el = document.createElement("div");
+                el.textContent = value == null ? "" : String(value);
+                return el.innerHTML;
+            };
+            const labelsFor = (lang) => {
+                const codeMap = {
+                    zh: "ZH", en: "EN", ja: "JA", ko: "KO", de: "DE",
+                    fr: "FR", ru: "RU", es: "ES", pt: "PT", it: "IT",
+                    nl: "NL", ar: "AR", hi: "HI", th: "TH", vi: "VI",
+                    id: "ID", tr: "TR", pl: "PL",
+                };
+                const parts = String(lang || "zh2en").split("2");
+                const srcCode = (parts[0] || "zh").toLowerCase();
+                const tgtCode = (parts[1] || "en").toLowerCase();
+                const src = codeMap[srcCode] || srcCode.toUpperCase();
+                const tgt = codeMap[tgtCode] || tgtCode.toUpperCase();
+                return { src: `原文 (${src})`, tgt: `译文 (${tgt})` };
+            };
+
+            let state;
+            try {
+                state = JSON.parse(raw || "{}");
+            } catch (_err) {
+                return;
+            }
+
+            const meta = document.getElementById("hiro-progress-meta");
+            const fill = document.getElementById("hiro-progress-fill");
+            const pct = document.getElementById("hiro-progress-pct");
+            const header = document.getElementById("hiro-pairs-header");
+            const body = document.getElementById("hiro-pairs-body");
+            const scroll = document.getElementById("hiro-pairs-scroll");
+            const ta = document.querySelector(".hiro-full-translation");
+            const pairs = Array.isArray(state.visible_pairs) ? state.visible_pairs : [];
+            const layoutKey = state.lang || "zh2en";
+            const totalVisible = state.total_visible_count != null
+                ? state.total_visible_count
+                : pairs.length;
+
+            if (meta) meta.textContent = state.status || "";
+            if (fill) fill.style.width = `${state.percent || 0}%`;
+            if (pct) pct.textContent = `${Math.round(state.percent || 0)}%`;
+            if (ta) ta.value = state.full || "";
+            document.querySelectorAll(".hiro-full-translation").forEach((el) => {
+                el.value = state.full || "";
+            });
+            if (!header || !body || !scroll) return;
+
+            if (state.reset || store.layout !== layoutKey) {
+                store.count = 0;
+                store.layout = layoutKey;
+                body.innerHTML = "";
+                const labels = labelsFor(state.lang);
+                header.innerHTML = `
+                    <div class="header-row">
+                        <div class="col-header">${esc(labels.src)}</div>
+                        <div class="col-header">${esc(labels.tgt)}</div>
+                    </div>`;
+            }
+
+            if (totalVisible < store.count) {
+                store.count = 0;
+                body.innerHTML = "";
+            }
+
+            if (totalVisible === 0 && store.count === 0) {
+                if (!body.querySelector(".empty-hint")) {
+                    body.innerHTML = '<div class="empty-hint">翻译结果将显示在此处</div>';
+                }
+            } else {
+                const hint = body.querySelector(".empty-hint");
+                if (hint) hint.remove();
+            }
+
+            const savedScroll = scroll.scrollTop;
+            const startIdx = store.count;
+            const newPairs = pairs.slice(startIdx);
+
+            for (let i = 0; i < newPairs.length; i++) {
+                const [orig, trans] = newPairs[i];
+                const displayIdx = startIdx + i + 1;
+                body.insertAdjacentHTML(
+                    "beforeend",
+                    `<div class="pair-block" data-idx="${displayIdx}">
+                        <div class="pair-idx">第 ${displayIdx} 段</div>
+                        <div class="pair-row">
+                            <div class="pair-cell src">${esc(orig)}</div>
+                            <div class="pair-cell tgt">${esc(trans)}</div>
+                        </div>
+                    </div>`
+                );
+            }
+
+            store.count = totalVisible;
+            scroll.scrollTop = savedScroll;
+        };
+    }
+
+    window.__hiroApplyStreamState(stateJson);
+    return [];
+}
+"""
+
+INIT_STREAM_WATCH_JS = """
+(api_base) => {
+    if (window.__hiroStreamWatch) return [api_base];
+    window.__hiroStreamWatch = true;
+
+    const bind = () => {
+        const input = document.querySelector("#hiro-stream-state textarea");
+        if (!input) return false;
+        let last = input.value;
+        setInterval(() => {
+            if (input.value !== last) {
+                last = input.value;
+                if (typeof window.__hiroApplyStreamState === "function") {
+                    window.__hiroApplyStreamState(input.value);
+                }
+            }
+        }, 120);
+        return true;
+    };
+
+    if (!bind()) {
+        const boot = new MutationObserver(() => {
+            if (bind()) boot.disconnect();
+        });
+        boot.observe(document.body, { childList: true, subtree: true });
+    }
+    return [api_base];
+}
+"""
+
+RESET_STREAM_JS = """
+(text, lang, mode, api_base) => {
+    if (window.__hiroResults) {
+        window.__hiroResults.count = 0;
+        window.__hiroResults.layout = null;
+        window.__hiroResults.lastJson = "";
+    }
+    return [text, lang, mode, api_base];
+}
+"""
+
+CLEAR_STREAM_JS = """
+() => {
+    if (window.__hiroResults) {
+        window.__hiroResults.count = 0;
+        window.__hiroResults.layout = null;
+        window.__hiroResults.lastJson = "";
+    }
+    return [];
+}
+"""
+
+
+def run_translation(text: str, lang: str, mode: str, api_base: str):
+    text = (text or "").strip()
+    if not text:
+        yield _empty_outputs()
+        return
+
+    base = _resolve_base(api_base)
+    pairs: list[tuple[str, str]] = []
+    t0 = time.perf_counter()
+    last_progress = "0/0"
+    last_emitted_visible = 0
+    last_yield_t = 0.0
+
+    def emit(*, percent: float, status: str, panel_visible: bool = True, reset: bool = False, force: bool = False):
+        nonlocal last_emitted_visible, last_yield_t
+        visible = _pairs_for_display(pairs)
+        if not force and not reset and len(visible) == last_emitted_visible and percent < 100:
+            return None
+        last_emitted_visible = len(visible)
+        last_yield_t = time.perf_counter()
+        return _translation_outputs(
+            pairs,
+            lang=lang,
+            percent=percent,
+            status=status,
+            panel_visible=panel_visible,
+            reset=reset,
+        )
+
+    yield emit(percent=0, status="正在连接网关…", reset=True)
+
+    try:
+        if mode == "fast":
+            data = translate_fast(text, lang, base_url=base)
+            orig = data.get("text_original", text)
+            trans = data.get("text_translated", "")
+            engine = data.get("engine", "")
+            elapsed = time.perf_counter() - t0
+            pairs = [(orig, trans)]
+            status = f"完成 · fast 模式 · {elapsed:.1f}s"
+            if engine:
+                status += f" · {engine}"
+            yield emit(percent=100, status=status, force=True)
+            return
+
+        for chunk in stream_translate(text, lang, base_url=base):
+            orig = chunk.get("text_original") or ""
+            trans = chunk.get("text_translated") or ""
+            if orig or trans:
+                pairs.append((orig, trans))
+
+            last_progress = chunk.get("progress") or last_progress
+            pct = _progress_percent(last_progress, len(pairs))
+            total = _parse_progress(last_progress)[1]
+            desc = f"翻译中 {last_progress}" if total else f"已收到 {len(pairs)} 段"
+            elapsed = time.perf_counter() - t0
+
+            visible = _pairs_for_display(pairs)
+            new_visible = len(visible) - last_emitted_visible
+            now = time.perf_counter()
+            if (
+                now - last_yield_t >= _STREAM_YIELD_INTERVAL_S
+                or new_visible >= _STREAM_YIELD_MIN_NEW_SEGMENTS
+            ):
+                out = emit(
+                    percent=pct,
+                    status=f"流式翻译中 · {desc} · {elapsed:.1f}s",
+                )
+                if out is not None:
+                    yield out
+
+        elapsed = time.perf_counter() - t0
+        yield emit(
+            percent=100,
+            status=f"完成 · 共 {len(pairs)} 段 · {elapsed:.1f}s · {last_progress}",
+            force=True,
+        )
+
+    except Exception as exc:
+        elapsed = time.perf_counter() - t0
+        err = html.escape(str(exc))
+        payload = _stream_state_payload(
+            visible_pairs=[],
+            full="",
+            lang=lang,
+            percent=0,
+            status=f"失败 · {elapsed:.1f}s · {err}",
+            reset=True,
+        )
+        yield _pack_outputs(stream_payload=payload, panel_visible=True, copy_enabled=False)
+
+
+def build_theme() -> gr.Theme:
+    return gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="indigo",
+        neutral_hue="slate",
+        radius_size="lg",
+        font=[gr.themes.GoogleFont("DM Sans"), "system-ui", "sans-serif"],
+        font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
+    )
+
+
+def build_ui() -> gr.Blocks:
+    with gr.Blocks(
+        title="HIRO Translation",
+        css=CUSTOM_CSS,
+        theme=build_theme(),
+    ) as demo:
+        with gr.Sidebar():
+            gr.HTML('<p class="main-title">HIRO Translation</p>')
+            gr.Markdown("专利翻译 · `hiro-translation-api`")
+
+            gateway_status = gr.HTML(value=check_service(DEFAULT_BASE))
+            refresh_btn = gr.Button("检查网关", size="sm", variant="secondary")
+
+            with gr.Row():
+                source_lang = gr.Dropdown(
+                    choices=LANG_OPTIONS,
+                    value="zh",
+                    label="源语言",
+                )
+                target_lang = gr.Dropdown(
+                    choices=LANG_OPTIONS,
+                    value="en",
+                    label="目标语言",
+                )
+            lang = gr.Textbox(value="zh2en", visible=False)
+            mode = gr.Radio(
+                choices=["stream", "fast"],
+                value="stream",
+                label="调用模式",
+                info="stream：流式分段；fast：一次返回完整译文",
+            )
+
+            with gr.Accordion("高级选项", open=False):
+                api_base = gr.Textbox(
+                    label="API Base URL",
+                    value=DEFAULT_BASE,
+                    placeholder=DEFAULT_BASE,
+                )
+
+            gr.Markdown("**快速示例**")
+            example_btns: list[tuple[gr.Button, str, str, str]] = []
+            for i, (sample, src, tgt) in enumerate(EXAMPLES, start=1):
+                preview = sample.replace("\n", " ")[:36]
+                if len(sample) > 36:
+                    preview += "…"
+                btn = gr.Button(f"{i}. {preview}", size="sm", variant="secondary")
+                example_btns.append((btn, sample, src, tgt))
+
+        with gr.Column():
+            input_text = gr.Textbox(
+                label="待翻译文本",
+                placeholder="输入专利相关文本，支持中英日韩及多语种互译",
+                lines=8,
+                elem_id="input-box",
+            )
+            with gr.Row(elem_classes=["toolbar-row"]):
+                submit_btn = gr.Button("开始翻译", variant="primary", scale=0)
+                clear_btn = gr.Button("清空", scale=0)
+                copy_btn = gr.Button(
+                    "复制完整译文",
+                    variant="secondary",
+                    interactive=False,
+                    scale=0,
+                    elem_id="copy-translation-btn",
+                )
+
+            with gr.Column(visible=False, elem_classes=["results-panel-col"]) as results_panel:
+                gr.HTML(RESULTS_SHELL_HTML, elem_id="translation-results")
+                stream_state = gr.Textbox(
+                    value=_stream_state_payload(
+                        visible_pairs=[],
+                        full="",
+                        lang="zh2en",
+                        percent=0,
+                        status="就绪",
+                    ),
+                    visible=False,
+                    elem_id="hiro-stream-state",
+                )
+
+        refresh_btn.click(check_service, inputs=[api_base], outputs=[gateway_status])
+        api_base.change(check_service, inputs=[api_base], outputs=[gateway_status])
+
+        def _combine_lang(src: str, tgt: str) -> str:
+            return f"{src}2{tgt}"
+
+        source_lang.change(
+            _combine_lang, inputs=[source_lang, target_lang], outputs=[lang]
+        )
+        target_lang.change(
+            _combine_lang, inputs=[source_lang, target_lang], outputs=[lang]
+        )
+
+        for btn, sample, src, tgt in example_btns:
+            btn.click(
+                lambda _s=sample, _src=src, _tgt=tgt: (_s, _src, _tgt, f"{_src}2{_tgt}"),
+                outputs=[input_text, source_lang, target_lang, lang],
+            )
+
+        submit_btn.click(
+            fn=run_translation,
+            inputs=[input_text, lang, mode, api_base],
+            outputs=[stream_state, results_panel, copy_btn],
+            js=RESET_STREAM_JS,
+        )
+
+        stream_state.change(
+            fn=None,
+            inputs=[stream_state],
+            outputs=None,
+            js=UPDATE_RESULTS_JS,
+            queue=False,
+        )
+
+        copy_btn.click(
+            fn=None,
+            inputs=None,
+            outputs=None,
+            js=COPY_TRANSLATION_JS,
+            queue=False,
+        )
+
+        def on_clear():
+            payload = _stream_state_payload(
+                visible_pairs=[],
+                full="",
+                lang="zh2en",
+                percent=0,
+                status="等待输入…",
+                reset=True,
+            )
+            return "", *_pack_outputs(
+                stream_payload=payload, panel_visible=False, copy_enabled=False
+            )
+
+        clear_btn.click(
+            on_clear,
+            outputs=[input_text, stream_state, results_panel, copy_btn],
+            js=CLEAR_STREAM_JS,
+        )
+
+        demo.load(
+            check_service,
+            inputs=[api_base],
+            outputs=[gateway_status],
+            js=INIT_STREAM_WATCH_JS,
+        )
+
+    return demo
+
+
+demo = build_ui()
+
+if __name__ == "__main__":
+    demo.queue(default_concurrency_limit=2)
+    demo.launch()

requirements.txt

@@ -0,0 +1 @@
+requests>=2.28.0