Spaces:
Running
Running
Update examples
#1
by iamleonie - opened
- .dockerignore +0 -6
- README.md +21 -12
- server.py +28 -44
- static/index.html +388 -382
.dockerignore
DELETED
|
@@ -1,6 +0,0 @@
|
|
| 1 |
-
.git
|
| 2 |
-
.gitattributes
|
| 3 |
-
__pycache__/
|
| 4 |
-
*.pyc
|
| 5 |
-
.venv/
|
| 6 |
-
*.md
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
README.md
CHANGED
|
@@ -1,13 +1,22 @@
|
|
| 1 |
-
---
|
| 2 |
title: English spellchecker
|
| 3 |
-
emoji: ✍️
|
| 4 |
-
colorFrom: purple
|
| 5 |
-
colorTo: gray
|
| 6 |
-
sdk: docker
|
| 7 |
-
app_port: 7860
|
| 8 |
-
header: mini
|
| 9 |
-
pinned: false
|
| 10 |
-
private: true
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
---
|
| 2 |
title: English spellchecker
|
| 3 |
+
emoji: ✍️
|
| 4 |
+
colorFrom: purple
|
| 5 |
+
colorTo: gray
|
| 6 |
+
sdk: docker
|
| 7 |
+
app_port: 7860
|
| 8 |
+
header: mini
|
| 9 |
+
pinned: false
|
| 10 |
+
private: true
|
| 11 |
+
---
|
| 12 |
+
|
| 13 |
+
# English spellchecker
|
| 14 |
+
|
| 15 |
+
A focused grammar and spelling correction demo powered by [`LiquidAI/LFM2.5-Spellchecker-350M`](https://huggingface.co/LiquidAI/LFM2.5-Spellchecker-350M).
|
| 16 |
+
|
| 17 |
+
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.
|
| 18 |
+
|
| 19 |
+
- `server.py` — model loading, correction API, health endpoint, and static serving
|
| 20 |
+
- `static/index.html` — application structure and interaction logic
|
| 21 |
+
- `static/style.css` — shared LiquidAI demo design and animations
|
| 22 |
+
- `Dockerfile` and `requirements.txt` — reproducible CPU runtime
|
server.py
CHANGED
|
@@ -1,5 +1,12 @@
|
|
| 1 |
"""FastAPI backend for the LFM2.5 Spellchecker demo (Docker Space).
|
| 2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 3 |
uvicorn server:app --host 0.0.0.0 --port 7860
|
| 4 |
"""
|
| 5 |
import difflib
|
|
@@ -13,43 +20,17 @@ from fastapi.staticfiles import StaticFiles
|
|
| 13 |
from pydantic import BaseModel
|
| 14 |
from transformers import AutoModel
|
| 15 |
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
try: # cgroup v2
|
| 21 |
-
raw = open("/sys/fs/cgroup/cpu.max").read().split()
|
| 22 |
-
if raw and raw[0] != "max":
|
| 23 |
-
return max(1, round(int(raw[0]) / int(raw[1])))
|
| 24 |
-
except (OSError, ValueError):
|
| 25 |
-
pass
|
| 26 |
-
try: # cgroup v1
|
| 27 |
-
q = int(open("/sys/fs/cgroup/cpu/cpu.cfs_quota_us").read())
|
| 28 |
-
p = int(open("/sys/fs/cgroup/cpu/cpu.cfs_period_us").read())
|
| 29 |
-
if q > 0:
|
| 30 |
-
return max(1, q // p)
|
| 31 |
-
except (OSError, ValueError):
|
| 32 |
-
pass
|
| 33 |
-
try:
|
| 34 |
-
return max(1, len(os.sched_getaffinity(0)))
|
| 35 |
-
except AttributeError:
|
| 36 |
-
return os.cpu_count() or 1
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
_CPUS = _effective_cpus()
|
| 40 |
-
torch.set_num_threads(_CPUS)
|
| 41 |
-
try:
|
| 42 |
-
torch.set_num_interop_threads(1)
|
| 43 |
-
except RuntimeError:
|
| 44 |
-
pass
|
| 45 |
-
|
| 46 |
-
MODEL_ID = os.environ.get("SPELLCHECKER_MODEL", "LiquidAI/LFM2.5-Encoder-350M-Spellchecker")
|
| 47 |
-
MODEL_REV = os.environ.get("SPELLCHECKER_REVISION", "main")
|
| 48 |
STATIC = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
|
| 49 |
|
| 50 |
-
print(f"[server] loading {MODEL_ID}@{MODEL_REV}
|
|
|
|
|
|
|
| 51 |
_model = AutoModel.from_pretrained(MODEL_ID, revision=MODEL_REV, trust_remote_code=True,
|
| 52 |
-
token=os.environ.get("HF_TOKEN")).
|
| 53 |
_mem_bytes = sum(t.numel() * t.element_size() for t in (*_model.parameters(), *_model.buffers()))
|
| 54 |
_mem_human = (f"{_mem_bytes / 1024**3:.2f} GB" if _mem_bytes >= 1024**3
|
| 55 |
else f"{_mem_bytes / 1024**2:.0f} MB")
|
|
@@ -66,9 +47,9 @@ _ATTACH_LEFT = re.compile(r'\s+([.,!?;:%)\]}»…])')
|
|
| 66 |
_ATTACH_RIGHT = re.compile(r'([(\[{«])\s+')
|
| 67 |
_NT = re.compile(r"(\w+?)(n['’]t)\b", re.I) # don't->do n't, can't->ca n't
|
| 68 |
_CONTR = re.compile(r"(\w)(['’](?:s|re|ve|ll|d|m))\b", re.I) # let's->let 's, I'm->I 'm
|
| 69 |
-
_REJOIN_NT = re.compile(r"\s+(n['’]t)\b", re.I) # do n't->don't
|
| 70 |
-
_REJOIN_CONTR = re.compile(r"\s+(['’](?:s|re|ve|ll|d|m))\b", re.I) # let 's->let's
|
| 71 |
-
_REJOIN_SPLIT_APOSTROPHE = re.compile(r"(?<=\w)\s+(['’])\s+(?=(?:s|t|d|m|re|ve|ll)\b)", re.I)
|
| 72 |
|
| 73 |
|
| 74 |
def tokenize(text: str) -> str:
|
|
@@ -78,15 +59,18 @@ def tokenize(text: str) -> str:
|
|
| 78 |
return re.sub(r"\s+", " ", text).strip()
|
| 79 |
|
| 80 |
|
| 81 |
-
def detok(text: str) -> str:
|
| 82 |
-
text = _ATTACH_LEFT.sub(r"\1", text)
|
| 83 |
-
text = _ATTACH_RIGHT.sub(r"\1", text)
|
| 84 |
-
text = _REJOIN_NT.sub(r"\1", text) # do n't->don't
|
| 85 |
-
text = _REJOIN_CONTR.sub(r"\1", text) # let 's->let's
|
| 86 |
-
text = _REJOIN_SPLIT_APOSTROPHE.sub(r"\1", text) # don ' t->don't
|
| 87 |
-
return re.sub(r"\s+", " ", text).strip()
|
| 88 |
|
| 89 |
|
|
|
|
|
|
|
|
|
|
| 90 |
_PROBE_IN = "That's a fair point, let's discuss it tomorrow."
|
| 91 |
try:
|
| 92 |
_PROBE_OUT = detok(_model.correct([tokenize(_PROBE_IN)], max_iter=3)[0])
|
|
|
|
| 1 |
"""FastAPI backend for the LFM2.5 Spellchecker demo (Docker Space).
|
| 2 |
|
| 3 |
+
Loads the published model from the Hub (pinned to `main`, so the Space always serves the current best
|
| 4 |
+
checkpoint), exposes POST /api/correct, and serves the static frontend in static/. No Gradio.
|
| 5 |
+
|
| 6 |
+
The model repo is private, so HF_TOKEN (a Space secret) is needed to pull it. Pinned library versions
|
| 7 |
+
(see requirements.txt) match the environment the model was validated against — the encoder's custom
|
| 8 |
+
bidirectional-mask code is sensitive to the transformers version.
|
| 9 |
+
|
| 10 |
uvicorn server:app --host 0.0.0.0 --port 7860
|
| 11 |
"""
|
| 12 |
import difflib
|
|
|
|
| 20 |
from pydantic import BaseModel
|
| 21 |
from transformers import AutoModel
|
| 22 |
|
| 23 |
+
MODEL_ID = os.environ.get("SPELLCHECKER_MODEL", "LiquidAI/LFM2.5-Spellchecker-350M")
|
| 24 |
+
# Pin to the EXACT published commit so the container can never serve stale cached weights/remote-code
|
| 25 |
+
# (the bug we hit: a rebuild kept serving old, tagger-only behaviour). Bump on each publish, or override.
|
| 26 |
+
MODEL_REV = os.environ.get("SPELLCHECKER_REVISION", "65a4a90af31205d2f7ef66b6a68d7b3d276adfdd")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
STATIC = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
|
| 28 |
|
| 29 |
+
print(f"[server] loading {MODEL_ID}@{MODEL_REV} ...", flush=True)
|
| 30 |
+
# fp16 (half the memory; the published weights are fp16). Casting the whole model uniformly avoids the
|
| 31 |
+
# mixed-dtype error — torch 2.12 runs fp16 matmul on CPU fine.
|
| 32 |
_model = AutoModel.from_pretrained(MODEL_ID, revision=MODEL_REV, trust_remote_code=True,
|
| 33 |
+
token=os.environ.get("HF_TOKEN")).half().eval()
|
| 34 |
_mem_bytes = sum(t.numel() * t.element_size() for t in (*_model.parameters(), *_model.buffers()))
|
| 35 |
_mem_human = (f"{_mem_bytes / 1024**3:.2f} GB" if _mem_bytes >= 1024**3
|
| 36 |
else f"{_mem_bytes / 1024**2:.0f} MB")
|
|
|
|
| 47 |
_ATTACH_RIGHT = re.compile(r'([(\[{«])\s+')
|
| 48 |
_NT = re.compile(r"(\w+?)(n['’]t)\b", re.I) # don't->do n't, can't->ca n't
|
| 49 |
_CONTR = re.compile(r"(\w)(['’](?:s|re|ve|ll|d|m))\b", re.I) # let's->let 's, I'm->I 'm
|
| 50 |
+
_REJOIN_NT = re.compile(r"\s+(n['’]t)\b", re.I) # do n't->don't
|
| 51 |
+
_REJOIN_CONTR = re.compile(r"\s+(['’](?:s|re|ve|ll|d|m))\b", re.I) # let 's->let's
|
| 52 |
+
_REJOIN_SPLIT_APOSTROPHE = re.compile(r"(?<=\w)\s+(['’])\s+(?=(?:s|t|d|m|re|ve|ll)\b)", re.I)
|
| 53 |
|
| 54 |
|
| 55 |
def tokenize(text: str) -> str:
|
|
|
|
| 59 |
return re.sub(r"\s+", " ", text).strip()
|
| 60 |
|
| 61 |
|
| 62 |
+
def detok(text: str) -> str:
|
| 63 |
+
text = _ATTACH_LEFT.sub(r"\1", text)
|
| 64 |
+
text = _ATTACH_RIGHT.sub(r"\1", text)
|
| 65 |
+
text = _REJOIN_NT.sub(r"\1", text) # do n't->don't
|
| 66 |
+
text = _REJOIN_CONTR.sub(r"\1", text) # let 's->let's
|
| 67 |
+
text = _REJOIN_SPLIT_APOSTROPHE.sub(r"\1", text) # don ' t->don't
|
| 68 |
+
return re.sub(r"\s+", " ", text).strip()
|
| 69 |
|
| 70 |
|
| 71 |
+
# Startup self-test over the REAL user path (tokenize -> correct -> detok), logged + exposed at
|
| 72 |
+
# /api/health: a correctly-deployed full system leaves this clean sentence UNCHANGED. If it changes,
|
| 73 |
+
# the deploy is wrong (stale model, reranker inactive, or contraction handling broken) — no guessing.
|
| 74 |
_PROBE_IN = "That's a fair point, let's discuss it tomorrow."
|
| 75 |
try:
|
| 76 |
_PROBE_OUT = detok(_model.correct([tokenize(_PROBE_IN)], max_iter=3)[0])
|
static/index.html
CHANGED
|
@@ -1,382 +1,388 @@
|
|
| 1 |
-
<!doctype html>
|
| 2 |
-
<html lang="en">
|
| 3 |
-
<head>
|
| 4 |
-
<meta charset="utf-8">
|
| 5 |
-
<meta name="viewport" content="width=device-width,initial-scale=1">
|
| 6 |
-
<title>English spellchecker</title>
|
| 7 |
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 8 |
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 9 |
-
<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">
|
| 10 |
-
<
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
<
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
</
|
| 23 |
-
<
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
<
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
<
|
| 33 |
-
|
| 34 |
-
<
|
| 35 |
-
</div>
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
<
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
<
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
<
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
<
|
| 79 |
-
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
|
| 83 |
-
|
| 84 |
-
<
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
<div class="
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
|
| 102 |
-
</div>
|
| 103 |
-
|
| 104 |
-
<
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
|
| 108 |
-
|
| 109 |
-
|
| 110 |
-
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
|
| 121 |
-
|
| 122 |
-
|
| 123 |
-
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
|
| 132 |
-
|
| 133 |
-
|
| 134 |
-
|
| 135 |
-
|
| 136 |
-
|
| 137 |
-
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
}
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
|
| 155 |
-
|
| 156 |
-
|
| 157 |
-
|
| 158 |
-
|
| 159 |
-
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
|
| 169 |
-
const
|
| 170 |
-
const
|
| 171 |
-
const
|
| 172 |
-
|
| 173 |
-
|
| 174 |
-
|
| 175 |
-
const
|
| 176 |
-
|
| 177 |
-
|
| 178 |
-
|
| 179 |
-
|
| 180 |
-
|
| 181 |
-
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
strip
|
| 186 |
-
}
|
| 187 |
-
|
| 188 |
-
|
| 189 |
-
$("
|
| 190 |
-
$("
|
| 191 |
-
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
|
| 195 |
-
|
| 196 |
-
|
| 197 |
-
|
| 198 |
-
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
}
|
| 202 |
-
|
| 203 |
-
|
| 204 |
-
|
| 205 |
-
|
| 206 |
-
}
|
| 207 |
-
|
| 208 |
-
|
| 209 |
-
|
| 210 |
-
|
| 211 |
-
|
| 212 |
-
|
| 213 |
-
|
| 214 |
-
|
| 215 |
-
|
| 216 |
-
|
| 217 |
-
|
| 218 |
-
|
| 219 |
-
|
| 220 |
-
|
| 221 |
-
|
| 222 |
-
|
| 223 |
-
|
| 224 |
-
|
| 225 |
-
const
|
| 226 |
-
|
| 227 |
-
|
| 228 |
-
|
| 229 |
-
|
| 230 |
-
|
| 231 |
-
|
| 232 |
-
for (
|
| 233 |
-
const token
|
| 234 |
-
|
| 235 |
-
|
| 236 |
-
|
| 237 |
-
|
| 238 |
-
|
| 239 |
-
|
| 240 |
-
|
| 241 |
-
|
| 242 |
-
|
| 243 |
-
node.
|
| 244 |
-
node.
|
| 245 |
-
|
| 246 |
-
|
| 247 |
-
|
| 248 |
-
|
| 249 |
-
|
| 250 |
-
|
| 251 |
-
}
|
| 252 |
-
|
| 253 |
-
|
| 254 |
-
|
| 255 |
-
|
| 256 |
-
|
| 257 |
-
|
| 258 |
-
|
| 259 |
-
|
| 260 |
-
|
| 261 |
-
|
| 262 |
-
|
| 263 |
-
|
| 264 |
-
|
| 265 |
-
|
| 266 |
-
|
| 267 |
-
|
| 268 |
-
|
| 269 |
-
|
| 270 |
-
|
| 271 |
-
|
| 272 |
-
|
| 273 |
-
|
| 274 |
-
|
| 275 |
-
|
| 276 |
-
|
| 277 |
-
|
| 278 |
-
|
| 279 |
-
|
| 280 |
-
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
|
| 286 |
-
|
| 287 |
-
|
| 288 |
-
|
| 289 |
-
|
| 290 |
-
|
| 291 |
-
const
|
| 292 |
-
|
| 293 |
-
|
| 294 |
-
|
| 295 |
-
|
| 296 |
-
|
| 297 |
-
|
| 298 |
-
|
| 299 |
-
|
| 300 |
-
|
| 301 |
-
|
| 302 |
-
|
| 303 |
-
|
| 304 |
-
|
| 305 |
-
|
| 306 |
-
void
|
| 307 |
-
|
| 308 |
-
|
| 309 |
-
|
| 310 |
-
$("
|
| 311 |
-
|
| 312 |
-
|
| 313 |
-
|
| 314 |
-
|
| 315 |
-
|
| 316 |
-
|
| 317 |
-
|
| 318 |
-
}
|
| 319 |
-
|
| 320 |
-
|
| 321 |
-
|
| 322 |
-
|
| 323 |
-
|
| 324 |
-
}
|
| 325 |
-
|
| 326 |
-
|
| 327 |
-
|
| 328 |
-
|
| 329 |
-
|
| 330 |
-
|
| 331 |
-
|
| 332 |
-
|
| 333 |
-
|
| 334 |
-
|
| 335 |
-
|
| 336 |
-
|
| 337 |
-
|
| 338 |
-
|
| 339 |
-
|
| 340 |
-
|
| 341 |
-
|
| 342 |
-
|
| 343 |
-
|
| 344 |
-
|
| 345 |
-
|
| 346 |
-
|
| 347 |
-
|
| 348 |
-
|
| 349 |
-
|
| 350 |
-
|
| 351 |
-
|
| 352 |
-
|
| 353 |
-
|
| 354 |
-
|
| 355 |
-
|
| 356 |
-
|
| 357 |
-
|
| 358 |
-
|
| 359 |
-
|
| 360 |
-
|
| 361 |
-
|
| 362 |
-
|
| 363 |
-
|
| 364 |
-
|
| 365 |
-
.
|
| 366 |
-
|
| 367 |
-
|
| 368 |
-
|
| 369 |
-
|
| 370 |
-
|
| 371 |
-
|
| 372 |
-
(
|
| 373 |
-
|
| 374 |
-
|
| 375 |
-
|
| 376 |
-
|
| 377 |
-
|
| 378 |
-
|
| 379 |
-
|
| 380 |
-
|
| 381 |
-
|
| 382 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!doctype html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="utf-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
| 6 |
+
<title>English spellchecker</title>
|
| 7 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 8 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 9 |
+
<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">
|
| 10 |
+
<script>
|
| 11 |
+
(() => {
|
| 12 |
+
const sign = new URLSearchParams(location.search).get("__sign");
|
| 13 |
+
const suffix = sign ? `?__sign=${encodeURIComponent(sign)}` : "";
|
| 14 |
+
window.__STATIC_ASSET_SUFFIX = suffix;
|
| 15 |
+
document.write(`<link rel="stylesheet" href="./style.css${suffix}">`);
|
| 16 |
+
})();
|
| 17 |
+
</script>
|
| 18 |
+
</head>
|
| 19 |
+
<body>
|
| 20 |
+
<div class="wrap">
|
| 21 |
+
<header class="site-intro">
|
| 22 |
+
<h1>English <em>spellchecker</em></h1>
|
| 23 |
+
<p class="sub">Correct English spelling and grammar privately with LFM2.5.</p>
|
| 24 |
+
</header>
|
| 25 |
+
|
| 26 |
+
<section class="model-strip is-loading" id="model-strip" aria-label="Model status">
|
| 27 |
+
<span class="model-logo-frame" aria-hidden="true">
|
| 28 |
+
<img id="model-logo" class="model-logo" width="56" height="59" alt="">
|
| 29 |
+
</span>
|
| 30 |
+
<div class="model-copy">
|
| 31 |
+
<div class="model-name-row">
|
| 32 |
+
<a href="https://huggingface.co/LiquidAI/LFM2.5-Spellchecker-350M" target="_blank" rel="noopener">LFM2.5 Spellchecker</a>
|
| 33 |
+
<span class="model-variant">350M parameters</span>
|
| 34 |
+
</div>
|
| 35 |
+
</div>
|
| 36 |
+
<div class="load-block">
|
| 37 |
+
<div class="load-meta">
|
| 38 |
+
<span id="status" role="status" aria-live="polite">Loading model…</span>
|
| 39 |
+
<span id="load-percent">0%</span>
|
| 40 |
+
</div>
|
| 41 |
+
<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>
|
| 42 |
+
</div>
|
| 43 |
+
<span id="gpu" hidden></span>
|
| 44 |
+
</section>
|
| 45 |
+
<script>document.getElementById("model-logo").src = `./lliquid.gif${window.__STATIC_ASSET_SUFFIX || ""}`;</script>
|
| 46 |
+
|
| 47 |
+
<main>
|
| 48 |
+
<section class="spell-workspace" id="spell-workspace" aria-label="Spellchecker">
|
| 49 |
+
<article class="workspace-card input-panel">
|
| 50 |
+
<div class="panel-header">
|
| 51 |
+
<h2>Input</h2>
|
| 52 |
+
</div>
|
| 53 |
+
|
| 54 |
+
<div class="editor-stage input-stage">
|
| 55 |
+
<label class="sr-only" for="input">Text to check</label>
|
| 56 |
+
<textarea id="input" spellcheck="false" placeholder="Write or paste text to check…"></textarea>
|
| 57 |
+
<div class="editor-scan" aria-hidden="true"></div>
|
| 58 |
+
</div>
|
| 59 |
+
|
| 60 |
+
<div class="input-meta"><span id="count">0 characters</span><span>Checks after 650 ms</span></div>
|
| 61 |
+
|
| 62 |
+
<details class="settings-menu">
|
| 63 |
+
<summary>Advanced settings</summary>
|
| 64 |
+
<div class="settings-reveal">
|
| 65 |
+
<div class="settings-grid" aria-label="Correction settings">
|
| 66 |
+
<label class="setting-card" for="mep">
|
| 67 |
+
<span class="setting-copy"><span>Confidence threshold</span><output id="mepv" for="mep">0.00</output></span>
|
| 68 |
+
<input type="range" id="mep" min="0" max="1" step="0.05" value="0">
|
| 69 |
+
<span class="setting-scale"><span>More corrections</span><span>More precise</span></span>
|
| 70 |
+
</label>
|
| 71 |
+
<label class="setting-card" for="mit">
|
| 72 |
+
<span class="setting-copy"><span>Correction passes</span><output id="mitv" for="mit">3</output></span>
|
| 73 |
+
<input type="range" id="mit" min="1" max="5" step="1" value="3">
|
| 74 |
+
<span class="setting-scale"><span>1 pass</span><span>5 passes</span></span>
|
| 75 |
+
</label>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
</details>
|
| 79 |
+
</article>
|
| 80 |
+
|
| 81 |
+
<article class="workspace-card output-panel">
|
| 82 |
+
<div class="panel-header output-heading">
|
| 83 |
+
<h2>Corrected</h2>
|
| 84 |
+
<button type="button" class="copy-button" id="copy" disabled>Copy</button>
|
| 85 |
+
</div>
|
| 86 |
+
|
| 87 |
+
<div class="editor-stage output-stage" id="output-stage">
|
| 88 |
+
<div id="output" class="output-text empty" aria-live="polite" data-placeholder="Your corrected text will appear here."></div>
|
| 89 |
+
<div class="editor-scan" aria-hidden="true"></div>
|
| 90 |
+
</div>
|
| 91 |
+
|
| 92 |
+
<div class="legend" aria-label="Correction legend">
|
| 93 |
+
<span><i class="legend-swatch modified"></i>Modified</span>
|
| 94 |
+
<span><i class="legend-swatch removed"></i>Removed</span>
|
| 95 |
+
</div>
|
| 96 |
+
|
| 97 |
+
<div class="stats-grid" id="stats" aria-live="polite">
|
| 98 |
+
<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>
|
| 99 |
+
<div class="stat-card"><span>Edits</span><strong id="stat-edits">—</strong></div>
|
| 100 |
+
<div class="stat-card"><span>Latency</span><strong id="stat-latency">—</strong></div>
|
| 101 |
+
<div class="stat-card"><span>Characters</span><strong id="stat-characters">—</strong></div>
|
| 102 |
+
</div>
|
| 103 |
+
</article>
|
| 104 |
+
</section>
|
| 105 |
+
|
| 106 |
+
<section class="examples-panel" aria-label="Examples">
|
| 107 |
+
<span class="examples-label">Examples</span>
|
| 108 |
+
<div class="example-list" id="examples"></div>
|
| 109 |
+
</section>
|
| 110 |
+
</main>
|
| 111 |
+
</div>
|
| 112 |
+
|
| 113 |
+
<script>
|
| 114 |
+
{
|
| 115 |
+
const settingsMenu = document.querySelector(".settings-menu");
|
| 116 |
+
const settingsSummary = settingsMenu.querySelector("summary");
|
| 117 |
+
const settingsReveal = settingsMenu.querySelector(".settings-reveal");
|
| 118 |
+
settingsSummary.setAttribute("aria-expanded", "false");
|
| 119 |
+
|
| 120 |
+
settingsSummary.addEventListener("click", async (event) => {
|
| 121 |
+
event.preventDefault();
|
| 122 |
+
if (settingsMenu.dataset.animating === "true") return;
|
| 123 |
+
|
| 124 |
+
const opening = !settingsMenu.open;
|
| 125 |
+
const duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
|
| 126 |
+
if (!settingsReveal.animate || duration === 0) {
|
| 127 |
+
settingsMenu.open = opening;
|
| 128 |
+
settingsSummary.setAttribute("aria-expanded", String(opening));
|
| 129 |
+
return;
|
| 130 |
+
}
|
| 131 |
+
|
| 132 |
+
settingsMenu.dataset.animating = "true";
|
| 133 |
+
if (opening) settingsMenu.open = true;
|
| 134 |
+
settingsSummary.setAttribute("aria-expanded", String(opening));
|
| 135 |
+
|
| 136 |
+
const expandedHeight = settingsReveal.scrollHeight;
|
| 137 |
+
const animation = settingsReveal.animate(
|
| 138 |
+
opening
|
| 139 |
+
? [
|
| 140 |
+
{ height: "0px", opacity: 0, transform: "translateY(-6px)" },
|
| 141 |
+
{ height: `${expandedHeight}px`, opacity: 1, transform: "translateY(0)" },
|
| 142 |
+
]
|
| 143 |
+
: [
|
| 144 |
+
{ height: `${settingsReveal.getBoundingClientRect().height}px`, opacity: 1, transform: "translateY(0)" },
|
| 145 |
+
{ height: "0px", opacity: 0, transform: "translateY(-6px)" },
|
| 146 |
+
],
|
| 147 |
+
{ duration, easing: "cubic-bezier(.2,.8,.2,1)" },
|
| 148 |
+
);
|
| 149 |
+
|
| 150 |
+
try { await animation.finished; } catch (_) {}
|
| 151 |
+
if (!opening) settingsMenu.open = false;
|
| 152 |
+
delete settingsMenu.dataset.animating;
|
| 153 |
+
});
|
| 154 |
+
}
|
| 155 |
+
</script>
|
| 156 |
+
|
| 157 |
+
<script>
|
| 158 |
+
const EXAMPLES = [
|
| 159 |
+
{ label:"Agreement", text:"Their are many reason to study hard." },
|
| 160 |
+
{ label:"Verb forms", text:"I has went to the stor yesterday." },
|
| 161 |
+
{ label:"Pronouns", text:"Him and me was late for the meetting." },
|
| 162 |
+
{ label:"Repetition", text:"i want to go home home." },
|
| 163 |
+
{ label:"Comparison", text:"He is more taller than his brother." },
|
| 164 |
+
{ label:"Articles", text:"Can you give me a advice?" },
|
| 165 |
+
{ label:"Clean text", text:"That's a fair point, let's discuss it tomorrow." }
|
| 166 |
+
];
|
| 167 |
+
|
| 168 |
+
const $ = id => document.getElementById(id);
|
| 169 |
+
const sign = new URLSearchParams(location.search).get("__sign");
|
| 170 |
+
const signedUrl = path => {
|
| 171 |
+
const url = new URL(path, location.href);
|
| 172 |
+
if (sign) url.searchParams.set("__sign", sign);
|
| 173 |
+
return url;
|
| 174 |
+
};
|
| 175 |
+
const input = $("input"), output = $("output"), copy = $("copy"), workspace = $("spell-workspace");
|
| 176 |
+
const ATTACH_LEFT = /^[.,!?;:%)\]}»…]+$/;
|
| 177 |
+
const CONTRACTION = /^(?:n['’]t|['’](?:s|re|ve|ll|d|m))$/i;
|
| 178 |
+
const APOSTROPHE = /^['’]$/;
|
| 179 |
+
const CONTRACTION_TAIL = /^(?:s|t|d|m|re|ve|ll)$/i;
|
| 180 |
+
const OPEN = /^[(\[{«¿¡]+$/;
|
| 181 |
+
const DEBOUNCE = 650;
|
| 182 |
+
let timer = null, requestSequence = 0, lastCorrected = "", activeExample = null;
|
| 183 |
+
|
| 184 |
+
function setModelState(kind, status, percent) {
|
| 185 |
+
const strip = $("model-strip");
|
| 186 |
+
strip.className = `model-strip is-${kind}`;
|
| 187 |
+
const value = kind === "ready" ? 100 : kind === "error" ? 100 : Math.max(0, Math.min(100, Number(percent) || 0));
|
| 188 |
+
$("status").textContent = status;
|
| 189 |
+
$("load-percent").textContent = kind === "error" ? "Error" : `${Math.round(value)}%`;
|
| 190 |
+
$("load-progress").style.width = `${value}%`;
|
| 191 |
+
strip.querySelector("[role=progressbar]").setAttribute("aria-valuenow", String(Math.round(value)));
|
| 192 |
+
}
|
| 193 |
+
|
| 194 |
+
function setActivity(kind, label) {
|
| 195 |
+
$("activity").className = `activity-pill is-${kind}`;
|
| 196 |
+
$("activity-label").textContent = label;
|
| 197 |
+
}
|
| 198 |
+
|
| 199 |
+
function setRangeFill(range) {
|
| 200 |
+
const pct = (range.value - range.min) / (range.max - range.min) * 100;
|
| 201 |
+
range.style.setProperty("--pct", `${pct}%`);
|
| 202 |
+
}
|
| 203 |
+
|
| 204 |
+
function updateCount() {
|
| 205 |
+
const count = input.value.length;
|
| 206 |
+
$("count").textContent = `${count} ${count === 1 ? "character" : "characters"}`;
|
| 207 |
+
}
|
| 208 |
+
|
| 209 |
+
function clearActiveExample() {
|
| 210 |
+
if (activeExample) activeExample.classList.remove("active");
|
| 211 |
+
activeExample = null;
|
| 212 |
+
}
|
| 213 |
+
|
| 214 |
+
function schedule(delay = DEBOUNCE) {
|
| 215 |
+
clearTimeout(timer);
|
| 216 |
+
timer = setTimeout(correct, delay);
|
| 217 |
+
}
|
| 218 |
+
|
| 219 |
+
function attachLeft(token) {
|
| 220 |
+
return ATTACH_LEFT.test(token) || CONTRACTION.test(token);
|
| 221 |
+
}
|
| 222 |
+
|
| 223 |
+
function needsSpace(previous, current, next) {
|
| 224 |
+
if (previous === null) return false;
|
| 225 |
+
const startsSplitContraction = APOSTROPHE.test(current) && CONTRACTION_TAIL.test(next || "");
|
| 226 |
+
const finishesSplitContraction = APOSTROPHE.test(previous) && CONTRACTION_TAIL.test(current);
|
| 227 |
+
return !attachLeft(current) && !startsSplitContraction && !finishesSplitContraction && !OPEN.test(previous);
|
| 228 |
+
}
|
| 229 |
+
|
| 230 |
+
function renderOutput(segments) {
|
| 231 |
+
const tokens = [];
|
| 232 |
+
for (const segment of segments) {
|
| 233 |
+
for (const token of segment.text.split(/\s+/).filter(Boolean)) tokens.push({ text:token, kind:segment.kind });
|
| 234 |
+
}
|
| 235 |
+
output.innerHTML = "";
|
| 236 |
+
output.classList.toggle("empty", tokens.length === 0);
|
| 237 |
+
let previous = null, editIndex = 0;
|
| 238 |
+
for (let index = 0; index < tokens.length; index++) {
|
| 239 |
+
const token = tokens[index];
|
| 240 |
+
if (needsSpace(previous, token.text, tokens[index + 1]?.text)) output.append(document.createTextNode(" "));
|
| 241 |
+
let node;
|
| 242 |
+
if (token.kind === "edit") {
|
| 243 |
+
node = document.createElement("mark");
|
| 244 |
+
node.style.setProperty("--edit-index", editIndex++);
|
| 245 |
+
node.textContent = token.text;
|
| 246 |
+
} else if (token.kind === "del") {
|
| 247 |
+
node = document.createElement("span");
|
| 248 |
+
node.className = "deleted";
|
| 249 |
+
node.style.setProperty("--edit-index", editIndex++);
|
| 250 |
+
node.textContent = token.text;
|
| 251 |
+
} else {
|
| 252 |
+
node = document.createTextNode(token.text);
|
| 253 |
+
}
|
| 254 |
+
output.append(node);
|
| 255 |
+
previous = token.text;
|
| 256 |
+
}
|
| 257 |
+
}
|
| 258 |
+
|
| 259 |
+
function countEdits(segments) {
|
| 260 |
+
let edits = 0, inEdit = false;
|
| 261 |
+
for (const segment of segments) {
|
| 262 |
+
if (segment.kind === "keep") inEdit = false;
|
| 263 |
+
else if (!inEdit) { edits++; inEdit = true; }
|
| 264 |
+
}
|
| 265 |
+
return edits;
|
| 266 |
+
}
|
| 267 |
+
|
| 268 |
+
function resetResult() {
|
| 269 |
+
requestSequence++;
|
| 270 |
+
lastCorrected = "";
|
| 271 |
+
renderOutput([]);
|
| 272 |
+
copy.disabled = true;
|
| 273 |
+
setActivity("idle", "Ready");
|
| 274 |
+
workspace.classList.remove("is-checking", "is-complete");
|
| 275 |
+
$("stats").classList.remove("has-result");
|
| 276 |
+
$("stat-edits").textContent = "—";
|
| 277 |
+
$("stat-latency").textContent = "—";
|
| 278 |
+
$("stat-characters").textContent = "—";
|
| 279 |
+
}
|
| 280 |
+
|
| 281 |
+
async function correct() {
|
| 282 |
+
const text = input.value.replace(/\s+/g, " ").trim();
|
| 283 |
+
if (!text) { resetResult(); return; }
|
| 284 |
+
const sequence = ++requestSequence;
|
| 285 |
+
const started = performance.now();
|
| 286 |
+
workspace.classList.remove("is-complete");
|
| 287 |
+
workspace.classList.add("is-checking");
|
| 288 |
+
setActivity("running", "Checking…");
|
| 289 |
+
|
| 290 |
+
try {
|
| 291 |
+
const response = await fetch(signedUrl("/api/correct"), {
|
| 292 |
+
method:"POST",
|
| 293 |
+
headers:{ "Content-Type":"application/json" },
|
| 294 |
+
body:JSON.stringify({ text, min_error_prob:+$("mep").value, max_iter:+$("mit").value })
|
| 295 |
+
});
|
| 296 |
+
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
| 297 |
+
const data = await response.json();
|
| 298 |
+
if (sequence !== requestSequence) return;
|
| 299 |
+
|
| 300 |
+
const latency = performance.now() - started;
|
| 301 |
+
const edits = countEdits(data.segments);
|
| 302 |
+
lastCorrected = data.corrected;
|
| 303 |
+
renderOutput(data.segments);
|
| 304 |
+
copy.disabled = !lastCorrected;
|
| 305 |
+
workspace.classList.remove("is-checking");
|
| 306 |
+
void workspace.offsetWidth;
|
| 307 |
+
workspace.classList.add("is-complete");
|
| 308 |
+
setActivity("done", data.changed ? "Corrected" : "Looks good");
|
| 309 |
+
|
| 310 |
+
const stats = $("stats");
|
| 311 |
+
stats.classList.remove("has-result");
|
| 312 |
+
void stats.offsetWidth;
|
| 313 |
+
stats.classList.add("has-result");
|
| 314 |
+
$("stat-edits").textContent = String(edits);
|
| 315 |
+
$("stat-latency").textContent = `${Math.round(latency)} ms`;
|
| 316 |
+
$("stat-characters").textContent = String(text.length);
|
| 317 |
+
setTimeout(() => workspace.classList.remove("is-complete"), 1000);
|
| 318 |
+
} catch (error) {
|
| 319 |
+
if (sequence !== requestSequence) return;
|
| 320 |
+
workspace.classList.remove("is-checking");
|
| 321 |
+
setActivity("error", "Check failed");
|
| 322 |
+
console.error(error);
|
| 323 |
+
}
|
| 324 |
+
}
|
| 325 |
+
|
| 326 |
+
input.addEventListener("input", () => {
|
| 327 |
+
updateCount();
|
| 328 |
+
clearActiveExample();
|
| 329 |
+
schedule();
|
| 330 |
+
});
|
| 331 |
+
|
| 332 |
+
for (const range of [$("mep"), $("mit")]) {
|
| 333 |
+
setRangeFill(range);
|
| 334 |
+
range.addEventListener("input", event => {
|
| 335 |
+
setRangeFill(event.target);
|
| 336 |
+
$(event.target.id === "mep" ? "mepv" : "mitv").textContent = event.target.id === "mep" ? (+event.target.value).toFixed(2) : event.target.value;
|
| 337 |
+
schedule(0);
|
| 338 |
+
});
|
| 339 |
+
}
|
| 340 |
+
|
| 341 |
+
for (const example of EXAMPLES) {
|
| 342 |
+
const button = document.createElement("button");
|
| 343 |
+
button.type = "button";
|
| 344 |
+
button.className = "ex";
|
| 345 |
+
button.textContent = example.label;
|
| 346 |
+
button.dataset.text = example.text;
|
| 347 |
+
button.addEventListener("click", () => {
|
| 348 |
+
clearActiveExample();
|
| 349 |
+
button.classList.add("active");
|
| 350 |
+
activeExample = button;
|
| 351 |
+
input.value = example.text;
|
| 352 |
+
updateCount();
|
| 353 |
+
input.focus();
|
| 354 |
+
schedule(0);
|
| 355 |
+
});
|
| 356 |
+
$("examples").append(button);
|
| 357 |
+
}
|
| 358 |
+
|
| 359 |
+
copy.addEventListener("click", async () => {
|
| 360 |
+
if (!lastCorrected) return;
|
| 361 |
+
await navigator.clipboard.writeText(lastCorrected);
|
| 362 |
+
copy.textContent = "Copied";
|
| 363 |
+
copy.classList.remove("copied");
|
| 364 |
+
void copy.offsetWidth;
|
| 365 |
+
copy.classList.add("copied");
|
| 366 |
+
clearTimeout(copy._timer);
|
| 367 |
+
copy._timer = setTimeout(() => { copy.textContent = "Copy"; copy.classList.remove("copied"); }, 1200);
|
| 368 |
+
});
|
| 369 |
+
|
| 370 |
+
fetch(signedUrl("/api/health"))
|
| 371 |
+
.then(response => { if (!response.ok) throw new Error(`HTTP ${response.status}`); return response.json(); })
|
| 372 |
+
.then(data => {
|
| 373 |
+
setModelState("ready", "Model ready", 100);
|
| 374 |
+
$("status").title = data.mem_human ? `${data.mem_human} in memory` : "";
|
| 375 |
+
})
|
| 376 |
+
.catch(() => setModelState("error", "Model unavailable", 100));
|
| 377 |
+
|
| 378 |
+
(function init() {
|
| 379 |
+
const first = $("examples").querySelector(".ex");
|
| 380 |
+
first.classList.add("active");
|
| 381 |
+
activeExample = first;
|
| 382 |
+
input.value = first.dataset.text;
|
| 383 |
+
updateCount();
|
| 384 |
+
schedule(0);
|
| 385 |
+
})();
|
| 386 |
+
</script>
|
| 387 |
+
</body>
|
| 388 |
+
</html>
|