Update app.py

app.py

@@ -715,6 +715,30 @@ input:focus, textarea:focus {
     width: 100% !important;
     max-width: 100% !important;
 }
+
+/* 탭 컨테이너 여백 조정 */
+.tab-content {
+    padding: 0 20px !important;
+    max-width: 95% !important;  /* 전체 너비를 95%로 제한 */
+    margin: 0 auto !important;
+}
+
+/* 슬라이더 크기 조정 */
+.slider-container {
+    max-width: 95% !important;
+}
+
+/* 버튼 크기 조정 */
+.button_total {
+    padding: 8px 15px !important;
+    font-size: 0.9em !important;
+}
+
+/* 입력 필드 여백 조정 */
+.input-container {
+    margin: 5px !important;
+    padding: 5px !important;
+}
 '''
 
 
@@ -745,65 +769,48 @@ with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
             preview=False
         )    
     
-    
+with gr.Tab(label="Generate"):
+          # Prompt and Generate Button - 비율 조정
+          with gr.Row():
+               with gr.Column(scale=4):  # 3에서 4로 증가
+                    prompt = gr.Textbox(label="Prompt", lines=1, placeholder="Type a prompt after selecting a LoRA")
+               with gr.Column(scale=1):
+                    generate_button = gr.Button("Generate", variant="primary", elem_classes=["button_total"])
+
+          # LoRA Selection Area - 비율 조정
+          with gr.Row(elem_id="loaded_loras"):
+               with gr.Column(scale=1, min_width=20):  # min_width 감소
+                    randomize_button = gr.Button("🎲", variant="secondary", scale=1, elem_id="random_btn")
+               
+               # LoRA 1 - 비율 조정
+               with gr.Column(scale=6):  # 8에서 6으로 감소
+                    with gr.Row():
+                         with gr.Column(scale=0, min_width=40):  # min_width 감소
+                              lora_image_1 = gr.Image(label="LoRA 1 Image", interactive=False, min_width=40, width=40, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=40)
+                         with gr.Column(scale=3, min_width=80):  # min_width 감소
+                              selected_info_1 = gr.Markdown("Select a LoRA 1")
+                         with gr.Column(scale=4, min_width=40):  # min_width 감소
+                              lora_scale_1 = gr.Slider(label="LoRA 1 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
+                    with gr.Row():
+                         remove_button_1 = gr.Button("Remove", size="sm")
 
-        
-    with gr.Tab(label="Generate"):
-        # Prompt and Generate Button
-        with gr.Row():
-            with gr.Column(scale=3):
-                prompt = gr.Textbox(label="Prompt", lines=1, placeholder="Type a prompt after selecting a LoRA")
-            with gr.Column(scale=1):
-                generate_button = gr.Button("Generate", variant="primary", elem_classes=["button_total"])
-
-        # LoRA Selection Area
-        with gr.Row(elem_id="loaded_loras"):
-            # Randomize Button
-            with gr.Column(scale=1, min_width=25):
-                randomize_button = gr.Button("🎲", variant="secondary", scale=1, elem_id="random_btn")
-            
-            # LoRA 1
-            with gr.Column(scale=8):
-                with gr.Row():
-                    with gr.Column(scale=0, min_width=50):
-                        lora_image_1 = gr.Image(label="LoRA 1 Image", interactive=False, min_width=50, width=50, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=50)
-                    with gr.Column(scale=3, min_width=100):
-                        selected_info_1 = gr.Markdown("Select a LoRA 1")
-                    with gr.Column(scale=5, min_width=50):
-                        lora_scale_1 = gr.Slider(label="LoRA 1 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
-                with gr.Row():
-                    remove_button_1 = gr.Button("Remove", size="sm")
+               # LoRA 2 - 비율 조정
+               with gr.Column(scale=6):  # 8에서 6으로 감소
+                    # (LoRA 2의 내부 구조도 LoRA 1과 동일하게 조정)
+
+               # LoRA 3 - 비율 조정
+               with gr.Column(scale=6):  # 8에서 6으로 감소
+                    # (LoRA 3의 내부 구조도 LoRA 1과 동일하게 조정)
+
+          # Result and Progress Area - 여백 추가
+          with gr.Column(scale=1):
+               progress_bar = gr.Markdown(elem_id="progress", visible=False)
+               result = gr.Image(label="Generated Image", interactive=False)
+               with gr.Accordion("History", open=False):
+                    history_gallery = gr.Gallery(label="History", columns=6, object_fit="contain", interactive=False)
 
-            # LoRA 2
-            with gr.Column(scale=8):
-                with gr.Row():
-                    with gr.Column(scale=0, min_width=50):
-                        lora_image_2 = gr.Image(label="LoRA 2 Image", interactive=False, min_width=50, width=50, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=50)
-                    with gr.Column(scale=3, min_width=100):
-                        selected_info_2 = gr.Markdown("Select a LoRA 2")
-                    with gr.Column(scale=5, min_width=50):
-                        lora_scale_2 = gr.Slider(label="LoRA 2 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
-                with gr.Row():
-                    remove_button_2 = gr.Button("Remove", size="sm")
 
-            # LoRA 3
-            with gr.Column(scale=8):
-                with gr.Row():
-                    with gr.Column(scale=0, min_width=50):
-                        lora_image_3 = gr.Image(label="LoRA 3 Image", interactive=False, min_width=50, width=50, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=50)
-                    with gr.Column(scale=3, min_width=100):
-                        selected_info_3 = gr.Markdown("Select a LoRA 3")
-                    with gr.Column(scale=5, min_width=50):
-                        lora_scale_3 = gr.Slider(label="LoRA 3 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
-                with gr.Row():
-                    remove_button_3 = gr.Button("Remove", size="sm")
 
-        # Result and Progress Area
-        with gr.Column():
-            progress_bar = gr.Markdown(elem_id="progress", visible=False)
-            result = gr.Image(label="Generated Image", interactive=False)
-            with gr.Accordion("History", open=False):
-                history_gallery = gr.Gallery(label="History", columns=6, object_fit="contain", interactive=False)
 
         # Advanced Settings
         with gr.Row():
@@ -822,8 +829,8 @@ with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
                         randomize_seed = gr.Checkbox(True, label="Randomize seed")
                         seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0, randomize=True)
 
-        # Custom LoRA Section
-        with gr.Column():
+          # Custom LoRA Section - 여백 추가
+        with gr.Column(scale=1):
             with gr.Group():
                 with gr.Row(elem_id="custom_lora_structure"):
                     custom_lora = gr.Textbox(label="Custom LoRA", info="LoRA Hugging Face path or *.safetensors public URL", placeholder="ginipick/flux-lora-eric-cat", scale=3, min_width=150)