Update app.py

app.py

@@ -268,16 +268,14 @@ def resize_object(image: Image.Image, scale_percent: float) -> Image.Image:
 def combine_with_background(foreground: Image.Image, background: Image.Image, 
                           position: str = "bottom-center", scale_percent: float = 100) -> Image.Image:
     """전경과 배경 합성 함수"""
-    # 배경 이미지 준비
-    result = background.convert('RGBA')
+    print(f"Combining with position: {position}, scale: {scale_percent}")
     
-    # 오브젝트 크기 조정
+    result = background.convert('RGBA')
     scaled_foreground = resize_object(foreground, scale_percent)
     
-    # 오브젝트 위치 계산
     x, y = calculate_object_position(position, result.size, scaled_foreground.size)
+    print(f"Calculated position coordinates: ({x}, {y})")
     
-    # 합성
     result.paste(scaled_foreground, (x, y), scaled_foreground)
     return result
 
@@ -348,7 +346,6 @@ def on_change_prompt(img: Image.Image | None, prompt: str | None, bg_prompt: str
     return gr.update(interactive=bool(img and 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 +353,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,25 +366,34 @@ def process_prompt(img: Image.Image, prompt: str, bg_prompt: str | None = None,
         
         if bg_prompt:
             try:
+                print(f"Using position: {position}")  # 디버깅용
+                # 위치 값 검증
+                valid_positions = ["top-left", "top-center", "top-right",
+                                 "middle-left", "middle-center", "middle-right",
+                                 "bottom-left", "bottom-center", "bottom-right"]
+                if position not in valid_positions:
+                    position = "bottom-center"
+                    print(f"Invalid position, using default: {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)}")
                 return results[1], results[2]
         
-        return results[1], results[2]
+        return results[1], results[2]  # 기본 반환 추가
     except Exception as e:
         print(f"Error in process_prompt: {str(e)}")
         raise gr.Error(str(e))
     finally:
         clear_memory()
-        
+
+    
 def process_bbox(img: Image.Image, box_input: str) -> tuple[Image.Image, Image.Image]:
     try:
         if img is None or box_input.strip() == "":
@@ -427,71 +433,117 @@ def update_box_button(img, box_input):
         return gr.update(interactive=False, variant="secondary")
 
 
-# CSS 정의
 css = """
 footer {display: none}
 .main-title {
     text-align: center;
-    margin: 2em 0;
-    padding: 1em;
-    background: #f7f7f7;
-    border-radius: 10px;
+    margin: 1em 0;
+    padding: 1.5em;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-radius: 15px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 .main-title h1 {
     color: #2196F3;
-    font-size: 2.5em;
-    margin-bottom: 0.5em;
+    font-size: 2.8em;
+    margin-bottom: 0.3em;
+    font-weight: 700;
 }
 .main-title p {
-    color: #666;
-    font-size: 1.2em;
+    color: #555;
+    font-size: 1.3em;
+    line-height: 1.4;
 }
 .container {
     max-width: 1200px;
     margin: auto;
     padding: 20px;
 }
-.tabs {
-    margin-top: 1em;
-}
-.input-group {
+.input-panel, .output-panel {
     background: white;
+    padding: 1.5em;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    margin-bottom: 1em;
+}
+.controls-panel {
+    background: #f8f9fa;
     padding: 1em;
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin: 1em 0;
 }
-.output-group {
-    background: white;
-    padding: 1em;
+.image-display {
+    min-height: 512px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fafafa;
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin: 1em 0;
 }
-button.primary {
-    background: #2196F3;
-    border: none;
-    color: white;
-    padding: 0.5em 1em;
-    border-radius: 4px;
+.example-section {
+    text-align: center;
+    padding: 2em;
+    background: #f5f5f5;
+    border-radius: 12px;
+    margin-top: 2em;
+}
+.example-section img {
+    max-width: 100%;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+.accordion {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    margin: 1em 0;
+}
+.accordion-header {
+    padding: 1em;
+    background: #f5f5f5;
     cursor: pointer;
-    transition: background 0.3s ease;
 }
-button.primary:hover {
-    background: #1976D2;
+.accordion-content {
+    padding: 1em;
+    display: none;
+}
+.accordion.open .accordion-content {
+    display: block;
 }
+.position-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    margin: 1em 0;
+}
+
+
 .position-btn {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    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-color: #e3f2fd;
+    background: #e3f2fd;
 }
+
 .position-btn.selected {
     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
@@ -628,171 +680,212 @@ def add_text_to_image(
         return input_image
 
     
+def update_position(new_position):
+    """위치 업데이트 함수"""
+    print(f"Position updated to: {new_position}")
+    return new_position
+
+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
+    ]
+
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
+    position = gr.State(value="bottom-center")  # 여기로 이동
+
     gr.HTML("""
         <div class="main-title">
-            <h1>🎨GiniGen Canvas-o3</h1>
+            <h1>🎨 GiniGen Canvas-o3</h1>
             <p>Remove background of specified objects, generate new backgrounds, and insert text over or behind images with prompts.</p>
         </div>
     """)
 
-    with gr.Row():
+    with gr.Row(equal_height=True):
+        # 왼쪽 패널 (입력)
         with gr.Column(scale=1):
-            input_image = gr.Image(
-                type="pil",
-                label="Upload Image",
-                interactive=True
-            )
-            text_prompt = gr.Textbox(
-                label="Object to Extract",
-                placeholder="Enter what you want to extract...",
-                interactive=True
-            )
-            with gr.Row():
-                bg_prompt = gr.Textbox(
-                    label="Background Prompt (optional)",
-                    placeholder="Describe the background...",
+            with gr.Group(elem_classes="input-panel"):
+                input_image = gr.Image(
+                    type="pil",
+                    label="Upload Image",
                     interactive=True,
-                    scale=3
+                    height=400
                 )
-                aspect_ratio = gr.Dropdown(
-                    choices=["1:1", "16:9", "9:16", "4:3"],
-                    value="1:1",
-                    label="Aspect Ratio",
-                    interactive=True,
-                    visible=True,
-                    scale=1
+                text_prompt = gr.Textbox(
+                    label="Object to Extract",
+                    placeholder="Enter what you want to extract...",
+                    interactive=True
                 )
-
-            with gr.Row(visible=False) as object_controls:
-                with gr.Column(scale=1):
-                    with gr.Row():
-                        position = gr.State(value="bottom-center")
-                        btn_top_left = gr.Button("↖")
-                        btn_top_center = gr.Button("↑")
-                        btn_top_right = gr.Button("↗")
-                    with gr.Row():
-                        btn_middle_left = gr.Button("←")
-                        btn_middle_center = gr.Button("•")
-                        btn_middle_right = gr.Button("→")
-                    with gr.Row():
-                        btn_bottom_left = gr.Button("↙")
-                        btn_bottom_center = gr.Button("↓")
-                        btn_bottom_right = gr.Button("↘")
-                with gr.Column(scale=1):
-                    scale_slider = gr.Slider(
-                        minimum=10,
-                        maximum=200,
-                        value=50,
-                        step=5,
-                        label="Object Size (%)"
+                with gr.Row():
+                    bg_prompt = gr.Textbox(
+                        label="Background Prompt (optional)",
+                        placeholder="Describe the background...",
+                        interactive=True,
+                        scale=3
+                    )
+                    aspect_ratio = gr.Dropdown(
+                        choices=["1:1", "16:9", "9:16", "4:3"],
+                        value="1:1",
+                        label="Aspect Ratio",
+                        interactive=True,
+                        visible=True,
+                        scale=1
                     )
 
-            process_btn = gr.Button(
-                "Process",
-                variant="primary",
-                interactive=False
-            )
+                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():
+                            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("←", 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("↙", 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,
+                            maximum=200,
+                            value=50,
+                            step=5,
+                            label="Object Size (%)"
+                        )
 
-        with gr.Column(scale=1):
-            with gr.Tab("Result"):
-                combined_image = gr.Image(
-                    label="Combined Result",
-                    show_download_button=True,
-                    type="pil",
-                    height=512
+                process_btn = gr.Button(
+                    "Process",
+                    variant="primary",
+                    interactive=False,
+                    size="lg"
                 )
-                
-                # 텍스트 삽입 컨트롤을 더 명확하게 구분
-                with gr.Group():
-                    gr.Markdown("### Add Text to Image")
-                    with gr.Row():
-                        text_input = gr.Textbox(
-                            label="Text Content",
-                            placeholder="Enter text to add to image..."
-                        )
-                        text_position_type = gr.Radio(
-                            choices=["Text Over Image", "Text Behind Image"],
-                            value="Text Over Image",
-                            label="Text Position Type",
-                            interactive=True
-                        )
+
+        # 오른쪽 패널 (출력)
+        with gr.Column(scale=1):
+            with gr.Group(elem_classes="output-panel"):
+                with gr.Tab("Result"):
+                    combined_image = gr.Image(
+                        label="Combined Result",
+                        show_download_button=True,
+                        type="pil",
+                        height=400
+                    )
                     
-                    with gr.Row():
-                        with gr.Column(scale=1):
-                            # 폰트 선택 Dropdown 추가
-                            font_choice = gr.Dropdown(
-                                choices=["Default", "Korean Regular", "Korean Son"],
-                                value="Default",
-                                label="Font Selection",
-                                interactive=True
-                            )
-                            font_size = gr.Slider(
-                                minimum=10,
-                                maximum=200,
-                                value=40,
-                                step=5,
-                                label="Font Size"
-                            )
-                            color_dropdown = gr.Dropdown(
-                                choices=["White", "Black", "Red", "Green", "Blue", "Yellow", "Purple"],
-                                value="White",
-                                label="Text Color"
-                            )
-                            thickness = gr.Slider(
-                                minimum=0,
-                                maximum=10,
-                                value=1,
-                                step=1,
-                                label="Text Thickness"
-                            )
-                        with gr.Column(scale=1):
-                            opacity_slider = gr.Slider(
-                                minimum=0,
-                                maximum=255,
-                                value=255,
-                                step=1,
-                                label="Opacity"
-                            )
-                            x_position = gr.Slider(
-                                minimum=0,
-                                maximum=100,
-                                value=50,
-                                step=1,
-                                label="X Position (%)"
-                            )
-                            y_position = gr.Slider(
-                                minimum=0,
-                                maximum=100,
-                                value=50,
-                                step=1,
-                                label="Y Position (%)"
-                            )
-                    add_text_btn = gr.Button("Apply Text", variant="primary")
+                    # 텍스트 삽입 옵션을 Accordion으로 변경
+                    with gr.Accordion("Text Insertion Options", open=False):
+                        with gr.Group():
+                            with gr.Row():
+                                text_input = gr.Textbox(
+                                    label="Text Content",
+                                    placeholder="Enter text to add..."
+                                )
+                                text_position_type = gr.Radio(
+                                    choices=["Text Over Image", "Text Behind Image"],
+                                    value="Text Over Image",
+                                    label="Text Position"
+                                )
+                            
+                            with gr.Row():
+                                with gr.Column(scale=1):
+                                    font_choice = gr.Dropdown(
+                                        choices=["Default", "Korean Regular", "Korean Son"],
+                                        value="Default",
+                                        label="Font Selection",
+                                        interactive=True
+                                    )
+                                    font_size = gr.Slider(
+                                        minimum=10,
+                                        maximum=200,
+                                        value=40,
+                                        step=5,
+                                        label="Font Size"
+                                    )
+                                    color_dropdown = gr.Dropdown(
+                                        choices=["White", "Black", "Red", "Green", "Blue", "Yellow", "Purple"],
+                                        value="White",
+                                        label="Text Color"
+                                    )
+                                    thickness = gr.Slider(
+                                        minimum=0,
+                                        maximum=10,
+                                        value=1,
+                                        step=1,
+                                        label="Text Thickness"
+                                    )
+                                with gr.Column(scale=1):
+                                    opacity_slider = gr.Slider(
+                                        minimum=0,
+                                        maximum=255,
+                                        value=255,
+                                        step=1,
+                                        label="Opacity"
+                                    )
+                                    x_position = gr.Slider(
+                                        minimum=0,
+                                        maximum=100,
+                                        value=50,
+                                        step=1,
+                                        label="X Position (%)"
+                                    )
+                                    y_position = gr.Slider(
+                                        minimum=0,
+                                        maximum=100,
+                                        value=50,
+                                        step=1,
+                                        label="Y Position (%)"
+                                    )
+                            add_text_btn = gr.Button("Apply Text", variant="primary")
 
-                with gr.Row():
                     extracted_image = gr.Image(
                         label="Extracted Object",
                         show_download_button=True,
                         type="pil",
-                        height=256
+                        height=200
                     )
 
-    # 각 버튼에 대한 클릭 이벤트 처리
-    def update_position(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
+    # CSS 클래스를 위한 스타일 추가
+    gr.HTML("""
+        <style>
+        .position-btn.selected {
+            background-color: #2196F3 !important;
+            color: white !important;
+        }
+        </style>
+    """)
+
+# 버튼 클릭 이벤트 바인딩
+    position_mapping = {
+        btn_top_left: "top-left",
+        btn_top_center: "top-center",
+        btn_top_right: "top-right",
+        btn_middle_left: "middle-left",
+        btn_middle_center: "middle-center",
+        btn_middle_right: "middle-right",
+        btn_bottom_left: "bottom-left",
+        btn_bottom_center: "bottom-center",
+        btn_bottom_right: "bottom-right"
+    }
+
+    for btn, pos in position_mapping.items():
+        btn.click(
+            fn=lambda pos=pos: update_position(pos),  # 클로저 문제 해결을 위해 수정
+            outputs=position
+        )
+ 
+
+    # 이벤트 바인딩
+    bg_prompt.change(
+        fn=update_controls,
+        inputs=bg_prompt,
+        outputs=[aspect_ratio, object_controls],
+        queue=False
+    )
+    
     input_image.change(
         fn=update_process_button,
         inputs=[input_image, text_prompt],
@@ -807,21 +900,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,
-        outputs=[aspect_ratio, object_controls],
-        queue=False
-    )
-
     process_btn.click(
         fn=process_prompt,
         inputs=[
@@ -836,7 +914,6 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         queue=True
     )
 
-    # 텍스트 추가 버튼 이벤트 연결 수정
     add_text_btn.click(
         fn=add_text_to_image,
         inputs=[
@@ -849,15 +926,15 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
             y_position,
             thickness,
             text_position_type,
-            font_choice  # 새로운 입력 추가
+            font_choice
         ],
         outputs=combined_image
     )
 
-demo.queue(max_size=5)  # 큐 크기 제한
+demo.queue(max_size=5)
 demo.launch(
     server_name="0.0.0.0",
     server_port=7860,
     share=False,
-    max_threads=2  # 스레드 수 제한
+    max_threads=2
 )