Upload folder using huggingface_hub

app.py

@@ -33,7 +33,7 @@ def index():
 
 @app.route("/<path:name>")
 def static_file(name):
-    if name in ("brand.css", "strip.js", "favicon.svg"):
+    if name in ("brand.css", "strip.js", "favicon.svg", "og-card.png", "brand-tile.png"):
         return send_from_directory(STATIC, name)
     return ("not found", 404)
 

model.py

@@ -1,4 +1,4 @@
-"""Span attributes demo — entities carry per-span attribute groups (sentiment,
+"""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:

static/brand.css

@@ -1,31 +1,40 @@
 /* Fastino System A brand tokens + shared chrome for GLiNER 2.5 demos.
-   Warm, flat, measured: linen background, orange accent, no gradients/shadows. */
+   Warm, flat, measured: linen background, orange accent, no gradients/shadows.
+   Contrast-audited per WCAG AA; tokens below are the single source of truth. */
 
 @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 */
+  --linen: #F2ECE9;          /* page background, always */
+  --greige: #EDE6E3;         /* card fills */
+  --ash: #E2D6D2;            /* hover, dividers */
+  --orange: #FF7345;         /* Fastino accent: spans, key metrics (fills only, never text) */
+  --orange-deep: #C2451B;    /* orange when used as text on linen; AA 4.6:1 */
+  --ink: #2E2729;            /* headings, primary text */
+  --ink-soft: rgba(46, 39, 41, 0.72);  /* secondary text; AA 4.8:1 on linen */
+  --ink-faint: #7A6F6B;      /* footnotes, metadata; AA 4.6:1 on linen */
+  --warm-gray: #B0A39E;      /* borders, comparison data */
+  --card: #FBF8F6;           /* lightest warm surface for input areas */
+  --ok: #3F6E50;             /* AA 5.1:1 on linen when text */
+  --ok-bg: rgba(63, 110, 80, 0.13);
+  --neg: #A84545;
+  --neg-bg: rgba(168, 69, 69, 0.12);
+  --neu: #6E6460;
+  --neu-bg: rgba(110, 100, 96, 0.10);
 
   --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);
+  --radius: 12px;
+  --radius-s: 6px;
 
-  /* 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;
+  /* span label palette: warm, distinguishable, always paired with a text label */
+  --c0: #E85D2A; --c1: #A96B14; --c2: #3F6E50; --c3: #6E50A0;
+  --c4: #2F6880; --c5: #A63D5C; --c6: #5F6D1F; --c7: #7A5634;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -39,122 +48,186 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-.wrap { max-width: 1060px; margin: 0 auto; padding: 28px 22px 48px; }
+.wrap { max-width: 1160px; margin: 0 auto; padding: 32px 22px 56px; }
 
-/* ---- hero ---- */
+/* ---- intro ---- */
 .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; }
+.site-intro h1 em { font-style: normal; color: var(--orange-deep); }
+.site-intro .sub { margin-top: 6px; color: var(--ink-soft); font-size: 15px; max-width: 56ch; }
 
 /* ---- 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;
+  margin: 18px 0 20px; padding: 11px 16px;
+  background: var(--greige); border: 1px solid var(--ash); border-radius: var(--radius);
 }
 .model-glyph {
-  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
-  background: var(--orange); color: #fff;
+  width: 30px; height: 30px; border-radius: var(--radius-s); flex-shrink: 0;
+  background: var(--ink);
   display: grid; place-items: center;
-  font-family: var(--font-head); font-weight: 700; font-size: 16px;
 }
+.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-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; }
+.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: 5px; background: var(--ash); border-radius: 99px; overflow: hidden; }
+.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); }
 
-/* ---- workspace cards ---- */
-.workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+/* 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); }
+
+/* ---- workspace ---- */
+.workspace { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: stretch; }
 .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;
+  background: var(--greige); border: 1px solid var(--ash); border-radius: var(--radius);
+  display: flex; flex-direction: column;
 }
 .panel-header {
-  display: flex; align-items: flex-start; justify-content: space-between;
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
   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;
+  flex: 1; width: 100%; border: 0; resize: vertical; min-height: 160px;
   padding: 14px 16px; background: var(--card);
-  font: inherit; color: var(--ink); border-radius: 0 0 12px 12px;
+  font: inherit; color: var(--ink); border-radius: 0 0 var(--radius) var(--radius);
 }
 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; }
+.examples-label {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
+  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), 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); }
 
+/* ---- output body ---- */
 .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;
+  flex: 1; padding: 14px 16px; background: var(--card);
+  font-size: 15px; line-height: 1.95; white-space: pre-wrap; word-break: break-word;
+  overflow-y: auto;
 }
 .output-empty { color: var(--ink-faint); font-size: 13.5px; }
