Update app.py

app.py

@@ -637,27 +637,53 @@ class PromptBox(gr.HTML):
 
 class CameraDropdown(gr.HTML):
     """
-    Custom dropdown (More-style).
-    Outputs: selected option string, e.g. "Slide Left"
+    Custom dropdown (More-style) with optional icons per item.
+    Outputs: selected option string, e.g. "16:9"
+    
+    choices can be:
+      - ["16:9", "1:1", "9:16"]  (text only)
+      - [{"label":"16:9","value":"16:9","icon":"…"}, ...] (icon+text)
+    
+    icon can be emoji or inline SVG/HTML.
     """
-    def __init__(self, choices, value="None", title="Camera LoRA", **kwargs):
+    def __init__(self, choices, value="None", title="Dropdown", **kwargs):
         if not choices:
             raise ValueError("CameraDropdown requires choices.")
 
+        # Normalize choices -> list of dicts: {label, value, icon(optional)}
+        norm = []
+        for c in choices:
+            if isinstance(c, dict):
+                label = str(c.get("label", c.get("value", "")))
+                val = str(c.get("value", label))
+                icon = c.get("icon", None)  # emoji or svg/html
+                norm.append({"label": label, "value": val, "icon": icon})
+            else:
+                s = str(c)
+                norm.append({"label": s, "value": s, "icon": None})
+
         uid = uuid.uuid4().hex[:8]
-        safe_choices = [str(c) for c in choices]
 
-        items_html = "\n".join(
-            f"""<button type="button" class="cd-item" data-value="{c}">{c}</button>"""
-            for c in safe_choices
-        )
+        def render_item(item):
+            icon_html = ""
+            if item["icon"]:
+                icon_html = f'<span class="cd-icn">{item["icon"]}</span>'
+            return (
+                f'<button type="button" class="cd-item" '
+                f'data-value="{item["value"]}">'
+                f'{icon_html}<span class="cd-label">{item["label"]}</span>'
+                f'</button>'
+            )
+
+        items_html = "\n".join(render_item(item) for item in norm)
 
         html_template = f"""
         <div class="cd-wrap" data-cd="{uid}">
-          <button type="button" class="cd-trigger" aria-haspopup="menu" aria-expanded="false">
-            <span class="cd-trigger-text">More</span>
-            <span class="cd-caret">▾</span>
-          </button>
+            <button type="button" class="cd-trigger" aria-haspopup="menu" aria-expanded="false">
+              <span class="cd-trigger-icon"></span>
+              <span class="cd-trigger-text"></span>
+              <span class="cd-caret">▾</span>
+            </button>
 
           <div class="cd-menu" role="menu" aria-hidden="true">
             <div class="cd-title">{title}</div>
@@ -668,94 +694,108 @@ class CameraDropdown(gr.HTML):
         </div>
         """
 
