Restore UI

app.py

@@ -474,138 +474,27 @@ human_ex_list = human_list_path
 
 image_blocks = gr.Blocks().queue()
 with image_blocks as demo:
-    # ImageEditor의 canvas 실제 크기만 고정하여 브러시 위치 정확도 유지 (기본 기능 보존)
-    gr.HTML("""
-    <style>
-        /* 출력 이미지 크기 고정: Masked image output 및 Output */
-        /* PC: 고정 크기 (384x512) */
-        @media (min-width: 768px) {
-            #masked-img img,
-            #output-img img {
-                width: 384px !important;
-                height: 512px !important;
-                max-width: 384px !important;
-                max-height: 512px !important;
-                object-fit: contain !important;
-            }
-            #masked-img,
-            #output-img {
-                max-width: 384px !important;
-            }
-        }
-        
-        /* 모바일: 화면 크기에 맞게 스케일링하되 비율 유지 (최대 384px) */
-        @media (max-width: 767px) {
-            #masked-img img,
-            #output-img img {
-                width: 100% !important;
-                max-width: 384px !important;
-                height: auto !important;
-                aspect-ratio: 3/4 !important;
-                object-fit: contain !important;
-            }
-            #masked-img,
-            #output-img {
-                width: 100% !important;
-                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>
-        // ImageEditor의 canvas 실제 픽셀 크기만 고정하여 브러시 위치 정확도 유지
-        // 프레임과 UI 요소는 Gradio의 기본 동작에 맡김
-        (function() {
-            const CANVAS_WIDTH = 384;
-            const CANVAS_HEIGHT = 512;
-            
-            function fixImageEditorCanvas() {
-                const editor = document.querySelector('#image-editor-fixed');
-                if (!editor) return;
-                
-                // 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;
-                    }
-                });
-            }
-            
-            // 초기 실행
-            function init() {
-                fixImageEditorCanvas();
-            }
-            
-            if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', init);
-            } else {
-                init();
-            }
-            
-            // 이미지 로드 후 재적용
-            window.addEventListener('load', function() {
-                setTimeout(fixImageEditorCanvas, 100);
-                setTimeout(fixImageEditorCanvas, 500);
-                setTimeout(fixImageEditorCanvas, 1500);
-            });
-            
-            // 리사이즈 시 재적용 (모바일 회전 등)
-            let resizeTimeout;
-            window.addEventListener('resize', function() {
-                clearTimeout(resizeTimeout);
-                resizeTimeout = setTimeout(fixImageEditorCanvas, 300);
-            });
-            
-            // MutationObserver로 동적 변경 감지 (ImageEditor가 동적으로 로드될 때)
-            const observer = new MutationObserver(function(mutations) {
-                fixImageEditorCanvas();
-            });
-            
-            // ImageEditor가 로드된 후 observer 시작
-            setTimeout(function() {
-                const editor = document.querySelector('#image-editor-fixed');
-                if (editor) {
-                    observer.observe(editor, {
-                        childList: true,
-                        subtree: true,
-                        attributes: false
-                    });
-                }
-            }, 1000);
-        })();
-    </script>
-    """)
+    
     gr.Markdown("## DXCO : GENAI-VTON")
     gr.Markdown("임성남, 윤지영, 조민주 based on IDM-VTON")
     gr.Markdown("이미지는 3:4비율(384x512 또는 768x1024)로 올려주세요")
     with gr.Row():
         with gr.Column():
-            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")
+            imgs = gr.ImageEditor(sources='upload', type="pil", label='대상 이미지', interactive=True)
             with gr.Row():
-                with gr.Row():
-                    is_checked = gr.Checkbox(label="Yes", info="자동 마스킹",value=True)
+                img_url_input = gr.Textbox(label="대상 이미지 URL", placeholder="예) https://example.com/human_image.jpg")
+            with gr.Row():
+                is_checked = gr.Checkbox(label="Yes", info="자동 마스킹",value=True)
             example = gr.Examples(
                 inputs=imgs,
-                examples_per_page=8,
-                examples=human_ex_list,
+                examples_per_page=10,
+                examples=human_ex_list
             )
 
         with gr.Column():
             garm_img = gr.Image(label="의상 이미지", sources='upload', type="pil")
-            garm_url_input = gr.Textbox(label="의상 이미지 URL", placeholder="예) https://example.com/garment.jpg")
+            with gr.Row():
+                garm_url_input = gr.Textbox(label="의상 이미지 URL", placeholder="예) https://example.com/garment.jpg")
             with gr.Row(elem_id="prompt-container"):
                 with gr.Row():
                     prompt = gr.Textbox(placeholder="Description of garment ex) Short Sleeve Round Neck T-shirts", show_label=False, elem_id="prompt")