Random dataset: secondary button in the input bar

static/index.html

@@ -18,6 +18,7 @@ input:focus{outline:none}
 form:focus-within{border-color:var(--bar);box-shadow:0 0 0 3px var(--bar-soft)}
 button{font:600 15px "Schibsted Grotesk",sans-serif;border:0;border-radius:7px;background:var(--ink);color:#fff;cursor:pointer;padding:0 18px}
 button:focus-visible,a:focus-visible{outline:2px solid var(--bar);outline-offset:3px}
+#go,button.secondary{border:1px solid var(--ink)}button.secondary{background:#fff;color:var(--ink)}
 .examples{margin:10px 0 42px;color:var(--muted);font-size:14px}
 .examples button{font:14px "Schibsted Grotesk",sans-serif;background:none;color:var(--ink);text-decoration:underline;text-decoration-color:#C9CED8;text-underline-offset:3px;margin-right:14px;padding:0;border-radius:0}
 .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
@@ -45,6 +46,7 @@ h2{font-size:14px;font-weight:600;margin:0 0 12px;color:var(--muted)}
 .about{margin-top:52px;max-width:64ch;font-size:15px;color:#3A4150;border-top:1px solid var(--rule);padding-top:20px}.about p{margin:0 0 10px}.todo{color:#B04A2F;font-style:italic}
 .timing{margin-top:18px;color:var(--muted);font-size:13px}
 .status{margin:-28px 0 42px;font-size:15px;max-width:680px}.status:empty{display:none}.status.err{color:#B04A2F}.status.load{color:var(--muted)}button:disabled{opacity:.6;cursor:default}
+@media (max-width:560px){form{flex-wrap:wrap}input{flex:1 1 100%}form button{flex:1 1 100%;padding:11px 18px}}
 @media (max-width:760px){.grid{grid-template-columns:1fr;gap:34px}.row{grid-template-columns:minmax(0,1fr) 80px 48px}}
 </style>
 </head>
@@ -52,8 +54,8 @@ h2{font-size:14px;font-weight:600;margin:0 0 12px;color:var(--muted)}
 <main>
   <h1>What is this dataset for?</h1>
   <p class="lede">Paste a Hugging Face dataset id. A small fine-tuned model reads the column names and the first row, then suggests task tags.</p>
-  <form id="f"><input id="q" aria-label="Dataset id" placeholder="owner/dataset" autocomplete="off"><button>Suggest tags</button></form>
-  <div class="examples">Examples: <span id="ex"></span><button type="button" id="random">Try a random dataset</button></div>
+  <form id="f"><input id="q" aria-label="Dataset id" placeholder="owner/dataset" autocomplete="off"><button type="button" id="random" class="secondary">Random dataset</button><button id="go">Suggest tags</button></form>
+  <div class="examples">Examples: <span id="ex"></span></div>
   <p class="status" id="status" role="status" aria-live="polite"></p>
 
   <section id="out" hidden>
@@ -109,13 +111,13 @@ function show(ex){
     : `Fetched the preview in ${ex.timing.fetch_ms} ms. The model took ${ex.timing.model_ms} ms on a free CPU.`;
 }
 let pending = null;
+function busy(on){ $("go").disabled = on; $("random").disabled = on; }
 async function run(id){
   id = id.trim();
   if (!id) { $("out").hidden = true; status("Paste a dataset id first, for example " + EXAMPLES[0] + ".", "err"); return; }
   if (pending) pending.abort();
   pending = new AbortController();
-  const button = $("f").querySelector("button");
-  button.disabled = true; $("out").hidden = true;
+  busy(true); $("out").hidden = true;
   status("Reading the dataset…", "load");
   try {
     const r = await fetch("api/predict", {method: "POST", headers: {"Content-Type": "application/json"},
@@ -133,15 +135,14 @@ async function run(id){
     if (e.name === "AbortError") return;
     status("Could not reach the server. Check your connection and try again.", "err");
   } finally {
-    button.disabled = false;
+    busy(false);
   }
 }
 $("ex").innerHTML = EXAMPLES.map((id,i) => `<button type="button" data-i="${i}">${id.length > 40 ? id.slice(0,38) + "…" : id}</button>`).join("");
 $("ex").onclick = e => { const i = e.target.dataset.i; if (i !== undefined) { $("q").value = EXAMPLES[i]; run(EXAMPLES[i]); } };
 $("random").onclick = async () => {
   if (pending) pending.abort();
-  const button = $("random");
-  button.disabled = true; $("out").hidden = true;
+  busy(true); $("out").hidden = true;
   status("Picking a random dataset…", "load");
   try {
     const r = await fetch("api/random");
@@ -153,11 +154,11 @@ $("random").onclick = async () => {
       return;
     }
     $("q").value = body.dataset_id;
-    run(body.dataset_id);
+    await run(body.dataset_id);  // run() keeps both buttons disabled until the prediction arrives
   } catch (e) {
     status("Could not reach the server. Check your connection and try again.", "err");
   } finally {
-    button.disabled = false;
+    busy(false);
   }
 };
 $("f").onsubmit = e => { e.preventDefault(); run($("q").value); };