Rename spellchecker and normalize apostrophes

README.md

@@ -1,22 +1,22 @@
----
-title: Liquid spellchecker
-emoji: ✍️
-colorFrom: purple
-colorTo: gray
-sdk: docker
-app_port: 7860
-header: mini
-pinned: false
-private: true
----
-
-# Liquid spellchecker
-
-A focused grammar and spelling correction demo powered by [`LiquidAI/LFM2.5-Spellchecker-350M`](https://huggingface.co/LiquidAI/LFM2.5-Spellchecker-350M).
-
-The FastAPI backend loads the private model on CPU and exposes word-level corrections to the custom frontend. The interface checks text automatically, visualizes edits in context, provides confidence and iteration controls, and includes concise examples.
-
-- `server.py` — model loading, correction API, health endpoint, and static serving
-- `static/index.html` — application structure and interaction logic
-- `static/style.css` — shared LiquidAI demo design and animations
-- `Dockerfile` and `requirements.txt` — reproducible CPU runtime
+---
+title: English spellchecker
+emoji: ✍️
+colorFrom: purple
+colorTo: gray
+sdk: docker
+app_port: 7860
+header: mini
+pinned: false
+private: true
+---
+
+# English spellchecker
+
+A focused grammar and spelling correction demo powered by [`LiquidAI/LFM2.5-Spellchecker-350M`](https://huggingface.co/LiquidAI/LFM2.5-Spellchecker-350M).
+
+The FastAPI backend loads the private model on CPU and exposes word-level corrections to the custom frontend. The interface checks text automatically, visualizes edits in context, provides confidence and iteration controls, and includes concise examples.
+
+- `server.py` — model loading, correction API, health endpoint, and static serving
+- `static/index.html` — application structure and interaction logic
+- `static/style.css` — shared LiquidAI demo design and animations
+- `Dockerfile` and `requirements.txt` — reproducible CPU runtime

server.py

@@ -1,134 +1,136 @@
-"""FastAPI backend for the LFM2.5 Spellchecker demo (Docker Space).
-
-Loads the published model from the Hub (pinned to `main`, so the Space always serves the current best
-checkpoint), exposes POST /api/correct, and serves the static frontend in static/. No Gradio.
-
-The model repo is private, so HF_TOKEN (a Space secret) is needed to pull it. Pinned library versions
-(see requirements.txt) match the environment the model was validated against — the encoder's custom
-bidirectional-mask code is sensitive to the transformers version.
-
-    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
-
-MODEL_ID = os.environ.get("SPELLCHECKER_MODEL", "LiquidAI/LFM2.5-Spellchecker-350M")
-# Pin to the EXACT published commit so the container can never serve stale cached weights/remote-code
-# (the bug we hit: a rebuild kept serving old, tagger-only behaviour). Bump on each publish, or override.
-MODEL_REV = os.environ.get("SPELLCHECKER_REVISION", "65a4a90af31205d2f7ef66b6a68d7b3d276adfdd")
-STATIC = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
-
-print(f"[server] loading {MODEL_ID}@{MODEL_REV} ...", flush=True)
-# fp16 (half the memory; the published weights are fp16). Casting the whole model uniformly avoids the
-# mixed-dtype error — torch 2.12 runs fp16 matmul on CPU fine.
-_model = AutoModel.from_pretrained(MODEL_ID, revision=MODEL_REV, trust_remote_code=True,
-                                   token=os.environ.get("HF_TOKEN")).half().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
+"""FastAPI backend for the LFM2.5 Spellchecker demo (Docker Space).
+
+Loads the published model from the Hub (pinned to `main`, so the Space always serves the current best
+checkpoint), exposes POST /api/correct, and serves the static frontend in static/. No Gradio.
+
+The model repo is private, so HF_TOKEN (a Space secret) is needed to pull it. Pinned library versions
+(see requirements.txt) match the environment the model was validated against — the encoder's custom
+bidirectional-mask code is sensitive to the transformers version.
+
+    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
+
+MODEL_ID = os.environ.get("SPELLCHECKER_MODEL", "LiquidAI/LFM2.5-Spellchecker-350M")
+# Pin to the EXACT published commit so the container can never serve stale cached weights/remote-code
+# (the bug we hit: a rebuild kept serving old, tagger-only behaviour). Bump on each publish, or override.
+MODEL_REV = os.environ.get("SPELLCHECKER_REVISION", "65a4a90af31205d2f7ef66b6a68d7b3d276adfdd")
+STATIC = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
+
+print(f"[server] loading {MODEL_ID}@{MODEL_REV} ...", flush=True)
+# fp16 (half the memory; the published weights are fp16). Casting the whole model uniformly avoids the
+# mixed-dtype error — torch 2.12 runs fp16 matmul on CPU fine.
+_model = AutoModel.from_pretrained(MODEL_ID, revision=MODEL_REV, trust_remote_code=True,
+                                   token=os.environ.get("HF_TOKEN")).half().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
-
-
-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()
-
-
+_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()
-
-
-# Startup self-test over the REAL user path (tokenize -> correct -> detok), logged + exposed at
-# /api/health: a correctly-deployed full system leaves this clean sentence UNCHANGED. If it changes,
-# the deploy is wrong (stale model, reranker inactive, or contraction handling broken) — no guessing.
-_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")
+
+
+# Startup self-test over the REAL user path (tokenize -> correct -> detok), logged + exposed at
+# /api/health: a correctly-deployed full system leaves this clean sentence UNCHANGED. If it changes,
+# the deploy is wrong (stale model, reranker inactive, or contraction handling broken) — no guessing.
+_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

@@ -1,324 +1,334 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Liquid 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">
-<script>
-  (() => {
-    const sign = new URLSearchParams(location.search).get("__sign");
-    const suffix = sign ? `?__sign=${encodeURIComponent(sign)}` : "";
-    document.write(`<link rel="stylesheet" href="./style.css${suffix}">`);
-  })();
-</script>
-</head>
-<body>
-<div class="wrap">
-  <header class="site-intro">
-    <h1>Liquid <em>spellchecker</em></h1>
-    <p class="sub">Correct English spelling and grammar privately with LFM2.5.</p>
-  </header>
-
-  <section class="model-strip is-loading" id="model-strip" aria-label="Model status">
-    <div class="model-mark" aria-hidden="true"><span></span></div>
-    <div class="model-copy">
-      <span class="model-kicker">Model</span>
-      <div class="model-name-row">
-        <a href="https://huggingface.co/LiquidAI/LFM2.5-Spellchecker-350M" 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="model-status">Connecting to model…</span><span id="model-ready">Checking</span></div>
-      <div class="load-track" role="progressbar" aria-label="Model status" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25"><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-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>
-        </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">Try an example</span>
-      <div class="example-list" id="examples"></div>
-    </section>
-  </main>
-</div>
-
-<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:"Me and him was late for the meetting." },
-  { label:"Repetition", text:"i want to to go 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);
-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");
+<!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">
+<script>
+  (() => {
+    const sign = new URLSearchParams(location.search).get("__sign");
+    const suffix = sign ? `?__sign=${encodeURIComponent(sign)}` : "";
+    document.write(`<link rel="stylesheet" href="./style.css${suffix}">`);
+  })();
+</script>
+</head>
+<body>
+<div class="wrap">
+  <header class="site-intro">
+    <h1>English <em>spellchecker</em></h1>
+    <p class="sub">Correct English spelling and grammar privately with LFM2.5.</p>
+  </header>
+
+  <section class="model-strip is-loading" id="model-strip" aria-label="Model status">
+    <div class="model-mark" aria-hidden="true"><span></span></div>
+    <div class="model-copy">
+      <span class="model-kicker">Model</span>
+      <div class="model-name-row">
+        <a href="https://huggingface.co/LiquidAI/LFM2.5-Spellchecker-350M" 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="model-status">Connecting to model…</span><span id="model-ready">Checking</span></div>
+      <div class="load-track" role="progressbar" aria-label="Model status" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25"><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-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>
+        </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">Try an example</span>
+      <div class="example-list" id="examples"></div>
+    </section>
+  </main>
+</div>
+
+<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:"Me and him was late for the meetting." },
+  { label:"Repetition", text:"i want to to go 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);
+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, meta) {
-  const strip = $("model-strip");
-  strip.className = `model-strip is-${kind}`;
-  $("model-status").textContent = status;
-  $("model-ready").textContent = meta;
-  $("load-progress").style.width = kind === "ready" ? "100%" : kind === "error" ? "100%" : "34%";
-  strip.querySelector("[role=progressbar]").setAttribute("aria-valuenow", kind === "ready" ? "100" : kind === "error" ? "100" : "34");
-}
-
-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);
-}
-
+const DEBOUNCE = 650;
+let timer = null, requestSequence = 0, lastCorrected = "", activeExample = null;
+
+function setModelState(kind, status, meta) {
+  const strip = $("model-strip");
+  strip.className = `model-strip is-${kind}`;
+  $("model-status").textContent = status;
+  $("model-ready").textContent = meta;
+  $("load-progress").style.width = kind === "ready" ? "100%" : kind === "error" ? "100%" : "34%";
+  strip.querySelector("[role=progressbar]").setAttribute("aria-valuenow", kind === "ready" ? "100" : kind === "error" ? "100" : "34");
+}
+
+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 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 });
-  }
+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 (const token of tokens) {
-    if (previous !== null && !attachLeft(token.text) && !OPEN.test(previous)) 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", "Running on CPU", "Ready");
-    $("model-ready").title = data.mem_human ? `${data.mem_human} in memory` : "";
-  })
-  .catch(() => setModelState("error", "Model unavailable", "Error"));
-
-(function init() {
-  const first = $("examples").querySelector(".ex");
-  first.classList.add("active");
-  activeExample = first;
-  input.value = first.dataset.text;
-  updateCount();
-  schedule(0);
-})();
-</script>
-</body>
-</html>
+  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", "Running on CPU", "Ready");
+    $("model-ready").title = data.mem_human ? `${data.mem_human} in memory` : "";
+  })
+  .catch(() => setModelState("error", "Model unavailable", "Error"));
+
+(function init() {
+  const first = $("examples").querySelector(".ex");
+  first.classList.add("active");
+  activeExample = first;
+  input.value = first.dataset.text;
+  updateCount();
+  schedule(0);
+})();
+</script>
+</body>
+</html>