Update app.py

app.py

@@ -34,8 +34,6 @@ def _coerce_audio_path(audio_path: Any) -> str:
 
     # pathlib.Path etc.
     if not isinstance(audio_path, (str, bytes, os.PathLike)):
-        # Allow None
-        if audio_path is None: return None
         raise TypeError(f"audio_path must be a path-like, got {type(audio_path)}: {audio_path}")
 
     return os.fspath(audio_path)
@@ -91,9 +89,6 @@ def match_audio_to_duration(
     Load audio, resample, (optionally) mono, then trim/pad to exactly target_seconds.
     Returns: (waveform[T] or [1,T], sr)
     """
-    if audio_path is None:
-        return None, None
-        
     audio_path = _coerce_audio_path(audio_path)
 
     wav, sr = torchaudio.load(audio_path)  # [C, T] float32 CPU
@@ -552,6 +547,690 @@ print("Pipeline fully loaded and ready!")
 print("=" * 80)
 
 
+####################################################################################################
+### PART 12: Custom Component - RadioAnimated
+####################################################################################################
+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]
+
+        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="{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" 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'));
+            const labels = Array.from(element.querySelectorAll('.ra-label'));
+
+            if (!inputs.length || !labels.length) return;
+
+            const choices = inputs.map(i => i.value);
+            const PAD = 6; // must match .ra-inner padding and .ra-highlight top/left
+
+            let currentIdx = 0;
+
+            function setHighlightByIndex(idx) {
+                currentIdx = idx;
+
+                const lbl = labels[idx];
+                if (!lbl) return;
+
+                const innerRect = inner.getBoundingClientRect();
+                const lblRect = lbl.getBoundingClientRect();
+
+                // width matches the label exactly
+                highlight.style.width = `${lblRect.width}px`;
+
+                // highlight has left: 6px, so subtract PAD to align
+                const x = (lblRect.left - innerRect.left - PAD);
+                highlight.style.transform = `translateX(${x}px)`;
+            }
+
+            function setCheckedByValue(val, shouldTrigger=false) {
+                const idx = Math.max(0, choices.indexOf(val));
+                inputs.forEach((inp, i) => { inp.checked = (i === idx); });
+
+                // Wait a frame in case fonts/layout settle (prevents rare drift)
+                requestAnimationFrame(() => setHighlightByIndex(idx));
+
+                props.value = choices[idx];
+                if (shouldTrigger) trigger('change', props.value);
+            }
+
+            // Init
+            setCheckedByValue(props.value ?? choices[0], false);
+
+            // Input handlers
+            inputs.forEach((inp) => {
+                inp.addEventListener('change', () => setCheckedByValue(inp.value, true));
+            });
+
+            // Recalc on resize (important in Gradio layouts)
+            window.addEventListener('resize', () => setHighlightByIndex(currentIdx));
+
+            // sync from Python (Examples / backend updates)
+            let last = props.value;
+            const syncFromProps = () => {
+              if (props.value !== last) {
+                last = props.value;
+                setCheckedByValue(last, false);
+              }
+              requestAnimationFrame(syncFromProps);
+            };
+            requestAnimationFrame(syncFromProps);
+
+        })();
+
+        """
+
+        super().__init__(
+            value=value,
+            html_template=html_template,
+            js_on_load=js_on_load,
+            **kwargs
+        )
+
+
+####################################################################################################
+### PART 13: Custom Component - PromptBox
+####################################################################################################
+class PromptBox(gr.HTML):
+    """
+    Prompt textarea with an internal footer slot (.ds-footer) where we can inject dropdowns.
+    """
+    def __init__(self, value="", placeholder="Describe what you want...", **kwargs):
+        uid = uuid.uuid4().hex[:8]
+
+        html_template = f"""
+        <div class="ds-card" data-ds="{uid}">
+          <div class="ds-top">
+            <textarea class="ds-textarea" rows="3" placeholder="{placeholder}"></textarea>
+
+            <!-- footer slot -->
+            <div class="ds-footer" aria-label="prompt-footer"></div>
+          </div>
+        </div>
+        """
+
+        js_on_load = r"""
+        (() => {
+          const textarea = element.querySelector(".ds-textarea");
+          if (!textarea) return;
+        
+          const autosize = () => {
+            textarea.style.height = "0px";
+            textarea.style.height = Math.min(textarea.scrollHeight, 240) + "px";
+          };
+        
+          const setValue = (v, triggerChange=false) => {
+            const val = (v ?? "");
+            if (textarea.value !== val) textarea.value = val;
+            autosize();
+            props.value = textarea.value;
+            if (triggerChange) trigger("change", props.value);
+          };
+        
+          setValue(props.value, false);
+        
+          textarea.addEventListener("input", () => {
+            autosize();
+            props.value = textarea.value;
+            trigger("change", props.value);
+          });
+        
+          // ✅ Focus-on-load (robust)
+          const shouldAutoFocus = () => {
+            // don’t steal focus if user already clicked/typed somewhere
+            const ae = document.activeElement;
+            if (ae && ae !== document.body && ae !== document.documentElement) return false;
+            // don’t auto-focus on small screens (optional; avoids mobile keyboard pop)
+            if (window.matchMedia && window.matchMedia("(max-width: 768px)").matches) return false;
+            return true;
+          };
+        
+          const focusWithRetry = (tries = 30) => {
+            if (!shouldAutoFocus()) return;
+            // only focus if still not focused
+            if (document.activeElement !== textarea) textarea.focus({ preventScroll: true });
+            if (document.activeElement === textarea) return;
+            if (tries > 0) requestAnimationFrame(() => focusWithRetry(tries - 1));
+          };
+        
+          // wait a tick so Gradio/layout settles
+          requestAnimationFrame(() => focusWithRetry());
+        
+          // keep your sync loop
+          let last = props.value;
+          const syncFromProps = () => {
+            if (props.value !== last) {
+              last = props.value;
+              setValue(last, false);
+            }
+            requestAnimationFrame(syncFromProps);
+          };
+          requestAnimationFrame(syncFromProps);
+        })();
+
+        """
+
+        super().__init__(value=value, html_template=html_template, js_on_load=js_on_load, **kwargs)
+
+
+####################################################################################################
+### PART 14: Custom Component - CameraDropdown
+####################################################################################################
+class CameraDropdown(gr.HTML):
+    """
+    Custom dropdown (More-style) with optional icons per item.
+    Outputs: selected option string, e.g. "16:9"
+    """
+    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]
+
+        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-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>
+            <div class="cd-items">
+              {items_html}
+            </div>
+          </div>
+        </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 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]  : "";
+
+
+          function closeMenu() {
+            menu.classList.remove("open");
+            trigger.setAttribute("aria-expanded", "false");
+            menu.setAttribute("aria-hidden", "true");
+          }
+
+          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;
+
+            // 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";
+            }
+
+
+            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();
+          });
+
+          document.addEventListener("pointerdown", (e) => {
+            if (!wrap.contains(e.target)) closeMenu();
+          }, true);
+
+          document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape") closeMenu();
+          });
+
+          wrap.addEventListener("focusout", (e) => {
+            if (!wrap.contains(e.relatedTarget)) closeMenu();
+          });
+
+          items.forEach((btn) => {
+            btn.addEventListener("pointerdown", (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              closeMenu();
+              setValue(btn.dataset.value, true);
+            });
+          });
+
+          // init
+          setValue((props.value ?? "None"), false);
+
+          // sync from Python
+          let last = props.value;
+          const syncFromProps = () => {
+            if (props.value !== last) {
+              last = props.value;
+              setValue(last, false);
+            }
+            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,
+            js_on_load=js_on_load,
+            **kwargs
+        )
+
+
+####################################################################################################
+### PART 15: Custom Component - PresetGallery
+####################################################################################################
+class PresetGallery(gr.HTML):
+    """
+    Clickable image presets -> outputs selected index (int as string, then cast in python)
+    """
+    def __init__(self, items, title="Click an Example", **kwargs):
+        """
+        items: list[dict] with keys:
+          - thumb: str (path to image file, e.g. "supergirl.png")
+          - label: str (optional)
+        """
+        uid = uuid.uuid4().hex[:8]
+
+        cards_html = []
+        for i, it in enumerate(items):
+            thumb = it["thumb"]
+            label = it.get("label", "")
+            cards_html.append(f"""
+              <button type="button" class="pg-card" data-idx="{i}" aria-label="{label}">
+                <img class="pg-img" src="gradio_api/file={thumb}" alt="{label}">
+              </button>
+            """)
+
+        html_template = f"""
+        <div class="pg-wrap" data-pg="{uid}">
+          <div class="pg-title">
+            <div class="pg-h1">{title}</div>
+          </div>
+          <div class="pg-grid">
+            {''.join(cards_html)}
+          </div>
+        </div>
+        """
+
+        # --- JAVASCRIPT LOGIC UPDATED ---
+        # Removed "pointerenter" and "pointerleave" events.
+        # All logic is now inside "pointerdown" (click event).
+        js_on_load = r"""
+        (() => {
+          const wrap = element.querySelector(".pg-wrap");
+          const cards = Array.from(element.querySelectorAll(".pg-card"));
+          if (!wrap || !cards.length) return;
+        
+          function setDim(activeIdx) {
+            cards.forEach((c, i) => {
+              // Dim cards that are not the active one.
+              c.dataset.dim = (activeIdx !== null && i !== activeIdx) ? "true" : "false";
+              // Set the active state for the clicked card.
+              c.dataset.active = (i === activeIdx) ? "true" : "false";
+            });
+          }
+        
+          let lastSent = null;
+          let lock = false;
+        
+          cards.forEach((card) => {
+            // REMOVED: "pointerenter" event listener. No action on hover.
+            // REMOVED: "pointerleave" event listener. No action on hover.
+        
+            // Use pointerdown (click/tap) for all actions.
+            card.addEventListener("pointerdown", (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+        
+              if (lock) return;
+              lock = true;
+              setTimeout(() => (lock = false), 250);
+        
+              const idxNumber = Number(card.dataset.idx);
+              const idxString = String(idxNumber);
+              
+              // 1. Update visual state immediately on click.
+              setDim(idxNumber);
+        
+              // 2. Only update Python backend if the value has actually changed.
+              if (idxString === lastSent) return;
+              lastSent = idxString;
+        
+              // ✅ Set props.value to send data to Python.
+              props.value = idxString;
+            }, { passive: false });
+          });
+        
+          // Initially, no card is selected.
+          setDim(null);
+        })();
+        """
+
+
+        super().__init__(value="", html_template=html_template, js_on_load=js_on_load, **kwargs)
+
+
+####################################################################################################
+### PART 16: Custom Component - AudioDropUpload
+####################################################################################################
+class AudioDropUpload(gr.HTML):
+    """
+    Custom audio drop/click UI that proxies file into a hidden gr.Audio component.
+    IMPORTANT:
+    - Pass target_audio_elem_id = elem_id of your hidden gr.Audio.
+    - The hidden gr.Audio must be type="filepath" (or whatever you need).
+    """
+    def __init__(self, target_audio_elem_id: str, value=None, **kwargs):
+        uid = uuid.uuid4().hex[:8]
+
+        html_template = f"""
+        <div class="aud-wrap" data-aud="{uid}">
+          <div class="aud-drop" role="button" tabindex="0" aria-label="بارگذاری صدا">
+            <div><strong>(اختیاری) فایل صوتی را اینجا بکشید و رها کنید</strong></div>
+            <div class="aud-hint">…یا برای انتخاب کلیک کنید</div>
+          </div>
+          <div class="aud-row" aria-live="polite">
+            <audio class="aud-player" controls></audio>
+            <button class="aud-remove" type="button" aria-label="حذف صدا">
+              <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <path d="M18 6L6 18M6 6l12 12"
+                      stroke="currentColor"
+                      stroke-width="2.25"
+                      stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+          <div class="aud-filelabel"></div>
+        </div>
+        """
+
+        # JS:
+        # - finds the hidden gr.Audio upload <input type=file> inside the component with elem_id=target_audio_elem_id
+        # - sets the selected file onto it (DataTransfer) and dispatches change
+        js_on_load = """
+        (() => {{
+          // Helper: access Gradio shadow DOM safely
+          function grRoot() {{
+            const ga = document.querySelector("gradio-app");
+            return (ga && ga.shadowRoot) ? ga.shadowRoot : document;
+          }}
+          const root = grRoot();
+          const wrap = element.querySelector(".aud-wrap");
+          const drop = element.querySelector(".aud-drop");
+          const row  = element.querySelector(".aud-row");
+          const player = element.querySelector(".aud-player");
+          const removeBtn = element.querySelector(".aud-remove");
+          const label = element.querySelector(".aud-filelabel");
+          const TARGET_ID = "__TARGET_ID__";
+          let currentUrl = null;
+          function findHiddenAudioFileInput() {{
+            const host = root.querySelector("#" + CSS.escape(TARGET_ID));
+            if (!host) return null;
+            // Gradio's Audio component contains an <input type=file> for upload.
+            // This selector works in most Gradio 3/4 themes.
+            const inp = host.querySelector('input[type="file"]');
+            return inp;
+          }}
+          function showDrop() {{
+            drop.style.display = "";
+            row.style.display = "none";
+            label.style.display = "none";
+            label.textContent = "";
+          }}
+          function showPlayer(filename) {{
+            drop.style.display = "none";
+            row.style.display = "flex";
+            if (filename) {{
+              label.textContent = "فایل بارگذاری شده: " + filename;
+              label.style.display = "block";
+            }}
+          }}
+          function clearPreview() {{
+            player.pause();
+            player.removeAttribute("src");
+            player.load();
+            if (currentUrl) {{
+              URL.revokeObjectURL(currentUrl);
+              currentUrl = null;
+            }}
+          }}
+          function clearHiddenGradioAudio() {{
+            const fileInput = findHiddenAudioFileInput();
+            if (!fileInput) return;
+            // Clear file input (works by replacing its files with empty DataTransfer)
+            fileInput.value = "";
+            const dt = new DataTransfer();
+            fileInput.files = dt.files;
+            fileInput.dispatchEvent(new Event("input",  {{ bubbles: true }}));
+            fileInput.dispatchEvent(new Event("change", {{ bubbles: true }}));
+          }}
+          function clearAll() {
+            clearPreview();
+          
+            // Attempt DOM clear (still useful)
+            clearHiddenGradioAudio();
+          
+            // Tell Gradio/Python explicitly to clear backend state
+            props.value = "__CLEAR__";
+            trigger("change", props.value);
+          
+            showDrop();
+          }
+
+          function loadFileToPreview(file) {{
+            if (!file) return;
+            if (!file.type || !file.type.startsWith("audio/")) {{
+              alert("لطفا یک فایل صوتی انتخاب کنید.");
+              return;
+            }}
+            clearPreview();
+            currentUrl = URL.createObjectURL(file);
+            player.src = currentUrl;
+            showPlayer(file.name);
+
+          }}
+          function pushFileIntoHiddenGradioAudio(file) {
+            const fileInput = findHiddenAudioFileInput();
+            if (!fileInput) {
+              console.warn("Could not find hidden gr.File input. Check elem_id:", TARGET_ID);
+              return;
+            }
+          
+            // Hard reset (important for re-selecting same file)
+            fileInput.value = "";
+          
+            const dt = new DataTransfer();
+            dt.items.add(file);
+            fileInput.files = dt.files;
+          
+            // Trigger Gradio listeners
+            fileInput.dispatchEvent(new Event("input",  {{ bubbles: true }}));
+            fileInput.dispatchEvent(new Event("change", {{ bubbles: true }}));
+          }
+
+          function handleFile(file) {{
+            loadFileToPreview(file);
+            pushFileIntoHiddenGradioAudio(file);
+          }}
+          // Click-to-browse uses a *local* ephemeral input (not Gradio’s),
+          // then we forward to hidden gr.Audio.
+          const localPicker = document.createElement("input");
+          localPicker.type = "file";
+          localPicker.accept = "audio/*";
+          localPicker.style.display = "none";
+          wrap.appendChild(localPicker);
+          localPicker.addEventListener("change", () => {{
+            const f = localPicker.files && localPicker.files[0];
+            if (f) handleFile(f);
+            localPicker.value = "";
+          }});
+          drop.addEventListener("click", () => localPicker.click());
+          drop.addEventListener("keydown", (e) => {{
+            if (e.key === "Enter" || e.key === " ") {{
+              e.preventDefault();
+              localPicker.click();
+            }}
+          }});
+          removeBtn.addEventListener("click", clearAll);
+          // Drag & drop
+          ["dragenter","dragover","dragleave","drop"].forEach(evt => {{
+            drop.addEventListener(evt, (e) => {{
+              e.preventDefault();
+              e.stopPropagation();
+            }});
+          }});
+          drop.addEventListener("dragover", () => drop.classList.add("dragover"));
+          drop.addEventListener("dragleave", () => drop.classList.remove("dragover"));
+          drop.addEventListener("drop", (e) => {{
+            drop.classList.remove("dragover");
+            const f = e.dataTransfer.files && e.dataTransfer.files[0];
+            if (f) handleFile(f);
+          }});
+          // init
+          showDrop();
+
+          function setPreviewFromPath(path) {
+            if (path === "__CLEAR__") path = null;
+            
+            if (!path) {
+              clearPreview();
+              showDrop();
+              return;
+            }
+          
+            // If path already looks like a URL, use it directly
+            // otherwise serve it through Gradio's file route.
+            let url = path;
+            if (!/^https?:\/\//.test(path) && !path.startsWith("gradio_api/file=") && !path.startsWith("/file=")) {
+              url = "gradio_api/file=" + path;
+            }
+          
+            clearPreview();
+            player.src = url;
+            showPlayer(path.split("/").pop());
+          }
+          
+          // ---- sync from Python (Examples / backend updates) ----
+          let last = props.value;
+          const syncFromProps = () => {
+            const v = props.value;
+          
+            if (v !== last) {
+              last = v;
+              if (!v || v === "__CLEAR__") setPreviewFromPath(null);
+              else setPreviewFromPath(String(v));
+            }
+            requestAnimationFrame(syncFromProps);
+          };
+          requestAnimationFrame(syncFromProps);
+
+
+        }})();
+        """
+        js_on_load = js_on_load.replace("__TARGET_ID__", target_audio_elem_id)
+        
+        super().__init__(
+            value=value,
+            html_template=html_template,
+            js_on_load=js_on_load,
+            **kwargs
+        )
+
+
 ####################################################################################################
 ### PART 17: Wrapper Functions (Resolution, Duration, Examples)
 ####################################################################################################
