Update app.py

app.py

@@ -25,7 +25,7 @@ def detect_faces(image):
             return f"Image upload failed with status code {response.status_code}: {response.text}"
 
         image_url = response.json()["data"]["url"]
-        print(f"Image uploaded successfully")
+        print(f"Image uploaded successfully: {image_url}")
 
         response = requests.post(FLAREAI_API, json={"image_url": image_url})
         response.raise_for_status()
@@ -45,57 +45,83 @@ def detect_faces(image):
         return f"An error occurred: {e}", ""
 
 
+# Professional CSS to style the Gradio UI
 css = """
     .gradio-container {
-        font-family: 'Arial', sans-serif;
-        background-color: #f9f9f9;
+        font-family: 'Roboto', sans-serif;
+        background-color: #fafafa;
+        color: #333;
     }
     .gradio-title {
-        color: #4e5b66;
-        font-size: 30px;
-        font-weight: 600;
+        color: #2C3E50;
+        font-size: 40px;
+        font-weight: bold;
         text-align: center;
-        margin-top: 30px;
+        margin-top: 20px;
     }
     .gradio-description {
-        color: #7a7a7a;
-        font-size: 16px;
+        color: #7f8c8d;
+        font-size: 18px;
         text-align: center;
-        margin-bottom: 30px;
+        margin-top: 10px;
+        font-weight: 400;
     }
-    .gradio-input {
-        border-radius: 12px;
-        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-    }
-    .gradio-output {
-        border-radius: 12px;
-        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    .gradio-input, .gradio-output {
+        border-radius: 15px;
+        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
+        border: 1px solid #dcdfe1;
     }
     .gradio-button {
         background-color: #4CAF50;
         color: white;
+        font-size: 18px;
         font-weight: 600;
         border-radius: 12px;
-        padding: 10px 20px;
-        margin-top: 20px;
+        padding: 15px 30px;
+        margin-top: 30px;
         border: none;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
     }
     .gradio-button:hover {
         background-color: #45a049;
     }
+    .gradio-button:focus {
+        outline: none;
+    }
     .gradio-image {
         border-radius: 12px;
-        border: 2px solid #ccc;
+        border: 1px solid #ddd;
+        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+    }
+    .gradio-textbox {
+        font-size: 16px;
+        color: #333;
+        border-radius: 12px;
+        border: 1px solid #ccc;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
+        padding: 15px;
+        background-color: #fff;
+    }
+    .gradio-row {
+        margin-bottom: 30px;
+    }
+    .gradio-container .gradio-button {
+        margin-bottom: 20px;
+    }
+    .gradio-container .gradio-title, .gradio-container .gradio-description {
+        padding: 0 20px;
     }
 """
 
+# Gradio Interface
 iface = gr.Interface(
     fn=detect_faces,
     inputs=gr.Image(type="pil", label="Upload Image"),
     outputs=[gr.Image(type="pil", label="Processed Image"), gr.Textbox(label="Face Details")],
     title="FlareAI Face Detection",
-    description="Made with ❤️ by Skycodee",
-    theme="huggingface",
+    description="Made with ❤️ by Skycodee | Leverage advanced AI for face detection.",
+    theme="huggingface",  # Using Huggingface theme for consistency
     css=css
 )