Update app.py

app.py

@@ -588,112 +588,196 @@ def update_box_button(img, box_input):
 
 
 css = """
-footer {display: none}
+/* 기본 레이아웃 */
+footer {display: none !important}
+body {background: #f5f7fa !important}
+
+/* 메인 타이틀 */
 .main-title {
     text-align: center;
-    margin: 1em 0;
-    padding: 1.5em;
+    margin: 1.5em auto;
+    padding: 2em;
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     border-radius: 15px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+    max-width: 1200px;
 }
+
 .main-title h1 {
     color: #2196F3;
-    font-size: 2.8em;
-    margin-bottom: 0.3em;
+    font-size: 3em;
+    margin-bottom: 0.5em;
     font-weight: 700;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
 }
+
 .main-title p {
     color: #555;
-    font-size: 1.3em;
-    line-height: 1.4;
-}
-.container {
-    max-width: 1200px;
-    margin: auto;
-    padding: 20px;
+    font-size: 1.4em;
+    line-height: 1.6;
+    max-width: 800px;
+    margin: 0 auto;
 }
+
+/* 패널 스타일링 */
 .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;
+    padding: 2em;
+    border-radius: 15px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    margin-bottom: 1.5em;
+    transition: all 0.3s ease;
+}
+
+.input-panel:hover, .output-panel:hover {
+    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
 }
+
+/* 컨트롤 패널 */
 .controls-panel {
     background: #f8f9fa;
-    padding: 1em;
-    border-radius: 8px;
-    margin: 1em 0;
+    padding: 1.5em;
+    border-radius: 12px;
+    margin: 1.5em 0;
+    border: 1px solid #e9ecef;
 }
+
+/* 이미지 디스플레이 */
 .image-display {
     min-height: 512px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fafafa;
-    border-radius: 8px;
-    margin: 1em 0;
-}
-.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;
-}
-.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;
+    margin: 1.5em 0;
+    border: 2px dashed #e0e0e0;
 }
 
-
+/* 버튼 스타일링 */
 .position-btn {
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    padding: 12px;
+    border: 2px solid #ddd;
+    border-radius: 8px;
     background: white;
     cursor: pointer;
-    transition: all 0.3s ease;
-    width: 40px;
-    height: 40px;
+    transition: all 0.2s ease;
+    width: 48px;
+    height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 1.2em;
+    margin: 4px;
 }
 
 .position-btn:hover {
     background: #e3f2fd;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 
 .position-btn.selected {
     background-color: #2196F3;
     color: white;
     border-color: #1976D2;
+    box-shadow: 0 4px 12px rgba(33,150,243,0.3);
+}
+
+/* 그리드 레이아웃 */
+.position-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    margin: 1.5em 0;
+    padding: 10px;
+    background: #f5f5f5;
+    border-radius: 12px;
+}
+
+/* 입력 필드 스타일링 */
+input[type="text"], textarea {
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 12px;
+    font-size: 1.1em;
+    transition: all 0.3s ease;
+}
+
+input[type="text"]:focus, textarea:focus {
+    border-color: #2196F3;
+    box-shadow: 0 0 0 3px rgba(33,150,243,0.2);
+}
+
+/* 슬라이더 스타일링 */
+.slider-container {
+    margin: 1.5em 0;
+}
+
+.slider {
+    height: 6px;
+    background: #e0e0e0;
+    border-radius: 3px;
+}
+
+.slider-handle {
+    width: 20px;
+    height: 20px;
+    background: #2196F3;
+    border: 2px solid white;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* 상태 메시지 */
+.status-message {
+    padding: 10px;
+    border-radius: 8px;
+    margin: 10px 0;
+    font-size: 0.9em;
+    transition: all 0.3s ease;
+}
+
+.status-success {
+    background: #e8f5e9;
+    color: #2e7d32;
+    border: 1px solid #a5d6a7;
+}
+
+.status-error {
+    background: #ffebee;
+    color: #c62828;
+    border: 1px solid #ef9a9a;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+    .main-title h1 {
+        font-size: 2em;
+    }
+    
+    .main-title p {
+        font-size: 1.1em;
+    }
+    
+    .input-panel, .output-panel {
+        padding: 1em;
+    }
+    
+    .position-btn {
+        width: 40px;
+        height: 40px;
+        font-size: 1em;
+    }
+}
+
+/* 애니메이션 효과 */
+@keyframes fadeIn {
+    from {opacity: 0; transform: translateY(10px);}
+    to {opacity: 1; transform: translateY(0);}
+}
+
+.fade-in {
+    animation: fadeIn 0.3s ease-out;
 }
 """
 
