Update app.py

app.py

@@ -275,6 +275,93 @@ def get_duration(
         return 80
     else:
         return 120
+
+class RadioAnimated(gr.HTML):
+    """
+    Animated segmented radio (like iOS pill selector).
+    Outputs: selected option string, e.g. "768x512"
+    """
+    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]
+
+        # Build labels/inputs HTML
+        inputs_html = "\n".join(
+            f"""
+            <input class="ra-input" type="radio" name="ra" id="ra-{i}" value="{c}">
+            <label class="ra-label" for="ra-{i}">{c}</label>
+            """
+            for i, c in enumerate(choices)
+        )
+
+        html_template = f"""
+        <div class="ra-wrap" id="ra-wrap">
+          <div class="ra-inner" id="ra-inner">
+            <div class="ra-highlight" id="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'));
+          const labels = Array.from(element.querySelectorAll('.ra-label'));
+
+          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);
+
+            // Update props + fire change if requested
+            props.value = choices[idx];
+            if (shouldTrigger) trigger('change', props.value);
+          }
+
+          // Init from props.value
+          setCheckedByValue(props.value ?? choices[0], false);
+
+          // Click handlers
+          inputs.forEach((inp) => {
+            inp.addEventListener('change', () => {
+              setCheckedByValue(inp.value, true);
+            });
+          });
+
+          // Watch for python-side value updates
+          let last = props.value;
+          setInterval(() => {
+            if (props.value !== last) {
+              last = props.value;
+              setCheckedByValue(props.value ?? choices[0], false);
+            }
+          }, 100);
+        })();
+        """
+
+        super().__init__(
+            value=value,
+            html_template=html_template,
+            js_on_load=js_on_load,
+            **kwargs
+        )
+
     
 @spaces.GPU(duration=get_duration)
 def generate_video(
@@ -290,7 +377,6 @@ def generate_video(
 ):
     """
     Generate a short cinematic video from a text prompt and optional input image using the LTX-2 distilled pipeline.
-
     Args:
         input_image: Optional input image for image-to-video. If provided, it is injected at frame 0 to guide motion.
         prompt: Text description of the scene, motion, and cinematic style to generate.
@@ -301,12 +387,10 @@ def generate_video(
         height: Output video height in pixels.
         width: Output video width in pixels.
         progress: Gradio progress tracker.
-
     Returns:
         A tuple of:
             - output_path: Path to the generated MP4 video file.
             - seed: The seed used for generation.
-
     Notes:
         - Uses a fixed frame rate of 24 FPS.
         - Prompt embeddings are generated externally to avoid reloading the text encoder.
@@ -484,7 +568,55 @@ css = """
     }
     """
 
-with gr.Blocks(css=css, title="LTX-2 Video Distilled 🎥🔈") as demo:
+css += """
+    /* ---- radioanimated ---- */
+    .ra-wrap{
+      width: fit-content;
+    }
+    .ra-inner{
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: 0;
+      padding: 6px;
+      background: #0b0b0b;
+      border-radius: 9999px;
+      overflow: hidden;
+      user-select: none;
+    }
+    .ra-input{
+      display: none;
+    }
+    .ra-label{
+      position: relative;
+      z-index: 2;
+      padding: 10px 18px;
+      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
+      font-size: 14px;
+      font-weight: 600;
+      color: rgba(255,255,255,0.7);
+      cursor: pointer;
+      transition: color 180ms ease;
+      white-space: nowrap;
+    }
+    .ra-highlight{
+      position: absolute;
+      z-index: 1;
+      top: 6px;
+      left: 6px;
+      height: calc(100% - 12px);
+      border-radius: 9999px;
+      background: #8bff97; /* green knob */
+      transition: transform 200ms ease, width 200ms ease;
+    }
+    /* selected label becomes darker like your screenshot */
+    .ra-input:checked + .ra-label{
+      color: rgba(0,0,0,0.75);
+    }
+    """
+
+
+with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
     gr.HTML(
         """
         <div style="text-align: center;">
@@ -511,6 +643,7 @@ with gr.Blocks(css=css, title="LTX-2 Video Distilled 🎥🔈") as demo:
     with gr.Column(elem_id="col-container"):
         with gr.Row():
             with gr.Column(elem_id="step-column"):
+            
                 input_image = gr.Image(
                     label="Input Image (Optional)",
                     type="pil",
@@ -547,31 +680,26 @@ with gr.Blocks(css=css, title="LTX-2 Video Distilled 🎥🔈") as demo:
                 
                     randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
 
-                    with gr.Row():
-                        width = gr.Number(label="Width", value=DEFAULT_1_STAGE_WIDTH, precision=0)
-                        height = gr.Number(label="Height", value=DEFAULT_1_STAGE_HEIGHT, precision=0)
-
-    
-            with gr.Column(elem_id="step-column"):
                 
+                        
+            with gr.Column(elem_id="step-column"):
                 output_video = gr.Video(label="Generated Video", autoplay=True, height=512)
-
-                resolution = gr.Radio(
-                    show_label=False,
+                
+                radioanimated = RadioAnimated(
                     choices=["768x512", "512x512", "512x768"],
                     value=f"{DEFAULT_1_STAGE_WIDTH}x{DEFAULT_1_STAGE_HEIGHT}",
-                )    
-                generate_btn = gr.Button("🤩 Generate Video", variant="primary", elem_classes="button-gradient")
-
-                
+                    elem_id="radioanimated"
+                )
 
+                width = gr.Number(label="Width", value=DEFAULT_1_STAGE_WIDTH, precision=0, visible=False)
+                height = gr.Number(label="Height", value=DEFAULT_1_STAGE_HEIGHT, precision=0, visible=False)
                     
-    # When radio changes, update the existing width/height inputs
-    resolution.change(
+                generate_btn = gr.Button("🤩 Generate Video", variant="primary", elem_classes="button-gradient")
+
+    radioanimated.change(
         fn=apply_resolution,
-        inputs=resolution,
+        inputs=radioanimated,
         outputs=[width, height],
-        show_api=False
     )
                 
     generate_btn.click(
@@ -619,4 +747,4 @@ with gr.Blocks(css=css, title="LTX-2 Video Distilled 🎥🔈") as demo:
 
 
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False, mcp_server=True)
+    demo.launch(ssr_mode=False, mcp_server=True, css=css)