@@ -642,129 +1321,118 @@ def generate_video(
     """
     Generate a short cinematic video from a text prompt and optional input image using the LTX-2 distilled pipeline.
     """
-    
-    # Explicitly catch and re-raise quota errors if they happen inside execution
-    # though usually spaces.GPU catches them before.
-    try:
 
-        # Removed the 15s warning check since 15s option is removed from UI
+    # Removed the 15s warning check since 15s option is removed from UI
 
-        if audio_path is None:
-            print(f'generating with duration:{duration} and LoRA:{camera_lora} in {width}x{height}')
-        else:
-            print(f'generating with duration:{duration} and audio in {width}x{height}')
+    if audio_path is None:
+        print(f'generating with duration:{duration} and LoRA:{camera_lora} in {width}x{height}')
+    else:
+        print(f'generating with duration:{duration} and audio in {width}x{height}')
+
+    # Randomize seed if checkbox is enabled
+    current_seed = random.randint(0, MAX_SEED) if randomize_seed else int(seed)
+
+    # Calculate num_frames from duration (using fixed 24 fps)
+    frame_rate = 24.0
+    num_frames = int(duration * frame_rate) + 1  # +1 to ensure we meet the duration
+    video_seconds = int(duration)
 
-        # Randomize seed if checkbox is enabled
-        current_seed = random.randint(0, MAX_SEED) if randomize_seed else int(seed)
+    with tempfile.NamedTemporaryFile(suffix=".mp4", delete=False) as tmpfile:
+        output_path = tmpfile.name
 
-        # Calculate num_frames from duration (using fixed 24 fps)
-        frame_rate = 24.0
-        num_frames = int(duration * frame_rate) + 1  # +1 to ensure we meet the duration
-        video_seconds = int(duration)
 
-        with tempfile.NamedTemporaryFile(suffix=".mp4", delete=False) as tmpfile:
-            output_path = tmpfile.name
+    images = []
+    videos = []
 
+    # Removed Motion Control block
 
+    if first_frame is not None:
         images = []
-        videos = []
-
-        # Removed Motion Control block
-
-        if first_frame is not None:
-            images = []
-            images.append((first_frame, 0, 1.0))
-
-        # Updated logic for Persian string
-        if generation_mode == "تکمیل فریم‌های میانی":
-          if end_frame is not None:
-              end_idx = max(0, num_frames - 1)
-              images.append((end_frame, end_idx, 0.5))
-
-        embeddings, final_prompt, status = encode_prompt(
-            prompt=prompt,
-            enhance_prompt=enhance_prompt,
-            input_image=first_frame,
-            seed=current_seed,
-            negative_prompt="",
-        )
-        
-        video_context = embeddings["video_context"].to("cuda", non_blocking=True)
-        audio_context = embeddings["audio_context"].to("cuda", non_blocking=True)
-        print("✓ Embeddings loaded successfully")
+        images.append((first_frame, 0, 1.0))
+
+    # Updated logic for Persian string
+    if generation_mode == "تکمیل فریم‌های میانی":
+      if end_frame is not None:
+          end_idx = max(0, num_frames - 1)
+          images.append((end_frame, end_idx, 0.5))
+
+    embeddings, final_prompt, status = encode_prompt(
+        prompt=prompt,
+        enhance_prompt=enhance_prompt,
+        input_image=first_frame,
+        seed=current_seed,
+        negative_prompt="",
+    )
+    
+    video_context = embeddings["video_context"].to("cuda", non_blocking=True)
+    audio_context = embeddings["audio_context"].to("cuda", non_blocking=True)
+    print("✓ Embeddings loaded successfully")
 
 
-        # free prompt enhancer / encoder temps ASAP
-        del embeddings, final_prompt, status
-        torch.cuda.empty_cache()
+    # free prompt enhancer / encoder temps ASAP
+    del embeddings, final_prompt, status
+    torch.cuda.empty_cache()
 
-        # ✅ if user provided audio, use a neutral audio_context
-        n_audio_context = None
+    # ✅ if user provided audio, use a neutral audio_context
+    n_audio_context = None
+
+    if audio_path is not None:
+        with torch.inference_mode():
+            _, n_audio_context = encode_text_simple(text_encoder, "")  # returns tensors on GPU already
+            del audio_context
+            audio_context = n_audio_context
 
-        if audio_path is not None:
-            with torch.inference_mode():
-                _, n_audio_context = encode_text_simple(text_encoder, "")  # returns tensors on GPU already
-                del audio_context
-                audio_context = n_audio_context
+        if len(videos) == 0:
+            camera_lora = "Static"
 
-            if len(videos) == 0:
-                camera_lora = "Static"
+    torch.cuda.empty_cache()
 
-        torch.cuda.empty_cache()
+    # Map dropdown name -> adapter index
+    name_to_idx = {name: idx for name, idx in RUNTIME_LORA_CHOICES}
+    selected_idx = name_to_idx.get(camera_lora, -1)
 
-        # Map dropdown name -> adapter index
-        name_to_idx = {name: idx for name, idx in RUNTIME_LORA_CHOICES}
-        selected_idx = name_to_idx.get(camera_lora, -1)
+    enable_only_lora(pipeline._transformer, selected_idx)
+    torch.cuda.empty_cache()
 
-        enable_only_lora(pipeline._transformer, selected_idx)
-        torch.cuda.empty_cache()
+    # True video duration in seconds based on your rounding
+    video_seconds = (num_frames - 1) / frame_rate
 
-        # True video duration in seconds based on your rounding
-        video_seconds = (num_frames - 1) / frame_rate
+    if audio_path is not None:
+        input_waveform, input_waveform_sample_rate = match_audio_to_duration(
+            audio_path=audio_path,
+            target_seconds=video_seconds,
+            target_sr=48000,     # pick what your model expects; 48k is common for AV models
+            to_mono=True,        # set False if your model wants stereo
+            pad_mode="silence",  # or "repeat" if you prefer looping over silence
+            device="cuda",
+        )
+    else:
+        input_waveform = None
+        input_waveform_sample_rate = None
 
-        if audio_path is not None:
-            input_waveform, input_waveform_sample_rate = match_audio_to_duration(
-                audio_path=audio_path,
-                target_seconds=video_seconds,
-                target_sr=48000,     # pick what your model expects; 48k is common for AV models
-                to_mono=True,        # set False if your model wants stereo
-                pad_mode="silence",  # or "repeat" if you prefer looping over silence
-                device="cuda",
+    with timer(f'generating with LoRA:{camera_lora} in {width}x{height}'):
+        with torch.inference_mode():
+            pipeline(
+                prompt=prompt,
+                output_path=str(output_path),
+                seed=current_seed,
+                height=height,
+                width=width,
+                num_frames=num_frames,
+                frame_rate=frame_rate,
+                images=images,
+                video_conditioning=videos,
+                tiling_config=TilingConfig.default(),
+                video_context=video_context,
+                audio_context=audio_context,
+                input_waveform=input_waveform,
+                input_waveform_sample_rate=input_waveform_sample_rate, 
             )
-        else:
-            input_waveform = None
-            input_waveform_sample_rate = None
-
-        with timer(f'generating with LoRA:{camera_lora} in {width}x{height}'):
-            with torch.inference_mode():
-                pipeline(
-                    prompt=prompt,
-                    output_path=str(output_path),
-                    seed=current_seed,
-                    height=height,
-                    width=width,
-                    num_frames=num_frames,
-                    frame_rate=frame_rate,
-                    images=images,
-                    video_conditioning=videos,
-                    tiling_config=TilingConfig.default(),
-                    video_context=video_context,
-                    audio_context=audio_context,
-                    input_waveform=input_waveform,
-                    input_waveform_sample_rate=input_waveform_sample_rate, 
-                )
-        del video_context, audio_context
-        torch.cuda.empty_cache()
-        print("successful generation")
+    del video_context, audio_context
+    torch.cuda.empty_cache()
+    print("successful generation")
 
-        return str(output_path)
-    
-    except Exception as e:
-        error_str = str(e)
-        if "quota" in error_str.lower() or "exceeded" in error_str.lower():
-             raise e 
-        print(f"Generation Error: {e}")
-        raise e
+    return str(output_path)
 
 
 def apply_resolution(resolution: str):
@@ -779,11 +1447,7 @@ def apply_resolution(resolution: str):
     return int(w), int(h)
 
 def apply_duration(duration: str):
-    # Standard format: "5s"
-    try:
-        duration_s = int(str(duration).replace("s", ""))
-    except:
-        duration_s = 5
+    duration_s = int(duration[:-1])
     return duration_s
 
 def on_mode_change(selected: str):
@@ -798,10 +1462,51 @@ def on_mode_change(selected: str):
 ### PART 19: CSS Styles
 ####################################################################################################
 css = """
+
+    /* Make the row behave nicely */
+    #controls-row {
+    display: none !important;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: nowrap; /* or wrap if you prefer on small screens */
+    }
+
+    /* Stop these components from stretching */
+    #controls-row > * {
+    flex: 0 0 auto !important;
+    width: auto !important;
+    min-width: 0 !important;
+    }
+
+    
     #col-container {
         margin: 0 auto;
         max-width: 1600px;
     }
+    #modal-container {
+    width: 100vw;            /* Take full viewport width */
+    height: 100vh;           /* Take full viewport height (optional) */
+    display: flex;           
+    justify-content: center; /* Center content horizontally */
+    align-items: center;     /* Center content vertically if desired */
+    }
+    #modal-content {
+    width: 100%;
+    max-width: 700px;         /* Limit content width */
+    margin: 0 auto;
+    border-radius: 8px;
+    padding: 1.5rem;
+    }
+    #step-column {
+        padding: 10px;
+        border-radius: 8px;
+        box-shadow: var(--card-shadow);
+        margin: 10px;
+    }
+    #col-showcase {
+        margin: 0 auto;
+        max-width: 1100px;
+    }
     .button-gradient {
         background: linear-gradient(45deg, rgb(255, 65, 108), rgb(255, 75, 43), rgb(255, 155, 0), rgb(255, 65, 108)) 0% 0% / 400% 400%;
         border: none;
@@ -815,224 +1520,911 @@ css = """
         animation: 2s linear 0s infinite normal none running gradientAnimation;
         box-shadow: rgba(255, 65, 108, 0.6) 0px 4px 10px;
     }
-    @keyframes gradientAnimation {
-        0% { background-position: 0% 50%; }
-        50% { background-position: 100% 50%; }
-        100% { background-position: 0% 50%; }
+    .toggle-container {
+    display: inline-flex;
+    background-color: #ffd6ff;  /* light pink background */
+    border-radius: 9999px;
+    padding: 4px;
+    position: relative;
+    width: fit-content;
+    font-family: sans-serif;
+    }
+    .toggle-container input[type="radio"] {
+    display: none;
+    }
+    .toggle-container label {
+    position: relative;
+    z-index: 2;
+    flex: 1;
+    text-align: center;
+    font-weight: 700;
+    color: #4b2ab5; /* dark purple text for unselected */
+    padding: 6px 22px;
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: color 0.25s ease;
+    }
+    /* Moving highlight */
+    .toggle-highlight {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: calc(50% - 4px);
+    height: calc(100% - 8px);
+    background-color: #4b2ab5; /* dark purple background */
+    border-radius: 9999px;
+    transition: transform 0.25s ease;
+    z-index: 1;
+    }
+    /* When "True" is checked */
+    #true:checked ~ label[for="true"] {
+    color: #ffd6ff; /* light pink text */
+    }
+    /* When "False" is checked */
+    #false:checked ~ label[for="false"] {
+    color: #ffd6ff; /* light pink text */
+    }
+    /* Move highlight to right side when False is checked */
+    #false:checked ~ .toggle-highlight {
+    transform: translateX(100%);
+    }
+
+    /* Center items inside that row */
+    #mode-row{
+      justify-content: center !important;
+      align-items: center !important;
+    }
+    
+    /* Center the mode row contents */
+    #mode-row {
+      display: flex !important;
+      justify-content: center !important;
+      align-items: center !important;
+      width: 100% !important;
+    }
+    
+    /* Stop Gradio from making children stretch */
+    #mode-row > * {
+      flex: 0 0 auto !important;
+      width: auto !important;
+      min-width: 0 !important;
+    }
+    
+    /* Specifically ensure the HTML component wrapper doesn't take full width */
+    #mode-row .gr-html,
+    #mode-row .gradio-html,
+    #mode-row .prose,
+    #mode-row .block {
+      width: auto !important;
+      flex: 0 0 auto !important;
+      display: inline-block !important;
+    }
+    
+    /* Center the pill itself */
+    #radioanimated_mode {
+      display: inline-flex !important;
+      justify-content: center !important;
+      width: auto !important;
+    }
+
+    """
+
+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{
+      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);
+    }
+    """
+
+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{
+      width: 100%;
+      max-width: 720px;
+      margin-top: 3px;
+    }
+    
+    .ds-textarea{
+      width: 100%;
+      box-sizing: border-box;
+      background: #2b2b2b;
+      color: rgba(255,255,255,0.9);
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 14px;
+      padding: 14px 16px;
+      outline: none;
+      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
+      font-size: 15px;
+      line-height: 1.35;
+      resize: none;
+      min-height: 210px;
+      max-height: 210px;
+      overflow-y: auto;
+    
+      /* IMPORTANT: space for the footer controls */
+      padding-bottom: 72px;
+    }
+
+
+    .ds-card{
+      width: 100%;
+      max-width: 720px;
+      margin: 0 auto;
+    }
+    .ds-top{
+      position: relative;
+    }
+    
+    /* Make room for footer inside textarea */
+    .ds-textarea{
+      padding-bottom: 72px;
+    }
+    
+    /* Footer positioning */
+    .ds-footer{
+      position: absolute;
+      right: 12px;
+      bottom: 10px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: flex-end;
+      z-index: 3;
+    }
+    
+    /* Smaller pill buttons inside footer */
+    .ds-footer .cd-trigger{
+      min-height: 32px;
+      padding: 6px 10px;
+      font-size: 12px;
+      gap: 6px;
+      border-radius: 9999px;
+    }
+    .ds-footer .cd-trigger-icon,
+    .ds-footer .cd-icn{
+      width: 14px;
+      height: 14px;
+    }
+    .ds-footer .cd-trigger-icon svg,
+    .ds-footer .cd-icn svg{
+      width: 14px;
+      height: 14px;
+    }
+    .ds-footer .cd-caret{
+      font-size: 11px;
+    }
+    
+    /* Bottom safe area bar (optional but looks nicer) */
+    .ds-top::after{
+      content: "";
+      position: absolute;
+      left: 1px;
+      right: 1px;
+      bottom: 1px;
+      height: 56px;
+      background: #2b2b2b;
+      border-bottom-left-radius: 13px;
+      border-bottom-right-radius: 13px;
+      pointer-events: none;
+      z-index: 2;
+    }
+
+    """
+
+css += """
+    /* ---- camera dropdown ---- */
+
+    /* 1) Fix overlap: make the Gradio HTML block shrink-to-fit when it contains a CameraDropdown.
+    Gradio uses .gr-html for HTML components in most versions; older themes sometimes use .gradio-html.
+    This keeps your big header HTML unaffected because it doesn't contain .cd-wrap.
+    */
+
+    /* 2) Actual dropdown layout */
+    .cd-wrap{
+    position: relative;
+    display: inline-block;
     }
