Update UI

app.py

@@ -319,7 +319,11 @@ def app_gradio():
         gr.Markdown(HEADER)
         with gr.Tab("Virtual Try on"):
             with gr.Row():
+                # define root_path
+                root_path = "resource/demo/example"
+                # First column
                 with gr.Column(scale=1, min_width=350):
+                    # Person image
                     with gr.Row():
                         image_path = gr.Image(
                             type="filepath",
@@ -329,13 +333,8 @@ def app_gradio():
                         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="Clothes Image", type="filepath"
-                            )
-                        with gr.Column(scale=1, min_width=120):
+                        # Mask instruction
+                        with gr.Row:
                             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>'
                             )
@@ -344,45 +343,9 @@ def app_gradio():
                                 choices=["upper", "lower", "overall"],
                                 value="upper",
                             )
-
-
-                    submit = gr.Button("Submit")
-                    gr.Markdown(
-                        '<center><span style="color: #FF0000">!!! Click only Once, Wait for Delay !!!</span></center>'
-                    )
-                    
-                    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="Inference Step", minimum=10, maximum=100, step=5, value=50
-                        )
-                        # Guidence Scale
-                        guidance_scale = gr.Slider(
-                            label="CFG Strenth", minimum=0.0, maximum=7.5, step=0.5, value=2.5
-                        )
-                        # Random Seed
-                        seed = 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="result only",
-                        )
-
-                    # num_inference_steps = 50
-                    # guidance_scale = 2.5
-                    # seed = 42
-                    # show_type = "result only"
-                    
-                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():
+                        # Model column examples
+                        with gr.Row():
+                            # Men examples
                             men_exm = gr.Examples(
                                 examples=[
                                     os.path.join(root_path, "person", "men", _)
@@ -392,6 +355,7 @@ def app_gradio():
                                 inputs=image_path,
                                 label="Person Examples ①",
                             )
+                            # Women examples
                             women_exm = gr.Examples(
                                 examples=[
                                     os.path.join(root_path, "person", "women", _)
@@ -401,10 +365,38 @@ def app_gradio():
                                 inputs=image_path,
                                 label="Person Examples ②",
                             )
+                            # Markdown: component display text in Gradio
                             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():
+                            # Person pose example
+                            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",
+                            )
+                            # Display text
+                            gr.Markdown(
+                                '<span style="color: #808080; font-size: small;">*Condition examples come from the Internet. </span>'
+                            )                       
+                        
+                # Second column    
+                with gr.Column(scale=1, min_width=350):
+                    # Clothes image
+                    with gr.Row():
+                        with gr.Column(scale=1, min_width=230):
+                            cloth_image = gr.Image(
+                                interactive=True, label="Clothes Image", type="filepath"
+                            )
+                
+                    with gr.Row():
+                        # Clothes column examples
+                        with gr.Row():
+                            # Upper clothes examples
                             condition_upper_exm = gr.Examples(
                                 examples=[
                                     os.path.join(root_path, "condition", "upper", _)
@@ -414,6 +406,7 @@ def app_gradio():
                                 inputs=cloth_image,
                                 label="Condition Upper Examples",
                             )
+                            # Full-body clothes examples
                             condition_overall_exm = gr.Examples(
                                 examples=[
                                     os.path.join(root_path, "condition", "overall", _)
@@ -423,23 +416,47 @@ def app_gradio():
                                 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 pennal
+                    result_image = gr.Image(interactive=False, label="Result")
+                
+                # Submit button
+                submit = gr.Button("Submit")
+                gr.Markdown(
+                    '<center><span style="color: #FF0000">!!! Click only Once, Wait for Delay !!!</span></center>'
+                )
+
+                # Advance options setting
+                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="Inference Step", minimum=10, maximum=100, step=5, value=50
+                    )
+                    # Guidence Scale
+                    guidance_scale = gr.Slider(
+                        label="CFG Strenth", minimum=0.0, maximum=7.5, step=0.5, value=2.5
+                    )
+                    # Random Seed
+                    seed = 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="result only",
+                    )
+                
+                # event listener for changes to the image_path input component. Whenever the value of image_path changes (e.g., when a new image is uploaded or selected)
                 image_path.change(
                     person_example_fn, inputs=image_path, outputs=person_image
                 )
 
+                # when submit button clicked
                 submit.click(
                     submit_function,
                     [