Blog alignment: reasoning_strength template kwarg, video input support

app.py

@@ -22,7 +22,7 @@ app = Server()
 @app.api(name="chat")
 @spaces.GPU(size="xlarge", duration=240)
 def chat(message: str,
-         image: FileData | None,
+         media: FileData | None,
          history: list,
          max_new_tokens: float,
          temperature: float,
@@ -30,28 +30,33 @@ def chat(message: str,
     """Streaming multimodal chat with Muse-Glimmer-30B.
 
     history: list of {"role": "user"|"assistant", "content": str}
-    image: optional FileData uploaded via the Gradio client
+    media: optional image or video FileData uploaded via the Gradio client
     """
-    messages = [
-        {"role": "system", "content": f"Reasoning strength: {reasoning}"},
-    ]
+    messages = []
     for m in history:
         messages.append({"role": m["role"], "content": m["content"]})
 
     content = []
-    if image:
-        content.append({"type": "image", "path": image["path"]})
+    if media:
+        path = media["path"]
+        if path.lower().rsplit(".", 1)[-1] in ("mp4", "mov", "webm", "mkv", "avi"):
+            content.append({"type": "video", "path": path})
+        else:
+            content.append({"type": "image", "path": path})
     if message:
         content.append({"type": "text", "text": message})
     messages.append({"role": "user", "content": content})
 
-    inputs = processor.apply_chat_template(
-        messages,
+    template_kwargs = dict(
         add_generation_prompt=True,
         tokenize=True,
         return_dict=True,
         return_tensors="pt",
-    ).to(model.device)
+        reasoning_strength=reasoning,
+    )
+    if any(c["type"] == "video" for c in content):
+        template_kwargs["processor_kwargs"] = {"num_frames": 32}
+    inputs = processor.apply_chat_template(messages, **template_kwargs).to(model.device)
 
     streamer = TextIteratorStreamer(processor, skip_prompt=True, skip_special_tokens=True)
     thread = Thread(

index.html

@@ -61,7 +61,7 @@
   .msg { max-width: 78%; padding: 12px 16px; border-radius: 20px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; font-size: 15px; }
   .user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
   .bot { align-self: flex-start; background: var(--card); border: 1px solid var(--border); color: #eef2fb; border-bottom-left-radius: 6px; }
-  .msg img { max-width: 240px; border-radius: 12px; display: block; margin-bottom: 8px; }
+  .msg img, .msg video { max-width: 240px; border-radius: 12px; display: block; margin-bottom: 8px; }
   .sys { align-self: center; color: var(--muted); font-size: 12px; background: none; }
   .reasoning { margin-bottom: 8px; border-left: 2px solid var(--border); padding-left: 10px; }
   .reasoning summary { cursor: pointer; color: #8ab4ff; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
@@ -148,7 +148,7 @@
 
 <div class="hero" id="hero">
   <h1>Do more with Muse Glimmer</h1>
-  <p>A 30B multimodal agentic model — answering questions, reasoning over images,<br>and completing tasks, right here on ZeroGPU.</p>
+  <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="chat"></div>
@@ -169,7 +169,7 @@
   <div id="preview"><img id="pimg"><div class="x" onclick="clearImage()">✕</div></div>
   <div class="row">
     <button id="attach" title="Attach image">📎</button>
-    <input type="file" id="file" accept="image/*" hidden>
+    <input type="file" id="file" accept="image/*,video/*" hidden>
     <textarea id="input" rows="1" placeholder="Message Muse Glimmer…"></textarea>
     <button id="send">Send</button>
     <button id="stop" style="display:none">Stop</button>
@@ -201,15 +201,27 @@ document.getElementById("attach").onclick = () => fileInput.click();
 
 fileInput.onchange = () => {
   attachedFile = fileInput.files[0] || null;
-  if (attachedFile) { pimg.src = URL.createObjectURL(attachedFile); preview.style.display = "block"; }
-  else preview.style.display = "none";
+  if (attachedFile) {
+    const url = URL.createObjectURL(attachedFile);
+    if (attachedFile.type.startsWith("video/")) {
+      preview.innerHTML = `<video src="${url}" style="height:64px;border-radius:12px;border:1px solid var(--border)" muted></video><div class="x" onclick="clearImage()">✕</div>`;
+    } else {
+      preview.innerHTML = `<img src="${url}" style="height:64px;border-radius:12px;border:1px solid var(--border)"><div class="x" onclick="clearImage()">✕</div>`;
+    }
+    preview.style.display = "block";
+  } else preview.style.display = "none";
 };
 window.clearImage = () => { attachedFile = null; fileInput.value = ""; preview.style.display = "none"; };
 
-function addMsg(role, text, imgUrl) {
+function addMsg(role, text, mediaUrl, isVideo) {
   const div = document.createElement("div");
   div.className = "msg " + role;
-  if (imgUrl) { const im = document.createElement("img"); im.src = imgUrl; div.appendChild(im); }
+  if (mediaUrl) {
+    const im = document.createElement(isVideo ? "video" : "img");
+    im.src = mediaUrl;
+    if (isVideo) { im.controls = true; im.muted = true; }
+    div.appendChild(im);
+  }
   const t = document.createElement("span"); t.textContent = text; div.appendChild(t);
   chatEl.appendChild(div);
   chatEl.scrollTop = chatEl.scrollHeight;
@@ -258,8 +270,9 @@ async function send() {
   if (!text && !attachedFile) return;
   hero.style.display = "none";
   document.querySelector(".orb").style.padding = "12px 0 4px";
-  const imgUrl = attachedFile ? URL.createObjectURL(attachedFile) : null;
-  addMsg("user", text || "[image]", imgUrl);
+  const isVideo = attachedFile && attachedFile.type.startsWith("video/");
+  const mediaUrl = attachedFile ? URL.createObjectURL(attachedFile) : null;
+  addMsg("user", text || (isVideo ? "[video]" : "[image]"), mediaUrl, isVideo);
   input.value = "";
   input.style.height = "auto";
   setBusy(true);
@@ -269,7 +282,7 @@ async function send() {
   try {
     currentJob = client.submit("/chat", {
       message: text,
-      image: attachedFile ? handle_file(attachedFile) : null,
+      media: attachedFile ? handle_file(attachedFile) : null,
       history: history,
       max_new_tokens: +document.getElementById("maxtok").value,
       temperature: +document.getElementById("temp").value,
@@ -286,7 +299,7 @@ async function send() {
         chatEl.scrollTop = chatEl.scrollHeight;
       }
     }
-    history.push({ role: "user", content: text || "[image]" });
+    history.push({ role: "user", content: text || (isVideo ? "[video]" : "[image]") });
     history.push({ role: "assistant", content: finalText });
   } catch (e) {
     botDiv.textContent = "⚠️ " + (e.message || e);

requirements.txt

@@ -5,3 +5,4 @@ transformers
 gradio
 pillow
 accelerate
+torchcodec