Upload folder using huggingface_hub

Dockerfile

@@ -0,0 +1,25 @@
+FROM python:3.12-slim
+
+# Non-root user (HF Spaces convention; writable HOME for the HF cache the model
+# is pulled into at boot).
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    HF_HOME=/home/user/.cache/huggingface \
+    PYTHONUNBUFFERED=1
+
+WORKDIR /home/user/app
+
+# CPU-only torch (default PyPI wheel is CUDA and huge). Only needed for the real
+# model; the mock path works on flask alone.
+RUN pip install --no-cache-dir --user torch --index-url https://download.pytorch.org/whl/cpu
+RUN pip install --no-cache-dir --user flask gunicorn
+
+COPY --chown=user . .
+
+EXPOSE 7860
+
+# One worker (single shared model), threads for static/infer connections.
+# No --preload: avoids the torch/OpenMP fork-after-threads deadlock.
+CMD ["gunicorn", "-w", "1", "--threads", "8", "-k", "gthread", "-b", "0.0.0.0:7860", "--timeout", "0", "app:app"]

app.py

@@ -0,0 +1,63 @@
+"""GLiNER 2.5 demo server — identical for every demo.
+
+Serves the static page, answers /api/ready, and POSTs {text, ...} to /api/infer,
+which it delegates to model.infer(). All demo-specific logic lives in model.py.
+
+    python app.py            # local dev on :7860
+"""
+
+import os
+import threading
+import time
+
+from flask import Flask, request, send_from_directory
+
+import model
+
+APP_DIR = os.path.dirname(os.path.abspath(__file__))
+STATIC = os.path.join(APP_DIR, "static")
+
+_LOCK = threading.Lock()  # one inference at a time: CPU threads beat concurrency
+
+print(f"[boot] {model.DEMO['title']} — mock={model.MOCK}", flush=True)
+model.warmup()  # load model / validate fixtures before first request
+print("[boot] ready", flush=True)
+
+app = Flask(__name__)
+
+
+@app.route("/")
+def index():
+    return send_from_directory(STATIC, "index.html")
+
+
+@app.route("/<path:name>")
+def static_file(name):
+    if name in ("brand.css", "strip.js", "favicon.svg"):
+        return send_from_directory(STATIC, name)
+    return ("not found", 404)
+
+
+@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")
+def ready():
+    return {"ready": True}
+
+
+@app.route("/api/infer", methods=["POST"])
+def infer():
+    data = request.get_json(silent=True) or {}
+    t0 = time.perf_counter()
+    with _LOCK:
+        out = model.infer(data)
+    out["ms"] = round((time.perf_counter() - t0) * 1000)
+    return out
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 7860)), threaded=True)

fixtures/clinical.json

@@ -0,0 +1,64 @@
+{
+  "spans": [
+    {
+      "start": 15,
+      "end": 25,
+      "text": "chest pain",
+      "label": "condition",
+      "score": 0.94,
+      "attributes": {
+        "assertion": [
+          {
+            "label": "absent",
+            "score": 0.93
+          }
+        ]
+      }
+    },
+    {
+      "start": 42,
+      "end": 51,
+      "text": "pneumonia",
+      "label": "condition",
+      "score": 0.96,
+      "attributes": {
+        "assertion": [
+          {
+            "label": "absent",
+            "score": 0.95
+          }
+        ]
+      }
+    },
+    {
+      "start": 62,
+      "end": 73,
+      "text": "mild anemia",
+      "label": "condition",
+      "score": 0.87,
+      "attributes": {
+        "assertion": [
+          {
+            "label": "possible",
+            "score": 0.81
+          }
+        ]
+      }
+    },
+    {
+      "start": 86,
+      "end": 98,
+      "text": "hypertension",
+      "label": "condition",
+      "score": 0.95,
+      "attributes": {
+        "assertion": [
+          {
+            "label": "historical",
+            "score": 0.92
+          }
+        ]
+      }
+    }
+  ]
+}

