Update app.py

app.py

@@ -10,12 +10,9 @@ from huggingface_hub import hf_hub_download
 import warnings
 warnings.filterwarnings('ignore')
 
-# ============================================
-# 1. LOAD MODELS
-# ============================================
-print("Loading YOLOv11 model from Hugging Face Hub...")
+print("Loading YOLOv11 model from Hugging Face Hub...")ا
 model_path = hf_hub_download(
-    repo_id="SkyGuardAI/drone-detection-yolov11",
+    repo_id="SkyGuardAI/drone-detection-yolov11",  
     filename="best.pt"
 )
 model = YOLO(model_path)
@@ -30,9 +27,6 @@ blip_model = BlipForConditionalGeneration.from_pretrained("Salesforce/blip-image
 blip_model.eval()
 print("BLIP model loaded successfully.")
 
-# ============================================
-# 2. HEATMAP FUNCTIONS
-# ============================================
 layer_outputs = {}
 
 def hook_fn(module, input, output):
@@ -90,9 +84,6 @@ def generate_heatmap(model, image):
         print(f"Heatmap error: {e}")
         return None
 
-# ============================================
-# 3. DYNAMIC CAPTION (BLIP)
-# ============================================
 def generate_dynamic_caption(image):
     try:
         if isinstance(image, np.ndarray):
@@ -118,7 +109,6 @@ def generate_dynamic_caption(image):
 # 4. XAI REPORT (ENGLISH)
 # ============================================
 def build_xai_report(is_drone, confidence, drone_count, processing_time, image_caption):
-    confidence_percent = confidence * 100
     if is_drone:
         drone_text = "a drone" if drone_count == 1 else f"{drone_count} drones"
         if confidence >= 0.8:
@@ -259,94 +249,19 @@ def drone_detection_pipeline(input_image):
         return blank, blank, error_msg
 
 # ============================================
-# 6. SKYGUARD PROFESSIONAL INTERFACE
-#    Dark blue theme | White & Yellow text | No emojis
+# 6. INTERFACE - MODIFIED: centering title and ensuring tabs visibility
 # ============================================
-
-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: 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>
+with gr.Blocks(title="SkyGuard - Drone Detection System", theme=gr.themes.Soft()) as demo:
+    gr.HTML("""
+        <div style="text-align: center; margin-bottom: 20px;">
+            <h1 style="color: #1e3a8a; font-weight: 700;">SKYGUARD</h1>
+            <p style="color: #facc15; font-size: 1.2rem;">Advanced Drone Detection with Explainable AI</p>
+            <p style="color: #4b5563;">YOLOv11 | XAI Heatmap | BLIP Captioning</p>
         </div>
-        """
-    )
+    """)
     
-    with gr.Row(equal_height=False):
-        with gr.Column(scale=1, min_width=320):
+    with gr.Row():
+        with gr.Column(scale=1):
             input_image = gr.Image(label="Upload Image", type="pil")
             analyze_btn = gr.Button("Analyze", variant="primary")
         with gr.Column(scale=2):
@@ -364,13 +279,11 @@ with gr.Blocks(title="SkyGuard - Drone Detection System", theme=gr.themes.Soft()
         outputs=[output_image, heatmap_image, report_text]
     )
     
-    gr.Markdown(
-        """
-        <div class="footer">
+    gr.HTML("""
+        <div style="text-align: center; margin-top: 30px; font-size: 12px; color: #6c757d; border-top: 1px solid #dee2e6; padding-top: 15px;">
             SkyGuard System | Powered by YOLOv11, Gradio, Hugging Face Spaces
         </div>
-        """
-    )
+    """)
 
 # ============================================
 # 7. RUN APP