v0.7.4: HF Hub search-as-you-type autocomplete on all model id inputs

NEW js/hf_autocomplete.js — wraps any text input with a dropdown that hits the public huggingface.co/api/models endpoint as the user types. Debounced (300 ms), keyboard-navigable (↑/↓/Enter/Esc), positioned via fixed coords on body so it never gets clipped.

Wired to all 5 HF id inputs at startup via attachAllHfAutocompletes():
- #hf-id (Recipe mode)
- #profile-hf-id (Profile mode)
- #unmask-id (🪟 Unmask)
- #template-id (📜 Chat-template)
- #quant-id (⚖️ Quant)

Each search result row shows: model id (mono) + downloads + likes + library_name. Filtered to text-generation pipeline by default. Sorted by downloads descending so popular official releases surface first.

LIVE API VERIFIED — top-5 results for common queries:
llama-3 → meta-llama/Llama-3.1-8B-Instruct (9.7M ⬇)
mistral → mistralai/Mistral-7B-Instruct-v0.2 (2.6M ⬇)
qwen → Qwen/Qwen3-0.6B (19M ⬇)
phi-3 → microsoft/Phi-3-mini-4k-instruct (761K ⬇)

Network failures degrade gracefully (silent — user can still type full id manually). Idempotent attach (safe to call twice on same input).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

js/hf_autocomplete.js

@@ -0,0 +1,166 @@
+// HF Hub autocomplete — wraps any text input with a search-as-you-type
+// dropdown that hits https://huggingface.co/api/models. Browser-only, no auth.
+//
+// Usage:
+//   import { attachHfAutocomplete } from "./hf_autocomplete.js";
+//   attachHfAutocomplete(document.getElementById("my-id-input"), {
+//     pipeline: "text-generation",   // filter (or null for all)
+//     onSelect: (id) => { ... },
+//   });
+//
+// Idempotent: calling twice on same input is a no-op.
+
+const ATTACHED = new WeakSet();
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, c =>
+    ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
+}
+
+function formatDownloads(n) {
+  if (n === null || n === undefined) return "?";
+  if (n >= 1e9) return (n / 1e9).toFixed(1) + "B";
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + "K";
+  return String(n);
+}
+
+export function attachHfAutocomplete(inputEl, options = {}) {
+  if (!inputEl || ATTACHED.has(inputEl)) return;
+  ATTACHED.add(inputEl);
+
+  const {
+    pipeline = "text-generation",
+    limit = 15,
+    debounceMs = 300,
+    minChars = 2,
+    onSelect = null,
+  } = options;
+
+  // Floating dropdown attached to body so it never gets clipped by parents.
+  const dropdown = document.createElement("div");
+  dropdown.className = "hf-autocomplete-dropdown";
+  dropdown.style.display = "none";
+  document.body.appendChild(dropdown);
+
+  let timeoutId = null;
+  let activeIndex = -1;
+  let results = [];
+  let lastQuery = "";
+
+  function positionDropdown() {
+    const rect = inputEl.getBoundingClientRect();
+    dropdown.style.position = "fixed";
+    dropdown.style.left = rect.left + "px";
+    dropdown.style.top = (rect.bottom + 2) + "px";
+    dropdown.style.width = Math.max(rect.width, 280) + "px";
+    dropdown.style.zIndex = "10000";
+  }
+
+  function render() {
+    if (!results.length) { dropdown.style.display = "none"; return; }
+    dropdown.innerHTML = results.map((r, i) => `
+      <div class="hf-result ${i === activeIndex ? "active" : ""}" data-id="${escapeHtml(r.id)}">
+        <span class="hf-result-id">${escapeHtml(r.id)}</span>
+        <span class="hf-result-meta">⬇ ${formatDownloads(r.downloads)} · ❤ ${formatDownloads(r.likes)}${r.library_name ? " · " + escapeHtml(r.library_name) : ""}</span>
+      </div>
+    `).join("");
+    positionDropdown();
+    dropdown.style.display = "block";
+  }
+
+  function close() {
+    dropdown.style.display = "none";
+    activeIndex = -1;
+  }
+
+  function pick(id) {
+    inputEl.value = id;
+    close();
+    if (onSelect) onSelect(id);
+    inputEl.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  async function search(q) {
+    if (q.length < minChars) { results = []; render(); return; }
+    if (q === lastQuery) return; // dedupe rapid typing
+    lastQuery = q;
+    const params = new URLSearchParams({
+      search: q,
+      limit: String(limit),
+      sort: "downloads",
+      direction: "-1",
+    });
+    if (pipeline) params.set("filter", pipeline);
+    try {
+      const resp = await fetch(`https://huggingface.co/api/models?${params}`);
+      if (!resp.ok) { results = []; render(); return; }
+      const data = await resp.json();
+      // Filter out odd entries (gated/private won't appear publicly anyway)
+      results = (Array.isArray(data) ? data : [])
+        .filter(r => r.id && typeof r.id === "string")
+        .slice(0, limit);
+      activeIndex = -1;
+      render();
+    } catch (e) {
+      // Network failure → silent; user can still type the id manually.
+      results = []; render();
+    }
+  }
+
+  inputEl.addEventListener("input", (e) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => search(e.target.value.trim()), debounceMs);
+  });
+
+  inputEl.addEventListener("focus", (e) => {
+    const v = e.target.value.trim();
+    if (v.length >= minChars) search(v);
+  });
+
+  // Click on a result picks it. Use mousedown to fire before input loses focus.
+  dropdown.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    const item = e.target.closest(".hf-result");
+    if (item) pick(item.dataset.id);
+  });
+
+  // Keyboard nav
+  inputEl.addEventListener("keydown", (e) => {
+    if (dropdown.style.display === "none" || !results.length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      activeIndex = Math.min(activeIndex + 1, results.length - 1);
+      render();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      activeIndex = Math.max(activeIndex - 1, -1);
+      render();
+    } else if (e.key === "Enter" && activeIndex >= 0) {
+      e.preventDefault();
+      pick(results[activeIndex].id);
+    } else if (e.key === "Escape") {
+      close();
+    }
+  });
+
+  // Click outside or blur → close (small delay so click on dropdown still fires)
+  inputEl.addEventListener("blur", () => setTimeout(close, 150));
+
+  // Reposition on scroll/resize when dropdown is open
+  window.addEventListener("scroll", () => {
+    if (dropdown.style.display === "block") positionDropdown();
+  }, true);
+  window.addEventListener("resize", () => {
+    if (dropdown.style.display === "block") positionDropdown();
+  });
+}
+
+// Convenience: attach to all 5 known HF-id inputs in TAF Agent.
+export function attachAllHfAutocompletes() {
+  const ids = ["hf-id", "profile-hf-id", "unmask-id", "template-id", "quant-id"];
+  for (const id of ids) {
+    const el = document.getElementById(id);
+    if (el) attachHfAutocomplete(el);
+  }
+}

