Update app.py

app.py

@@ -2319,7 +2319,7 @@ def apply_example(idx: str):
 
 
 ####################################################################################################
-### PART 20: Gradio UI Layout & Launch (REVISED & FIXED)
+### PART 20: Gradio UI Layout & Launch (REVISED & FIXED for Step-by-Step Feedback)
 ####################################################################################################
 
 # JS Function to handle download request via PostMessage
@@ -2341,19 +2341,13 @@ async (video) => {
 }
 """
 
-# این تابع جاوااسکریپت فقط مسئول فراخوانی API بهینه ساز است
-# ورودی ها را از پایتون می گیرد و خروجی (پرامپت بهینه شده) را به پایتون برمی گرداند
+# این تابع JS فقط مسئول فراخوانی API بهینه ساز است
+# خروجی آن (پرامپت بهینه شده) به مرحله بعدی در زنجیره گرادیو ارسال می شود
 js_enhancer_api_call = """
 async (firstFrame, promptText, mode) => {
     // اگر حالت انتخابی نیازی به بهینه سازی ندارد، پرامپت اصلی را برگردان
-    if (mode !== 'تبدیل تصویر به ویدیو' && mode !== 'تکمیل فریم‌های میانی') {
-        return promptText;
-    }
-    
-    // API بهینه ساز به تصویر نیاز دارد
-    if (!firstFrame) {
-        // چون این مرحله در میانه راه است، به کاربر اطلاع داده و با پرامپت اصلی ادامه می دهیم
-        console.warn("Enhancement skipped: First frame image is required.");
+    if (mode !== 'تبدیل تصویر به ویدیو' && mode !== 'تکمیل فریم‌های میانی' || !firstFrame) {
+        if (!firstFrame) console.warn("Enhancement skipped: First frame image is required.");
         return promptText;
     }
 
@@ -2379,12 +2373,11 @@ async (firstFrame, promptText, mode) => {
 
         const data = await apiResponse.json();
         console.log("Enhanced Prompt received:", data.animation_prompt);
-        // پرامپت بهینه شده را برای مرحله بعد در گرادیو برگردان
-        return data.animation_prompt;
+        return data.animation_prompt; // پرامپت بهینه شده را برگردان
 
     } catch (error) {
         console.error("Enhancement API Error:", error);
-        // در صورت خطا، پرامپت اصلی را برگردان تا فرآیند ساخت ویدیو متوقف نشود
+        // در صورت خطا، پرامپت اصلی را برگردان تا فرآیند متوقف نشود
         return promptText;
     }
 }
@@ -2395,17 +2388,10 @@ def apply_example(idx: str):
     idx = int(idx)
     img, prompt_txt, cam, res, mode, vid, aud, end_img = examples_list[idx]
     return (
-        img or None,
-        prompt_txt,
-        cam,
-        res,
-        mode,
+        img or None, prompt_txt, cam, res, mode,
         gr.update(value=vid or None, visible=(mode == "Motion Control")),
-        aud or None,
-        aud or None,
-        end_img or None,
-        gr.update(value=None),
-        gr.update(visible=False)
+        aud or None, aud or None, end_img or None,
+        gr.update(value=None), gr.update(visible=False)
     )
 
 with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
@@ -2423,90 +2409,65 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
         """
     )
     
-    # State components to pass data between Python and JS
-    # این کامپوننت ها برای کاربر قابل مشاهده نیستند
+    # کامپوننت State برای نگهداری پرامپت بهینه شده
     enhanced_prompt_state = gr.State("")
     
     with gr.Column(elem_id="col-container"):
+        # ... تعریف بقیه UI ...
         with gr.Row(elem_id="mode-row"):
-            radioanimated_mode = RadioAnimated(
-                choices=["تبدیل تصویر به ویدیو", "تکمیل فریم‌های میانی"],
-                value="تبدیل تصویر به ویدیو",
-                elem_id="radioanimated_mode"
-            )
+            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,
-                    )
+                    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"""
-                (() => {
-                  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);
-                })();
-                """)
-                
+                relocate = gr.HTML(value="", html_template="<div></div>", js_on_load=r"""(() => { function moveIntoFooter() { const p = document.querySelector("#prompt_ui"), f = p ? p.querySelector(".ds-footer") : null; if (!f) return false; const d = document.querySelector("#duration_ui .cd-wrap"), r = document.querySelector("#resolution_ui .cd-wrap"), c = document.querySelector("#camera_ui .cd-wrap"); if (!d || !r || !c) return false; f.appendChild(d); f.appendChild(r); f.appendChild(c); return true; } const tick = () => { if (!moveIntoFooter()) requestAnimationFrame(tick); }; requestAnimationFrame(tick); })();""")
                 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)
+                prompt = gr.Textbox(label="Prompt", value="این تصویر را با حرکت سینمایی و انیمیشن روان زنده کن", lines=3, max_lines=3, 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)
                     randomize_seed = gr.Checkbox(label="استفاده از سید تصادفی", value=True)
-                        
+            
             with gr.Column(elem_id="step-column"):
                 output_video = gr.Video(label="ویدیوی ساخته شده", autoplay=True, height=512)
                 with gr.Row():
                     download_btn = gr.Button("📥 دانلود ویدیو", variant="secondary", size="sm", scale=0, visible=False)
 
                 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 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")
-                        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, ICON_1_1, ICON_9_16 = ("<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>", "<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>", "<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")
+                    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")
 
-    # توابع کمکی برای به‌روزرسانی UI
-    def lock_ui():
+    # توابع کمکی برای کنترل جریان و به‌روزرسانی UI
+    def start_process():
+        """مرحله ۱: UI را برای شروع فرآیند آماده می کند."""
         return gr.Button(value="⏳ در حال بهینه سازی پرامپت...", interactive=False)
 
-    def re_enable_ui():
-        return gr.Button(value="🤩 ساخت ویدیو", interactive=True)
+    def prepare_for_generation(enhanced_prompt):
+        """مرحله ۳: UI را برای شروع ساخت ویدیو آماده می کند."""
+        # پرامپت بهینه شده را در UI نمایش می دهیم
+        return {
+            generate_btn: gr.Button(value="🚀 در حال ساخت ویدیو...", interactive=False),
+            prompt_ui: gr.update(value=enhanced_prompt)
+        }
+
+    def finalize_process():
+        """مرحله ۵: UI را پس از اتمام کار به حالت اولیه برمی گرداند."""
+        return {
+            generate_btn: gr.Button(value="🤩 ساخت ویدیو", interactive=True),
+            download_btn: gr.Button(visible=True)
+        }
 
     # اتصال رویدادها
     camera_ui.change(fn=lambda x: x, inputs=camera_ui, outputs=camera_lora, api_visibility="private")
@@ -2519,22 +2480,24 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
 
     # --- زنجیره اصلی رویداد ساخت ویدیو ---
     
-    # 1. وقتی کاربر روی دکمه کلیک می کند، ابتدا UI را قفل کرده و متن دکمه را تغییر می دهیم.
-    # این تابع پایتون هیچ کاری جز آماده سازی UI انجام نمی دهد.
+    # 1. کلیک کاربر: تابع پایتون start_process را برای قفل کردن UI اجرا می کند.
     generate_btn.click(
-        fn=lock_ui,
+        fn=start_process,
         outputs=[generate_btn]
-    ) \
-    .then(
-        # 2. سپس، تابع جاوااسکریپت را برای بهینه سازی پرامپت فراخوانی می کنیم.
-        # ورودی های آن از کامپوننت های گرادیو گرفته شده و خروجی آن در یک State ذخیره می شود.
-        fn=None, 
+    ).then(
+        # 2. سپس: تابع جاوااسکریپت js_enhancer_api_call برای گرفتن پرامپت بهینه شده اجرا می شود.
+        # خروجی آن به طور خودکار به ورودی تابع بعدی در زنجیره داده می شود.
+        fn=None,
         inputs=[first_frame, prompt, radioanimated_mode],
         outputs=[enhanced_prompt_state],
         js=js_enhancer_api_call
-    ) \
-    .then(
-        # 3. حالا، تابع اصلی ساخت ویدیو را با پرامپت بهینه شده (که از State خوانده می شود) اجرا می کنیم.
+    ).then(
+        # 3. سپس: تابع پایتون prepare_for_generation برای به‌روزرسانی UI با وضعیت جدید اجرا می شود.
+        fn=prepare_for_generation,
+        inputs=[enhanced_prompt_state],
+        outputs=[generate_btn, prompt_ui]
+    ).then(
+        # 4. سپس: تابع اصلی ساخت ویدیو با پرامپت بهینه شده اجرا می شود.
         fn=generate_video,
         inputs=[
             first_frame, end_frame, enhanced_prompt_state, duration, input_video,
@@ -2542,16 +2505,10 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
             height, width, camera_lora, audio_input
         ],
         outputs=[output_video]
-    ) \
-    .then(
-        # 4. پس از اتمام ساخت ویدیو، دکمه دانلود را نمایش می دهیم.
-        fn=lambda: gr.update(visible=True),
-        outputs=[download_btn]
-    ) \
-    .then(
-        # 5. در نهایت، UI را دوباره فعال می کنیم.
-        fn=re_enable_ui,
-        outputs=[generate_btn]
+    ).then(
+        # 5. در نهایت: تابع پایتون finalize_process برای باز کردن قفل UI و نمایش دکمه دانلود اجرا می شود.
+        fn=finalize_process,
+        outputs=[generate_btn, download_btn]
     )
 
     # منطق نمونه ها
@@ -2565,25 +2522,14 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
     ]
 
     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": "تصویر به ویدیو (فضانورد)"},
-        ],
+        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="برای شروع روی یکی از نمونه‌ها کلیک کنید",
     )
 
     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, download_btn
-        ],
+        outputs=[first_frame, prompt_ui, camera_ui, resolution_ui, radioanimated_mode, input_video, audio_input, audio_ui, end_frame, output_video, download_btn],
         api_visibility="private",
     )