+        # Pass a mapping value->label so the trigger can show label text
+        # (and still output value to Python)
+        value_to_label = {it["value"]: it["label"] for it in norm}
+        value_to_icon = {it["value"]: (it["icon"] or "") for it in norm}
+
         js_on_load = r"""
         (() => {
-        const wrap = element.querySelector(".cd-wrap");
-        const trigger = element.querySelector(".cd-trigger");
-        const triggerText = element.querySelector(".cd-trigger-text");
-        const menu = element.querySelector(".cd-menu");
-        const items = Array.from(element.querySelectorAll(".cd-item"));
+          const wrap = element.querySelector(".cd-wrap");
+          const trigger = element.querySelector(".cd-trigger");
+          const triggerIcon = element.querySelector(".cd-trigger-icon");
+          const triggerText = element.querySelector(".cd-trigger-text");
+          const menu = element.querySelector(".cd-menu");
+          const items = Array.from(element.querySelectorAll(".cd-item"));
+          if (!wrap || !trigger || !menu || !items.length) return;
+
+          const valueToLabel = __VALUE_TO_LABEL__;
+          const valueToIcon  = __VALUE_TO_ICON__;
+        
+          const safeLabel = (v) => (valueToLabel && valueToLabel[v]) ? valueToLabel[v] : (v ?? "None");
+          const safeIcon  = (v) => (valueToIcon  && valueToIcon[v])  ? valueToIcon[v]  : "";
 
-        if (!wrap || !trigger || !menu || !items.length) return;
 
-        function closeMenu() {
+          function closeMenu() {
             menu.classList.remove("open");
             trigger.setAttribute("aria-expanded", "false");
             menu.setAttribute("aria-hidden", "true");
-        }
+          }
 
-        function openMenu() {
+          function openMenu() {
             menu.classList.add("open");
             trigger.setAttribute("aria-expanded", "true");
             menu.setAttribute("aria-hidden", "false");
-        }
+          }
 
-        function setValue(val, shouldTrigger = false) {
-          const v = (val ?? "None");
-          props.value = v;
-          triggerText.textContent = v;
-        
-          // mark selected (for CSS tick)
-          items.forEach(btn => {
-            btn.dataset.selected = (btn.dataset.value === v) ? "true" : "false";
-          });
-        
-          if (shouldTrigger) trigger("change", props.value);
-        }
+          function setValue(val, shouldTrigger = false) {
+            const v = (val ?? "None");
+            props.value = v;
+
+            // Trigger shows LABEL only (icons stay in menu)
+            triggerText.textContent = safeLabel(v);
+            if (triggerIcon) {
+              triggerIcon.innerHTML = safeIcon(v);
+              triggerIcon.style.display = safeIcon(v) ? "inline-flex" : "none";
+            }
 
-        // Toggle menu
-        trigger.addEventListener("pointerdown", (e) => {
-            e.preventDefault();   // prevents focus/blur weirdness
+
+            items.forEach(btn => {
+              btn.dataset.selected = (btn.dataset.value === v) ? "true" : "false";
+            });
+
+            if (shouldTrigger) trigger("change", props.value);
+          }
+
+          trigger.addEventListener("pointerdown", (e) => {
+            e.preventDefault();
             e.stopPropagation();
             if (menu.classList.contains("open")) closeMenu();
             else openMenu();
-        });
+          });
 
-        // Close on outside interaction (use capture so it wins)
-        document.addEventListener("pointerdown", (e) => {
+          document.addEventListener("pointerdown", (e) => {
             if (!wrap.contains(e.target)) closeMenu();
-        }, true);
+          }, true);
 
-        // Close on ESC
-        document.addEventListener("keydown", (e) => {
+          document.addEventListener("keydown", (e) => {
             if (e.key === "Escape") closeMenu();
-        });
+          });
 
-        // Close when focus leaves the dropdown (keyboard users)
-        wrap.addEventListener("focusout", (e) => {
-            // if the newly-focused element isn't inside wrap, close
+          wrap.addEventListener("focusout", (e) => {
             if (!wrap.contains(e.relatedTarget)) closeMenu();
-        });
+          });
 
-        // Item selection: use pointerdown so it closes immediately
-        items.forEach((btn) => {
+          items.forEach((btn) => {
             btn.addEventListener("pointerdown", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            // close first so it never "sticks" open
-            closeMenu();
-            setValue(btn.dataset.value, true);
+              e.preventDefault();
+              e.stopPropagation();
+              closeMenu();
+              setValue(btn.dataset.value, true);
             });
-        });
+          });
 
-        // init
-        setValue((props.value ?? "None"), false);
+          // init
+          setValue((props.value ?? "None"), false);
 
-        // sync from Python updates
-        let last = props.value;
-        const syncFromProps = () => {
+          // sync from Python
+          let last = props.value;
+          const syncFromProps = () => {
             if (props.value !== last) {
-            last = props.value;
-            setValue(last, false);
+              last = props.value;
+              setValue(last, false);
             }
             requestAnimationFrame(syncFromProps);
-        };
-        requestAnimationFrame(syncFromProps);
+          };
+          requestAnimationFrame(syncFromProps);
         })();
-
         """
 
+        # Inject mapping into JS safely
+        import json
+        js_on_load = js_on_load.replace("__VALUE_TO_LABEL__", json.dumps(value_to_label))
+        js_on_load = js_on_load.replace("__VALUE_TO_ICON__", json.dumps(value_to_icon))
+
         super().__init__(
             value=value,
             html_template=html_template,
@@ -763,47 +803,7 @@ class CameraDropdown(gr.HTML):
             **kwargs
         )
 
