feat: gallery auto-advances every 3s; stops on category click; add Instruction label

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: kaixubuilds

assets/js/main.js

@@ -372,14 +372,33 @@ function initTaxonomy() {
     showTask(CAT_TASKS[cat][0]);
   }
 
+  const allTaskKeys = Object.keys(TASKS);
+  let autoIdx = 0;
+  let autoTimer = null;
+
+  function stopAuto() {
+    if (autoTimer) { clearInterval(autoTimer); autoTimer = null; }
+  }
+
+  function startAuto() {
+    autoTimer = setInterval(() => {
+      autoIdx = (autoIdx + 1) % allTaskKeys.length;
+      const key = allTaskKeys[autoIdx];
+      const cat = Object.entries(CAT_TASKS).find(([, tasks]) => tasks.includes(key))?.[0];
+      if (cat) showCat(cat);
+      else showTask(key);
+    }, 3000);
+  }
+
   catBtns.forEach(btn => {
-    btn.addEventListener("click", () => showCat(btn.dataset.cat));
+    btn.addEventListener("click", () => { stopAuto(); showCat(btn.dataset.cat); });
   });
   taskBtns.forEach(btn => {
     btn.addEventListener("click", () => showTask(btn.dataset.task));
   });
 
   showCat("geo");
+  startAuto();
 }
 
 /* ── Heatmap ─────────────────────────────────────────────────── */

index.html

@@ -252,7 +252,10 @@ <h2 class="sec-title">20 tasks across 4 categories.<br>Infinitely scalable.</h2>
           <img id="ex-answer" src="assets/img/ex_translation_answer.png" alt="Ground truth" />
           <img id="ex-output" src="assets/img/ex_translation_output.png" alt="Model output" />
         </div>
-        <div class="ex-instruction" id="ex-instr"></div>
+        <div class="instruction-block" style="margin-top:14px">
+          <div class="label">Instruction</div>
+          <div id="ex-instr"></div>
+        </div>
       </div>
     </div>
   </div>