update [kernels:flash-attn2] (cleaned) ✅

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 import torch
+import uuid
 from transformers import AutoProcessor, AutoModelForImageTextToText
 import spaces
 from molmo_utils import process_vision_info
@@ -28,7 +29,7 @@ class OrangeRedTheme(Soft):
         self,
         *,
         primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.orange_red, # Use the new color
+        secondary_hue: colors.Color | str = colors.orange_red,
         neutral_hue: colors.Color | str = colors.slate,
         text_size: sizes.Size | str = sizes.text_lg,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
@@ -76,11 +77,124 @@ class OrangeRedTheme(Soft):
 
 orange_red_theme = OrangeRedTheme()
 
+css = """
+#main-title h1 {font-size: 2.4em !important;}
+
+/* RadioAnimated Styles */
+.ra-wrap{ width: fit-content; }
+.ra-inner{
+  position: relative; display: inline-flex; align-items: center; gap: 0; padding: 6px;
+  background: var(--neutral-200); border-radius: 9999px; overflow: hidden;
+}
+.ra-input{ display: none; }
+.ra-label{
+  position: relative; z-index: 2; padding: 8px 16px;
+  font-family: inherit; font-size: 14px; font-weight: 600;
+  color: var(--neutral-500); cursor: pointer; transition: color 0.2s; white-space: nowrap;
+}
+.ra-highlight{
+  position: absolute; z-index: 1; top: 6px; left: 6px;
+  height: calc(100% - 12px); border-radius: 9999px;
+  background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  transition: transform 0.2s, width 0.2s;
+}
+.ra-input:checked + .ra-label{ color: black; }
+
+/* Dark mode adjustments for Radio */
+.dark .ra-inner { background: var(--neutral-800); }
+.dark .ra-label { color: var(--neutral-400); }
+.dark .ra-highlight { background: var(--neutral-600); }
+.dark .ra-input:checked + .ra-label { color: white; }
+
+#gpu-duration-container {
+    padding: 10px;
+    border-radius: 8px;
+    background: var(--background-fill-secondary);
+    border: 1px solid var(--border-color-primary);
+    margin-top: 10px;
+}
+"""
+
+class RadioAnimated(gr.HTML):
+    def __init__(self, choices, value=None, **kwargs):
+        if not choices or len(choices) < 2:
+            raise ValueError("RadioAnimated requires at least 2 choices.")
+        if value is None:
+            value = choices[0]
+
+        uid = uuid.uuid4().hex[:8]
+        group_name = f"ra-{uid}"
+
+        inputs_html = "\n".join(
+            f"""
+            <input class="ra-input" type="radio" name="{group_name}" id="{group_name}-{i}" value="{c}">
+            <label class="ra-label" for="{group_name}-{i}">{c}</label>
+            """
+            for i, c in enumerate(choices)
+        )
+
+        html_template = f"""
+        <div class="ra-wrap" data-ra="{uid}">
+          <div class="ra-inner">
+            <div class="ra-highlight"></div>
+            {inputs_html}
+          </div>
+        </div>
+        """
+
+        js_on_load = r"""
+        (() => {
+          const wrap = element.querySelector('.ra-wrap');
+          const inner = element.querySelector('.ra-inner');
+          const highlight = element.querySelector('.ra-highlight');
+          const inputs = Array.from(element.querySelectorAll('.ra-input'));
+
+          if (!inputs.length) return;
+
+          const choices = inputs.map(i => i.value);
+
+          function setHighlightByIndex(idx) {
+            const n = choices.length;
+            const pct = 100 / n;
+            highlight.style.width = `calc(${pct}% - 6px)`;
+            highlight.style.transform = `translateX(${idx * 100}%)`;
+          }
+
+          function setCheckedByValue(val, shouldTrigger=false) {
+            const idx = Math.max(0, choices.indexOf(val));
+            inputs.forEach((inp, i) => { inp.checked = (i === idx); });
+            setHighlightByIndex(idx);
+
+            props.value = choices[idx];
+            if (shouldTrigger) trigger('change', props.value);
+          }
+
+          setCheckedByValue(props.value ?? choices[0], false);
+
+          inputs.forEach((inp) => {
+            inp.addEventListener('change', () => {
+              setCheckedByValue(inp.value, true);
+            });
+          });
+        })();
+        """
+
+        super().__init__(
+            value=value,
+            html_template=html_template,
+            js_on_load=js_on_load,
+            **kwargs
+        )
+
+def apply_gpu_duration(val: str):
+    return int(val)
+
 MODEL_ID = "allenai/SAGE-MM-Qwen3-VL-4B-SFT_RL"
 
 print(f"Loading {MODEL_ID}...")
 processor = AutoProcessor.from_pretrained(
     MODEL_ID,
+    attn_implementation="kernels-community/flash-attn2",
     trust_remote_code=True,
     dtype="auto",
     device_map="auto"
@@ -94,16 +208,21 @@ model = AutoModelForImageTextToText.from_pretrained(
 )
 print("Model loaded successfully.")
 
-@spaces.GPU
-def process_video(user_text, video_path, max_new_tokens):
+def calc_timeout_video(user_text: str, video_path: str, max_new_tokens: int, gpu_timeout: int):
+    """Calculate GPU timeout duration for video processing."""
+    try:
+        return int(gpu_timeout)
+    except:
+        return 90
+
+@spaces.GPU(duration=calc_timeout_video)
+def process_video(user_text, video_path, max_new_tokens, gpu_timeout: int = 120):
     if not video_path:
         return "Please upload a video."
 
-    # Use default prompt if user input is empty
     if not user_text.strip():
         user_text = "Describe this video in detail."
 
-    # Construct messages for Molmo/Qwen
     messages = [
         {
             "role": "user",
@@ -114,8 +233,6 @@ def process_video(user_text, video_path, max_new_tokens):
         }
     ]
 
-    # Process Vision Info using molmo_utils
-    # This samples frames and handles resizing logic automatically
     try:
         _, videos, video_kwargs = process_vision_info(messages)
         videos, video_metadatas = zip(*videos)
@@ -149,10 +266,6 @@ def process_video(user_text, video_path, max_new_tokens):
 
     return generated_text
 
-css = """
-#main-title h1 {font-size: 2.4em !important;}
-"""
-
 with gr.Blocks() as demo:
     gr.Markdown("# **SAGE-MM-Video-Reasoning**", elem_id="main-title")
     gr.Markdown("Upload a video to get a detailed explanation or ask specific questions using [SAGE-MM-Qwen3-VL](https://huggingface.co/allenai/SAGE-MM-Qwen3-VL-4B-SFT_RL).")
@@ -180,7 +293,19 @@ with gr.Blocks() as demo:
             vid_btn = gr.Button("Analyze Video", variant="primary")
         
         with gr.Column():
-            vid_text_out = gr.Textbox(label="Model Response", interactive=True, lines=23)
+            vid_text_out = gr.Textbox(label="Model Response", interactive=True, lines=18)
+            
+            with gr.Row(elem_id="gpu-duration-container"):
+                with gr.Column():
+                    gr.Markdown("**GPU Duration (seconds)**")
+                    radioanimated_gpu_duration = RadioAnimated(
+                        choices=["90", "120", "180", "240", "300"],
+                        value="90",
+                        elem_id="radioanimated_gpu_duration"
+                    )
+                    gpu_duration_state = gr.Number(value=90, visible=False)
+            
+            gr.Markdown("*Note: Higher GPU duration allows for longer processing but consumes more GPU quota.*")
             
     gr.Examples(
         examples=[
@@ -194,9 +319,16 @@ with gr.Blocks() as demo:
         label="Video Examples"
     )
 
+    radioanimated_gpu_duration.change(
+        fn=apply_gpu_duration,
+        inputs=radioanimated_gpu_duration,
+        outputs=[gpu_duration_state],
+        api_visibility="private"
+    )
+
     vid_btn.click(
         fn=process_video,
-        inputs=[vid_prompt, vid_input, max_tokens_slider],
+        inputs=[vid_prompt, vid_input, max_tokens_slider, gpu_duration_state],
         outputs=[vid_text_out]
     )