-        
-def generate_video_example(input_image, prompt, camera_lora, resolution, progress=gr.Progress(track_tqdm=True)):
-
-    w, h = apply_resolution(resolution)
-
-    output_video = generate_video(
-        input_image,
-        prompt,
-        10,                      # duration seconds
-        True,                    # enhance_prompt
-        42,                      # seed
-        True,                    # randomize_seed
-        h,  # height
-        w,   # width
-        camera_lora, 
-        None,    
-        progress
-    )
-
-    return output_video
-        
-def generate_video_example_t2v(prompt, camera_lora, resolution, progress=gr.Progress(track_tqdm=True)):
-
-    w, h = apply_resolution(resolution)
-
-    output_video = generate_video(
-        None,
-        prompt,
-        15,                      # duration seconds
-        True,                    # enhance_prompt
-        42,                      # seed
-        True,                    # randomize_seed
-        h,  # height
-        w,   # width
-        camera_lora,    
-        None, 
-        progress
-    )
-    return output_video
-
-def generate_video_example_s2v(input_image, prompt, camera_lora, resolution, audio_path, progress=gr.Progress(track_tqdm=True)):
+def generate_video_example(input_image, prompt, camera_lora, resolution, audio_path = None, progress=gr.Progress(track_tqdm=True)):
 
     w, h = apply_resolution(resolution)
 
@@ -1123,6 +1123,23 @@ css = """
     }
     """
 