+
+    /* 3) Match RadioAnimated pill size/feel */
+    .cd-trigger{
+    margin-top: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+
+    border: none;
+
+    box-sizing: border-box;
+    padding: 10px 18px;
+    min-height: 52px;
+    line-height: 1.2;
+
+    border-radius: 9999px;
+    background: #0b0b0b;
+
+    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
+    font-size: 14px;
+
+    /* ✅ match .ra-label exactly */
+    color: rgba(255,255,255,0.7) !important;
+    font-weight: 600 !important;
+
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    }
+
+    /* Ensure inner spans match too */
+    .cd-trigger .cd-trigger-text,
+    .cd-trigger .cd-caret{
+    color: rgba(255,255,255,0.7) !important;
+    }
+
+    /* keep caret styling */
+    .cd-caret{
+    opacity: 0.8;
+    font-weight: 900;
+    }
+
+    /* 4) Ensure menu overlays neighbors and isn't clipped */
+    /* Move dropdown a tiny bit up (closer to the trigger) */
+    .cd-menu{
+      position: absolute;
+      top: calc(100% + 4px);   /* was +10px */
+      left: 0;
     
-    /* Footer Hiding */
-    footer { display: none !important; }
-    .gradio-container footer { display: none !important; }
-    div.footer { display: none !important; }
-    .flagging { display: none !important; }
-    .api-logo, .built-with { display: none !important; }
+      min-width: 240px;
+      background: #2b2b2b;
+      border: 1px solid rgba(255,255,255,0.14);
+      border-radius: 14px;
+      box-shadow: 0 18px 40px rgba(0,0,0,0.35);
+      padding: 10px;
+    
+      opacity: 0;
+      transform: translateY(-6px);
+      pointer-events: none;
+      transition: opacity 160ms ease, transform 160ms ease;
+    
+      z-index: 9999;
+    }
+
+    .cd-title{
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    
+      color: rgba(255,255,255,0.45); /* 👈 muted grey */
+      margin-bottom: 6px;
+      padding: 0 6px;
+      pointer-events: none; /* title is non-interactive */
+    }
     
