Media example chips use public URLs from vl-test-suite

app.py

@@ -23,12 +23,14 @@ app = Server()
 @spaces.GPU(size="xlarge", duration=240)
 def chat(message: str,
          media: FileData | None,
+         media_url: str,
          history: list,
          reasoning: str) -> str:
     """Streaming multimodal chat with Muse-Glimmer-30B.
 
     history: list of {"role": "user"|"assistant", "content": str}
     media: optional image or video FileData uploaded via the Gradio client
+    media_url: optional public URL of an image or video
     """
     messages = []
     for m in history:
@@ -41,6 +43,11 @@ def chat(message: str,
             content.append({"type": "video", "path": path})
         else:
             content.append({"type": "image", "path": path})
+    elif media_url:
+        if media_url.lower().rsplit(".", 1)[-1].split("?")[0] in ("mp4", "mov", "webm", "mkv", "avi"):
+            content.append({"type": "video", "url": media_url})
+        else:
+            content.append({"type": "image", "url": media_url})
     if message:
         content.append({"type": "text", "text": message})
     messages.append({"role": "user", "content": content})

index.html

@@ -161,8 +161,9 @@
   <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>
+  <button class="chip" data-text="What is shown in this image?" data-url="https://huggingface.co/datasets/merve/vl-test-suite/resolve/main/SF.png">🌁 What's in this image?</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-url="https://huggingface.co/datasets/merve/vl-test-suite/resolve/main/SF.png">🌉 Detect the bridge</button>
+  <button class="chip" data-text="Describe what happens in this video." data-url="https://huggingface.co/datasets/merve/vl-test-suite/resolve/main/IMG_8137.mp4">🎬 Describe this video</button>
 </div>
 <div id="chat"></div>
 
@@ -274,15 +275,16 @@ function setBusy(b) {
   input.disabled = b;
 }
 
-async function send() {
+async function send(mediaUrl = null) {
   const text = input.value.trim();
-  if (!text && !attachedFile) return;
+  if (!text && !attachedFile && !mediaUrl) 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;
-  addMsg("user", text || (isVideo ? "[video]" : "[image]"), mediaUrl, isVideo);
+  const isVideo = attachedFile ? attachedFile.type.startsWith("video/")
+                               : (mediaUrl && /\.(mp4|mov|webm|mkv|avi)(\?|$)/i.test(mediaUrl));
+  const previewUrl = attachedFile ? URL.createObjectURL(attachedFile) : mediaUrl;
+  addMsg("user", text || (isVideo ? "[video]" : "[image]"), previewUrl, isVideo);
   input.value = "";
   input.style.height = "auto";
   setBusy(true);
@@ -293,6 +295,7 @@ async function send() {
     currentJob = client.submit("/chat", {
       message: text,
       media: attachedFile ? handle_file(attachedFile) : null,
+      media_url: attachedFile ? "" : (mediaUrl || ""),
       history: history,
       reasoning: document.getElementById("reasoning").value,
     });
@@ -330,8 +333,8 @@ 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();
+    if (chip.dataset.url) { send(chip.dataset.url); }
+    else input.focus();
   };
 });
 </script>