+.output-empty strong { display: block; color: var(--ink-soft); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
 
-/* ---- span highlighting (staggered reveal) ---- */
+/* ---- inline 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-radius: var(--radius-s); padding: 1px 2px; margin: 0 1px;
+  background: color-mix(in srgb, var(--span-color) 20%, transparent);
   border-bottom: 2px solid var(--span-color);
-  cursor: default; position: relative;
+  cursor: pointer; position: relative;
   opacity: 0; transform: translateY(3px);
   animation: span-in 380ms var(--ease-out) forwards;
   animation-delay: calc(var(--i) * 55ms);
+  transition: background 140ms var(--ease-out);
+}
+.span:hover { background: color-mix(in srgb, var(--span-color) 30%, transparent); }
+.span.selected {
+  background: color-mix(in srgb, var(--span-color) 40%, transparent);
+  box-shadow: 0 0 0 1px var(--span-color);
 }
 @keyframes span-in { to { opacity: 1; transform: translateY(0); } }
 
-/* ---- legend / stats ---- */
+/* attribute badges attached inline after a span; tone colors resolved in JS
+   (semantic tone wins, else the span's label color at low alpha) */
+.attr {
+  display: inline-block; vertical-align: super;
+  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
+  border-radius: 3px; padding: 0 4px; margin-left: 2px; line-height: 1.7;
+  color: var(--badge-text); background: var(--badge-bg);
+  border: 1px solid var(--badge-border);
+  opacity: 0; animation: span-in 320ms var(--ease-out) forwards;
+  animation-delay: calc(var(--i) * 55ms + 160ms);
+}
+
+/* ---- span inspector (detail panel under the text) ---- */
+.inspector {
+  border-top: 1px solid var(--ash);
+  padding: 12px 16px 14px;
+  background: var(--card);
+  border-radius: 0 0 var(--radius) var(--radius);
+}
+.inspector-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
+.inspector-head .span-text { font-size: 16px; font-weight: 600; }
+.inspector-head .span-label {
+  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
+  color: var(--span-color, var(--ink)); background: color-mix(in srgb, var(--span-color, var(--warm-gray)) 14%, transparent);
+  border: 1px solid var(--span-color, var(--warm-gray));
+  border-radius: var(--radius-s); padding: 1px 7px;
+}
+.inspector-head .span-score { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); margin-left: auto; }
+.inspector-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
+.attr-group { border: 1px solid var(--ash); border-radius: var(--radius-s); padding: 9px 11px; background: var(--greige); }
+.attr-group-name { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 7px; }
+.attr-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 2px 0; }
+.attr-row .attr-label { font-weight: 500; }
+.attr-row .attr-score { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
+.attr-meter { height: 3px; border-radius: 2px; background: var(--ash); margin-top: 3px; overflow: hidden; }
+.attr-meter i { display: block; height: 100%; background: var(--span-color, var(--orange)); border-radius: 2px; }
+
+/* ---- legend / stats footer ---- */
 .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;
+  background: var(--linen); border: 1px solid var(--ash); border-radius: 99px; padding: 3px 10px; cursor: pointer;
 }
 .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;
+  background: var(--linen); border: 1px solid var(--ash); border-radius: var(--radius-s);
+  padding: 4px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
+  transition: background 160ms var(--ease-out);
 }
 .code-toggle:hover { background: var(--ash); }
