Update app.py

app.py

@@ -549,75 +549,56 @@ def make_custom_css():
         font-weight: 800;
         text-shadow: 1px 2px 2px rgba(0,0,0,0.2);
     }
-    .container {
+    .three-column-container {
         display: flex;
         gap: 20px;
+        min-height: 800px;
     }
     .settings-panel {
-        flex: 0 0 350px;
+        flex: 0 0 280px;
         background: #ffffff;
-        padding: 20px;
+        padding: 15px;
         border-radius: 15px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     }
-    .settings-panel h3 {
-        color: #2d7eeb;
-        margin-bottom: 20px;
-        font-size: 1.3rem;
-        border-bottom: 2px solid #4b9ffa;
-        padding-bottom: 10px;
-    }
     .main-panel {
         flex: 1;
         background: #ffffff;
         padding: 20px;
         border-radius: 15px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
     }
-    .gr-form {
-        border: none !important;
-        background: transparent !important;
-    }
-    .gr-box {
-        border: 1px solid #e0e0f0 !important;
-        background: #f8f9fe !important;
-        border-radius: 10px !important;
-        margin-bottom: 15px !important;
-        transition: all 0.3s ease;
-    }
-    .gr-box:hover {
-        border-color: #4b9ffa !important;
-        box-shadow: 0 2px 8px rgba(75, 159, 250, 0.1) !important;
-    }
-    .gr-input, .gr-button {
-        border-radius: 8px !important;
-        transition: all 0.3s ease !important;
-    }
-    .gr-button {
-        min-height: 45px !important;
-        font-weight: 600 !important;
-        text-transform: uppercase !important;
-        letter-spacing: 0.5px !important;
-    }
-    .gr-button:hover {
-        transform: translateY(-1px) !important;
+    .output-panel {
+        flex: 0 0 400px;
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 15px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     }
-    .gr-button.primary-btn {
-        background: #4b9ffa !important;
-        color: white !important;
-        border: none !important;
+    .settings-panel h3 {
+        color: #2d7eeb;
+        margin-bottom: 15px;
+        font-size: 1.1rem;
+        border-bottom: 2px solid #4b9ffa;
+        padding-bottom: 8px;
     }
-    .gr-button.secondary-btn {
-        background: #ff4d4d !important;
-        color: white !important;
-        border: none !important;
+    .prompt-container {
+        min-height: 200px;
     }
-    .progress-container {
-        margin-top: 20px;
-        padding: 15px;
+    .quick-prompts {
+        margin-top: 10px;
+        padding: 10px;
         background: #f8f9fe;
         border-radius: 10px;
     }
+    .button-container {
+        display: flex;
+        gap: 10px;
+        margin-top: 15px;
+    }
     """
     return base_progress_css + extra_css
 
@@ -632,39 +613,26 @@ with block:
             Just upload an image, write a prompt, and watch the magic happen!"""
         )
 
-    with gr.Row(elem_classes="container"):
+    with gr.Row(elem_classes="three-column-container"):
+        # Left Column - Settings
         with gr.Column(elem_classes="settings-panel"):
-            gr.Markdown("### Settings")
+            gr.Markdown("### Generation Settings")
             
-            # Basic Settings
             with gr.Group():
-                input_image = gr.Image(
-                    label="Upload Image", 
-                    type="numpy",
-                    height=320
-                )
-                prompt = gr.Textbox(
-                    label="Describe the animation you want",
-                    placeholder="E.g., The character dances gracefully with flowing movements...",
-                    lines=3
-                )
                 total_second_length = gr.Slider(
-                    label="Video Length (Seconds)",
+                    label="Duration (Seconds)",
                     minimum=1,
                     maximum=60,
                     value=2,
                     step=0.1
                 )
-
-            # Advanced Settings
-            with gr.Group():
                 steps = gr.Slider(
-                    label="Generation Steps",
+                    label="Quality Steps",
                     minimum=1,
                     maximum=100,
                     value=25,
                     step=1,
-                    info='Higher values = better quality but slower'
+                    info='Higher = better quality'
                 )
                 gs = gr.Slider(
                     label="Animation Strength",
@@ -672,34 +640,33 @@ with block:
                     maximum=32.0,
                     value=10.0,
                     step=0.1,
-                    info='Controls how closely the animation follows the prompt'
                 )
+                mp4_crf = gr.Slider(
+                    label="Video Quality",
+                    minimum=0,
+                    maximum=51,
+                    value=16,
+                    step=1,
+                )
+            
+            gr.Markdown("### Advanced")
+            with gr.Group():
                 use_teacache = gr.Checkbox(
                     label='Fast Mode',
                     value=True,
-                    info='Faster generation but may affect quality of fine details'
+                    info='Faster but may affect details'
                 )
                 gpu_memory_preservation = gr.Slider(
                     label="VRAM Usage",
                     minimum=6,
                     maximum=128,
                     value=6,
-                    step=0.1,
-                    info="Increase if you get out of memory errors"
-                )
-                mp4_crf = gr.Slider(
-                    label="Video Quality",
-                    minimum=0,
-                    maximum=51,
-                    value=16,
-                    step=1,
-                    info="Lower value = higher quality (0-51)"
+                    step=1
                 )
                 seed = gr.Number(
                     label="Seed",
                     value=31337,
-                    precision=0,
-                    info="Change for different results"
+                    precision=0
                 )
 
             # Hidden settings
@@ -708,7 +675,31 @@ with block:
             cfg = gr.Slider(visible=False, value=1.0)
             rs = gr.Slider(visible=False, value=0.0)
 
-            with gr.Row():
+        # Middle Column - Main Content
+        with gr.Column(elem_classes="main-panel"):
+            input_image = gr.Image(
+                label="Upload Your Image",
+                type="numpy",
+                height=320
+            )
+            
+            with gr.Group(elem_classes="prompt-container"):
+                prompt = gr.Textbox(
+                    label="Describe the animation you want",
+                    placeholder="E.g., The character dances gracefully with flowing movements...",
+                    lines=4
+                )
+                
+                with gr.Group(elem_classes="quick-prompts"):
+                    gr.Markdown("### 💡 Quick Prompts")
+                    example_quick_prompts = gr.Dataset(
+                        samples=quick_prompts,
+                        label='Click to use',
+                        samples_per_page=3,
+                        components=[prompt]
+                    )
+            
+            with gr.Group(elem_classes="button-container"):
                 start_button = gr.Button(
                     value="▶️ Generate Animation",
                     elem_classes=["primary-btn"]
@@ -719,7 +710,8 @@ with block:
                     interactive=False
                 )
 
-        with gr.Column(elem_classes="main-panel"):
+        # Right Column - Output
+        with gr.Column(elem_classes="output-panel"):
             preview_image = gr.Image(
                 label="Generation Preview",
                 height=200,
@@ -729,7 +721,7 @@ with block:
                 label="Generated Animation",
                 autoplay=True,
                 show_share_button=True,
-                height=512,
+                height=400,
                 loop=True
             )
             with gr.Group(elem_classes="progress-container"):
@@ -740,16 +732,6 @@ with block:
                     elem_classes='no-generating-animation'
                 )
 
-    # Quick Prompts Section
-    with gr.Group():
-        gr.Markdown("### 💡 Quick Prompt Ideas")
-        example_quick_prompts = gr.Dataset(
-            samples=quick_prompts,
-            label='Click any prompt to try it',
-            samples_per_page=5,
-            components=[prompt]
-        )
-
     # Setup callbacks
     ips = [
         input_image, prompt, n_prompt, seed,