Update app.py

app.py

@@ -239,8 +239,23 @@ HEADER = """
 """
 
 def app_gradio():
-    with gr.Blocks(title="CatVTON") as demo:
-        gr.Markdown(HEADER)
+    with gr.Blocks(title="Deradh Virtual Try-On", css="button.primary-btn { background: #1a237e; } .gr-button { background: #1a237e; color: white; } body { background-color: #f8f9fa; }") as demo:
+        gr.Markdown(
+            """
+            <div style="text-align: center; background-color: #1a237e; padding: 2rem; color: white;">
+                <h1>Deradh Virtual Try-On Experience</h1>
+                <div style="margin: 1rem 0;">
+                    <a href="https://deradh.com" style="color: white; text-decoration: underline;">
+                        Visit Deradh.com
+                    </a>
+                </div>
+            </div>
+            <div style="text-align: center; padding: 1rem; color: #1a237e;">
+                Experience the future of fashion with our AI-powered virtual try-on technology
+            </div>
+            """
+        )
+        
         with gr.Row():
             with gr.Column(scale=1, min_width=350):
                 with gr.Row():
@@ -250,55 +265,70 @@ def app_gradio():
                         visible=False,
                     )
                     person_image = gr.ImageEditor(
-                        interactive=True, label="Person Image", type="filepath"
+                        interactive=True, 
+                        label="Upload Your Photo", 
+                        type="filepath"
                     )
 
                 with gr.Row():
                     with gr.Column(scale=1, min_width=230):
                         cloth_image = gr.Image(
-                            interactive=True, label="Condition Image", type="filepath"
+                            interactive=True, 
+                            label="Select Garment", 
+                            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>'
+                            '<div style="color: white; background-color: #1a237e; padding: 1rem; border-radius: 4px;">Mask Options:<br>1. Draw mask using the editor above<br>2. Auto-generate based on garment type</div>'
                         )
                         cloth_type = gr.Radio(
-                            label="Try-On Cloth Type",
+                            label="Garment Type",
                             choices=["upper", "lower", "overall"],
                             value="upper",
                         )
 
-
-                submit = gr.Button("Submit")
+                submit = gr.Button("Try On", elem_classes="primary-btn")
                 gr.Markdown(
-                    '<center><span style="color: #FF0000">!!! Click only Once, Wait for Delay !!!</span></center>'
+                    '<div style="text-align: center; color: #1a237e; font-weight: bold; margin: 1rem 0;">Please wait after clicking Try On - Processing may take a moment</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>'
+                    '<div style="background-color: #1a237e; color: white; padding: 1rem; border-radius: 4px; margin-top: 1rem;">Advanced Settings:<br>• Increase Steps for higher quality<br>• Adjust CFG for color intensity<br>• Change Seed for different variations</div>'
                 )
-                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 Steps", 
+                        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
+                        label="Style Intensity", 
+                        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
+                        label="Variation Seed", 
+                        minimum=-1, 
+                        maximum=10000, 
+                        step=1, 
+                        value=42
                     )
                     show_type = gr.Radio(
-                        label="Show Type",
+                        label="Display Options",
                         choices=["result only", "input & result", "input & mask & result"],
                         value="input & mask & result",
                     )
 
             with gr.Column(scale=2, min_width=500):
-                result_image = gr.Image(interactive=False, label="Result")
+                result_image = gr.Image(
+                    interactive=False, 
+                    label="Virtual Try-On Result"
+                )
                 with gr.Row():
-                    # Photo Examples
                     root_path = "resource/demo/example"
                     with gr.Column():
                         men_exm = gr.Examples(
@@ -308,7 +338,7 @@ def app_gradio():
                             ],
                             examples_per_page=4,
                             inputs=image_path,
-                            label="Person Examples ①",
+                            label="Sample Photos - Men",
                         )
                         women_exm = gr.Examples(
                             examples=[
@@ -317,10 +347,7 @@ def app_gradio():
                             ],
                             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>'
+                            label="Sample Photos - Women",
                         )
                     with gr.Column():
                         condition_upper_exm = gr.Examples(
@@ -330,7 +357,7 @@ def app_gradio():
                             ],
                             examples_per_page=4,
                             inputs=cloth_image,
-                            label="Condition Upper Examples",
+                            label="Sample Upper Garments",
                         )
                         condition_overall_exm = gr.Examples(
                             examples=[
@@ -339,7 +366,7 @@ def app_gradio():
                             ],
                             examples_per_page=4,
                             inputs=cloth_image,
-                            label="Condition Overall Examples",
+                            label="Sample Full Outfits",
                         )
                         condition_person_exm = gr.Examples(
                             examples=[
@@ -348,14 +375,13 @@ def app_gradio():
                             ],
                             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>'
+                            label="Style Reference Photos",
                         )
 
             image_path.change(
-                person_example_fn, inputs=image_path, outputs=person_image
+                person_example_fn, 
+                inputs=image_path, 
+                outputs=person_image
             )
 
             submit.click(
@@ -371,6 +397,7 @@ def app_gradio():
                 ],
                 result_image,
             )
+            
     demo.queue().launch(share=True, show_error=True)