Image editor frame resize

app.py

@@ -474,71 +474,9 @@ human_ex_list = human_list_path
 
 image_blocks = gr.Blocks().queue()
 with image_blocks as demo:
-    # CSS를 추가하여 ImageEditor의 canvas 크기를 고정하여 브러시 포인터 위치 정렬 (PC 및 모바일 대응)
+    # ImageEditor의 canvas 실제 크기만 고정하여 브러시 위치 정확도 유지 (기본 기능 보존)
     gr.HTML("""
     <style>
-        /* PC 및 모바일 공통: ImageEditor 컨테이너 */
-        #image-editor-fixed {
-            position: relative;
-            display: inline-block;
-        }
-        
-        /* PC: 고정 크기 (384x512) */
-        @media (min-width: 768px) {
-            #image-editor-fixed canvas {
-                width: 384px !important;
-                height: 512px !important;
-                max-width: 384px !important;
-                max-height: 512px !important;
-                object-fit: contain !important;
-            }
-            #image-editor-fixed > div,
-            #image-editor-fixed .image-editor-container,
-            #image-editor-fixed .image-editor-wrapper,
-            #image-editor-fixed [class*="editor"],
-            #image-editor-fixed [class*="canvas"] {
-                width: 384px !important;
-                height: 512px !important;
-                max-width: 384px !important;
-                max-height: 512px !important;
-            }
-            #image-editor-fixed img {
-                width: 384px !important;
-                height: 512px !important;
-                max-width: 384px !important;
-                max-height: 512px !important;
-                object-fit: contain !important;
-            }
-        }
-        
-        /* 모바일: 화면 크기에 맞게 스케일링하되 비율 유지 */
-        @media (max-width: 767px) {
-            #image-editor-fixed {
-                width: 100% !important;
-                max-width: 100% !important;
-            }
-            #image-editor-fixed canvas {
-                width: 100% !important;
-                max-width: 100% !important;
-                height: auto !important;
-                aspect-ratio: 3/4 !important;
-                object-fit: contain !important;
-            }
-            #image-editor-fixed > div,
-            #image-editor-fixed .image-editor-container,
-            #image-editor-fixed .image-editor-wrapper {
-                width: 100% !important;
-                max-width: 100% !important;
-            }
-            #image-editor-fixed img {
-                width: 100% !important;
-                max-width: 100% !important;
-                height: auto !important;
-                aspect-ratio: 3/4 !important;
-                object-fit: contain !important;
-            }
-        }
-        
         /* 출력 이미지 크기 고정: Masked image output 및 Output */
         /* PC: 고정 크기 (384x512) */
         @media (min-width: 768px) {
@@ -572,9 +510,20 @@ with image_blocks as demo:
                 max-width: 384px !important;
             }
         }
+        
+        /* ImageEditor: 이미지만 프레임 안에 맞추기 (UI 요소는 건드리지 않음) */
+        #image-editor-fixed canvas {
+            object-fit: contain !important;
+        }
+        #image-editor-fixed img {
+            object-fit: contain !important;
+            max-width: 100% !important;
+            max-height: 100% !important;
+        }
     </style>
     <script>
-        // PC 및 모바일 모두에서 canvas의 실제 크기를 고정하여 브러시 위치 정확도 유지
+        // ImageEditor의 canvas 실제 픽셀 크기만 고정하여 브러시 위치 정확도 유지
+        // 프레임과 UI 요소는 Gradio의 기본 동작에 맡김
         (function() {
             const CANVAS_WIDTH = 384;
             const CANVAS_HEIGHT = 512;
@@ -583,47 +532,31 @@ with image_blocks as demo:
                 const editor = document.querySelector('#image-editor-fixed');
                 if (!editor) return;
                 
-                const canvas = editor.querySelector('canvas');
-                if (!canvas) return;
-                
-                // canvas의 실제 픽셀 크기는 항상 고정 (브러시 위치 정확도 유지)
-                if (canvas.width !== CANVAS_WIDTH || canvas.height !== CANVAS_HEIGHT) {
-                    canvas.width = CANVAS_WIDTH;
-                    canvas.height = CANVAS_HEIGHT;
-                }
-                
-                // 모바일에서는 CSS로 표시 크기만 조정, PC에서는 고정 크기
-                const isMobile = window.innerWidth <= 767;
-                if (isMobile) {
-                    // 모바일: 화면 크기에 맞게 표시하되 비율 유지
-                    const container = editor.closest('.gradio-column') || editor.parentElement;
-                    if (container) {
-                        const maxWidth = Math.min(container.offsetWidth - 20, 384);
-                        const maxHeight = (maxWidth * 4) / 3;
-                        canvas.style.width = maxWidth + 'px';
-                        canvas.style.height = maxHeight + 'px';
-                        canvas.style.maxWidth = '100%';
-                        canvas.style.maxHeight = 'none';
+                // ImageEditor 내부의 모든 canvas 찾기
+                const canvases = editor.querySelectorAll('canvas');
+                canvases.forEach(function(canvas) {
+                    // canvas의 실제 픽셀 크기는 항상 고정 (브러시 위치 정확도 유지)
+                    if (canvas.width !== CANVAS_WIDTH || canvas.height !== CANVAS_HEIGHT) {
+                        canvas.width = CANVAS_WIDTH;
+                        canvas.height = CANVAS_HEIGHT;
                     }
-                } else {
-                    // PC: 고정 크기
-                    canvas.style.width = CANVAS_WIDTH + 'px';
-                    canvas.style.height = CANVAS_HEIGHT + 'px';
-                    canvas.style.maxWidth = CANVAS_WIDTH + 'px';
-                    canvas.style.maxHeight = CANVAS_HEIGHT + 'px';
-                }
+                });
             }
             
             // 초기 실행
+            function init() {
+                fixImageEditorCanvas();
+            }
+            
             if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', fixImageEditorCanvas);
+                document.addEventListener('DOMContentLoaded', init);
             } else {
-                fixImageEditorCanvas();
+                init();
             }
             
             // 이미지 로드 후 재적용
             window.addEventListener('load', function() {
-                fixImageEditorCanvas();
+                setTimeout(fixImageEditorCanvas, 100);
                 setTimeout(fixImageEditorCanvas, 500);
                 setTimeout(fixImageEditorCanvas, 1500);
             });
@@ -635,7 +568,7 @@ with image_blocks as demo:
                 resizeTimeout = setTimeout(fixImageEditorCanvas, 300);
             });
             
-            // MutationObserver로 동적 변경 감지
+            // MutationObserver로 동적 변경 감지 (ImageEditor가 동적으로 로드될 때)
             const observer = new MutationObserver(function(mutations) {
                 fixImageEditorCanvas();
             });
@@ -647,8 +580,7 @@ with image_blocks as demo:
                     observer.observe(editor, {
                         childList: true,
                         subtree: true,
-                        attributes: true,
-                        attributeFilter: ['style', 'class']
+                        attributes: false
                     });
                 }
             }, 1000);
@@ -660,7 +592,7 @@ with image_blocks as demo:
     gr.Markdown("이미지는 3:4비율(384x512 또는 768x1024)로 올려주세요")
     with gr.Row():
         with gr.Column():
-            imgs = gr.ImageEditor(sources='upload', type="pil", label='대상 이미지', interactive=True, height=512, elem_id="image-editor-fixed")
+            imgs = gr.ImageEditor(sources='upload', type="pil", label='대상 이미지', interactive=True, elem_id="image-editor-fixed")
             img_url_input = gr.Textbox(label="대상 이미지 URL", placeholder="예) https://example.com/human_image.jpg")
             with gr.Row():
                 with gr.Row():