feat: Implement mask-based and Flux.1 fill development tab in app.py

- Added a new tab for mask-based and Flux.1 fill development, allowing users to upload person and condition images for virtual try-on.
- Introduced advanced options including inference steps, guidance scale, and random seed settings.
- Enhanced user experience with example images for both person and condition inputs.
- Updated the UI layout to improve accessibility and interaction for users.

app.py

@@ -395,7 +395,6 @@ HEADER = """
 </div>
 <br>
 · This demo and our weights are only for Non-commercial Use. <br>
-· You can try CatVTON in our <a href="https://huggingface.co/spaces/zhengchong/CatVTON">HuggingFace Space</a> or our <a href="http://120.76.142.206:8888">online demo</a> (run on 3090). <br>
 · 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> 
 """
@@ -534,7 +533,132 @@ def app_gradio():
                     ],
                     result_image,
                 )
-    
+
+        with gr.Tab("Mask-based & Flux.1 Fill Dev"):
+            with gr.Row():
+                with gr.Column(scale=1, min_width=350):
+                    with gr.Row():
+                        image_path_flux = gr.Image(
+                            type="filepath",
+                            interactive=True,
+                            visible=False,
+                        )
+                        person_image_flux = gr.ImageEditor(
+                            interactive=True, label="Person Image", type="filepath"
+                        )
+                    
+                    with gr.Row():
+                        with gr.Column(scale=1, min_width=230):
+                            cloth_image_flux = 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>'
+                            )
+                            cloth_type = gr.Radio(
+                                label="Try-On Cloth Type",
+                                choices=["upper", "lower", "overall"],
+                                value="upper",
+                            )
+
+                    submit_flux = gr.Button("Submit")
+                    gr.Markdown(
+                        '<center><span style="color: #FF0000">!!! Click only Once, Wait for Delay !!!</span></center>'
+                    )
+                    
+                    with gr.Accordion("Advanced Options", open=False):
+                        num_inference_steps_flux = gr.Slider(
+                            label="Inference Step", minimum=10, maximum=100, step=5, value=50
+                        )
+                        # Guidence Scale
+                        guidance_scale_flux = gr.Slider(
+                            label="CFG Strenth", minimum=0.0, maximum=7.5, step=0.5, value=2.5
+                        )
+                        # Random Seed
+                        seed_flux = gr.Slider(
+                            label="Seed", minimum=-1, maximum=10000, step=1, value=42
+                        )
+                        show_type = gr.Radio(
+                            label="Show Type",
+                            choices=["result only", "input & result", "input & mask & result"],
+                            value="input & mask & result",
+                        )
+
+                with gr.Column(scale=2, min_width=500):
+                    result_image_flux = gr.Image(interactive=False, label="Result")
+                    
+                with gr.Column(scale=2, min_width=500):
+                    result_image_p2p = gr.Image(interactive=False, label="Result")
+                    with gr.Row():
+                        # Photo Examples
+                        root_path = "resource/demo/example"
+                        with gr.Column():
+                            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_flux,
+                                label="Person Examples ①",
+                            )
+                            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_flux,
+                                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():
+                            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_flux,
+                                label="Condition Upper Examples",
+                            )
+                            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_flux,
+                                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_flux,
+                                label="Condition Reference Person Examples",
+                            )
+                            gr.Markdown(
+                                '<span style="color: #808080; font-size: small;">*Condition examples come from the Internet. </span>'
+                            )
+
+                
+                image_path_flux.change(
+                    person_example_fn, inputs=image_path_flux, outputs=person_image_flux
+                )
+
+                submit_flux.click(
+                    submit_function_flux,
+                    [person_image_flux, cloth_image_flux, cloth_type, num_inference_steps_flux, guidance_scale_flux, seed_flux, show_type],
+                    result_image_flux,
+                )
+        
+            
         with gr.Tab("Mask-free & SD1.5"):
             with gr.Row():
                 with gr.Column(scale=1, min_width=350):
@@ -654,70 +778,6 @@ def app_gradio():
                     result_image_p2p,
                 )
         
-        with gr.Tab("Mask-based & Flux.1 Fill Dev"):
-            with gr.Row():
-                with gr.Column(scale=1, min_width=350):
-                    with gr.Row():
-                        image_path_flux = gr.Image(
-                            type="filepath",
-                            interactive=True,
-                            visible=False,
-                        )
-                        person_image_flux = gr.ImageEditor(
-                            interactive=True, label="Person Image", type="filepath"
-                        )
-                    
-                    with gr.Row():
-                        with gr.Column(scale=1, min_width=230):
-                            cloth_image_flux = 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>'
-                            )
-                            cloth_type = gr.Radio(
-                                label="Try-On Cloth Type",
-                                choices=["upper", "lower", "overall"],
-                                value="upper",
-                            )
-
-                    submit_flux = gr.Button("Submit")
-                    gr.Markdown(
-                        '<center><span style="color: #FF0000">!!! Click only Once, Wait for Delay !!!</span></center>'
-                    )
-                    
-                    with gr.Accordion("Advanced Options", open=False):
-                        num_inference_steps_flux = gr.Slider(
-                            label="Inference Step", minimum=10, maximum=100, step=5, value=50
-                        )
-                        # Guidence Scale
-                        guidance_scale_flux = gr.Slider(
-                            label="CFG Strenth", minimum=0.0, maximum=7.5, step=0.5, value=2.5
-                        )
-                        # Random Seed
-                        seed_flux = gr.Slider(
-                            label="Seed", minimum=-1, maximum=10000, step=1, value=42
-                        )
-                        show_type = gr.Radio(
-                            label="Show Type",
-                            choices=["result only", "input & result", "input & mask & result"],
-                            value="input & mask & result",
-                        )
-
-                with gr.Column(scale=2, min_width=500):
-                    result_image_flux = gr.Image(interactive=False, label="Result")
-                
-                image_path_flux.change(
-                    person_example_fn, inputs=image_path_flux, outputs=person_image_flux
-                )
-
-                submit_flux.click(
-                    submit_function_flux,
-                    [person_image_flux, cloth_image_flux, cloth_type, num_inference_steps_flux, guidance_scale_flux, seed_flux, show_type],
-                    result_image_flux,
-                )
-                
     demo.queue().launch(share=True, show_error=True)