Initial public commit

Co-authored-by: mlabonne <mlabonne@users.noreply.huggingface.co>
Co-authored-by: claude opus 4.8 (1m context) <claude opus 4.8 (1m context)@users.noreply.huggingface.co>

.dockerignore

@@ -0,0 +1,6 @@
+.git
+.gitattributes
+__pycache__/
+*.pyc
+.venv/
+*.md

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,25 @@
+# Docker Space for the Liquidspell demo: FastAPI backend + static frontend (no Gradio).
+# Pinned to the stack the model was validated against (the encoder's bidirectional-mask remote code is
+# transformers-version sensitive — see server.py).
+FROM python:3.12-slim
+
+# non-root user (HF Spaces convention; gives a writable HOME for the HF cache)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    HF_HOME=/home/user/.cache/huggingface \
+    PYTHONUNBUFFERED=1
+
+WORKDIR /home/user/app
+
+# CPU-only torch first (default PyPI wheel is CUDA and huge) — matches the validated 2.12.0.
+RUN pip install --no-cache-dir --user torch==2.12.0 --index-url https://download.pytorch.org/whl/cpu
+
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir --user -r requirements.txt
+
+COPY --chown=user . .
+
+EXPOSE 7860
+CMD ["uvicorn", "server:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,13 @@
+---
+title: English spellchecker
+emoji: ✍️
+colorFrom: purple
+colorTo: gray
+sdk: docker
+app_port: 7860
+header: mini
+pinned: false
+private: true
+short_description: Fix typos with a tiny local model on CPU
+---
+

requirements.txt

@@ -0,0 +1,9 @@
+transformers==5.1.0
+safetensors==0.7.0
+fastapi==0.115.6
+uvicorn[standard]==0.34.0
+huggingface_hub>=0.26
+# errant/spaCy intentionally NOT installed: the model's .correct() reranks by default and its edit
+# extractor uses ERRANT when importable, else a self-contained difflib aligner — verified to suppress
+# the same over-corrections as ERRANT on the demo set. Skipping the heavy errant+spaCy+model install
+# keeps the Space build fast and reliable (that install was the likely rebuild failure).

server.py

@@ -0,0 +1,152 @@
+"""FastAPI backend for the LFM2.5 Spellchecker demo (Docker Space).
+
+    uvicorn server:app --host 0.0.0.0 --port 7860
+"""
+import difflib
+import os
+import re
+
+import torch
+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from transformers import AutoModel
+
+
+def _effective_cpus():
+    """Cores actually granted to this container (cgroup quota), not the host core count.
+    os.cpu_count() returns the host's cores, so torch would oversubscribe the 2-vCPU Space."""
+    try:                                                          # cgroup v2
+        raw = open("/sys/fs/cgroup/cpu.max").read().split()
+        if raw and raw[0] != "max":
+            return max(1, round(int(raw[0]) / int(raw[1])))
+    except (OSError, ValueError):
+        pass
+    try:                                                          # cgroup v1
+        q = int(open("/sys/fs/cgroup/cpu/cpu.cfs_quota_us").read())
+        p = int(open("/sys/fs/cgroup/cpu/cpu.cfs_period_us").read())
+        if q > 0:
+            return max(1, q // p)
+    except (OSError, ValueError):
+        pass
+    try:
+        return max(1, len(os.sched_getaffinity(0)))
+    except AttributeError:
+        return os.cpu_count() or 1
+
+
+_CPUS = _effective_cpus()
+torch.set_num_threads(_CPUS)
+try:
+    torch.set_num_interop_threads(1)
+except RuntimeError:
+    pass
+
+MODEL_ID = os.environ.get("SPELLCHECKER_MODEL", "LiquidAI/LFM2.5-Encoder-350M-Spellchecker")
+MODEL_REV = os.environ.get("SPELLCHECKER_REVISION", "main")
+STATIC = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
+
+print(f"[server] loading {MODEL_ID}@{MODEL_REV} on {_CPUS} CPU thread(s) ...", flush=True)
+_model = AutoModel.from_pretrained(MODEL_ID, revision=MODEL_REV, trust_remote_code=True,
+                                   token=os.environ.get("HF_TOKEN")).float().eval()
+_mem_bytes = sum(t.numel() * t.element_size() for t in (*_model.parameters(), *_model.buffers()))
+_mem_human = (f"{_mem_bytes / 1024**3:.2f} GB" if _mem_bytes >= 1024**3
+              else f"{_mem_bytes / 1024**2:.0f} MB")
+print(f"[server] model ready ({_mem_human} in memory)", flush=True)
+
+
+# The model is trained on spaCy-tokenized text (punctuation separated by spaces AND contractions split:
+# "let's"->"let 's", "don't"->"do n't"). We tokenize natural input into that form before the model and
+# detokenize for display, so users type/read natural text while the model sees its training form. Feeding
+# JOINED contractions is out-of-distribution and made the model edit them erratically (the "let 's" /
+# "That's 's" artifacts) — splitting+rejoining contractions is the fix.
+_PUNCT = re.compile(r'([.,!?;:()\[\]{}"«»…])')
+_ATTACH_LEFT = re.compile(r'\s+([.,!?;:%)\]}»…])')
+_ATTACH_RIGHT = re.compile(r'([(\[{«])\s+')
+_NT = re.compile(r"(\w+?)(n['’]t)\b", re.I)                       # don't->do n't, can't->ca n't
+_CONTR = re.compile(r"(\w)(['’](?:s|re|ve|ll|d|m))\b", re.I)      # let's->let 's, I'm->I 'm
+_REJOIN_NT = re.compile(r"\s+(n['’]t)\b", re.I)                   # do n't->don't
+_REJOIN_CONTR = re.compile(r"\s+(['’](?:s|re|ve|ll|d|m))\b", re.I)  # let 's->let's
+_REJOIN_SPLIT_APOSTROPHE = re.compile(r"(?<=\w)\s+(['’])\s+(?=(?:s|t|d|m|re|ve|ll)\b)", re.I)
+
+
+def tokenize(text: str) -> str:
+    text = _PUNCT.sub(r" \1 ", text)
+    text = _NT.sub(r"\1 \2", text)                               # split n't (own apostrophe) first
+    text = _CONTR.sub(r"\1 \2", text)                            # then 's/'re/'ve/'ll/'d/'m
+    return re.sub(r"\s+", " ", text).strip()
+
+
+def detok(text: str) -> str:
+    text = _ATTACH_LEFT.sub(r"\1", text)
+    text = _ATTACH_RIGHT.sub(r"\1", text)
+    text = _REJOIN_NT.sub(r"\1", text)                           # do n't->don't
+    text = _REJOIN_CONTR.sub(r"\1", text)                        # let 's->let's
+    text = _REJOIN_SPLIT_APOSTROPHE.sub(r"\1", text)              # don ' t->don't
+    return re.sub(r"\s+", " ", text).strip()
+
+
+_PROBE_IN = "That's a fair point, let's discuss it tomorrow."
+try:
+    _PROBE_OUT = detok(_model.correct([tokenize(_PROBE_IN)], max_iter=3)[0])
+    _RERANK_ACTIVE = (_PROBE_OUT == _PROBE_IN)
+except Exception as e:                                           # pragma: no cover
+    _PROBE_OUT, _RERANK_ACTIVE = f"ERROR: {e}", None
+print(f"[server] self-test ok={_RERANK_ACTIVE}: {_PROBE_IN!r} -> {_PROBE_OUT!r}", flush=True)
+
+
+def diff_segments(source: str, corrected: str):
+    """Word-level diff -> [{text, kind}] segments, kind in {keep, edit, del}, for inline rendering of
+    the corrected text: `keep` unchanged, `edit` inserted/replaced (highlight green), `del` removed
+    (shown struck-through red — these words are NOT part of the corrected text)."""
+    s, c = source.split(), corrected.split()
+    seg = []
+    for op, i1, i2, j1, j2 in difflib.SequenceMatcher(None, s, c, autojunk=False).get_opcodes():
+        if op == "equal":
+            seg.append({"text": " ".join(c[j1:j2]), "kind": "keep"})
+        elif op == "insert":
+            seg.append({"text": " ".join(c[j1:j2]), "kind": "edit"})
+        elif op == "delete":
+            seg.append({"text": " ".join(s[i1:i2]), "kind": "del"})
+        elif op == "replace":                          # new words highlighted; removed words shown struck
+            seg.append({"text": " ".join(s[i1:i2]), "kind": "del"})
+            seg.append({"text": " ".join(c[j1:j2]), "kind": "edit"})
+    return seg or [{"text": corrected, "kind": "keep"}]
+
+
+class CorrectRequest(BaseModel):
+    text: str
+    min_error_prob: float = 0.0
+    max_iter: int = 3
+
+
+app = FastAPI(title="LFM2.5 Spellchecker")
+
+
+@app.get("/api/health")
+def health():
+    return {"status": "ok", "model": MODEL_ID, "revision": MODEL_REV,
+            "mem_bytes": _mem_bytes, "mem_human": _mem_human,
+            "rerank_active": _RERANK_ACTIVE, "self_test": {"in": _PROBE_IN, "out": _PROBE_OUT}}
+
+
+@app.post("/api/correct")
+@torch.no_grad()
+def correct(req: CorrectRequest):
+    text = (req.text or "").strip()
+    if not text:
+        return {"corrected": "", "segments": [], "changed": False}
+    src = tokenize(text)                                       # natural -> spaced (the model's form)
+    out = _model.correct([src], min_error_prob=float(req.min_error_prob),
+                         max_iter=int(req.max_iter))[0]
+    # diff on spaced tokens (accurate, word-level); the frontend detokenizes spacing for display.
+    return {"corrected": detok(out), "segments": diff_segments(src, out), "changed": out != src}
+
+
+@app.get("/")
+def index():
+    return FileResponse(os.path.join(STATIC, "index.html"))
+
+
+app.mount("/", StaticFiles(directory=STATIC), name="static")

static/index.html

@@ -0,0 +1,382 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>English spellchecker</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="wrap">
+  <header class="site-intro">
+    <h1>English <em>spellchecker</em></h1>
+    <p class="sub">Correct English spelling and grammar with LFM2.5.</p>
+  </header>
+
+  <section class="model-strip is-loading" id="model-strip" aria-label="Model status">
+    <span class="model-logo-frame" aria-hidden="true">
+      <img id="model-logo" class="model-logo" width="56" height="59" alt="" src="lliquid.gif">
+    </span>
+    <div class="model-copy">
+      <div class="model-name-row">
+        <a href="https://huggingface.co/LiquidAI/LFM2.5-Encoder-350M-Spellchecker" target="_blank" rel="noopener">LFM2.5 Spellchecker</a>
+        <span class="model-variant">350M parameters</span>
+      </div>
+    </div>
+    <div class="load-block">
+      <div class="load-meta">
+        <span id="status" role="status" aria-live="polite">Loading model…</span>
+        <span id="load-percent">0%</span>
+      </div>
+      <div class="load-track" role="progressbar" aria-label="Model loading" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><span id="load-progress"></span></div>
+    </div>
+  </section>
+
+  <main>
+    <section class="spell-workspace" id="spell-workspace" aria-label="Spellchecker">
+      <article class="workspace-card input-panel">
+        <div class="panel-header">
+          <h2>Input</h2>
+        </div>
+
+        <div class="editor-stage input-stage">
+          <label class="sr-only" for="input">Text to check</label>
+          <textarea id="input" spellcheck="false" placeholder="Write or paste text to check…"></textarea>
+          <div class="editor-scan" aria-hidden="true"></div>
+        </div>
+
+        <div class="input-meta"><span id="count">0 characters</span><span>Checks after 650 ms</span></div>
+
+        <details class="settings-menu">
+          <summary>Advanced settings</summary>
+          <div class="settings-reveal">
+            <div class="settings-grid" aria-label="Correction settings">
+              <label class="setting-card" for="mep">
+                <span class="setting-copy"><span>Confidence threshold</span><output id="mepv" for="mep">0.00</output></span>
+                <input type="range" id="mep" min="0" max="1" step="0.05" value="0">
+                <span class="setting-scale"><span>More corrections</span><span>More precise</span></span>
+              </label>
+              <label class="setting-card" for="mit">
+                <span class="setting-copy"><span>Correction passes</span><output id="mitv" for="mit">3</output></span>
+                <input type="range" id="mit" min="1" max="5" step="1" value="3">
+                <span class="setting-scale"><span>1 pass</span><span>5 passes</span></span>
+              </label>
+            </div>
+          </div>
+        </details>
+      </article>
+
+      <article class="workspace-card output-panel">
+        <div class="panel-header output-heading">
+          <h2>Corrected</h2>
+          <button type="button" class="copy-button" id="copy" disabled>Copy</button>
+        </div>
+
+        <div class="editor-stage output-stage" id="output-stage">
+          <div id="output" class="output-text empty" aria-live="polite" data-placeholder="Your corrected text will appear here."></div>
+          <div class="editor-scan" aria-hidden="true"></div>
+        </div>
+
+        <div class="legend" aria-label="Correction legend">
+          <span><i class="legend-swatch modified"></i>Modified</span>
+          <span><i class="legend-swatch removed"></i>Removed</span>
+        </div>
+
+        <div class="stats-grid" id="stats" aria-live="polite">
+          <div class="result-slot"><div class="activity-pill is-idle" id="activity"><span class="activity-dot" aria-hidden="true"></span><span id="activity-label">Ready</span></div></div>
+          <div class="stat-card"><span>Edits</span><strong id="stat-edits">—</strong></div>
+          <div class="stat-card"><span>Latency</span><strong id="stat-latency">—</strong></div>
+          <div class="stat-card"><span>Characters</span><strong id="stat-characters">—</strong></div>
+        </div>
+      </article>
+    </section>
+
+    <section class="examples-panel" aria-label="Examples">
+      <span class="examples-label">Examples</span>
+      <div class="example-list" id="examples"></div>
+    </section>
+  </main>
+</div>
+
+<script>
+{
+  const settingsMenu = document.querySelector(".settings-menu");
+  const settingsSummary = settingsMenu.querySelector("summary");
+  const settingsReveal = settingsMenu.querySelector(".settings-reveal");
+  settingsSummary.setAttribute("aria-expanded", "false");
+
+  settingsSummary.addEventListener("click", async (event) => {
+    event.preventDefault();
+    if (settingsMenu.dataset.animating === "true") return;
+
+    const opening = !settingsMenu.open;
+    const duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+    if (!settingsReveal.animate || duration === 0) {
+      settingsMenu.open = opening;
+      settingsSummary.setAttribute("aria-expanded", String(opening));
+      return;
+    }
+
+    settingsMenu.dataset.animating = "true";
+    if (opening) settingsMenu.open = true;
+    settingsSummary.setAttribute("aria-expanded", String(opening));
+
+    const expandedHeight = settingsReveal.scrollHeight;
+    const animation = settingsReveal.animate(
+      opening
+        ? [
+            { height: "0px", opacity: 0, transform: "translateY(-6px)" },
+            { height: `${expandedHeight}px`, opacity: 1, transform: "translateY(0)" },
+          ]
+        : [
+            { height: `${settingsReveal.getBoundingClientRect().height}px`, opacity: 1, transform: "translateY(0)" },
+            { height: "0px", opacity: 0, transform: "translateY(-6px)" },
+          ],
+      { duration, easing: "cubic-bezier(.2,.8,.2,1)" },
+    );
+
+    try { await animation.finished; } catch (_) {}
+    if (!opening) settingsMenu.open = false;
+    delete settingsMenu.dataset.animating;
+  });
+}
+</script>
+
+<script>
+const EXAMPLES = [
+  { label:"Agreement", text:"Their are many reason to study hard." },
+  { label:"Verb forms", text:"I has went to the stor yesterday." },
+  { label:"Pronouns", text:"Him and me was late for the meetting." },
+  { label:"Repetition", text:"i want to go home home." },
+  { label:"Comparison", text:"He is more taller than his brother." },
+  { label:"Articles", text:"Can you give me a advice?" },
+  { label:"Clean text", text:"That's a fair point, let's discuss it tomorrow." }
+];
+
+const $ = id => document.getElementById(id);
+// Private Space auth: HF signs the embedded iframe URL with ?__sign=<token>.
+// Incognito / Safari block the third-party .hf.space cookie, so carry that token
+// on same-origin API requests, else /api/* returns 404.
+const __sign = new URLSearchParams(location.search).get("__sign");
+const signedUrl = path => {
+  const url = new URL(path, location.href);
+  if (__sign) url.searchParams.set("__sign", __sign);
+  return url;
+};
+const input = $("input"), output = $("output"), copy = $("copy"), workspace = $("spell-workspace");
+const ATTACH_LEFT = /^[.,!?;:%)\]}»…]+$/;
+const CONTRACTION = /^(?:n['’]t|['’](?:s|re|ve|ll|d|m))$/i;
+const APOSTROPHE = /^['’]$/;
+const CONTRACTION_TAIL = /^(?:s|t|d|m|re|ve|ll)$/i;
+const OPEN = /^[(\[{«¿¡]+$/;
+const DEBOUNCE = 650;
+let timer = null, requestSequence = 0, lastCorrected = "", activeExample = null;
+
+function setModelState(kind, status, percent) {
+  const strip = $("model-strip");
+  strip.className = `model-strip is-${kind}`;
+  const value = kind === "ready" ? 100 : kind === "error" ? 100 : Math.max(0, Math.min(100, Number(percent) || 0));
+  $("status").textContent = status;
+  $("load-percent").textContent = kind === "error" ? "Error" : `${Math.round(value)}%`;
+  $("load-progress").style.width = `${value}%`;
+  strip.querySelector("[role=progressbar]").setAttribute("aria-valuenow", String(Math.round(value)));
+}
+
+function setActivity(kind, label) {
+  $("activity").className = `activity-pill is-${kind}`;
+  $("activity-label").textContent = label;
+}
+
+function setRangeFill(range) {
+  const pct = (range.value - range.min) / (range.max - range.min) * 100;
+  range.style.setProperty("--pct", `${pct}%`);
+}
+
+function updateCount() {
+  const count = input.value.length;
+  $("count").textContent = `${count} ${count === 1 ? "character" : "characters"}`;
+}
+
+function clearActiveExample() {
+  if (activeExample) activeExample.classList.remove("active");
+  activeExample = null;
+}
+
+function schedule(delay = DEBOUNCE) {
+  clearTimeout(timer);
+  timer = setTimeout(correct, delay);
+}
+
+function attachLeft(token) {
+  return ATTACH_LEFT.test(token) || CONTRACTION.test(token);
+}
+
+function needsSpace(previous, current, next) {
+  if (previous === null) return false;
+  const startsSplitContraction = APOSTROPHE.test(current) && CONTRACTION_TAIL.test(next || "");
+  const finishesSplitContraction = APOSTROPHE.test(previous) && CONTRACTION_TAIL.test(current);
+  return !attachLeft(current) && !startsSplitContraction && !finishesSplitContraction && !OPEN.test(previous);
+}
+
+function renderOutput(segments) {
+  const tokens = [];
+  for (const segment of segments) {
+    for (const token of segment.text.split(/\s+/).filter(Boolean)) tokens.push({ text:token, kind:segment.kind });
+  }
+  output.innerHTML = "";
+  output.classList.toggle("empty", tokens.length === 0);
+  let previous = null, editIndex = 0;
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    if (needsSpace(previous, token.text, tokens[index + 1]?.text)) output.append(document.createTextNode(" "));
+    let node;
+    if (token.kind === "edit") {
+      node = document.createElement("mark");
+      node.style.setProperty("--edit-index", editIndex++);
+      node.textContent = token.text;
+    } else if (token.kind === "del") {
+      node = document.createElement("span");
+      node.className = "deleted";
+      node.style.setProperty("--edit-index", editIndex++);
+      node.textContent = token.text;
+    } else {
+      node = document.createTextNode(token.text);
+    }
+    output.append(node);
+    previous = token.text;
+  }
+}
+
+function countEdits(segments) {
+  let edits = 0, inEdit = false;
+  for (const segment of segments) {
+    if (segment.kind === "keep") inEdit = false;
+    else if (!inEdit) { edits++; inEdit = true; }
+  }
+  return edits;
+}
+
+function resetResult() {
+  requestSequence++;
+  lastCorrected = "";
+  renderOutput([]);
+  copy.disabled = true;
+  setActivity("idle", "Ready");
+  workspace.classList.remove("is-checking", "is-complete");
+  $("stats").classList.remove("has-result");
+  $("stat-edits").textContent = "—";
+  $("stat-latency").textContent = "—";
+  $("stat-characters").textContent = "—";
+}
+
+async function correct() {
+  const text = input.value.replace(/\s+/g, " ").trim();
+  if (!text) { resetResult(); return; }
+  const sequence = ++requestSequence;
+  const started = performance.now();
+  workspace.classList.remove("is-complete");
+  workspace.classList.add("is-checking");
+  setActivity("running", "Checking…");
+
+  try {
+    const response = await fetch(signedUrl("/api/correct"), {
+      method:"POST",
+      headers:{ "Content-Type":"application/json" },
+      body:JSON.stringify({ text, min_error_prob:+$("mep").value, max_iter:+$("mit").value })
+    });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const data = await response.json();
+    if (sequence !== requestSequence) return;
+
+    const latency = performance.now() - started;
+    const edits = countEdits(data.segments);
+    lastCorrected = data.corrected;
+    renderOutput(data.segments);
+    copy.disabled = !lastCorrected;
+    workspace.classList.remove("is-checking");
+    void workspace.offsetWidth;
+    workspace.classList.add("is-complete");
+    setActivity("done", data.changed ? "Corrected" : "Looks good");
+
+    const stats = $("stats");
+    stats.classList.remove("has-result");
+    void stats.offsetWidth;
+    stats.classList.add("has-result");
+    $("stat-edits").textContent = String(edits);
+    $("stat-latency").textContent = `${Math.round(latency)} ms`;
+    $("stat-characters").textContent = String(text.length);
+    setTimeout(() => workspace.classList.remove("is-complete"), 1000);
+  } catch (error) {
+    if (sequence !== requestSequence) return;
+    workspace.classList.remove("is-checking");
+    setActivity("error", "Check failed");
+    console.error(error);
+  }
+}
+
+input.addEventListener("input", () => {
+  updateCount();
+  clearActiveExample();
+  schedule();
+});
+
+for (const range of [$("mep"), $("mit")]) {
+  setRangeFill(range);
+  range.addEventListener("input", event => {
+    setRangeFill(event.target);
+    $(event.target.id === "mep" ? "mepv" : "mitv").textContent = event.target.id === "mep" ? (+event.target.value).toFixed(2) : event.target.value;
+    schedule(0);
+  });
+}
+
+for (const example of EXAMPLES) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "ex";
+  button.textContent = example.label;
+  button.dataset.text = example.text;
+  button.addEventListener("click", () => {
+    clearActiveExample();
+    button.classList.add("active");
+    activeExample = button;
+    input.value = example.text;
+    updateCount();
+    input.focus();
+    schedule(0);
+  });
+  $("examples").append(button);
+}
+
+copy.addEventListener("click", async () => {
+  if (!lastCorrected) return;
+  await navigator.clipboard.writeText(lastCorrected);
+  copy.textContent = "Copied";
+  copy.classList.remove("copied");
+  void copy.offsetWidth;
+  copy.classList.add("copied");
+  clearTimeout(copy._timer);
+  copy._timer = setTimeout(() => { copy.textContent = "Copy"; copy.classList.remove("copied"); }, 1200);
+});
+
+fetch(signedUrl("/api/health"))
+  .then(response => { if (!response.ok) throw new Error(`HTTP ${response.status}`); return response.json(); })
+  .then(data => {
+    setModelState("ready", "Model ready", 100);
+    $("status").title = data.mem_human ? `${data.mem_human} in memory` : "";
+  })
+  .catch(() => setModelState("error", "Model unavailable", 100));
+
+(function init() {
+  const first = $("examples").querySelector(".ex");
+  first.classList.add("active");
+  activeExample = first;
+  input.value = first.dataset.text;
+  updateCount();
+  schedule(0);
+})();
+</script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,218 @@
+:root {
+  --paper:#fff;
+  --ink:#050505;
+  --purple:#6c4fe0;
+  --lilac:#cd82f0;
+  --green:#2dbd70;
+  --red:#e45454;
+  --neutral-50:#fafafa;
+  --neutral-100:#f4f4f3;
+  --neutral-200:#e7e7e5;
+  --neutral-300:#b9b9b5;
+  --neutral-500:#737373;
+  --neutral-700:#404040;
+  --border:rgba(0,0,0,.09);
+  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
+  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
+  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
+}
+
+* { box-sizing:border-box; }
+html { background:var(--neutral-50); }
+body {
+  min-width:320px;
+  min-height:100vh;
+  margin:0;
+  background:var(--neutral-50);
+  color:var(--ink);
+  font:16px/1.45 var(--sans);
+  -webkit-font-smoothing:antialiased;
+}
+button,textarea,input { font:inherit; }
+a { color:inherit; }
+
+.wrap {
+  display:flex;
+  flex-direction:column;
+  width:min(calc(100% - 32px),1240px);
+  min-height:100vh;
+  min-height:100dvh;
+  margin:0 auto;
+  border-right:1px solid var(--border);
+  border-left:1px solid var(--border);
+  background:var(--paper);
+}
+
+.site-intro { margin-top:auto; padding:20px 30px 16px; }
+h1 {
+  margin:0 0 7px;
+  font:400 clamp(40px,4.3vw,51px)/.98 var(--serif);
+  letter-spacing:.002em;
+}
+h1 em { color:var(--purple); font-weight:400; font-style:italic; }
+.sub { max-width:900px; margin:0; color:var(--neutral-500); font-size:15px; line-height:1.45; }
+.sub strong { color:var(--neutral-700); font-weight:600; }
+
+.model-strip {
+  display:grid;
+  grid-template-columns:48px 280px minmax(240px,1fr);
+  align-items:center;
+  column-gap:16px;
+  min-height:76px;
+  padding:12px 30px;
+  border-top:1px solid var(--border);
+  border-bottom:1px solid var(--border);
+  background:linear-gradient(90deg,rgba(108,79,224,.018),rgba(205,130,240,.035),rgba(108,79,224,.018));
+  transition:background .3s ease;
+}
+.model-logo-frame { position:relative; display:block; width:48px; height:48px; overflow:hidden; }
+.model-logo {
+  position:absolute;
+  top:50%;
+  left:50%;
+  display:block;
+  width:56px;
+  height:auto;
+  max-width:none;
+  transform:translate(-50%,-50%);
+  image-rendering:pixelated;
+}
+.model-copy { display:flex; min-width:0; align-items:center; justify-content:center; }
+.model-name-row { display:flex; min-height:25px; align-items:center; gap:10px; white-space:nowrap; }
+.model-copy a { font:400 22px/1.15 var(--serif); text-decoration:none; }
+.model-copy a:hover { color:var(--purple); }
+.model-variant { display:inline-flex; height:18px; align-items:center; box-sizing:border-box; padding:0 7px; border:1px solid rgba(108,79,224,.14); border-radius:999px; background:rgba(108,79,224,.05); color:var(--purple); font:700 9px/1 var(--mono); letter-spacing:.035em; text-transform:uppercase; }
+.load-block { min-width:0; }
+.load-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; color:var(--neutral-500); font-size:12px; font-weight:600; }
+#load-percent { font:600 11px/1 var(--mono); font-variant-numeric:tabular-nums; }
+.load-track { height:7px; overflow:hidden; border-radius:999px; background:rgba(108,79,224,.09); }
+.load-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple),var(--lilac)); transition:width .18s ease; }
+.is-ready .load-track { background:rgba(45,189,112,.09); }
+.is-ready .load-track span { background:var(--green); }
+.is-ready .load-meta { color:#188e50; }
+.is-error .load-track span { background:var(--red); }
+.is-error .load-meta { color:var(--red); }
+
+main { display:flex; min-height:0; flex:0 0 auto; flex-direction:column; margin-bottom:auto; padding:18px 30px 22px; }
+.spell-workspace { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:18px; }
+.workspace-card { position:relative; min-width:0; padding:20px; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--paper); }
+.input-panel,.output-panel { display:flex; flex-direction:column; }
+.panel-header { display:flex; min-height:31px; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
+.panel-header h2 { margin:0; color:var(--neutral-500); font:600 12px/1.25 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
+
+.activity-pill { display:flex; align-items:center; gap:8px; flex:none; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:var(--neutral-50); color:var(--neutral-500); font-size:12px; font-weight:600; white-space:nowrap; transition:all .2s ease; }
+.activity-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--neutral-300); }
+.activity-pill.is-running { border-color:rgba(108,79,224,.18); background:rgba(108,79,224,.055); color:var(--purple); }
+.activity-pill.is-running .activity-dot { background:var(--purple); box-shadow:0 0 0 5px rgba(108,79,224,.11); animation:status-pulse .8s ease-in-out infinite; }
+.activity-pill.is-done { border-color:rgba(45,189,112,.18); background:rgba(45,189,112,.055); color:#188e50; animation:done-pill .5s ease both; }
+.activity-pill.is-done .activity-dot { background:var(--green); box-shadow:0 0 0 4px rgba(45,189,112,.1); }
+.activity-pill.is-error { border-color:rgba(228,84,84,.2); background:rgba(228,84,84,.05); color:var(--red); }
+.activity-pill.is-error .activity-dot { background:var(--red); }
+
+.editor-stage { position:relative; min-height:clamp(220px,25dvh,292px); overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--paper); transition:border-color .2s,box-shadow .2s,background .2s; }
+.editor-stage:focus-within { border-color:var(--purple); box-shadow:0 0 0 3px rgba(108,79,224,.11); }
+#input,.output-text { position:relative; z-index:1; width:100%; min-height:clamp(220px,25dvh,292px); margin:0; padding:16px 17px; border:0; outline:0; background:transparent; color:var(--ink); font:400 17px/1.62 var(--sans); white-space:pre-wrap; word-break:break-word; }
+#input { display:block; resize:none; }
+#input::placeholder { color:var(--neutral-300); }
+.output-stage { background:var(--neutral-50); }
+.output-text.empty::before { content:attr(data-placeholder); color:var(--neutral-300); }
+.editor-scan { position:absolute; inset:-1px; z-index:3; opacity:0; pointer-events:none; background:linear-gradient(90deg,transparent 20%,rgba(108,79,224,.045) 40%,rgba(205,130,240,.24) 49%,rgba(255,255,255,.88) 54%,transparent 75%); transform:translateX(-110%); }
+.is-checking .editor-stage { border-color:rgba(108,79,224,.28); box-shadow:0 0 0 3px rgba(108,79,224,.055); }
+.is-checking .editor-scan { opacity:1; animation:editor-sweep 1.05s cubic-bezier(.45,0,.25,1) infinite; }
+.is-checking .output-stage { background:linear-gradient(90deg,var(--neutral-50),rgba(108,79,224,.025),var(--neutral-50)); background-size:200% 100%; animation:output-wait 1.2s ease-in-out infinite; }
+.is-complete .output-stage { animation:editor-complete .62s ease both; }
+
+.input-meta { display:flex; justify-content:space-between; gap:14px; margin:8px 2px 0; color:var(--neutral-300); font:500 10px/1.3 var(--mono); }
+.settings-menu { margin-top:auto; padding-top:12px; }
+.settings-menu > summary { display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; gap:14px; height:54px; min-height:54px; padding:0 13px; border:1px solid var(--border); border-radius:10px; background:var(--neutral-50); color:var(--neutral-500); font:600 10px/1.25 var(--mono); letter-spacing:.055em; text-transform:uppercase; cursor:pointer; list-style:none; transition:border-color .16s,background .16s,color .16s; }
+.settings-menu > summary::-webkit-details-marker { display:none; }
+.settings-menu > summary::after { content:"+"; flex:none; color:var(--purple); font:500 20px/1 var(--sans); transition:transform .2s ease; }
+.settings-menu > summary:hover { border-color:rgba(108,79,224,.28); background:rgba(108,79,224,.025); color:var(--neutral-700); }
+.settings-menu[open] > summary { border-radius:10px 10px 0 0; color:var(--neutral-700); }
+.settings-menu[open] > summary::after { transform:rotate(45deg); }
+.settings-reveal { overflow:hidden; }
+.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; border:1px solid var(--border); border-top:0; border-radius:0 0 10px 10px; background:var(--neutral-50); }
+.setting-card { display:block; min-width:0; padding:12px 13px 9px; border:1px solid var(--border); border-radius:10px; background:var(--neutral-50); }
+.setting-copy { display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:var(--neutral-500); font:600 10px/1.25 var(--mono); letter-spacing:.055em; text-transform:uppercase; }
+.setting-copy output { color:var(--purple); font:700 12px/1 var(--mono); letter-spacing:0; font-variant-numeric:tabular-nums; }
+input[type=range] { width:100%; height:24px; appearance:none; background:transparent; accent-color:var(--purple); --pct:0%; cursor:pointer; }
+input[type=range]::-webkit-slider-runnable-track { height:7px; border-radius:999px; background:linear-gradient(90deg,var(--purple) 0 var(--pct),var(--neutral-200) var(--pct) 100%); }
+input[type=range]::-webkit-slider-thumb { width:17px; height:17px; margin-top:-5px; appearance:none; border:4px solid var(--paper); border-radius:50%; background:var(--purple); box-shadow:0 1px 5px rgba(38,26,90,.32); }
+input[type=range]::-moz-range-track { height:7px; border:0; border-radius:999px; background:var(--neutral-200); }
+input[type=range]::-moz-range-progress { height:7px; border-radius:999px; background:var(--purple); }
+input[type=range]::-moz-range-thumb { width:11px; height:11px; border:3px solid var(--paper); border-radius:50%; background:var(--purple); box-shadow:0 1px 5px rgba(38,26,90,.32); }
+.setting-scale { display:flex; justify-content:space-between; color:var(--neutral-300); font-size:9px; line-height:1.2; }
+
+.copy-button { display:inline-flex; align-items:center; justify-content:center; min-width:64px; padding:7px 11px; border:1px solid var(--border); border-radius:999px; background:var(--neutral-50); color:var(--neutral-500); font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s,color .15s,background .15s,transform .15s,box-shadow .15s; }
+.copy-button:hover:not(:disabled) { border-color:rgba(108,79,224,.28); background:rgba(108,79,224,.045); color:var(--purple); transform:translateY(-1px); box-shadow:0 5px 12px rgba(54,42,105,.07); }
+.copy-button:disabled { opacity:.45; cursor:default; }
+.copy-button.copied { border-color:rgba(45,189,112,.2); background:rgba(45,189,112,.055); color:#188e50; animation:copy-pop .36s ease; }
+
+mark { position:relative; z-index:0; display:inline-block; padding:0 .045em; background:transparent; color:inherit; isolation:isolate; }
+mark::before { content:""; position:absolute; z-index:-1; top:.12em; right:-.08em; bottom:.08em; left:-.08em; border-radius:2px 5px 3px 2px; background:radial-gradient(ellipse at 18% 42%,rgba(255,255,255,.32) 0 8%,transparent 9% 100%),repeating-linear-gradient(176deg,rgba(205,130,240,.46) 0 2px,rgba(177,111,229,.38) 2px 5px,rgba(213,151,241,.48) 5px 8px); box-shadow:inset 0 1px rgba(255,255,255,.32); clip-path:polygon(0 8%,3% 2%,28% 6%,52% 1%,78% 5%,100% 0,98% 94%,72% 98%,42% 95%,17% 100%,1% 94%); mix-blend-mode:multiply; transform:scaleX(0) rotate(-.35deg); transform-origin:left center; animation:marker-stroke .62s cubic-bezier(.18,.72,.18,1) both; animation-delay:calc(var(--edit-index)*55ms); }
+mark::after { content:""; position:absolute; z-index:-1; top:18%; bottom:12%; left:-12%; width:24%; opacity:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); filter:blur(2px); transform:skewX(-12deg); animation:marker-glint .62s ease-out both; animation-delay:calc(var(--edit-index)*55ms); }
+.deleted { display:inline-block; padding:0 .08em; border-radius:4px; background:rgba(228,84,84,.075); color:#b83a3a; text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:2px; animation:deleted-in .42s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--edit-index)*55ms); }
+
+.legend { display:flex; align-items:center; justify-content:flex-end; gap:16px; min-height:31px; color:var(--neutral-500); font:500 10px/1 var(--mono); }
+.legend span { display:inline-flex; align-items:center; gap:6px; }
+.legend-swatch { width:12px; height:8px; border-radius:2px; }
+.legend-swatch.modified { background:rgba(205,130,240,.42); }
+.legend-swatch.removed { background:rgba(228,84,84,.11); border-bottom:1px solid var(--red); }
+.stats-grid { display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:8px; margin-top:auto; }
+.stat-card { min-width:0; height:54px; min-height:54px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--paper); }
+.stat-card span { display:block; margin-bottom:5px; color:var(--neutral-500); font:600 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
+.stat-card strong { display:block; overflow:hidden; color:var(--neutral-700); font:650 14px/1.25 var(--sans); text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
+.result-slot { display:flex; min-width:0; height:54px; min-height:54px; align-items:stretch; }
+.result-slot .activity-pill { width:100%; justify-content:center; border-radius:9px; }
+.stats-grid.has-result .stat-card { animation:stat-rise .42s cubic-bezier(.2,.8,.2,1) both; }
+.stats-grid.has-result .stat-card:nth-child(2) { animation-delay:35ms; }
+.stats-grid.has-result .stat-card:nth-child(3) { animation-delay:70ms; }
+.stats-grid.has-result .stat-card:nth-child(4) { animation-delay:105ms; }
+
+.examples-panel { display:flex; align-items:center; gap:15px; margin-top:16px; padding:15px 17px; overflow:hidden; border:1px solid var(--border); border-radius:11px; background:var(--neutral-50); }
+.examples-label { flex:none; color:var(--neutral-500); font:600 11px/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
+.example-list { display:flex; flex-wrap:wrap; gap:7px; min-width:0; padding-top:2px; }
+.ex { display:inline-flex; align-items:center; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--paper); color:var(--neutral-700); font-size:12px; line-height:1.15; cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s; }
+.ex:hover { border-color:rgba(108,79,224,.28); color:var(--purple); transform:translateY(-1px); box-shadow:0 5px 12px rgba(54,42,105,.08); }
+.ex.active { border-color:var(--ink); background:var(--ink); color:var(--paper); box-shadow:none; }
+.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+
+@keyframes editor-sweep { 0% { transform:translateX(-110%); } 100% { transform:translateX(110%); } }
+@keyframes output-wait { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
+@keyframes status-pulse { 50% { transform:scale(.72); opacity:.55; } }
+@keyframes done-pill { 0% { transform:scale(.95); } 55% { transform:scale(1.04); } 100% { transform:scale(1); } }
+@keyframes editor-complete { 0% { box-shadow:0 0 0 0 rgba(45,189,112,.2); } 45% { border-color:rgba(45,189,112,.42); box-shadow:0 0 0 5px rgba(45,189,112,.09); } 100% { box-shadow:none; } }
+@keyframes marker-stroke { 0% { opacity:0; transform:scaleX(0) rotate(-.35deg); } 14% { opacity:.85; } 76% { opacity:1; transform:scaleX(1.035) rotate(-.35deg); } 100% { opacity:.88; transform:scaleX(1) rotate(-.35deg); } }
+@keyframes marker-glint { 0%,18% { left:-12%; opacity:0; } 34% { opacity:.68; } 100% { left:90%; opacity:0; } }
+@keyframes deleted-in { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:translateY(0); } }
+@keyframes stat-rise { from { opacity:.35; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
+@keyframes copy-pop { 0% { transform:scale(.94); } 55% { transform:scale(1.05); } 100% { transform:scale(1); } }
+
+@media (max-width:980px) {
+  .spell-workspace { grid-template-columns:1fr; }
+  .editor-stage,#input,.output-text { min-height:210px; }
+}
+@media (max-width:720px) {
+  .wrap { width:100%; border:0; }
+  .site-intro { padding:20px; }
+  h1 { font-size:40px; }
+  .sub { font-size:14px; }
+  .model-strip { grid-template-columns:48px minmax(0,1fr); column-gap:16px; row-gap:10px; padding:12px 20px; }
+  .model-copy { min-width:0; }
+  .load-block { grid-column:1/-1; }
+  main { padding:15px 20px 20px; }
+  .examples-panel { align-items:flex-start; flex-direction:column; }
+}
+@media (max-width:520px) {
+  .workspace-card { padding:16px; }
+  .settings-grid,.stats-grid { grid-template-columns:1fr 1fr; }
+  .panel-header { align-items:flex-start; flex-direction:column; }
+  .output-heading { flex-direction:row; }
+  .input-meta { align-items:flex-start; flex-direction:column; gap:3px; }
+}
+@media (max-width:470px) {
+  .model-name-row { align-items:flex-start; flex-direction:column; gap:2px; }
+}
+@media (prefers-reduced-motion:reduce) {
+  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
+}