+css += """
+    .cd-trigger-icon{
+      color: rgba(255,255,255,0.9);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+    }
+    .cd-trigger-icon svg {
+      width: 18px;
+      height: 18px;
+      display: block;
+    }
+    """
+
+
 css += """
     /* ---- radioanimated ---- */
     .ra-wrap{
@@ -1170,6 +1187,18 @@ css += """
     }
     """
 
+css += """
+.cd-icn svg{
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+.cd-icn svg *{
+  stroke: rgba(255,255,255,0.9);
+}
+"""
+
+
 css += """
     /* --- prompt box --- */
     .ds-prompt{
@@ -1371,6 +1400,26 @@ css += """
 
     """
 
+css += """
+/* icons in dropdown items */
+.cd-item{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.cd-icn{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+}
+.cd-label{
+  flex: 1;
+}
+"""
+
 
 
 with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
@@ -1465,12 +1514,30 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                             visible=False
                         )
 
+                        ICON_16_9 = """<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                          <rect x="3" y="7" width="18" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
+                        </svg>"""
+                        
+                        ICON_1_1 = """<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                          <rect x="6" y="6" width="12" height="12" rx="2" stroke="currentColor" stroke-width="2"/>
+                        </svg>"""
+                        
+                        ICON_9_16 = """<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                          <rect x="7" y="3" width="10" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
+                        </svg>"""
+
+                        
                         radioanimated_resolution = CameraDropdown(
-                            choices=["16:9", "1:1", "9:16"],
+                            choices=[
+                                {"label": "16:9", "value": "16:9", "icon": ICON_16_9},
+                                {"label": "1:1",  "value": "1:1",  "icon": ICON_1_1},
+                                {"label": "9:16", "value": "9:16", "icon": ICON_9_16},
+                            ],
                             value="16:9",
                             title="Resolution",
                             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)   
@@ -1492,28 +1559,6 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                     
                 generate_btn = gr.Button("🤩 Generate Video", variant="primary", elem_classes="button-gradient")
 
-    # with gr.Sidebar(width=280):
-    #     gr.Examples(
-    #         examples=[
-    #             [
-    #                 "The video opens on a cake. A knife, held by a hand, is coming into frame and hovering over the cake. The knife then begins cutting into the cake to c4k3 cakeify it. As the knife slices the cake open, the inside of the cake is revealed to be cake with chocolate layers. The knife cuts through and the contents of the cake are revealed. Greek music playing in the background.",
-    #                 "Cakify",
-    #             ],
-
-    #             [
-    #                 "The video showcases an item. The camera zooms out. Then infl4t3 inflates it, the item expanding into giant, inflated balloon against the landscape.",
-    #                 "Inflate",
-    #             ],
-
-    #             [
-    #                 "The video begins with an item. A hydraulic press positioned above slowly descends towards the item. Upon contact, the hydraulic press c5us4 crushes it, deforming and flattening the item, causing the item to collapse inward until the item is no longer recognizable.",
-    #                 "Hydraulic",
-    #             ],
-    #         ],
-    #         inputs=[prompt_ui, camera_lora_ui],
-    #         label="Example",
-    #         cache_examples=False,
-    #     )
     camera_lora_ui.change(
         fn=lambda x: x,
         inputs=camera_lora_ui,
@@ -1558,35 +1603,9 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
         outputs=[output_video]
     )
 
-
-
-    timestep_prompt = """Style: Realistic live-action, cinematic, shallow depth of field, 24 fps, natural and dramatic lighting
-    
-    Environment: Interior of a space station module or realistic mock-up, metal panels, blinking lights, Earth visible through a large window
-    
-    Character:
-    
-    Woman: mid-30s, athletic build, wearing authentic-style futuristic space suit (real materials, fabric details, visible patches); calm, confident, precise movements; hair tucked or braided; expressive eyes visible through visor, reflecting focus and awe
-    
-    Timestamps & action sequence:
-    
-    0:00–0:05 — Close-up on her face through visor; soft reflections of Earth and panels in her eyes; she adjusts her gloves and glances around, calm and focused.
-    
-    0:05–0:10 — Medium shot; she moves to the large window, gazes out as the sun begins to rise over Earth’s horizon; her expression shifts slightly, squinting at the bright sunlight.
-    
-    0:10–0:15 — Close-up on her face; she squints, shading her eyes with a gloved hand, mutters with dry humor: “Damn thing is blinding.” Camera captures Earth glowing in the background with cinematic lens flare across the window edge.
-    
-    Audio:
-    
-    Woman: calm, soft-spoken, slight dry humor, low tone
-    
-    Environment: soft hum of space station, faint beeps from panels
-    
-    Music: subtle cinematic synth or ambient pad, futuristic and minimal, emphasizing awe and solitude"""
-
+    # Add example
     gr.Examples(
         examples=[
-
             [
                 "supergirl-2.png",
                 "A fuzzy puppet superhero character resembling a female puppet with blonde hair and a blue superhero suit sleeping in bed and just waking up, she gradually gets up, rubbing her eyes and looking at her dog that just popped on the bed. 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",
@@ -1594,79 +1613,39 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                 "16:9",
                 "supergirl.m4a"
             ],
-
-        ],
-        fn=generate_video_example_s2v,
-        inputs=[input_image, prompt_ui, camera_lora_ui, radioanimated_resolution, audio_input],
-        outputs = [output_video],
-        label="S2V Example",
-        cache_examples=True,
-    )
-    
-    gr.Examples(
-        examples=[
-
-            [
-                timestep_prompt,
-                 "No LoRA",
-                "16:9",
-            ],
-
-        ],
-        fn=generate_video_example_t2v,
-        inputs=[prompt_ui, camera_lora_ui, radioanimated_resolution],
-        outputs = [output_video],
-        label="T2V Example",
-        cache_examples=True,
-    )
-    
-
-    # Add example
-    gr.Examples(
-        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",
-                "Detailer",
+                "No LoRA",
                 "16:9",
+                None,
             ],
             [
                 "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.",
                 "No LoRA",
                 "16:9",
+                None,
             ],
             [
                 "wednesday.png",
                 "A cinematic dolly out 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.",
                  "Zoom Out",
                 "16:9",
+                None,
             ],
             [
                 "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.",
                 "Static",
                 "1:1",
+                None,
             ],
-            # [
-            #     "astronaut.png",
-            #     "The video opens on object. A knife, held by a hand, is coming into frame and hovering over the object. The knife then begins cutting into the object to c4k3 cakeify them. As the knife slices the object open, the insides of the object are revealed to be cakes with chocolate layers. The knife cuts through and the contents of object are revealed.",
-            #     "Cakify",
-            # ],
-            # [
-            #     "astronaut.png",
-            #     "The video showcases an item. The camera zooms out. Then infl4t3 inflates it, the item expanding into giant, inflated balloon against the landscape.",
-            #     "Inflate",
-            # ],
-            # [
-            #     "astronaut.png",
-            #     "The video begins with an item. A hydraulic press positioned above slowly descends towards the item. Upon contact, the hydraulic press c5us4 crushes it, deforming and flattening the item, causing the item to collapse inward until the item is no longer recognizable.",
-            #     "Hydraulic",
-            # ],
+
             
         ],
         fn=generate_video_example,
-        inputs=[input_image, prompt_ui, camera_lora_ui, radioanimated_resolution],
+        inputs=[input_image, prompt_ui, camera_lora_ui, radioanimated_resolution, audio_input],
         outputs = [output_video],
         label="I2V Examples",
         cache_examples=True,