Complete UI redesign with improved tabs, better organization, and enhanced visual design

app.py

@@ -381,38 +381,78 @@ with gr.Blocks(
     </div>
     """)
     
-    with gr.Tabs():
-        with gr.Tab("Text-to-Image"):
+    with gr.Tabs() as tabs:
+        with gr.Tab("🖼️ Text-to-Image", id="image_tab"):
             with gr.Row():
-                with gr.Column():
-                    image_prompt = gr.Textbox(
-                        label="Prompt",
-                        placeholder="a film still of a cat playing piano",
-                        lines=3
+                with gr.Column(scale=1, min_width=400):
+                    gr.Markdown("### ⚙️ Generation Settings")
+                    with gr.Group():
+                        image_prompt = gr.Textbox(
+                            label="📝 Prompt",
+                            placeholder="a film still of a cat playing piano",
+                            lines=4,
+                            info="Describe the image you want to generate"
+                        )
+                        image_config = gr.Textbox(
+                            label="⚙️ Config Path",
+                            value="configs/starflow_3B_t2i_256x256.yaml",
+                            interactive=False,
+                            info="Model configuration file"
+                        )
+                    
+                    with gr.Group():
+                        gr.Markdown("#### 🎨 Image Settings")
+                        image_aspect = gr.Dropdown(
+                            label="Aspect Ratio",
+                            choices=["1:1", "2:3", "3:2", "16:9", "9:16", "4:5", "5:4"],
+                            value="1:1",
+                            info="Image dimensions ratio"
+                        )
+                        image_cfg = gr.Slider(
+                            label="CFG Scale",
+                            minimum=1.0,
+                            maximum=10.0,
+                            value=3.6,
+                            step=0.1,
+                            info="Classifier-free guidance scale (higher = more prompt adherence)"
+                        )
+                        image_seed = gr.Number(
+                            value=999,
+                            label="🎲 Seed",
+                            precision=0,
+                            info="Random seed for reproducibility"
+                        )
+                    
+                    # Hidden checkpoint field
+                    image_checkpoint = gr.Textbox(
+                        label="Model Checkpoint Path (auto-downloaded)",
+                        value=DEFAULT_IMAGE_CHECKPOINT,
+                        visible=False
                     )
-                    # Checkpoint upload hidden - using Model Hub instead
-                    image_checkpoint = gr.File(
-                        label="Model Checkpoint (.pth file) - Optional if already uploaded to Space",
-                        file_types=[".pth"],
-                        visible=False  # Hidden - using Model Hub
+                    
+                    image_btn = gr.Button(
+                        "✨ Generate Image",
+                        variant="primary",
+                        size="lg",
+                        elem_classes="generate-btn"
                     )
-                    image_config = gr.Textbox(
-                        label="Config Path",
-                        value="configs/starflow_3B_t2i_256x256.yaml",
-                        placeholder="configs/starflow_3B_t2i_256x256.yaml"
+                
+                with gr.Column(scale=1, min_width=500):
+                    gr.Markdown("### 🎨 Generated Image")
+                    image_output = gr.Image(
+                        label="",
+                        type="filepath",
+                        height=500,
+                        show_label=False
                     )
-                    image_aspect = gr.Dropdown(
-                        choices=["1:1", "2:3", "3:2", "16:9", "9:16", "4:5", "5:4"],
-                        value="1:1",
-                        label="Aspect Ratio"
+                    image_status = gr.Textbox(
+                        label="📊 Status",
+                        lines=12,
+                        max_lines=20,
+                        interactive=False,
+                        elem_classes="status-box",
+                        placeholder="Status messages will appear here..."
                     )
-                    image_cfg = gr.Slider(1.0, 10.0, value=3.6, step=0.1, label="CFG Scale")
-                    image_seed = gr.Number(value=999, label="Seed", precision=0)
-                    image_btn = gr.Button("Generate Image", variant="primary")
-                
-                with gr.Column():
-                    image_output = gr.Image(label="Generated Image")
-                    image_status = gr.Textbox(label="Status", interactive=False)
             
             image_btn.click(
                 fn=generate_image,
@@ -422,42 +462,92 @@ with gr.Blocks(
                 queue=True  # Use queue to handle long-running operations
             )
         
-        with gr.Tab("Text-to-Video"):
+        with gr.Tab("🎬 Text-to-Video", id="video_tab"):
             with gr.Row():
-                with gr.Column():
-                    video_prompt = gr.Textbox(
-                        label="Prompt",
-                        placeholder="a corgi dog looks at the camera",
-                        lines=3
-                    )
-                    # Checkpoint upload hidden - using Model Hub instead
-                    video_checkpoint = gr.File(
-                        label="Model Checkpoint (.pth file) - Optional if already uploaded to Space",
-                        file_types=[".pth"],
-                        visible=False  # Hidden - using Model Hub
+                with gr.Column(scale=1, min_width=400):
+                    gr.Markdown("### ⚙️ Generation Settings")
+                    with gr.Group():
+                        video_prompt = gr.Textbox(
+                            label="📝 Prompt",
+                            placeholder="a corgi dog looks at the camera",
+                            lines=4,
+                            info="Describe the video you want to generate"
+                        )
+                        video_config = gr.Textbox(
+                            label="⚙️ Config Path",
+                            value="configs/starflow-v_7B_t2v_caus_480p.yaml",
+                            interactive=False,
+                            info="Model configuration file"
+                        )
+                    
+                    with gr.Group():
+                        gr.Markdown("#### 🎬 Video Settings")
+                        video_aspect = gr.Dropdown(
+                            label="Aspect Ratio",
+                            choices=["16:9", "1:1", "4:3"],
+                            value="16:9",
+                            info="Video dimensions ratio"
+                        )
+                        video_cfg = gr.Slider(
+                            label="CFG Scale",
+                            minimum=1.0,
+                            maximum=10.0,
+                            value=3.5,
+                            step=0.1,
+                            info="Classifier-free guidance scale"
+                        )
+                        video_seed = gr.Number(
+                            value=99,
+                            label="🎲 Seed",
+                            precision=0,
+                            info="Random seed for reproducibility"
+                        )
+                        video_length = gr.Slider(
+                            label="Target Length (frames)",
+                            minimum=81,
+                            maximum=481,
+                            value=81,
+                            step=80,
+                            info="Number of frames in the generated video"
+                        )
+                    
+                    with gr.Group():
+                        gr.Markdown("#### 🖼️ Optional Input")
+                        video_input_image = gr.Image(
+                            label="Input Image (optional)",
+                            type="filepath",
+                            info="Provide an initial image for video generation"
+                        )
+                    
+                    # Hidden checkpoint field
+                    video_checkpoint = gr.Textbox(
+                        label="Model Checkpoint Path (auto-downloaded)",
+                        value=DEFAULT_VIDEO_CHECKPOINT,
+                        visible=False
                     )
-                    video_config = gr.Textbox(
-                        label="Config Path",
-                        value="configs/starflow-v_7B_t2v_caus_480p.yaml",
-                        placeholder="configs/starflow-v_7B_t2v_caus_480p.yaml"
+                    
+                    video_btn = gr.Button(
+                        "✨ Generate Video",
+                        variant="primary",
+                        size="lg",
+                        elem_classes="generate-btn"
                     )
-                    video_aspect = gr.Dropdown(
-                        choices=["16:9", "1:1", "4:3"],
-                        value="16:9",
-                        label="Aspect Ratio"
+                
+                with gr.Column(scale=1, min_width=500):
+                    gr.Markdown("### 🎬 Generated Video")
+                    video_output = gr.Video(
+                        label="",
+                        height=500,
+                        show_label=False
                     )
-                    video_cfg = gr.Slider(1.0, 10.0, value=3.5, step=0.1, label="CFG Scale")
-                    video_seed = gr.Number(value=99, label="Seed", precision=0)
-                    video_length = gr.Slider(81, 481, value=81, step=80, label="Target Length (frames)")
-                    video_input_image = gr.File(
-                        label="Input Image (optional, for image-to-video)",
-                        file_types=["image"]
+                    video_status = gr.Textbox(
+                        label="📊 Status",
+                        lines=12,
+                        max_lines=20,
+                        interactive=False,
+                        elem_classes="status-box",
+                        placeholder="Status messages will appear here..."
                     )
-                    video_btn = gr.Button("Generate Video", variant="primary")
-                
-                with gr.Column():
-                    video_output = gr.Video(label="Generated Video")
-                    video_status = gr.Textbox(label="Status", interactive=False)
             
             video_btn.click(
                 fn=generate_video,