Spaces:

fastino
/

gliner25-span-attributes

Running

App Files Files Community

m-newhauser commited on 13 days ago

Commit

b3f34c3

verified ·

1 Parent(s): f17e84a

Upload folder using huggingface_hub

Browse files

Files changed (14) hide show

.gitattributes +6 -0
__pycache__/model.cpython-312.pyc +0 -0
app.py +5 -2
model.py +50 -0
static/assets/long-context-extraction.png +3 -0
static/assets/page@b4824da6aaeb63052ccfb891e538eea3.webm +3 -0
static/assets/teaser-gliner25-v2.gif +3 -0
static/assets/teaser-gliner25-v2.html +89 -0
static/assets/teaser-gliner25-v3.gif +3 -0
static/assets/teaser-gliner25-v4.gif +3 -0
static/assets/teaser-gliner25.gif +3 -0
static/assets/teaser-gliner25.svg +42 -0
static/assets/transparent-dark-64.png +0 -0
static/index.html +416 -54

.gitattributes CHANGED Viewed

@@ -34,3 +34,9 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 static/assets/fox-laptop.png filter=lfs diff=lfs merge=lfs -text

 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 static/assets/fox-laptop.png filter=lfs diff=lfs merge=lfs -text
+static/assets/long-context-extraction.png filter=lfs diff=lfs merge=lfs -text
+static/assets/page@b4824da6aaeb63052ccfb891e538eea3.webm filter=lfs diff=lfs merge=lfs -text
+static/assets/teaser-gliner25-v2.gif filter=lfs diff=lfs merge=lfs -text
+static/assets/teaser-gliner25-v3.gif filter=lfs diff=lfs merge=lfs -text
+static/assets/teaser-gliner25-v4.gif filter=lfs diff=lfs merge=lfs -text
+static/assets/teaser-gliner25.gif filter=lfs diff=lfs merge=lfs -text

__pycache__/model.cpython-312.pyc CHANGED Viewed

Binary files a/__pycache__/model.cpython-312.pyc and b/__pycache__/model.cpython-312.pyc differ

app.py CHANGED Viewed

@@ -55,8 +55,11 @@ def static_file(name):
 @app.route("/api/config")
 def config():
-    """Demo content for the page: title, subtitle, example chips. No results."""
-    return {k: v for k, v in model.DEMO.items() if k != "internal"}
 @app.route("/api/ready")

 @app.route("/api/config")
 def config():
+    """Demo content for the page: title, subtitle, example chips. No results.
+    Demos whose examples carry derived fields (inlined texts, result previews)
+    expose model.config(); others are served straight from model.DEMO."""
+    cfg = model.config() if hasattr(model, "config") else model.DEMO
+    return {k: v for k, v in cfg.items() if k != "internal"}
 @app.route("/api/ready")

model.py CHANGED Viewed

