Update app.py

app.py

@@ -316,12 +316,12 @@ with gr.Blocks(css="""
         
         # 입력 이미지 UI를 적절한 간격으로 세로 배치
         with gr.Column():
-            with gr.Box():
-                image1_input = gr.Image(type="pil", label="#1", image_mode="RGB", height=200, width=200)
-            with gr.Box():
-                image2_input = gr.Image(type="pil", label="#2", image_mode="RGB", height=200, width=200)
-            with gr.Box():
-                image3_input = gr.Image(type="pil", label="#3", image_mode="RGB", height=200, width=200)
+            with gr.Row():
+                image1_input = gr.Image(type="pil", label="#1", height=200, width=200)
+                image2_input = gr.Image(type="pil", label="#2", height=200, width=200)
+            with gr.Row():
+                image3_input = gr.Image(type="pil", label="#3", height=200, width=200)
+                placeholder_input = gr.Textbox(visible=False)  # 레이아웃 조정용 더미 컴포넌트
         
         # 프롬프트 입력
         prompt_input = gr.Textbox(
@@ -332,31 +332,29 @@ with gr.Blocks(css="""
         
         # 버튼 스타일 개선 
         with gr.Column(variant="panel"):
+            gr.HTML("<h4 style='margin-bottom: 0.5rem; text-align: center; width: 100%;'>작업 선택</h4>")
             with gr.Row():
-                gr.HTML("<h4 style='margin-bottom: 0.5rem; text-align: center; width: 100%;'>작업 선택</h4>")
-            with gr.Column():
-                image_change_btn = gr.Button("이미지변경", scale=1, size="sm")
-                text_remove_btn = gr.Button("글자지우기", scale=1, size="sm")
-                clothes_change_btn = gr.Button("가상 상품착용", scale=1, size="sm")
-                background_change_btn = gr.Button("배경바꾸기", scale=1, size="sm")
-                composite_product_btn = gr.Button("부분지우기", scale=1, size="sm")
+                image_change_btn = gr.Button("이미지변경", scale=1)
+                text_remove_btn = gr.Button("글자지우기", scale=1)
+                clothes_change_btn = gr.Button("가상 상품착용", scale=1)
+        
+        with gr.Row():
+                background_change_btn = gr.Button("배경바꾸기", scale=1)
+                composite_product_btn = gr.Button("부분지우기", scale=1)
         
         # 생성 버튼을 더 눈에 띄게 만들기
-        with gr.Row(visible=True):
-            submit_btn = gr.Button("이미지 생성 (4장)", variant="primary", scale=1, size="lg")
+        submit_btn = gr.Button("이미지 생성 (4장)", variant="primary", size="lg")
         
         # 출력 섹션
         gr.HTML("<h3 style='text-align: center; margin-top: 1.5rem; margin-bottom: 0.5rem;'>생성된 이미지</h3>")
         
         # 출력 이미지 UI를 세로로 배치
         with gr.Column():
-            with gr.Box():
+            with gr.Row():
                 output_image1 = gr.Image(label="생성된 이미지 #1", height=300, width=300)
-            with gr.Box():
                 output_image2 = gr.Image(label="생성된 이미지 #2", height=300, width=300)
-            with gr.Box():
+            with gr.Row():
                 output_image3 = gr.Image(label="생성된 이미지 #3", height=300, width=300)
-            with gr.Box():
                 output_image4 = gr.Image(label="생성된 이미지 #4", height=300, width=300)
         
         # 상태 및 프롬프트 정보