Update app.py

app.py

@@ -249,19 +249,22 @@ class RadioAnimated(gr.HTML):
         if value is None:
             value = choices[0]
 
-        # Build labels/inputs HTML
+        uid = uuid.uuid4().hex[:8]  # unique per instance
+        group_name = f"ra-{uid}"
+
         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>
+            <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)
         )
 
+        # NOTE: use classes instead of duplicate IDs
         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>
+        <div class="ra-wrap" data-ra="{uid}">
+          <div class="ra-inner">
+            <div class="ra-highlight"></div>
             {inputs_html}
           </div>
         </div>
@@ -269,11 +272,10 @@ class RadioAnimated(gr.HTML):
 
         js_on_load = r"""
         (() => {
-          const wrap = element.querySelector('#ra-wrap');
-          const inner = element.querySelector('#ra-inner');
-          const highlight = element.querySelector('#ra-highlight');
+          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;
 
@@ -291,7 +293,6 @@ class RadioAnimated(gr.HTML):
             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);
           }
@@ -299,7 +300,7 @@ class RadioAnimated(gr.HTML):
           // Init from props.value
           setCheckedByValue(props.value ?? choices[0], false);
 
-          // Click handlers
+          // Input handlers
           inputs.forEach((inp) => {
             inp.addEventListener('change', () => {
               setCheckedByValue(inp.value, true);
@@ -324,6 +325,10 @@ class RadioAnimated(gr.HTML):
             **kwargs
         )
 
+def generate_video_example(input_image, prompt, duration, progress=gr.Progress(track_tqdm=True)):
+    output_video, seed = generate_video(input_image, prompt, 5, True, 42, True, DEFAULT_1_STAGE_HEIGHT, DEFAULT_1_STAGE_WIDTH, progress)
+
+    return output_video
     
 @spaces.GPU(duration=get_duration)
 def generate_video(
@@ -429,6 +434,10 @@ def apply_resolution(resolution: str):
     w, h = resolution.split("x")
     return int(w), int(h)
 
+def apply_duration(duration: str):
+    duration_s = int(duration[:-1])
+    return duration_s
+
 css = """
     #col-container {
         margin: 0 auto;
@@ -610,13 +619,7 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                     max_lines=3,
                     placeholder="Describe the motion and animation you want..."
                 )
-                duration = gr.Slider(
-                    label="Duration (seconds)",
-                    minimum=1.0,
-                    maximum=10.0,
-                    value=3.0,
-                    step=0.1
-                )
+
                 enhance_prompt = gr.Checkbox(
                         label="Enhance Prompt",
                         value=True,
@@ -634,25 +637,51 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                 
                     randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
 
-                
                         
             with gr.Column(elem_id="step-column"):
                 output_video = gr.Video(label="Generated Video", autoplay=True, height=512)
-                
-                radioanimated = RadioAnimated(
-                    choices=["768x512", "512x512", "512x768"],
-                    value=f"{DEFAULT_1_STAGE_WIDTH}x{DEFAULT_1_STAGE_HEIGHT}",
-                    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)
+                with gr.Row():
+
+                    with gr.Column():
+                        radioanimated_duration = RadioAnimated(
+                            choices=["3s", "5s", "10s"],
+                            value="3s",
+                            elem_id="radioanimated_duration"
+                        )
+                        
+                        duration = gr.Slider(
+                            label="Duration (seconds)",
+                            minimum=1.0,
+                            maximum=10.0,
+                            value=3.0,
+                            step=0.1,
+                            visible=False
+                        )
+                        
+                    with gr.Column():
+                        radioanimated_resolution = RadioAnimated(
+                            choices=["768x512", "512x512", "512x768"],
+                            value=f"{DEFAULT_1_STAGE_WIDTH}x{DEFAULT_1_STAGE_HEIGHT}",
+                            elem_id="radioanimated_resolution"
+                        )
+                        
+                        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)   
+ 
                     
                 generate_btn = gr.Button("🤩 Generate Video", variant="primary", elem_classes="button-gradient")
 