@@ -862,14 +946,21 @@ def update_controls(bg_prompt):
 
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     position = gr.State(value="bottom-center")
-
+    processing_status = gr.State(value="idle")
+    
     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>
         </div>
     """)
+    
+    status_message = gr.HTML(
+        value='<div class="status-message"></div>',
+        visible=False
+    )
 
+    
     with gr.Row(equal_height=True):
         # 왼쪽 패널 (입력)
         with gr.Column(scale=1):
@@ -881,8 +972,10 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                             type="pil",
                             label="Upload Image",
                             interactive=True,
-                            height=400
+                            height=400,
+                            elem_classes="fade-in"
                         )
+
                         with gr.Group():
                             inpaint_prompt = gr.Textbox(
                                 label="Inpainting Prompt",
@@ -899,8 +992,10 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                         text_prompt = gr.Textbox(
                             label="Object to Extract",
                             placeholder="Enter what you want to extract...",
-                            interactive=True
+                            interactive=True,
+                            elem_classes="fade-in"
                         )
+
                         with gr.Row():
                             bg_prompt = gr.Textbox(
                                 label="Background Prompt (optional)",
@@ -1052,18 +1147,64 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         btn_bottom_right: "bottom-right"
     }
 
+    def update_ui_state(component_id, value, is_error=False):
+        """UI 상태 업데이트 유틸리티"""
+        class_name = "status-error" if is_error else "status-success"
+        return gr.update(
+            value=f'<div class="status-message {class_name}">{value}</div>',
+            visible=True
+        )
+
+# 버튼 이벤트 바인딩
     for btn, pos in position_mapping.items():
         btn.click(
-            fn=lambda pos=pos: update_position(pos),
-            outputs=position
+            fn=lambda p=pos: debug_event("position_update", p),
+            inputs=[],
+            outputs=[status_message]
+        ).then(
+            fn=update_position_and_ui,
+            inputs=[gr.State(pos)],
+            outputs=[position] + list(position_mapping.keys())
         )
 
+# 인페인팅 프로세스
     inpaint_btn.click(
-        fn=process_inpainting,
+        fn=lambda: debug_event("inpainting_start"),
+        inputs=[],
+        outputs=[status_message]
+    ).then(
+        fn=process_inpainting_with_feedback,
         inputs=[input_image, mask_input, inpaint_prompt],
-        outputs=input_image
+        outputs=[input_image, status_message]
     )
 
+# 프로세스 버튼
+    process_btn.click(
+        fn=lambda: debug_event("process_start"),
+        inputs=[],
+        outputs=[status_message]
+    ).then(
+        fn=process_prompt,
+        inputs=[
+            input_image,
+            text_prompt,
+            bg_prompt,
+            aspect_ratio,
+            position,
+            scale_slider
+        ],
+        outputs=[combined_image, extracted_image, status_message]
+    )
+
+
+    
+    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,
@@ -1085,19 +1226,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         queue=False
     )
 
-    process_btn.click(
-        fn=process_prompt,
-        inputs=[
-            input_image,
-            text_prompt,
-            bg_prompt,
-            aspect_ratio,
-            position,
-            scale_slider
-        ],
-        outputs=[combined_image, extracted_image],
-        queue=True
-    )
+
 
     add_text_btn.click(
         fn=add_text_to_image,