Update app.py

app.py

@@ -176,33 +176,46 @@ def generate_background(prompt: str, aspect_ratio: str) -> Image.Image:
 def create_position_grid():
     """3x3 위치 선택 그리드를 생성하는 HTML"""
     return """
-    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 150px; margin: auto;">
-        <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 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>
     </div>
     <script>
-        const buttons = document.querySelectorAll('.position-btn');
-        buttons.forEach(btn => {
-            btn.style.width = '40px';
-            btn.style.height = '40px';
-            btn.style.border = '1px solid #ccc';
-            btn.style.borderRadius = '4px';
-            btn.style.cursor = 'pointer';
-            if (btn.dataset.default === 'true') {
-                btn.style.backgroundColor = '#2196F3';
-                btn.style.color = 'white';
+        function updatePosition(btn) {
+            // 모든 버튼의 스타일 초기화
+            document.querySelectorAll('.position-btn').forEach(b => {
+                b.style.backgroundColor = '';
+                b.style.color = '';
+            });
+            
+            // 클릭된 버튼 스타일 변경
+            btn.style.backgroundColor = '#2196F3';
+            btn.style.color = 'white';
+            
+            // position State 업데이트
+            const positionState = document.querySelector('#position-state');
+            if (positionState) {
+                positionState.value = btn.dataset.pos;
+                // 변경 이벤트 발생
+                positionState.dispatchEvent(new Event('change'));
             }
-        });
+        }
+        
+        // 초기 선택 버튼 스타일 설정
+        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]:
     """오브젝트의 위치 계산"""
     bg_width, bg_height = bg_size
@@ -301,7 +314,9 @@ def on_change_prompt(img: Image.Image | None, prompt: str | None, bg_prompt: str
 
 
 # process_prompt 함수 수정
-def process_prompt(img: Image.Image, prompt: str, bg_prompt: str | None = None, aspect_ratio: str = "1:1") -> tuple[Image.Image, Image.Image]:
+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]:
     try:
         if img is None or prompt.strip() == "":
             raise gr.Error("Please provide both image and prompt")
@@ -314,7 +329,11 @@ def process_prompt(img: Image.Image, prompt: str, bg_prompt: str | None = None,
         # Process the image
         results, _ = _process(img, prompt, bg_prompt, aspect_ratio)
         
-        # 합성된 이미지와 추출된 이미지만 반환
+        if bg_prompt:
+            # 위치와 크기 조정이 필요한 경우
+            combined = combine_with_background(results[2], results[1], position, scale_percent)
+            return combined, results[2]
+        
         return results[1], results[2]
     except Exception as e:
         raise gr.Error(str(e))
@@ -457,12 +476,12 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                     visible=True,
                     scale=1
                 )
-            
-            # 오브젝트 위치와 크기 조정 컨트롤
+
+
             with gr.Row(visible=False) as object_controls:
                 with gr.Column(scale=1):
-                    gr.HTML(create_position_grid())
-                    position = gr.State(value="bottom-center")
+                    position_grid = gr.HTML(create_position_grid())
+                    position = gr.State(value="bottom-center", elem_id="position-state")
                 with gr.Column(scale=1):
                     scale_slider = gr.Slider(
                         minimum=10,
@@ -472,12 +491,16 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                         label="Object Size (%)"
                     )
             
+
+            
             process_btn = gr.Button(
                 "Process",
                 variant="primary",
                 interactive=False
             )
+# UI 부분에서 position State 추가
 
+        
         with gr.Column(scale=1):
             with gr.Row():
                 combined_image = gr.Image(