Update app.py

app.py

@@ -237,20 +237,63 @@ 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():
-    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:
+    custom_css = """
+        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);
+        }
+        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;
+            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;
+        }
+    """
+
+    with gr.Blocks(title="Deradh Virtual Try-On", css=custom_css) as demo:
         gr.Markdown(
             """
-            <div style="text-align: center; background-color: #1a237e; padding: 2rem; color: white;">
-                <h1 style="color: white;">Deradh Virtual Try-On Experience</h1>
+            <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: underline;">
+                    <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: #1a237e;">
+            <div style="text-align: center; padding: 1rem; color: #1a237e; font-size: 1.2rem; font-weight: 500; margin-bottom: 2rem;">
                 Experience the future of fashion with our AI-powered virtual try-on technology
             </div>
             """
@@ -279,7 +322,16 @@ def app_gradio():
                         )
                     with gr.Column(scale=1, min_width=120):
                         gr.Markdown(
-                            '<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>'
+                            '''
+                            <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;">Mask Options:</h3>
+                                <ol style="margin: 0; padding-left: 1.2rem;">
+                                    <li>Draw mask using the editor above</li>
+                                    <li>Auto-generate based on garment type</li>
+                                </ol>
+                            </div>
+                            '''
                         )
                         cloth_type = gr.Radio(
                             label="Garment Type",
@@ -289,11 +341,27 @@ def app_gradio():
 
                 submit = gr.Button("Try On", elem_classes="primary-btn")
                 gr.Markdown(
-                    '<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>'
+                    '''
+                    <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);">
+                        Please wait after clicking Try On - Processing may take a moment
+                    </div>
+                    '''
                 )
                 
                 gr.Markdown(
-                    '<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>'
+                    '''
+                    <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("Advanced Settings", open=False):
                     num_inference_steps = gr.Slider(
@@ -402,4 +470,4 @@ def app_gradio():
 
 
 if __name__ == "__main__":
-    app_gradio()
+    app_gradio()