Update app.py

app.py

@@ -427,65 +427,102 @@ 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;
 }
 .position-btn:hover {
-    background-color: #e3f2fd;
+    background: #e3f2fd;
 }
 .position-btn.selected {
-    background-color: #2196F3;
+    background: #2196F3;
     color: white;
 }
 """
@@ -631,168 +668,165 @@ def add_text_to_image(
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     gr.HTML("""
         <div class="main-title">
-            <h1>🎨GiniGen Canvas-o3</h1>
-            <p>Remove background of specified objects, generate new backgrounds, and insert text over or behind images with prompts.</p>
+            <h1>🎨 GiniGen Canvas-o3</h1>
+            <p>Advanced Image Processing Tool: Remove backgrounds, generate new ones, and add customized text to your images.</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.Box(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.Box(elem_classes="controls-panel", 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.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.Box(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
+    # 예제 이미지 섹션 추가
+    gr.HTML("""
+        <div class="example-section">
+            <h3>Example Results</h3>
+            <img src="example.png" alt="Example results" />
+        </div>
+    """)
+
+    # 이벤트 바인딩
     input_image.change(
         fn=update_process_button,
         inputs=[input_image, text_prompt],
@@ -807,14 +841,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,
@@ -822,6 +848,20 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         queue=False
     )
 
+    # 위치 버튼 이벤트
+    for btn, pos in [
+        (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")
+    ]:
+        btn.click(
+            fn=lambda p=pos: p,
+            outputs=position,
+            queue=False
+        )
+
     process_btn.click(
         fn=process_prompt,
         inputs=[
@@ -836,7 +876,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 +888,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
 )