Update app.py

app.py

@@ -1235,11 +1235,18 @@ class AudioDropUpload(gr.HTML):
 ### PART 17: Wrapper Functions (Resolution, Duration, Examples)
 ####################################################################################################
 def generate_video_example(first_frame, prompt, camera_lora, resolution, radioanimated_mode, input_video, input_audio, end_frame, progress=gr.Progress(track_tqdm=True)):
+
     w, h = apply_resolution(resolution)
+    
+    # We pass input_video (from example) to generate_video, though the logic inside generate_video 
+    # might ignore it since we removed the Motion Control block.
+    # We keep the argument in this function signature to align with the examples_list columns.
+    
+    # Default duration for examples
     duration_s = 5
 
     with timer(f'generating with LoRA:{camera_lora} in {w}x{h}'):
-        output_video, status = generate_video(
+        output_video = generate_video(
             first_frame,
             end_frame,
             prompt,
@@ -1255,7 +1262,7 @@ def generate_video_example(first_frame, prompt, camera_lora, resolution, radioan
             input_audio,
             progress
         )
-    return output_video, status
+    return output_video
 
 def get_duration(
     first_frame,
@@ -1274,20 +1281,21 @@ def get_duration(
     progress
 ):
     extra_time = 0
-    if audio_path is not None: extra_time += 10
-    if input_video is not None: extra_time += 60
-    if duration <= 3: return 60 + extra_time
-    elif duration <= 5: return 80 + extra_time
-    else: return 120 + extra_time
-
-# تابع جدید برای نمایش پیام خطا
-def get_error_html(message):
-    return f"""
-    <div style="background-color: #fee2e2; border: 1px solid #ef4444; color: #b91c1c; padding: 12px; border-radius: 8px; text-align: center; margin-bottom: 10px; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px;">
-        <span style="font-size: 1.2em;">⛔</span>
-        {message}
-    </div>
-    """
+
+    if audio_path is not None:
+        extra_time += 10
+
+    if input_video is not None:
+        extra_time += 60
+
+    if duration <= 3:
+        return 60 + extra_time
+    elif duration <= 5:
+        return 80 + extra_time
+    elif duration <= 10:
+        return 120 + extra_time
+    else:
+        return 180 + extra_time
 
 
 ####################################################################################################
@@ -1300,7 +1308,7 @@ def generate_video(
     prompt: str,
     duration: float,
     input_video = None,
-    generation_mode = "تبدیل تصویر به ویدیو",
+    generation_mode = "تبدیل تصویر به ویدیو", # Default changed to Persian
     enhance_prompt: bool = True,
     seed: int = 42,
     randomize_seed: bool = True,
@@ -1310,184 +1318,971 @@ def generate_video(
     audio_path = None,
     progress=gr.Progress(track_tqdm=True),
 ):
-    try:
-        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}')
+    """
+    Generate a short cinematic video from a text prompt and optional input image using the LTX-2 distilled pipeline.
+    """
 
-        current_seed = random.randint(0, MAX_SEED) if randomize_seed else int(seed)
-        frame_rate = 24.0
-        num_frames = int(duration * frame_rate) + 1
-        
-        with tempfile.NamedTemporaryFile(suffix=".mp4", delete=False) as tmpfile:
-            output_path = tmpfile.name
+    # 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}')
 
+    # 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)
+
+    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 = []
-
-        if first_frame is not None:
-            images.append((first_frame, 0, 1.0))
-
-        if generation_mode == "تکمیل فریم‌های میانی" and 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)
-        del embeddings, final_prompt, status
-        torch.cuda.empty_cache()
-
-        if audio_path is not None:
-            with torch.inference_mode():
-                _, n_audio_context = encode_text_simple(text_encoder, "")
-                del audio_context
-                audio_context = n_audio_context
-            if len(videos) == 0:
-                camera_lora = "Static"
-        torch.cuda.empty_cache()
-
-        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()
-
-        video_seconds = (num_frames - 1) / frame_rate
-        input_waveform, input_waveform_sample_rate = (None, 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, 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)
-        
-        del video_context, audio_context
-        torch.cuda.empty_cache()
-        print("successful generation")
+        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")
 
-        return str(output_path), "" # Return video path and an empty status message on success
 
-    except Exception as e:
-        error_str = str(e)
-        print(f"An error occurred: {error_str}")
+    # 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 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"
+
+    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)
+
+    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
+
+    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
+
+    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")
+
+    return str(output_path)
 
-        # --- مدیریت خطای GPU QUOTA ---
-        # اگر خطا مربوط به سهمیه باشد، آن را مجدداً ارسال می‌کنیم تا JS آن را بگیرد
-        if "quota" in error_str.lower() or "exceeded" in error_str.lower():
-            raise e
-        
-        # برای خطاهای دیگر، پیام خطا را در استاتوس باکس نمایش می‌دهیم
-        return None, get_error_html(f"خطایی رخ داد: {error_str}")
 
 def apply_resolution(resolution: str):
-    if resolution == "16:9": w, h = 768, 512
-    elif resolution == "1:1": w, h = 512, 512
-    elif resolution == "9:16": w, h = 512, 768
+
+    if resolution == "16:9":
+        w, h = 768, 512
+    elif resolution == "1:1":
+        w, h = 512, 512
+    elif resolution == "9:16":
+        w, h = 512, 768
+        
     return int(w), int(h)
 
 def apply_duration(duration: str):
-    return int(duration[:-1])
+    duration_s = int(duration[:-1])
+    return duration_s
 
 def on_mode_change(selected: str):
+    is_motion = False # Removed Motion Control
+    # Updated logic for Persian string
     is_interpolate = (selected == "تکمیل فریم‌های میانی")
-    return gr.update(visible=False), gr.update(visible=is_interpolate)
+
+    return (gr.update(visible=is_motion), gr.update(visible=is_interpolate))
 
 
 ####################################################################################################
 ### PART 19: CSS Styles
 ####################################################################################################
 css = """
-/* All previous CSS from Part 19 goes here... */
-#controls-row { display: none !important; }
-/* ... (keep all the existing CSS) ... */
-.aud-filelabel{ margin: 10px 6px 0; color: var(--body-text-color-subdued); font-size: 0.95rem; display: none; }
-#audio_input_hidden { display: none !important; }
 
-/* --- IP Reset Guide 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-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
-    --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
-    --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
-}
+    /* 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;
+        padding: 14px 28px;
+        font-size: 16px;
+        font-weight: bold;
+        color: white;
+        border-radius: 10px;
+        cursor: pointer;
+        transition: 0.3s ease-in-out;
+        animation: 2s linear 0s infinite normal none running gradientAnimation;
+        box-shadow: rgba(255, 65, 108, 0.6) 0px 4px 10px;
+    }
+    .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;
+    }
+    """
+
 
-@keyframes float {
-    0%, 100% { transform: translateY(0px); }
-    50% { transform: translateY(-10px); }
+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;
 }
-@keyframes slideInUp {
-    from { opacity: 0; transform: translateY(30px); }
-    to { opacity: 1; transform: translateY(0); }
+.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;
 
-.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: inherit;
+    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;
+    
+      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 */
+    }
+    
+        
+    .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;
 }
