Update tagger_ui/templates/index.html

tagger_ui/templates/index.html

@@ -8,268 +8,200 @@
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     :root {
-      --bg:       #0f0f11;
-      --surface:  #1a1a1f;
-      --border:   #2e2e38;
-      --accent:   #7c6af7;
-      --accent2:  #a78bfa;
-      --text:     #e2e2e8;
-      --muted:    #6b6b7e;
-      --green:    #4ade80;
-      --radius:   10px;
+      --bg:      #0f0f11;
+      --surface: #1a1a1f;
+      --border:  #2e2e38;
+      --accent:  #7c6af7;
+      --text:    #e2e2e8;
+      --muted:   #6b6b7e;
+      --green:   #4ade80;
+      --radius:  10px;
     }
 
     body {
-      background: var(--bg);
-      color: var(--text);
+      background: var(--bg); color: var(--text);
       font-family: 'Inter', system-ui, sans-serif;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 2rem 1rem 4rem;
+      min-height: 100vh; display: flex; flex-direction: column;
+      align-items: center; padding: 2rem 1rem 4rem;
     }
 
-    h1 {
-      font-size: 1.6rem;
-      font-weight: 700;
-      letter-spacing: -0.02em;
-      margin-bottom: 0.25rem;
-    }
-    h1 span { color: var(--accent2); }
-
-    .subtitle {
-      color: var(--muted);
-      font-size: 0.85rem;
-      margin-bottom: 2rem;
-    }
+    h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .25rem; }
+    h1 span { color: #a78bfa; }
+    .subtitle { color: var(--muted); font-size: .85rem; margin-bottom: 2rem; }
 
     .card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 1.5rem;
-      width: 100%;
-      max-width: 780px;
-    }
-
-    /* ---- input area ---- */
-    .input-row {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1rem;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius); padding: 1.5rem;
+      width: 100%; max-width: 900px;
     }
 
+    /* ---- input ---- */
+    .input-row { display: flex; gap: .5rem; margin-bottom: 1rem; }
     .input-row input[type="text"] {
-      flex: 1;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      font-size: 0.9rem;
-      padding: 0.6rem 0.9rem;
-      outline: none;
-      transition: border-color 0.15s;
+      flex: 1; background: var(--bg); border: 1px solid var(--border);
+      border-radius: var(--radius); color: var(--text); font-size: .9rem;
+      padding: .6rem .9rem; outline: none; transition: border-color .15s;
     }
     .input-row input[type="text"]:focus { border-color: var(--accent); }
     .input-row input[type="text"]::placeholder { color: var(--muted); }
 
     .btn {
-      background: var(--accent);
-      border: none;
-      border-radius: var(--radius);
-      color: #fff;
-      cursor: pointer;
-      font-size: 0.9rem;
-      font-weight: 600;
-      padding: 0.6rem 1.2rem;
-      transition: opacity 0.15s;
-      white-space: nowrap;
+      background: var(--accent); border: none; border-radius: var(--radius);
+      color: #fff; cursor: pointer; font-size: .9rem; font-weight: 600;
+      padding: .6rem 1.2rem; transition: opacity .15s; white-space: nowrap;
     }
-    .btn:hover { opacity: 0.85; }
-    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .btn:hover { opacity: .85; }
+    .btn:disabled { opacity: .4; cursor: not-allowed; }
 
     /* ---- drop zone ---- */
     #drop-zone {
-      border: 2px dashed var(--border);
-      border-radius: var(--radius);
-      color: var(--muted);
-      cursor: pointer;
-      font-size: 0.85rem;
-      padding: 1.4rem;
-      text-align: center;
-      transition: border-color 0.15s, background 0.15s;
-      margin-bottom: 1rem;
-    }
-    #drop-zone.drag-over {
-      border-color: var(--accent);
-      background: rgba(124,106,247,0.06);
+      border: 2px dashed var(--border); border-radius: var(--radius);
+      color: var(--muted); cursor: pointer; font-size: .85rem;
+      padding: 1.4rem; text-align: center;
+      transition: border-color .15s, background .15s; margin-bottom: 1rem;
     }
