Spaces:

unit27research
/

one-good-commit

Running

App Files Files Community

unit27research commited on 26 days ago

Commit

9cb86c0

verified ·

1 Parent(s): e8f656d

Add live public model picker

Browse files

Files changed (2) hide show

index.html +12 -9
static-app.js +67 -2

index.html CHANGED Viewed

@@ -6,6 +6,13 @@
     <meta name="description" content="An evidence-backed, human-reviewed contribution assistant for public Hugging Face model cards.">
     <title>One Good Commit</title>
     <link rel="stylesheet" href="static-styles.css">
   </head>
   <body>
     <main class="shell">
@@ -21,19 +28,15 @@
       <section class="input-card" aria-label="Review a public model card">
         <form id="review-form">
-          <label for="repo-id">Public model ID</label>
           <div class="input-row">
-            <input id="repo-id" name="repo-id" autocomplete="off" placeholder="owner/model-name" required>
             <button type="submit">Review card</button>
           </div>
         </form>
-        <p class="example-label">Try an established public card</p>
-        <div class="examples" aria-label="Example model cards">
-          <button type="button" data-example="sentence-transformers/all-MiniLM-L6-v2">sentence-transformers/all-MiniLM-L6-v2</button>
-          <button type="button" data-example="google-bert/bert-base-uncased">google-bert/bert-base-uncased</button>
-          <button type="button" data-example="openai-community/gpt2">openai-community/gpt2</button>
-        </div>
-        <p class="input-note">Public repositories only. This app reads the selected README and Hub metadata; it does not run or evaluate the model.</p>
       </section>
       <section id="notice" class="notice" hidden aria-live="polite"></section>

     <meta name="description" content="An evidence-backed, human-reviewed contribution assistant for public Hugging Face model cards.">
     <title>One Good Commit</title>
     <link rel="stylesheet" href="static-styles.css">