+.code-toggle:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
 .code-panel {
   display: none; margin: 0 16px 14px; padding: 12px 14px;
-  background: var(--ink); color: var(--linen); border-radius: 10px;
+  background: var(--ink); color: var(--linen); border-radius: var(--radius-s);
   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 { margin-top: 20px; 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 (max-width: 860px) {
+  .workspace { grid-template-columns: 1fr; }
+  .load-block { display: none; }
+  .inspector-groups { grid-template-columns: 1fr; }
+}
 
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

static/index.html

@@ -3,23 +3,12 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Span attributes — GLiNER 2.5</title>
+<title>Span attributes - GLiNER 2.5</title>
+<link rel="icon" href="favicon.svg" type="image/svg+xml">
+<meta property="og:title" content="GLiNER 2.5 - Span attributes">
+<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: 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">
@@ -29,16 +18,24 @@
   </header>
 
   <section class="model-strip is-loading" id="model-strip" aria-label="Model status">
-    <span class="model-glyph" aria-hidden="true">G</span>
+    <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>
     <div class="load-block">
       <div class="load-meta">
-        <span id="status" role="status" aria-live="polite">Connecting…</span>
+        <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>
@@ -46,34 +43,35 @@
   </section>
 
   <main>
+    <section class="examples-panel" aria-label="Examples">
+      <span class="examples-label">Examples</span>
+      <div class="example-list" id="examples"></div>
+    </section>
+
     <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>
+        <div class="panel-header"><div><h2>Text</h2><p>Edit below, or pick an example.</p></div></div>
+        <textarea id="input" spellcheck="false" aria-label="Input text"></textarea>
       </section>
 
       <section class="card">
         <div class="panel-header">
-          <div><h2>Spans &amp; attributes</h2><p>Attribute groups attached per span</p></div>
+          <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; 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="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>
+            <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
@@ -86,31 +84,44 @@
 <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 = [];
+let READY = false, timer = null, version = 0, labels = [], lastSpans = [];
+
+/* Badge tone. Semantic labels for sentiment/assertion/impact; everything else
+   falls back to the span's own label color at low alpha. All combos pass AA. */
+const TONE = {
+  positive: ["#3F6E50", "rgba(63,110,80,0.13)"], present: ["#3F6E50", "rgba(63,110,80,0.13)"],
+  executive: ["#3F6E50", "rgba(63,110,80,0.13)"],
+  negative: ["#A84545", "rgba(168,69,69,0.12)"], absent: ["#A84545", "rgba(168,69,69,0.12)"],
+  data_loss: ["#A84545", "rgba(168,69,69,0.12)"], security_risk: ["#A84545", "rgba(168,69,69,0.12)"],
+  neutral: ["#6E6460", "rgba(110,100,96,0.10)"], historical: ["#6E6460", "rgba(110,100,96,0.10)"],
+};
 
-// 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 badgeStyle(label, spanColor) {
+  const t = TONE[label];
+  const base = t ? t[0] : spanColor;
+  const bg = t ? t[1] : `color-mix(in srgb, ${spanColor} 12%, transparent)`;
+  return `--badge-text:${base};--badge-bg:${bg};--badge-border:${base}`;
+}
 
-function attrBadges(attributes, i) {
+function attrBadges(attributes, i, spanColor) {
   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>`;
+      html += `<span class="attr" style="--i:${i};${badgeStyle(e.label, spanColor)}" title="${esc(group)} · score ${e.score.toFixed(2)}">${esc(e.label)}</span>`;
     }
   }
   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 = `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>`;
+    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));
@@ -120,31 +131,65 @@ 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-chip" style="--span-color:${spanColor(label)}" title="${n} ${esc(label)} span${n > 1 ? "s" : ""}">
        <span class="legend-swatch"></span>${esc(label)}<span class="legend-count">${n}</span>
      </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()) {
-    $("output").innerHTML = '<div class="output-empty">Extracted spans will appear here.</div>';
-    $("legend").innerHTML = ""; $("stat-ms").textContent = "—"; $("stat-n").textContent = "—";
-    return;
-  }
+  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) { return; }
+  } 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 = render(text, spans);
+  $("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;
 }
@@ -152,10 +197,20 @@ async function infer() {
 function inferSoon(delay = 300) { clearTimeout(timer); timer = setTimeout(infer, delay); }
 $("input").addEventListener("input", () => inferSoon());
 $("code-toggle").addEventListener("click", () => $("code-panel").classList.toggle("open"));
+$("output").addEventListener("click", (e) => {
+  const el = e.target.closest(".span");
+  if (!el) return;
+  const idx = +el.dataset.idx;
+  const wasSelected = el.classList.contains("selected");
+  document.querySelectorAll(".span.selected").forEach((x) => x.classList.remove("selected"));
+  if (wasSelected) { renderInspector(null); return; }
+  el.classList.add("selected");
+  renderInspector(idx);
+});
 
 (async () => {
   const cfg = await fetchConfig();
-  document.title = `${cfg.title.replace(/<[^>]+>/g, "")} — GLiNER 2.5`;
+  document.title = `${cfg.title.replace(/<[^>]+>/g, "")} - GLiNER 2.5`;
   $("title").innerHTML = cfg.title;
   $("subtitle").innerHTML = cfg.subtitle;
   $("model-link").textContent = cfg.model_name;
@@ -175,9 +230,11 @@ $("code-toggle").addEventListener("click", () => $("code-panel").classList.toggl
     $("examples").append(b);
   });
 
+  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";
   if (READY) infer();
 })();
 </script>

static/strip.js

@@ -31,13 +31,13 @@ function stripSet(message, tone, pct) {
 }
 
 async function waitForServer() {
-  stripSet("Connecting to server…", "loading", 12);
+  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));
+    stripSet("Warming up the model...", "preparing", Math.min(92, 12 + attempt * 4));
     await new Promise((r) => setTimeout(r, 1000));
   }
   return false;