Update app.py

app.py

@@ -185,39 +185,16 @@ def generate_background(prompt: str, aspect_ratio: str) -> Image.Image:
 def create_position_grid():
     return """
     <div class="position-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 150px; margin: auto;">
-        <button class="position-btn" data-pos="top-left" onclick="updatePosition(this)">↖</button>
-        <button class="position-btn" data-pos="top-center" onclick="updatePosition(this)">↑</button>
-        <button class="position-btn" data-pos="top-right" onclick="updatePosition(this)">↗</button>
-        <button class="position-btn" data-pos="middle-left" onclick="updatePosition(this)">←</button>
-        <button class="position-btn" data-pos="middle-center" onclick="updatePosition(this)">•</button>
-        <button class="position-btn" data-pos="middle-right" onclick="updatePosition(this)">→</button>
-        <button class="position-btn" data-pos="bottom-left" onclick="updatePosition(this)">↙</button>
-        <button class="position-btn" data-pos="bottom-center" onclick="updatePosition(this)" data-default="true">↓</button>
-        <button class="position-btn" data-pos="bottom-right" onclick="updatePosition(this)">↘</button>
+        <button class="position-btn" data-pos="top-left">↖</button>
+        <button class="position-btn" data-pos="top-center">↑</button>
+        <button class="position-btn" data-pos="top-right">↗</button>
+        <button class="position-btn" data-pos="middle-left">←</button>
+        <button class="position-btn" data-pos="middle-center">•</button>
+        <button class="position-btn" data-pos="middle-right">→</button>
+        <button class="position-btn" data-pos="bottom-left">↙</button>
+        <button class="position-btn" data-pos="bottom-center" data-default="true">↓</button>
+        <button class="position-btn" data-pos="bottom-right">↘</button>
     </div>
-    <script>
-        function updatePosition(btn) {
-            // 모든 버튼의 스타일 초기화
-            document.querySelectorAll('.position-btn').forEach(b => {
-                b.style.backgroundColor = '';
-                b.style.color = '';
-            });
-            
-            // 클릭된 버튼 스타일 변경
-            btn.style.backgroundColor = '#2196F3';
-            btn.style.color = 'white';
-            
-            // Gradio에 이벤트 발생
-            const event = new CustomEvent('position-update', {
-                detail: { position: btn.dataset.pos }
-            });
-            document.dispatchEvent(event);
-        }
-        
-        // 초기 선택 버튼 스타일 설정
-        document.querySelector('[data-default="true"]').style.backgroundColor = '#2196F3';
-        document.querySelector('[data-default="true"]').style.color = 'white';
-    </script>
     """
 
 def calculate_object_position(position: str, bg_size: tuple[int, int], obj_size: tuple[int, int]) -> tuple[int, int]:
@@ -486,11 +463,18 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                     scale=1
                 )
 
-# UI 부분에서 position State 부분 수정
             with gr.Row(visible=False) as object_controls:
                 with gr.Column(scale=1):
                     position_grid = gr.HTML(create_position_grid())
-                    position = gr.State(value="bottom-center")  # elem_id 제거
+                    # Radio 버튼으로 변경
+                    position = gr.Radio(
+                        choices=["top-left", "top-center", "top-right",
+                                "middle-left", "middle-center", "middle-right",
+                                "bottom-left", "bottom-center", "bottom-right"],
+                        value="bottom-center",
+                        label="Position",
+                        visible=False  # UI에서는 숨김
+                    )
                 with gr.Column(scale=1):
                     scale_slider = gr.Slider(
                         minimum=10,
@@ -499,15 +483,13 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                         step=5,
                         label="Object Size (%)"
                     )
-
-
-            
-            process_btn = gr.Button(
-                "Process",
-                variant="primary",
-                interactive=False
+    # 위치 선택 이벤트 처리
+            position_grid.click(
+                fn=lambda evt: evt.index,  # 클릭된 위치의 인덱스 반환
+                inputs=[],
+                outputs=[position],
+                preprocess=False
             )
-# UI 부분에서 position State 추가
 
         
         with gr.Column(scale=1):