Update app.py

app.py

@@ -16,7 +16,6 @@ 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
 
-
 def parse_args():
     parser = argparse.ArgumentParser(description="Simple example of a training script.")
     parser.add_argument(
@@ -41,7 +40,6 @@ def parse_args():
         default="resource/demo/output",
         help="The output directory where the model predictions will be written.",
     )
-
     parser.add_argument(
         "--width",
         type=int,
@@ -103,7 +101,6 @@ def image_grid(imgs, rows, cols):
         grid.paste(img, box=(i % cols * w, i // cols * h))
     return grid
 
-
 args = parse_args()
 repo_path = snapshot_download(repo_id=args.resume_path)
 # Pipeline
@@ -168,7 +165,6 @@ def submit_function(
     mask = mask_processor.blur(mask, blur_factor=9)
 
     # Inference
-    # try:
     result_image = pipeline(
         image=person_image,
         condition_image=cloth_image,
@@ -177,10 +173,6 @@ def submit_function(
         guidance_scale=guidance_scale,
         generator=generator
     )[0]
-    # except Exception as e:
-    #     raise gr.Error(
-    #         "An error occurred. Please try again later: {}".format(e)
-    #     )
     
     # Post-process
     masked_person = vis_mask(person_image, mask)
@@ -202,136 +194,294 @@ def submit_function(
         new_result_image.paste(result_image, (condition_width + 5, 0))
     return new_result_image
 
-
 def person_example_fn(image_path):
     return image_path
 
-
+# Custom CSS for enhanced visual appeal
 css = """
-footer {
-    visibility: hidden;
+footer {visibility: hidden}
+
+/* Main container styling */
+.gradio-container {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
 }
-"""
 
+/* Header styling */
+h1, h2, h3 {
+    color: #2c3e50;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
 
-def app_gradio():
-    with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as demo:
+/* Button styling */
+button.primary-button {
+    background: linear-gradient(45deg, #4CAF50, #45a049);
+    border: none;
+    border-radius: 10px;
+    color: white;
+    padding: 12px 24px;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
+}
+
+button.primary-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
+}
+
+/* Image container styling */
+.image-container {
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease;
+}
 
+.image-container:hover {
+    transform: scale(1.02);
+}
+
+/* Radio button styling */
+.radio-group label {
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 10px 15px;
+    margin: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.radio-group input:checked + label {
+    background-color: #4CAF50;
+    color: white;
+}
+
+/* Slider styling */
+.slider-container {
+    background: white;
+    padding: 15px;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+
+.slider {
+    height: 8px;
+    border-radius: 4px;
+    background: #e0e0e0;
+}
+
+.slider .thumb {
+    width: 20px;
+    height: 20px;
+    background: #4CAF50;
+    border-radius: 50%;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+/* Alert/warning text styling */
+.warning-text {
+    color: #ff5252;
+    font-weight: bold;
+    text-align: center;
+    padding: 10px;
+    background: rgba(255,82,82,0.1);
+    border-radius: 8px;
+    margin: 10px 0;
+}
+
+/* Example gallery styling */
+.example-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 15px;
+    padding: 15px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+
+.example-item {
+    border-radius: 8px;
+    overflow: hidden;
+    transition: transform 0.3s ease;
+}
+
+.example-item:hover {
+    transform: scale(1.05);
+}
+"""
+
+def app_gradio():
+    with gr.Blocks(theme=gr.themes.Soft(primary_hue="green", secondary_hue="blue"), css=css) as demo:
+        gr.Markdown(
+            """
+            # Virtual Try-On App 👔
+            Transform your look with AI-powered virtual clothing try-on!
+            """
+        )
+        
         with gr.Row():
             with gr.Column(scale=1, min_width=350):
-                with gr.Row():
-                    image_path = gr.Image(
-                        type="filepath",
-                        interactive=True,
-                        visible=False,
-                    )
-                    person_image = gr.ImageEditor(
-                        interactive=True, label="Person Image", type="filepath"
-                    )
-
-                with gr.Row():
-                    with gr.Column(scale=1, min_width=230):
-                        cloth_image = gr.Image(
-                            interactive=True, label="Condition Image", type="filepath"
-                        )
-                    with gr.Column(scale=1, min_width=120):
-                        gr.Markdown(
-                            '<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>'
+                with gr.Box():
+                    gr.Markdown("### 📸 Upload Images")
+                    with gr.Row():
+                        image_path = gr.Image(
+                            type="filepath",
+                            interactive=True,
+                            visible=False,
                         )
-                        cloth_type = gr.Radio(
-                            label="Try-On Cloth Type",
-                            choices=["upper", "lower", "overall"],
-                            value="upper",
+                        person_image = gr.ImageEditor(
+                            interactive=True,
+                            label="Person Image",
+                            type="filepath",
+                            elem_classes="image-container"
                         )
 
+                    with gr.Row():
+                        with gr.Column(scale=1, min_width=230):
+                            cloth_image = gr.Image(
+                                interactive=True,
+                                label="Clothing Item",
+                                type="filepath",
+                                elem_classes="image-container"
+                            )
+                        with gr.Column(scale=1, min_width=120):
+                            gr.Markdown(
+                                """
+                                ### 🎯 Masking Options
+                                1. Draw mask manually with 🖌️
+                                2. Auto-generate based on clothing type
+                                """
+                            )
+                            cloth_type = gr.Radio(
+                                label="Clothing Type",
+                                choices=["upper", "lower", "overall"],
+                                value="upper",
+                                elem_classes="radio-group"
+                            )
 
-                submit = gr.Button("Submit")
+                submit = gr.Button("🚀 Generate Try-On", elem_classes="primary-button")
                 gr.Markdown(
-                    '<center><span style="color: #FF0000">!!! Click only Once, Wait for Delay !!!</span></center>'
+                    """
+                    <div class="warning-text">
+                        ⚠️ Please click only once and wait patiently for processing
+                    </div>
+                    """
                 )
                 
-                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):
+                with gr.Accordion("⚙️ Advanced Settings", open=False):
                     num_inference_steps = gr.Slider(
-                        label="Inference Step", minimum=10, maximum=100, step=5, value=50
+                        label="Quality Level",
+                        minimum=10,
+                        maximum=100,
+                        step=5,
+                        value=50,
+                        elem_classes="slider-container"
                     )
-                    # Guidence Scale
                     guidance_scale = gr.Slider(
-                        label="CFG Strenth", minimum=0.0, maximum=7.5, step=0.5, value=2.5
+                        label="Style Strength",
+                        minimum=0.0,
+                        maximum=7.5,
+                        step=0.5,
+                        value=2.5,
+                        elem_classes="slider-container"
                     )
-                    # Random Seed
                     seed = gr.Slider(
-                        label="Seed", minimum=-1, maximum=10000, step=1, value=42
+                        label="Random Seed",
+                        minimum=-1,
+                        maximum=10000,
+                        step=1,
+                        value=42,
+                        elem_classes="slider-container"
                     )
                     show_type = gr.Radio(
-                        label="Show Type",
+                        label="Display Mode",
                         choices=["result only", "input & result", "input & mask & result"],
                         value="input & mask & result",
+                        elem_classes="radio-group"
                     )
-
             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(
-                            examples=[
-                                os.path.join(root_path, "person", "men", _)
-                                for _ in os.listdir(os.path.join(root_path, "person", "men"))
-                            ],
-                            examples_per_page=4,
-                            inputs=image_path,
-                            label="Person Examples ①",
-                        )
-                        women_exm = gr.Examples(
-                            examples=[
-                                os.path.join(root_path, "person", "women", _)
-                                for _ in os.listdir(os.path.join(root_path, "person", "women"))
-                            ],
-                            examples_per_page=4,
-                            inputs=image_path,
-                            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(
-                            examples=[
-                                os.path.join(root_path, "condition", "upper", _)
-                                for _ in os.listdir(os.path.join(root_path, "condition", "upper"))
-                            ],
-                            examples_per_page=4,
-                            inputs=cloth_image,
-                            label="Condition Upper Examples",
-                        )
-                        condition_overall_exm = gr.Examples(
-                            examples=[
-                                os.path.join(root_path, "condition", "overall", _)
-                                for _ in os.listdir(os.path.join(root_path, "condition", "overall"))
-                            ],
-                            examples_per_page=4,
-                            inputs=cloth_image,
-                            label="Condition Overall Examples",
-                        )
-                        condition_person_exm = gr.Examples(
-                            examples=[
-                                os.path.join(root_path, "condition", "person", _)
-                                for _ in os.listdir(os.path.join(root_path, "condition", "person"))
-                            ],
-                            examples_per_page=4,
-                            inputs=cloth_image,
-                            label="Condition Reference Person Examples",
-                        )
-                        gr.Markdown(
-                            '<span style="color: #808080; font-size: small;">*Condition examples come from the Internet. </span>'
-                        )
+                result_image = gr.Image(
+                    interactive=False,
+                    label="Final Result",
+                    elem_classes="image result_image = gr.Image(
+                        interactive=False,
+                        label="Final Result",
+                        elem_classes="image-container"
+                    )
+
+                    with gr.Row():
+                        # Photo Examples
+                        root_path = "resource/demo/example"
+                        with gr.Column():
+                            gr.Markdown("#### 👤 Model Examples")
+                            men_exm = gr.Examples(
+                                examples=[
+                                    os.path.join(root_path, "person", "men", _)
+                                    for _ in os.listdir(os.path.join(root_path, "person", "men"))
+                                ],
+                                examples_per_page=4,
+                                inputs=image_path,
+                                label="Men's Examples",
+                                elem_classes="example-item"
+                            )
+                            women_exm = gr.Examples(
+                                examples=[
+                                    os.path.join(root_path, "person", "women", _)
+                                    for _ in os.listdir(os.path.join(root_path, "person", "women"))
+                                ],
+                                examples_per_page=4,
+                                inputs=image_path,
+                                label="Women's Examples",
+                                elem_classes="example-item"
+                            )
+                            gr.Markdown(
+                                '<div class="info-text">Model examples courtesy of <a href="https://huggingface.co/spaces/levihsu/OOTDiffusion">OOTDiffusion</a> and <a href="https://www.outfitanyone.org">OutfitAnyone</a></div>'
+                            )
+                        
+                        with gr.Column():
+                            gr.Markdown("#### 👕 Clothing Examples")
+                            condition_upper_exm = gr.Examples(
+                                examples=[
+                                    os.path.join(root_path, "condition", "upper", _)
+                                    for _ in os.listdir(os.path.join(root_path, "condition", "upper"))
+                                ],
+                                examples_per_page=4,
+                                inputs=cloth_image,
+                                label="Upper Garments",
+                                elem_classes="example-item"
+                            )
+                            condition_overall_exm = gr.Examples(
+                                examples=[
+                                    os.path.join(root_path, "condition", "overall", _)
+                                    for _ in os.listdir(os.path.join(root_path, "condition", "overall"))
+                                ],
+                                examples_per_page=4,
+                                inputs=cloth_image,
+                                label="Full Outfits",
+                                elem_classes="example-item"
+                            )
+                            condition_person_exm = gr.Examples(
+                                examples=[
+                                    os.path.join(root_path, "condition", "person", _)
+                                    for _ in os.listdir(os.path.join(root_path, "condition", "person"))
+                                ],
+                                examples_per_page=4,
+                                inputs=cloth_image,
+                                label="Reference Styles",
+                                elem_classes="example-item"
+                            )
+                            gr.Markdown(
+                                '<div class="info-text">Clothing examples sourced from various online retailers</div>'
+                            )
 
             image_path.change(
-                person_example_fn, inputs=image_path, outputs=person_image
+                person_example_fn,
+                inputs=image_path,
+                outputs=person_image
             )
 
             submit.click(
@@ -347,8 +497,21 @@ def app_gradio():
                 ],
                 result_image,
             )
+            
+        gr.Markdown(
+            """
+            ### 💡 Tips & Instructions
+            1. Upload or select a person image
+            2. Choose or upload a clothing item
+            3. Select clothing type (upper/lower/overall)
+            4. Adjust advanced settings if needed
+            5. Click Generate and wait for results
+            
+            For best results, use clear, front-facing images with good lighting.
+            """
+        )
+        
     demo.queue().launch(share=True, show_error=True)
 
-
 if __name__ == "__main__":
-    app_gradio()
+    app_gradio()