Update app.py

app.py

@@ -90,71 +90,123 @@ def process(image, progress=gr.Progress()):
     return output_array, gr.update(visible=True, value=filepath, interactive=True)
 
 # Gradio interface setup
-title = "Background Removal"
-description = r"""<br>"""
+title = "Background Removal Tool"
+description = """
+<div style="text-align: center; max-width: 800px; margin: 0 auto; padding: 20px;">
+    <h1 style="color: #2D3748; font-size: 2.5em; margin-bottom: 20px;">Professional Background Removal</h1>
+    <p style="color: #4A5568; font-size: 1.2em; margin-bottom: 20px;">
+        Upload your image and get instant background removal using AI technology.
+    </p>
+</div>
+"""
 
 # Create the Gradio interface
 with gr.Blocks(css="""
+    /* Global styles */
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+    }
+    
+    /* Card styling */
+    .input-card, .output-card {
+        background-color: white;
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        transition: transform 0.2s;
+    }
+    
+    .input-card:hover, .output-card:hover {
+        transform: translateY(-5px);
+    }
+    
+    /* Button styling */
     .download-btn {
-        background-color: #4CAF50 !important;
+        background-color: #4F46E5 !important;
         color: white !important;
         border: none !important;
-        padding: 10px 24px !important;
+        padding: 12px 28px !important;
         text-align: center !important;
         text-decoration: none !important;
         display: inline-block !important;
         font-size: 16px !important;
-        margin: 10px 0 !important;
+        margin: 15px 0 !important;
         cursor: pointer !important;
-        border-radius: 4px !important;
-        transition: background-color 0.3s !important;
+        border-radius: 8px !important;
+        transition: all 0.3s ease !important;
+        font-weight: 600 !important;
     }
+    
     .download-btn:hover {
-        background-color: #45a049 !important;
+        background-color: #4338CA !important;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
     }
-    /* Style the file download component to look like a button */
+    
+    /* File download styling */
     .download-container [data-testid="file"] {
         display: block !important;
     }
+    
     .download-container [data-testid="file"] > div:first-child {
-        display: none !important; /* Hide the file icon */
+        display: none !important;
     }
+    
     .download-container [data-testid="file"] > div:last-child {
         margin-left: 0 !important;
     }
+    
     .download-container [data-testid="file"] button {
-        background-color: #4CAF50 !important;
+        background-color: #4F46E5 !important;
         color: white !important;
         border: none !important;
-        padding: 10px 24px !important;
+        padding: 12px 28px !important;
         text-align: center !important;
-        text-decoration: none !important;
-        display: inline-block !important;
         font-size: 16px !important;
-        margin: 10px 0 !important;
+        margin: 15px 0 !important;
         cursor: pointer !important;
-        border-radius: 4px !important;
-        transition: background-color 0.3s !important;
+        border-radius: 8px !important;
+        transition: all 0.3s ease !important;
         width: 100% !important;
+        font-weight: 600 !important;
     }
+    
     .download-container [data-testid="file"] button:hover {
-        background-color: #45a049 !important;
+        background-color: #4338CA !important;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
+    }
+    
+    /* Label styling */
+    label {
+        font-weight: 600 !important;
+        color: #2D3748 !important;
+        font-size: 1.1em !important;
+        margin-bottom: 8px !important;
     }
 """) as demo:
-    gr.Markdown(f"# {title}")
     gr.Markdown(description)
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            input_image = gr.Image(type="numpy", label="Upload Image")
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=1, elem_classes="input-card"):
+            input_image = gr.Image(
+                type="numpy",
+                label="Upload Your Image",
+                elem_id="input-image"
+            )
         
-        with gr.Column(scale=1):
-            output_image = gr.Image(type="numpy", label="Result")
+        with gr.Column(scale=1, elem_classes="output-card"):
+            output_image = gr.Image(
+                type="numpy",
+                label="Result",
+                elem_id="output-image"
+            )
             
-            # Direct download file component styled as a button
             with gr.Row(elem_classes="download-container"):
                 download_file = gr.File(
-                    label="", 
+                    label="",
                     file_count="single",
                     interactive=True,
                     visible=False