Update app.py

app.py

@@ -632,6 +632,40 @@ body {background: #f5f7fa !important}
     margin: 0 auto;
 }
 
+/* 탭 스타일링 */
+.tabs-container {
+    margin-top: 1em;
+}
+
+.tab-nav {
+    pointer-events: auto !important;
+    cursor: pointer !important;
+    border-bottom: 2px solid #e0e0e0;
+    margin-bottom: 1em;
+}
+
+.tab-nav button {
+    pointer-events: auto !important;
+    cursor: pointer !important;
+    padding: 0.8em 1.2em;
+    margin-right: 0.5em;
+    border: none;
+    background: none;
+    color: #666;
+    transition: all 0.3s ease;
+}
+
+.tab-nav button:hover {
+    color: #2196F3;
+    background: rgba(33, 150, 243, 0.1);
+}
+
+.tab-nav button.selected {
+    color: #2196F3;
+    border-bottom: 2px solid #2196F3;
+    font-weight: bold;
+}
+
 /* 패널 스타일링 */
 .input-panel, .output-panel {
     background: white;
@@ -669,32 +703,33 @@ body {background: #f5f7fa !important}
 
 /* 버튼 스타일링 */
 .position-btn {
-    padding: 12px;
-    border: 2px solid #ddd;
-    border-radius: 8px;
-    background: white;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    width: 48px;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.2em;
-    margin: 4px;
+    padding: 12px !important;
+    border: 2px solid #ddd !important;
+    border-radius: 8px !important;
+    background: white !important;
+    cursor: pointer !important;
+    transition: all 0.2s ease !important;
+    width: 48px !important;
+    height: 48px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 1.2em !important;
+    margin: 4px !important;
+    pointer-events: auto !important;
 }
 
 .position-btn:hover {
-    background: #e3f2fd;
+    background: #e3f2fd !important;
     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);
+    background-color: #2196F3 !important;
+    color: white !important;
+    border-color: #1976D2 !important;
+    box-shadow: 0 4px 12px rgba(33,150,243,0.3) !important;
 }
 
 /* 그리드 레이아웃 */
@@ -710,16 +745,16 @@ body {background: #f5f7fa !important}
 
 /* 입력 필드 스타일링 */
 input[type="text"], textarea {
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 12px;
-    font-size: 1.1em;
-    transition: all 0.3s ease;
+    border: 2px solid #e0e0e0 !important;
+    border-radius: 8px !important;
+    padding: 12px !important;
+    font-size: 1.1em !important;
+    transition: all 0.3s ease !important;
 }
 
 input[type="text"]:focus, textarea:focus {
-    border-color: #2196F3;
-    box-shadow: 0 0 0 3px rgba(33,150,243,0.2);
+    border-color: #2196F3 !important;
+    box-shadow: 0 0 0 3px rgba(33,150,243,0.2) !important;
 }
 
 /* 슬라이더 스타일링 */
@@ -728,17 +763,17 @@ input[type="text"]:focus, textarea:focus {
 }
 
 .slider {
-    height: 6px;
-    background: #e0e0e0;
-    border-radius: 3px;
+    height: 6px !important;
+    background: #e0e0e0 !important;
+    border-radius: 3px !important;
 }
 
 .slider-handle {
-    width: 20px;
-    height: 20px;
-    background: #2196F3;
-    border: 2px solid white;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    width: 20px !important;
+    height: 20px !important;
+    background: #2196F3 !important;
+    border: 2px solid white !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
 }
 
 /* 상태 메시지 */
@@ -748,6 +783,7 @@ input[type="text"]:focus, textarea:focus {
     margin: 10px 0;
     font-size: 0.9em;
     transition: all 0.3s ease;
+    animation: slideIn 0.3s ease-out;
 }
 
 .status-success {
@@ -777,9 +813,9 @@ input[type="text"]:focus, textarea:focus {
     }
     
     .position-btn {
-        width: 40px;
-        height: 40px;
-        font-size: 1em;
+        width: 40px !important;
+        height: 40px !important;
+        font-size: 1em !important;
     }
 }
 
@@ -793,11 +829,6 @@ input[type="text"]:focus, textarea:focus {
     animation: fadeIn 0.3s ease-out;
 }
 
-/* 상태 메시지 애니메이션 */
-.status-message {
-    animation: slideIn 0.3s ease-out;
-}
-
 @keyframes slideIn {
     from {
         transform: translateY(-10px);
@@ -808,6 +839,67 @@ input[type="text"]:focus, textarea:focus {
         opacity: 1;
     }
 }
+
+/* 인터랙티브 요소 공통 스타일 */
+.interactive-element {
+    pointer-events: auto !important;
+    cursor: pointer !important;
+    user-select: none !important;
+}
+
+/* 버튼 공통 스타일 */
+button, .button {
+    pointer-events: auto !important;
+    cursor: pointer !important;
+    user-select: none !important;
+}
+
+/* 탭 컨테이너 스타일 */
+.tabs-container {
+    pointer-events: auto !important;
+}
+
+.tab-item {
+    pointer-events: auto !important;
+}
+
+/* 호버 효과 */
+.interactive-element:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+/* 클�� 효과 */
+.interactive-element:active {
+    transform: translateY(1px);
+}
+"""
+
+js_code = """
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    function enableInteraction(selector) {
+        const elements = document.querySelectorAll(selector);
+        elements.forEach(el => {
+            el.style.pointerEvents = 'auto';
+            el.style.cursor = 'pointer';
+        });
+    }
+
+    // 탭 활성화
+    enableInteraction('.tab-nav button');
+    enableInteraction('.position-btn');
+    enableInteraction('.interactive-element');
+
+    // 버튼 클릭 이벤트 리스너
+    document.querySelectorAll('.position-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            document.querySelectorAll('.position-btn').forEach(b => b.classList.remove('selected'));
+            this.classList.add('selected');
+        });
+    });
+});
+</script>
 """
 
 def add_text_with_stroke(draw, text, x, y, font, text_color, stroke_width):
@@ -989,6 +1081,7 @@ 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(js_code)  # JavaScript 코드 추가
     
     gr.HTML("""
         <div class="main-title">
