Update app.py

app.py

@@ -61,7 +61,6 @@ def create_hacked_forward(module):
     def lora_forward(self, active_adapter, x, *args, **kwargs):
         result = self.base_layer(x, *args, **kwargs)
         if active_adapter is not None:
-            torch_result_dtype = result.dtype
             lora_A = self.lora_A[active_adapter]
             lora_B = self.lora_B[active_adapter]
             dropout = self.lora_dropout[active_adapter]
@@ -94,16 +93,12 @@ def seed_everything(seed=0):
 
 @spaces.GPU
 def generate(person_image, object_image, object_class, steps, guidance_scale, seed):
-    # set seed
     if seed == -1:
         seed = random.randint(0, 2**32 - 1)
     seed_everything(seed)
 
-    # resize model
     max_area = 1024 * 1024
-    oW = person_image.width
-    oH = person_image.height
-
+    oW, oH = person_image.width, person_image.height
     ratio = math.sqrt(max_area / (oW * oH))
     ratio = min(1, ratio)
     tW, tH = int(oW * ratio) // 16 * 16, int(oH * ratio) // 16 * 16
@@ -113,7 +108,6 @@ def generate(person_image, object_image, object_class, steps, guidance_scale, se
     ])
     person_image = transform(person_image)
 
-    # resize and padding garment
     ratio = min(tW / object_image.width, tH / object_image.height)
     transform = T.Compose([
         T.Resize((int(object_image.height * ratio), int(object_image.width * ratio))),
@@ -126,7 +120,6 @@ def generate(person_image, object_image, object_class, steps, guidance_scale, se
     min_y = (tH - new_h) // 2
     object_image_padded[:, min_y: min_y + new_h, min_x: min_x + new_w] = object_image
 
-    # prepare prompts and conditions
     prompts = [args.object_map[object_class]] * 2
     img_cond = torch.stack([person_image, object_image_padded]).to(dtype=weight_dtype, device=device)
     mask = torch.zeros_like(img_cond).to(img_cond)
@@ -146,448 +139,90 @@ def generate(person_image, object_image, object_class, steps, guidance_scale, se
     return img
 
 
-# Custom CSS for enhanced visual design
+# Custom CSS
 custom_css = """
-/* background gradient */
+/* 전체 배경 */
 .gradio-container {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     font-family: 'Inter', sans-serif;
 }
 
-/* main container */
-.container {
-    max-width: 1400px !important;
-    margin: auto;
-    padding: 20px;
-}
-
-/* header */
-#header {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 20px;
-    padding: 30px;
-    margin-bottom: 30px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-#header h1 {
-    background: linear-gradient(45deg, #fff, #e0e0ff);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-size: 3.5em;
-    font-weight: 800;
-    text-align: center;
-    margin: 0;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-#subtitle {
-    text-align: center;
-    color: rgba(255, 255, 255, 0.9);
-    font-size: 1.2em;
-    margin-top: 10px;
-    font-weight: 300;
-}
-
-/* image upload cards */
-.image-container {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 16px;
-    padding: 20px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    border: 2px solid rgba(102, 126, 234, 0.3);
-}
-
-.image-container:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
-    border-color: rgba(102, 126, 234, 0.6);
-}
-
-/* remove default placeholders entirely */
-.gr-image .placeholder,
-.gr-image .placeholder-content,
-.gr-image .svelte-1gfkn6j_center {
+/* === 플레이스홀더 전부 제거 === */
+.gr-image svg,
+.gr-image [data-testid*="placeholder"],
+.gr-image [class*="placeholder"],
+.gr-image [aria-label*="placeholder"],
+.gr-image [class*="svelte"][class*="placeholder"],
+.gr-image .absolute.inset-0.flex.items-center.justify-center,
+.gr-image .flex.items-center.justify-center svg {
     display: none !important;
     visibility: hidden !important;
 }
-
-/* clean upload area */
-.gr-image .wrap {
-    background: transparent !important;
-    min-height: 400px !important;
+.gr-image [class*="overlay"],
+.gr-image .fixed.inset-0,
+.gr-image .absolute.inset-0 {
+    pointer-events: none !important;
 }
 
+/* 이미지 업로드 영역 */
+.gr-image .wrap { background: transparent !important; min-height: 400px !important; }
 .gr-image .upload-container {
-    background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.5) 100%) !important;
-    border: 3px dashed rgba(102, 126, 234, 0.4) !important;
-    border-radius: 12px !important;
     min-height: 400px !important;
-    position: relative !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-}
-
-.gr-image .upload-container:hover {
-    border-color: rgba(102, 126, 234, 0.7) !important;
-    background: linear-gradient(135deg, rgba(248, 250, 252, 0.7) 0%, rgba(241, 245, 249, 0.7) 100%) !important;
-}
-
-/* uploaded image styling */
-.gr-image img {
+    border: 3px dashed rgba(102, 126, 234, 0.4) !important;
     border-radius: 12px !important;
-    position: relative !important;
-    z-index: 10 !important;
-    max-width: 100% !important;
-    height: auto !important;
-    display: block !important;
-}
-
-/* when an image exists, remove any dashed border or bg and hide overlays/icons */
-.gr-image:has(img) .upload-container {
-    border: none !important;
-    background: transparent !important;
-}
-
-/* completely hide any placeholder, overlay, or svg when an image is present */
-.gr-image:has(img) .placeholder,
-.gr-image:has(img) .placeholder-content,
-.gr-image:has(img) svg,
-.gr-image:has(img) [class*="placeholder"],
-.gr-image:has(img) [class*="overlay"],
-.gr-image:has(img) .upload-container::after {
-    display: none !important;
-    visibility: hidden !important;
-}
-
-/* keep upload-container positioned correctly */
-.gr-image .upload-container {
+    background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.5) 100%) !important;
     position: relative !important;
 }
-
-/* add friendly helper text for empty state */
+/* 이미지 있을 때 */
+.gr-image:has(img) .upload-container { border: none !important; background: transparent !important; }
+/* 안내 텍스트 */
 .gr-image .upload-container::after {
-    content: "Click or Drag to Upload" !important;
-    position: absolute !important;
-    top: 50% !important;
-    left: 50% !important;
-    transform: translate(-50%, -50%) !important;
-    color: rgba(102, 126, 234, 0.7) !important;
-    font-size: 1.1em !important;
-    font-weight: 500 !important;
-    pointer-events: none !important;
-}
-
-/* hide helper text when an image exists */
-.gr-image:has(img) .upload-container::after {
-    display: none !important;
-}
-
-/* labels */
-label {
-    font-weight: 600 !important;
-    color: #4a5568 !important;
-    font-size: 1.1em !important;
-    margin-bottom: 8px !important;
-    display: block !important;
-}
-
-/* buttons */
+    content: "Click or Drag to Upload";
+    position: absolute; top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(102, 126, 234, 0.7);
+    font-size: 1.05em; font-weight: 500;
+    pointer-events: none;
+}
+.gr-image:has(img) .upload-container::after { display: none !important; }
+/* 업로드 이미지 */
+.gr-image img { border-radius: 12px !important; position: relative !important; z-index: 10 !important; }
+
+/* 버튼, 라벨 등 나머지는 그대로 */
 .gr-button-primary {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border: none !important;
-    color: white !important;
-    padding: 15px 40px !important;
-    font-size: 1.2em !important;
-    font-weight: 600 !important;
-    border-radius: 50px !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
-    text-transform: uppercase !important;
-    letter-spacing: 1px !important;
-}
-
-.gr-button-primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
-}
-
-/* dropdown */
-.gr-dropdown {
-    border-radius: 12px !important;
-    border: 2px solid #e2e8f0 !important;
-    padding: 12px !important;
-    font-size: 1em !important;
-    transition: all 0.3s ease !important;
-    background: white !important;
-}
-
-.gr-dropdown:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
-}
-
-/* accordion */
-.gr-accordion {
-    background: rgba(255, 255, 255, 0.95) !important;
-    border-radius: 16px !important;
-    margin-top: 20px !important;
-    overflow: hidden !important;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
-}
-
-.gr-accordion-header {
-    background: linear-gradient(135deg, #f6f9fc 0%, #e9ecef 100%) !important;
-    padding: 15px 20px !important;
-    font-weight: 600 !important;
-    color: #4a5568 !important;
-}
-
-/* sliders */
-.gr-slider {
-    margin: 15px 0 !important;
-}
-
-.gr-slider input[type="range"] {
-    background: linear-gradient(to right, #667eea 0%, #764ba2 100%) !important;
-    height: 6px !important;
-    border-radius: 3px !important;
-}
-
-.gr-slider input[type="range"]::-webkit-slider-thumb {
-    background: white !important;
-    border: 3px solid #667eea !important;
-    width: 20px !important;
-    height: 20px !important;
-    border-radius: 50% !important;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
-}
-
-/* number input */
-.gr-number input {
-    border-radius: 12px !important;
-    border: 2px solid #e2e8f0 !important;
-    padding: 12px !important;
-    font-size: 1em !important;
-    transition: all 0.3s ease !important;
-}
-
-.gr-number input:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
-}
-
-/* examples */
-.gr-examples {
-    background: rgba(255, 255, 255, 0.95) !important;
-    border-radius: 16px !important;
-    padding: 20px !important;
-    margin-top: 30px !important;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
-}
-
-.gr-examples-title {
-    font-size: 1.3em !important;
-    font-weight: 700 !important;
-    color: #4a5568 !important;
-    margin-bottom: 15px !important;
-}
-
-.gr-sample-image {
-    border-radius: 8px !important;
-    transition: transform 0.3s ease !important;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-}
-
-.gr-sample-image:hover {
-    transform: scale(1.05) !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
-}
-
-/* loading */
-.gr-loading {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    animation: pulse 1.5s infinite !important;
-}
-
-@keyframes pulse {
-    0% { opacity: 1; }
-    50% { opacity: 0.7; }
-    100% { opacity: 1; }
-}
-
-/* row spacing */
-.gr-row { gap: 20px !important; }
-
-/* card effect */
-.card-style {
-    background: white;
-    border-radius: 16px;
-    padding: 24px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
-    transition: all 0.3s ease;
-}
-
-.card-style:hover {
-    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
-}
-
-/* icon label */
-.icon-label::before { content: "✨ "; font-size: 1.2em; }
-
-/* responsive */
-@media (max-width: 768px) {
-    #header h1 { font-size: 2.5em; }
-    .gr-button-primary { padding: 12px 30px !important; font-size: 1em !important; }
+    color: white !important; border: none !important;
+    padding: 15px 40px !important; font-size: 1.2em !important;
+    border-radius: 50px !important; cursor: pointer !important;
 }
 """
 
 if __name__ == '__main__':
 
     with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
-        # header
         with gr.Column(elem_id="header"):
             gr.HTML("""
                 <h1>✨ CodiFit-AI Virtual Try-On ✨</h1>
                 <p id="subtitle">Experience the future of fashion with AI-powered virtual clothing try-on</p>
             """)
-
-        # main content
         with gr.Row(equal_height=True):
-            # left column - Person Image
             with gr.Column(scale=1):
-                with gr.Group(elem_classes="card-style"):
-                    gr.HTML("<h3 style='text-align: center; color: #667eea; margin-bottom: 15px;'>👤 Person Image</h3>")
-                    person_image = gr.Image(
-                        type="pil",
-                        label="Upload Person Photo",
-                        height=500,
-                        elem_classes="image-container",
-                        show_label=True,
-                        container=True,
-                        interactive=True
-                    )
-
-            # middle column - Object Image and controls
+                person_image = gr.Image(type="pil", label="Upload Person Photo", height=500, interactive=True)
             with gr.Column(scale=1):
-                with gr.Group(elem_classes="card-style"):
-                    gr.HTML("<h3 style='text-align: center; color: #764ba2; margin-bottom: 15px;'>👔 Object to Try</h3>")
-                    object_image = gr.Image(
-                        type="pil",
-                        label="Upload Object Image",
-                        height=400,
-                        elem_classes="image-container",
-                        show_label=True,
-                        container=True,
-                        interactive=True
-                    )
-                    object_class = gr.Dropdown(
-                        label='Select Object Category',
-                        choices=args.object_map.keys(),
-                        elem_classes="icon-label"
-                    )
-                    run_button = gr.Button(
-                        value="🚀 Generate Try-On",
-                        variant='primary',
-                        size="lg"
-                    )
-
-            # right column - Output
+                object_image = gr.Image(type="pil", label="Upload Object Image", height=400, interactive=True)
+                object_class = gr.Dropdown(label='Select Object Category', choices=args.object_map.keys())
+                run_button = gr.Button(value="🚀 Generate Try-On", variant='primary')
             with gr.Column(scale=1):
-                with gr.Group(elem_classes="card-style"):
-                    gr.HTML("<h3 style='text-align: center; color: #667eea; margin-bottom: 15px;'>🎨 Generated Result</h3>")
-                    image_out = gr.Image(
-                        type="pil",
-                        label="Virtual Try-On Result",
-                        height=500,
-                        elem_classes="image-container",
-                        show_label=True,
-                        container=True,
-                        interactive=False
-                    )
+                image_out = gr.Image(type="pil", label="Virtual Try-On Result", height=500, interactive=False)
 
-        # Advanced Settings
-        with gr.Accordion("⚙️ Advanced Settings", open=False, elem_classes="card-style"):
+        with gr.Accordion("⚙️ Advanced Settings", open=False):
             with gr.Row():
-                with gr.Column(scale=1):
-                    guidance_scale = gr.Slider(
-                        label="🎯 Guidance Scale",
-                        info="Higher values produce images closer to the text prompt",
-                        minimum=1,
-                        maximum=50,
-                        value=30,
-                        step=0.1
-                    )
-                with gr.Column(scale=1):
-                    steps = gr.Slider(
-                        label="🔄 Inference Steps",
-                        info="More steps = better quality but slower",
-                        minimum=1,
-                        maximum=50,
-                        value=20,
-                        step=1
-                    )
-                with gr.Column(scale=1):
-                    seed = gr.Number(
-                        label="🎲 Random Seed",
-                        info="Use -1 for random generation",
-                        value=-1,
-                        precision=0
-                    )
-
-        # Examples Gallery
-        gr.HTML("""
-            <div style='background: rgba(255,255,255,0.95); border-radius: 16px; padding: 25px; margin-top: 30px;'>
-                <h3 style='text-align: center; color: #4a5568; margin-bottom: 20px; font-size: 1.5em;'>
-                    📸 Example Gallery
-                </h3>
-                <p style='text-align: center; color: #718096; margin-bottom: 20px;'>
-                    Click any example below to try it out instantly!
-                </p>
-            </div>
-        """)
-
-        with gr.Row():
-            gr.Examples(
-                examples=[
-                    ['./demo_example/person_top_cloth.jpg', './demo_example/object_top_cloth.jpg', 'top clothes'],
-                    ['./demo_example/person_bottom_cloth.jpg', './demo_example/object_bottom_cloth.jpg', 'bottom clothes'],
-                    ['./demo_example/person_dress.jpg', './demo_example/object_dress.jpg', 'dress'],
-                    ['./demo_example/person_shoes.jpg', './demo_example/object_shoes.jpg', 'shoe'],
-                    ['./demo_example/person_earrings.jpg', './demo_example/object_earrings.jpg', 'earrings'],
-                    ['./demo_example/person_bracelet.jpg', './demo_example/object_bracelet.jpg', 'bracelet'],
-                    ['./demo_example/person_necklace.jpg', './demo_example/object_necklace.jpg', 'necklace'],
-                    ['./demo_example/person_ring.jpg', './demo_example/object_ring.jpg', 'ring'],
-                    ['./demo_example/person_sunglasses.jpg', './demo_example/object_sunglasses.jpg', 'sunglasses'],
-                    ['./demo_example/person_glasses.jpg', './demo_example/object_glasses.jpg', 'glasses'],
-                    ['./demo_example/person_belt.jpg', './demo_example/object_belt.jpg', 'belt'],
-                    ['./demo_example/person_bag.jpg', './demo_example/object_bag.jpg', 'bag'],
-                    ['./demo_example/person_hat.jpg', './demo_example/object_hat.jpg', 'hat'],
-                    ['./demo_example/person_tie.jpg', './demo_example/object_tie.jpg', 'tie'],
-                    ['./demo_example/person_bowtie.jpg', './demo_example/object_bowtie.jpg', 'bow tie'],
-                ],
-                inputs=[person_image, object_image, object_class],
-                examples_per_page=5,
-                label="Try These Examples"
-            )
-
-        # Footer
-        gr.HTML("""
-            <div style='text-align: center; margin-top: 40px; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 16px;'>
-                <p style='color: rgba(255,255,255,0.9); font-size: 0.9em;'>
-                    Powered by FLUX.1-Fill and CodiFit-AI | Made with 💜
-                </p>
-            </div>
-        """)
+                guidance_scale = gr.Slider(label="🎯 Guidance Scale", minimum=1, maximum=50, value=30, step=0.1)
+                steps = gr.Slider(label="🔄 Inference Steps", minimum=1, maximum=50, value=20, step=1)
+                seed = gr.Number(label="🎲 Random Seed", value=-1, precision=0)
 
-        run_button.click(
-            generate,
-            inputs=[person_image, object_image, object_class, steps, guidance_scale, seed],
-            outputs=[image_out]
-        )
+        run_button.click(generate,
+                         inputs=[person_image, object_image, object_class, steps, guidance_scale, seed],
+                         outputs=[image_out])
 
     demo.launch(server_name="0.0.0.0")