Update app.py

app.py

@@ -11,7 +11,7 @@ import warnings
 warnings.filterwarnings('ignore')
 
 # ============================================================
-# 1. LOAD MODELS
+# 1. LOAD MODELS (same as before)
 # ============================================================
 print("Loading YOLOv11 model from Hugging Face Hub...")
 model_path = hf_hub_download(
@@ -31,7 +31,7 @@ blip_model.eval()
 print("BLIP model loaded successfully.")
 
 # ============================================================
-# 2. HEATMAP FUNCTIONS
+# 2. HEATMAP FUNCTIONS (unchanged)
 # ============================================================
 layer_outputs = {}
 
@@ -115,7 +115,7 @@ def generate_dynamic_caption(image):
         return "AI model is analyzing the scene."
 
 # ============================================================
-# 4. XAI REPORT (ENGLISH)
+# 4. XAI REPORT (English, professional)
 # ============================================================
 def build_xai_report(is_drone, confidence, drone_count, processing_time, image_caption):
     confidence_percent = confidence * 100
@@ -259,42 +259,93 @@ def drone_detection_pipeline(input_image):
         return blank, blank, error_msg
 
 # ============================================================
-# 6. GRADIO INTERFACE (ENGLISH)
+# 6. PROFESSIONAL GRADIO INTERFACE (NO EMOJIS, AI COLORS)
 # ============================================================
-with gr.Blocks(title="Drone Detection with XAI", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("""
-    <div style="text-align: center;">
-        <h1>🚁 Drone Detection System with Explainable AI (XAI)</h1>
-        <p>Using <strong>YOLOv11</strong> for detection, <strong>heatmap</strong> for neural network focus visualization, and <strong>BLIP</strong> for dynamic image captioning.</p>
-        <p>📌 <strong>Note:</strong> The heatmap is extracted from the deepest convolutional layer of YOLOv11, showing where the model focuses to make decisions.</p>
-    </div>
-    """)
+custom_css = """
+body {
+    background-color: #0a0f1c;
+}
+.gradio-container {
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+    font-family: 'Segoe UI', 'Roboto', sans-serif;
+}
+.gr-button-primary {
+    background: linear-gradient(90deg, #1e3a8a, #3b82f6) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    border-radius: 8px !important;
+    padding: 10px 24px !important;
+    transition: all 0.2s ease !important;
+}
+.gr-button-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px -5px rgba(59,130,246,0.4);
+}
+.gr-tabs {
+    border: none;
+}
+.gr-tabs .tab-nav button {
+    background-color: #1e293b !important;
+    color: #cbd5e1 !important;
+    border-radius: 8px 8px 0 0 !important;
+    font-weight: 500 !important;
+}
+.gr-tabs .tab-nav button.selected {
+    background-color: #0f172a !important;
+    color: #3b82f6 !important;
+    border-bottom: 2px solid #3b82f6;
+}
+h1, h2, h3 {
+    color: #f0f9ff;
+}
+p, .gr-markdown, label {
+    color: #e2e8f0;
+}
+.gr-box, .gr-form {
+    background-color: #0f172a !important;
+    border: 1px solid #334155 !important;
+    border-radius: 12px !important;
+}
+"""
+
+with gr.Blocks(title="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: 700; letter-spacing: -0.5px; margin-bottom: 0.2rem;">Drone Detection System</h1>
+            <p style="color: #94a3b8; font-size: 1rem;">YOLOv11 Object Detection | Explainable AI Heatmap | BLIP Captioning</p>
+        </div>
+        """
+    )
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            input_image = gr.Image(label="📸 Upload an image for analysis", type="pil")
-            submit_btn = gr.Button("Start Analysis", variant="primary", size="lg")
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=1, min_width=300):
+            input_image = gr.Image(label="Upload Image", type="pil", elem_classes="gr-box")
+            submit_btn = gr.Button("Analyze", variant="primary", size="lg")
         with gr.Column(scale=2):
             with gr.Tabs():
-                with gr.TabItem("🔍 Detection Result"):
-                    output_image = gr.Image(label="Image with bounding boxes")
-                with gr.TabItem("🔥 XAI Heatmap"):
-                    heatmap_image = gr.Image(label="Neural activation heatmap (Red = high focus)")
-                with gr.TabItem("📄 Detailed XAI Report"):
-                    report_text = gr.Markdown(label="Complete report")
+                with gr.TabItem("Detection Result"):
+                    output_image = gr.Image(label="Bounding Boxes")
+                with gr.TabItem("XAI Heatmap"):
+                    heatmap_image = gr.Image(label="Neural Activation Heatmap")
+                with gr.TabItem("XAI Report"):
+                    report_text = gr.Markdown(label="Interpretability Report")
+    
+    gr.Markdown(
+        """
+        <div style="text-align: center; margin-top: 20px; font-size: 12px; color: #475569;">
+            <hr style="border-color: #334155;">
+            <p>Powered by YOLOv11, Gradio, Hugging Face Spaces | Model hosted on Hugging Face Hub</p>
+        </div>
+        """
+    )
     
     submit_btn.click(
         fn=drone_detection_pipeline,
         inputs=[input_image],
         outputs=[output_image, heatmap_image, report_text]
     )
-    
-    gr.Markdown("""
-    <div style="text-align: center; margin-top: 30px; font-size: 12px; color: gray;">
-        <hr>
-        <p>Developed with YOLOv11, Gradio, Hugging Face Spaces 🤗 | Model hosted on Hugging Face Hub</p>
-    </div>
-    """)
 
 # ============================================================
 # 7. RUN APP