Upload folder using huggingface_hub

model.py

@@ -18,7 +18,7 @@ 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",
+    "model_variant": "0.3B parameters, f32, CPU",
     "code": (
         'schema = (model.create_schema()\n'
         '    .entities({"product": "A product mentioned in the text",\n'

static/brand.css

@@ -61,31 +61,39 @@ body {
 /* ---- model strip ---- */
 .model-strip {
   display: flex; align-items: center; gap: 14px;
-  margin: 18px 0 20px; padding: 11px 16px;
-  background: var(--greige); border: 1px solid var(--ash); border-radius: var(--radius);
-}
-.model-glyph {
-  width: 30px; height: 30px; border-radius: var(--radius-s); flex-shrink: 0;
-  background: var(--ink);
-  display: grid; place-items: center;
+  margin: 18px 0 20px; padding: 12px 16px;
+  background: transparent; border: 0; border-bottom: 1px solid var(--ash); border-radius: 0;
 }
-.model-glyph svg { width: 15px; height: 15px; color: var(--linen); }
-.model-name-row a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--warm-gray); }
+.model-copy { flex: 1; min-width: 0; }
+.model-name-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
+.model-name-row a { color: var(--ink); font-weight: 600; text-decoration: none; font-size: 15px; border-bottom: 1px solid transparent; }
 .model-name-row a:hover { border-bottom-color: var(--orange-deep); color: var(--orange-deep); }
-.model-variant { margin-left: 8px; font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); }
-.load-block { margin-left: auto; min-width: 210px; }
-.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: 4px; 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); }
-.model-strip.is-error #load-progress { background: var(--neg); }
-
-/* ready-state stats cluster (progress bar retires once loaded) */
-.model-stats { display: none; align-items: baseline; gap: 18px; font-size: 12px; color: var(--ink-faint); }
-.model-strip.is-ready .model-stats { display: flex; }
-.model-strip.is-ready .load-block { visibility: hidden; height: 0; min-width: 0; }
-.model-stats b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
+.model-variant { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); }
+
+.status-pill {
+  display: inline-flex; align-items: center; gap: 7px;
+  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
+  color: var(--ink-soft); white-space: nowrap;
+  padding: 3px 9px; border: 1px solid var(--ash); border-radius: 4px;
+  background: var(--greige);
+}
+.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warm-gray); flex-shrink: 0; }
+.status-pill.is-ready { border-color: var(--ok-bg); color: var(--ok); }
+.status-pill.is-ready .status-dot { background: var(--ok); }
+.status-pill.is-error { border-color: rgba(168,69,69,0.3); color: var(--neg); }
+.status-pill.is-error .status-dot { background: var(--neg); }
+.status-pill.is-loading .status-dot { background: var(--orange); animation: pulse-dot 1.1s ease-in-out infinite; }
+@keyframes pulse-dot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
+
+.load-block { min-width: 180px; }
+.load-track { height: 3px; background: transparent; border-radius: 99px; overflow: hidden; position: relative; }
+.load-track::before { content: ""; position: absolute; inset: 0; background: var(--ash); border-radius: 99px; opacity: 0; transition: opacity 200ms; }
+.model-strip.is-loading .load-track::before, .model-strip.is-preparing .load-track::before { opacity: 1; }
+#load-progress { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 99px; transition: width 400ms var(--ease-out); position: relative; }
+.model-strip.is-ready #load-progress { width: 0; opacity: 0; }
+.model-strip.is-ready #load-percent { display: none; }
+
+/* hide percent counter entirely; status pill communicates state */
 
 /* ---- workspace ---- */
 .workspace { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: stretch; }
