Update app.py

app.py

@@ -299,64 +299,78 @@ with gr.Blocks(css="""
     .input-image {height: 200px; width: 200px;}
     .image-row {display: flex; justify-content: center;}
 """) as demo:
-    gr.HTML(
-        """
-        <div style="text-align: center; margin-bottom: 1rem;">
-            <h1>4장 이미지 생성기 (예제 포함)</h1>
-            <p>이미지를 업로드하고 "이미지 생성" 버튼을 클릭하면 차례로 4장의 이미지가 생성됩니다.</p>
-            <p>모든 이미지는 고정된 크기로 표시됩니다.</p>
-        </div>
-        """
-    )
-    
-    with gr.Row():
+    # 메인 컨테이너 시작
+    with gr.Column():
+        gr.HTML(
+            """
+            <div style="text-align: center; margin-bottom: 1rem;">
+                <h1 style="margin-bottom: 0.5rem;">4장 이미지 생성기</h1>
+                <p style="margin-bottom: 0.2rem;">이미지를 업로드하고 "이미지 생성" 버튼을 클릭하면</p>
+                <p>차례로 4장의 이미지가 생성됩니다.</p>
+            </div>
+            """
+        )
+        
+        # 입력 섹션
+        gr.HTML("<h3 style='text-align: center; margin-top: 1rem; margin-bottom: 0.5rem;'>입력 이미지</h3>")
+        
+        # 입력 이미지 UI를 적절한 간격으로 세로 배치
         with gr.Column():
-    # 입력 이미지 UI를 균형있게 정렬
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=1, min_width=256):
-            image1_input = gr.Image(type="pil", label="#1", image_mode="RGB", height=256, width=256)
-        with gr.Column(scale=1, min_width=256):
-            image2_input = gr.Image(type="pil", label="#2", image_mode="RGB", height=256, width=256)
-        with gr.Column(scale=1, min_width=256):
-            image3_input = gr.Image(type="pil", label="#3", image_mode="RGB", height=256, width=256)
-            prompt_input = gr.Textbox(
-                lines=3,
-                placeholder="프롬프트를 입력하거나 비워두면 자동 합성됩니다.",
-                label="프롬프트 (선택 사항)"
-            )
-    # 버튼 균등 배치
-    with gr.Row(equal_height=True, variant="panel"):
-        image_change_btn = gr.Button("이미지변경", min_width=100, scale=1)
-        text_remove_btn = gr.Button("글자지우기", min_width=100, scale=1)
-        clothes_change_btn = gr.Button("가상 상품착용", min_width=100, scale=1)
-        background_change_btn = gr.Button("배경바꾸기", min_width=100, scale=1)
-        composite_product_btn = gr.Button("부분지우기", min_width=100, scale=1)
-            submit_btn = gr.Button("이미지 생성 (4장)", variant="primary")
-    
-        # 출력 이미지 UI를 2x2 균형 그리드로 재구성
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=1, min_width=300):
-            output_image1 = gr.Image(label="생성된 이미지 #1", height=300, width=300)
-        with gr.Column(scale=1, min_width=300):
-            output_image2 = gr.Image(label="생성된 이미지 #2", height=300, width=300)
-    
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=1, min_width=300):
-            output_image3 = gr.Image(label="생성된 이미지 #3", height=300, width=300)
-        with gr.Column(scale=1, min_width=300):
-            output_image4 = gr.Image(label="생성된 이미지 #4", height=300, width=300)
-    
-    output_text = gr.Textbox(label="상태 메시지")
-    prompt_display = gr.Textbox(label="사용된 프롬프트 (영어)", visible=True)
+            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)
+        
+        # 프롬프트 입력
+        prompt_input = gr.Textbox(
+            lines=3,
+            placeholder="프롬프트를 입력하거나 비워두면 자동 합성됩니다.",
+            label="프롬프트 (선택 사항)"
+        )
+        
+        # 버튼 스타일 개선 
+        with gr.Column(variant="panel"):
+            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")
+        
+        # 생성 버튼을 더 눈에 띄게 만들기
+        with gr.Row(visible=True):
+            submit_btn = gr.Button("이미지 생성 (4장)", variant="primary", scale=1, 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():
+                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():
+                output_image3 = gr.Image(label="생성된 이미지 #3", height=300, width=300)
+            with gr.Box():
+                output_image4 = gr.Image(label="생성된 이미지 #4", height=300, width=300)
+        
+        # 상태 및 프롬프트 정보
+        output_text = gr.Textbox(label="상태 메시지")
+        prompt_display = gr.Textbox(label="사용된 프롬프트 (영어)", visible=True)
     
     # 선택 옵션 버튼 클릭 시 프롬프트 입력란 업데이트 (한국어 문구)
     image_change_btn.click(
-        fn=lambda: "(#1의 여성)의 이미지를 살짝 뒤로 돌아보는 모습으로 최대한 이전 seed를 유지한테 자연스럽게 변경하라",
+        fn=lambda: "(#1의 여성)의 이미지를 살짝 뒤로 돌아보는 모습으로 최대한 이전 seed를 유지한테 자연스럽게 변경하라.",
         inputs=[],
         outputs=prompt_input
     )
     text_remove_btn.click(
-        fn=lambda: "(#1 이미지)에 있는 중국어를 모두 제거하라.",
+        fn=lambda: "(#1 이미지)에 있는 중국어를 모두 제거하라.,
         inputs=[],
         outputs=prompt_input
     )