Update app.py

app.py

@@ -259,20 +259,94 @@ def drone_detection_pipeline(input_image):
         return blank, blank, error_msg
 
 # ============================================
-# 6. PROFESSIONAL INTERFACE (CLEAN, NO EMOJIS)
+# 6. SKYGUARD PROFESSIONAL INTERFACE
+#    Dark blue theme | White & Yellow text | No emojis
 # ============================================
-with gr.Blocks(title="Drone Detection System", theme=gr.themes.Soft()) as demo:
+
+custom_css = """
+/* Main background - dark blue gradient */
+.gradio-container {
+    background: linear-gradient(135deg, #0a1928 0%, #0d2a3e 100%) !important;
+    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
+}
+/* Headings and text */
+h1, h2, h3, .gr-markdown h1, .gr-markdown h2, .gr-markdown h3 {
+    color: #ffffff !important;
+    font-weight: 500 !important;
+}
+p, label, .gr-form, .gr-box, .gr-markdown p {
+    color: #f0f0f0 !important;
+}
+/* Accent text (yellow) */
+.accent-text, .gr-markdown strong {
+    color: #ffd966 !important;
+}
+/* Buttons - primary */
+.gr-button-primary {
+    background: linear-gradient(90deg, #1e5a8a, #2c7ab1) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    border-radius: 8px !important;
+    padding: 12px 28px !important;
+    font-size: 1rem !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+.gr-button-primary:hover {
+    transform: translateY(-2px);
+    background: linear-gradient(90deg, #2c7ab1, #3a8fc5) !important;
+    box-shadow: 0 5px 15px rgba(0, 120, 200, 0.3);
+}
+/* Tabs styling */
+.gr-tabs .tab-nav button {
+    background-color: #0f2b3a !important;
+    color: #c0d0e0 !important;
+    border-radius: 8px 8px 0 0 !important;
+    font-weight: 500 !important;
+    padding: 10px 20px !important;
+    margin-right: 4px !important;
+}
+.gr-tabs .tab-nav button.selected {
+    background-color: #1e5a8a !important;
+    color: #ffd966 !important;
+    border-bottom: 2px solid #ffd966 !important;
+}
+/* Input and output areas */
+.gr-box, .gr-form, .gr-input, .gr-panel {
+    background-color: #0f2b3a !important;
+    border: 1px solid #2c7ab1 !important;
+    border-radius: 12px !important;
+}
+/* Image containers */
+.gr-image {
+    background-color: #0a1928 !important;
+    border-radius: 8px;
+}
+/* Footer */
+.footer {
+    text-align: center;
+    margin-top: 25px;
+    font-size: 12px;
+    color: #8aaec0 !important;
+    border-top: 1px solid #2c7ab1;
+    padding-top: 15px;
+}
+"""
+
+with gr.Blocks(title="SkyGuard - Drone Detection System", theme=gr.themes.Soft(), css=custom_css) as demo:
     gr.Markdown(
         """
         <div style="text-align: center; padding: 1rem 0 0.5rem 0;">
-            <h1 style="font-weight: 600; margin-bottom: 0.2rem;">Drone Detection System</h1>
-            <p style="font-size: 1rem; opacity: 0.8;">YOLOv11 | Explainable AI Heatmap | BLIP Captioning</p>
+            <h1 style="font-weight: 700; letter-spacing: -0.5px; margin-bottom: 0.2rem; color: #ffffff;">SKYGUARD</h1>
+            <p style="font-size: 1.1rem; color: #ffd966;">Advanced Drone Detection with Explainable AI</p>
+            <p style="font-size: 0.9rem; color: #c0d0e0;">YOLOv11 | XAI Heatmap | BLIP Captioning</p>
         </div>
         """
     )
     
-    with gr.Row():
-        with gr.Column(scale=1):
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=1, min_width=320):
             input_image = gr.Image(label="Upload Image", type="pil")
             analyze_btn = gr.Button("Analyze", variant="primary")
         with gr.Column(scale=2):
@@ -292,9 +366,8 @@ with gr.Blocks(title="Drone Detection System", theme=gr.themes.Soft()) as demo:
     
     gr.Markdown(
         """
-        <div style="text-align: center; margin-top: 20px; font-size: 12px; color: #666;">
-            <hr>
-            <p>Powered by YOLOv11, Gradio, Hugging Face Spaces</p>
+        <div class="footer">
+            SkyGuard System | Powered by YOLOv11, Gradio, Hugging Face Spaces
         </div>
         """
     )