-    /* Center Title */
-    .title-container { text-align: center; padding: 20px; }
-    .title-text { font-size: 28px; font-weight: bold; margin-bottom: 10px; color: var(--body-text-color); }
-    .subtitle-text { font-size: 18px; color: var(--body-text-color-subdued); margin: 0; }
+        
+    .cd-menu.open{
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+    
+    .cd-items{
+      display: flex;
+      flex-direction: column;
+      gap: 0px; /* tighter, more like a native menu */
+    }
+    
+    /* Items: NO "boxed" buttons by default */
+    .cd-item{
+      width: 100%;
+      text-align: left;
+      border: none;
+      background: transparent;          /* ✅ removes box look */
+      color: rgba(255,255,255,0.92);
+      padding: 8px 34px 8px 12px;     /* right padding leaves room for tick */
+      border-radius: 10px;             /* only matters on hover */
+      cursor: pointer;
+    
+      font-size: 14px;
+      font-weight: 700;
+    
+      position: relative;
+      transition: background 120ms ease;
+    }
+    
+    /* “Box effect” only on hover (not always) */
+    .cd-item:hover{
+      background: rgba(255,255,255,0.08);
+    }
+    
+    /* Tick on the right ONLY on hover */
+    .cd-item::after{
+      content: "✓";
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0;                      /* hidden by default */
+      transition: opacity 120ms ease;
+      color: rgba(255,255,255,0.9);
+      font-weight: 900;
+    }
+    
+    /* show tick ONLY for selected item */
+    .cd-item[data-selected="true"]::after{
+      opacity: 1;
+    }
+    
+    /* keep hover box effect, but no tick change */
+    .cd-item:hover{
+      background: rgba(255,255,255,0.08);
+    }
+
+    
+    /* Kill any old “selected” styling just in case */
+    .cd-item.selected{
+      background: transparent !important;
+      border: none !important;
+    }
+
+
+    """
+
+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;
+}
+
+/* =========================
+   FIX: prompt border + scrollbar bleed
+   ========================= */
+
+/* Put the border + background on the wrapper, not the textarea */
+.ds-top{
+  position: relative;
+  background: #2b2b2b;
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 14px;
+  overflow: hidden; /* ensures the footer bar is clipped to rounded corners */
+}
+
+/* Make textarea "transparent" so wrapper owns the border/background */
+.ds-textarea{
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0 !important; /* wrapper handles radius */
+  outline: none;
+
+  /* keep your spacing */
+  padding: 14px 16px;
+  padding-bottom: 72px; /* room for footer */
+  width: 100%;
+  box-sizing: border-box;
+
+  /* keep scroll behavior */
+  overflow-y: auto;
+
+  /* prevent scrollbar bleed by hiding native scrollbar */
+  scrollbar-width: none;          /* Firefox */
+}
+.ds-textarea::-webkit-scrollbar{  /* Chrome/Safari */
+  width: 0;
+  height: 0;
+}
+
+/* Safe-area bar: now it matches perfectly because it's inside the same bordered wrapper */
+.ds-top::after{
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 56px;
+  background: #2b2b2b;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* Footer above the bar */
+.ds-footer{
+  position: absolute;
+  right: 12px;
+  bottom: 10px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  z-index: 3;
+}
+
+/* Ensure textarea content sits below overlays */
+.ds-textarea{
+  position: relative;
+  z-index: 1;
+}
+
+/* ===== FIX dropdown menu being clipped/behind ===== */
+
+/* Let the dropdown menu escape the prompt wrapper */
+.ds-top{
+  overflow: visible !important;  /* IMPORTANT: do not clip the menu */
+}
+
+/* Keep the rounded "safe area" look without clipping the menu */
+.ds-top::after{
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  border-bottom-left-radius: 14px !important;
+  border-bottom-right-radius: 14px !important;
+}
+
+/* Ensure the footer stays above the safe-area bar */
+.ds-footer{
+  z-index: 20 !important;
+}
+
+/* Make sure the opened menu is above EVERYTHING */
+.ds-footer .cd-menu{
+  z-index: 999999 !important;
+}
+
+/* Sometimes Gradio/columns/cards create stacking contexts;
+   force the whole prompt card above nearby panels */
+.ds-card{
+  position: relative;
+  z-index: 50;
+}
+
+/* --- Fix focus highlight shape (make it match rounded container) --- */
+
+/* Kill any theme focus ring on the textarea itself */
+.ds-textarea:focus,
+.ds-textarea:focus-visible{
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* Optional: if some themes apply it even when not focused */
+.ds-textarea{
+  outline: none !important;
+}
+
+/* Apply the focus ring to the rounded wrapper instead */
+.ds-top:focus-within{
+  border-color: rgba(255,255,255,0.22) !important;
+  box-shadow: 0 0 0 3px rgba(255,255,255,0.06) !important;
+  border-radius: 14px !important;
+}
+
+/* If you see any tiny square corners, ensure the wrapper clips its own shadow properly */
+.ds-top{
+  border-radius: 14px !important;
+}
+
+/* =========================
+   CameraDropdown: force readable menu text in BOTH themes
+   ========================= */
+
+/* Menu surface */
+.cd-menu{
+  background: #2b2b2b !important;
+  border: 1px solid rgba(255,255,255,0.14) !important;
+}
+
+/* Title */
+.cd-title{
+  color: rgba(255,255,255,0.55) !important;
+}
+
+/* Items + all descendants (fixes spans / inherited theme colors) */
+.cd-item,
+.cd-item *{
+  color: rgba(255,255,255,0.92) !important;
+}
+
+/* Hover state */
+.cd-item:hover{
+  background: rgba(255,255,255,0.10) !important;
+}
+
+/* Checkmark */
+.cd-item::after{
+  color: rgba(255,255,255,0.92) !important;
+}
+
+/* (Optional) make sure the trigger stays readable too */
+.cd-trigger,
+.cd-trigger *{
+  color: rgba(255,255,255,0.75) !important;
+}
+
+/* ---- preset gallery ---- */
+.pg-wrap{
+  width: 100%;
+  max-width: 1100px;
+  margin: 18px auto 0 auto;
+}
+.pg-title{
+  text-align: center;
+  margin-bottom: 14px;
+}
+.pg-h1{
+  font-size: 34px;
+  font-weight: 800;
+  line-height: 1.1;
+
+  /* ✅ theme-aware */
+  color: var(--body-text-color);
+}
+.pg-h2{
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--body-text-color-subdued);
+  margin-top: 6px;
+}
+
+.pg-grid{
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 per row */
+  gap: 18px;
+}
+
+.pg-card{
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  transform: translateZ(0);
+}
+
+.pg-img{
+  width: 100%;
+  height: 220px;              /* adjust to match your look */
+  object-fit: cover;
+  display: block;
+  border-radius: 12px;
+  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
+}
+
+/* hover: slight zoom on hovered card */
+.pg-card:hover .pg-img{
+  transform: scale(1.02);
+}
+
+/* dim others while hovering */
+.pg-card[data-dim="true"] .pg-img{
+  opacity: 0.35;
+  filter: saturate(0.9);
+}
+
+/* keep hovered/active crisp */
+.pg-card[data-active="true"] .pg-img{
+  opacity: 1.0;
+  filter: none;
+}
+
+
+"""
+
+
+css += """
+/* ---- AudioDropUpload ---- */
+.aud-wrap{
+  width: 100%;
+  max-width: 720px;
+}
+.aud-drop{
+  border: 2px dashed var(--body-text-color-subdued);
+  border-radius: 16px;
+  padding: 18px;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  color: var(--body-text-color);
+  background: var(--block-background-fill);
+}
+.aud-drop.dragover{
+  border-color: rgba(255,255,255,0.35);
+  background: rgba(255,255,255,0.06);
+}
+.aud-hint{
+  color: var(--body-text-color-subdued);
+  font-size: 0.95rem;
+  margin-top: 6px;
+}
+/* pill row like your other controls */
+.aud-row{
+  display: none;
+  align-items: center;
+  gap: 10px;
+  background: #0b0b0b;
+  border-radius: 9999px;
+  padding: 8px 10px;
+}
+.aud-player{
+  flex: 1;
+  width: 100%;
+  height: 34px;
+  border-radius: 9999px;
+}
+.aud-remove{
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: rgba(255,255,255);
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  border-radius: 9999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
+  opacity: 0.9;
+  flex: 0 0 auto;
+}
+.aud-remove:hover{
+  background: rgba(255,255,255,0.08);
+  color: rgb(255,255,255);
+  opacity: 1;
+}
+.aud-filelabel{
+  margin: 10px 6px 0;
+  color: var(--body-text-color-subdued);
+  font-size: 0.95rem;
+  display: none;
+}
+#audio_input_hidden { display: none !important; }
 """
 
-# --- MODAL CSS Injection ---
+# Hiding Gradio Footer, Branding and Settings
 css += """
-/* Modal CSS */
-:root { --guide-bg: rgba(255, 255, 255, 0.98); --guide-border: rgba(102, 126, 234, 0.2); --guide-text-title: #2d3748; --guide-text-body: #4a5568; --guide-accent: #667eea; --primary-gradient-guide: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --success-gradient-guide: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); --radius-md-guide: 12px; --radius-lg-guide: 16px; --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05); }
-@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
-@keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
-.ip-reset-guide-container { text-align: right; direction: rtl; background: var(--guide-bg); backdrop-filter: blur(10px); padding: 20px; border-radius: var(--radius-lg-guide); box-shadow: var(--shadow-xl); border: 1px solid var(--guide-border); animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; width: 90%; max-width: 420px; max-height: 90vh; overflow-y: auto; position: relative; box-sizing: border-box; font-family: 'Vazirmatn', sans-serif !important; }
-.ip-reset-guide-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary-gradient-guide); }
-.guide-header { display: flex; align-items: center; margin-bottom: 15px; }
-.guide-header-icon { width: 45px; height: 45px; margin-left: 15px; animation: float 3s ease-in-out infinite; flex-shrink: 0; }
-.guide-header h2 { font-size: 1.2rem; color: var(--guide-text-title); font-weight: 700; margin: 0; }
-.guide-header p { color: var(--guide-text-body); font-size: 0.8rem; margin-top: 3px; margin-bottom: 0; }
-.guide-content { font-size: 0.9rem; color: var(--guide-text-body); line-height: 1.6; }
-.info-card { background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: var(--radius-md-guide); padding: 12px; margin: 12px 0; position: relative; overflow: hidden; }
-.info-card p { font-size: 0.85rem; line-height: 1.6; margin: 0; }
-.info-card::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: var(--primary-gradient-guide); }
-.info-card-header { display: flex; align-items: center; margin-bottom: 8px; }
-.info-card-icon { width: 18px; height: 18px; margin-left: 8px; }
-.info-card-title { font-weight: 600; color: var(--guide-text-title); font-size: 0.95rem; }
-.summary-section { margin-top: 12px; padding: 12px; border-radius: var(--radius-md-guide); background: linear-gradient(135deg, #56ab2f15 0%, #a8e06315 100%); border: 1px solid rgba(86, 171, 47, 0.2); position: relative; overflow: hidden; }
-.summary-section::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: var(--success-gradient-guide); }
-.summary-header { display: flex; align-items: center; margin-bottom: 8px; }
-.summary-icon { width: 18px; height: 18px; margin-left: 8px; }
-.summary-title { font-weight: 600; color: #2f5a33; font-size: 0.95rem; }
-.summary-text { color: #2f5a33; font-size: 0.85rem; line-height: 1.6; }
-.video-button-container { text-align: center; margin: 20px 0 15px 0; width: 100%; }
-.elegant-video-button { display: inline-flex !important; align-items: center; justify-content: center; padding: 10px 20px !important; background-color: #fff !important; color: var(--guide-accent) !important; border: 1px solid #e2e8f0 !important; text-decoration: none; border-radius: 50px !important; font-weight: 600 !important; font-size: 0.9rem !important; cursor: pointer !important; font-family: inherit; transition: all 0.3s ease !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; width: auto !important; }
-.elegant-video-button:hover { background: var(--primary-gradient-guide) !important; color: white !important; border-color: transparent !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3) !important; }
-.elegant-video-button-icon { width: 18px; height: 18px; margin-left: 8px; fill: currentColor; }
-.guide-actions { display: flex !important; gap: 12px !important; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0; width: 100% !important; }
-.action-button { padding: 12px 15px !important; border: none !important; border-radius: 12px !important; font-size: 0.95rem !important; font-weight: 600 !important; cursor: pointer !important; flex: 1 !important; transition: all 0.3s ease !important; display: flex !important; align-items: center; justify-content: center; font-family: inherit; height: 48px !important; }
-.action-button-icon { width: 20px; height: 20px; margin-right: 0; margin-left: 8px; }
-.back-button { background: white !important; color: var(--guide-text-body) !important; border: 2px solid #e2e8f0 !important; }
-.back-button:hover { background: #f7fafc !important; border-color: var(--guide-accent) !important; transform: translateY(-2px); }
-.retry-button { background: var(--primary-gradient-guide) !important; color: white !important; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important; }
-.retry-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important; }
+footer {
+    display: none !important;
+}
+.gradio-container footer {
+    display: none !important;
+}
+div.footer {
+    display: none !important;
+}
+.flagging {
+    display: none !important;
+}
+/* Hide the 'Use via API' link if visible */
+.api-logo, .built-with {
+    display: none !important;
+}
 """
 
+
 def apply_example(idx: str):
-    # Standard Gr.Examples handler (returns raw values)
-    # The new Examples component passes the values directly, no need for complex lookup usually
-    # But since we use a custom list, we might just pass the list values
-    pass 
+    idx = int(idx)
+
+    # Read the example row from your list
+    img, prompt_txt, cam, res, mode, vid, aud, end_img = examples_list[idx]
+
+    img_path = img if img else None
+    vid_path = vid if vid else None
+    aud_path = aud if aud else None
+
+    input_image_update = img_path
+    prompt_update = prompt_txt
+    camera_update = cam
+    resolution_update = res
+    mode_update = mode
+    video_update = gr.update(value=vid_path, visible=(mode == "Motion Control"))
+    audio_update = aud_path
+    end_image = end_img
+
+    return (
+        input_image_update,
+        prompt_update,
+        camera_update,
+        resolution_update,
+        mode_update,
+        video_update,
+        audio_update,
+        audio_update,
+        end_image,
+    )
 
-# Since we are using standard gr.Examples, we don't need the complex lookup function
-# Gradio handles mapping automatically if set up right.
 
 ####################################################################################################
 ### PART 20: Gradio UI Layout & Launch
 ####################################################################################################
 
-with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
+# JS Function to handle download request via PostMessage
+js_download_video = """
+async (video) => {
+    if (!video) { 
+        alert("لطفاً ابتدا ویدیو را تولید کنید."); 
+        return; 
+    }
     
-    # --- JS QUOTA HANDLER ---
-    js_quota_handler = """
-    <script>
-    document.addEventListener('DOMContentLoaded', () => {
-        
-        // Per-Space Font loading
-        const link = document.createElement('link');
-        link.href = 'https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap';
-        link.rel = 'stylesheet';
-        document.head.appendChild(link);
-
-        // ---------------------------------------------
-        // GPU QUOTA HANDLER & UI FIXES
-        // ---------------------------------------------
+    // Gradio Video component passes an object or string
+    let fileUrl = "";
+    if (typeof video === 'string') {
+        fileUrl = video;
+    } else if (video && video.url) {
+        fileUrl = video.url;
+    } else if (video && video.path) {
+        fileUrl = video.path;
+    }
+    
+    // Fix relative paths to absolute URLs for the parent iframe
+    if (fileUrl && !fileUrl.startsWith('http')) { 
+        // Remove leading slash if exists to prevent double slash with origin
+        let cleanPath = fileUrl.startsWith('/') ? fileUrl.substring(1) : fileUrl;
         
-        window.quotaModalActive = false;
+        // Check if it's already a file route
+        if (cleanPath.startsWith('file=')) {
+             fileUrl = window.location.origin + "/" + cleanPath;
+        } else {
+             fileUrl = window.location.origin + "/file=" + cleanPath;
+        }
+    }
+    
+    if (fileUrl) {
+        console.log("Sending download request for:", fileUrl);
+        window.parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: fileUrl }, '*');
+    }
+}
+"""
 
-        window.retryGeneration = function() {
-            const modal = document.getElementById('custom-quota-modal');
-            if (modal) modal.remove();
-            window.quotaModalActive = false; // Reset flag
-            
-            // TARGET THE NEW GENERATE BUTTON ID
-            const runBtn = document.getElementById('generate-btn');
-            if(runBtn) {
-                runBtn.click();
-                setTimeout(() => runBtn.click(), 100);
-            }
-        };
-        
-        window.closeErrorModal = function() {
-             const modal = document.getElementById('custom-quota-modal');
-             if (modal) modal.remove();
-             window.quotaModalActive = false; // Reset flag
-             
-             // Clear text errors
-             document.querySelectorAll('.toast-body, .error, div[class*="error"]').forEach(el => {
-                el.innerText = '';
-                el.style.display = 'none';
-             });
-        };
-
-        const showQuotaModal = () => {
-            if (window.quotaModalActive || document.getElementById('custom-quota-modal')) return;
-            window.quotaModalActive = true;
-
-            const modalHtml = `
-                <div id="custom-quota-modal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 99999; display: flex; align-items: center; justify-content: center; font-family: 'Vazirmatn', sans-serif;">
-                    <div class="ip-reset-guide-container">
-                        <div class="guide-header">
-                            <svg class="guide-header-icon" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
-                                <defs><lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color: #667eea; stop-opacity: 1;"></stop><stop offset="100%" style="stop-color: #764ba2; stop-opacity: 1;"></stop></lineargradient></defs> 
-                                <circle cx="50" cy="50" r="45" fill="url(#grad1)" opacity="0.1"></circle>
-                                <circle cx="50" cy="50" r="35" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.3"></circle>
-                                <path d="M35 50 L45 60 L65 40" stroke="url(#grad1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
-                                <circle cx="65" cy="35" r="8" fill="#fee140"></circle>
-                                <path d="M62 35 L68 35 M65 32 L65 38" stroke="white" stroke-width="2" stroke-linecap="round"></path> 
-                            </svg>
-                            <div>
-                                <h2>یک قدم تا ساخت ویدیوهای جدید</h2>
-                                <p>نیازمند تغییر نقطه دستیابی</p>
-                            </div>
-                        </div>
-                        
-                        <div class="guide-content">
-                            <div class="info-card">
-                                <div class="info-card-header">
-                                    <svg class="info-card-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="#667eea" opacity="0.2"></path><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
-                                    <span class="info-card-title">راه حل سریع</span>
-                                </div>
-                                <p>طبق ویدیو آموزشی پایین بین نقطه دستیابی جابجا شوید تلاش مجدد بزنید تا تصاویر مجدداً تولید بشه.</p>
-                            </div>
-                            
-                            <div class="summary-section">
-                                <div class="summary-header">
-                                    <svg class="summary-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="#56ab2f" opacity="0.2"></circle><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" stroke="#56ab2f" stroke-width="2"></path><path d="M9 12l2 2 4-4" stroke="#56ab2f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
-                                    <span class="summary-title">خلاصه راهنما</span>
-                                </div>
-                                <div class="summary-text">هربار که این صفحه را مشاهده کردید: از اینترنت سیم‌کارت استفاده کنید، VPN را خاموش کرده و طبق ویدیو آموزشی پایین نقطه دستیابی رو تغییر دهید. «تلاش مجدد» کلیک کنید. با این روش ساده می‌توانید به صورت نامحدود تصویر بسازید! ☘️</div>
-                            </div>
-                            
-                            <div class="video-button-container">
-                                <button onclick="parent.postMessage({ type: 'NAVIGATE_TO_URL', url: '#/nav/online/news/getSingle/1149635/eyJpdiI6IjhHVGhPQWJwb3E0cjRXbnFWTW5BaUE9PSIsInZhbHVlIjoiS1V0dTdvT21wbXAwSXZaK1RCTG1pVXZqdlFJa1hXV1RKa2FLem9zU3pXMjd5MmlVOGc2YWY0NVdNR3h3Smp1aSIsIm1hYyI6IjY1NTA5ZDYzMjAzMTJhMGQyMWQ4NjA4ZDgyNGZjZDVlY2MyNjdiMjA2NWYzOWRjY2M4ZmVjYWRlMWNlMWQ3ODEiLCJ0YWciOiIifQ==/21135210' }, '*')" class="elegant-video-button"> 
-                                    <svg class="elegant-video-button-icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg> 
-                                    <span>دیدن ویدیو آموزشی استفاده نامحدود</span> 
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <div class="guide-actions">
-                            <button class="action-button back-button" onclick="window.closeErrorModal()"> 
-                                <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
-                                <span>بازگشت</span> 
-                            </button>
-                            <button class="action-button retry-button" onclick="window.retryGeneration()"> 
-                                <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 4v6h-6M1 20v-6h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
-                                <span>تلاش مجدد</span> 
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            `;
-            
-            document.body.insertAdjacentHTML('beforeend', modalHtml);
-        };
-
-        // Polling loop to find errors
-        setInterval(() => {
-            document.querySelectorAll('.toast-body, .error, div[class*="error"]').forEach(el => {
-                const text = (el.innerText||"").toLowerCase();
-                if (text.includes('quota') || text.includes('exceeded')) {
-                    showQuotaModal();
-                    el.style.display = 'none'; // Hide the ugly default error
-                }
-            });
-        }, 100);
-    });
-    </script>
-    """
+def apply_example(idx: str):
+    idx = int(idx)
+
+    # Read the example row from your list
+    img, prompt_txt, cam, res, mode, vid, aud, end_img = examples_list[idx]
+
+    img_path = img if img else None
+    vid_path = vid if vid else None
+    aud_path = aud if aud else None
+
+    input_image_update = img_path
+    prompt_update = prompt_txt
+    camera_update = cam
+    resolution_update = res
+    mode_update = mode
+    video_update = gr.update(value=vid_path, visible=(mode == "Motion Control"))
+    audio_update = aud_path
+    end_image = end_img
     