fixtures/org.json

@@ -0,0 +1,49 @@
+{
+  "spans": [
+    {
+      "start": 4,
+      "end": 13,
+      "text": "Maya Chen",
+      "label": "person",
+      "score": 0.97,
+      "attributes": {
+        "role": [
+          {
+            "label": "executive",
+            "score": 0.96
+          }
+        ]
+      }
+    },
+    {
+      "start": 33,
+      "end": 46,
+      "text": "Daniel Okafor",
+      "label": "person",
+      "score": 0.95,
+      "attributes": {
+        "role": [
+          {
+            "label": "executive",
+            "score": 0.93
+          }
+        ]
+      }
+    },
+    {
+      "start": 88,
+      "end": 98,
+      "text": "Priya Nair",
+      "label": "person",
+      "score": 0.94,
+      "attributes": {
+        "role": [
+          {
+            "label": "analyst",
+            "score": 0.95
+          }
+        ]
+      }
+    }
+  ]
+}

fixtures/review.json

@@ -0,0 +1,64 @@
+{
+  "spans": [
+    {
+      "start": 4,
+      "end": 10,
+      "text": "screen",
+      "label": "product",
+      "score": 0.96,
+      "attributes": {
+        "sentiment": [
+          {
+            "label": "positive",
+            "score": 0.95
+          }
+        ]
+      }
+    },
+    {
+      "start": 31,
+      "end": 39,
+      "text": "keyboard",
+      "label": "product",
+      "score": 0.93,
+      "attributes": {
+        "sentiment": [
+          {
+            "label": "positive",
+            "score": 0.89
+          }
+        ]
+      }
+    },
+    {
+      "start": 61,
+      "end": 68,
+      "text": "battery",
+      "label": "product",
+      "score": 0.95,
+      "attributes": {
+        "sentiment": [
+          {
+            "label": "negative",
+            "score": 0.94
+          }
+        ]
+      }
+    },
+    {
+      "start": 94,
+      "end": 103,
+      "text": "fan noise",
+      "label": "product",
+      "score": 0.88,
+      "attributes": {
+        "sentiment": [
+          {
+            "label": "negative",
+            "score": 0.92
+          }
+        ]
+      }
+    }
+  ]
+}

fixtures/support.json

@@ -0,0 +1,61 @@
+{
+  "spans": [
+    {
+      "start": 4,
+      "end": 17,
+      "text": "export button",
+      "label": "product",
+      "score": 0.9,
+      "attributes": {
+        "impact": [
+          {
+            "label": "data_loss",
+            "score": 0.88
+          },
+          {
+            "label": "blocks_work",
+            "score": 0.74
+          }
+        ]
+      }
+    },
+    {
+      "start": 27,
+      "end": 39,
+      "text": "deletes rows",
+      "label": "event",
+      "score": 0.84,
+      "attributes": {
+        "impact": [
+          {
+            "label": "data_loss",
+            "score": 0.91
+          },
+          {
+            "label": "blocks_work",
+            "score": 0.68
+          }
+        ]
+      }
+    },
+    {
+      "start": 86,
+      "end": 105,
+      "text": "losing audited data",
+      "label": "event",
+      "score": 0.82,
+      "attributes": {
+        "impact": [
+          {
+            "label": "data_loss",
+            "score": 0.93
+          },
+          {
+            "label": "security_risk",
+            "score": 0.55
+          }
+        ]
+      }
+    }
+  ]
+}

model.py