js/main.js

@@ -16,6 +16,11 @@ import { sniffChatTemplate } from "./chat_template_sniffer.js";
 import { parseVotesCSV, computeArenaCI, SAMPLE_VOTES_CSV } from "./arena_ci.js";
 import { rateAllBenchmarks, BENCHMARK_DB } from "./contamination_prior.js";
 import { predictQuantShift, predictAllSchemes, QUANT_SCHEMES } from "./quant_regime.js";
+import { attachAllHfAutocompletes } from "./hf_autocomplete.js";
+
+// Attach HF Hub search-as-you-type to all 5 model id inputs (Profile, Recipe,
+// Unmask, Template, Quant). Hits public huggingface.co/api/models. Idempotent.
+attachAllHfAutocompletes();
 
 const TAF_BROWSER_URL = "python/taf_browser.py";
 const ENABLE_WEBLLM = true;

style.css

@@ -33,6 +33,38 @@
   flex: 1;
 }
 
+/* v0.7.4 — HF Hub autocomplete dropdown (attached to body) */
+.hf-autocomplete-dropdown {
+  background: #12181f;
+  border: 1px solid rgba(88, 166, 255, 0.4);
+  border-radius: 6px;
+  max-height: 320px;
+  overflow-y: auto;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
+  font-size: 0.92em;
+}
+.hf-autocomplete-dropdown .hf-result {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5em 0.7em;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+.hf-autocomplete-dropdown .hf-result:last-child { border-bottom: none; }
+.hf-autocomplete-dropdown .hf-result:hover,
+.hf-autocomplete-dropdown .hf-result.active {
+  background: rgba(88, 166, 255, 0.15);
+}
+.hf-autocomplete-dropdown .hf-result-id {
+  font-family: monospace;
+  color: #c9d1d9;
+}
+.hf-autocomplete-dropdown .hf-result-meta {
+  font-size: 0.8em;
+  opacity: 0.65;
+  margin-top: 0.15em;
+}
+
 /* v0.7.2 — Arena-Elo CI reconstructor */
 .arena-result { margin-top: 0.6em; }
 .arena-table, .arena-ties-table {