Update app.py

app.py

@@ -12,7 +12,6 @@ from diffusers.utils import load_image
 from diffusers.utils import export_to_video
 import random
 from transformers import pipeline
-
 # Translation model load
 translator = pipeline("translation", model="Helsinki-NLP/opus-mt-ko-en")
 
@@ -156,120 +155,206 @@ examples = [
     ["여자", "아기", "노인", 2.5]
 ]
 
+
+
 css = """
 footer {
     visibility: hidden;
 }
-"""
 
+.container {
+    max-width: 1200px;
+    margin: auto;
+}
+
+.main-panel {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.controls-panel {
+    background-color: rgba(255, 255, 255, 0.02);
+    border-radius: 8px;
+    padding: 16px;
+}
+
+.image-display {
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.slider-container {
+    padding: 10px 0;
+}
+
+.advanced-panel {
+    margin-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 20px;
+}
+"""
 
 with gr.Blocks(theme="Yntec/HaleyCH_Theme_Orange", css=css) as demo:
     x_concept_1 = gr.State("")
     x_concept_2 = gr.State("")
     total_images = gr.Gallery(visible=False)
-
     avg_diff_x = gr.State()
     recalc_directions = gr.State(False)
-    
-    with gr.Row():
-        with gr.Column():
-            with gr.Group():
-                prompt = gr.Textbox(label=english_labels["Prompt"], 
-                                  info="Enter the description", 
-                                  placeholder="A dog in the park")
-                with gr.Row():
-                    concept_1 = gr.Textbox(label=english_labels["1st direction to steer"], 
-                                         info="Initial state", 
-                                         placeholder="winter")
-                    concept_2 = gr.Textbox(label=english_labels["2nd direction to steer"], 
-                                         info="Final state", 
-                                         placeholder="summer")
-            x = gr.Slider(minimum=0, 
-                         value=1.75, 
-                         step=0.1, 
-                         maximum=4.0, 
-                         label=english_labels["Strength"], 
-                         info="Maximum strength for each direction (above 2.5 may be unstable)")
-            submit = gr.Button(english_labels["Generate directions"])
-        with gr.Column():
-            with gr.Group(elem_id="group"):
-                post_generation_image = gr.Image(label=english_labels["Generated Images"], 
-                                               type="filepath", 
-                                               elem_id="interactive")
-                post_generation_slider = gr.Slider(minimum=-10, 
-                                                 maximum=10, 
-                                                 value=0, 
-                                                 step=1, 
-                                                 label=english_labels["From 1st to 2nd direction"])
-    with gr.Row():
+
+    with gr.Row(elem_classes="container"):
+        # Left Column - Controls
         with gr.Column(scale=4):
-            image_seq = gr.Image(label=english_labels["Strip"], 
-                               elem_id="strip", 
-                               height=80)
-        with gr.Column(scale=2, min_width=100):
-            output_image = gr.Video(label=english_labels["Looping video"], 
-                                  elem_id="video", 
-                                  loop=True, 
-                                  autoplay=True)
-    with gr.Accordion(label=english_labels["Advanced options"], open=False):
-        interm_steps = gr.Slider(label=english_labels["Num of intermediate images"], 
-                               minimum=3, 
-                               value=7, 
-                               maximum=65, 
-                               step=2)
-        with gr.Row():
-            iterations = gr.Slider(label=english_labels["Num iterations for clip directions"], 
-                                 minimum=0, 
-                                 value=200, 
-                                 maximum=400, 
-                                 step=1)
-            steps = gr.Slider(label=english_labels["Num inference steps"], 
-                            minimum=1, 
-                            value=3, 
-                            maximum=4, 
-                            step=1)
-        with gr.Row():
-            guidance_scale = gr.Slider(
-                label=english_labels["Guidance scale"],
-                minimum=0.1,
-                maximum=10.0,
-                step=0.1,
-                value=3.5,
-            )
-            with gr.Column():
-                randomize_seed = gr.Checkbox(True, label=english_labels["Randomize seed"])
-                seed = gr.Slider(minimum=0, 
-                               maximum=MAX_SEED, 
-                               step=1, 
-                               label=english_labels["Seed"], 
-                               interactive=True, 
-                               randomize=True)
-
-    examples_gradio = gr.Examples(
+            with gr.Group(elem_classes="main-panel"):
+                gr.Markdown("### Image Generation Controls")
+                with gr.Group(elem_classes="controls-panel"):
+                    prompt = gr.Textbox(
+                        label=english_labels["Prompt"],
+                        info="Enter the description",
+                        placeholder="A dog in the park",
+                        lines=2
+                    )
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            concept_1 = gr.Textbox(
+                                label=english_labels["1st direction to steer"],
+                                info="Initial state",
+                                placeholder="winter"
+                            )
+                        with gr.Column(scale=1):
+                            concept_2 = gr.Textbox(
+                                label=english_labels["2nd direction to steer"],
+                                info="Final state",
+                                placeholder="summer"
+                            )
+                    
+                    with gr.Row(elem_classes="slider-container"):
+                        x = gr.Slider(
+                            minimum=0,
+                            value=1.75,
+                            step=0.1,
+                            maximum=4.0,
+                            label=english_labels["Strength"],
+                            info="Maximum strength for each direction (above 2.5 may be unstable)"
+                        )
+                    
+                    submit = gr.Button(english_labels["Generate directions"], size="lg", variant="primary")
+
+            # Advanced Options Panel
+            with gr.Accordion(label=english_labels["Advanced options"], open=False, elem_classes="advanced-panel"):
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        interm_steps = gr.Slider(
+                            label=english_labels["Num of intermediate images"],
+                            minimum=3,
+                            value=7,
+                            maximum=65,
+                            step=2
+                        )
+                    with gr.Column(scale=1):
+                        guidance_scale = gr.Slider(
+                            label=english_labels["Guidance scale"],
+                            minimum=0.1,
+                            maximum=10.0,
+                            step=0.1,
+                            value=3.5
+                        )
+                
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        iterations = gr.Slider(
+                            label=english_labels["Num iterations for clip directions"],
+                            minimum=0,
+                            value=200,
+                            maximum=400,
+                            step=1
+                        )
+                    with gr.Column(scale=1):
+                        steps = gr.Slider(
+                            label=english_labels["Num inference steps"],
+                            minimum=1,
+                            value=3,
+                            maximum=4,
+                            step=1
+                        )
+                
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        randomize_seed = gr.Checkbox(
+                            True,
+                            label=english_labels["Randomize seed"]
+                        )
+                    with gr.Column(scale=1):
+                        seed = gr.Slider(
+                            minimum=0,
+                            maximum=MAX_SEED,
+                            step=1,
+                            label=english_labels["Seed"],
+                            interactive=True,
+                            randomize=True
+                        )
+
+        # Right Column - Output
+        with gr.Column(scale=6):
+            with gr.Group(elem_classes="main-panel"):
+                gr.Markdown("### Generated Results")
+                with gr.Row():
+                    with gr.Column():
+                        post_generation_image = gr.Image(
+                            label=english_labels["Generated Images"],
+                            type="filepath",
+                            elem_id="interactive",
+                            elem_classes="image-display"
+                        )
+                        post_generation_slider = gr.Slider(
+                            minimum=-10,
+                            maximum=10,
+                            value=0,
+                            step=1,
+                            label=english_labels["From 1st to 2nd direction"]
+                        )
+
+                with gr.Row():
+                    with gr.Column(scale=3):
+                        image_seq = gr.Image(
+                            label=english_labels["Strip"],
+                            elem_id="strip",
+                            height=100
+                        )
+                    with gr.Column(scale=2):
+                        output_image = gr.Video(
+                            label=english_labels["Looping video"],
+                            elem_id="video",
+                            loop=True,
+                            autoplay=True,
+                            height=100
+                        )
+
+    # Examples Section
+    gr.Examples(
         examples=examples,
         inputs=[prompt, concept_1, concept_2, x],
         fn=generate,
-        outputs=[x_concept_1, x_concept_2, avg_diff_x, output_image, image_seq, total_images, 
+        outputs=[x_concept_1, x_concept_2, avg_diff_x, output_image, image_seq, total_images,
                 post_generation_image, post_generation_slider, seed],
         cache_examples="lazy"
     )
 
+    # Event Handlers
     submit.click(
         fn=generate,
-        inputs=[prompt, concept_1, concept_2, x, randomize_seed, seed, recalc_directions, 
-                iterations, steps, interm_steps, guidance_scale, x_concept_1, x_concept_2, 
+        inputs=[prompt, concept_1, concept_2, x, randomize_seed, seed, recalc_directions,
+                iterations, steps, interm_steps, guidance_scale, x_concept_1, x_concept_2,
                 avg_diff_x, total_images],
-        outputs=[x_concept_1, x_concept_2, avg_diff_x, output_image, image_seq, total_images, 
+        outputs=[x_concept_1, x_concept_2, avg_diff_x, output_image, image_seq, total_images,
                 post_generation_image, post_generation_slider, seed]
     )
-    iterations.change(
-        fn=reset_recalc_directions,
-        outputs=[recalc_directions]
-    )
-    seed.change(
-        fn=reset_recalc_directions,
-        outputs=[recalc_directions]
-    )
+
+    iterations.change(fn=reset_recalc_directions, outputs=[recalc_directions])
+    seed.change(fn=reset_recalc_directions, outputs=[recalc_directions])
     post_generation_slider.change(
         fn=update_pre_generated_images,
         inputs=[post_generation_slider, total_images],
@@ -278,6 +363,6 @@ with gr.Blocks(theme="Yntec/HaleyCH_Theme_Orange", css=css) as demo:
         show_progress="hidden",
         concurrency_limit=None
     )
-        
+
 if __name__ == "__main__":
     demo.launch()