Spaces:

LiquidAI
/

spellchecker

Running

App Files Files Community

mlabonne commited on Jul 17

Commit

e869aca

verified ·

1 Parent(s): ff73de7

Refine spellchecker highlights and controls

Browse files

Files changed (3) hide show

README.md +2 -2
static/index.html +22 -22
static/style.css +14 -7

README.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: Spellchecker
 emoji: ✍️
 colorFrom: purple
 colorTo: gray
@@ -10,7 +10,7 @@ pinned: false
 private: true
 ---
-# LFM2.5 Spellchecker
 A focused grammar and spelling correction demo powered by [`LiquidAI/LFM2.5-Spellchecker-350M`](https://huggingface.co/LiquidAI/LFM2.5-Spellchecker-350M).

 ---
+title: Liquid spellchecker
 emoji: ✍️
 colorFrom: purple
 colorTo: gray
 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).

static/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<title>LFM2.5 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">
@@ -18,8 +18,8 @@
 <body>
 <div class="wrap">
   <header class="site-intro">
-    <h1>Precise <em>spellchecking</em></h1>
-    <p class="sub">Correct spelling and grammar with a <strong>customizable confidence threshold</strong>, powered by LFM2.5.</p>
   </header>
   <section class="model-strip is-loading" id="model-strip" aria-label="Model status">
@@ -41,8 +41,7 @@
     <section class="spell-workspace" id="spell-workspace" aria-label="Spellchecker">
       <article class="workspace-card input-panel">
         <div class="panel-header">
-          <div><h2>Input</h2><p>Corrections run automatically as you pause.</p></div>
-          <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="editor-stage input-stage">
@@ -53,23 +52,26 @@
         <div class="input-meta"><span id="count">0 characters</span><span>Checks after 650 ms</span></div>
-        <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>
       </article>
       <article class="workspace-card output-panel">
         <div class="panel-header output-heading">
-          <div><h2>Corrected</h2><p>Every change is highlighted in context.</p></div>
           <button type="button" class="copy-button" id="copy" disabled>Copy</button>
         </div>
@@ -84,7 +86,7 @@
         </div>
         <div class="stats-grid" id="stats" aria-live="polite">
-          <div class="stat-card stat-result"><span>Result</span><strong id="stat-result">—</strong></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>
@@ -207,7 +209,6 @@ function resetResult() {
   setActivity("idle", "Ready");
   workspace.classList.remove("is-checking", "is-complete");
   $("stats").classList.remove("has-result");
-  $("stat-result").textContent = "—";
   $("stat-edits").textContent = "—";
   $("stat-latency").textContent = "—";
   $("stat-characters").textContent = "—";
@@ -246,8 +247,6 @@ async function correct() {
     stats.classList.remove("has-result");
     void stats.offsetWidth;
     stats.classList.add("has-result");
-    $("stat-result").textContent = data.changed ? "Corrected" : "Clean";
-    $("stat-result").parentElement.classList.toggle("is-clean", !data.changed);
     $("stat-edits").textContent = String(edits);
     $("stat-latency").textContent = `${Math.round(latency)} ms`;
     $("stat-characters").textContent = String(text.length);
@@ -271,6 +270,7 @@ for (const range of [$("mep"), $("mit")]) {
   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);
   });
 }

 <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">
 <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">
     <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">
         <div class="input-meta"><span id="count">0 characters</span><span>Checks after 650 ms</span></div>
+        <details class="settings-menu">
+          <summary><span>Correction settings</span><span class="settings-value" id="settings-value">0.00 threshold · 3 passes</span></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>
         <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>
   setActivity("idle", "Ready");
   workspace.classList.remove("is-checking", "is-complete");
   $("stats").classList.remove("has-result");
   $("stat-edits").textContent = "—";
   $("stat-latency").textContent = "—";
   $("stat-characters").textContent = "—";
     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);
   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;
+    $("settings-value").textContent = `${(+$('mep').value).toFixed(2)} threshold · ${$('mit').value} ${$('mit').value === '1' ? 'pass' : 'passes'}`;
     schedule(0);
   });
 }

static/style.css CHANGED Viewed

@@ -106,9 +106,8 @@ main { display:flex; min-height:0; flex:0 0 auto; flex-direction:column; margin-
 .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; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:17px; }
-.panel-header h2 { margin:0 0 5px; color:var(--neutral-500); font:600 12px/1.25 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
-.panel-header p { margin:0; color:var(--neutral-500); font-size:13px; line-height:1.4; }
 .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); }
@@ -133,7 +132,15 @@ main { display:flex; min-height:0; flex:0 0 auto; flex-direction:column; margin-
 .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-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
 .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; }
@@ -151,7 +158,7 @@ input[type=range]::-moz-range-thumb { width:11px; height:11px; border:3px solid
 .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; right:-.08em; bottom:.08em; left:-.08em; height:.78em; 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 14%,3% 4%,28% 9%,52% 2%,78% 8%,100% 0,98% 88%,72% 96%,42% 91%,17% 100%,1% 90%); 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); }
@@ -164,8 +171,8 @@ mark::after { content:""; position:absolute; z-index:-1; top:18%; bottom:12%; le
 .stat-card { min-width:0; 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; }
-.stat-result strong { color:var(--purple); }
-.stat-result.is-clean strong { color:#188e50; }
 .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; }

 .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); }
 .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:12px; }
+.settings-menu > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px; padding:11px 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-size:16px; line-height:1; 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(180deg); }
+.settings-value { margin-left:auto; color:var(--purple); font-size:9px; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; }
+.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; }
 .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); }
 .stat-card { min-width:0; 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; 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; }