Update app.py

app.py

@@ -15,52 +15,8 @@ torch.jit.script = lambda f: f
 from model.cloth_masker import AutoMasker, vis_mask
 from model.pipeline import CatVTONPipeline
 from utils import init_weight_dtype, resize_and_crop, resize_and_padding
-from PIL import Image
 
-def add_watermark(main_image, logo_path, position='bottom-right', size_percentage=10):
-    """
-    Add a watermark to an image
-    Args:
-        main_image (PIL.Image): The main image
-        logo_path (str): Path to the logo image
-        position (str): Position of watermark ('bottom-right', 'bottom-left', 'top-right', 'top-left')
-        size_percentage (int): Size of watermark relative to main image (in percentage)
-    Returns:
-        PIL.Image: Image with watermark
-    """
-    # Open and resize the logo
-    logo = Image.open(logo_path).convert('RGBA')
-    
-    # Calculate the size for the logo
-    main_width, main_height = main_image.size
-    logo_width = int(main_width * size_percentage / 100)
-    logo_height = int(logo.size[1] * (logo_width / logo.size[0]))
-    logo = logo.resize((logo_width, logo_height), Image.Resampling.LANCZOS)
-    
-    # Convert main image to RGBA if it isn't already
-    if main_image.mode != 'RGBA':
-        main_image = main_image.convert('RGBA')
-    
-    # Create a new blank image with the same size as main image
-    watermarked = Image.new('RGBA', main_image.size, (0, 0, 0, 0))
-    watermarked.paste(main_image, (0, 0))
-    
-    # Calculate position
-    if position == 'bottom-right':
-        position = (main_width - logo_width - 10, main_height - logo_height - 10)
-    elif position == 'bottom-left':
-        position = (10, main_height - logo_height - 10)
-    elif position == 'top-right':
-        position = (main_width - logo_width - 10, 10)
-    elif position == 'top-left':
-        position = (10, 10)
-    
-    # Paste the logo
-    watermarked.paste(logo, position, logo)
-    
-    # Convert back to RGB
-    return watermarked.convert('RGB')
-    
+
 def parse_args():
     parser = argparse.ArgumentParser(description="Simple example of a training script.")
     parser.add_argument(
@@ -230,9 +186,8 @@ def submit_function(
     masked_person = vis_mask(person_image, mask)
     save_result_image = image_grid([person_image, masked_person, cloth_image, result_image], 1, 4)
     save_result_image.save(result_save_path)
-    final_image = None
     if show_type == "result only":
-        final_image = result_image
+        return result_image
     else:
         width, height = person_image.size
         if show_type == "input & result":
@@ -245,11 +200,7 @@ def submit_function(
         new_result_image = Image.new("RGB", (width + condition_width + 5, height))
         new_result_image.paste(conditions, (0, 0))
         new_result_image.paste(result_image, (condition_width + 5, 0))
-        final_image = new_result_image
-    
-    # Add watermark
-    watermarked_image = add_watermark(final_image, 'logo.png', 'bottom-right', 20)
-    return watermarked_image
+    return new_result_image
 
 
 def person_example_fn(image_path):
@@ -286,109 +237,12 @@ HEADER = """
 · Thanks to <a href="https://huggingface.co/zero-gpu-explorers">ZeroGPU</a> for providing A100 for our <a href="https://huggingface.co/spaces/zhengchong/CatVTON">HuggingFace Space</a>. <br>
 · SafetyChecker is set to filter NSFW content, but it may block normal results too. Please adjust the <span>`seed`</span> for normal outcomes.<br> 
 """
-def app_gradio():
-    custom_css = """
-        @media (max-width: 768px) {
-    .gr-column {
-        width: 100% !important;
-        padding: 0.5rem;
-    }
-    .gr-row {
-        flex-direction: column !important;
-    }
-    .container {
-        margin: 0.5rem !important;
-        padding: 1rem !important;
-    }
-    button.primary-btn {
-        padding: 0.8rem 1rem;
-        font-size: 1rem;
-    }
-}
 
-@media (max-width: 480px) {
-    .gr-slider, .gr-radio-group, .gr-markdown, .gr-accordion {
-        font-size: 0.9rem !important;
-        padding: 0.5rem;
-    }
-    button.primary-btn {
-        font-size: 0.8rem;
-        padding: 0.6rem 0.8rem;
-    }
-    .gr-form {
-        margin: 0.5rem;
-    }
-}
-        button.primary-btn { 
-            background: linear-gradient(135deg, #2541b2 0%, #1a237e 100%);
-            transition: all 0.3s ease;
-            border: none;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            color: white !important;
-        }
-        button.primary-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-        }
-        .gr-button { 
-            background: linear-gradient(135deg, #2541b2 0%, #1a237e 100%);
-            color: white !important;
-            border: none;
-            transition: all 0.3s ease;
-        }
-        .gr-button:hover {
-            opacity: 0.9;
-            transform: translateY(-2px);
-        }
-        body { 
-            background: linear-gradient(135deg, #f8f9fa 0%, #e8eaf6 100%);
-        }
-        .container {
-            border-radius: 12px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        }
-        .gr-form {
-            border-radius: 8px;
-            background: white;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-        }
-        .gr-radio-group {
-            background: white;
-            padding: 12px;
-            border-radius: 8px;
-        }
-        .gr-accordion {
-            border-radius: 8px;
-            overflow: hidden;
-        }
-        /* Force white text in buttons */
-        button.primary-btn span {
-            color: white !important;
-        }
-        .gr-button span {
-            color: white !important;
-        }
-    """
-
-    with gr.Blocks(title="Deradh Virtual Try-On", css=custom_css) as demo:
-        gr.Markdown(
-            """
-            <div style="text-align: center; background: linear-gradient(135deg, #2541b2 0%, #1a237e 100%); padding: 2.5rem; color: white; border-radius: 0 0 20px 20px; margin-bottom: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-                <h1 style="color: white; font-size: 2.5rem; font-weight: 600; margin-bottom: 1rem;">Deradh Virtual Try-On Experience</h1>
-                <div style="margin: 1rem 0;">
-                    <a href="https://deradh.com" style="color: white; text-decoration: none; padding: 0.5rem 1rem; border: 2px solid white; border-radius: 25px; transition: all 0.3s ease;">
-                        Visit Deradh.com
-                    </a>
-                </div>
-            </div>
-            <div style="text-align: center; padding: 1rem; color: #6ed7fe; font-size: 1.2rem; font-weight: 500; margin-bottom: 2rem;">
-          Experience the future of fashion with our AI-powered virtual try-on technology, Every user will get 2-3 Free trials per day
-            </div>
-            """
-        )
-        
+def app_gradio():
+    with gr.Blocks(title="CatVTON") as demo:
+        gr.Markdown(HEADER)
         with gr.Row():
-            with gr.Column(scale=1, min_width="auto"):
+            with gr.Column(scale=1, min_width=350):
                 with gr.Row():
                     image_path = gr.Image(
                         type="filepath",
@@ -396,98 +250,55 @@ def app_gradio():
                         visible=False,
                     )
                     person_image = gr.ImageEditor(
-                        interactive=True, 
-                        label="Upload Your Photo", 
-                        type="filepath"
+                        interactive=True, label="Person Image", type="filepath"
                     )
 
                 with gr.Row():
-                    with gr.Column(scale=1, min_width="auto"):
+                    with gr.Column(scale=1, min_width=230):
                         cloth_image = gr.Image(
-                            interactive=True, 
-                            label="Select Garment", 
-                            type="filepath"
+                            interactive=True, label="Condition Image", type="filepath"
                         )
-                    with gr.Column(scale=1, min_width="auto"):
+                    with gr.Column(scale=1, min_width=120):
                         gr.Markdown(
-                            '''
-                            <div style="color: white; background: linear-gradient(135deg, #2541b2 0%, #1a237e 100%); 
-                                padding: 1.2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-                                <h3 style="margin: 0 0 0.8rem 0; color: white;">For Best Performance:</h3>
-                                <ol style="margin: 0; padding-left: 1.2rem;">
-                                    <li>Stand in front of a plain, contrasting background.</li>
-                                    <li>Ensure your entire body is visible in the frame.</li>
-                                    <li>Upload the highest quality image possible.</li>
-                                    <li>Avoid cluttered or low-light environments.</li>
-                                    <li>Wear minimal accessories for accurate results.</li>
-                                </ol>
-                            </div>
-                            '''
+                            '<span style="color: #808080; font-size: small;">Two ways to provide Mask:<br>1. Upload the person image and use the `🖌️` above to draw the Mask (higher priority)<br>2. Select the `Try-On Cloth Type` to generate automatically </span>'
                         )
                         cloth_type = gr.Radio(
-                            label="(Important) Garment Type",
+                            label="Try-On Cloth Type",
                             choices=["upper", "lower", "overall"],
-                            # value="upper",
+                            value="upper",
                         )
 
-                submit = gr.Button("Try On", elem_classes="primary-btn", elem_id="submit_btn")
+
+                submit = gr.Button("Submit")
                 gr.Markdown(
-                    '''
-                    <div style="text-align: center; color: #1a237e; font-weight: 500; margin: 1rem 0; 
-                        padding: 0.8rem; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
-                       Important: Please wait after clicking Try On - Processing may take a moment
-                    </div>
-                    '''
+                    '<center><span style="color: #FF0000">!!! Click only Once, Wait for Delay !!!</span></center>'
                 )
                 
-                # gr.Markdown(
-                #     '''
-                #     <div style="background: linear-gradient(135deg, #2541b2 0%, #1a237e 100%); 
-                #         color: white; padding: 1.2rem; border-radius: 8px; margin-top: 1rem; 
-                #         box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-                #         <h3 style="margin: 0 0 0.8rem 0; color: white;">Advanced Settings:</h3>
-                #         <ul style="margin: 0; padding-left: 1.2rem;">
-                #             <li>Increase Steps for higher quality</li>
-                #             <li>Adjust CFG for color intensity</li>
-                #             <li>Change Seed for different variations</li>
-                #         </ul>
-                #     </div>
-                #     '''
-                # )
-                with gr.Accordion("Developer Options", open=False):
+                gr.Markdown(
+                    '<span style="color: #808080; font-size: small;">Advanced options can adjust details:<br>1. `Inference Step` may enhance details;<br>2. `CFG` is highly correlated with saturation;<br>3. `Random seed` may improve pseudo-shadow.</span>'
+                )
+                with gr.Accordion("Advanced Options", open=False):
                     num_inference_steps = gr.Slider(
-                        label="Quality Steps", 
-                        minimum=10, 
-                        maximum=100, 
-                        step=5, 
-                        value=50
+                        label="Inference Step", minimum=10, maximum=100, step=5, value=50
                     )
+                    # Guidence Scale
                     guidance_scale = gr.Slider(
-                        label="Style Intensity", 
-                        minimum=0.0, 
-                        maximum=7.5, 
-                        step=0.5, 
-                        value=2.5
+                        label="CFG Strenth", minimum=0.0, maximum=7.5, step=0.5, value=2.5
                     )
+                    # Random Seed
                     seed = gr.Slider(
-                        label="Variation Seed", 
-                        minimum=-1, 
-                        maximum=10000, 
-                        step=1, 
-                        value=42
+                        label="Seed", minimum=-1, maximum=10000, step=1, value=42
                     )
                     show_type = gr.Radio(
-                        label="Display Options",
+                        label="Show Type",
                         choices=["result only", "input & result", "input & mask & result"],
-                        value="input & result",
+                        value="input & mask & result",
                     )
 
-            with gr.Column(scale=2, min_width="auto"):
-                result_image = gr.Image(
-                    interactive=False, 
-                    label="Virtual Try-On Result"
-                )
+            with gr.Column(scale=2, min_width=500):
+                result_image = gr.Image(interactive=False, label="Result")
                 with gr.Row():
+                    # Photo Examples
                     root_path = "resource/demo/example"
                     with gr.Column():
                         men_exm = gr.Examples(
@@ -497,7 +308,7 @@ def app_gradio():
                             ],
                             examples_per_page=4,
                             inputs=image_path,
-                            label="Sample Photos - Men",
+                            label="Person Examples ①",
                         )
                         women_exm = gr.Examples(
                             examples=[
@@ -506,7 +317,10 @@ def app_gradio():
                             ],
                             examples_per_page=4,
                             inputs=image_path,
-                            label="Sample Photos - Women",
+                            label="Person Examples ②",
+                        )
+                        gr.Markdown(
+                            '<span style="color: #808080; font-size: small;">*Person examples come from the demos of <a href="https://huggingface.co/spaces/levihsu/OOTDiffusion">OOTDiffusion</a> and <a href="https://www.outfitanyone.org">OutfitAnyone</a>. </span>'
                         )
                     with gr.Column():
                         condition_upper_exm = gr.Examples(
@@ -516,7 +330,7 @@ def app_gradio():
                             ],
                             examples_per_page=4,
                             inputs=cloth_image,
-                            label="Sample Upper Garments",
+                            label="Condition Upper Examples",
                         )
                         condition_overall_exm = gr.Examples(
                             examples=[
@@ -525,7 +339,7 @@ def app_gradio():
                             ],
                             examples_per_page=4,
                             inputs=cloth_image,
-                            label="Sample Full Outfits",
+                            label="Condition Overall Examples",
                         )
                         condition_person_exm = gr.Examples(
                             examples=[
@@ -534,13 +348,14 @@ def app_gradio():
                             ],
                             examples_per_page=4,
                             inputs=cloth_image,
-                            label="Style Reference Photos",
+                            label="Condition Reference Person Examples",
+                        )
+                        gr.Markdown(
+                            '<span style="color: #808080; font-size: small;">*Condition examples come from the Internet. </span>'
                         )
 
             image_path.change(
-                person_example_fn, 
-                inputs=image_path, 
-                outputs=person_image
+                person_example_fn, inputs=image_path, outputs=person_image
             )
 
             submit.click(
@@ -556,8 +371,6 @@ def app_gradio():
                 ],
                 result_image,
             )
-            
-            
     demo.queue().launch(share=True, show_error=True)