Spaces:

rafmacalaba
/

datause-extraction-webgpu

Running

App Files Files Community

rafmacalaba commited on Aug 17

Commit

66eabcc

verified ·

1 Parent(s): 7bdbabf

deploy data-use extraction webgpu demo

Browse files

Files changed (5) hide show

.gitignore +1 -0
README.md +39 -5
index.html +1265 -17
lib/provenance.js +62 -0
main.js +876 -0

.gitignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ .DS_Store

README.md CHANGED Viewed

@@ -1,10 +1,44 @@
 ---
-title: Datause Extraction Webgpu
-emoji: 🏆
-colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Data-use Extraction — WebGPU
+colorFrom: indigo
+colorTo: blue
 sdk: static
+sdk_version: 1.0.0
 pinned: false
+license: apache-2.0
+short_description: In-browser data-use extraction on WebGPU
 ---
+# Data-use Extraction — WebGPU
+Fully client-side demo that extracts data mentions from research text and
+attributes each one with provenance and usage/impact — all running locally in
+your browser on WebGPU. No server, no uploads; nothing leaves your machine.
+## Pipeline
+```
+text
+  → span model (GLiNER)          → mention spans + specificity
+  → LFM2.5-350M multitask        → provenance {producer, year, geography, acronym}
+                                   + usage/impact {data_type, usage_action, impact_label, usage_summary}
+  → verbatim filter → render
+```
+## Models
+| stage | model | HF repo |
+|---|---|---|
+| span detection | GLiNER | [`rafmacalaba/gliner_datause_extended-onnx`](https://huggingface.co/rafmacalaba/gliner_datause_extended-onnx) |
+| attribution | LFM2.5-350M multitask | [`rafmacalaba/lfm2.5-350M-datause-multitask-onnx`](https://huggingface.co/rafmacalaba/lfm2.5-350M-datause-multitask-onnx) |
+Models download from the Hub on first load and are cached in your browser's
+IndexedDB. Requires a WebGPU-capable browser (Chrome/Edge with WebGPU enabled).
+## Run locally
+```bash
+git clone https://github.com/rafmacalaba/ai4data-playground.git
+cd ai4data-playground/web && python3 -m http.server 8000
+# open http://localhost:8000
+```

index.html CHANGED Viewed

@@ -1,19 +1,1267 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Data-use extraction — WebGPU demo</title>
+  <script>
+    (function () {
+      try {
+        if (localStorage.getItem("datause-theme") === "dark") {
+          document.documentElement.setAttribute("data-theme", "dark");
+        }
+      } catch (e) {}
+    })();
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --bg: #eaf3fb;
+      --bg-dot: #d6dee8;
+      --grad-1: #e9f4fc;
+      --grad-2: #b9dcef;
+      --grad-3: #7cc1e8;
+      --grad-4: #009cde;
+      --grad-glow: rgba(0, 156, 222, 0.28);
+      --grad-haze: rgba(255, 255, 255, 0.65);
+      --surface: #ffffff;
+      --surface-2: #f1f5f9;
+      --surface-3: #e7eef6;
+      --text: #0f172a;
+      --text-muted: #475569;
+      --text-subtle: #64748b;
+      --border: #e2e8f0;
+      --border-strong: #cbd5e1;
+      --accent: #002244;
+      --accent-2: #009cde;
+      --accent-hover: #00172e;
+      --accent-soft: rgba(0, 156, 222, 0.10);
+      --accent-glow: rgba(0, 156, 222, 0.35);
+      --wb: #009cde;
+      --ok: #16a34a;
+      --warn: #d97706;
+      --err: #dc2626;
+      --err-soft: rgba(220, 38, 38, 0.08);
+      --btn-fg: #ffffff;
+      --log-bg: #0b1220;
+      --log-fg: #cbd5e1;
+      --cat-fur: #ede7dc;
+      --cat-fur-shadow: #d8cfbe;
+      --cat-inner: #ffc7d6;
+      --cat-eye: #1a1a1a;
+      --cat-pupil: #ede7dc;
+      --cat-nose: #ff7a8a;
+      --cat-z: #94a3b8;
+      --cat-sparkle: #009cde;
+      --na: #1d4ed8; --na-bg: #dbeafe;
+      --de: #002244; --de-bg: #e7edf5;
+      --va: #475569; --va-bg: #f1f5f9;
+      --radius: 16px;
+      --radius-sm: 10px;
+      --radius-lg: 20px;
+      --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
+      --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 32px -16px rgba(15, 23, 42, 0.18);
+      --shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 24px 48px -20px rgba(15, 23, 42, 0.25);
+      --font: "Inter", system-ui, -apple-system, sans-serif;
+      --mono: "JetBrains Mono", ui-monospace, monospace;
+      --ease: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    [data-theme="dark"] {
+      --bg: #05080d;
+      --bg-dot: #1c2333;
+      --grad-1: #07142a;
+      --grad-2: #0e2a4f;
+      --grad-3: #155184;
+      --grad-4: #009cde;
+      --grad-glow: rgba(0, 156, 222, 0.22);
+      --grad-haze: rgba(125, 211, 252, 0.10);
+      --surface: #0c1119;
+      --surface-2: #131a23;
+      --surface-3: #1a2230;
+      --text: #f1f5f9;
+      --text-muted: #94a3b8;
+      --text-subtle: #64748b;
+      --border: #1e293b;
+      --border-strong: #334155;
+      --accent: #38bdf8;
+      --accent-2: #38bdf8;
+      --accent-hover: #7dd3fc;
+      --accent-soft: rgba(56, 189, 248, 0.12);
+      --accent-glow: rgba(56, 189, 248, 0.35);
+      --wb: #38bdf8;
+      --ok: #4ade80;
+      --warn: #fbbf24;
+      --err: #f87171;
+      --err-soft: rgba(248, 113, 113, 0.12);
+      --btn-fg: #05080d;
+      --log-bg: #020617;
+      --log-fg: #94a3b8;
+      --cat-fur: #f5ebd7;
+      --cat-fur-shadow: #d8c8a8;
+      --cat-inner: #ff9eb5;
+      --cat-eye: #0a0e0f;
+      --cat-pupil: #f5ebd7;
+      --cat-nose: #ff7a8a;
+      --cat-z: #64748b;
+      --cat-sparkle: #38bdf8;
+      --na: #93c5fd; --na-bg: rgba(59, 130, 246, 0.18);
+      --de: #cbd5e1; --de-bg: rgba(203, 213, 225, 0.10);
+      --va: #94a3b8; --va-bg: rgba(148, 163, 184, 0.15);
+      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+      --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.5);
+      --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
+    }
+    *, *::before, *::after { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body {
+      margin: 0;
+      font-family: var(--font);
+      background-color: var(--bg);
+      background-image:
+        radial-gradient(ellipse 70% 55% at 18% 12%, var(--grad-haze), transparent 62%),
+        radial-gradient(ellipse 60% 50% at 92% 88%, var(--grad-glow), transparent 70%),
+        linear-gradient(165deg, var(--grad-1) 0%, var(--grad-2) 45%, var(--grad-3) 88%, var(--grad-4) 130%);
+      background-attachment: fixed;
+      color: var(--text);
+      line-height: 1.55;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
+    }
+    .num { font-variant-numeric: tabular-nums; }
+    .wrap { max-width: 1200px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
+    /* Loader ---------------------------------------------------------- */
+    .loader {
+      position: fixed; inset: 0; z-index: 100;
+      background-color: var(--bg);
+      background-image:
+        radial-gradient(ellipse 70% 55% at 18% 12%, var(--grad-haze), transparent 62%),
+        radial-gradient(ellipse 60% 50% at 92% 88%, var(--grad-glow), transparent 70%),
+        linear-gradient(165deg, var(--grad-1) 0%, var(--grad-2) 45%, var(--grad-3) 88%, var(--grad-4) 130%);
+      background-attachment: fixed;
+      display: flex; align-items: center; justify-content: center;
+      transition: opacity .55s var(--ease), visibility .55s;
+    }
+    .loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
+    .loader-inner { width: min(860px, 92vw); text-align: left; }
+    .loader-layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1.15fr) minmax(200px, 0.85fr);
+      align-items: center;
+      gap: clamp(1.5rem, 5vw, 4rem);
+    }
+    .loader-copy { min-width: 0; }
+    .loader-visual {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    .cat-sculpture {
+      width: 100%;
+      max-width: 280px;
+      height: auto;
+      max-height: min(52vh, 360px);
+      filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.42));
+      transition: transform 0.3s var(--ease);
+    }
+    .cat-sculpture:hover {
+      transform: scale(1.02) translateY(-2px);
+    }
+    .loader-brand {
+      display: inline-flex; align-items: center; gap: .7rem;
+      font-family: var(--mono); font-size: 12px; letter-spacing: .24em;
+      text-transform: uppercase; margin-bottom: 2.2rem; color: var(--text-muted);
+    }
+    .loader-brand::before {
+      content: ""; display: inline-block;
+      width: 8px; height: 8px; border-radius: 50%;
+      background: var(--accent-2); box-shadow: 0 0 14px var(--accent-glow);
+      animation: pulse 1.4s ease-in-out infinite;
+    }
+    .loader-pct {
+      font-family: var(--mono); font-size: 72px; font-weight: 500; line-height: 1;
+      color: var(--text); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
+    }
+    .loader-pct i { margin-left: .12em; color: var(--text-subtle); font-size: .36em; font-style: normal; font-weight: 400; }
+    .loader-rule {
+      position: relative; width: 100%; height: 3px; margin: 20px 0 14px;
+      background: var(--surface-2); border-radius: 999px; overflow: hidden;
+    }
+    .loader-rule i {
+      position: absolute; inset: 0 auto 0 0; display: block; width: 0%;
+      background: linear-gradient(90deg, var(--accent), var(--accent-2));
+      box-shadow: 0 0 14px var(--accent-glow);
+      transition: width .3s var(--ease); border-radius: 999px;
+    }
+    .loader-status {
+      font-family: var(--mono); font-size: 12.5px; letter-spacing: .18em;
+      text-transform: uppercase; color: var(--text); font-variant-numeric: tabular-nums;
+      font-weight: 600;
+    }
+    .loader-truth { margin: 8px 0 0; color: var(--text-muted); font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
+    .loader-cta {
+      display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
+      min-width: 220px; margin-top: 2.2rem;
+      font: inherit; font-family: var(--mono); font-size: 13px; letter-spacing: .14em;
+      text-transform: uppercase; font-weight: 600;
+      color: #071512; background: var(--accent-2);
+      border: none; border-radius: var(--radius-sm);
+      padding: 0.9rem 1.5rem; cursor: pointer;
+      box-shadow: 0 0 18px var(--accent-glow);
+      transition: background .18s var(--ease), transform .06s ease, box-shadow .18s var(--ease), opacity .3s var(--ease), color .3s var(--ease);
+    }
+    .loader-cta:hover:not(:disabled) { background: var(--accent); box-shadow: 0 0 26px var(--accent-glow); }
+    .loader-cta:active:not(:disabled) { transform: translateY(1px); }
+    .loader-cta:disabled {
+      opacity: 0.35; cursor: not-allowed; box-shadow: none;
+      background: var(--surface-3); color: var(--text-subtle);
+    }
+    @keyframes pulse { 50% { opacity: 0.35; transform: scale(0.85); } }
+    @media (max-width: 720px) {
+      .loader-layout { grid-template-columns: 1fr; gap: 1.2rem; }
+      .loader-visual { order: -1; }
+      .cat-sculpture { max-width: 170px; max-height: 22vh; }
+      .loader-brand { margin-bottom: 1.2rem; }
+      .loader-pct { font-size: 54px; }
+      .loader-cta { margin-top: 1.4rem; width: 100%; }
+    }
+    /* Header ---------------------------------------------------------- */
+    header {
+      display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
+      margin-bottom: 1.75rem;
+      padding-bottom: 1.5rem;
+      border-bottom: 1px solid var(--border);
+    }
+    .brand { display: flex; align-items: center; gap: .9rem; min-width: 0; }
+    .brand-mark {
+      width: 42px; height: 42px; border-radius: 12px;
+      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+      display: flex; align-items: center; justify-content: center;
+      color: #ffffff;
+      box-shadow: 0 6px 20px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.22);
+      flex: none;
+    }
+    .brand-mark svg { width: 22px; height: 22px; }
+    .brand-text { min-width: 0; }
+    .brand-text h1 {
+      margin: 0; font-size: 0.98rem; font-weight: 700;
+      font-family: var(--mono);
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: var(--text);
+    }
+    .brand-text .sub {
+      margin: 3px 0 0; color: var(--text-muted); font-size: 0.72rem;
+      font-family: var(--mono); letter-spacing: 0.08em;
+      text-transform: uppercase;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }
+    .icon-btn, .status-pill {
+      display: inline-flex; align-items: center; gap: 0.5rem;
+      font-size: 0.8rem; font-weight: 500; color: var(--text-muted);
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: 999px; padding: 0.45rem 0.9rem; white-space: nowrap;
+      box-shadow: var(--shadow-sm);
+      transition: color .2s var(--ease), border-color .2s var(--ease);
+    }
+    .icon-btn { cursor: pointer; font-family: var(--font); }
+    .icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
+    .icon-btn svg { display: block; }
+    .status-dot {
+      width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none;
+      transition: background .2s var(--ease);
+    }
+    .status-pill.ready { color: var(--text); }
+    .status-pill.ready .status-dot { background: var(--ok); box-shadow: 0 0 10px rgba(22, 163, 74, 0.4); }
+    .status-pill.err { color: var(--text); }
+    .status-pill.err .status-dot { background: var(--err); box-shadow: 0 0 10px rgba(220, 38, 38, 0.4); }
+    .status-pill.busy { color: var(--text); }
+    .status-pill.busy .status-dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
+    /* Pipeline step indicator ----------------------------------------- */
+    .pipeline {
+      display: flex; align-items: center; gap: 0;
+      margin-bottom: 1.5rem;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius); box-shadow: var(--shadow-sm);
+      padding: 0.95rem 1.25rem;
+      overflow-x: auto;
+    }
+    .step { display: flex; align-items: center; gap: 0.65rem; flex: 1; min-width: 0; }
+    .step-num {
+      width: 26px; height: 26px; border-radius: 50%;
+      background: var(--surface-2); color: var(--text-muted);
+      display: flex; align-items: center; justify-content: center;
+      font-family: var(--mono); font-size: 11px; font-weight: 600;
+      border: 1.5px solid var(--border);
+      flex: none; transition: all .2s var(--ease);
+    }
+    .step-text { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
+    .step-text b { color: var(--text); font-weight: 600; }
+    .step-arrow { flex: none; color: var(--text-subtle); margin: 0 0.75rem; display: flex; align-items: center; }
+    .step-arrow svg { display: block; }
+    .step.active .step-num { background: var(--accent); color: var(--btn-fg); border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
+    .step.active .step-text { color: var(--text); }
+    .step.done .step-num { background: var(--ok); color: white; border-color: var(--ok); }
+    /* Models strip — bento tiles --------------------------------------- */
+    .models-strip {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1rem;
+      margin-bottom: 1.5rem;
+    }
+    .model-card {
+      position: relative;
+      display: flex; flex-direction: column; gap: 0.7rem;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius); padding: 1.15rem 1.25rem;
+      text-decoration: none; color: var(--text);
+      box-shadow: var(--shadow-sm);
+      transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
+      overflow: hidden;
+    }
+    .model-card::before {
+      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+      background: linear-gradient(180deg, var(--accent), var(--accent-2));
+      opacity: 0; transition: opacity .2s var(--ease);
+    }
+    .model-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
+    .model-card:hover::before { opacity: 1; }
+    .model-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
+    .model-card-name { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem; min-width: 0; }
+    .model-card-name-icon {
+      width: 28px; height: 28px; border-radius: 8px;
+      background: var(--surface-2); color: var(--accent-2);
+      display: flex; align-items: center; justify-content: center; flex: none;
+    }
+    .model-role {
+      font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
+      color: var(--accent-2); background: var(--accent-soft);
+      border-radius: 999px; padding: 0.22rem 0.6rem;
+      font-family: var(--mono); flex: none;
+    }
+    .model-card-repo {
+      font-family: var(--mono); font-size: 0.74rem; color: var(--text);
+      overflow-wrap: anywhere;
+    }
+    .model-card-repo .repo-ns { color: var(--text-muted); }
+    .model-card-file {
+      font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted);
+      overflow-wrap: anywhere; padding-left: 0.9rem;
+    }
+    /* Status bar ------------------------------------------------------- */
+    .status-bar {
+      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius); box-shadow: var(--shadow-sm);
+      padding: 0.85rem 1.1rem; margin-bottom: 1.5rem;
+    }
+    .status-bar-label {
+      font-size: 0.82rem; color: var(--text-muted); min-width: 0; flex: 1 1 240px;
+      display: flex; align-items: center; gap: .55rem;
+    }
+    .status-bar-label .label-icon { color: var(--text-subtle); flex: none; }
+    .status-bar-label b { color: var(--text); font-family: var(--mono); font-weight: 500; }
+    .status-readout {
+      flex: 1 1 280px; min-width: 0;
+      display: flex; flex-direction: column; gap: 0.5rem;
+    }
+    .status-readout-head {
+      display: flex; align-items: center; gap: 0.55rem;
+      font-family: var(--mono); font-size: 0.7rem;
+      text-transform: uppercase; letter-spacing: 0.18em;
+      color: var(--text-sub);
+    }
+    .status-readout-head .label-icon { color: var(--text-subtle); flex: none; }
+    .status-readout-head b { color: var(--text); font-weight: 500; }
+    .status-readout-pct {
+      margin-left: auto;
+      color: var(--text); font-weight: 600; font-size: 0.88rem;
+      letter-spacing: 0.04em;
+    }
+    .status-readout-rule {
+      position: relative; height: 1px; background: var(--border-strong);
+      overflow: hidden;
+    }
+    .status-readout-rule i {
+      position: absolute; inset: 0 auto 0 0; display: block; width: 0%;
+      background: linear-gradient(90deg, var(--accent), var(--accent-2));
+      box-shadow: 0 0 8px var(--accent-glow);
+      transition: width .3s var(--ease);
+    }
+    .status-readout-status {
+      font-family: var(--mono); font-size: 0.78rem;
+      color: var(--text); font-variant-numeric: tabular-nums;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    /* Chips ----------------------------------------------------------- */
+    .chip {
+      display: inline-flex; align-items: center; gap: 0.4rem;
+      font: inherit; font-size: 0.78rem; font-weight: 500;
+      color: var(--text); background: var(--surface);
+      border: 1px solid var(--border); border-radius: 999px;
+      padding: 0.4rem 0.85rem; cursor: pointer;
+      transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
+      font-family: var(--font);
+    }
+    .chip:hover { border-color: var(--accent-2); color: var(--accent); background: var(--accent-soft); }
+    .chip svg { display: block; }
+    .chip.ghost { background: transparent; }
+    .chip.ghost:hover { border-color: var(--accent-2); color: var(--accent); background: var(--accent-soft); }
+    /* Sample selector & Segmented Controls ----------------------------- */
+    .sample-controls {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+    }
+    .sample-seg {
+      display: inline-flex;
+      padding: 3px;
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: 9px;
+    }
+    .sample-seg-btn {
+      font: inherit;
+      font-family: var(--mono);
+      font-size: 0.68rem;
+      font-weight: 600;
+      padding: 0.35rem 0.75rem;
+      border: none;
+      background: transparent;
+      color: var(--text-muted);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .sample-seg-btn:hover:not(.active) { color: var(--text); }
+    .sample-seg-btn.active {
+      background: var(--surface);
+      color: var(--text);
+      box-shadow: var(--shadow-sm);
+    }
+    .sample-shuffle-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      font: inherit;
+      font-family: var(--mono);
+      font-size: 0.68rem;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      padding: 0.35rem 0.7rem;
+      color: var(--accent-2);
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: 7px;
+      cursor: pointer;
+      transition: all .15s var(--ease);
+    }
+    .sample-shuffle-btn:hover {
+      background: var(--accent-soft);
+      border-color: var(--accent-2);
+      color: var(--accent);
+      box-shadow: 0 0 12px var(--accent-glow);
+    }
+    .sample-shuffle-btn svg { width: 13px; height: 13px; }
+    .samples-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.45rem;
+      margin-top: 0.15rem;
+    }
+    .samples-group[hidden] { display: none; }
+    .sample-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      font: inherit;
+      font-family: var(--mono);
+      font-size: 0.72rem;
+      font-weight: 500;
+      letter-spacing: 0.02em;
+      color: var(--text-muted);
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0.38rem 0.75rem;
+      cursor: pointer;
+      transition: all .15s var(--ease);
+    }
+    .sample-chip:hover {
+      color: var(--text);
+      border-color: var(--accent-2);
+      background: var(--accent-soft);
+    }
+    .sample-chip.active {
+      color: var(--text);
+      background: var(--surface);
+      border-color: var(--accent-2);
+      box-shadow: 0 0 12px var(--accent-glow);
+      font-weight: 600;
+    }
+    /* Bento main grid -------------------------------------------------- */
+    .bento {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+    @media (max-width: 900px) { .bento { grid-template-columns: 1fr; } }
+    .card {
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius); box-shadow: var(--shadow-sm);
+      padding: 1.5rem;
+      display: flex; flex-direction: column; gap: 1rem;
+      min-width: 0;
+    }
+    .card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+    .card-head h2 {
+      margin: 0; font-size: 0.7rem; font-weight: 600;
+      text-transform: uppercase; letter-spacing: 0.1em;
+      color: var(--text-muted);
+    }
+    .badge-pill {
+      font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
+      color: var(--text-subtle); background: var(--surface-2);
+      padding: 0.22rem 0.55rem; border-radius: 6px;
+      letter-spacing: 0.04em; text-transform: uppercase;
+    }
+    .card-hint { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.55; }
+    /* Segmented toggle ------------------------------------------------ */
+    .seg-toggle {
+      display: inline-flex; padding: 3px;
+      background: var(--surface-2); border: 1px solid var(--border);
+      border-radius: 9px;
+    }
+    .seg-opt {
+      font: inherit; font-family: var(--font);
+      font-size: 0.68rem; font-weight: 600;
+      padding: 0.32rem 0.72rem; border: none; background: transparent;
+      color: var(--text-muted); border-radius: 6px; cursor: pointer;
+      transition: color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
+      letter-spacing: 0.02em;
+    }
+    .seg-opt:hover:not(:disabled) { color: var(--text); }
+    .seg-opt.active {
+      background: var(--surface); color: var(--text);
+      box-shadow: var(--shadow-sm);
+    }
+    .seg-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-2); }
+    .seg-opt:disabled { opacity: 0.45; cursor: not-allowed; }
+    /* Results panes -------------------------------------------------- */
+    .results-host { display: contents; }
+    .result-pane { display: block; }
+    .result-pane[hidden] { display: none; }
+    .result-json .json-meta, .result-trace .json-meta {
+      display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
+      font-family: var(--mono); font-size: 0.72rem;
+      color: var(--text-muted); margin-bottom: 0.7rem;
+      padding-bottom: 0.6rem;
+      border-bottom: 1px dashed var(--border);
+    }
+    .result-json .json-meta b, .result-trace .json-meta b { color: var(--text); font-weight: 600; }
+    .result-json pre, .result-trace pre {
+      margin: 0; padding: 1rem 1.1rem;
+      background: #0b1220; color: #cbd5e1;
+      border: 1px solid var(--border); border-radius: var(--radius-sm);
+      font-family: var(--mono); font-size: 0.78rem; line-height: 1.65;
+      white-space: pre-wrap; word-break: break-word;
+      max-height: 36rem; overflow: auto;
+      font-variant-numeric: tabular-nums;
+      tab-size: 2;
+    }
+    [data-theme="dark"] .result-json pre, [data-theme="dark"] .result-trace pre { background: #020617; }
+    .result-json .jk, .result-trace .jk { color: #7dd3fc; }
+    .result-json .js, .result-trace .js { color: #fcd34d; }
+    .result-json .jn, .result-trace .jn { color: #c4b5fd; }
+    .result-json .jb, .result-trace .jb { color: #f472b6; }
+    /* Pretty tree ------------------------------------------------------ */
+    .tree {
+      background: var(--surface); border: 1px solid var(--border);
+      border-left: 3px solid var(--accent-2); border-radius: var(--radius-sm);
+      padding: 0.9rem 1.1rem;
+    }
+    .tree + .tree { margin-top: 0.6rem; }
+    .tree-root { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+    .tree-name { font-weight: 600; font-size: 0.92rem; color: var(--text); }
+    .tree-ms { color: var(--text-subtle); font-size: 0.7rem; font-family: var(--mono); margin-left: auto; }
+    .tree-body {
+      position: relative; margin: 0.4rem 0 0 0.4rem;
+      padding-left: 1.15rem; border-left: 1px solid var(--border-strong);
+    }
+    .tree-leaf {
+      position: relative; display: flex; align-items: baseline; gap: 0.45rem;
+      padding: 0.13rem 0; font-size: 0.82rem; line-height: 1.5;
+    }
+    .tree-leaf::before {
+      content: ""; position: absolute; left: -1.15rem; top: 0.75em;
+      width: 0.9rem; height: 1px; background: var(--border-strong);
+    }
+    .tree-leaf .k { color: var(--accent-2); font-weight: 600; font-family: var(--mono); font-size: 0.74rem; white-space: nowrap; }
+    .tree-leaf .arrow { color: var(--text-subtle); }
+    .tree-leaf .v { color: var(--text); }
+    .tree-group {
+      position: relative; margin: 0.15rem 0 0; padding-left: 1.15rem;
+      border-left: 1px solid var(--border-strong);
+    }
+    .tree-group::before {
+      content: ""; position: absolute; left: -1.15rem; top: 0.75em;
+      width: 0.9rem; height: 1px; background: var(--border-strong);
+    }
+    .tree-label {
+      font-weight: 600; color: var(--text-muted); font-size: 0.74rem;
+      font-family: var(--mono); letter-spacing: 0.03em; padding: 0.1rem 0;
+    }
+    .tree-slot { display: block; }
+    .tree-stream {
+      font-family: var(--mono); font-size: 0.78rem; color: var(--text-subtle);
+      padding: 0.15rem 0; font-style: italic; line-height: 1.5;
+    }
+    .tree-stream.streaming::after {
+      content: "▌"; margin-left: 2px; color: var(--accent-2);
+      animation: blink 1s steps(2) infinite;
+    }
+    .tree-none { font-size: 0.78rem; color: var(--text-subtle); font-style: italic; margin: 0.35rem 0 0 0.4rem; padding-left: 1.15rem; }
+    /* Samples --------------------------------------------------------- */
+    .samples-block { display: flex; flex-direction: column; gap: 0.55rem; }
+    .samples-label {
+      font-size: 0.68rem; font-weight: 600; color: var(--text-subtle);
+      text-transform: uppercase; letter-spacing: 0.08em;
+      display: flex; align-items: center; gap: 0.45rem;
+    }
+    .samples-label .count {
+      font-family: var(--mono); font-weight: 500;
+      color: var(--text-subtle); background: var(--surface-2);
+      padding: 0.05rem 0.45rem; border-radius: 999px;
+      font-size: 0.6rem; letter-spacing: 0;
+    }
+    .samples { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+    /* Textarea -------------------------------------------------------- */
+    .textarea-wrap { position: relative; }
+    textarea {
+      width: 100%; min-height: 11rem; resize: vertical;
+      font: inherit; font-size: 0.9rem; line-height: 1.6;
+      color: var(--text); background: var(--surface-2);
+      border: 1px solid var(--border); border-radius: var(--radius-sm);
+      padding: 0.85rem 1rem;
+      transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
+    }
+    textarea::placeholder { color: var(--text-subtle); }
+    textarea:hover { border-color: var(--border-strong); }
+    textarea:focus {
+      outline: none; border-color: var(--accent-2);
+      background: var(--surface);
+      box-shadow: 0 0 0 3px var(--accent-soft);
+    }
+    /* Actions / CTA --------------------------------------------------- */
+    .actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
+    .actions .meta-text { font-family: var(--mono); font-size: 0.72rem; color: var(--text-subtle); }
+    .btn {
+      display: inline-flex; align-items: center; gap: 0.55rem;
+      font: inherit; font-weight: 600; font-size: 0.88rem; color: var(--btn-fg);
+      background: linear-gradient(180deg, var(--accent), var(--accent-hover));
+      border: none; border-radius: var(--radius-sm);
+      padding: 0.72rem 1.4rem; cursor: pointer;
+      transition: box-shadow .2s var(--ease);
+      box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 8px 22px -8px var(--accent-glow);
+      font-family: var(--font);
+      letter-spacing: -0.005em;
+    }
+    .btn:hover:not(:disabled) { box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 12px 28px -8px var(--accent-glow); }
+    .btn:active:not(:disabled) { box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 12px -4px var(--accent-glow); }
+    .btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
+    .btn svg { display: block; }
+    /* Results --------------------------------------------------------- */
+    #results { min-height: 14rem; }
+    .empty {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 0.7rem; padding: 2.5rem 1rem;
+      color: var(--text-muted); text-align: center;
+    }
+    .empty .empty-icon { width: 42px; height: 42px; color: var(--text-subtle); opacity: 0.7; }
+    .empty .empty-title { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
+    .empty .empty-sub { font-size: 0.78rem; color: var(--text-subtle); max-width: 32ch; line-height: 1.5; }
+    /* Perf stats ------------------------------------------------------- */
+    .perf {
+      display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center;
+      background: var(--surface-2); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); padding: 0.65rem 0.95rem;
+    }
+    .perf-stat {
+      display: inline-flex; align-items: center; gap: 0.4rem;
+      color: var(--text-muted); font-family: var(--mono); font-size: 0.72rem;
+    }
+    .perf-stat b {
+      color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums;
+    }
+    .perf-stat .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-subtle); }
+    /* Legacy .stat class — emitted by main.js inline HTML, kept for compat. */
+    .perf .stat { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-muted); font-family: var(--mono); font-size: 0.72rem; }
+    .perf .stat b { color: var(--accent); font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
+    /* Mention card ----------------------------------------------------- */
+    .mention-list { display: flex; flex-direction: column; gap: 0.6rem; }
+    .mention {
+      display: flex; flex-direction: column; gap: 0.55rem;
+      padding: 1rem 1.1rem;
+      background: var(--surface); border: 1px solid var(--border);
+      border-left: 3px solid var(--accent-2);
+      border-radius: var(--radius-sm);
+      transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
+    }
+    .mention:hover { box-shadow: var(--shadow-sm); }
+    .mention .head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+    .mention .name { font-weight: 600; font-size: 0.92rem; color: var(--text); }
+    .mention .ms { color: var(--text-subtle); font-size: 0.7rem; font-family: var(--mono); margin-left: auto; }
+    .mention .attr {
+      font-family: var(--mono); font-size: 0.8rem; color: var(--text);
+      padding: 0.55rem 0.75rem;
+      background: var(--surface-2); border-radius: 6px;
+      line-height: 1.65;
+    }
+    .mention .attr .k { color: var(--accent-2); font-weight: 600; }
+    .mention .attr .v { color: var(--text); }
+    .mention .attr .v.miss { color: var(--text-subtle); font-style: italic; }
+    .mention .attr.streaming::after {
+      content: "▌"; margin-left: 2px;
+      animation: blink 1s steps(2) infinite;
+      color: var(--accent-2);
+    }
+    @keyframes blink { 50% { opacity: 0; } }
+    .mention-summary {
+      font-size: 0.85rem; color: var(--text); line-height: 1.55;
+      padding: 0.6rem 0.8rem;
+      background: var(--surface-2); border-radius: 6px;
+      border-left: 2px solid var(--border-strong);
+    }
+    /* Badges ----------------------------------------------------------- */
+    .badge {
+      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
+      text-transform: uppercase; border-radius: 6px; padding: 0.2rem 0.55rem;
+      font-family: var(--mono);
+    }
+    .badge-NAMED_DATA { background: var(--na-bg); color: var(--na); }
+    .badge-DESCRIPTIVE_DATA { background: var(--de-bg); color: var(--de); }
+    .badge-VAGUE_DATA { background: var(--va-bg); color: var(--va); }
+    /* Details / log ---------------------------------------------------- */
+    details.log-wrap, details.models-wrap {
+      margin-top: 1rem;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow-sm);
+      overflow: hidden;
+    }
+    details > summary {
+      cursor: pointer; font-size: 0.7rem; font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase; letter-spacing: 0.1em;
+      padding: 0.95rem 1.25rem;
+      user-select: none; list-style: none;
+      display: flex; align-items: center; gap: 0.6rem;
+      transition: background .15s var(--ease), color .15s var(--ease);
+    }
+    details > summary::-webkit-details-marker { display: none; }
+    details > summary::before {
+      content: ""; width: 6px; height: 6px;
+      border-right: 1.5px solid currentColor;
+      border-bottom: 1.5px solid currentColor;
+      transform: rotate(-45deg); transition: transform .2s var(--ease);
+      display: inline-block;
+    }
+    details[open] > summary::before { transform: rotate(45deg); }
+    details > summary:hover { background: var(--surface-2); color: var(--text); }
+    .summary-body { padding: 0 1.25rem 1.25rem; }
+    #log {
+      background: var(--log-bg); color: var(--log-fg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      padding: 0.9rem 1rem;
+      font-family: var(--mono); font-size: 0.74rem; line-height: 1.65;
+      max-height: 16rem; overflow-y: auto; white-space: pre-wrap;
+      font-variant-numeric: tabular-nums;
+    }
+    #log .ok { color: var(--ok); }
+    #log .warn { color: var(--warn); }
+    #log .err { color: var(--err); }
+    #models-info { display: grid; gap: 1rem; }
+    .info-card {
+      background: var(--surface-2); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); padding: 1rem 1.2rem;
+    }
+    .info-card h3 {
+      margin: 0 0 0.35rem; font-size: 0.9rem;
+      display: flex; align-items: center; gap: 0.5rem;
+    }
+    .info-card h3 a { color: var(--accent-2); text-decoration: none; }
+    .info-card h3 a:hover { text-decoration: underline; }
+    .info-card h3 svg { color: var(--text-subtle); flex: none; }
+    .info-card .task { color: var(--text-muted); font-size: 0.82rem; margin: 0 0 0.65rem; line-height: 1.55; }
+    .info-card .meta {
+      font-size: 0.76rem; color: var(--text-muted);
+      font-family: var(--mono); white-space: pre-wrap; line-height: 1.6;
+    }
+    /* Focus rings ------------------------------------------------------ */
+    .icon-btn:focus-visible,
+    .btn:focus-visible,
+    .chip:focus-visible,
+    textarea:focus-visible,
+    details > summary:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent-2);
+    }
+    /* Reduced motion --------------------------------------------------- */
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: 0.001ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.001ms !important;
+      }
+    }
+    /* Responsive ------------------------------------------------------- */
+    @media (max-width: 640px) {
+      .wrap { padding: 1.1rem 1rem 3rem; }
+      header { flex-direction: column; align-items: stretch; gap: 1rem; padding-bottom: 1rem; }
+      .header-actions { justify-content: space-between; }
+      .brand-text .sub { font-size: 0.7rem; }
+      .pipeline { padding: 0.75rem 1rem; }
+      .step-text { font-size: 0.7rem; }
+      .step-arrow { margin: 0 0.5rem; }
+      .step-arrow svg { width: 12px; height: 12px; }
+      .models-strip { grid-template-columns: 1fr; }
+      .card { padding: 1.2rem; }
+      .loader-pct { font-size: 56px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="loader" id="loader" data-state="sleeping">
+    <div class="loader-inner">
+      <div class="loader-layout">
+        <div class="loader-copy">
+          <div class="loader-brand">Data-use extraction · WebGPU</div>
+          <div class="loader-pct num"><span id="loader-pct">0</span><i>%</i></div>
+          <div class="loader-rule"><i id="loader-rule-fill"></i></div>
+          <div class="loader-status" id="loader-status">Initialising</div>
+          <div class="loader-truth" id="loader-truth">Loading models…</div>
+          <button class="loader-cta" id="loader-cta" type="button" disabled>Get started</button>
+        </div>
+        <div class="loader-visual">
+          <svg class="cat-sculpture" viewBox="0 0 240 320" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <defs>
+              <filter id="cat-glow" x="-20%" y="-20%" width="140%" height="140%">
+                <feGaussianBlur stdDeviation="3.5" result="blur" />
+                <feMerge>
+                  <feMergeNode in="blur" />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+              </filter>
+              <linearGradient id="cat-laser" x1="0" y1="0" x2="1" y2="0">
+                <stop offset="0%" stop-color="#7cf0de" stop-opacity="0" />
+                <stop offset="25%" stop-color="#7cf0de" stop-opacity="0.9" />
+                <stop offset="50%" stop-color="#ebfffa" stop-opacity="1" />
+                <stop offset="75%" stop-color="#7cf0de" stop-opacity="0.9" />
+                <stop offset="100%" stop-color="#7cf0de" stop-opacity="0" />
+              </linearGradient>
+              <clipPath id="cat-fill-clip">
+                <rect id="cat-fill-rect" x="0" y="320" width="240" height="320" />
+              </clipPath>
+            </defs>
+            <!-- Base Obsidian Low-Poly Facets -->
+            <g class="cat-base" stroke="#0e1318" stroke-width="0.8" stroke-linejoin="round">
+              <!-- Crown & Ears -->
+              <polygon points="120,54 98,28 108,68" fill="#1b2028" />
+              <polygon points="120,54 108,68 116,78" fill="#242b36" />
+              <polygon points="120,54 116,78 128,78" fill="#2d3542" />
+              <polygon points="120,54 128,78 138,66" fill="#28303c" />
+              <polygon points="120,54 138,66 148,34" fill="#1f252f" />
+              <polygon points="148,34 138,66 156,72" fill="#161b22" />
+              <polygon points="98,28 108,68 88,66" fill="#14181f" />
+              <!-- Forehead & Eyes -->
+              <polygon points="116,78 128,78 122,96" fill="#323b49" />
+              <polygon points="108,68 116,78 102,92" fill="#28303c" />
+              <polygon points="116,78 122,96 102,92" fill="#364050" />
+              <polygon points="128,78 138,66 142,88" fill="#202631" />
+              <polygon points="128,78 142,88 122,96" fill="#2a323f" />
+              <polygon points="102,92 122,96 118,110" fill="#3c4758" />
+              <polygon points="122,96 142,88 132,108" fill="#242b36" />
+              <polygon points="122,96 132,108 118,110" fill="#2e3745" />
+              <!-- Muzzle & Chin -->
+              <polygon points="102,92 118,110 96,116" fill="#262d38" />
+              <polygon points="118,110 126,122 114,130" fill="#343e4e" />
+              <polygon points="118,110 132,108 126,122" fill="#2b3340" />
+              <polygon points="132,108 144,118 126,122" fill="#1d222b" />
+              <polygon points="114,130 126,122 120,138" fill="#3a4555" />
+              <polygon points="96,116 114,130 102,142" fill="#202630" />
+              <!-- Neck & Throat -->
+              <polygon points="114,130 120,138 116,162" fill="#323c4a" />
+              <polygon points="102,142 114,130 116,162" fill="#272e3a" />
+              <polygon points="120,138 136,148 116,162" fill="#232a35" />
+              <polygon points="126,122 144,118 136,148" fill="#1a1f27" />
+              <polygon points="102,142 116,162 94,172" fill="#1e242e" />
+              <polygon points="88,66 102,92 84,106" fill="#12161c" />
+              <polygon points="84,106 96,116 78,138" fill="#10141a" />
+              <polygon points="78,138 102,142 94,172" fill="#151920" />
+              <polygon points="78,138 94,172 72,176" fill="#0f1217" />
+              <!-- Chest & Front Shoulders -->
+              <polygon points="116,162 128,190 108,198" fill="#343e4e" />
+              <polygon points="116,162 136,148 128,190" fill="#262d39" />
+              <polygon points="94,172 116,162 108,198" fill="#2a323f" />
+              <polygon points="94,172 108,198 88,206" fill="#1d222b" />
+              <polygon points="72,176 94,172 88,206" fill="#14181f" />
+              <polygon points="128,190 146,182 138,214" fill="#1b2028" />
+              <polygon points="136,148 146,182 128,190" fill="#1e232c" />
+              <!-- Straight Forelegs -->
+              <polygon points="108,198 128,190 120,230" fill="#384252" />
+              <polygon points="108,198 120,230 104,234" fill="#2b3340" />
+              <polygon points="88,206 108,198 104,234" fill="#202630" />
+              <polygon points="120,230 128,190 138,214" fill="#242b36" />
+              <polygon points="120,230 138,214 132,248" fill="#202631" />
+              <polygon points="104,234 120,230 114,272" fill="#323c4a" />
+              <polygon points="120,230 132,248 126,274" fill="#262d38" />
+              <polygon points="104,234 114,272 100,274" fill="#222832" />
+              <polygon points="114,272 126,274 122,306" fill="#2d3644" />
+              <polygon points="100,274 114,272 108,306" fill="#242b35" />
+              <polygon points="126,274 138,272 134,306" fill="#1a1f27" />
+              <!-- Seated Hindquarters (Haunches & Back) -->
+              <polygon points="72,176 88,206 64,216" fill="#12151b" />
+              <polygon points="64,216 88,206 78,246" fill="#161b22" />
+              <polygon points="64,216 78,246 52,254" fill="#0f1217" />
+              <polygon points="88,206 104,234 78,246" fill="#1b2029" />
+              <polygon points="78,246 104,234 92,268" fill="#1f252f" />
+              <polygon points="52,254 78,246 62,284" fill="#11151b" />
+              <polygon points="78,246 92,268 76,288" fill="#181d24" />
+              <polygon points="62,284 76,288 68,306" fill="#14181f" />
+              <polygon points="76,288 92,268 86,306" fill="#1c222b" />
+              <polygon points="92,268 100,274 108,306" fill="#222833" />
+              <polygon points="92,268 108,306 86,306" fill="#1e242d" />
+              <!-- Tail along floor -->
+              <polygon points="52,254 62,284 38,288" fill="#0d1014" />
+              <polygon points="38,288 62,284 48,304" fill="#11141a" />
+              <polygon points="38,288 48,304 24,302" fill="#0e1116" />
+              <polygon points="24,302 48,304 32,310" fill="#13171e" />
+              <polygon points="24,302 32,310 16,304" fill="#0b0e12" />
+            </g>
+            <!-- Overlaid Glowing Energy Layer (clipped dynamically) -->
+            <g clip-path="url(#cat-fill-clip)">
+              <!-- Glowing Facets -->
+              <g stroke="#7cf0de" stroke-width="1.2" stroke-linejoin="round" opacity="0.92">
+                <polygon points="120,54 98,28 108,68" fill="#7cf0de" fill-opacity="0.28" />
+                <polygon points="120,54 108,68 116,78" fill="#7cf0de" fill-opacity="0.38" />
+                <polygon points="120,54 116,78 128,78" fill="#ebfffa" fill-opacity="0.45" />
+                <polygon points="120,54 128,78 138,66" fill="#7cf0de" fill-opacity="0.35" />
+                <polygon points="120,54 138,66 148,34" fill="#7cf0de" fill-opacity="0.25" />
+                <polygon points="148,34 138,66 156,72" fill="#38bdf8" fill-opacity="0.22" />
+                <polygon points="98,28 108,68 88,66" fill="#38bdf8" fill-opacity="0.22" />
+                <polygon points="116,78 128,78 122,96" fill="#ebfffa" fill-opacity="0.52" />
+                <polygon points="108,68 116,78 102,92" fill="#7cf0de" fill-opacity="0.36" />
+                <polygon points="116,78 122,96 102,92" fill="#7cf0de" fill-opacity="0.48" />
+                <polygon points="128,78 142,88 122,96" fill="#7cf0de" fill-opacity="0.4" />
+                <polygon points="102,92 122,96 118,110" fill="#ebfffa" fill-opacity="0.55" />
+                <polygon points="122,96 132,108 118,110" fill="#7cf0de" fill-opacity="0.42" />
+                <polygon points="102,92 118,110 96,116" fill="#38bdf8" fill-opacity="0.32" />
+                <polygon points="118,110 126,122 114,130" fill="#ebfffa" fill-opacity="0.5" />
+                <polygon points="118,110 132,108 126,122" fill="#7cf0de" fill-opacity="0.38" />
+                <polygon points="114,130 126,122 120,138" fill="#7cf0de" fill-opacity="0.5" />
+                <polygon points="96,116 114,130 102,142" fill="#38bdf8" fill-opacity="0.3" />
+                <polygon points="114,130 120,138 116,162" fill="#7cf0de" fill-opacity="0.46" />
+                <polygon points="102,142 114,130 116,162" fill="#7cf0de" fill-opacity="0.38" />
+                <polygon points="120,138 136,148 116,162" fill="#38bdf8" fill-opacity="0.32" />
+                <polygon points="102,142 116,162 94,172" fill="#38bdf8" fill-opacity="0.28" />
+                <polygon points="78,138 102,142 94,172" fill="#0284c7" fill-opacity="0.24" />
+                <polygon points="116,162 128,190 108,198" fill="#ebfffa" fill-opacity="0.5" />
+                <polygon points="116,162 136,148 128,190" fill="#7cf0de" fill-opacity="0.36" />
+                <polygon points="94,172 116,162 108,198" fill="#7cf0de" fill-opacity="0.42" />
+                <polygon points="94,172 108,198 88,206" fill="#38bdf8" fill-opacity="0.3" />
+                <polygon points="108,198 128,190 120,230" fill="#ebfffa" fill-opacity="0.52" />
+                <polygon points="108,198 120,230 104,234" fill="#7cf0de" fill-opacity="0.4" />
+                <polygon points="120,230 128,190 138,214" fill="#7cf0de" fill-opacity="0.36" />
+                <polygon points="104,234 120,230 114,272" fill="#7cf0de" fill-opacity="0.46" />
+                <polygon points="120,230 132,248 126,274" fill="#38bdf8" fill-opacity="0.35" />
+                <polygon points="114,272 126,274 122,306" fill="#ebfffa" fill-opacity="0.48" />
+                <polygon points="100,274 114,272 108,306" fill="#7cf0de" fill-opacity="0.4" />
+                <polygon points="64,216 88,206 78,246" fill="#0284c7" fill-opacity="0.25" />
+                <polygon points="88,206 104,234 78,246" fill="#38bdf8" fill-opacity="0.32" />
+                <polygon points="78,246 104,234 92,268" fill="#7cf0de" fill-opacity="0.35" />
+                <polygon points="78,246 92,268 76,288" fill="#38bdf8" fill-opacity="0.3" />
+                <polygon points="76,288 92,268 86,306" fill="#7cf0de" fill-opacity="0.38" />
+                <polygon points="92,268 100,274 108,306" fill="#ebfffa" fill-opacity="0.45" />
+                <polygon points="38,288 48,304 24,302" fill="#0284c7" fill-opacity="0.22" />
+                <polygon points="24,302 48,304 32,310" fill="#38bdf8" fill-opacity="0.25" />
+              </g>
+              <!-- Glowing Meniscus / Laser Line at Liquid Boundary -->
+              <line id="cat-meniscus" x1="10" y1="320" x2="230" y2="320" stroke="url(#cat-laser)" stroke-width="3.5" filter="url(#cat-glow)" />
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="wrap">
+    <header>
+      <div class="brand">
+        <div class="brand-mark" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+            <circle cx="12" cy="12" r="3" fill="currentColor" fill-opacity="0.3" />
+          </svg>
+        </div>
+        <div class="brand-text">
+          <h1>DATA USE EXTRACTION</h1>
+          <p class="sub">WebGPU · GLiNER + LFM2.5 multitask</p>
+        </div>
+      </div>
+      <div class="header-actions">
+        <div class="status-pill" id="status-pill"><span class="status-dot" aria-hidden="true"></span><span id="status">Initialising…</span></div>
+        <button class="icon-btn" id="theme-toggle" title="Toggle light/dark" aria-label="Toggle theme">
+          <svg id="theme-icon-moon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
+          <svg id="theme-icon-sun" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+          <span id="theme-label">Dark</span>
+        </button>
+      </div>
+    </header>
+    <nav class="pipeline" aria-label="Pipeline">
+      <div class="step active" data-step="load">
+        <div class="step-num">1</div>
+        <div class="step-text">Load <b>models</b></div>
+      </div>
+      <div class="step-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg></div>
+      <div class="step" data-step="input">
+        <div class="step-num">2</div>
+        <div class="step-text">Paste <b>text</b></div>
+      </div>
+      <div class="step-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg></div>
+      <div class="step" data-step="extract">
+        <div class="step-num">3</div>
+        <div class="step-text"><b>Extract</b></div>
+      </div>
+      <div class="step-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg></div>
+      <div class="step" data-step="results">
+        <div class="step-num">4</div>
+        <div class="step-text">Review <b>mentions</b></div>
+      </div>
+    </nav>
+    <div class="models-strip">
+      <a class="model-card" href="https://huggingface.co/rafmacalaba/gliner_datause_extended-onnx" target="_blank" rel="noopener">
+        <div class="model-card-top">
+          <div class="model-card-name">
+            <span class="model-card-name-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+            </span>
+            <span>GLiNER</span>
+          </div>
+          <span class="model-role">span</span>
+        </div>
+        <div class="model-card-repo"><span class="repo-ns">huggingface/</span>rafmacalaba/gliner_datause_extended-onnx</div>
+        <div class="model-card-file">onnx/gliner_datause_extended_fp16.onnx</div>
+      </a>
+      <a class="model-card" href="https://huggingface.co/rafmacalaba/lfm2.5-350M-datause-multitask-onnx" target="_blank" rel="noopener">
+        <div class="model-card-top">
+          <div class="model-card-name">
+            <span class="model-card-name-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
+            </span>
+            <span>LFM2.5-350M</span>
+          </div>
+          <span class="model-role">attribution</span>
+        </div>
+        <div class="model-card-repo"><span class="repo-ns">huggingface/</span>rafmacalaba/lfm2.5-350M-datause-multitask-onnx</div>
+        <div class="model-card-file">onnx/lfm2_multitask_fp16_v2.onnx</div>
+      </a>
+    </div>
+    <div class="status-bar">
+      <div class="status-readout">
+        <div class="status-readout-head">
+          <svg class="label-icon" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+          <span>WebGPU pipeline</span>
+          <span class="status-readout-pct num" id="status-pct">0%</span>
+        </div>
+        <div class="status-readout-rule"><i id="status-rule-fill"></i></div>
+        <div class="status-readout-status" id="model-status-text">Loading models…</div>
+      </div>
+      <button class="chip ghost" id="force-redownload" title="Clear the browser cache and re-download the models" aria-label="Re-download models">
+        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3.05-6.78"/><path d="M21 4v5h-5"/></svg>
+        <span>Re-download</span>
+      </button>
+    </div>
+    <div class="bento">
+      <section class="card" aria-labelledby="input-card-title">
+        <div class="card-head">
+          <h2 id="input-card-title">Input text</h2>
+          <span class="badge-pill">stage 2 → 3</span>
+        </div>
+        <p class="card-hint">Paste research text, or load a sample — synthetic examples or real research holdout excerpts.</p>
+        <div class="sample-controls">
+          <div class="sample-seg" role="tablist" aria-label="Sample category">
+            <button type="button" class="sample-seg-btn active" data-category="synthetic" role="tab" aria-selected="true">SYNTHETIC (3)</button>
+            <button type="button" class="sample-seg-btn" data-category="holdout" role="tab" aria-selected="false">HOLDOUT REAL (13)</button>
+          </div>
+          <button type="button" class="sample-shuffle-btn" id="sample-shuffle" title="Pick a random sample from active category">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
+            <span>Random</span>
+          </button>
+        </div>
+        <div class="samples-group" data-group="synthetic">
+          <button type="button" class="sample-chip" data-sample="0">Multiple mentions</button>
+          <button type="button" class="sample-chip" data-sample="1">Single mention</button>
+          <button type="button" class="sample-chip" data-sample="2">No mention</button>
+        </div>
+        <div class="samples-group" data-group="holdout" hidden>
+          <button type="button" class="sample-chip" data-sample="3">Acronym panels (H8BS)</button>
+          <button type="button" class="sample-chip" data-sample="4">GPS plot (EAC-I)</button>
+          <button type="button" class="sample-chip" data-sample="5">NFHS India</button>
+          <button type="button" class="sample-chip" data-sample="6">Spatial (DHS + GLSS)</button>
+          <button type="button" class="sample-chip" data-sample="7">Geospatial (SRTM + GAEZ)</button>
+          <button type="button" class="sample-chip" data-sample="8">Energy poverty (HBS)</button>
+          <button type="button" class="sample-chip" data-sample="9">COVID NLPS r4</button>
+          <button type="button" class="sample-chip" data-sample="10">GIS (MODIS + Lloyd's)</button>
+          <button type="button" class="sample-chip" data-sample="11">Governance (WGI)</button>
+          <button type="button" class="sample-chip" data-sample="12">Niger fiscal (ECVMA)</button>
+          <button type="button" class="sample-chip" data-sample="13">Sending areas (VHLSS)</button>
+          <button type="button" class="sample-chip" data-sample="14">Gender norms (DHS/WVS)</button>
+          <button type="button" class="sample-chip" data-sample="15">Return (IOM Index)</button>
+        </div>
+        <div class="textarea-wrap">
+          <textarea id="text" placeholder="Paste research text here…">the Demographic and Health Survey (DHS) by EuStatistics in 2021 is the main dataset</textarea>
+        </div>
+        <div class="actions">
+          <span class="meta-text num">WebGPU · client-side · no server</span>
+          <button class="btn" id="run" disabled>
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
+            <span>Extract</span>
+          </button>
+        </div>
+      </section>
+      <section class="card" aria-labelledby="results-card-title">
+        <div class="card-head">
+          <h2 id="results-card-title">Extracted mentions</h2>
+          <div class="seg-toggle" role="tablist" aria-label="Output format">
+            <button type="button" class="seg-opt active" data-mode="pretty" role="tab" aria-selected="true">Pretty</button>
+            <button type="button" class="seg-opt" data-mode="json" role="tab" aria-selected="false" disabled>JSON</button>
+            <button type="button" class="seg-opt" data-mode="trace" role="tab" aria-selected="false" disabled>Trace</button>
+          </div>
+        </div>
+        <p class="card-hint">Spans as a tree — provenance and usage/impact. Toggle JSON for clean extraction or Trace for timings.</p>
+        <div id="results" class="results-host">
+          <div class="result-pane result-pretty" data-pane="pretty" aria-live="polite">
+            <div class="empty">
+              <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
+              <div class="empty-title">No mentions yet</div>
+              <div class="empty-sub">Paste text or pick a sample, then press Extract.</div>
+            </div>
+          </div>
+          <div class="result-pane result-json" data-pane="json" aria-live="polite" hidden>
+            <div class="empty">
+              <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2M8 3a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2M8 3a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2"/><path d="M7 12h10M7 16h6"/></svg>
+              <div class="empty-title">No JSON yet</div>
+              <div class="empty-sub">Run Extract to populate the JSON view.</div>
+            </div>
+          </div>
+          <div class="result-pane result-trace" data-pane="trace" aria-live="polite" hidden>
+            <div class="empty">
+              <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 17l6-5-6-5M12 19h8"/></svg>
+              <div class="empty-title">No trace yet</div>
+              <div class="empty-sub">Run Extract to populate the trace view.</div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+  <script>
+    (function () {
+      var btn = document.getElementById("theme-toggle");
+      var moon = document.getElementById("theme-icon-moon");
+      var sun = document.getElementById("theme-icon-sun");
+      var label = document.getElementById("theme-label");
+      function apply() {
+        var dark = document.documentElement.getAttribute("data-theme") === "dark";
+        moon.style.display = dark ? "none" : "block";
+        sun.style.display = dark ? "block" : "none";
+        label.textContent = dark ? "Light" : "Dark";
+        btn.title = dark ? "Switch to light mode" : "Switch to dark mode";
+      }
+      btn.addEventListener("click", function () {
+        var dark = document.documentElement.getAttribute("data-theme") === "dark";
+        if (dark) document.documentElement.removeAttribute("data-theme");
+        else document.documentElement.setAttribute("data-theme", "dark");
+        try { localStorage.setItem("datause-theme", dark ? "light" : "dark"); } catch (e) {}
+        apply();
+      });
+      apply();
+    })();
+  </script>
+  <script type="module" src="./main.js"></script>
+</body>
 </html>

lib/provenance.js ADDED Viewed

	@@ -0,0 +1,62 @@

+export function extractFinalJson(text) {
+  if (!text) return null;
+  if (text.includes("</think>")) text = text.split("</think>").at(-1);
+  text = text.replace(/```(?:json)?\s*/g, "");
+  const blocks = [];
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] !== "{") continue;
+    let depth = 0;
+    for (let j = i; j < text.length; j++) {
+      if (text[j] === "{") depth++;
+      else if (text[j] === "}") {
+        depth--;
+        if (depth === 0) { blocks.push(text.slice(i, j + 1)); break; }
+      }
+    }
+  }
+  for (let b = blocks.length - 1; b >= 0; b--) {
+    try { return JSON.parse(blocks[b]); } catch { /* try next */ }
+  }
+  return null;
+}
+export function filterVerbatim(answer, text) {
+  const out = {};
+  for (const [k, v] of Object.entries(answer ?? {})) {
+    if (typeof v === "string" && v && text.includes(v)) out[k] = v;
+  }
+  return out;
+}
+export function buildPrompt(text, mention) {
+  return (
+    "Extract attributes of this data mention. Output ONLY a JSON object with " +
+    "keys producer, year, geography, acronym. Each value must be an exact " +
+    "substring of the text; omit keys that are absent.\n\n" +
+    `Mention: "${mention}"\n\nText: ${text}`
+  );
+}
+export function buildUsageImpactPrompt(mention, usage, context) {
+  return (
+    "Classify the usage and impact of this data mention. Output ONLY a JSON " +
+    "object with keys data_type, usage_action, impact_label, usage_summary. " +
+    "usage_summary is one sentence in your own words, derived from the labels; " +
+    "do not invent specifics not present in the text.\n\n" +
+    `Mention: "${mention}"\n\nUsage: "${usage}"\n\nText: ${context}`
+  );
+}
+export function sentenceContaining(text, mention) {
+  const idx = text.indexOf(mention);
+  if (idx < 0) return text;
+  const re = /[.!?](?=\s|$)/g;
+  let start = 0;
+  let end = text.length;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index < idx) start = m.index + 1;
+    else { end = m.index + 1; break; }
+  }
+  return text.slice(start, end).trim();
+}

main.js ADDED Viewed

	@@ -0,0 +1,876 @@

+import * as ort from "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.27.0/dist/ort.webgpu.bundle.min.mjs";
+import { AutoTokenizer, env } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.2";
+import { extractFinalJson, filterVerbatim, buildPrompt, buildUsageImpactPrompt, sentenceContaining } from "./lib/provenance.js";
+const HF = (repo, file) => `https://huggingface.co/${repo}/resolve/main/${file}`;
+const SPAN_REPO = "rafmacalaba/gliner_datause_extended-onnx";
+const SPAN2_REPO = "rafmacalaba/gliner2_datause-onnx";
+const MULTITASK_REPO = "rafmacalaba/lfm2.5-350M-datause-multitask-onnx";
+const SPAN_LABELS = ["NAMED_DATA", "DESCRIPTIVE_DATA", "VAGUE_DATA"];
+const MAX_WIDTH = 12;
+const MAX_WIDTH2 = 8;
+const MAX_COUNT2 = 20;
+const SPAN_THRESHOLD = 0.6;
+// Local ONNX files (serve the repo root, not just web/, so ../onnx is reachable).
+const LOCAL = {
+  span: "../onnx/gliner_datause_extended_fp16.onnx",
+  span2: "../onnx/gliner2_datause_fp16_v2.onnx",
+  multitaskOnnx: "../onnx/lfm2_multitask_fp16_v2.onnx",
+  multitaskData: "../onnx/lfm2_multitask_fp16_v2.onnx_data",
+};
+env.allowRemoteModels = true;
+env.useBrowserCache = true;
+const status = document.getElementById("status");
+const runBtn = document.getElementById("run");
+const results = document.getElementById("results");
+const resultsPretty = results.querySelector(".result-pretty");
+const resultsJson = results.querySelector(".result-json");
+const resultsTrace = results.querySelector(".result-trace");
+const segOpts = document.querySelectorAll(".seg-opt");
+const segJson = document.querySelector('.seg-opt[data-mode="json"]');
+const segTrace = document.querySelector('.seg-opt[data-mode="trace"]');
+const logEl = document.getElementById("log");
+let lastResult = null;
+const statusRule = document.getElementById("status-rule-fill");
+const statusPct = document.getElementById("status-pct");
+const modelStatusText = document.getElementById("model-status-text");
+const textEl = document.getElementById("text");
+const SAMPLES = [
+  "To assess the distributional impact of agricultural interventions, we draw on several complementary data sources that jointly cover the period of interest. The first is the Demographic and Health Survey (DHS), collected by EuStatistics in 2021, which records health and nutrition outcomes for a nationally representative sample of households across all administrative regions. The second is the Ghana Living Standards Survey (GLSS), administered by the Ghana Statistical Service in 2017, which provides detailed consumption, expenditure, and income modules at the household level. Because both surveys report household consumption using broadly comparable definitions, we are able to pool the two samples and estimate a common poverty line across years and districts. We further merge in the World Bank's World Development Indicators (WDI) to control for district-level economic conditions, population density, and access to infrastructure. Following standard practice, we restrict the estimation sample to rural households and exclude observations with implausible consumption values, and we cluster standard errors at the district level throughout. All monetary variables are expressed in constant local currency units to ensure comparability across survey rounds.",
+  "Poverty rates in this paper are estimated using the National Family Health Survey (NFHS-3) for India, a large, nationally representative household survey fielded across all states and union territories. We restrict the estimation sample to ever-married women aged 15 to 49 and cluster standard errors at the district level to account for within-district correlation in household outcomes. The survey records a rich set of household characteristics, including caste, religion, asset ownership, and household size, which we use as controls throughout the analysis. Following the existing literature, we construct a household wealth index from the reported asset holdings using principal components analysis, and we measure poverty with a consumption-based welfare aggregate deflated to a common base year. To guard against measurement error, we exclude observations with missing values on any of the core variables and winsorize the dependent variable at the first and ninety-ninth percentiles. All specifications include state fixed effects and a full set of survey-month fixed effects, and we report robust standard errors clustered at the primary sampling unit level.",
+  "This paper estimates the returns to secondary education using a within-family identification strategy that compares the labor-market outcomes of siblings who differ in their educational attainment. The central empirical challenge is that ability and family background jointly determine both schooling and later earnings, so naive comparisons of more- and less-educated individuals confound the causal effect of schooling with pre-existing differences in talent and resources. By restricting attention to brothers and sisters raised in the same household, we remove all time-invariant household characteristics that would otherwise bias the estimates. Our main finding is that an additional year of secondary schooling raises hourly earnings substantially, and the effect is larger for women than for men. We show that this result is robust to a wide range of alternative specifications, including controls for birth order, age spacing, and gender composition, and to alternative definitions of the outcome measure. We also document that the returns to schooling vary with local labor-market conditions, being higher in urban areas and in regions with greater industrial concentration. Finally, we provide evidence that the estimated effects are not driven by selective migration or by differential measurement error in self-reported earnings.",
+  "Considerable provincial variation in insurance coverage is evident in the H8BS. Two of the surveys contain self-assessed health (in the GSCF, the assessment was actually done by the woman of the household), which at least in industrialized countries has been found to be a good predictor of mortality. We measured schooling by years of schooling in the CHNS and the GSCF, but in the H8BS have left education coded as levels of attainment. The basic CHNS results are reported in Table 4, the results for the Gansu panel in Table 6, and the results for the Health VIII baseline survey in Table 7.",
+  "One of the main advantages of the data from the EAC-I is that plot size is measured by GPS. This avoids measurement errors that lead to biased results. We aggregate crop yields at the household level. We convert production to kilograms using World Bank conversion factors. Interestingly, our data indicate that crop yields vary according to the extent to which polygyny is practiced in the commune.",
+  "Data are from the 2015-16 National Family Health Survey (NFHS) of India. Panels A-C present 2SLS estimates as specified by equations 1 and 2 and using cross-sectional data. Panel D presents 2SLS estimates using the retrospective woman-year panel data. Column (1) shows estimates for the full sample, while columns (2) and (3) restrict the samples to those living in rural and urban areas, respectively.",
+  "A second contribution of this paper is to show the importance of decomposing the effects with respect to distance from the mines. Given the spatial heterogeneity of the results, we explore the effects in an individual-level, difference-in-differences analysis by using spatial lag models to allow for nonlinear effects with distance from mine. We also allow for spillovers across districts, in a district-level analysis. We use two complementary geocoded household data sets to analyze outcomes in Ghana: the Demographic and Health Survey (DHS) and the Ghana Living Standard Survey (GLSS), which provide information on a wide range of welfare outcomes.",
+  "We use geospatial data to test the validity of the local continuity assumption around the boundaries of guerrilla-controlled areas. Elevation was obtained from NASA's Shuttle Radar Topography Mission (SRTM). Information on surface water bodies comes from the MERIT Hydro dataset. Agro-climatic yield rasters with a spatial resolution of five arc minutes (nine km) come from the Global Agro-Ecological Zones (GAEZ) project. For all yields, we are using the 30-year average beginning in 1961.",
+  "The average energy spending share observed in the HBS 2019 in Bulgaria is 13.1 percent. The largest energy spending component is on electricity (59.3 percent of all energy expenditure), followed by other solid fuels (27.5 percent) and heat energy (9.3 percent). One stream of literature defines the energy poor as all households that spend more than 10 percent of their total expenditure on energy.",
+  "In the COVID-19 NLPS round 4 conducted in August 2020, households were asked to compare their current income from various sources to their income in August 2019, and to indicate whether these incomes had increased, decreased, or remained the same.",
+  "Natural amenities were calculated using several GIS layers from the GHS layers. Water bodies were used to calculate dummy variables for location near the sea (coast). We used the 250 meters resolution raster MODIS Water Mask (Carroll et al., 2009) for this purpose. Finally, we used the Lloyd's lists of maritime and fluvial ports to account for the presence of ports.",
+  "This annex summarizes how the individual indicators from the WGI data sources are assigned to the six governance dimensions corresponding to the six aggregate WGI indicators in the most recent year in which they appear in the WGI dataset. For most data sources, this is 2023 (the most recent year available in the 2024 WGI update).",
+  "The application of this fiscal incidence framework requires both microdata and macrodata. The microdata come from the second wave of the National Survey on Household Living Conditions and Agriculture (ECVMA), and the state budget and national account data provide the macrodata. The ECVMA is a survey analogous to the Living Standards Measurement Study-Integrated Survey on Agriculture (LSMS-ISA), a World Bank Group program designed to collect nationally representative data at the household and individual levels on consumption, agriculture, and other social indicators. The second wave of the panel survey in Niger was implemented in 2014, covering urban and rural areas in all regions of the country. The sample was chosen through a random two-stage process, using the 2001 General Census of Population and Housing as the base for the first stage.",
+  "In order to proxy for the origin characteristics, a set of economic variables aggregated at the province (and urban/rural) level is used. Average per capita monthly household expenditures and average per capita land areas owned by households are computed by province (and urban/rural) from the VHLSS 2004 in order to capture living standards and the opportunities for agricultural, forestry, and fishery activities. To proxy for the chance of obtaining a job in the state sector, the proportion of state workers in total employment at each sending area is calculated from the VHLSS 2004. In terms of the proportion of workers employed by foreign firms, the number of workers in the latter sector for each location is taken from the Enterprise Survey data (GSO) and divided by total employment.",
+  "Following the survey identification, we proceeded to review the indicators in the identified surveys that were related to norms and female labor force participation. Building on the literature on agency and empowerment, we identified a set of indicators and variables repeatedly appearing in the literature as norms-related indicators. The surveys considered included the Demographic and Health Survey (DHS), World Values Survey (WVS), Multiple Indicator Cluster Surveys (MICS), Gallup Poll, and Gender and Adolescence: Global Evidence (GAGE). WVS, though not available for all countries in the region, was selected due to the availability of gender attitude variables that could serve as a proxy for relevant norms. Upon careful review, the latter three were dropped due to limited data availability and duplication of variables already available in the DHS.",
+  "According to IOM's Integrated Location Assessment 4, the rate of physical violence, threats, mistrust and returnees feeling unwelcome decreased within 12 months, but still remained. Context indicators such as blocked return, social cohesion and movement restriction remained similar, according to IOM's Return Index 12. Context indicators in Yathrib showed marked improvement, with threats between tribal groups, blocked IDP return, and returnees feeling unwelcome reported before the LPA was signed and absent three months post-signature.",
+];
+// --- status logging + progress -------------------------------------------------
+function log(msg, cls = "") {
+  if (!logEl) return;
+  const line = document.createElement("div");
+  if (cls) line.className = cls;
+  line.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
+  logEl.appendChild(line);
+  logEl.scrollTop = logEl.scrollHeight;
+}
+function showProgress(frac, label) {
+  modelStatusText.textContent = label;
+  const pctEl = document.getElementById("loader-pct");
+  const ruleEl = document.getElementById("loader-rule-fill");
+  const truthEl = document.getElementById("loader-truth");
+  const loaderEl = document.getElementById("loader");
+  const fillRect = document.getElementById("cat-fill-rect");
+  const meniscus = document.getElementById("cat-meniscus");
+  const pct = Math.round(frac * 100);
+  if (pctEl) pctEl.textContent = pct;
+  if (ruleEl) ruleEl.style.width = `${pct}%`;
+  if (truthEl) truthEl.textContent = label;
+  if (statusRule) statusRule.style.width = `${pct}%`;
+  if (statusPct) statusPct.textContent = `${pct}%`;
+  if (loaderEl) loaderEl.dataset.state = pct < 50 ? "sleeping" : pct < 90 ? "alert" : "excited";
+  if (fillRect) {
+    const fillY = Math.max(0, Math.min(320, 320 - frac * 320));
+    const fillH = Math.max(0, Math.min(320, frac * 320));
+    fillRect.setAttribute("y", fillY);
+    fillRect.setAttribute("height", fillH);
+    if (meniscus) {
+      meniscus.setAttribute("y1", fillY);
+      meniscus.setAttribute("y2", fillY);
+      meniscus.style.opacity = frac > 0.01 && frac < 0.99 ? "1" : "0.4";
+    }
+  }
+}
+function setLoaderStatus(msg) {
+  const el = document.getElementById("loader-status");
+  if (el) el.textContent = msg;
+}
+function hideLoader() {
+  document.getElementById("loader")?.classList.add("hidden");
+}
+function enableLoaderButton() {
+  const btn = document.getElementById("loader-cta");
+  if (btn) btn.disabled = false;
+}
+function setStatus(msg) {
+  status.textContent = msg;
+  const pill = document.getElementById("status-pill");
+  if (!pill) return;
+  const t = /error|unavailable|not found|rejected|failed/i.test(msg) ? "err"
+          : /ready|done/i.test(msg) ? "ready"
+          : "busy";
+  pill.className = "status-pill " + t;
+}
+// --- IndexedDB cache -----------------------------------------------------------
+function openCache() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open("datause-models", 1);
+    req.onupgradeneeded = () => req.result.createObjectStore("files");
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+async function cacheGet(key) {
+  const db = await openCache();
+  return new Promise((resolve) => {
+    const tx = db.transaction("files", "readonly");
+    const req = tx.objectStore("files").get(key);
+    req.onsuccess = () => resolve(req.result?.buffer ?? null);
+    req.onerror = () => resolve(null);
+  });
+}
+async function cacheSet(key, buffer) {
+  const db = await openCache();
+  return new Promise((resolve) => {
+    const tx = db.transaction("files", "readwrite");
+    tx.objectStore("files").put({ buffer, ts: Date.now() }, key);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => resolve();
+  });
+}
+// --- download with progress + cache -------------------------------------------
+async function loadFile(url, label) {
+  const cached = await cacheGet(url);
+  if (cached) { log(`cached: ${label} (${(cached.byteLength / 1e6).toFixed(1)} MB)`, "ok"); return cached; }
+  log(`downloading ${label} …`);
+  setLoaderStatus("Downloading");
+  const resp = await fetch(url);
+  if (!resp.ok) throw new Error(`${resp.status} for ${url}`);
+  const total = Number(resp.headers.get("content-length") || 0);
+  const reader = resp.body.getReader();
+  const chunks = [];
+  let received = 0;
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+    received += value.length;
+    const mb = (received / 1e6).toFixed(1);
+    if (total) {
+      showProgress(received / total, `${label} ${mb} / ${(total / 1e6).toFixed(1)} MB`);
+      setStatus(`Downloading ${label}… ${mb} / ${(total / 1e6).toFixed(1)} MB`);
+    } else {
+      showProgress(0.5, `${label} ${mb} MB`);
+      setStatus(`Downloading ${label}… ${mb} MB`);
+    }
+  }
+  const buffer = new Uint8Array(received);
+  let off = 0;
+  for (const c of chunks) { buffer.set(c, off); off += c.length; }
+  log(`downloaded ${label} (${(received / 1e6).toFixed(1)} MB)`, "ok");
+  showProgress(1, label);
+  cacheSet(url, buffer.buffer)
+    .then(() => log(`cached ${label}`, "ok"))
+    .catch(() => log(`cache skipped for ${label} (quota?)`, "warn")); // never block on IndexedDB
+  return buffer.buffer;
+}
+// --- LFM2.5 generation ----------------------------------------------------------
+const HIDDEN = 1024, NUM_KV_HEADS = 8, HEAD_DIM = 64;
+async function generateRaw(session, tokenizer, prompt, onToken, stopWhen) {
+  const rendered = `<|startoftext|><|im_start|>user\n${prompt}<|im_end|>\n<|im_start|>assistant\n`;
+  const ids = tokenizer.encode(rendered, { add_special_tokens: false });
+  const cache = {};
+  for (const name of session.inputNames) {
+    if (name.startsWith("past_conv")) cache[name] = new ort.Tensor("float16", new Uint16Array(HIDDEN * 3), [1, HIDDEN, 3]);
+    else if (name.startsWith("past_key_values")) cache[name] = new ort.Tensor("float16", new Uint16Array(0), [1, NUM_KV_HEADS, 0, HEAD_DIM]);
+  }
+  const eos = tokenizer.eos_token_id;
+  const gen = [];
+  let cur = ids;
+  let lastText = "";
+  for (let step = 0; step < 256; step++) {
+    const feed = {
+      input_ids: new ort.Tensor("int64", new BigInt64Array(cur.map(BigInt)), [1, cur.length]),
+      attention_mask: new ort.Tensor("int64", new BigInt64Array(ids.length + gen.length).fill(1n), [1, ids.length + gen.length]),
+      num_logits_to_keep: new ort.Tensor("int64", new BigInt64Array([1n]), []),
+      ...cache,
+    };
+    const out = await session.run(feed);
+    const logits = out.logits.data;
+    const V = out.logits.dims[2];
+    const start = (out.logits.dims[1] - 1) * V;
+    let best = 0;
+    for (let i = 1; i < V; i++) if (logits[start + i] > logits[start + best]) best = i;
+    if (best === eos) break;
+    gen.push(best);
+    lastText = tokenizer.decode(gen, { skip_special_tokens: true });
+    if (onToken) onToken(lastText);
+    if (stopWhen && stopWhen(lastText)) break;
+    for (const [name, t] of Object.entries(out)) {
+      if (name.startsWith("present_conv")) cache["past_conv." + name.slice("present_conv.".length)] = t;
+      else if (name.startsWith("present.")) cache["past_key_values." + name.slice("present.".length)] = t;
+    }
+    cur = [best];
+  }
+  return lastText || tokenizer.decode(gen, { skip_special_tokens: true });
+}
+// True once a complete JSON object has been emitted (after any <think> block).
+function jsonComplete(text) {
+  if (text.includes("<think>") && !text.includes("</think>")) return false;
+  return extractFinalJson(text) !== null;
+}
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+}
+// Render a parsed JSON value as HTML: keys navy-bold (span.k), values plain.
+function jsonToHtml(value) {
+  if (value === null || value === undefined) return "null";
+  const t = typeof value;
+  if (t === "string") return escapeHtml(JSON.stringify(value));
+  if (t === "number" || t === "boolean") return String(value);
+  if (Array.isArray(value)) return "[" + value.map(jsonToHtml).join(", ") + "]";
+  if (t === "object") {
+    return "{ " + Object.entries(value)
+      .map(([k, v]) => '<span class="k">' + escapeHtml(JSON.stringify(k)) + "</span>: " + jsonToHtml(v))
+      .join(", ") + " }";
+  }
+  return escapeHtml(String(value));
+}
+// --- Pretty tree rendering ------------------------------------------------------
+const PROV_KEYS = ["acronym", "producer", "year", "geography"];
+const UI_KEYS = ["data_type", "usage_action", "impact_label", "usage_summary"];
+function leafHtml(k, v) {
+  return `<div class="tree-leaf"><span class="k">${escapeHtml(k)}</span><span class="arrow">→</span><span class="v">${escapeHtml(String(v))}</span></div>`;
+}
+function leavesHtml(obj, keys) {
+  if (!obj) return '<div class="tree-none">none</div>';
+  const out = [];
+  for (const k of keys) {
+    const v = obj[k];
+    if (v === undefined || v === null || v === "") continue;
+    out.push(leafHtml(k, v));
+  }
+  return out.length ? out.join("") : '<div class="tree-none">none</div>';
+}
+function mentionTreeHtml(m) {
+  const badge = `<span class="badge badge-${m.label}">${escapeHtml(m.label)}</span>`;
+  const name = `<span class="tree-name">${escapeHtml(m.text)}</span>`;
+  if (m.label === "VAGUE_DATA") {
+    return `<div class="tree"><div class="tree-root">${badge}${name}</div><div class="tree-none">no attributes</div></div>`;
+  }
+  return (
+    `<div class="tree">` +
+    `<div class="tree-root">${badge}${name}<span class="tree-ms">…</span></div>` +
+    `<div class="tree-body">` +
+    `<div class="tree-slot" data-slot="prov"><div class="tree-stream streaming">attributing…</div></div>` +
+    `<div class="tree-group"><div class="tree-label">usage/impact</div><div class="tree-slot" data-slot="ui"></div></div>` +
+    `</div></div>`
+  );
+}
+async function runProvenance(session, tokenizer, text, mention, onToken) {
+  const raw = await generateRaw(session, tokenizer, buildPrompt(text, mention), onToken, jsonComplete);
+  return filterVerbatim(extractFinalJson(raw), text);
+}
+async function runUsageImpact(session, tokenizer, text, mention, onToken) {
+  const usage = sentenceContaining(text, mention);
+  const raw = await generateRaw(session, tokenizer, buildUsageImpactPrompt(mention, usage, text), onToken, jsonComplete);
+  return extractFinalJson(raw) ?? {};
+}
+// --- GLiNER span detection ------------------------------------------------------
+function prepareSpanIdx(numWords, maxWidth) {
+  const starts = [], ends = [], mask = [];
+  for (let s = 0; s < numWords; s++) {
+    for (let w = 0; w < maxWidth; w++) {
+      const e = s + w;
+      starts.push(s);
+      ends.push(e);
+      mask.push(e < numWords ? 1 : 0);
+    }
+  }
+  return { starts, ends, mask };
+}
+function tokenizeWords(text) {
+  // Approximate spaCy `blank('en')` word splitting: whitespace + punctuation.
+  const out = [];
+  for (const chunk of text.split(/\s+/)) {
+    if (!chunk) continue;
+    const parts = chunk.match(/[A-Za-z0-9][A-Za-z0-9'\-]*|[^\s]/g);
+    if (parts) out.push(...parts);
+  }
+  return out;
+}
+function buildSpanInput(tokenizer, text) {
+  // GLiNER uni-encoder prompt: <<ENT>> label, repeated per label, then <<SEP>>.
+  const prompt = ["<<ENT>>", "NAMED_DATA", "<<ENT>>", "DESCRIPTIVE_DATA",
+                  "<<ENT>>", "VAGUE_DATA", "<<SEP>>"];
+  const words = tokenizeWords(text);
+  const clsId = tokenizer.cls_token_id ?? 1;
+  const sepId = tokenizer.sep_token_id ?? 2;
+  const ids = [clsId];
+  const wordsMask = [0n];
+  for (const w of prompt) {
+    for (const s of tokenizer.encode(w, { add_special_tokens: false })) {
+      ids.push(s); wordsMask.push(0n);
+    }
+  }
+  let wordId = 0;
+  for (const w of words) {
+    wordId++;
+    const sub = tokenizer.encode(w, { add_special_tokens: false });
+    for (let i = 0; i < sub.length; i++) {
+      ids.push(sub[i]);
+      wordsMask.push(i === 0 ? BigInt(wordId) : 0n);
+    }
+  }
+  ids.push(sepId);
+  wordsMask.push(0n);
+  return {
+    ids,
+    wordsMask: new BigInt64Array(wordsMask),
+    numWords: wordId,
+    words,
+  };
+}
+async function runSpan(session, tokenizer, text) {
+  const { ids, wordsMask, numWords, words } = buildSpanInput(tokenizer, text);
+  if (numWords <= 0) return [];
+  const { starts, ends, mask } = prepareSpanIdx(numWords, MAX_WIDTH);
+  const spanIdx = [];
+  for (let i = 0; i < starts.length; i++) spanIdx.push([starts[i], ends[i]]);
+  const feed = {
+    input_ids: new ort.Tensor("int64", new BigInt64Array(ids.map(BigInt)), [1, ids.length]),
+    attention_mask: new ort.Tensor("int64", new BigInt64Array(ids.length).fill(1n), [1, ids.length]),
+    words_mask: new ort.Tensor("int64", wordsMask, [1, ids.length]),
+    text_lengths: new ort.Tensor("int64", new BigInt64Array([BigInt(numWords)]), [1, 1]),
+    span_idx: new ort.Tensor("int64", new BigInt64Array(spanIdx.flat().map(BigInt)), [1, spanIdx.length, 2]),
+    span_mask: new ort.Tensor("int64", new BigInt64Array(mask.map(BigInt)), [1, mask.length]),
+  };
+  const out = await session.run(feed);
+  const logits = out.logits.data;
+  const C = out.logits.dims[3];
+  const W = out.logits.dims[2];
+  const numSpanTotal = out.logits.dims[1] * W;
+  const spans = [];
+  for (let i = 0; i < numSpanTotal; i++) {
+    if (!mask[i]) continue;
+    const base = i * C;
+    let cls = 0;
+    for (let c = 1; c < C; c++) if (logits[base + c] > logits[base + cls]) cls = c;
+    spans.push({ start: starts[i], end: ends[i], cls, score: logits[base + cls] });
+  }
+  spans.sort((a, b) => b.score - a.score);
+  const kept = [];
+  const used = new Set();
+  for (const sp of spans) {
+    if (sp.score < SPAN_THRESHOLD) continue;
+    let overlaps = false;
+    for (let i = sp.start; i <= sp.end; i++) if (used.has(i)) { overlaps = true; break; }
+    if (overlaps) continue;
+    for (let i = sp.start; i <= sp.end; i++) used.add(i);
+    const label = SPAN_LABELS[sp.cls];
+    const txt = words.slice(sp.start, sp.end + 1).join(" ");
+    kept.push({ text: txt, label });
+  }
+  return kept;
+}
+async function loadModelFile(localPath, hfUrl, label) {
+  // Try local file first (fast, offline); fall back to HuggingFace.
+  try {
+   const r = await fetch(localPath, { method: "HEAD" });
+   if (r.ok) { log(`using local ${label}`); return loadFile(localPath, label); }
+  } catch { /* no local server path */ }
+  return loadFile(hfUrl, label);
+}
+// --- GLiNER2 span detection (schema-based) --------------------------------------
+function tokenizeWords2(text) {
+  // GLiNER2's regex word splitter (lowercased), returning tokens with char offsets.
+  const lower = text.toLowerCase();
+  const re = /(?:https?:\/\/[^\s]+|www\.[^\s]+)|[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}|@[a-z0-9_]+|\w+(?:[-_]\w+)*|\S/gi;
+  const out = [];
+  let m;
+  while ((m = re.exec(lower)) !== null) {
+    out.push({ t: m[0], s: m.index, e: m.index + m[0].length });
+  }
+  return out;
+}
+function buildSpan2Input(tokenizer, text) {
+  if (text && !/[.!?]$/.test(text)) text += ".";
+  const schema = ["(", "[P]", "entities", "(", "[E]", "NAMED_DATA", "[E]",
+                  "DESCRIPTIVE_DATA", "[E]", "VAGUE_DATA", ")", ")"];
+  const words = tokenizeWords2(text);
+  const combined = [...schema, "[SEP_TEXT]", ...words.map((w) => w.t)];
+  const ids = [];
+  const schemaSpecial = [];
+  const textWordIndices = [];
+  const startMap = [];
+  const endMap = [];
+  let pos = 0;
+  for (let i = 0; i < combined.length; i++) {
+    const w = combined[i];
+    const sub = tokenizer.encode(w, { add_special_tokens: false });
+    const startPos = pos;
+    for (const s of sub) { ids.push(s); pos++; }
+    if (i < schema.length && (w === "[P]" || w === "[E]")) schemaSpecial.push(startPos);
+    if (i >= schema.length + 1) {
+      textWordIndices.push(startPos);
+      startMap.push(words[i - schema.length - 1].s);
+      endMap.push(words[i - schema.length - 1].e);
+    }
+  }
+  return { ids, schemaSpecial, textWordIndices, startMap, endMap, numWords: words.length };
+}
+function prepareSpanIdx2(numWords, maxWidth) {
+  const starts = [], ends = [], mask = [];
+  for (let s = 0; s < numWords; s++) {
+    for (let w = 0; w < maxWidth; w++) {
+      const e = s + w;
+      starts.push(e < numWords ? s : -1);
+      ends.push(e < numWords ? e : -1);
+      mask.push(e < numWords ? 1 : 0);
+    }
+  }
+  return { starts, ends, mask };
+}
+async function runSpan2(session, tokenizer, text) {
+  const { ids, schemaSpecial, textWordIndices, startMap, endMap, numWords } =
+    buildSpan2Input(tokenizer, text);
+  if (numWords <= 0) return [];
+  const { starts, ends, mask } = prepareSpanIdx2(numWords, MAX_WIDTH2);
+  const spanIdx = [];
+  for (let i = 0; i < starts.length; i++) {
+    const a = starts[i] < 0 ? 0 : starts[i];
+    const b = ends[i] < 0 ? 0 : ends[i];
+    spanIdx.push([a, b]);
+  }
+  const feed = {
+    input_ids: new ort.Tensor("int64", new BigInt64Array(ids.map(BigInt)), [1, ids.length]),
+    attention_mask: new ort.Tensor("int64", new BigInt64Array(ids.length).fill(1n), [1, ids.length]),
+    text_word_indices: new ort.Tensor("int64", new BigInt64Array(textWordIndices.map(BigInt)), [1, numWords]),
+    schema_special_indices: new ort.Tensor("int64", new BigInt64Array(schemaSpecial.map(BigInt)), [1, schemaSpecial.length]),
+    span_idx: new ort.Tensor("int64", new BigInt64Array(spanIdx.flat().map(BigInt)), [1, spanIdx.length, 2]),
+  };
+  const out = await session.run(feed);
+  const scores = out.span_scores.data; // (1, W, K=8, max_count=20, M=3)
+  const W = out.span_scores.dims[1];
+  const K = out.span_scores.dims[2];
+  const MC = out.span_scores.dims[3];
+  const M = out.span_scores.dims[4];
+  // slot 0 scores: (W, K, M)
+  const kept = [];
+  for (let mIdx = 0; mIdx < M; mIdx++) {
+    const label = SPAN_LABELS[mIdx];
+    const cand = [];
+    for (let w = 0; w < W; w++) {
+      for (let k = 0; k < K; k++) {
+        if (!mask[w * K + k]) continue;
+        const idx = (((w * K + k) * MC + 0) * M) + mIdx;
+        const sc = scores[idx];
+        if (sc >= SPAN_THRESHOLD) {
+          const start = w;
+          const end = w + k; // inclusive word span [w, w+k]
+          cand.push({ start, end, score: sc });
+        }
+      }
+    }
+    cand.sort((a, b) => b.score - a.score);
+    const used = new Set();
+    for (const c of cand) {
+      let overlap = false;
+      for (let i = c.start; i <= c.end; i++) if (used.has(i)) { overlap = true; break; }
+      if (overlap) continue;
+      for (let i = c.start; i <= c.end; i++) used.add(i);
+      const charStart = startMap[c.start];
+      const charEnd = endMap[c.end];
+      const txt = text.slice(charStart, charEnd).trim();
+      if (txt) kept.push({ text: txt, label });
+    }
+  }
+  return kept;
+}
+// --- init -----------------------------------------------------------------------
+async function init() {
+  if (!navigator.gpu) { setStatus("WebGPU unavailable"); log("WebGPU unavailable", "warn"); return null; }
+  setStatus("Requesting WebGPU adapter…");
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) { setStatus("WebGPU adapter not found"); log("WebGPU adapter not found", "warn"); return null; }
+  ort.env.wasm.numThreads = 1;
+  setStatus("Loading span model (GLiNER)…");
+  log("loading span model (GLiNER) …");
+  const spanBuffer = await loadModelFile(LOCAL.span, HF(SPAN_REPO, "onnx/gliner_datause_extended_fp16.onnx"), "GLiNER span model");
+  setStatus("Initializing span model (WebGPU)…");
+  const spanSession = await ort.InferenceSession.create(spanBuffer, { executionProviders: ["webgpu"] });
+  log("span model ready", "ok");
+  setStatus("Loading tokenizers…");
+  log("loading tokenizers …");
+  const spanTokenizer = await AutoTokenizer.from_pretrained("rafmacalaba/gliner_datause_extended-onnx");
+  const multitaskTokenizer = await AutoTokenizer.from_pretrained(MULTITASK_REPO);
+  log("tokenizers ready", "ok");
+  const multitaskSession = await loadMultitaskSession();
+  setStatus("Ready");
+  modelStatusText.textContent = "Models ready — cached in browser · WebGPU";
+  if (statusRule) statusRule.style.width = "100%";
+  if (statusPct) statusPct.textContent = "100%";
+  runBtn.disabled = false;
+  setLoaderStatus("Ready");
+  log("execution provider: WebGPU (all models)", "ok");
+  enableLoaderButton();
+  return { spanSession, spanTokenizer, multitaskTokenizer, multitaskSession };
+}
+// --- LFM2.5 multitask attribution ------------------------------------------------
+async function createLlmSession(onnxBuffer, dataBuffer, dataPath, label) {
+  const extData = [{ path: dataPath, data: dataBuffer }];
+  setStatus(`Initializing ${label} (WebGPU)…`);
+  try {
+    return await ort.InferenceSession.create(onnxBuffer, { executionProviders: ["webgpu"], externalData: extData });
+  } catch (e) {
+    log(`WebGPU rejected ${label}: ${e?.message || e}`, "warn");
+    console.error("webgpu create error:", e);
+    setStatus(`WebGPU rejected ${label} — trying wasm (CPU)…`);
+    const s = await ort.InferenceSession.create(onnxBuffer, { executionProviders: ["wasm"], externalData: extData });
+    log(`${label} loaded on wasm (CPU) fallback`, "warn");
+    return s;
+  }
+}
+async function loadMultitaskSession() {
+  setStatus("Loading multitask model (LFM2.5)…");
+  log("loading multitask model (LFM2.5) …");
+  const onnx = await loadModelFile(LOCAL.multitaskOnnx, HF(MULTITASK_REPO, "onnx/lfm2_multitask_fp16_v2.onnx"), "LFM2.5 multitask model");
+  const data = await loadModelFile(LOCAL.multitaskData, HF(MULTITASK_REPO, "onnx/lfm2_multitask_fp16_v2.onnx_data"), "LFM2.5 multitask weights");
+  const s = await createLlmSession(onnx, data, "lfm2_multitask_fp16_v2.onnx_data", "multitask model");
+  log("multitask model ready", "ok");
+  return s;
+}
+const ready = init().catch((e) => {
+  const msg = (e && (e.message || e.name)) || String(e) || "unknown error";
+  setStatus("Error: " + msg);
+  setLoaderStatus("Error");
+  log("Error: " + msg, "warn");
+  log("details: " + (e?.stack || JSON.stringify(e) || "n/a"), "warn");
+  console.error(e);
+  enableLoaderButton();
+  return null;
+});
+document.getElementById("loader-cta")?.addEventListener("click", () => {
+  hideLoader();
+});
+runBtn.addEventListener("click", async () => {
+  const ctx = await ready;
+  if (!ctx) return;
+  const text = textEl.value.trim();
+  if (!text) return;
+  resultsPretty.innerHTML = "";
+  resultsJson.innerHTML = "";
+  resultsTrace.innerHTML = "";
+  lastResult = null;
+  [segJson, segTrace].forEach((s) => { if (s) s.disabled = true; });
+  runBtn.disabled = true;
+  try {
+    const tTotal0 = performance.now();
+    setStatus("Running span model (GLiNER)…");
+    log("extracting data mentions (GLiNER) …");
+    const tSpan0 = performance.now();
+    const mentions = await runSpan(ctx.spanSession, ctx.spanTokenizer, text);
+    const spanMs = performance.now() - tSpan0;
+    const named = mentions.filter((m) => m.label !== "VAGUE_DATA");
+    log(`span: ${spanMs.toFixed(0)} ms — ${mentions.length} mentions (${named.length} named/descriptive)`, "ok");
+    const labelCounts = {};
+    for (const m of mentions) labelCounts[m.label] = (labelCounts[m.label] || 0) + 1;
+    log(`labels: ${SPAN_LABELS.map(l => `${l}=${labelCounts[l] || 0}`).join(", ")}`, "ok");
+    // Attribution: LFM2.5 multitask (provenance + usage/impact).
+    const attribLabel = "Multitask";
+    // Render all mentions immediately; attribution fills in afterwards.
+    const perfDiv = document.createElement("div");
+    perfDiv.className = "perf";
+    perfDiv.innerHTML =
+      `<span class="stat">span <b>${spanMs.toFixed(0)} ms</b></span>` +
+      `<span class="stat">mentions <b>${named.length}</b></span>` +
+      `<span class="stat">${attribLabel.toLowerCase()} <b>…</b></span>`;
+    resultsPretty.prepend(perfDiv);
+    const perfAttrib = perfDiv.querySelector(".stat:last-child b");
+    const cards = new Map();
+    for (const m of mentions) {
+      const wrapper = document.createElement("div");
+      wrapper.innerHTML = mentionTreeHtml(m);
+      const el = wrapper.firstElementChild;
+      resultsPretty.appendChild(el);
+      cards.set(m, {
+        msEl: el.querySelector(".tree-ms"),
+        provSlot: el.querySelector('[data-slot="prov"]'),
+        uiSlot: el.querySelector('[data-slot="ui"]'),
+        attrs: null, ui: null, ms: null,
+      });
+    }
+    // Attribution per mention, streaming tokens into each tree as they arrive.
+    let attribTotalMs = 0;
+    for (const m of named) {
+      setStatus(`Attributing "${m.text}" (${attribLabel})…`);
+      const t0 = performance.now();
+      const card = cards.get(m);
+      const attrs = await runProvenance(ctx.multitaskSession, ctx.multitaskTokenizer, text, m.text, (partial) => {
+        if (card && card.provSlot) card.provSlot.innerHTML = `<div class="tree-stream streaming">${escapeHtml(partial)}</div>`;
+      });
+      if (card && card.provSlot) {
+        card.attrs = attrs;
+        card.provSlot.innerHTML = leavesHtml(attrs, PROV_KEYS);
+      }
+      const ui = await runUsageImpact(ctx.multitaskSession, ctx.multitaskTokenizer, text, m.text, (partial) => {
+        if (card && card.uiSlot) card.uiSlot.innerHTML = `<div class="tree-stream streaming">${escapeHtml(partial)}</div>`;
+      });
+      if (card && card.uiSlot) {
+        card.ui = ui;
+        card.uiSlot.innerHTML = leavesHtml(ui, UI_KEYS);
+      }
+      const ms = performance.now() - t0;
+      attribTotalMs += ms;
+      log(`attribution "${m.text}": ${ms.toFixed(0)} ms`);
+      if (card) {
+        card.ms = ms;
+        if (card.msEl) card.msEl.textContent = `${ms.toFixed(0)} ms`;
+      }
+      perfAttrib.textContent = `${attribTotalMs.toFixed(0)} ms`;
+    }
+    const totalMs = performance.now() - tTotal0;
+    log(`done: total ${totalMs.toFixed(0)} ms · span ${spanMs.toFixed(0)} ms · ${attribLabel.toLowerCase()} ${attribTotalMs.toFixed(0)} ms`, "ok");
+    if (!mentions.length) resultsPretty.innerHTML = "<div class=\"empty\">No mentions found.</div>";
+    setStatus("Done");
+    lastResult = {
+      input: { text, length: text.length },
+      timings: {
+        span_ms: Math.round(spanMs),
+        attribution_ms: Math.round(attribTotalMs),
+        total_ms: Math.round(totalMs),
+      },
+      label_counts: labelCounts,
+      mentions: mentions.map((m) => {
+        const c = cards.get(m) || {};
+        return {
+          text: m.text,
+          label: m.label,
+          provenance: c.attrs || null,
+          usage_impact: c.ui || null,
+          attribution_ms: c.ms != null ? Math.round(c.ms) : null,
+        };
+      }),
+    };
+    [segJson, segTrace].forEach((s) => { if (s) s.disabled = false; });
+    const activeMode = document.querySelector(".seg-opt.active")?.dataset.mode || "pretty";
+    if (activeMode === "json") renderJson();
+    else if (activeMode === "trace") renderTrace();
+  } catch (e) {
+    const msg = (e && (e.message || e.name)) || String(e) || "unknown error";
+    setStatus("Error: " + msg);
+    log("Error: " + msg, "warn");
+    log("details: " + (e?.stack || JSON.stringify(e) || "n/a"), "warn");
+    console.error(e);
+  } finally {
+    runBtn.disabled = false;
+  }
+});
+function colorizeJson(json) {
+  return escapeHtml(json)
+    .replace(/(&quot;[^&]*?&quot;)(\s*:)/g, '<span class="jk">$1</span>$2')
+    .replace(/:\s*(&quot;[^&]*?&quot;)/g, ': <span class="js">$1</span>')
+    .replace(/:\s*(-?\d+\.?\d*)/g, ': <span class="jn">$1</span>')
+    .replace(/:\s*(true|false|null)\b/g, ': <span class="jb">$1</span>');
+}
+function cleanResult() {
+  if (!lastResult) return null;
+  return {
+    input: lastResult.input,
+    mentions: lastResult.mentions.map((m) => ({
+      text: m.text,
+      label: m.label,
+      provenance: m.provenance,
+      usage_impact: m.usage_impact,
+    })),
+  };
+}
+function renderJson() {
+  if (!lastResult) return;
+  const json = JSON.stringify(cleanResult(), null, 2);
+  resultsJson.innerHTML = `<pre>${colorizeJson(json)}</pre>`;
+}
+function renderTrace() {
+  if (!lastResult) return;
+  const t = lastResult.timings;
+  const meta =
+    `<div class="json-meta">` +
+    `<span>input <b>${lastResult.input.length}</b> chars</span>` +
+    `<span>span <b>${t.span_ms} ms</b></span>` +
+    `<span>attribution <b>${t.attribution_ms} ms</b></span>` +
+    `<span>total <b>${t.total_ms} ms</b></span>` +
+    `<span>mentions <b>${lastResult.mentions.length}</b></span>` +
+    `</div>`;
+  const json = JSON.stringify(lastResult, null, 2);
+  resultsTrace.innerHTML = meta + `<pre>${colorizeJson(json)}</pre>`;
+}
+const PANES = [
+  ["pretty", resultsPretty],
+  ["json", resultsJson],
+  ["trace", resultsTrace],
+];
+function setMode(mode) {
+  if (mode !== "pretty" && !lastResult) return;
+  segOpts.forEach((o) => {
+    const active = o.dataset.mode === mode;
+    o.classList.toggle("active", active);
+    o.setAttribute("aria-selected", String(active));
+  });
+  for (const [m, pane] of PANES) {
+    pane.hidden = m !== mode;
+    pane.setAttribute("aria-live", m === mode ? "polite" : "off");
+  }
+  if (mode === "json") renderJson();
+  else if (mode === "trace") renderTrace();
+}
+segOpts.forEach((o) => o.addEventListener("click", () => setMode(o.dataset.mode)));
+// Sample category tabs & chips
+const sampleSegBtns = document.querySelectorAll(".sample-seg-btn");
+const sampleGroups = document.querySelectorAll(".samples-group");
+const sampleChips = document.querySelectorAll(".sample-chip");
+const shuffleBtn = document.getElementById("sample-shuffle");
+function selectSample(btn) {
+  if (!btn) return;
+  const idx = Number(btn.dataset.sample);
+  if (isNaN(idx) || !SAMPLES[idx]) return;
+  textEl.value = SAMPLES[idx];
+  sampleChips.forEach((c) => c.classList.toggle("active", c === btn));
+}
+sampleSegBtns.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    const cat = btn.dataset.category;
+    sampleSegBtns.forEach((b) => {
+      const active = b === btn;
+      b.classList.toggle("active", active);
+      b.setAttribute("aria-selected", String(active));
+    });
+    sampleGroups.forEach((g) => {
+      g.hidden = g.dataset.group !== cat;
+    });
+  });
+});
+sampleChips.forEach((btn) => {
+  btn.addEventListener("click", () => selectSample(btn));
+});
+shuffleBtn?.addEventListener("click", () => {
+  const activeGroup = document.querySelector(".samples-group:not([hidden])");
+  if (!activeGroup) return;
+  const visibleChips = Array.from(activeGroup.querySelectorAll(".sample-chip"));
+  if (!visibleChips.length) return;
+  const currentActive = visibleChips.find((c) => c.classList.contains("active"));
+  const pool = visibleChips.filter((c) => c !== currentActive);
+  const target = (pool.length ? pool : visibleChips)[Math.floor(Math.random() * (pool.length || visibleChips.length))];
+  selectSample(target);
+});
+document.getElementById("force-redownload").addEventListener("click", async () => {
+  log("clearing model cache…", "warn");
+  try {
+    await new Promise((resolve) => {
+      const req = indexedDB.deleteDatabase("datause-models");
+      req.onsuccess = req.onerror = req.onblocked = () => resolve();
+    });
+  } catch { /* ignore */ }
+  location.reload();
+});
+// Fetch model READMEs (metrics + training details) for the "Models & tasks" panel.
+async function loadReadme(repo, elId) {
+  const el = document.getElementById(elId);
+  if (!el) return;
+  try {
+    const resp = await fetch(`https://huggingface.co/${repo}/resolve/main/README.md`);
+    if (!resp.ok) throw new Error(String(resp.status));
+    const md = await resp.text();
+    const metrics = md
+      .split("\n")
+      .filter((l) => l.includes("|") && (/\d/.test(l) || l.startsWith("|")))
+      .join("\n");
+    el.textContent = metrics || md.slice(0, 1500);
+  } catch {
+    el.textContent = "README unavailable offline.";
+  }
+}
+loadReadme("rafmacalaba/gliner_datause_extended", "meta-gliner");
+loadReadme("rafmacalaba/lfm2.5-350M-datause-multitask", "meta-multitask");