@@ -109,23 +117,37 @@ textarea, .editor {
 textarea:focus, .editor:focus { outline: 2px solid var(--ash); outline-offset: -2px; }
 textarea:focus-visible { outline: 2px solid var(--orange-deep); }
 
-/* ---- example chips (relocated above workspace) ---- */
-.examples-panel { margin: 0 0 14px; }
+/* ---- example selector: indexed action rows (no pill chips) ---- */
+.examples-panel { margin: 0 0 16px; }
 .examples-label {
   font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
-  color: var(--ink-faint); display: block; margin-bottom: 8px;
+  color: var(--ink-faint); display: block; margin-bottom: 10px;
+}
+.example-list {
+  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-top: 1px solid var(--ash); border-bottom: 1px solid var(--ash);
 }
-.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), transform 80ms var(--ease-out);
-}
-.ex:hover { background: var(--ash); }
-.ex:active { transform: scale(0.97); }
-.ex:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
-.ex.active { background: var(--ink); color: var(--linen); border-color: var(--ink); }
+  font: inherit; text-align: left; background: transparent; border: 0;
+  border-right: 1px solid var(--ash);
+  padding: 12px 14px 11px; cursor: pointer;
+  display: flex; flex-direction: column; gap: 4px;
+  transition: background 140ms var(--ease-out);
+  position: relative;
+}
+.ex:last-child { border-right: 0; }
+.ex:hover { background: var(--greige); }
+.ex:active { transform: none; }
+.ex:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: -2px; z-index: 1; }
+.ex .ex-idx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
+.ex .ex-name { font-size: 13px; font-weight: 500; color: var(--ink); }
+.ex.active { background: var(--greige); }
+.ex.active .ex-idx { color: var(--orange-deep); }
+.ex.active::after {
+  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
+  background: var(--orange-deep);
+}
+@media (max-width: 860px) { .example-list { grid-template-columns: 1fr 1fr; } }
 
 /* ---- output body ---- */
 .output-body {

static/index.html

@@ -18,27 +18,18 @@
   </header>
 
   <section class="model-strip is-loading" id="model-strip" aria-label="Model status">
-    <span class="model-glyph" aria-hidden="true">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-        <circle cx="5.5" cy="12" r="2.2"/><circle cx="18.5" cy="5" r="2.2"/><circle cx="18.5" cy="19" r="2.2"/>
-        <path d="M7.3 10.8 16.6 6M7.3 13.2 16.6 18"/>
-      </svg>
-    </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="model-stats" aria-hidden="true">
-      <span id="strip-state">Ready</span>
-    </div>
+    <span class="status-pill is-loading" id="status-pill">
+      <span class="status-dot" aria-hidden="true"></span>
+      <span id="status" role="status" aria-live="polite">Connecting</span>
+    </span>
     <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 class="load-track" aria-hidden="true"><span id="load-progress"></span></div>
     </div>
   </section>
 
@@ -221,7 +212,7 @@ $("output").addEventListener("click", (e) => {
   cfg.examples.forEach((ex, i) => {
     const b = document.createElement("button");
     b.type = "button"; b.className = "ex" + (i === 0 ? " active" : "");
-    b.textContent = ex.chip;
+    b.innerHTML = `<span class="ex-idx">${String(i + 1).padStart(2, "0")}</span><span class="ex-name">${esc(ex.chip)}</span>`;
     b.addEventListener("click", () => {
       document.querySelectorAll(".ex").forEach((x) => x.classList.toggle("active", x === b));
       $("input").value = ex.text;
@@ -233,8 +224,7 @@ $("output").addEventListener("click", (e) => {
   setEmpty("idle");
   if (cfg.examples[0]) $("input").value = cfg.examples[0].text;
   READY = await waitForServer();
-  stripSet(READY ? "Model ready" : "Model unavailable", READY ? "ready" : "error", 100);
-  $("strip-state").textContent = READY ? "Ready" : "Unavailable";
+  stripSet(READY ? "Model ready" : "Model unavailable", READY ? "ready" : "error", READY ? 100 : 0);
   if (READY) infer();
 })();
 </script>

static/strip.js

@@ -1,4 +1,4 @@
-// strip.js — shared plumbing for every GLiNER 2.5 demo page.
+// 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).
@@ -22,22 +22,23 @@
 
 function stripSet(message, tone, pct) {
   const strip = document.getElementById("model-strip");
+  const pill = document.getElementById("status-pill");
   document.getElementById("status").textContent = message;
   strip.className = `model-strip is-${tone}`;
+  if (pill) pill.className = `status-pill 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);
+  stripSet("Connecting", "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));
+    stripSet("Warming up", "loading", Math.min(92, 12 + attempt * 4));
     await new Promise((r) => setTimeout(r, 1000));
   }
   return false;