+    #drop-zone.drag-over { border-color: var(--accent); background: rgba(124,106,247,.06); }
     #drop-zone input[type="file"] { display: none; }
 
-    /* ---- options row ---- */
+    /* ---- global options ---- */
     .options-row {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      flex-wrap: wrap;
-      margin-bottom: 1.2rem;
-      font-size: 0.85rem;
-      color: var(--muted);
+      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
+      margin-bottom: 1.2rem; font-size: .85rem; color: var(--muted);
     }
-    .options-row label { display: flex; align-items: center; gap: 0.4rem; }
-    .options-row input[type="number"],
-    .options-row input[type="range"] {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      color: var(--text);
-      padding: 0.3rem 0.5rem;
-      width: 70px;
-      font-size: 0.85rem;
+    .options-row label { display: flex; align-items: center; gap: .4rem; }
+    .options-row input[type="number"] {
+      background: var(--bg); border: 1px solid var(--border);
+      border-radius: 6px; color: var(--text); padding: .3rem .5rem;
+      width: 70px; font-size: .85rem;
     }
     .options-row input[type="range"] {
-      width: 110px;
-      padding: 0;
-      cursor: pointer;
-      accent-color: var(--accent);
-    }
-    #threshold-val { color: var(--text); min-width: 2.5ch; }
-
-    /* ---- mode toggle ---- */
-    .mode-toggle {
-      display: flex;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      overflow: hidden;
-    }
-    .mode-toggle button {
-      background: none;
-      border: none;
-      color: var(--muted);
-      cursor: pointer;
-      font-size: 0.8rem;
-      padding: 0.3rem 0.7rem;
-      transition: background 0.15s, color 0.15s;
+      width: 120px; accent-color: var(--accent); cursor: pointer;
     }
-    .mode-toggle button.active {
-      background: var(--accent);
-      color: #fff;
-    }
-
-    /* ---- preview + results ---- */
-    #results-area { display: none; }
+    #global-thresh-val { color: var(--text); min-width: 3.5ch; font-size: .85rem; }
 
-    .result-block {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 1.2rem;
-      margin-top: 1rem;
+    /* ---- spinner / error ---- */
+    .spinner {
+      display: none; width: 22px; height: 22px;
+      border: 3px solid var(--border); border-top-color: var(--accent);
+      border-radius: 50%; animation: spin .7s linear infinite; margin: 1rem auto;
     }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .error-msg { color: #f87171; font-size: .85rem; margin-top: .5rem; display: none; }
+
+    /* ---- results ---- */
+    #results-area { display: none; margin-top: 1rem; }
 
+    /* preview — full width on top */
     .preview-wrap {
-      width: 200px;
-      flex-shrink: 0;
+      display: flex; align-items: flex-start; gap: 1rem;
+      margin-bottom: 1.2rem;
     }
     .preview-wrap img {
-      border-radius: var(--radius);
-      max-width: 200px;
-      max-height: 200px;
-      object-fit: contain;
-      border: 1px solid var(--border);
-      display: block;
+      border-radius: var(--radius); max-height: 420px;
+      width: 100%; object-fit: contain;
+      border: 1px solid var(--border); display: block;
     }
-    .preview-wrap .img-meta {
-      color: var(--muted);
-      font-size: 0.72rem;
-      margin-top: 0.4rem;
-      word-break: break-all;
-    }
-
-    .tags-wrap { min-width: 0; }
+    .img-meta { color: var(--muted); font-size: .72rem; margin-top: .4rem; word-break: break-all; }
 
-    .tag-copy-row {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-bottom: 0.7rem;
-    }
+    /* global copy bar */
+    .copy-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
     .tag-string {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      color: var(--muted);
-      font-size: 0.78rem;
-      flex: 1;
-      padding: 0.4rem 0.6rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      cursor: pointer;
-      transition: border-color 0.15s;
+      background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
+      color: var(--muted); font-size: .78rem; flex: 1; padding: .4rem .6rem;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      cursor: pointer; transition: border-color .15s;
     }
     .tag-string:hover { border-color: var(--accent); color: var(--text); }
     .copy-btn {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      color: var(--muted);
-      cursor: pointer;
-      font-size: 0.78rem;
-      padding: 0.35rem 0.6rem;
-      transition: border-color 0.15s, color 0.15s;
-      white-space: nowrap;
+      background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
+      color: var(--muted); cursor: pointer; font-size: .78rem;
+      padding: .35rem .6rem; transition: border-color .15s, color .15s; white-space: nowrap;
     }
-    .copy-btn:hover { border-color: var(--accent); color: var(--accent2); }
+    .copy-btn:hover { border-color: var(--accent); color: #a78bfa; }
     .copy-btn.copied { color: var(--green); border-color: var(--green); }
 
-    .tag-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.4rem;
-    }
+    /* ---- category sections ---- */
+    .categories { display: flex; flex-direction: column; gap: .8rem; }
+    .cat-section { border-radius: 8px; overflow: hidden; }
 
-    .tag-pill {
-      align-items: center;
-      border-radius: 20px;
-      display: inline-flex;
-      font-size: 0.78rem;
-      gap: 0.35rem;
-      padding: 0.25rem 0.65rem;
-      cursor: default;
-      transition: opacity 0.1s;
+    .cat-header {
+      display: flex; align-items: center; gap: .5rem;
+      padding: .45rem .7rem; cursor: pointer; user-select: none;
+      font-size: .8rem; font-weight: 600; letter-spacing: .03em;
     }
-    .tag-pill:hover { opacity: 0.8; }
-    .tag-pill .score {
-      font-size: 0.68rem;
-      opacity: 0.75;
+    .cat-header:hover { filter: brightness(1.1); }
+    .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .cat-name { flex: 1; }
+    .cat-chevron { transition: transform .2s; font-size: .7rem; margin-left: .2rem; }
+    .cat-section.collapsed .cat-chevron { transform: rotate(-90deg); }
+
+    /* per-category filter controls inside the header */
+    .cat-controls {
+      display: flex; align-items: center; gap: .4rem;
+      font-size: .75rem; font-weight: 400;
     }
-
-    /* ---- spinner ---- */
-    .spinner {
-      display: none;
-      width: 22px; height: 22px;
-      border: 3px solid var(--border);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.7s linear infinite;
-      margin: 1rem auto;
+    .cat-controls .mode-mini {
+      display: flex; border-radius: 6px; overflow: hidden;
+      border: 1px solid rgba(255,255,255,.15);
+    }
+    .cat-controls .mode-mini button {
+      background: none; border: none; cursor: pointer;
+      font-size: .7rem; padding: .15rem .45rem; color: rgba(255,255,255,.45);
+      transition: background .12s, color .12s;
+    }
+    .cat-controls .mode-mini button.active {
+      background: rgba(255,255,255,.18); color: #fff;
+    }
+    .cat-controls input[type="number"] {
+      width: 52px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.15);
+      border-radius: 5px; color: #fff; font-size: .72rem; padding: .15rem .35rem;
+      text-align: center;
+    }
+    .cat-controls input[type="range"] {
+      width: 70px; accent-color: currentColor; cursor: pointer;
+    }
+    .cat-thresh-val { min-width: 2.8ch; }
+    .cat-thresh-num {
+      width: 44px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.15);
+      border-radius: 5px; color: #fff; font-size: .72rem; padding: .15rem .3rem;
+      text-align: center;
+    }
+    .cat-count {
+      background: rgba(0,0,0,.25); border-radius: 10px;
+      padding: .1rem .45rem; font-size: .72rem; white-space: nowrap;
     }
-    @keyframes spin { to { transform: rotate(360deg); } }
 
-    .error-msg {
-      color: #f87171;
-      font-size: 0.85rem;
-      margin-top: 0.5rem;
-      display: none;
+    .cat-body { padding: .5rem .7rem .7rem; }
+    .cat-section.collapsed .cat-body { display: none; }
+
+    /* per-category copy bar */
+    .cat-copy-bar { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
+    .cat-tag-string {
+      background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.08);
+      border-radius: 5px; color: rgba(255,255,255,.5); font-size: .72rem;
+      flex: 1; padding: .3rem .5rem; white-space: nowrap; overflow: hidden;
+      text-overflow: ellipsis; cursor: pointer;
+    }
+    .cat-tag-string:hover { color: rgba(255,255,255,.85); }
+    .cat-copy-btn {
+      background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.1);
+      border-radius: 5px; color: rgba(255,255,255,.4); cursor: pointer;
+      font-size: .72rem; padding: .25rem .5rem; white-space: nowrap;
+      transition: color .15s, border-color .15s;
     }
+    .cat-copy-btn:hover { color: rgba(255,255,255,.8); }
+    .cat-copy-btn.copied { color: var(--green); border-color: var(--green); }
 
-    @media (max-width: 520px) {
-      .result-block { grid-template-columns: 1fr; }
-      .preview-wrap { width: 100%; }
-      .preview-wrap img { max-width: 100%; }
+    /* tag pills */
+    .tag-list { display: flex; flex-wrap: wrap; gap: .35rem; }
+    .tag-pill {
+      display: inline-flex; align-items: center; gap: .3rem;
+      border-radius: 20px; font-size: .76rem; padding: .22rem .6rem;
+      cursor: default; transition: opacity .1s;
     }
+    .tag-pill:hover { opacity: .8; }
+    .tag-pill .score { font-size: .66rem; opacity: .7; }
+    .tag-pill.hidden { display: none; }
   </style>
 </head>
 <body>
@@ -279,74 +211,91 @@
 
 <div class="card">
 
-  <!-- URL input -->
   <div class="input-row">
     <input type="text" id="url-input" placeholder="Paste image URL or drop a file below…" />
     <button class="btn" id="tag-btn" onclick="runFromUrl()">Tag</button>
   </div>
 
-  <!-- Drop zone -->
   <div id="drop-zone" onclick="document.getElementById('file-input').click()">
     <input type="file" id="file-input" accept="image/*" onchange="runFromFile(this)" />
     Drop image here or <strong>click to browse</strong>
   </div>
 
-  <!-- Options -->
   <div class="options-row">
-    <div class="mode-toggle">
-      <button id="mode-topk" class="active" onclick="setMode('topk')">Top-K</button>
-      <button id="mode-thresh" onclick="setMode('threshold')">Threshold</button>
-    </div>
-
-    <label id="topk-label">
-      K =
-      <input type="number" id="topk-input" value="40" min="1" max="500" />
-    </label>
-
-    <label id="thresh-label" style="display:none">
-      ≥
-      <input type="range" id="thresh-input" min="0.01" max="0.99" step="0.01" value="0.35"
-             oninput="document.getElementById('threshold-val').textContent=parseFloat(this.value).toFixed(2)" />
-      <span id="threshold-val">0.35</span>
-    </label>
-
+    <label>Max px <input type="number" id="maxsize-input" value="1024" min="64" max="4096" step="16" /></label>
     <label>
-      Max px
-      <input type="number" id="maxsize-input" value="1024" min="64" max="4096" step="16" />
+      Min score
+      <input type="range" id="global-thresh" min="0" max="99" step="1" value="0"
+             oninput="setGlobalThreshold(this.value)" />
+      <input type="number" id="global-thresh-num" min="0" max="99" step="1" value="0"
+             style="width:52px"
+             oninput="setGlobalThreshold(this.value)" />
+      <span id="global-thresh-val" style="display:none">0%</span>
     </label>
   </div>
 
   <div class="spinner" id="spinner"></div>
   <div class="error-msg" id="error-msg"></div>
 
-  <!-- Results -->
   <div id="results-area">
-    <div class="result-block">
-      <div class="preview-wrap">
+
+    <!-- image full-width on top -->
+    <div class="preview-wrap">
+      <div style="width:100%">
         <img id="preview-img" src="" alt="preview" />
         <div class="img-meta" id="img-meta"></div>
       </div>
-      <div class="tags-wrap">
-        <div class="tag-copy-row">
-          <div class="tag-string" id="tag-string" onclick="copyTags()" title="Click to copy"></div>
-          <button class="copy-btn" id="copy-btn" onclick="copyTags()">Copy</button>
-        </div>
-        <div class="tag-list" id="tag-list"></div>
-      </div>
     </div>
+
+    <!-- global copy bar -->
+    <div class="copy-bar">
+      <div class="tag-string" id="tag-string" onclick="copyAll()" title="Click to copy all visible tags"></div>
+      <button class="copy-btn" id="copy-btn-all" onclick="copyAll()">Copy all</button>
+    </div>
+
+    <!-- category sections -->
+    <div class="categories" id="categories"></div>
+
   </div>
 
 </div>
 
 <script>
-  let currentMode = 'topk';
-
-  function setMode(m) {
-    currentMode = m;
-    document.getElementById('mode-topk').classList.toggle('active', m === 'topk');
-    document.getElementById('mode-thresh').classList.toggle('active', m === 'threshold');
-    document.getElementById('topk-label').style.display   = m === 'topk'      ? '' : 'none';
-    document.getElementById('thresh-label').style.display = m === 'threshold' ? '' : 'none';
+  // ---- category metadata from server ----
+  const CAT_META = {
+    {% for cat_id, meta in category_meta.items() %}
+    {{ cat_id }}: { name: "{{ meta.name }}", color: "{{ meta.color }}" },
+    {% endfor %}
+  };
+
+  // Per-category filter state: { [catId]: { mode: 'topk'|'threshold', topk: int, threshold: float } }
+  const catState = {};
+  let globalFloor = 0.0;  // global minimum score (0–1), applied on top of per-category filters
+
+  function getCatState(catId) {
+    if (!catState[catId]) catState[catId] = { mode: 'threshold', topk: 20, threshold: 0.85 };
+    return catState[catId];
+  }
+
+  function setGlobalThreshold(pct) {
+    const v = Math.max(0, Math.min(99, parseInt(pct) || 0));
+    globalFloor = v / 100;
+    document.getElementById('global-thresh').value = v;
+    document.getElementById('global-thresh-num').value = v;
+    // re-apply filter to every rendered category
+    document.querySelectorAll('.cat-section').forEach(sec => {
+      applyFilter(parseInt(sec.dataset.catId));
+    });
+    updateGlobalCopyBar();
+  }
+
+  function syncCatThreshNum(catId, pct) {
+    const el = document.getElementById(`thnum-${catId}`);
+    if (el) el.value = pct;
+  }
+  function syncCatThreshRange(catId, pct) {
+    const el = document.getElementById(`range-${catId}`);
+    if (el) el.value = Math.max(1, Math.min(99, parseInt(pct) || 1));
   }
 
   // ---- drag & drop ----
@@ -354,52 +303,29 @@
   dz.addEventListener('dragover',  e => { e.preventDefault(); dz.classList.add('drag-over'); });
   dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
   dz.addEventListener('drop', e => {
-    e.preventDefault();
-    dz.classList.remove('drag-over');
+    e.preventDefault(); dz.classList.remove('drag-over');
     const file = e.dataTransfer.files[0];
     if (file) submitFile(file);
   });
 
-  function runFromFile(input) {
-    if (input.files[0]) submitFile(input.files[0]);
-  }
+  function runFromFile(input) { if (input.files[0]) submitFile(input.files[0]); }
 
   function runFromUrl() {
     const url = document.getElementById('url-input').value.trim();
     if (!url) return;
-    const params = buildParams();
-    params.append('url', url);
-    submit('/tag/url', params, url);
-  }
-
-  function buildParams() {
-    const p = new URLSearchParams();
-    p.append('max_size', document.getElementById('maxsize-input').value);
-    if (currentMode === 'topk') {
-      p.append('topk', document.getElementById('topk-input').value);
-    } else {
-      p.append('threshold', document.getElementById('thresh-input').value);
-    }
-    return p;
+    setPreview(url, url);
+    submitFetch(`/tag/url?max_size=${document.getElementById('maxsize-input').value}&url=${encodeURIComponent(url)}`,
+                { method: 'POST' });
   }
 
   function submitFile(file) {
-    const params = buildParams();
+    const maxSize = document.getElementById('maxsize-input').value;
     const fd = new FormData();
     fd.append('file', file);
-    for (const [k, v] of params) fd.append(k, v);
-
-    // local preview
     const reader = new FileReader();
     reader.onload = e => setPreview(e.target.result, file.name);
     reader.readAsDataURL(file);
-
-    submitFetch('/tag/upload', { method: 'POST', body: fd });
-  }
-
-  function submit(endpoint, params, previewUrl) {
-    setPreview(previewUrl, previewUrl);
-    submitFetch(`${endpoint}?${params}`, { method: 'POST' });
+    submitFetch(`/tag/upload?max_size=${maxSize}`, { method: 'POST', body: fd });
   }
 
   function submitFetch(url, opts) {
@@ -413,40 +339,197 @@
 
   function setPreview(src, label) {
     document.getElementById('preview-img').src = src;
-    document.getElementById('img-meta').textContent = label.length > 60
-      ? '…' + label.slice(-57) : label;
+    document.getElementById('img-meta').textContent =
+      label.length > 80 ? '…' + label.slice(-77) : label;
   }
 
+  // ---- rendering ----
+
+  // All tags from the last response, grouped by category
+  let _lastData = null;
+
   function renderResults(data) {
     hideError();
-    const list = document.getElementById('tag-list');
-    list.innerHTML = '';
-
-    const tagString = data.tags.map(t => t.tag).join(', ');
-    document.getElementById('tag-string').textContent = tagString;
-
-    data.tags.forEach(({ tag, score }) => {
-      const hue = Math.round(260 - score * 80);   // purple → teal gradient
-      const pill = document.createElement('span');
-      pill.className = 'tag-pill';
-      pill.style.background = `hsla(${hue},60%,55%,0.18)`;
-      pill.style.border = `1px solid hsla(${hue},60%,55%,0.35)`;
-      pill.style.color = `hsl(${hue},70%,78%)`;
-      pill.innerHTML = `${tag}<span class="score">${(score * 100).toFixed(0)}%</span>`;
-      pill.title = `${tag}: ${score.toFixed(4)}`;
-      list.appendChild(pill);
-    });
+    _lastData = data;
+
+    const container = document.getElementById('categories');
+    container.innerHTML = '';
+
+    for (const cat of data.categories) {
+      const meta  = CAT_META[cat.id] || { name: String(cat.id), color: '#6b7280' };
+      const color = meta.color;
+      const state = getCatState(cat.id);
+
+      const sec = document.createElement('div');
+      sec.className = 'cat-section';
+      sec.dataset.catId = cat.id;
+
+      // ---- header with inline controls ----
+      const hdr = document.createElement('div');
+      hdr.className = 'cat-header';
+      hdr.style.background = color + '22';
+      hdr.style.color = color;
+
+      hdr.innerHTML = `
+        <span class="cat-dot" style="background:${color}"></span>
+        <span class="cat-name">${meta.name}</span>
+
+        <span class="cat-controls" onclick="event.stopPropagation()">
+          <span class="mode-mini">
+            <button id="btn-topk-${cat.id}"
+                    class="${state.mode==='topk'?'active':''}"
+                    onclick="setCatMode(${cat.id},'topk')">top-k</button>
+            <button id="btn-thresh-${cat.id}"
+                    class="${state.mode==='threshold'?'active':''}"
+                    onclick="setCatMode(${cat.id},'threshold')">≥</button>
+          </span>
+
+          <span id="ctrl-topk-${cat.id}" style="display:${state.mode==='topk'?'flex':'none'};align-items:center;gap:.3rem">
+            <input type="number" id="topk-${cat.id}" value="${state.topk}" min="1" max="500"
+                   style="width:52px"
+                   oninput="setCatTopk(${cat.id},this.value)" />
+          </span>
+
+          <span id="ctrl-thresh-${cat.id}" style="display:${state.mode==='threshold'?'flex':'none'};align-items:center;gap:.3rem">
+            <input type="range" id="range-${cat.id}" min="1" max="99" step="1"
+                   value="${Math.round(state.threshold*100)}"
+                   oninput="setCatThreshold(${cat.id},this.value/100);syncCatThreshNum(${cat.id},this.value)" />
+            <input type="number" class="cat-thresh-num" id="thnum-${cat.id}"
+                   min="1" max="99" step="1" value="${Math.round(state.threshold*100)}"
+                   oninput="setCatThreshold(${cat.id},this.value/100);syncCatThreshRange(${cat.id},this.value)" />
+            <span class="cat-thresh-val" style="display:none" id="thval-${cat.id}">${state.threshold.toFixed(2)}</span>
+          </span>
+        </span>
+
+        <span class="cat-count" id="count-${cat.id}">0</span>
+        <span class="cat-chevron">▾</span>
+      `;
+      hdr.addEventListener('click', () => sec.classList.toggle('collapsed'));
+
+      // ---- body ----
+      const body = document.createElement('div');
+      body.className = 'cat-body';
+      body.style.background = color + '0d';
+      body.innerHTML = `
+        <div class="cat-copy-bar">
+          <div class="cat-tag-string" id="cat-copy-${cat.id}"
+               onclick="copyCat(${cat.id})" title="Click to copy"></div>
+          <button class="cat-copy-btn" id="cat-btn-${cat.id}"
+                  onclick="copyCat(${cat.id})">Copy</button>
+        </div>
+        <div class="tag-list" id="cat-tags-${cat.id}"></div>
+      `;
+
+      // build all pills (hidden ones will be toggled by applyFilter)
+      const pillContainer = body.querySelector(`#cat-tags-${cat.id}`);
+      for (const t of cat.tags) {
+        const pill = document.createElement('span');
+        pill.className = 'tag-pill';
+        pill.style.background = color + '1a';
+        pill.style.border = `1px solid ${color}44`;
+        pill.style.color  = color;
+        pill.dataset.score = t.score;
+        pill.dataset.tag   = t.tag;
+        pill.title = `${t.tag}: ${t.score}`;
+        pill.innerHTML = `${t.tag}<span class="score">${(t.score*100).toFixed(0)}%</span>`;
+        pillContainer.appendChild(pill);
+      }
+
+      sec.appendChild(hdr);
+      sec.appendChild(body);
+      container.appendChild(sec);
+
+      applyFilter(cat.id);
+    }
 
     document.getElementById('results-area').style.display = 'block';
-    document.getElementById('copy-btn').classList.remove('copied');
+    updateGlobalCopyBar();
+  }
+
+  // Apply topk or threshold filter to a category's pills
+  function applyFilter(catId) {
+    const state = getCatState(catId);
+    const pills = document.querySelectorAll(`#cat-tags-${catId} .tag-pill`);
+    if (!pills.length) return;
+
+    let visible = 0;
+    pills.forEach((pill, idx) => {
+      const score = parseFloat(pill.dataset.score);
+      let show;
+      if (state.mode === 'topk') {
+        show = idx < state.topk;
+      } else {
+        show = score >= state.threshold;
+      }
+      // global floor is always applied on top
+      if (score < globalFloor) show = false;
+      pill.classList.toggle('hidden', !show);
+      if (show) visible++;
+    });
+
+    // update count badge
+    const countEl = document.getElementById(`count-${catId}`);
+    if (countEl) countEl.textContent = visible;
+
+    // update copy bar text
+    const visibleTags = [...pills]
+      .filter(p => !p.classList.contains('hidden'))
+      .map(p => p.dataset.tag);
+    const copyEl = document.getElementById(`cat-copy-${catId}`);
+    if (copyEl) copyEl.textContent = visibleTags.join(', ');
+  }
+
+  function setCatMode(catId, mode) {
+    const state = getCatState(catId);
+    state.mode = mode;
+    document.getElementById(`btn-topk-${catId}`).classList.toggle('active', mode === 'topk');
+    document.getElementById(`btn-thresh-${catId}`).classList.toggle('active', mode === 'threshold');
+    document.getElementById(`ctrl-topk-${catId}`).style.display   = mode === 'topk'      ? 'flex' : 'none';
+    document.getElementById(`ctrl-thresh-${catId}`).style.display = mode === 'threshold' ? 'flex' : 'none';
+    applyFilter(catId);
+    updateGlobalCopyBar();
+  }
+
+  function setCatTopk(catId, val) {
+    getCatState(catId).topk = Math.max(1, parseInt(val) || 1);
+    applyFilter(catId);
+    updateGlobalCopyBar();
   }
 
-  function copyTags() {
+  function setCatThreshold(catId, val) {
+    const v = parseFloat(val);
+    getCatState(catId).threshold = v;
+    const el = document.getElementById(`thval-${catId}`);
+    if (el) el.textContent = v.toFixed(2);
+    applyFilter(catId);
+    updateGlobalCopyBar();
+  }
+
+  function updateGlobalCopyBar() {
+    // collect all visible tags across all categories, in category order
+    const allVisible = [];
+    document.querySelectorAll('.cat-section').forEach(sec => {
+      sec.querySelectorAll('.tag-pill:not(.hidden)').forEach(p => {
+        allVisible.push(p.dataset.tag);
+      });
+    });
+    document.getElementById('tag-string').textContent = allVisible.join(', ');
+  }
+
+  function copyAll() {
     const text = document.getElementById('tag-string').textContent;
     navigator.clipboard.writeText(text).then(() => {
-      const btn = document.getElementById('copy-btn');
-      btn.textContent = 'Copied!';
-      btn.classList.add('copied');
+      const btn = document.getElementById('copy-btn-all');
+      btn.textContent = 'Copied!'; btn.classList.add('copied');
+      setTimeout(() => { btn.textContent = 'Copy all'; btn.classList.remove('copied'); }, 1800);
+    });
+  }
+
+  function copyCat(catId) {
+    const text = document.getElementById(`cat-copy-${catId}`).textContent;
+    navigator.clipboard.writeText(text).then(() => {
+      const btn = document.getElementById(`cat-btn-${catId}`);
+      btn.textContent = 'Copied!'; btn.classList.add('copied');
       setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 1800);
     });
   }
@@ -459,14 +542,10 @@
 
   function showError(msg) {
     const el = document.getElementById('error-msg');
-    el.textContent = msg;
-    el.style.display = 'block';
-  }
-  function hideError() {
-    document.getElementById('error-msg').style.display = 'none';
+    el.textContent = msg; el.style.display = 'block';
   }
+  function hideError() { document.getElementById('error-msg').style.display = 'none'; }
 
-  // allow pressing Enter in URL box
   document.getElementById('url-input').addEventListener('keydown', e => {
     if (e.key === 'Enter') runFromUrl();
   });