configurable span threshold + confidence chip

index.html

@@ -679,6 +679,14 @@
     .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-conf {
+      font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
+      padding: 0.12rem 0.5rem; border-radius: 999px; letter-spacing: 0.02em;
+      white-space: nowrap;
+    }
+    .tree-conf.c-high { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
+    .tree-conf.c-mid  { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
+    .tree-conf.c-low  { color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); }
     .tree-body {
       position: relative; margin: 0.4rem 0 0 0.4rem;
       padding-left: 1.15rem; border-left: 1px solid var(--border-strong);
@@ -753,6 +761,21 @@
     /* 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); }
+    .threshold-control {
+      display: flex; align-items: center; gap: 0.7rem;
+      font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted);
+    }
+    .threshold-control .thr-label {
+      letter-spacing: 0.08em; text-transform: uppercase;
+      font-weight: 600; color: var(--text-subtle); white-space: nowrap;
+    }
+    .threshold-control input[type="range"] {
+      flex: 1; accent-color: var(--accent-2); cursor: pointer; height: 18px;
+    }
+    .threshold-control .thr-val {
+      color: var(--accent-2); font-weight: 600; min-width: 3ch; text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
     .btn {
       display: inline-flex; align-items: center; gap: 0.55rem;
       font: inherit; font-weight: 600; font-size: 0.88rem; color: var(--btn-fg);
@@ -1273,6 +1296,12 @@
           <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="threshold-control">
+          <span class="thr-label">Span threshold</span>
+          <input type="range" id="span-threshold" min="0" max="1" step="0.05" value="0.6" aria-label="Span detection threshold">
+          <span class="thr-val" id="span-threshold-val">0.60</span>
+        </div>
+
         <div class="actions">
           <span class="meta-text num">WebGPU · client-side · no server</span>
           <button class="btn" id="run" disabled>

main.js

@@ -10,7 +10,7 @@ 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;
+let spanThreshold = 0.6;
 
 // Local ONNX files (serve the repo root, not just web/, so ../onnx is reachable).
 const LOCAL = {
@@ -278,15 +278,24 @@ function leavesHtml(obj, keys) {
   return out.length ? out.join("") : '<div class="tree-none">none</div>';
 }
 
+function confidenceChip(score) {
+  if (typeof score !== "number" || Number.isNaN(score)) return "";
+  const p = 1 / (1 + Math.exp(-score));
+  const pct = Math.round(p * 100);
+  const level = p >= 0.85 ? "c-high" : p >= 0.7 ? "c-mid" : "c-low";
+  return `<span class="tree-conf ${level}" title="confidence ${pct}%">${pct}%</span>`;
+}
+
 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>`;
+  const conf = confidenceChip(m.score);
   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}${conf}</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-root">${badge}${name}${conf}<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>` +
@@ -399,14 +408,14 @@ async function runSpan(session, tokenizer, text) {
   const kept = [];
   const used = new Set();
   for (const sp of spans) {
-    if (sp.score < SPAN_THRESHOLD) continue;
+    if (sp.score < spanThreshold) 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 });
+    kept.push({ text: txt, label, score: sp.score });
   }
   return kept;
 }
@@ -512,7 +521,7 @@ async function runSpan2(session, tokenizer, text) {
         if (!mask[w * K + k]) continue;
         const idx = (((w * K + k) * MC + 0) * M) + mIdx;
         const sc = scores[idx];
-        if (sc >= SPAN_THRESHOLD) {
+        if (sc >= spanThreshold) {
           const start = w;
           const end = w + k; // inclusive word span [w, w+k]
           cand.push({ start, end, score: sc });
@@ -844,6 +853,15 @@ shuffleBtn?.addEventListener("click", () => {
   selectSample(target);
 });
 
+const thresholdInput = document.getElementById("span-threshold");
+const thresholdVal = document.getElementById("span-threshold-val");
+if (thresholdInput) {
+  thresholdInput.addEventListener("input", () => {
+    spanThreshold = Number(thresholdInput.value);
+    if (thresholdVal) thresholdVal.textContent = spanThreshold.toFixed(2);
+  });
+}
+
 // Fetch model READMEs (metrics + training details) for the "Models & tasks" panel.
 async function loadReadme(repo, elId) {
   const el = document.getElementById(elId);