@@ -63,6 +63,56 @@ DEMO = {
 _HERE = os.path.dirname(os.path.abspath(__file__))
 def warmup():
     if MOCK:

 _HERE = os.path.dirname(os.path.abspath(__file__))
+def config():
+    """DEMO for /api/config, with result previews baked from fixtures."""
+    out = {k: v for k, v in DEMO.items() if k != "code"}
+    out["mock"] = MOCK
+    out["examples"] = []
+    for ex in DEMO["examples"]:
+        ex2 = {**ex, "code": DEMO["code"]}
+        ex2["result"] = _result_preview(ex["fixture"])
+        out["examples"].append(ex2)
+    return out
+def _result_preview(fixture_name, per_type=2):
+    """Notebook-style Out[1] preview: the API response shape, truncated per label."""
+    with open(os.path.join(_HERE, "fixtures", fixture_name)) as f:
+        out = json.load(f)
+    entities = {}
+    for sp in out["spans"]:
+        entities.setdefault(sp["label"], [])
+        if len(entities[sp["label"]]) < per_type:
+            entities[sp["label"]].append({
+                "text": sp["text"],
+                "confidence": sp["score"],
+                "start": sp["start"],
+                "end": sp["end"],
+                **({"attributes": {g: [{ "label": a["label"], "score": a["score"]} for a in es]
+                                     for g, es in sp["attributes"].items()}} if sp.get("attributes") else {}),
+            })
+    counts = {}
+    for sp in out["spans"]:
+        counts[sp["label"]] = counts.get(sp["label"], 0) + 1
+    body = []
+    for label, entries in entities.items():
+        entry_strs = []
+        for e in entries:
+            base = (f'{{"text": {json.dumps(e["text"])}, "confidence": {e["confidence"]}, '
+                    f'"start": {e["start"]}, "end": {e["end"]}')
+            if e.get("attributes"):
+                attrs = json.dumps(e["attributes"])
+                base += f', "attributes": {attrs}'
+            base += "}"
+            entry_strs.append(base)
+        more = counts[label] - len(entries)
+        parts = ", ".join(entry_strs)
+        if more > 0:
+            parts += f",\n        # ... {more} more {label} span{'' if more == 1 else 's'}"
+        body.append(f'        {json.dumps(label)}: [\n            {parts}\n        ]')
+    return f'{{\n    "entities": {{\n' + ",\n".join(body) + "\n    }\n}"
 def warmup():
     if MOCK:

static/assets/long-context-extraction.png ADDED Viewed

Git LFS Details

SHA256: 153070cef20beeda61aa194641bd4a7b71f19ccd360531a5ce50f25c70dfe436
Pointer size: 131 Bytes
Size of remote file: 396 kB

static/assets/page@b4824da6aaeb63052ccfb891e538eea3.webm ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:1998fa63026722c2990bb651bed66a078634d3145b613446c3571724ceeb4884
+size 157063

static/assets/teaser-gliner25-v2.gif ADDED Viewed

Git LFS Details

SHA256: f83c30372144026b5aa6d72d4558ebd4a70b95b64bfa8a48068074c50f5a1c2a
Pointer size: 132 Bytes
Size of remote file: 2.99 MB

static/assets/teaser-gliner25-v2.html ADDED Viewed

	@@ -0,0 +1,89 @@

+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://www.nerdfonts.com/assets/css/webfont.css" rel="stylesheet">
+<style>
+:root {
+  --paper: #F4F6F8;
+  --ink: #100E1C;
+  --c0: #FF6A2A;  /* orange: product */
+  --c1: #7038FF;  /* purple: person */
+  --c2: #0B7A78;  /* teal: event */
+  --c3: #C2183B;  /* red: location */
+  --ease: cubic-bezier(0.23, 1, 0.32, 1);
+  --mono: "0xProto Nerd Font", "0xProto Nerd", "JetBrains Mono", ui-monospace, Menlo, monospace;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { width: 1252px; height: 374px; }
+body {
+  background: var(--paper); overflow: hidden; position: relative;
+  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
+}
+/* ============ sentence gets extracted, loops ============ */
+.sentence {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  animation: sentence-fade 7s linear infinite;
+}
+.sentence p {
+  font-size: 42px; font-weight: 500; color: var(--ink);
+  letter-spacing: -0.015em; white-space: nowrap;
+}
+@keyframes sentence-fade {
+  0%   { opacity: 0; }
+  7%   { opacity: 1; }    /* fully in by 0.49s */
+  70%  { opacity: 1; }    /* long hold until 4.9s */
+  82%  { opacity: 0; }    /* out by 5.74s */
+  100% { opacity: 0; }    /* rest until loop */
+}
+.ent {
+  position: relative; white-space: nowrap;
+  border-radius: 6px; padding: 0 3px; margin: 0 1px;
+  border-bottom: 3px solid transparent;
+  animation: ent-hl 7s var(--ease) infinite;
+  animation-delay: calc(var(--d) * 1s);
+  animation-fill-mode: both;
+}
+/* the highlight lands 525ms after the entity's stagger tick */
+@keyframes ent-hl {
+  0%   { background-color: rgba(0,0,0,0); border-bottom-color: rgba(0,0,0,0); }
+  7.5% { background-color: var(--bg);     border-bottom-color: var(--c); }
+  100% { background-color: var(--bg);     border-bottom-color: var(--c); }
+}
+.chip {
+  position: absolute; left: 3px; bottom: calc(100% + 6px);
+  font-family: var(--mono); font-size: 15px; font-weight: 600; line-height: 1.5;
+  color: var(--c); background: var(--bg);
+  border: 1.5px solid var(--c); border-radius: 5px; padding: 0 7px;
+  opacity: 0; transform: translateY(4px) scale(0.94);
+  animation: chip-in 7s var(--ease) infinite;
+  animation-delay: calc((var(--d) + 0.2) * 1s);
+  animation-fill-mode: both;
+}
+@keyframes chip-in {
+  0%   { opacity: 0; transform: translateY(4px) scale(0.94); }
+  6%   { opacity: 1; transform: translateY(0) scale(1); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+/* stagger ticks: 0.9s, 1.5s, 2.1s. orange=company(identity), purple=model, teal=date */
+.e0 { --c: var(--c0); --bg: rgba(255,106,42,0.18); --d: 0.9; }
+.e1 { --c: var(--c1); --bg: rgba(112,56,255,0.16); --d: 1.5; }
+.e2 { --c: var(--c2); --bg: rgba(11,122,120,0.16); --d: 2.1; }
+</style>
+</head>
+<body>
+<div class="sentence">
+  <p><span class="ent e0">Fastino Labs<span class="chip">company</span></span> launches <span class="ent e1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="chip">model</span></span> on <span class="ent e2">Monday, August 24th<span class="chip">date</span></span>.</p>
+</div>
+</body>
+</html>

static/assets/teaser-gliner25-v3.gif ADDED Viewed

Git LFS Details

SHA256: f2419baa7879e5cde7e3937883da7d66b732d511be64b6f47ac6e3b29722c28e
Pointer size: 132 Bytes
Size of remote file: 3.05 MB

static/assets/teaser-gliner25-v4.gif ADDED Viewed

Git LFS Details

SHA256: 9bc55cf875a496a190ba10f5fcbc3b2f3bc6bc90021e1f65141272c8babc8cc8
Pointer size: 132 Bytes
Size of remote file: 1.49 MB

static/assets/teaser-gliner25.gif ADDED Viewed

Git LFS Details

SHA256: ac00c7e00dc4b9a5ee394c90f23d488aa40b4b6424b45cd7205f4fa6f81f8b50
Pointer size: 131 Bytes
Size of remote file: 134 kB

static/assets/teaser-gliner25.svg ADDED Viewed

static/assets/transparent-dark-64.png ADDED Viewed

static/index.html CHANGED Viewed

@@ -9,6 +9,250 @@
 <meta property="og:description" content="Sentiment, role, assertion and impact attached to every extracted span.">
 <meta property="og:image" content="og-card.png">
 <link rel="stylesheet" href="brand.css">
 </head>
 <body>
 <div class="wrap">
@@ -17,7 +261,6 @@
       <h1 id="title"></h1>
       <p class="sub" id="subtitle"></p>
     </div>
-    <img class="intro-mascot" src="assets/fox-laptop.png" alt="Fastino fox mascot on a laptop" width="132" height="132">
   </header>
   <main>
@@ -26,6 +269,12 @@
       <div class="example-list" id="examples"></div>
     </section>
     <div class="workspace">
       <section class="card">
         <div class="panel-header"><div><h2>Text</h2><p>Edit below, or pick an example.</p></div></div>
@@ -34,37 +283,57 @@
       <section class="card">
         <div class="panel-header">
-          <div><h2>Spans and attributes</h2><p>Click a span to inspect its attribute groups.</p></div>
-          <button type="button" class="code-toggle" id="code-toggle">&lt;/&gt; code</button>
         </div>
         <div class="code-cell" id="code-cell" hidden>
-          <div class="code-cell-bar">
-            <span class="cell-prompt">In [1]:</span>
-            <button type="button" class="copy-btn" id="copy-btn" aria-label="Copy code">
               <span class="copy-label">Copy</span>
               <span class="copy-done" hidden>Copied</span>
             </button>
           </div>
           <pre class="code-panel" id="code-panel"></pre>
-          <div class="cell-out"><span class="cell-prompt">Out [1]:</span><span class="cell-out-hint"># paste into a notebook or python REPL to run</span></div>
         </div>
-        <div id="output" class="output-body"><div class="output-empty">Extracted spans will appear here.</div></div>
-        <div class="inspector" id="inspector" hidden></div>
-        <div class="controls">
-          <div class="legend" id="legend" style="display:contents"></div>
           <div class="stats">
-            <span>Latency<strong id="stat-ms">-</strong></span>
             <span>Spans<strong id="stat-n">-</strong></span>
           </div>
         </div>
       </section>
     </div>
-    <p class="footnote">
-      Demo data. Attribute groups are scoped with <code>applies_to</code>: sentiment on products,
       role on people, assertion on conditions. Built by
       <a class="labs-mark" href="https://fastino.ai" target="_blank" rel="noopener">Fastino Labs</a>.
     </p>
   </main>
 </div>
@@ -73,6 +342,10 @@
 const $ = (id) => document.getElementById(id);
 const esc = (v) => v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 let READY = false, timer = null, version = 0, labels = [], lastSpans = [];
 /* Badge tone. Semantic hues for sentiment/assertion/impact; everything else
    falls back to the span's own label color at low alpha. All pairs AA. */
@@ -101,20 +374,26 @@ function attrBadges(attributes, i, spanColor) {
   return html;
 }
-function spanColor(label) { return `var(--c${labels.indexOf(label) % 8})`; }
 function render(text, spans) {
   let html = "", prev = 0, i = 0;
   for (const sp of spans) {
     html += esc(text.slice(prev, sp.start));
     const c = spanColor(sp.label);
-    const tip = `${sp.label} - score ${sp.score.toFixed(2)}`;
-    html += `<span class="span-wrap"><span class="span" data-idx="${i}" style="--span-color:${c};--i:${i}" title="${esc(tip)}">${esc(sp.text)}</span>${attrBadges(sp.attributes, i, c)}</span>`;
     prev = sp.end; i++;
   }
   return html + esc(text.slice(prev));
 }
 function renderLegend(spans) {
   const counts = {};
   for (const sp of spans) counts[sp.label] = (counts[sp.label] || 0) + 1;
@@ -124,69 +403,115 @@ function renderLegend(spans) {
      </span>`).join("");
 }
-function renderInspector(idx, text) {
-  const box = $("inspector");
-  if (idx == null || !lastSpans[idx]) { box.hidden = true; box.innerHTML = ""; return; }
-  const sp = lastSpans[idx];
-  const c = spanColor(sp.label);
-  const groups = Object.entries(sp.attributes || {});
-  box.innerHTML = `
-    <div class="inspector-head">
-      <span class="span-text">&ldquo;${esc(sp.text)}&rdquo;</span>
-      <span class="span-label" style="--span-color:${c}">${esc(sp.label)}</span>
-      <span class="span-score">span score ${sp.score.toFixed(2)} &middot; chars ${sp.start}&ndash;${sp.end}</span>
-    </div>
-    ${groups.length ? `<div class="inspector-groups">${groups.map(([group, entries]) => `
-      <div class="attr-group">
-        <div class="attr-group-name">${esc(group)}</div>
-        ${entries.map((e) => `
-          <div class="attr-row">
-            <span class="attr-label">${esc(e.label)}</span>
-            <span class="attr-score">${e.score.toFixed(2)}</span>
-          </div>
-          <div class="attr-meter"><i style="width:${(e.score * 100).toFixed(0)}%;--span-color:${c}"></i></div>`).join("")}
-      </div>`).join("")}</div>`
-    : `<div class="output-empty">No attributes on this span.</div>`}`;
-  box.hidden = false;
 }
 function setEmpty(state) {
   const html = {
-    idle: '<div class="output-empty"><strong>Nothing extracted yet.</strong>Type text on the left, or click an example above.</div>',
-    none: '<div class="output-empty"><strong>No spans found.</strong>Free-typed text returns an empty result in mock mode; the canned examples all produce extractions.</div>',
-    error: '<div class="output-empty"><strong>Inference failed.</strong>The server did not respond. Check the model is still running, then try again.</div>',
   }[state];
   $("output").innerHTML = html;
 }
 async function infer() {
   if (!READY) return;
   const v = ++version, text = $("input").value;
-  if (!text.trim()) { setEmpty("idle"); renderLegend(lastSpans = []); renderInspector(null); $("stat-ms").textContent = "-"; $("stat-n").textContent = "-"; return; }
   let data;
   try {
     const r = await fetch("api/infer", { method: "POST",
       headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) });
     if (!r.ok) throw new Error(`HTTP ${r.status}`);
     data = await r.json();
-  } catch (e) { if (v === version) setEmpty("error"); return; }
-  if (v !== version) return;
   const spans = data.spans || [];
   lastSpans = spans;
   labels = [...new Set([...labels, ...spans.map((s) => s.label)])];
   $("output").innerHTML = spans.length ? render(text, spans) : "";
   if (!spans.length) setEmpty("none");
   renderLegend(spans);
-  renderInspector(null);
   $("stat-ms").textContent = `${data.ms} ms`;
   $("stat-n").textContent = spans.length;
 }
-function inferSoon(delay = 300) { clearTimeout(timer); timer = setTimeout(infer, delay); }
 $("input").addEventListener("input", () => inferSoon());
-$("code-toggle").addEventListener("click", () => $("code-cell").hidden = !$("code-cell").hidden);
 $("copy-btn").addEventListener("click", async () => {
-  try { await navigator.clipboard.writeText($("code-panel").textContent); } catch (e) { return; }
   $("copy-btn").querySelector(".copy-label").hidden = true;
   $("copy-btn").querySelector(".copy-done").hidden = false;
   setTimeout(() => {
@@ -194,6 +519,34 @@ $("copy-btn").addEventListener("click", async () => {
     $("copy-btn").querySelector(".copy-done").hidden = true;
   }, 1400);
 });
 $("output").addEventListener("click", (e) => {
   const el = e.target.closest(".span");
   if (!el) return;
@@ -207,10 +560,10 @@ $("output").addEventListener("click", (e) => {
 (async () => {
   const cfg = await fetchConfig();
   document.title = `${cfg.title.replace(/<[^>]+>/g, "")} - GLiNER 2.5`;
   $("title").innerHTML = cfg.title;
   $("subtitle").innerHTML = cfg.subtitle;
-  $("code-panel").textContent = cfg.code || "";
   cfg.examples.forEach((ex, i) => {
     const b = document.createElement("button");
@@ -219,13 +572,22 @@ $("output").addEventListener("click", (e) => {
     b.addEventListener("click", () => {
       document.querySelectorAll(".ex").forEach((x) => x.classList.toggle("active", x === b));
       $("input").value = ex.text;
       inferSoon(40);
     });
     $("examples").append(b);
   });
   setEmpty("idle");
-  if (cfg.examples[0]) $("input").value = cfg.examples[0].text;
   READY = await waitForServer();
   if (READY) infer();
   else setEmpty("error");

 <meta property="og:description" content="Sentiment, role, assertion and impact attached to every extracted span.">
 <meta property="og:image" content="og-card.png">
 <link rel="stylesheet" href="brand.css">
+<style>
+  /* demo-specific: fixed-height workbench. Both cards share one silhouette and
+     scroll internally; the rail is a minimap of the whole document (aria-hidden -
+     the annotated text itself is the accessible output). */
+  /* page fits one viewport: taller top margin, shorter cards, tighter footer.
+     Header mascot removed: header sits tighter, cards take the reclaimed space.
+     Column widened to 1280 so the boxes run wide; the "white space" lives inside
+     the boxes as extra padding instead of big outer margins. */
+  .wrap { max-width: 1280px; padding-top: 40px; padding-bottom: 26px; }
+  textarea#input, .output-body { padding-left: 24px; padding-right: 24px; }
+  .examples-panel { margin-top: 30px; }
+  .site-intro .sub { max-width: 92ch; }
+  .workspace > .card { height: min(59vh, 488px); }
+  textarea#input { resize: none; }
+  .doc-cols { display: grid; grid-template-columns: 1fr 42px; flex: 1; min-height: 0; position: relative; overflow: hidden; }
+  .doc-cols[hidden] { display: none; }
+  .output-body { min-height: 0; }
+  .rail { position: relative; margin: 14px 12px 14px 8px; background: var(--ash); border-radius: 6px; min-height: 120px; }
+  .rail-tick {
+    position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px;
+    background: var(--span-color);
+    opacity: 0; animation: span-in 380ms var(--ease-out) forwards;
+    animation-delay: calc(var(--i) * 55ms);
+  }
+  .rail-caption, .rail-end {
+    position: absolute; left: 0; white-space: nowrap;
+    font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
+  }
+  .rail-caption { top: -17px; }
+  .rail-end { bottom: -17px; }
+  @media (max-width: 860px) {
+    .workspace > .card { height: auto; }
+    .workspace > .card:last-child { height: min(59vh, 488px); }
+    textarea#input { min-height: 380px; }
+    .doc-cols { grid-template-columns: 1fr; }
+    .rail { display: none; }
+  }
+  .model-note { font-size: 11px; color: var(--ink-faint); }
+  .model-note a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--ash); text-underline-offset: 2px; }
+  .model-note a:hover { color: var(--orange-deep); text-decoration-color: var(--orange-deep); }
+  /* model attribution moved to the footnote: linked model name, code styling kept */
+  .footnote a[href*="huggingface.co"] { color: var(--ink-soft); text-decoration-color: var(--ash); text-underline-offset: 2px; }
+  .footnote a[href*="huggingface.co"]:hover { color: var(--orange-deep); text-decoration-color: var(--orange-deep); }
+  /* footer link row: centered, fox logo as separator */
+  .footer-links {
+    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
+    gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ash);
+  }
+  .footer-links a {
+    font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none;
+    transition: color 140ms var(--ease-out);
+  }
+  .footer-links a:hover { color: var(--orange-deep); }
+  .footer-links a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+  .footer-links img { width: 16px; height: 16px; display: block; opacity: 0.9; }
+  /* local override of brand.css uppercase transform: mixed-case "Examples" */
+  .examples-label { text-transform: none; letter-spacing: 0.04em; }
+  /* controls back at the brand-default bottom: the capped output scrolls
+     internally, so the footer is always reachable (that's why they were on top) */
+  /* notebook Out[1] block replaced by tabs: code | result */
+  .code-tab {
+    font: inherit; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
+    color: var(--ink-faint); background: none; border: 0; border-bottom: 2px solid transparent;
+    padding: 4px 10px 5px; cursor: pointer; letter-spacing: 0.02em;
+    transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
+  }
+  .code-tab:hover { color: var(--ink-soft); }
+  .code-tab.active { color: var(--ink); border-bottom-color: var(--orange); }
+  .code-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
+  .cell-result { color: var(--ink-soft); }
+  .cell-result .jk { color: var(--purple); }
+  .cell-result .js { color: var(--ok); }
+  .cell-result .jn { color: var(--orange-deep); }
+  .cell-result .jc { color: var(--ink-faint); font-style: italic; }
+  /* wider side padding on highlighted spans (local override of brand.css 1px 2px) */
+  #output .span { padding: 1px 7px; }
+  /* grid children must not let wide pre content inflate the tracks */
+  .workspace > .card { min-width: 0; }
+  .code-cell { max-width: 100%; margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+  .code-cell[hidden] { display: none; }
+  .code-panel { max-width: 100%; flex: 1; min-height: 0; overflow: auto; }
+  /* mono only for actual code: the code panel + result JSON. Everything else
+     (span labels, tabs, stats, legend counts, copy button) uses the body font. */
+  #output .span-label { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.06em; }
+  .code-tab { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.04em; }
+  .copy-btn { font-family: var(--font-body); }
+  .legend-count { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
+  .stats strong { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
+  .rail-caption, .rail-end { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
+  /* label rides inside the span: all-caps bold, vertically centered, right after the text */
+  .span-label {
+    font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.05em;
+    color: var(--span-color);
+    margin-left: 4px; vertical-align: middle; line-height: 1;
+    white-space: nowrap;
+    opacity: 0; animation: chip-in 280ms var(--ease-out) forwards;
+    animation-delay: calc(var(--i) * 40ms + 200ms);
+  }
+  @keyframes chip-in { from { opacity: 0; } to { opacity: 1; } }
+  /* frosted hover pill (approved mock V1-frosted): one line, type | score | chars.
+     Above the span, centered; flips below when the span sits near the panel top.
+     pointer-events none so it never blocks the neighbouring span. */
+  .tip {
+    position: absolute; bottom: calc(100% + 7px); left: 50%;
+    transform: translateX(-50%) translateY(2px);
+    background: color-mix(in srgb, var(--greige) 78%, transparent);
+    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+    color: var(--ink); font-family: var(--font-mono); font-size: 10.5px; line-height: 1;
+    padding: 6px 10px; border-radius: 6px; white-space: nowrap;
+    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
+    box-shadow: 0 2px 10px rgba(16, 14, 28, 0.10);
+    opacity: 0; pointer-events: none;
+    transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
+    z-index: 2;
+  }
+  .span:hover .tip {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  /* flip below when there is no room above (span near the panel top) */
+  .span.flip-below .tip {
+    bottom: auto; top: calc(100% + 7px);
+    transform: translateX(-50%) translateY(-2px);
+  }
+  .span.flip-below:hover .tip { transform: translateX(-50%) translateY(0); }
+  /* real inference: dim + blur the previous output while the next pass runs
+     (blur masks the seam between old results and the incoming scan) */
+  .output-body { transition: opacity 160ms var(--ease-out), filter 160ms var(--ease-out); }
+  .output-body.busy { opacity: 0.55; filter: blur(1.5px); }
+  /* scan line (v3): thin solid 2px line sweeping smoothly up and down with a
+     light trail behind it. Two full-height layers — one per direction — painted
+     with a short gradient ending in the line; motion is transform-only. Both
+     share one cycle: down sweep 0-50%, up sweep 50-100%, so the line turns at
+     the top and bottom like the reference. --scan is the scanner's own color
+     (FF5E00), independent of the brand --orange. */
+  .doc-cols { --scan: #FF5E00; }
+  .scan-line {
+    position: absolute; inset: 0 42px 0 0;
+    pointer-events: none; opacity: 0; z-index: 1;
+    background-repeat: no-repeat;
+    transition: opacity 200ms var(--ease-out);
+  }
+  /* downward sweep: line leads at the bottom, trail above it */
+  .scan-line.down {
+    background-image: linear-gradient(to bottom, transparent,
+      color-mix(in srgb, var(--scan) 5%, transparent) 55%,
+      color-mix(in srgb, var(--scan) 13%, transparent) calc(100% - 2px),
+      var(--scan) calc(100% - 2px));
+    background-size: 100% 180px; background-position: 0 100%;
+  }
+  /* upward sweep: line leads at the top, trail below it */
+  .scan-line.up {
+    background-image: linear-gradient(to top, transparent,
+      color-mix(in srgb, var(--scan) 5%, transparent) 55%,
+      color-mix(in srgb, var(--scan) 13%, transparent) calc(100% - 2px),
+      var(--scan) calc(100% - 2px));
+    background-size: 100% 180px; background-position: 0 0;
+  }
+  .doc-cols.busy .scan-line.down { opacity: 1; animation: scan-down 2.8s linear infinite; }
+  .doc-cols.busy .scan-line.up   { opacity: 1; animation: scan-up 2.8s linear infinite; }
+  /* layers are doc-height, so translateY(±100%) is one full column. The two
+     keyframe sets hand over at 50% with a ~30ms crossfade at each turn. */
+  @keyframes scan-down {
+    0%        { transform: translateY(-100%); opacity: 0; }
+    1%, 49%   { opacity: 1; }
+    50%       { transform: translateY(0); opacity: 0; }
+    100%      { transform: translateY(0); opacity: 0; }
+  }
+  @keyframes scan-up {
+    0%, 50%   { transform: translateY(100%); opacity: 0; }
+    51%, 99%  { opacity: 1; }
+    100%      { transform: translateY(0); opacity: 0; }
+  }
+  /* rail minimap: two glows track the line, same cycle (pseudos survive
+     renderRail's innerHTML rewrite) */
+  .rail::before, .rail::after {
+    content: ""; position: absolute; inset: 0;
+    background: linear-gradient(180deg, transparent 0, var(--scan) 30%,
+      var(--scan) 70%, transparent 100%);
+    background-size: 100% 22px; background-repeat: no-repeat;
+    opacity: 0; pointer-events: none;
+    transition: opacity 180ms var(--ease-out);
+  }
+  .rail::before { background-position: 0 0; }
+  .rail::after { background-position: 0 100%; }
+  .doc-cols.busy .rail::before { opacity: 0.85; animation: rail-down 2.8s linear infinite; }
+  .doc-cols.busy .rail::after  { opacity: 0.85; animation: rail-up 2.8s linear infinite; }
+  @keyframes rail-down {
+    0%        { transform: translateY(0); opacity: 0; }
+    1%, 49%   { opacity: 0.85; }
+    50%       { transform: translateY(calc(100% - 22px)); opacity: 0; }
+    100%      { transform: translateY(calc(100% - 22px)); opacity: 0; }
+  }
+  @keyframes rail-up {
+    0%, 50%   { transform: translateY(calc(100% - 22px)); opacity: 0; }
+    51%, 99%  { opacity: 0.85; }
+    100%      { transform: translateY(0); opacity: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    /* drop the movement, keep the state feedback: dimmed output + glow parked
+       mid-rail. A static line across the doc would read as an artifact: hide. */
+    .doc-cols.busy .scan-line { animation: none; opacity: 0; }
+    .doc-cols.busy .rail::before { animation: none; opacity: 0; }
+    .doc-cols.busy .rail::after { animation: none; opacity: 0.85; transform: translateY(calc(50% - 11px)); }
+  }
+  /* mobile (placed after .scan-line: same specificity, source order must win):
+     no rail column, so the line spans the full doc width */
+  @media (max-width: 860px) {
+    .doc-cols .scan-line { inset: 0 0 0 0; }
+  }
+  /* legend + stats stack: chips wrap freely, stats always sit beneath them */
+  .controls { flex-direction: column; align-items: stretch; gap: 0; }
+  .controls[hidden] { display: none; }  /* hidden attr loses to display:flex */
+  .legend { display: flex; flex-wrap: wrap; gap: 8px; }
+  /* compact chips + denser text: more room for the colored spans section */
+  .legend-chip { font-size: 11px; padding: 1px 8px; gap: 5px; }
+  .legend-swatch { width: 7px; height: 7px; }
+  .legend-count { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 9.5px; }
+  textarea#input { font-size: 13.5px; line-height: 1.7; }
+  .output-body { font-size: 13.5px; line-height: 1.7; }
+  .stats { font-size: 11px; }
+  /* footnote code (model id, chunk params) in the kit mono, not browser default */
+  .footnote code { font-family: var(--font-mono); }
+  .stats { margin-left: 0; margin-top: 10px; }
+  /* model strip: mascot + linked model name/size, between examples and workspace */  .model-strip {
+    display: flex; align-items: center; gap: 10px;
+    background: var(--card); border: 1px solid var(--ash); border-radius: var(--radius);
+    padding: 7px 14px; margin: 0 0 18px;
+  }
+  .model-strip img { width: 26px; height: 26px; display: block; }
+  .model-strip-name {
+    font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink);
+    text-decoration: none; border-bottom: 1px solid var(--ash); padding-bottom: 1px;
+    transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
+  }
+  .model-strip-name:hover { color: var(--orange-deep); border-bottom-color: var(--orange-deep); }
+  .model-strip-name:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+  .model-strip-size { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
+  /* code/counts buttons: bunched together, were 55px apart under space-between */
+  .header-actions { display: flex; align-items: center; gap: 8px; }
+  /* counts toggle lit state when open */
+  /* counts toggle lit state when open */
+</style>
 </head>
 <body>
 <div class="wrap">
       <h1 id="title"></h1>
       <p class="sub" id="subtitle"></p>
     </div>
   </header>
   <main>
       <div class="example-list" id="examples"></div>
     </section>
+    <section class="model-strip" aria-label="Model">
+      <img src="assets/fox-laptop.png" alt="" width="26" height="26">
+      <a class="model-strip-name" href="https://huggingface.co/fastino/gliner2.5-multi-v1" target="_blank" rel="noopener">GLiNER2.5-Multi-v1</a>
+      <span class="model-strip-size">(0.3B)</span>
+    </section>
     <div class="workspace">
       <section class="card">
         <div class="panel-header"><div><h2>Text</h2><p>Edit below, or pick an example.</p></div></div>
       <section class="card">
         <div class="panel-header">
+          <div><h2>Spans and attributes</h2><p>Click a span to inspect its attribute groups. Each span carries its exact position along with a confidence score.</p></div>
+          <div class="header-actions">
+            <button type="button" class="code-toggle" id="code-toggle" aria-expanded="false" aria-label="Code">code</button>
+          </div>
         </div>
         <div class="code-cell" id="code-cell" hidden>
+          <div class="code-cell-bar" role="tablist" aria-label="Code and result">
+            <button type="button" class="code-tab active" id="tab-code" role="tab" aria-selected="true">code</button>
+            <button type="button" class="code-tab" id="tab-result" role="tab" aria-selected="false">result</button>
+            <button type="button" class="copy-btn" id="copy-btn" aria-label="Copy">
               <span class="copy-label">Copy</span>
               <span class="copy-done" hidden>Copied</span>
             </button>
           </div>
           <pre class="code-panel" id="code-panel"></pre>
+          <pre class="code-panel cell-result" id="cell-result" hidden></pre>
         </div>
+         <div class="doc-cols">
+          <div id="output" class="output-body"></div>
+          <div class="inspector" id="inspector" hidden></div>
+          <div class="rail" id="rail" aria-hidden="true"></div>
+          <div class="scan-line down" aria-hidden="true"></div>
+          <div class="scan-line up" aria-hidden="true"></div>
+        </div>
+        <div class="controls" id="controls">
+          <div class="legend" id="legend"></div>
           <div class="stats">
+            <span title="End-to-end time for one pass over the document.">Latency<strong id="stat-ms">-</strong></span>
             <span>Spans<strong id="stat-n">-</strong></span>
+            <span>Chars<strong id="stat-chars">-</strong></span>
+            <span title="Number of inference passes over the document.">Chunks<strong id="stat-chunks">-</strong></span>
           </div>
         </div>
       </section>
     </div>
+    <p class="footnote" style="margin-top: 28px;">
+      Extraction runs <a href="https://huggingface.co/fastino/gliner2.5-multi-v1" target="_blank" rel="noopener"><code>fastino/gliner2.5-multi-v1</code></a> live on CPU. Attribute groups are scoped with <code>applies_to</code>: sentiment on products,
       role on people, assertion on conditions. Built by
       <a class="labs-mark" href="https://fastino.ai" target="_blank" rel="noopener">Fastino Labs</a>.
     </p>
+    <nav class="footer-links" aria-label="GLiNER 2.5 links">
+      <a href="https://huggingface.co/collections/fastino/gliner25-models" target="_blank" rel="noopener">GLiNER2.5 models</a>
+      <img src="assets/transparent-dark-64.png" alt="" width="16" height="16">
+      <a href="https://huggingface.co/collections/fastino/gliner25-demos" target="_blank" rel="noopener">GLiNER2.5 demos</a>
+      <img src="assets/transparent-dark-64.png" alt="" width="16" height="16">
+      <a href="https://github.com/fastino-ai/GLiNER2" target="_blank" rel="noopener">GitHub</a>
+      <img src="assets/transparent-dark-64.png" alt="" width="16" height="16">
+      <a href="https://fastino.ai/blog/gliner2-5-span-free-information-extraction" target="_blank" rel="noopener">Release blog</a>
+    </nav>
   </main>
 </div>
 const $ = (id) => document.getElementById(id);
 const esc = (v) => v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 let READY = false, timer = null, version = 0, labels = [], lastSpans = [];
+let REAL = false;  // live model (vs instant mock): longer debounce + pending state
+function spanColor(label) { return `var(--c${labels.indexOf(label) % 8})`; }
 /* Badge tone. Semantic hues for sentiment/assertion/impact; everything else
    falls back to the span's own label color at low alpha. All pairs AA. */
   return html;
 }
 function render(text, spans) {
   let html = "", prev = 0, i = 0;
   for (const sp of spans) {
     html += esc(text.slice(prev, sp.start));
     const c = spanColor(sp.label);
+    // frosted hover pill: type | score | chars
+    const tip = `<span class="tip"><span class="t-type">${esc(sp.label)}</span><span class="t-sep">|</span>${sp.score.toFixed(2)}<span class="t-sep">|</span><span class="t-off">chars ${sp.start} to ${sp.end}</span></span>`;
+    html += `<span class="span-wrap"><span class="span" data-idx="${i}" style="--span-color:${c};--i:${i}" data-start="${sp.start}" data-end="${sp.end}" data-score="${sp.score}">${esc(sp.text)}<span class="span-label" style="--i:${i}">${esc(sp.label)}</span>${tip}</span>${attrBadges(sp.attributes, i, c)}</span>`;
     prev = sp.end; i++;
   }
   return html + esc(text.slice(prev));
 }
+function renderRail(text, spans) {
+  // Minimap: ticks land at char offset / doc length down the fixed-height rail.
+  $("rail").innerHTML = spans.map((sp, i) =>
+      `<span class="rail-tick" style="top:${(sp.start / text.length * 100).toFixed(1)}%;--span-color:${spanColor(sp.label)};--i:${i}"></span>`
+    ).join("");
+}
 function renderLegend(spans) {
   const counts = {};
   for (const sp of spans) counts[sp.label] = (counts[sp.label] || 0) + 1;
      </span>`).join("");
 }
+function renderStatChunks(data) {
+  $("stat-chunks").textContent = data.chunks ? data.chunks.n_chunks : "-";
 }
 function setEmpty(state) {
   const html = {
+    idle: "",
+    none: REAL
+      ? '<div class="output-empty"><strong>No spans found.</strong>The model read the whole document and found no matches. Try different text or switch examples.</div>'
+      : '<div class="output-empty"><strong>No spans found.</strong>Free-typed text returns no result in mock mode. Click an example to see extractions.</div>',
+    error: '<div class="output-empty"><strong>Inference failed.</strong>The server did not respond. Check that the model is still running and try again.</div>',
   }[state];
   $("output").innerHTML = html;
 }
+function setPending(on) {
+  $("output").classList.toggle("busy", on);
+  document.querySelector(".doc-cols").classList.toggle("busy", on);
+  $("output").setAttribute("aria-busy", on ? "true" : "false");
+  if (on) $("stat-ms").textContent = "\u2026";
+}
 async function infer() {
   if (!READY) return;
   const v = ++version, text = $("input").value;
+  if (!text.trim()) {
+    setPending(false);
+    setEmpty("idle"); renderLegend([]); renderRail(" ", []);
+    $("stat-ms").textContent = "-"; $("stat-n").textContent = "-";
+    $("stat-chars").textContent = "-"; $("stat-chunks").textContent = "-";
+    return;
+  }
+  setPending(true);
   let data;
   try {
     const r = await fetch("api/infer", { method: "POST",
       headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) });
     if (!r.ok) throw new Error(`HTTP ${r.status}`);
     data = await r.json();
+  } catch (e) {
+    if (v === version) { setPending(false); setEmpty("error"); $("stat-ms").textContent = "-"; }
+    return;
+  }
+  if (v !== version) return;  // a newer pass is in flight; it owns the pending state
+  setPending(false);
   const spans = data.spans || [];
   lastSpans = spans;
   labels = [...new Set([...labels, ...spans.map((s) => s.label)])];
   $("output").innerHTML = spans.length ? render(text, spans) : "";
   if (!spans.length) setEmpty("none");
+  renderRail(text, spans);
   renderLegend(spans);
   $("stat-ms").textContent = `${data.ms} ms`;
   $("stat-n").textContent = spans.length;
+  $("stat-chars").textContent = text.length.toLocaleString();
+  renderStatChunks(data);
 }
+function inferSoon(delay) { clearTimeout(timer); timer = setTimeout(infer, delay ?? (REAL ? 700 : 300)); }
 $("input").addEventListener("input", () => inferSoon());
+/* flip the tooltip below when the span has no room above (live: the output
+   panel scrolls, so a one-shot class at render time would go stale) */
+$("output").addEventListener("mouseover", (e) => {
+  const sp = e.target.closest(".span");
+  if (!sp) return;
+  const outTop = $("output").getBoundingClientRect().top;
+  sp.classList.toggle("flip-below", sp.getBoundingClientRect().top - outTop < 34);
+});
+/* code view replaces the annotated output; toggle swaps between them */
+function setCodeView(open) {
+  $("code-cell").hidden = !open;
+  document.querySelector(".doc-cols").hidden = open;
+  $("controls").hidden = open;
+  const btn = $("code-toggle");
+  btn.textContent = open ? "close" : "code";
+  btn.setAttribute("aria-expanded", open);
+  btn.setAttribute("aria-label", open ? "Close code" : "Code");
+}
+$("code-toggle").addEventListener("click", () => setCodeView($("code-cell").hidden));
+function renderResult(resultText) {
+  // light JSON tinting: keys, strings, numbers, trailing comments
+  let html = esc(resultText)
+    .replace(/("(?:[^"\\]|\\.)*?")(\s*:)/g, '<span class="jk">$1</span>$2')
+    .replace(/: ("(?:[^"\\]|\\.)*?")/g, ': <span class="js">$1</span>')
+    .replace(/(:\s)(\d+\.?\d*)/g, '$1<span class="jn">$2</span>')
+    .replace(/(#[^\n]*)/g, '<span class="jc">$1</span>');
+  $("cell-result").innerHTML = html;
+}
+let CODE_TAB = "code";
+function setCodeTab(tab) {
+  CODE_TAB = tab;
+  const isCode = tab === "code";
+  $("tab-code").classList.toggle("active", isCode);
+  $("tab-result").classList.toggle("active", !isCode);
+  $("tab-code").setAttribute("aria-selected", isCode);
+  $("tab-result").setAttribute("aria-selected", !isCode);
+  $("code-panel").hidden = !isCode;
+  $("cell-result").hidden = isCode;
+}
+$("tab-code").addEventListener("click", () => setCodeTab("code"));
+$("tab-result").addEventListener("click", () => setCodeTab("result"));
 $("copy-btn").addEventListener("click", async () => {
+  const text = CODE_TAB === "code" ? $("code-panel").textContent : $("cell-result").textContent;
+  try { await navigator.clipboard.writeText(text); } catch (e) { return; }
   $("copy-btn").querySelector(".copy-label").hidden = true;
   $("copy-btn").querySelector(".copy-done").hidden = false;
   setTimeout(() => {
     $("copy-btn").querySelector(".copy-done").hidden = true;
   }, 1400);
 });
+function renderInspector(idx) {
+  const box = $("inspector");
+  if (idx == null || !lastSpans[idx]) { box.hidden = true; box.innerHTML = ""; return; }
+  const sp = lastSpans[idx];
+  const c = spanColor(sp.label);
+  const groups = Object.entries(sp.attributes || {});
+  box.innerHTML = `
+    <div class="inspector-head">
+      <span class="span-text">&ldquo;${esc(sp.text)}&rdquo;</span>
+      <span class="span-label" style="--span-color:${c}">${esc(sp.label)}</span>
+      <span class="span-score">span score ${sp.score.toFixed(2)} &middot; chars ${sp.start}&ndash;${sp.end}</span>
+    </div>
+    ${groups.length ? `<div class="inspector-groups">${groups.map(([group, entries]) => `
+      <div class="attr-group">
+        <div class="attr-group-name">${esc(group)}</div>
+        ${entries.map((e) => `
+          <div class="attr-row">
+            <span class="attr-label">${esc(e.label)}</span>
+            <span class="attr-score">${e.score.toFixed(2)}</span>
+          </div>
+          <div class="attr-meter"><i style="width:${(e.score * 100).toFixed(0)}%;--span-color:${c}"></i></div>`).join("")}
+      </div>`).join("")}</div>`
+    : `<div class="output-empty">No attributes on this span.</div>`}`;
+  box.hidden = false;
+}
 $("output").addEventListener("click", (e) => {
   const el = e.target.closest(".span");
   if (!el) return;
 (async () => {
   const cfg = await fetchConfig();
+  REAL = cfg.mock === false;
   document.title = `${cfg.title.replace(/<[^>]+>/g, "")} - GLiNER 2.5`;
   $("title").innerHTML = cfg.title;
   $("subtitle").innerHTML = cfg.subtitle;
   cfg.examples.forEach((ex, i) => {
     const b = document.createElement("button");
     b.addEventListener("click", () => {
       document.querySelectorAll(".ex").forEach((x) => x.classList.toggle("active", x === b));
       $("input").value = ex.text;
+      labels = [];  // per-example schema: reset color mapping
+      // old example's spans no longer match the new document: clear before scan
+       $("output").innerHTML = ""; renderLegend([]); renderRail(" ", []);
+      $("code-panel").textContent = ex.code || "";
+      renderResult(ex.result || "");
       inferSoon(40);
     });
     $("examples").append(b);
   });
   setEmpty("idle");
+  if (cfg.examples[0]) {
+    $("input").value = cfg.examples[0].text;
+    $("code-panel").textContent = cfg.examples[0].code || "";
+    renderResult(cfg.examples[0].result || "");
+  }
   READY = await waitForServer();
   if (READY) infer();
   else setEmpty("error");