+    <style>
+      .model-options{background:#fff;border:1px solid #dfe4da;border-radius:10px;box-shadow:0 10px 26px rgba(35,50,39,.08);margin-top:10px;max-height:360px;overflow:auto}
+      .model-option{align-items:center;background:#fff;border:0;border-bottom:1px solid #edf0e9;color:#172419;display:grid;gap:4px;grid-template-columns:1fr auto;padding:12px 14px;text-align:left;width:100%}
+      .model-option:last-child{border-bottom:0}.model-option:hover,.model-option:focus-visible{background:#f4f7f0;outline:2px solid #2d6a4f;outline-offset:-2px}
+      .model-option strong{display:block;font-size:.93rem;overflow-wrap:anywhere}.model-option span{color:#647067;font-size:.78rem}.model-option .task{background:#f1f0e8;border-radius:999px;color:#536057;font-size:.7rem;padding:4px 7px;white-space:nowrap}
+      @media(max-width:720px){.model-option{grid-template-columns:1fr}.model-option .task{justify-self:start}}
+    </style>
   </head>
   <body>
     <main class="shell">
       <section class="input-card" aria-label="Review a public model card">
         <form id="review-form">
+          <label for="repo-id">Find a public model</label>
           <div class="input-row">
+            <input id="repo-id" name="repo-id" autocomplete="off" placeholder="Search a model, organization, or task" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="model-options" required>
             <button type="submit">Review card</button>
           </div>
         </form>
+        <div id="model-options" class="model-options" role="listbox" aria-label="Live public model matches" hidden></div>
+        <p id="picker-status" class="example-label">Loading live public models…</p>
+        <p class="input-note">Start with a name, organization, or task. Select a live public model; exact repository IDs also work if you already have one.</p>
       </section>
       <section id="notice" class="notice" hidden aria-live="polite"></section>

static-app.js CHANGED Viewed

@@ -26,15 +26,73 @@
   const worksheetPanel = document.querySelector("#worksheet-panel");
   const discussionPanel = document.querySelector("#discussion-panel");
   const downloadButton = document.querySelector("#download-review");
   let latestReview = null;
   function cleanRepoId(value) {
     let id = value.trim();
     if (id.startsWith("https://huggingface.co/")) id = id.slice("https://huggingface.co/".length).split("/").slice(0, 2).join("/");
-    if (!REPO_ID.test(id)) throw new Error("Enter a public model ID in the form owner/model-name.");
     return id;
   }
   function meaningful(value) {
     if (value === null || value === undefined || value === false) return false;
     if (typeof value === "string") return Boolean(value.trim());
@@ -199,7 +257,14 @@
   }
   form.addEventListener("submit", (event) => { event.preventDefault(); review(input.value); });
-  document.querySelectorAll("[data-example]").forEach((button) => button.addEventListener("click", () => { input.value = button.dataset.example; input.focus(); }));
   document.querySelectorAll("[role=tab]").forEach((tab) => tab.addEventListener("click", () => { document.querySelectorAll("[role=tab]").forEach((item) => item.setAttribute("aria-selected", String(item === tab))); document.querySelectorAll("[role=tabpanel]").forEach((panel) => { panel.hidden = panel.id !== tab.dataset.tab; }); }));
   downloadButton.addEventListener("click", () => { if (!latestReview?.download) return; const blob = new Blob([latestReview.download], { type: "text/markdown;charset=utf-8" }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = `${latestReview.repo.replace("/", "--")}-review.md`; link.click(); URL.revokeObjectURL(link.href); });
 })();

   const worksheetPanel = document.querySelector("#worksheet-panel");
   const discussionPanel = document.querySelector("#discussion-panel");
   const downloadButton = document.querySelector("#download-review");
+  const modelOptions = document.querySelector("#model-options");
+  const pickerStatus = document.querySelector("#picker-status");
   let latestReview = null;
+  let searchTimer = null;
+  let searchNonce = 0;
   function cleanRepoId(value) {
     let id = value.trim();
     if (id.startsWith("https://huggingface.co/")) id = id.slice("https://huggingface.co/".length).split("/").slice(0, 2).join("/");
+    if (!REPO_ID.test(id)) throw new Error("Select a model from the live results, or enter its exact owner/model-name ID.");
     return id;
   }
+  function numberLabel(value) {
+    const number = Number(value || 0);
+    if (number >= 1_000_000) return `${(number / 1_000_000).toFixed(number >= 10_000_000 ? 0 : 1)}M`;
+    if (number >= 1_000) return `${(number / 1_000).toFixed(number >= 10_000 ? 0 : 1)}K`;
+    return String(number);
+  }
+  function hideModelOptions() {
+    modelOptions.hidden = true;
+    input.setAttribute("aria-expanded", "false");
+  }
+  function showModelOptions(models, label) {
+    modelOptions.replaceChildren();
+    pickerStatus.textContent = label;
+    if (!models.length) { hideModelOptions(); return; }
+    models.forEach((model) => {
+      const id = model.id || model.modelId;
+      if (!id) return;
+      const option = make("button", "model-option");
+      option.type = "button";
+      option.setAttribute("role", "option");
+      option.setAttribute("aria-label", `Select ${id}`);
+      const detail = model.pipeline_tag ? `${model.pipeline_tag} · ${numberLabel(model.downloads)} downloads` : `${numberLabel(model.downloads)} downloads`;
+      const copy = make("span");
+      copy.append(make("strong", "", id), make("span", "", detail));
+      option.append(copy);
+      if (model.pipeline_tag) option.append(make("span", "task", model.pipeline_tag));
+      option.addEventListener("click", () => { input.value = id; modelOptions.replaceChildren(); hideModelOptions(); pickerStatus.textContent = `Selected: ${id}`; input.focus(); });
+      modelOptions.append(option);
+    });
+    if (!modelOptions.childElementCount) { hideModelOptions(); return; }
+    modelOptions.hidden = false;
+    input.setAttribute("aria-expanded", "true");
+  }
+  async function searchModels(query = "") {
+    const nonce = ++searchNonce;
+    pickerStatus.textContent = query ? "Searching public models…" : "Loading live public models…";
+    const params = new URLSearchParams({ limit: "8", sort: "downloads", direction: "-1" });
+    if (query) params.set("search", query);
+    try {
+      const response = await fetch(`https://huggingface.co/api/models?${params}`);
+      if (!response.ok) throw new Error("unavailable");
+      const models = (await response.json()).filter((model) => !model.private && !model.gated && !model.disabled);
+      if (nonce !== searchNonce) return;
+      showModelOptions(models, query ? "Live public matches" : "Popular public models — start typing to narrow the list");
+    } catch (_) {
+      if (nonce !== searchNonce) return;
+      pickerStatus.textContent = "Live model picker is unavailable right now. You can still enter an exact public model ID.";
+      hideModelOptions();
+    }
+  }
   function meaningful(value) {
     if (value === null || value === undefined || value === false) return false;
     if (typeof value === "string") return Boolean(value.trim());
   }
   form.addEventListener("submit", (event) => { event.preventDefault(); review(input.value); });
+  input.addEventListener("input", () => {
+    window.clearTimeout(searchTimer);
+    const query = input.value.trim();
+    searchTimer = window.setTimeout(() => searchModels(query), 250);
+  });
+  input.addEventListener("focus", () => { if (modelOptions.childElementCount) { modelOptions.hidden = false; input.setAttribute("aria-expanded", "true"); } });
+  document.addEventListener("click", (event) => { if (!event.target.closest("#review-form") && !event.target.closest("#model-options")) hideModelOptions(); });
   document.querySelectorAll("[role=tab]").forEach((tab) => tab.addEventListener("click", () => { document.querySelectorAll("[role=tab]").forEach((item) => item.setAttribute("aria-selected", String(item === tab))); document.querySelectorAll("[role=tabpanel]").forEach((panel) => { panel.hidden = panel.id !== tab.dataset.tab; }); }));
   downloadButton.addEventListener("click", () => { if (!latestReview?.download) return; const blob = new Blob([latestReview.download], { type: "text/markdown;charset=utf-8" }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = `${latestReview.repo.replace("/", "--")}-review.md`; link.click(); URL.revokeObjectURL(link.href); });
+  searchModels();
 })();