Update app.py

app.py

@@ -73,96 +73,100 @@ def load_example():
     example_image = Image.open(example_image_path)
     return example_prompt, example_cfg_scale, example_steps, True, example_seed, example_width, example_height, example_lora_scale, example_image
 
+
 css = """
-.container {max-width: 1200px; margin: auto; padding: 20px;}
+.container {max-width: 1400px; margin: auto; padding: 20px;}
 .header {text-align: center; margin-bottom: 30px;}
-.generate-btn {background-color: #2ecc71 !important; color: white !important;}
+.generate-btn {background-color: #2ecc71 !important; color: white !important; margin: 20px auto !important; display: block !important; width: 200px !important;}
 .generate-btn:hover {background-color: #27ae60 !important;}
 .parameter-box {background-color: #f5f6fa; padding: 20px; border-radius: 10px; margin: 10px 0;}
-.result-box {background-color: #f5f6fa; padding: 20px; border-radius: 10px;}
+.result-box {background-color: #f5f6fa; padding: 20px; border-radius: 10px; margin: 0 auto 20px auto; text-align: center;}
+.image-output {margin: 0 auto; display: block; max-width: 800px !important;}
+.accordion {margin-top: 20px;}
 """
 
 with gr.Blocks(css=css) as app:
     with gr.Column(elem_classes="container"):
         gr.Markdown("# 🎨 Flux ART Image Generator", elem_classes="header")
         
-        with gr.Row(equal_height=True):
-            with gr.Column(scale=3):
-                with gr.Group(elem_classes="parameter-box"):
-                    prompt = gr.TextArea(
-                        label="✍️ Your Prompt (한글 또는 영어)",
-                        placeholder="이미지를 설명하세요... (한글 입력시 자동으로 영어로 번역됩니다)",
-                        lines=5
-                    )
-                    
-                with gr.Group(elem_classes="parameter-box"):
-                    gr.Markdown("### 🎛️ Generation Parameters")
-                    with gr.Row():
-                        with gr.Column():
-                            cfg_scale = gr.Slider(
-                                label="CFG Scale",
-                                minimum=1,
-                                maximum=20,
-                                step=0.5,
-                                value=example_cfg_scale
-                            )
-                            steps = gr.Slider(
-                                label="Steps",
-                                minimum=1,
-                                maximum=100,
-                                step=1,
-                                value=example_steps
-                            )
-                            lora_scale = gr.Slider(
-                                label="LoRA Scale",
-                                minimum=0,
-                                maximum=1,
-                                step=0.01,
-                                value=example_lora_scale
-                            )
+        # 이미지 출력 영역을 먼저 배치
+        with gr.Group(elem_classes="result-box"):
+            gr.Markdown("### 🖼️ Generated Image")
+            result = gr.Image(label="Result", elem_classes="image-output")
+            
+        # 생성 버튼
+        generate_button = gr.Button(
+            "🚀 Generate Image",
+            elem_classes="generate-btn"
+        )
+        
+        # 옵션들을 아코디언으로 구성
+        with gr.Accordion("🎨 Generation Options", open=False, elem_classes="accordion"):
+            with gr.Group(elem_classes="parameter-box"):
+                prompt = gr.TextArea(
+                    label="✍️ Your Prompt (한글 또는 영어)",
+                    placeholder="이미지를 설명하세요... (한글 입력시 자동으로 영어로 번역됩니다)",
+                    lines=5
+                )
                 
-                with gr.Group(elem_classes="parameter-box"):
-                    gr.Markdown("### 📐 Image Dimensions")
-                    with gr.Row():
-                        width = gr.Slider(
-                            label="Width",
-                            minimum=256,
-                            maximum=1536,
-                            step=64,
-                            value=example_width
-                        )
-                        height = gr.Slider(
-                            label="Height",
-                            minimum=256,
-                            maximum=1536,
-                            step=64,
-                            value=example_height
+            with gr.Group(elem_classes="parameter-box"):
+                gr.Markdown("### 🎛️ Generation Parameters")
+                with gr.Row():
+                    with gr.Column():
+                        cfg_scale = gr.Slider(
+                            label="CFG Scale",
+                            minimum=1,
+                            maximum=20,
+                            step=0.5,
+                            value=example_cfg_scale
                         )
-                
-                with gr.Group(elem_classes="parameter-box"):
-                    gr.Markdown("### 🎲 Seed Settings")
-                    with gr.Row():
-                        randomize_seed = gr.Checkbox(
-                            True,
-                            label="Randomize seed"
+                        steps = gr.Slider(
+                            label="Steps",
+                            minimum=1,
+                            maximum=100,
+                            step=1,
+                            value=example_steps
                         )
-                        seed = gr.Slider(
-                            label="Seed",
+                        lora_scale = gr.Slider(
+                            label="LoRA Scale",
                             minimum=0,
-                            maximum=MAX_SEED,
-                            step=1,
-                            value=example_seed
+                            maximum=1,
+                            step=0.01,
+                            value=example_lora_scale
                         )
-                
-                generate_button = gr.Button(
-                    "🚀 Generate Image",
-                    elem_classes="generate-btn"
-                )
             
-            with gr.Column(scale=2):
-                with gr.Group(elem_classes="result-box"):
-                    gr.Markdown("### 🖼️ Generated Image")
-                    result = gr.Image(label="Result")
+            with gr.Group(elem_classes="parameter-box"):
+                gr.Markdown("### 📐 Image Dimensions")
+                with gr.Row():
+                    width = gr.Slider(
+                        label="Width",
+                        minimum=256,
+                        maximum=1536,
+                        step=64,
+                        value=example_width
+                    )
+                    height = gr.Slider(
+                        label="Height",
+                        minimum=256,
+                        maximum=1536,
+                        step=64,
+                        value=example_height
+                    )
+            
+            with gr.Group(elem_classes="parameter-box"):
+                gr.Markdown("### 🎲 Seed Settings")
+                with gr.Row():
+                    randomize_seed = gr.Checkbox(
+                        True,
+                        label="Randomize seed"
+                    )
+                    seed = gr.Slider(
+                        label="Seed",
+                        minimum=0,
+                        maximum=MAX_SEED,
+                        step=1,
+                        value=example_seed
+                    )
 
     app.load(
         load_example,