Update app.py

app.py

@@ -19,8 +19,8 @@ def remove_background(image):
 # Gradio Interface
 iface = gr.Interface(
     fn=remove_background,
-    inputs=gr.Image(label="Upload Image", image_mode='RGB', shape=(30, 30)),
-    outputs=gr.Image(label="Output Image", type="pil", elem_id="output_image"),
+    inputs=gr.Image(label="Upload Image", image_mode='RGB', tool=None),
+    outputs=gr.Image(label="Output Image"),
     css="""
         body {
             font-family: 'Arial', sans-serif;
@@ -31,9 +31,6 @@ iface = gr.Interface(
         .gradio-container {
             background-color: #1a1a2e;
             color: #ffffff;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
         }
 
         .gr-button {
@@ -41,7 +38,6 @@ iface = gr.Interface(
             color: white;
             border: none;
             border-radius: 4px;
-            margin-top: 10px;
         }
 
         .gr-button:hover {
@@ -52,6 +48,22 @@ iface = gr.Interface(
             background-color: #2a2a3e;
             color: #ffffff;
             border: 1px solid #4a4a5e;
+            display: block;
+            margin: 0 auto;
+        }
+
+        .gr-input img {
+            width: 30px;
+            height: 30px;
+            object-fit: contain;
+        }
+
+        .gr-output img {
+            max-width: 300px;
+            max-height: 300px;
+            object-fit: contain;
+            display: block;
+            margin: 0 auto;
         }
 
         .gr-input:focus, .gr-output:focus {
@@ -59,30 +71,40 @@ iface = gr.Interface(
             border-color: #6a6a7e;
         }
 
+        .gr-file-upload {
+            background-color: #2a2a3e;
+            color: #ffffff;
+        }
+
+        .gr-slider {
+            background-color: #2a2a3e;
+            color: #ffffff;
+        }
+
+        .gr-dropdown {
+            background-color: #2a2a3e;
+            color: #ffffff;
+        }
+
         .gr-image-preview {
             border: 2px solid #4a4a5e;
             background-color: #2a2a3e;
-            max-width: 300px;
-            max-height: 300px;
         }
 
-        .gr-image-preview img {
-            width: 100%;
-            height: auto;
-            max-width: 300px;
-            max-height: 300px;
-            object-fit: contain;
+        .gr-textbox {
+            background-color: #2a2a3e;
+            color: #ffffff;
+            border: 1px solid #4a4a5e;
         }
 
-        #output_image {
-            max-width: 300px;
-            max-height: 300px;
-            width: 100%;
-            height: auto;
+        .gr-textbox:focus {
+            outline: none;
+            border-color: #6a6a7e;
         }
     """,
     title="Background Remover",
     description="Upload an image to remove its background.",
+    layout="vertical"
 )
 
 if __name__ == "__main__":