@@ -1007,9 +1100,9 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         # 왼쪽 패널 (입력)
         with gr.Column(scale=1):
             with gr.Group(elem_classes="input-panel"):
-                with gr.Tabs():
-                    # 첫 번째 탭: 이미지 업로드 및 인페인팅
-                    with gr.Tab("Image Upload & Inpainting", elem_classes="tab"):
+                with gr.Tabs(elem_classes="tabs-container") as tabs:
+                    with gr.TabItem("Image Upload & Inpainting", elem_classes="tab-item"):
+
 
                         input_image = gr.Image(
                             type="pil",
@@ -1031,8 +1124,8 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                             inpaint_btn = gr.Button("Apply Inpainting", variant="primary")
 
                     # 두 번째 탭: 배경 제거 및 생성
-                    with gr.Tab("Background Removal", elem_classes="tab"):
 
+                    with gr.TabItem("Background Removal", elem_classes="tab-item"):
                         text_prompt = gr.Textbox(
                             label="Object to Extract",
                             placeholder="Enter what you want to extract...",
@@ -1059,17 +1152,21 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                         with gr.Group(elem_classes="controls-panel", visible=False) as object_controls:
                             with gr.Column(scale=1):
                                 with gr.Row():
-                                    btn_top_left = gr.Button("↖", elem_classes=["position-btn", "interactive-element"])
-                                    btn_top_center = gr.Button("↑", elem_classes=["position-btn", "interactive-element"])
-                                    btn_top_right = gr.Button("↗", elem_classes=["position-btn", "interactive-element"])
+
+                                    btn_top_left = gr.Button("↖", elem_classes=["position-btn", "interactive-element"],interactive=True,variant="secondary")
+                                    bbtn_top_center = gr.Button("↑",elem_classes=["position-btn", "interactive-element"],interactive=True,variant="secondary")
+                                    btn_top_right = gr.Button("↗", elem_classes=["position-btn", "interactive-element"],interactive=True,variant="secondary")                                    
+
                                 with gr.Row():
-                                    btn_middle_left = gr.Button("←", elem_classes=["position-btn", "interactive-element"])
-                                    btn_middle_center = gr.Button("•", elem_classes=["position-btn", "interactive-element"])
-                                    btn_middle_right = gr.Button("→", elem_classes=["position-btn", "interactive-element"])
+                                    btn_middle_left = gr.Button("←", elem_classes=["position-btn", "interactive-element"],interactive=True,variant="secondary")
+                                    tn_middle_center = gr.Button("•",elem_classes=["position-btn", "interactive-element"],interactive=True,variant="secondary")
+                                    btn_middle_right = gr.Button("→", elem_classes=["position-btn", "interactive-element"],interactive=True,variant="secondary")
+                                    
                                 with gr.Row():
-                                    btn_bottom_left = gr.Button("↙", elem_classes=["position-btn", "interactive-element"])
-                                    btn_bottom_center = gr.Button("↓", elem_classes=["position-btn", "interactive-element"], value="selected")
-                                    btn_bottom_right = gr.Button("↘", elem_classes=["position-btn", "interactive-element"])
+                                    btn_bottom_left = gr.Button("↙", elem_classes=["position-btn", "interactive-element"],interactive=True,variant="secondary")
+                                    btn_bottom_center = gr.Button("↓", elem_classes=["position-btn", "interactive-element"],interactive=True,variant="secondary", value="selected")
+                                    btn_bottom_right = gr.Button("↘", elem_classes=["position-btn", "interactive-element"],interactive=True,variant="secondary")
+                
                             with gr.Column(scale=1):
                                 scale_slider = gr.Slider(
                                     minimum=10,
@@ -1207,12 +1304,12 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
             visible=True
         )
 
-
     def handle_button_click(btn_pos):
-        """버튼 클릭 이벤트 핸들러"""
-        print(f"Button clicked: {btn_pos}")  # 디버깅용
-        return update_position_and_ui(btn_pos)
-    
+        print(f"Button clicked: {btn_pos}")
+        updates = {btn: gr.update(variant="secondary") for btn in position_mapping.keys()}
+        updates[btn_pos] = gr.update(variant="primary")
+        return [btn_pos] + [updates[btn] for btn in position_mapping.keys()]
+
     # 버튼 이벤트 바인딩
     for btn, pos in position_mapping.items():
         btn.click(