@@ -0,0 +1,105 @@
+"""Span attributes demo — entities carry per-span attribute groups (sentiment,
+role, assertion, impact), single- or multi-label, scoped with applies_to.
+
+MOCK until GLiNER 2.5 ships. Response contract:
+  {"spans": [{"start", "end", "text", "label", "score",
+              "attributes": {"<group>": [{"label": str, "score": float}]}}]}
+  Multi-label groups return several entries in the group list.
+"""
+
+import json
+import os
+
+MOCK = os.environ.get("GLINER_MOCK", "1") == "1"
+MODEL_ID = os.environ.get("MODEL_ID", "fastino/gliner2.5")
+MODEL_URL = os.environ.get("MODEL_URL", f"https://huggingface.co/{MODEL_ID}")
+
+DEMO = {
+    "title": "Sentiment and role, <em>per span</em>",
+    "subtitle": "Document classification labels the whole review. GLiNER 2.5 attaches <strong>attributes to every entity</strong> it extracts.",
+    "model_name": "GLiNER 2.5",
+    "model_variant": "0.3B parameters · f32 · CPU",
+    "code": (
+        'schema = (model.create_schema()\n'
+        '    .entities({"product": "A product mentioned in the text",\n'
+        '               "person": "A person by name",\n'
+        '               "condition": "A medical condition"})\n'
+        '    .entity_attributes({\n'
+        '        "sentiment": AttributeGroup(\n'
+        '            labels=["positive", "neutral", "negative"],\n'
+        '            applies_to=["product"], qualify_labels=True),\n'
+        '        "role": AttributeGroup(\n'
+        '            labels=["executive", "employee", "customer", "analyst"],\n'
+        '            applies_to=["person"]),\n'
+        '        "assertion": AttributeGroup(\n'
+        '            labels=["present", "absent", "possible", "historical"],\n'
+        '            applies_to=["condition"]),\n'
+        '        "impact": AttributeGroup(\n'
+        '            labels=["blocks_work", "data_loss", "security_risk"],\n'
+        '            multi_label=True, threshold=0.40)}))\n'
+        'model.extract(text, schema)'
+    ),
+    "examples": [
+        {"chip": "Mixed review",
+         "text": "The screen is gorgeous and the keyboard feels great, but the battery is disappointing and the fan noise is unacceptable.",
+         "fixture": "review.json"},
+        {"chip": "Org announcement",
+         "text": "CEO Maya Chen announced that CFO Daniel Okafor will lead the acquisition, while analyst Priya Nair briefed reporters.",
+         "fixture": "org.json"},
+        {"chip": "Clinical note",
+         "text": "Patient denies chest pain. No evidence of pneumonia. Possible mild anemia; history of hypertension noted.",
+         "fixture": "clinical.json"},
+        {"chip": "Support ticket",
+         "text": "The export button silently deletes rows, which blocked our quarterly report and risks losing audited data.",
+         "fixture": "support.json"},
+    ],
+}
+
+_HERE = os.path.dirname(os.path.abspath(__file__))
+
+
+def warmup():
+    if MOCK:
+        for ex in DEMO["examples"]:
+            _fixture(ex["fixture"], ex["text"])
+    else:
+        _load_real()
+
+
+def infer(data):
+    text = (data.get("text") or "").replace("\r", "")
+    if not text.strip():
+        return {"spans": []}
+    if MOCK:
+        return _infer_mock(text)
+    return _infer_real(text)
+
+
+def _fixture(name, expect_text=None):
+    with open(os.path.join(_HERE, "fixtures", name)) as f:
+        out = json.load(f)
+    if expect_text is not None:
+        for sp in out.get("spans", []):
+            assert expect_text[sp["start"]:sp["end"]] == sp["text"], \
+                f"{name}: bad offsets for {sp['text']!r}"
+    return out
+
+
+def _infer_mock(text):
+    for ex in DEMO["examples"]:
+        if ex["text"] == text:
+            return _fixture(ex["fixture"])
+    return {"spans": []}
+
+
+_model = None
+
+
+def _load_real():
+    global _model
+    from gliner import GLiNER
+    _model = GLiNER.from_pretrained(MODEL_ID, token=os.environ.get("HF_TOKEN"))
+
+
+def _infer_real(text):
+    raise NotImplementedError("wire up GLiNER 2.5 here, keep the response shape")