-    radioanimated.change(
+
+    radioanimated_duration.change(
+        fn=apply_duration,
+        inputs=radioanimated_duration,
+        outputs=[duration],
+        api_visibility="private"
+    )
+    radioanimated_resolution.change(
         fn=apply_resolution,
-        inputs=radioanimated,
+        inputs=radioanimated_resolution,
         outputs=[width, height],
         api_visibility="private"
     )
@@ -677,24 +706,25 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
         examples=[
             [
                 "supergirl.png",
-                "A fuzzy puppet superhero character resembling a female puppet with blonde hair and a blue superhero suit stands inside an icy cave made of frozen walls and icicles, she looks panicked and frantic, rapidly turning her head left and right and scanning the cave while waving her arms and shouting angrily and desperately, mouthing the words “where the hell is my dog,” her movements exaggerated and puppet-like with high energy and urgency, suddenly a second puppet dog bursts into frame from the side, jumping up excitedly and tackling her affectionately while licking her face repeatedly, she freezes in surprise and then breaks into relief and laughter as the dog continues licking her, the scene feels chaotic, comedic, and emotional with expressive puppet reactions, cinematic lighting, smooth camera motion, shallow depth of field, and high-quality puppet-style animation",
-                5.0,
+                "A fuzzy puppet superhero character resembling a female puppet with blonde hair and a blue superhero suit stands inside an icy cave made of frozen walls and icicles, she looks panicked and frantic, rapidly turning her head left and right and scanning the cave while waving her arms and shouting angrily and desperately, mouthing the words “where the hell is my dog,” her movements exaggerated and puppet-like with high energy and urgency, suddenly a second puppet dog bursts into frame from the side, jumping up excitedly and tackling her affectionately while licking her face repeatedly, she freezes in surprise and then breaks into relief and laughter as the dog continues licking her, the scene feels chaotic, comedic, and emotional with expressive puppet reactions, cinematic lighting, smooth camera motion, shallow depth of field, and high-quality puppet-style animation"
+            ],
+            [
+                "highland.png",
+                "Realistic POV selfie-style video in a snowy, foggy field. Two shaggy Highland cows with long curved horns stand ahead. The camera is handheld and slightly shaky. The woman filming talks nervously and excitedly in a vlog tone: \"Oh my god guys… look how big those horns are… I’m kinda scared.\" The cow on the left walks toward the camera in a cute, bouncy, hopping way, curious and gentle. Snow crunches under its hooves, breath visible in the cold air. The horns look massive from the POV. As the cow gets very close, its wet nose with slight dripping fills part of the frame. She laughs nervously but reaches out and pets the cow. The cow makes deep, soft, interesting mooing and snorting sounds, calm and friendly. Ultra-realistic, natural lighting, immersive audio, documentary-style realism.",
             ],
             [
                 "wednesday.png",
                 "A cinematic close-up of Wednesday Addams frozen mid-dance on a dark, blue-lit ballroom floor as students move indistinctly behind her, their footsteps and muffled music reduced to a distant, underwater thrum; the audio foregrounds her steady breathing and the faint rustle of fabric as she slowly raises one arm, never breaking eye contact with the camera, then after a deliberately long silence she speaks in a flat, dry, perfectly controlled voice, “I don’t dance… I vibe code,” each word crisp and unemotional, followed by an abrupt cutoff of her voice as the background sound swells slightly, reinforcing the deadpan humor, with precise lip sync, minimal facial movement, stark gothic lighting, and cinematic realism.",
-                5.0,
             ],
             [
-                "astronaut.jpg",
+                "astronaut.png",
                 "An astronaut hatches from a fragile egg on the surface of the Moon, the shell cracking and peeling apart in gentle low-gravity motion. Fine lunar dust lifts and drifts outward with each movement, floating in slow arcs before settling back onto the ground. The astronaut pushes free in a deliberate, weightless motion, small fragments of the egg tumbling and spinning through the air. In the background, the deep darkness of space subtly shifts as stars glide with the camera's movement, emphasizing vast depth and scale. The camera performs a smooth, cinematic slow push-in, with natural parallax between the foreground dust, the astronaut, and the distant starfield. Ultra-realistic detail, physically accurate low-gravity motion, cinematic lighting, and a breath-taking, movie-like shot.",
-                10.0,
             ]
             
         ],
-        fn=generate_video,
-        inputs=[input_image, prompt, duration],
-        outputs = [output_video, seed],
+        fn=generate_video_example,
+        inputs=[input_image, prompt],
+        outputs = [output_video],
         label="Example",
         cache_examples=True,
     )