-    gr.HTML(js_quota_handler)
+    # Clear the output video when loading a new example
+    output_video_update = gr.update(value=None)
 
-    # Standard HTML Header
+    return (
+        input_image_update,
+        prompt_update,
+        camera_update,
+        resolution_update,
+        mode_update,
+        video_update,
+        audio_update,
+        audio_update,
+        end_image,
+        output_video_update
+    )
+
+
+with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
+    
+    # Updated Header to Persian
     gr.HTML(
         """
-        <div class="title-container">
-            <h1 class="title-text">ساخت ویدیو با هوش مصنوعی</h1>
-            <p class="subtitle-text">با پشتیبانی از صدا و دو تصویر</p>
+        <div style="text-align: center; padding: 20px;">
+            <h1 style="font-size: 28px; font-weight: bold; margin-bottom: 10px; color: var(--body-text-color);">
+                ساخت ویدیو با هوش مصنوعی
+            </h1>
+            <p style="font-size: 18px; color: var(--body-text-color-subdued); margin: 0;">
+                با پشتیبانی از صدا و دو تصویر
+            </p>
         </div>
         """
     )
     
     with gr.Column(elem_id="col-container"):
-        with gr.Row():
-            # Standard Radio Button instead of Custom one
-            mode_radio = gr.Radio(
+        with gr.Row(elem_id="mode-row"):
+            # Updated choices to Persian
+            radioanimated_mode = RadioAnimated(
                 choices=["تبدیل تصویر به ویدیو", "تکمیل فریم‌های میانی"],
                 value="تبدیل تصویر به ویدیو",
-                label="حالت اجرا",
-                interactive=True
+                elem_id="radioanimated_mode"
             )
-
         with gr.Row():
             with gr.Column(elem_id="step-column"):
 
                 with gr.Row():
+         
                     first_frame = gr.Image(
                         label="تصویر اول (اختیاری)",
                         type="filepath",
@@ -1046,34 +2438,82 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                         visible=False,
                     )
 
-                    # input_video is defined but hidden (backend legacy)
+                    # input_video is defined but hidden
                     input_video = gr.Video(
                         label="Motion Reference Video",
                         height=256,
                         visible=False,
                     )
 
-                # Standard Textbox instead of PromptBox
-                prompt = gr.Textbox(
-                    label="متن دستور (Prompt)",
+                relocate = gr.HTML(
+                    value="",
+                    html_template="<div></div>",
+                    js_on_load=r"""
+                (() => {
+                  function moveIntoFooter() {
+                    const promptRoot = document.querySelector("#prompt_ui");
+                    if (!promptRoot) return false;
+                
+                    const footer = promptRoot.querySelector(".ds-footer");
+                    if (!footer) return false;
+                
+                    const dur = document.querySelector("#duration_ui .cd-wrap");
+                    const res = document.querySelector("#resolution_ui .cd-wrap");
+                    const cam = document.querySelector("#camera_ui .cd-wrap");
+                
+                    if (!dur || !res || !cam) return false;
+                
+                    footer.appendChild(dur);
+                    footer.appendChild(res);
+                    footer.appendChild(cam);
+                
+                    return true;
+                  }
+                
+                  const tick = () => {
+                    if (!moveIntoFooter()) requestAnimationFrame(tick);
+                  };
+                  requestAnimationFrame(tick);
+                })();
+                """
+                )
+                
+
+                prompt_ui = PromptBox(
                     value="این تصویر را با حرکت سینمایی و انیمیشن روان زنده کن",
-                    lines=3,
-                    placeholder="حرکت و انیمیشن مورد نظر خود را توصیف کنید...",
+                    elem_id="prompt_ui",
                 )
 
-                # Standard Audio Input instead of Custom Uploader
-                audio_input = gr.Audio(
-                    label="فایل صوتی (اختیاری)",
+                # Hidden real audio input (backend value)
+                audio_input = gr.File(
+                    label="Audio (Optional)",
+                    file_types=["audio"],
                     type="filepath",
+                    elem_id="audio_input_hidden",
+                )
+                
+                # Custom UI that feeds the hidden gr.Audio above
+                audio_ui = AudioDropUpload(
+                    target_audio_elem_id="audio_input_hidden",
+                    elem_id="audio_ui",
+                )
+
+                prompt = gr.Textbox(
+                    label="Prompt",
+                    value="این تصویر را با حرکت سینمایی و انیمیشن روان زنده کن",
+                    lines=3,
+                    max_lines=3,
+                    placeholder="حرکت و انیمیشن مورد نظر خود را توصیف کنید...",
+                    visible=False
                 )
 
                 enhance_prompt = gr.Checkbox(
-                        label="بهبود خودکار متن (Enhance Prompt)",
+                        label="Enhance Prompt",
                         value=True,
                         visible=False
                     )
     
-                with gr.Accordion("تنظیمات پیشرفته", open=False):
+                with gr.Accordion("تنظیمات پیشرفته", open=False, visible=False):
                     seed = gr.Slider(
                         label="سید (Seed)",
                         minimum=0,
@@ -1087,65 +2527,108 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                         
             with gr.Column(elem_id="step-column"):
                 output_video = gr.Video(label="ویدیوی ساخته شده", autoplay=True, height=512)
+                
+                # --- دکمه دانلود اضافه شده ---
+                download_btn = gr.Button("📥 دانلود ویدیو", variant="secondary", elem_classes="button-gradient")
 
-                with gr.Row():
-                        # Standard Dropdowns instead of Custom
-                        duration_dropdown = gr.Dropdown(
+                with gr.Row(elem_id="controls-row"):
+                        
+                        duration_ui = CameraDropdown(
                             choices=["3s", "5s", "10s"],
                             value="5s",
-                            label="مدت زمان",
-                            interactive=True
+                            title="مدت زمان ویدیو",
+                            elem_id="duration_ui"
+                        )
+                    
+                        duration = gr.Slider(
+                            label="Duration (seconds)",
+                            minimum=1.0,
+                            maximum=10.0,
+                            value=5.0,
+                            step=0.1,
+                            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>"""
+
                         
-                        resolution_dropdown = gr.Dropdown(
-                            choices=["16:9", "1:1", "9:16"],
+                        resolution_ui = CameraDropdown(
+                            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",
-                            label="ابعاد تصویر",
-                            interactive=True
+                            title="ابعاد تصویر",
+                            elem_id="resolution_ui"
                         )
 
-                        camera_dropdown = gr.Dropdown(
+                        
+                        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)   
+
+                        camera_ui = CameraDropdown(
                             choices=[name for name, _ in VISIBLE_RUNTIME_LORA_CHOICES],
                             value="No LoRA",
-                            label="افکت دوربین (LoRA)",
-                            interactive=True
+                            title="افکت دوربین (LoRA)",
+                            elem_id="camera_ui",
+                        )
+
+                        # Hidden real dropdown (backend value)
+                        camera_lora = gr.Dropdown(
+                            label="Camera Control LoRA",
+                            choices=[name for name, _ in VISIBLE_RUNTIME_LORA_CHOICES],
+                            value="No LoRA",
+                            visible=False
                         )
                     
-                        # Hidden state holders
-                        width = gr.Number(label="Width", value=DEFAULT_1_STAGE_WIDTH, visible=False)
-                        height = gr.Number(label="Height", value=DEFAULT_1_STAGE_HEIGHT, visible=False)   
-                        duration_val = gr.Number(value=5.0, visible=False)
+                generate_btn = gr.Button("🤩 ساخت ویدیو", variant="primary", elem_classes="button-gradient")
 
-                # IMPORTANT: Added elem_id="generate-btn" for JS control
-                generate_btn = gr.Button("🤩 ساخت ویدیو", variant="primary", elem_classes="button-gradient", elem_id="generate-btn")
 
+    camera_ui.change(
+        fn=lambda x: x,
+        inputs=camera_ui,
+        outputs=camera_lora,
+        api_visibility="private"
+    )
 
-    # Logic Linking
-    
-    def update_resolution_vars(choice):
-        w, h = apply_resolution(choice)
-        return w, h
-
-    resolution_dropdown.change(
-        fn=update_resolution_vars,
-        inputs=resolution_dropdown,
-        outputs=[width, height]
+    radioanimated_mode.change(
+    fn=on_mode_change,
+        inputs=radioanimated_mode,
+        outputs=[input_video, end_frame],
+        api_visibility="private",
     )
 
-    def update_duration_var(choice):
-        return apply_duration(choice)
 
-    duration_dropdown.change(
-        fn=update_duration_var,
-        inputs=duration_dropdown,
-        outputs=[duration_val]
+    duration_ui.change(
+        fn=apply_duration,
+        inputs=duration_ui,
+        outputs=[duration],
+        api_visibility="private"
     )
-
-    mode_radio.change(
-        fn=on_mode_change,
-        inputs=mode_radio,
-        outputs=[input_video, end_frame],
+    resolution_ui.change(
+        fn=apply_resolution,
+        inputs=resolution_ui,
+        outputs=[width, height],
+        api_visibility="private"
+    )
+    prompt_ui.change(
+        fn=lambda x: x,
+        inputs=prompt_ui,
+        outputs=prompt,
+        api_visibility="private"
     )
+
                 
     generate_btn.click(
         fn=generate_video,
@@ -1153,70 +2636,144 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
             first_frame,
             end_frame,
             prompt,
-            duration_val,
+            duration,
             input_video,
-            mode_radio,
+            radioanimated_mode,
             enhance_prompt,
             seed,
             randomize_seed,
             height,
             width,
-            camera_dropdown,
+            camera_lora,
             audio_input
         ],
         outputs=[output_video]
     )
+
+    # --- اتصال دکمه دانلود به جاوا اسکریپت ---
+    download_btn.click(
+        fn=None,
+        inputs=[output_video],
+        js=js_download_video
+    )
     
-    # Standard Examples Component
+    # Updated Examples to use Persian modes
     examples_list = [
         [
             "examples/supergirl-2.png",
-            None, # End frame
-            "A fuzzy puppet superhero character resembling a female puppet with blonde hair and a blue superhero suit sleeping in bed and just waking up...",
+            "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",
             "Static",
             "16:9",
             "تبدیل تصویر به ویدیو",
+            None,
             "examples/supergirl.m4a",
+            None,
         ],
         [
             "examples/frame3.png",
-            "examples/frame4.png", # End frame
-            "a woman in a white dress standing in a supermarket, looking at a stack of pomegranates...",
+            "a woman in a white dress standing in a supermarket, looking at a stack of pomegranates, she picks one and takes a bite, the camera zooms in to a close up of the pomegranate seeds. A calm music is playing in the supermarket and you can hear her taking a bite.",
             "Zoom In",
             "16:9",
             "تکمیل فریم‌های میانی",
             None,
+            None,
+            "examples/frame4.png",
         ],
         [
             "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",
+            "No LoRA",
+            "16:9",
+            "تبدیل تصویر به ویدیو",
+            None,
+            None,
             None,
-            "A fuzzy puppet superhero character resembling a female puppet with blonde hair...",
+        ],
+        [
+            "examples/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,
+            None,
+            None,
         ],
         [
             "examples/wednesday.png",
-            None,
-            "A cinematic dolly out of Wednesday Addams frozen mid-dance...",
-            "Zoom Out",
+            "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,
-        ]
+            None,
+            None,
+        ],
+        [
+            "examples/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,
+            None,
+            None,
+        ],
     ]
 
-    # Map examples to inputs
-    # Inputs order in list: [first_frame, end_frame, prompt, camera, res, mode, audio]
-    # Inputs order in function: [first_frame, end_frame, prompt, duration, input_video, mode, enhance, seed, rand, h, w, cam, audio]
-    
-    # To simplify, we just use a clickable gallery or standard Examples that populates fields
-    gr.Examples(
+    examples_obj = create_examples(
         examples=examples_list,
-        inputs=[first_frame, end_frame, prompt, camera_dropdown, resolution_dropdown, mode_radio, audio_input],
-        label="نمونه‌ها"
+        fn=generate_video_example,
+        inputs=[first_frame, prompt_ui, camera_ui, resolution_ui, radioanimated_mode, input_video, audio_input, end_frame],
+        outputs = [output_video],
+        label="نمونه‌ها",
+        cache_examples=True,
+        visible=False
+    )
+
+    preset_gallery = PresetGallery(
+        items=[
+            {"thumb": "examples/supergirl-2.png", "label": "تصویر و صدا به ویدیو"},
+            {"thumb": "examples/frame3.png", "label": "تصویر اول و آخر"},
+            {"thumb": "examples/supergirl.png", "label": "تصویر به ویدیو (عروسک)"},
+            {"thumb": "examples/highland.png", "label": "تصویر به ویدیو (گاو)"},
+            {"thumb": "examples/wednesday.png", "label": "تصویر به ویدیو (ونزدی)"},
+            {"thumb": "examples/astronaut.png", "label": "تصویر به ویدیو (فضانورد)"},
+        ],
+        title="برای شروع روی یکی از نمونه‌ها کلیک کنید",
+    )
+
+    def on_audio_ui_change(v):
+        # Our JS sends "__CLEAR__" when the user presses the X
+        if v == "__CLEAR__" or v is None or v == "":
+            return None
+        # For normal events (uploads), do nothing (keep whatever gr.File already has)
+        return gr.update()
+    
+    audio_ui.change(
+        fn=on_audio_ui_change,
+        inputs=audio_ui,
+        outputs=audio_input,
+        api_visibility="private",
+    )
+
+    preset_gallery.change(
+        fn=apply_example,
+        inputs=preset_gallery,
+        outputs=[
+            first_frame,
+            prompt_ui,
+            camera_ui,
+            resolution_ui,
+            radioanimated_mode,
+            input_video,
+            audio_input,
+            audio_ui,
+            end_frame,
+            output_video # Clears the output video
+        ],
+        api_visibility="private",
     )
 
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False, css=css, allowed_paths=["./examples"])
+    demo.launch(ssr_mode=False, mcp_server=True, css=css, allowed_paths=["./examples"])