static/brand.css

@@ -0,0 +1,161 @@
+/* Fastino System A brand tokens + shared chrome for GLiNER 2.5 demos.
+   Warm, flat, measured: linen background, orange accent, no gradients/shadows. */
+
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
+/* 0xProto Nerd: not on Google Fonts, use the Nerd Fonts CDN, fall back gracefully */
+@import url("https://www.nerdfonts.com/assets/css/webfont.css");
+
+:root {
+  --linen: #F2ECE9;        /* page background, always */
+  --greige: #EDE6E3;       /* card fills */
+  --ash: #E9DEDB;          /* hover, dividers */
+  --orange: #FF7345;       /* Fastino accent: spans, key metrics */
+  --ink: #2E2729;          /* headings, primary text */
+  --ink-soft: rgba(46, 39, 41, 0.62);  /* secondary text */
+  --ink-faint: #8A7F7B;    /* footnotes */
+  --warm-gray: #C4BBB7;    /* base/comparison data, borders */
+  --card: #FBF8F6;         /* lightest warm surface for input areas */
+  --ok: #5F8F6E;           /* muted warm green, used sparingly */
+
+  --font-head: "Geist", "Helvetica Neue", Arial, sans-serif;
+  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "0xProto Nerd Font", "0xProto Nerd", "JetBrains Mono", ui-monospace, Menlo, monospace;
+
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+
+  /* span label palette: warm, distinguishable, never color alone (always labeled) */
+  --c0: #FF7345; --c1: #C98A2D; --c2: #5F8F6E; --c3: #8A6FB8;
+  --c4: #4E7E96; --c5: #B85C74; --c6: #7D8A3C; --c7: #A0785A;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: var(--font-body);
+  background: var(--linen);
+  color: var(--ink);
+  font-size: 15px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+.wrap { max-width: 1060px; margin: 0 auto; padding: 28px 22px 48px; }
+
+/* ---- hero ---- */
+.site-intro h1 {
+  font-family: var(--font-head); font-weight: 700;
+  font-size: 34px; letter-spacing: -0.015em; line-height: 1.15;
+}
+.site-intro h1 em { font-style: normal; color: var(--orange); }
+.site-intro .sub { margin-top: 6px; color: var(--ink-soft); font-size: 15px; }
+
+/* ---- model strip ---- */
+.model-strip {
+  display: flex; align-items: center; gap: 14px;
+  margin: 18px 0 22px; padding: 12px 16px;
+  background: var(--greige); border: 1px solid var(--ash); border-radius: 12px;
+}
+.model-glyph {
+  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
+  background: var(--orange); color: #fff;
+  display: grid; place-items: center;
+  font-family: var(--font-head); font-weight: 700; font-size: 16px;
+}
+.model-name-row a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--warm-gray); }
+.model-name-row a:hover { border-bottom-color: var(--orange); }
+.model-variant { margin-left: 8px; font-size: 12.5px; color: var(--ink-faint); font-family: var(--font-mono); }
+.load-block { margin-left: auto; min-width: 220px; }
+.load-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin-bottom: 5px; }
+#load-percent { font-family: var(--font-mono); }
+.load-track { height: 5px; background: var(--ash); border-radius: 99px; overflow: hidden; }
+#load-progress { display: block; height: 100%; width: 0; background: var(--orange); transition: width 400ms var(--ease-out); }
+.model-strip.is-ready #load-progress { background: var(--ok); }
+
+/* ---- workspace cards ---- */
+.workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.workspace.single { grid-template-columns: 1fr; }
+.card {
+  background: var(--greige); border: 1px solid var(--ash); border-radius: 12px;
+  display: flex; flex-direction: column; min-height: 280px;
+}
+.panel-header {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  padding: 13px 16px 10px; border-bottom: 1px solid var(--ash);
+}
+.panel-header h2 { font-size: 14px; font-weight: 600; }
+.panel-header p { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }
+
+textarea, .editor {
+  flex: 1; width: 100%; border: 0; resize: vertical; min-height: 220px;
+  padding: 14px 16px; background: var(--card);
+  font: inherit; color: var(--ink); border-radius: 0 0 12px 12px;
+}
+textarea:focus, .editor:focus { outline: 2px solid var(--ash); outline-offset: -2px; }
+
+.output-body {
+  flex: 1; padding: 14px 16px; background: var(--card); border-radius: 0 0 12px 12px;
+  font-size: 15px; line-height: 1.9; white-space: pre-wrap; word-break: break-word;
+}
+.output-empty { color: var(--ink-faint); font-size: 13.5px; }
+
+/* ---- span highlighting (staggered reveal) ---- */
+.span {
+  border-radius: 4px; padding: 1px 2px; margin: 0 1px;
+  background: color-mix(in srgb, var(--span-color) 22%, transparent);
+  border-bottom: 2px solid var(--span-color);
+  cursor: default; position: relative;
+  opacity: 0; transform: translateY(3px);
+  animation: span-in 380ms var(--ease-out) forwards;
+  animation-delay: calc(var(--i) * 55ms);
+}
+@keyframes span-in { to { opacity: 1; transform: translateY(0); } }
+
+/* ---- legend / stats ---- */
+.controls { padding: 10px 16px 13px; border-top: 1px solid var(--ash); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.legend-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 12px; font-weight: 500; color: var(--ink);
+  background: var(--linen); border: 1px solid var(--ash); border-radius: 99px; padding: 3px 10px;
+}
+.legend-swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--span-color); }
+.legend-count { font-family: var(--font-mono); color: var(--ink-faint); font-size: 11px; }
+
+.stats { display: flex; gap: 18px; margin-left: auto; font-size: 12px; color: var(--ink-faint); }
+.stats strong { font-family: var(--font-mono); font-weight: 500; color: var(--ink); margin-left: 4px; }
+
+/* ---- example chips ---- */
+.examples-panel { margin-top: 18px; }
+.examples-label { font-size: 12px; color: var(--ink-faint); display: block; margin-bottom: 8px; }
+.example-list { display: flex; flex-wrap: wrap; gap: 8px; }
+.ex {
+  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
+  background: var(--greige); border: 1px solid var(--ash); border-radius: 99px;
+  padding: 6px 14px; cursor: pointer;
+  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
+}
+.ex:hover { background: var(--ash); }
+.ex.active { background: var(--ink); color: var(--linen); border-color: var(--ink); }
+
+/* ---- view-as-code toggle ---- */
+.code-toggle {
+  font: inherit; font-size: 12px; font-weight: 500; color: var(--ink-soft);
+  background: var(--linen); border: 1px solid var(--ash); border-radius: 8px;
+  padding: 4px 11px; cursor: pointer;
+}
+.code-toggle:hover { background: var(--ash); }
+.code-panel {
+  display: none; margin: 0 16px 14px; padding: 12px 14px;
+  background: var(--ink); color: var(--linen); border-radius: 10px;
+  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
+  white-space: pre; overflow-x: auto;
+}
+.code-panel.open { display: block; }
+
+.footnote { margin-top: 22px; font-size: 12px; color: var(--ink-faint); }
+.footnote a { color: var(--ink-soft); }
+
+@media (max-width: 860px) { .workspace { grid-template-columns: 1fr; } .load-block { display: none; } }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}

