Add clickable example prompt chips

index.html

@@ -81,6 +81,12 @@
   }
   input[type=range] { accent-color: var(--blue); }
   #controls b { color: #dfe6f5; }
+  #examples { max-width: 800px; width: 100%; margin: 0 auto; padding: 4px 20px 14px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
+  .chip {
+    background: var(--card); border: 1px solid var(--border); color: #dfe6f5;
+    padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer;
+  }
+  .chip:hover { border-color: var(--blue); color: #fff; background: #16244a; }
 
   /* Composer */
   #composer { padding: 12px 20px 18px; }
@@ -151,6 +157,13 @@
   <p>A 30B multimodal agentic model — answering questions, reasoning over images and video,<br>and completing tasks, right here on ZeroGPU.</p>
 </div>
 
+<div id="examples">
+  <button class="chip" data-text="Write a short joke about saving RAM.">😂 Joke about RAM</button>
+  <button class="chip" data-text="Write a Python function to compute Fibonacci numbers with memoization.">🐍 Fibonacci in Python</button>
+  <button class="chip" data-text="Explain how speculative decoding works in 3 sentences.">⚡ Speculative decoding</button>
+  <button class="chip" data-text="Detect the bridge. Return only the detection in the model's native object-detection format, with no explanation." data-needs-image="true">🌉 Detect the bridge (attach an image)</button>
+  <button class="chip" data-text="Describe what happens in this video." data-needs-image="true">🎬 Describe this video (attach a video)</button>
+</div>
 <div id="chat"></div>
 
 <div id="controls">
@@ -265,6 +278,7 @@ async function send() {
   const text = input.value.trim();
   if (!text && !attachedFile) return;
   hero.style.display = "none";
+  document.getElementById("examples").style.display = "none";
   document.querySelector(".orb").style.padding = "12px 0 4px";
   const isVideo = attachedFile && attachedFile.type.startsWith("video/");
   const mediaUrl = attachedFile ? URL.createObjectURL(attachedFile) : null;
@@ -311,6 +325,15 @@ sendBtn.onclick = send;
 stopBtn.onclick = () => { if (currentJob) currentJob.cancel(); };
 input.onkeydown = e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } };
 input.oninput = () => { input.style.height = "auto"; input.style.height = Math.min(input.scrollHeight, 140) + "px"; };
+
+document.querySelectorAll(".chip").forEach(chip => {
+  chip.onclick = () => {
+    input.value = chip.dataset.text;
+    input.dispatchEvent(new Event("input"));
+    input.focus();
+    if (chip.dataset.needsImage) fileInput.click();
+  };
+});
 </script>
 </body>
 </html>