Enhance UI for video generation with step-by-step labels and improved layout

app.py

@@ -167,13 +167,6 @@ pipeline = XoraVideoPipeline(
 ).to(device)
 
 
-import gradio as gr
-import torch
-from huggingface_hub import snapshot_download
-
-# [Previous imports remain the same...]
-
-
 def generate_video_from_text(
     prompt="",
     negative_prompt="",
@@ -309,26 +302,38 @@ def generate_video_from_image(
 
 
 def create_advanced_options():
-    with gr.Accordion("Advanced Options", open=False):
-        seed = gr.Slider(label="Seed", minimum=0, maximum=1000000, step=1, value=171198)
+    with gr.Accordion("Step 4: Advanced Options (Optional)", open=False):
+        seed = gr.Slider(
+            label="4.1 Seed", minimum=0, maximum=1000000, step=1, value=171198
+        )
         inference_steps = gr.Slider(
-            label="Inference Steps", minimum=1, maximum=100, step=1, value=40
+            label="4.2 Inference Steps", minimum=1, maximum=100, step=1, value=40
         )
         images_per_prompt = gr.Slider(
-            label="Images per Prompt", minimum=1, maximum=10, step=1, value=1
+            label="4.3 Images per Prompt", minimum=1, maximum=10, step=1, value=1
         )
         guidance_scale = gr.Slider(
-            label="Guidance Scale", minimum=1.0, maximum=20.0, step=0.1, value=3.0
+            label="4.4 Guidance Scale", minimum=1.0, maximum=20.0, step=0.1, value=3.0
         )
 
         height_slider = gr.Slider(
-            label="Height", minimum=256, maximum=1024, step=64, value=704, visible=False
+            label="4.5 Height",
+            minimum=256,
+            maximum=1024,
+            step=64,
+            value=704,
+            visible=False,
         )
         width_slider = gr.Slider(
-            label="Width", minimum=256, maximum=1024, step=64, value=1216, visible=False
+            label="4.6 Width",
+            minimum=256,
+            maximum=1024,
+            step=64,
+            value=1216,
+            visible=False,
         )
         num_frames_slider = gr.Slider(
-            label="Number of Frames",
+            label="4.7 Number of Frames",
             minimum=1,
             maximum=200,
             step=1,
@@ -336,7 +341,12 @@ def create_advanced_options():
             visible=False,
         )
         frame_rate = gr.Slider(
-            label="Frame Rate", minimum=1, maximum=60, step=1, value=25, visible=False
+            label="4.8 Frame Rate",
+            minimum=1,
+            maximum=60,
+            step=1,
+            value=25,
+            visible=False,
         )
 
         return [
@@ -352,65 +362,80 @@ def create_advanced_options():
 
 
 # Define the Gradio interface with tabs
-with gr.Blocks() as iface:
+with gr.Blocks(theme=gr.themes.Soft()) as iface:
     gr.Markdown("# Video Generation with LTX Video")
 
     with gr.Tabs():
+        # Text to Video Tab
         with gr.TabItem("Text to Video"):
             with gr.Row():
                 with gr.Column():
                     txt2vid_prompt = gr.Textbox(
-                        label="Prompt",
-                        value="A man riding a motorcycle down a winding road, surrounded by lush, green scenery and distant mountains. The sky is clear with a few wispy clouds, and the sunlight glistens on the motorcycle as it speeds along. The rider is dressed in a black leather jacket and helmet, leaning slightly forward as the wind rustles through nearby trees. The wheels kick up dust, creating a slight trail behind the motorcycle, adding a sense of speed and excitement to the scene.",
+                        label="Step 1: Enter Your Prompt",
+                        placeholder="Describe the video you want to generate (minimum 50 characters)...",
+                        value="A man riding a motorcycle down a winding road, surrounded by lush, green scenery and distant mountains. The sky is clear with a few wispy clouds, and the sunlight glistens on the motorcycle as it speeds along.",
+                        lines=5,
                     )
                     txt2vid_negative_prompt = gr.Textbox(
-                        label="Negative Prompt",
+                        label="Step 2: Enter Negative Prompt (Optional)",
+                        placeholder="Describe what you don't want in the video...",
                         value="worst quality, inconsistent motion...",
+                        lines=2,
                     )
 
-                    # Preset dropdown for resolution and frame settings
                     txt2vid_preset = gr.Dropdown(
                         choices=[p["label"] for p in preset_options],
                         value="1216x704, 41 frames",
-                        label="Resolution Preset",
+                        label="Step 3: Choose Resolution Preset",
                     )
 
                     txt2vid_advanced = create_advanced_options()
-                    txt2vid_generate = gr.Button("Generate Video")
+                    txt2vid_generate = gr.Button(
+                        "Step 5: Generate Video", variant="primary", size="lg"
+                    )
 
                 with gr.Column():
-                    txt2vid_output = gr.Video(label="Generated Video")
+                    txt2vid_output = gr.Video(label="Step 6: Generated Output")
 
+        # Image to Video Tab
         with gr.TabItem("Image to Video"):
             with gr.Row():
                 with gr.Column():
-                    img2vid_image = gr.Image(type="filepath", label="Input Image")
+                    img2vid_image = gr.Image(
+                        type="filepath",
+                        label="Step 1: Upload Input Image",
+                        elem_id="image_upload",
+                    )
                     img2vid_prompt = gr.Textbox(
-                        label="Prompt",
-                        value="A man riding a motorcycle down a winding road, surrounded by lush, green scenery and distant mountains...",
+                        label="Step 2: Enter Your Prompt",
+                        placeholder="Describe how you want to animate the image (minimum 50 characters)...",
+                        value="A man riding a motorcycle down a winding road, surrounded by lush, green scenery...",
+                        lines=5,
                     )
                     img2vid_negative_prompt = gr.Textbox(
-                        label="Negative Prompt",
+                        label="Step 3: Enter Negative Prompt (Optional)",
+                        placeholder="Describe what you don't want in the video...",
                         value="worst quality, inconsistent motion...",
+                        lines=2,
                     )
 
                     img2vid_preset = gr.Dropdown(
                         choices=[p["label"] for p in preset_options],
                         value="1216x704, 41 frames",
-                        label="Resolution Preset",
+                        label="Step 4: Choose Resolution Preset",
                     )
 
                     img2vid_advanced = create_advanced_options()
-                    img2vid_generate = gr.Button("Generate Video")
+                    img2vid_generate = gr.Button(
+                        "Step 6: Generate Video", variant="primary", size="lg"
+                    )
 
                 with gr.Column():
-                    img2vid_output = gr.Video(label="Generated Video")
+                    img2vid_output = gr.Video(label="Step 7: Generated Output")
 
-    # Event handlers for text-to-video tab
+    # [Previous event handlers remain the same]
     txt2vid_preset.change(
-        fn=preset_changed,
-        inputs=[txt2vid_preset],
-        outputs=txt2vid_advanced[4:],  # height, width, num_frames, and their visibility
+        fn=preset_changed, inputs=[txt2vid_preset], outputs=txt2vid_advanced[4:]
     )
 
     txt2vid_generate.click(
@@ -419,11 +444,8 @@ with gr.Blocks() as iface:
         outputs=txt2vid_output,
     )
 
-    # Event handlers for image-to-video tab
     img2vid_preset.change(
-        fn=preset_changed,
-        inputs=[img2vid_preset],
-        outputs=img2vid_advanced[4:],  # height, width, num_frames, and their visibility
+        fn=preset_changed, inputs=[img2vid_preset], outputs=img2vid_advanced[4:]
     )
 
     img2vid_generate.click(