-.ip-reset-guide-container::before {
-    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary-gradient-guide);
+.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; }
+"""
+
+# Hiding Gradio Footer, Branding and Settings
+css += """
+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;
 }
-.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); box-shadow: var(--shadow-md) !important; }
-.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; }
-
-/* Force toast transparency for cleaner Custom Modal */
-.toast-body { direction: rtl !important; text-align: right !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; max-width: 100% !important; width: auto !important; }
-.toast-wrap { background: transparent !important; border: none !important; box-shadow: none !important; }
-
-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; }
 """
 
 
@@ -1526,62 +2321,16 @@ def apply_example(idx: str):
 ####################################################################################################
 ### PART 20: Gradio UI Layout & Launch
 ####################################################################################################
-js_quota_handler = """
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    window.retryGeneration = function() {
-        const modal = document.getElementById('custom-quota-modal');
-        if (modal) modal.remove();
-        const runBtn = document.querySelector('.button-gradient'); // Use class selector for main button
-        if(runBtn) runBtn.click();
-    };
-    
-    window.closeErrorModal = function() {
-         const modal = document.getElementById('custom-quota-modal');
-         if (modal) modal.remove();
-    };
-
-    const showQuotaModal = () => {
-        if (document.getElementById('custom-quota-modal')) return;
-        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: inherit;">
-                <div class="ip-reset-guide-container">
-                    <div class="guide-header"><div><h2>ظرفیت GPU موقتا پر است</h2><p>راه حل سریع و آسان</p></div></div>
-                    <div class="guide-content">
-                        <div class="info-card"><div class="info-card-header"><span class="info-card-title">راه حل سریع</span></div><p>کافیست اینترنت خود را یکبار قطع و وصل کنید یا از اینترنت دیگری استفاده کنید و دکمه «تلاش مجدد» را بزنید.</p></div>
-                        <div class="summary-section"><div class="summary-header"><span class="summary-title">چرا این اتفاق می‌افتد؟</span></div><div class="summary-text">سرورهای ما برای ارائه خدمات رایگان، منابع را بین کاربران به اشتراک می‌گذارند. گاهی اوقات ترافیک بالا باعث پر شدن ظرفیت می‌شود. با تغییر اینترنت، شما به سرور دیگری متصل می‌شوید.</div></div>
-                    </div>
-                    <div class="guide-actions">
-                        <button class="action-button back-button" onclick="window.closeErrorModal()"><span>بازگشت</span></button>
-                        <button class="action-button retry-button" onclick="window.retryGeneration()"><span>تلاش مجدد</span></button>
-                    </div>
-                </div>
-            </div>`;
-        document.body.insertAdjacentHTML('beforeend', modalHtml);
-    };
-
-    setInterval(() => {
-        const potentialErrors = document.querySelectorAll('.toast-body, .error, .toast-wrap');
-        potentialErrors.forEach(el => {
-            const text = el.innerText || "";
-            if (text.toLowerCase().includes('quota') || text.toLowerCase().includes('exceeded')) {
-                 showQuotaModal();
-                 el.style.display = 'none';
-                 const parentWrap = el.closest('.toast-wrap');
-                 if(parentWrap) parentWrap.style.display = 'none';
-            }
-        });
-    }, 200);
-});
-</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
@@ -1590,96 +2339,390 @@ def apply_example(idx: str):
     video_update = gr.update(value=vid_path, visible=(mode == "Motion Control"))
     audio_update = aud_path
     end_image = end_img
+    
+    # Clear the output video when loading a new example
     output_video_update = gr.update(value=None)
-    status_update = "" # Clear status on example load
-    return (input_image_update, prompt_update, camera_update, resolution_update, mode_update, video_update, audio_update, audio_update, end_image, output_video_update, status_update)
+
+    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:
-    gr.HTML(js_quota_handler) # --- تزریق جاوا اسکریپت ---
     
+    # Updated Header to Persian
     gr.HTML(
         """
-        <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>
+        <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(elem_id="mode-row"):
-            radioanimated_mode = RadioAnimated(choices=["تبدیل تصویر به ویدیو", "تکمیل فریم‌های میانی"], value="تبدیل تصویر به ویدیو", elem_id="radioanimated_mode")
+            # Updated choices to Persian
+            radioanimated_mode = RadioAnimated(
+                choices=["تبدیل تصویر به ویدیو", "تکمیل فریم‌های میانی"],
+                value="تبدیل تصویر به ویدیو",
+                elem_id="radioanimated_mode"
+            )
         with gr.Row():
             with gr.Column(elem_id="step-column"):
+
                 with gr.Row():
-                    first_frame = gr.Image(label="تصویر اول (اختیاری)", type="filepath", height=256)
-                    end_frame = gr.Image(label="تصویر آخر (اختیاری)", type="filepath", height=256, visible=False)
-                    input_video = gr.Video(label="Motion Reference Video", height=256, visible=False)
-
-                relocate = gr.HTML(value="", html_template="<div></div>", js_on_load=r"""...""") # JS from previous parts
-                prompt_ui = PromptBox(value="این تصویر را با حرکت سینمایی و انیمیشن روان زنده کن", elem_id="prompt_ui")
-                audio_input = gr.File(label="Audio (Optional)", file_types=["audio"], type="filepath", elem_id="audio_input_hidden")
-                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", value=True, visible=False)
+         
+                    first_frame = gr.Image(
+                        label="تصویر اول (اختیاری)",
+                        type="filepath",
+                        height=256
+                    )
+         
+                    end_frame = gr.Image(
+                        label="تصویر آخر (اختیاری)",
+                        type="filepath",
+                        height=256,
+                        visible=False,
+                    )
+
+                    # input_video is defined but hidden
+                    input_video = gr.Video(
+                        label="Motion Reference Video",
+                        height=256,
+                        visible=False,
+                    )
+
+                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="این تصویر را با حرکت سینمایی و انیمیشن روان زنده کن",
+                    elem_id="prompt_ui",
+                )
+
+                # 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",
+                        value=True,
+                        visible=False
+                    )
+    
                 with gr.Accordion("تنظیمات پیشرفته", open=False, visible=False):
-                    seed = gr.Slider(label="سید (Seed)", minimum=0, maximum=MAX_SEED, value=DEFAULT_SEED, step=1)
+                    seed = gr.Slider(
+                        label="سید (Seed)",
+                        minimum=0,
+                        maximum=MAX_SEED,
+                        value=DEFAULT_SEED,
+                        step=1
+                    )
+                
                     randomize_seed = gr.Checkbox(label="استفاده از سید تصادفی", value=True)
 
+                        
             with gr.Column(elem_id="step-column"):
-                output_video = gr.Video(label="ویدیوی ساخته شده", autoplay=True, height=450)
-                status_box = gr.HTML(label="وضعیت") # --- استاتوس باکس جدید ---
+                output_video = gr.Video(label="ویدیوی ساخته شده", autoplay=True, height=512)
+
                 with gr.Row(elem_id="controls-row"):
-                    duration_ui = CameraDropdown(choices=["3s", "5s", "10s"], value="5s", 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 code
-                    ICON_1_1 = """...""" # SVG code
-                    ICON_9_16 = """...""" # SVG code
-                    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", title="ابعاد تصویر", elem_id="resolution_ui")
-                    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", title="افکت دوربین (LoRA)", elem_id="camera_ui")
-                    camera_lora = gr.Dropdown(label="Camera Control LoRA", choices=[name for name, _ in VISIBLE_RUNTIME_LORA_CHOICES], value="No LoRA", visible=False)
+                        
+                        duration_ui = CameraDropdown(
+                            choices=["3s", "5s", "10s"],
+                            value="5s",
+                            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_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",
+                            title="ابعاد تصویر",
+                            elem_id="resolution_ui"
+                        )
+
+                        
+                        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",
+                            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
+                        )
+                    
                 generate_btn = gr.Button("🤩 ساخت ویدیو", variant="primary", elem_classes="button-gradient")
 
-    camera_ui.change(fn=lambda x: x, inputs=camera_ui, outputs=camera_lora, api_visibility="private")
-    radioanimated_mode.change(fn=on_mode_change, inputs=radioanimated_mode, outputs=[input_video, end_frame], api_visibility="private")
-    duration_ui.change(fn=apply_duration, inputs=duration_ui, outputs=[duration], api_visibility="private")
-    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")
 
+    camera_ui.change(
+        fn=lambda x: x,
+        inputs=camera_ui,
+        outputs=camera_lora,
+        api_visibility="private"
+    )
+
+    radioanimated_mode.change(
+    fn=on_mode_change,
+        inputs=radioanimated_mode,
+        outputs=[input_video, end_frame],
+        api_visibility="private",
+    )
+
+
+    duration_ui.change(
+        fn=apply_duration,
+        inputs=duration_ui,
+        outputs=[duration],
+        api_visibility="private"
+    )
+    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,
-        inputs=[first_frame, end_frame, prompt, duration, input_video, radioanimated_mode, enhance_prompt, seed, randomize_seed, height, width, camera_lora, audio_input],
-        outputs=[output_video, status_box] # --- خروجی به استاتوس باکس اضافه شد ---
+        inputs=[
+            first_frame,
+            end_frame,
+            prompt,
+            duration,
+            input_video,
+            radioanimated_mode,
+            enhance_prompt,
+            seed,
+            randomize_seed,
+            height,
+            width,
+            camera_lora,
+            audio_input
+        ],
+        outputs=[output_video]
     )
     
+    # Updated Examples to use Persian modes
     examples_list = [
-        ["examples/supergirl-2.png", "A fuzzy puppet...", "Static", "16:9", "تبدیل تصویر به ویدیو", None, "examples/supergirl.m4a", None],
-        ["examples/frame3.png", "a woman in a white dress...", "Zoom In", "16:9", "تکمیل فریم‌های میانی", None, None, "examples/frame4.png"],
-        ["examples/supergirl.png", "A fuzzy puppet superhero character...", "No LoRA", "16:9", "تبدیل تصویر به ویدیو", None, None, None],
-        ["examples/highland.png", "Realistic POV selfie-style video...", "No LoRA", "16:9", "تبدیل تصویر به ویدیو", None, None, None],
-        ["examples/wednesday.png", "A cinematic dolly out of Wednesday...", "Zoom Out", "16:9", "تبدیل تصویر به ویدیو", None, None, None],
-        ["examples/astronaut.png", "An astronaut hatches from a fragile egg...", "Static", "1:1", "تبدیل تصویر به ویدیو", None, None, None],
+        [
+            "examples/supergirl-2.png",
+            "A fuzzy puppet superhero character resembling a female puppet with blonde hair and a blue superhero suit sleeping in bed and just waking up, she gradually gets up, rubbing her eyes and looking at her dog that just popped on the bed. the scene feels chaotic, comedic, and emotional with expressive puppet reactions, cinematic lighting, smooth camera motion, shallow depth of field, and high-quality puppet-style animation",
+            "Static",
+            "16:9",
+            "تبدیل تصویر به ویدیو",
+            None,
+            "examples/supergirl.m4a",
+            None,
+        ],
+        [
+            "examples/frame3.png",
+            "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,
+        ],
+        [
+            "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",
+            "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,
+        ],
     ]
 
     examples_obj = create_examples(
         examples=examples_list,
         fn=generate_video_example,
         inputs=[first_frame, prompt_ui, camera_ui, resolution_ui, radioanimated_mode, input_video, audio_input, end_frame],
-        outputs=[output_video, status_box],
-        label="نمونه‌ها", cache_examples=True, visible=False
+        outputs = [output_video],
+        label="نمونه‌ها",
+        cache_examples=True,
+        visible=False
     )
 
-    preset_gallery = PresetGallery(items=[...], title="برای شروع روی یکی از نمونه‌ها کلیک کنید") # Data from previous parts
+    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):
-        if v == "__CLEAR__" or v is None or v == "": return None
+        # 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")
+    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, status_box],
+        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",
     )