Update app.py

app.py

@@ -349,6 +349,7 @@ def on_change_prompt(img: Image.Image | None, prompt: str | None, bg_prompt: str
 
 
         
+# process_prompt 함수 수정
 def process_prompt(img: Image.Image, prompt: str, bg_prompt: str | None = None, 
                   aspect_ratio: str = "1:1", position: str = "bottom-center", 
                   scale_percent: float = 100) -> tuple[Image.Image, Image.Image]:
@@ -356,7 +357,7 @@ def process_prompt(img: Image.Image, prompt: str, bg_prompt: str | None = None,
         if img is None or prompt.strip() == "":
             raise gr.Error("Please provide both image and prompt")
         
-        print(f"Processing with position: {position}, scale: {scale_percent}")
+        print(f"Processing with position: {position}, scale: {scale_percent}")  # 디버깅용
         
         try:
             prompt = translate_to_english(prompt)
@@ -369,13 +370,13 @@ def process_prompt(img: Image.Image, prompt: str, bg_prompt: str | None = None,
         
         if bg_prompt:
             try:
+                print(f"Using position: {position}")  # 디버깅용
                 combined = combine_with_background(
                     foreground=results[2],
                     background=results[1],
                     position=position,
                     scale_percent=scale_percent
                 )
-                print(f"Combined image created with position: {position}")
                 return combined, results[2]
             except Exception as e:
                 print(f"Combination error: {str(e)}")
@@ -510,6 +511,8 @@ footer {display: none}
     gap: 8px;
     margin: 1em 0;
 }
+
+
 .position-btn {
     padding: 10px;
     border: 1px solid #ddd;
@@ -517,18 +520,25 @@ footer {display: none}
     background: white;
     cursor: pointer;
     transition: all 0.3s ease;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
+
 .position-btn:hover {
     background: #e3f2fd;
 }
+
 .position-btn.selected {
-    background: #2196F3;
+    background-color: #2196F3;
     color: white;
+    border-color: #1976D2;
 }
 """
 
 
-
 def add_text_with_stroke(draw, text, x, y, font, text_color, stroke_width):
     """Helper function to draw text with stroke"""
     # Draw the stroke/outline
@@ -665,6 +675,9 @@ def add_text_to_image(
         return input_image
 
     
+# 전역 변수 설정
+current_position = None  # position 상태를 전역으로 관리하기 위한 변수
+
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     gr.HTML("""
         <div class="main-title">
@@ -673,10 +686,13 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         </div>
     """)
 
+    # 전역 position 상태 추가
+    current_position = gr.State("bottom-center")
+
     with gr.Row(equal_height=True):
         # 왼쪽 패널 (입력)
         with gr.Column(scale=1):
-            with gr.Group(elem_classes="input-panel"):  # Box를 Group으로 변경
+            with gr.Group(elem_classes="input-panel"):
                 input_image = gr.Image(
                     type="pil",
                     label="Upload Image",
@@ -704,21 +720,21 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                         scale=1
                     )
 
-                with gr.Group(elem_classes="controls-panel", visible=False) as object_controls:  # Box를 Group으로 변경
+                with gr.Group(elem_classes="controls-panel", visible=False) as object_controls:
                     with gr.Column(scale=1):
+                        position = gr.State(value="bottom-center")  # 초기값 설정
                         with gr.Row():
-                            position = gr.State(value="bottom-center")
-                            btn_top_left = gr.Button("↖")
-                            btn_top_center = gr.Button("↑")
-                            btn_top_right = gr.Button("↗")
+                            btn_top_left = gr.Button("↖", elem_classes="position-btn")
+                            btn_top_center = gr.Button("↑", elem_classes="position-btn")
+                            btn_top_right = gr.Button("↗", elem_classes="position-btn")
                         with gr.Row():
-                            btn_middle_left = gr.Button("←")
-                            btn_middle_center = gr.Button("•")
-                            btn_middle_right = gr.Button("→")
+                            btn_middle_left = gr.Button("←", elem_classes="position-btn")
+                            btn_middle_center = gr.Button("•", elem_classes="position-btn")
+                            btn_middle_right = gr.Button("→", elem_classes="position-btn")
                         with gr.Row():
-                            btn_bottom_left = gr.Button("↙")
-                            btn_bottom_center = gr.Button("↓")
-                            btn_bottom_right = gr.Button("↘")
+                            btn_bottom_left = gr.Button("↙", elem_classes="position-btn")
+                            btn_bottom_center = gr.Button("↓", elem_classes="position-btn", value="selected")
+                            btn_bottom_right = gr.Button("↘", elem_classes="position-btn")
                     with gr.Column(scale=1):
                         scale_slider = gr.Slider(
                             minimum=10,
@@ -737,7 +753,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
 
         # 오른쪽 패널 (출력)
         with gr.Column(scale=1):
-            with gr.Group(elem_classes="output-panel"):  # Box를 Group으로 변경
+            with gr.Group(elem_classes="output-panel"):
                 with gr.Tab("Result"):
                     combined_image = gr.Image(
                         label="Combined Result",
@@ -817,30 +833,36 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                         type="pil",
                         height=200
                     )
-# 예제 이미지 섹션 수정
+
+    # CSS 클래스를 위한 스타일 추가
     gr.HTML("""
-        <div class="example-section">
-            <h3>Example Results</h3>
-            <img src="./assets/example.png" alt="Example results" style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
-        </div>
+        <style>
+        .position-btn.selected {
+            background-color: #2196F3 !important;
+            color: white !important;
+        }
+        </style>
     """)
 
-
-    # 각 버튼에 대한 클릭 이벤트 처리
-    def update_position(new_position):
+    # 위치 업데이트 함수
+    def update_position(new_position, current):
+        print(f"Position updated from {current} to {new_position}")  # 디버깅용
         return new_position
 
-    btn_top_left.click(fn=lambda: update_position("top-left"), outputs=position)
-    btn_top_center.click(fn=lambda: update_position("top-center"), outputs=position)
-    btn_top_right.click(fn=lambda: update_position("top-right"), outputs=position)
-    btn_middle_left.click(fn=lambda: update_position("middle-left"), outputs=position)
-    btn_middle_center.click(fn=lambda: update_position("middle-center"), outputs=position)
-    btn_middle_right.click(fn=lambda: update_position("middle-right"), outputs=position)
-    btn_bottom_left.click(fn=lambda: update_position("bottom-left"), outputs=position)
-    btn_bottom_center.click(fn=lambda: update_position("bottom-center"), outputs=position)
-    btn_bottom_right.click(fn=lambda: update_position("bottom-right"), outputs=position)
-
-    # Event bindings
+    # 버튼 클릭 이벤트 바인딩
+    btn_top_left.click(fn=update_position, inputs=["top-left", position], outputs=position)
+    btn_top_center.click(fn=update_position, inputs=["top-center", position], outputs=position)
+    btn_top_right.click(fn=update_position, inputs=["top-right", position], outputs=position)
+    btn_middle_left.click(fn=update_position, inputs=["middle-left", position], outputs=position)
+    btn_middle_center.click(fn=update_position, inputs=["middle-center", position], outputs=position)
+    btn_middle_right.click(fn=update_position, inputs=["middle-right", position], outputs=position)
+    btn_bottom_left.click(fn=update_position, inputs=["bottom-left", position], outputs=position)
+    btn_bottom_center.click(fn=update_position, inputs=["bottom-center", position], outputs=position)
+    btn_bottom_right.click(fn=update_position, inputs=["bottom-right", position], outputs=position)
+
+
+
+    # 기존 이벤트 바인딩
     input_image.change(
         fn=update_process_button,
         inputs=[input_image, text_prompt],
@@ -855,14 +877,6 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         queue=False
     )
 
-    def update_controls(bg_prompt):
-        """배경 프롬프트 입력 여부에 따라 컨트롤 표시 업데이트"""
-        is_visible = bool(bg_prompt)
-        return [
-            gr.update(visible=is_visible),  # aspect_ratio
-            gr.update(visible=is_visible),  # object_controls
-        ]
-
     bg_prompt.change(
         fn=update_controls,
         inputs=bg_prompt,
@@ -870,6 +884,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         queue=False
     )
 
+    # Process 버튼 클릭 이벤트 수정
     process_btn.click(
         fn=process_prompt,
         inputs=[
@@ -877,13 +892,23 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
             text_prompt,
             bg_prompt,
             aspect_ratio,
-            position,
+            position,  # position 상태 전달
             scale_slider
         ],
         outputs=[combined_image, extracted_image],
         queue=True
     )
 
+
+    def update_controls(bg_prompt):
+        """배경 프롬프트 입력 여부에 따라 컨트롤 표시 업데이트"""
+        is_visible = bool(bg_prompt)
+        return [
+            gr.update(visible=is_visible),  # aspect_ratio
+            gr.update(visible=is_visible),  # object_controls
+        ]
+
+
     # 텍스트 추가 버튼 이벤트 연결 수정
     add_text_btn.click(
         fn=add_text_to_image,
@@ -902,6 +927,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         outputs=combined_image
     )
 
+
 demo.queue(max_size=5)  # 큐 크기 제한
 demo.launch(
     server_name="0.0.0.0",