static/index.html

@@ -0,0 +1,185 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Span attributes — GLiNER 2.5</title>
+<link rel="stylesheet" href="brand.css">
+<style>
+  /* demo-specific: attribute badges attached to spans */
+  .span-wrap { position: relative; }
+  .attr {
+    display: inline-block; vertical-align: super;
+    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
+    color: #fff; background: var(--attr-color); border-radius: 4px;
+    padding: 0 4px; margin-left: 2px; line-height: 1.6;
+    opacity: 0; animation: span-in 320ms var(--ease-out) forwards;
+    animation-delay: calc(var(--i) * 55ms + 160ms);
+  }
+  .attr.pos { background: var(--ok); }
+  .attr.neg { background: #B85C5C; }
+  .attr.neu { background: var(--warm-gray); }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header class="site-intro">
+    <h1 id="title"></h1>
+    <p class="sub" id="subtitle"></p>
+  </header>
+
+  <section class="model-strip is-loading" id="model-strip" aria-label="Model status">
+    <span class="model-glyph" aria-hidden="true">G</span>
+    <div class="model-copy">
+      <div class="model-name-row">
+        <a id="model-link" href="#" target="_blank" rel="noopener"></a>
+        <span class="model-variant" id="model-variant"></span>
+      </div>
+    </div>
+    <div class="load-block">
+      <div class="load-meta">
+        <span id="status" role="status" aria-live="polite">Connecting…</span>
+        <span id="load-percent">0%</span>
+      </div>
+      <div class="load-track"><span id="load-progress"></span></div>
+    </div>
+  </section>
+
+  <main>
+    <div class="workspace">
+      <section class="card">
+        <div class="panel-header"><div><h2>Text</h2><p>Edit or pick an example below</p></div></div>
+        <textarea id="input" spellcheck="false"></textarea>
+      </section>
+
+      <section class="card">
+        <div class="panel-header">
+          <div><h2>Spans &amp; attributes</h2><p>Attribute groups attached per span</p></div>
+          <button type="button" class="code-toggle" id="code-toggle">&lt;/&gt; schema</button>
+        </div>
+        <pre class="code-panel" id="code-panel"></pre>
+        <div id="output" class="output-body"><div class="output-empty">Extracted spans will appear here.</div></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>
+
+    <section class="examples-panel" aria-label="Examples">
+      <span class="examples-label">Examples</span>
+      <div class="example-list" id="examples"></div>
+    </section>
+
+    <p class="footnote">
+      Demo data. Attribute groups are scoped with <code>applies_to</code>: sentiment on products,
+      role on people, assertion on conditions. GLiNER 2.5 by
+      <a href="https://fastino.ai" target="_blank" rel="noopener">Fastino</a>.
+    </p>
+  </main>
+</div>
+
+<script src="strip.js"></script>
+<script>
+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 = [];
+
+// sentiment groups get semantic badge colors; everything else uses the group palette
+const ATTR_TONE = { positive: "pos", present: "pos", executive: "pos",
+                    negative: "neg", absent: "neg", data_loss: "neg", security_risk: "neg",
+                    neutral: "neu", historical: "neu" };
+
+function attrBadges(attributes, i) {
+  let html = "";
+  for (const [group, entries] of Object.entries(attributes || {})) {
+    for (const e of entries) {
+      const tone = ATTR_TONE[e.label] || "";
+      html += `<span class="attr ${tone}" style="--i:${i}" title="${esc(group)} · ${e.score.toFixed(2)}">${esc(e.label)}</span>`;
+    }
+  }
+  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 = `var(--c${labels.indexOf(sp.label) % 8})`;
+    const tip = `${sp.label} · ${sp.score.toFixed(2)}`;
+    html += `<span class="span-wrap"><span class="span" style="--span-color:${c};--i:${i}" title="${esc(tip)}">${esc(sp.text)}</span>${attrBadges(sp.attributes, i)}</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;
+  $("legend").innerHTML = Object.entries(counts).map(([label, n]) =>
+    `<span class="legend-chip" style="--span-color:var(--c${labels.indexOf(label) % 8})">
+       <span class="legend-swatch"></span>${esc(label)}<span class="legend-count">${n}</span>
+     </span>`).join("");
+}
+
+async function infer() {
+  if (!READY) return;
+  const v = ++version, text = $("input").value;
+  if (!text.trim()) {
+    $("output").innerHTML = '<div class="output-empty">Extracted spans will appear here.</div>';
+    $("legend").innerHTML = ""; $("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) { return; }
+  if (v !== version) return;
+  const spans = data.spans || [];
+  labels = [...new Set([...labels, ...spans.map((s) => s.label)])];
+  $("output").innerHTML = render(text, spans);
+  renderLegend(spans);
+  $("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-panel").classList.toggle("open"));
+
+(async () => {
+  const cfg = await fetchConfig();
+  document.title = `${cfg.title.replace(/<[^>]+>/g, "")} — GLiNER 2.5`;
+  $("title").innerHTML = cfg.title;
+  $("subtitle").innerHTML = cfg.subtitle;
+  $("model-link").textContent = cfg.model_name;
+  $("model-link").href = cfg.model_url || "#";
+  $("model-variant").textContent = cfg.model_variant || "";
+  $("code-panel").textContent = cfg.code || "";
+
+  cfg.examples.forEach((ex, i) => {
+    const b = document.createElement("button");
+    b.type = "button"; b.className = "ex" + (i === 0 ? " active" : "");
+    b.textContent = ex.chip;
+    b.addEventListener("click", () => {
+      document.querySelectorAll(".ex").forEach((x) => x.classList.toggle("active", x === b));
+      $("input").value = ex.text;
+      inferSoon(40);
+    });
+    $("examples").append(b);
+  });
+
+  if (cfg.examples[0]) $("input").value = cfg.examples[0].text;
+  READY = await waitForServer();
+  stripSet(READY ? "Model ready" : "Model unavailable", READY ? "ready" : "error", 100);
+  if (READY) infer();
+})();
+</script>
+</body>
+</html>

static/strip.js

@@ -0,0 +1,49 @@
+// strip.js — shared plumbing for every GLiNER 2.5 demo page.
+// 1. __sign shim: private HF Spaces sign the iframe URL; Safari/incognito block
+//    the third-party cookie, so carry the token on same-origin API requests.
+// 2. readiness poll: drives the model strip (loading -> preparing -> ready).
+// 3. fetchConfig(): title/subtitle/examples, so the page is data-driven.
+
+(() => {
+  const sign = new URLSearchParams(location.search).get("__sign");
+  if (!sign) return;
+  const orig = self.fetch.bind(self);
+  self.fetch = (input, init) => {
+    try {
+      const u = new URL(typeof input === "string" ? input : input.url, location.href);
+      if (u.origin === location.origin && !u.searchParams.has("__sign")) {
+        u.searchParams.set("__sign", sign);
+        input = u.toString();
+      }
+    } catch (e) { /* non-URL input: pass through */ }
+    return orig(input, init);
+  };
+})();
+
+function stripSet(message, tone, pct) {
+  const strip = document.getElementById("model-strip");
+  document.getElementById("status").textContent = message;
+  strip.className = `model-strip is-${tone}`;
+  if (pct != null) {
+    document.getElementById("load-progress").style.width = `${pct}%`;
+    document.getElementById("load-percent").textContent = `${Math.round(pct)}%`;
+  }
+}
+
+async function waitForServer() {
+  stripSet("Connecting to server…", "loading", 12);
+  for (let attempt = 0; attempt < 300; attempt++) {
+    try {
+      const r = await fetch("api/ready", { cache: "no-store" });
+      if (r.ok && (await r.json()).ready) return true;
+    } catch (e) { /* still starting */ }
+    stripSet("Warming up the model…", "preparing", Math.min(92, 12 + attempt * 4));
+    await new Promise((r) => setTimeout(r, 1000));
+  }
+  return false;
+}
+
+async function fetchConfig() {
+  const r = await fetch("api/config", { cache: "no-store" });
+  return r.json();
+}