Update app.py

app.py

@@ -10,9 +10,9 @@ from huggingface_hub import hf_hub_download
 import warnings
 warnings.filterwarnings('ignore')
 
-# ============================================
-# 1. LOAD MODELS
-# ============================================
+# ============================================================
+# 1. LOAD MODELS (CHANGE USERNAME BELOW)
+# ============================================================
 print("Loading YOLOv11 model from Hugging Face Hub...")
 model_path = hf_hub_download(
     repo_id="SkyGuardAI/drone-detection-yolov11", 
@@ -30,9 +30,9 @@ 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 +90,9 @@ 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):
@@ -114,9 +114,9 @@ def generate_dynamic_caption(image):
         print(f"Caption error: {e}")
         return "AI model is analyzing the scene."
 
-# ============================================
+# ============================================================
 # 4. XAI REPORT
-# ============================================
+# ============================================================
 def build_xai_report(is_drone, confidence, drone_count, processing_time, image_caption):
     if is_drone:
         drone_text = "a drone" if drone_count == 1 else f"{drone_count} drones"
@@ -208,9 +208,9 @@ Scattered activation pattern confirms absence of strong drone-like features.
 """
     return report
 
-# ============================================
+# ============================================================
 # 5. MAIN PIPELINE FUNCTION
-# ============================================
+# ============================================================
 def drone_detection_pipeline(input_image):
     try:
         if isinstance(input_image, Image.Image):
@@ -257,99 +257,92 @@ def drone_detection_pipeline(input_image):
         blank = np.zeros((480, 640, 3), dtype=np.uint8)
         return blank, blank, error_msg
 
-# ============================================
-# 6. SKYGUARD PROFESSIONAL INTERFACE (Inspired by the poster)
-# ============================================
+# ============================================================
+# 6. SKYGUARD INTERFACE (WHITE BACKGROUND, DARK BLUE BUTTONS)
+# ============================================================
 custom_css = """
-/* Global background - dark military/tech style */
-.gradio-container {
-    background: linear-gradient(145deg, #0a0f1a 0%, #0c1320 100%) !important;
-    font-family: 'Segoe UI', 'Roboto', 'Orbitron', sans-serif;
+/* White background for main container and body */
+.gradio-container, body, .gradio-container .main {
+    background: #ffffff !important;
+    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
 }
-/* Header styling */
+/* Header styling - dark text, centered */
 .skyguard-header {
     text-align: center;
     padding: 1.5rem 0 0.5rem 0;
-    border-bottom: 2px solid #f5c518;
     margin-bottom: 1.5rem;
 }
 .skyguard-header h1 {
     font-size: 3rem;
     font-weight: 800;
-    letter-spacing: 4px;
-    color: #ffffff;
-    text-shadow: 0 0 8px rgba(0,100,200,0.5);
-    margin-bottom: 0;
+    letter-spacing: 3px;
+    color: #0a2b4e;   /* dark blue */
+    margin-bottom: 0.2rem;
 }
 .skyguard-header .tagline {
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: #f5c518;
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: #1e4a76;    /* medium dark blue */
     letter-spacing: 1px;
-    margin-top: 0.25rem;
+    margin-top: 0.2rem;
 }
 .skyguard-header .sub {
-    font-size: 0.8rem;
-    color: #8aa0b5;
+    font-size: 0.9rem;
+    color: #2c5282;
     margin-top: 0.5rem;
 }
-/* Buttons */
+/* Buttons - dark blue */
 .gr-button-primary {
-    background: linear-gradient(90deg, #1e4a76, #0f2c44) !important;
-    border: 1px solid #f5c518 !important;
+    background: #0a2b4e !important;
+    border: none !important;
     color: white !important;
     font-weight: 700 !important;
     border-radius: 30px !important;
-    padding: 10px 24px !important;
+    padding: 10px 28px !important;
     transition: all 0.2s ease !important;
     text-transform: uppercase !important;
     letter-spacing: 1px;
 }
 .gr-button-primary:hover {
+    background: #1e4a76 !important;
     transform: scale(1.02);
-    background: linear-gradient(90deg, #2c6e9e, #1a405e) !important;
-    box-shadow: 0 0 12px rgba(245,197,24,0.3);
-}
-/* Tabs styling */
-.tab-nav {
-    background-color: #0f1725 !important;
-    border-radius: 8px 8px 0 0;
+    box-shadow: 0 4px 12px rgba(10,43,78,0.3);
 }
+/* Tabs styling - simple and clean */
 .gr-tabs .tab-nav button {
-    background-color: #0f1725 !important;
-    color: #ccddee !important;
+    background-color: #eef2f5 !important;
+    color: #0a2b4e !important;
     font-weight: 600 !important;
     border-radius: 8px 8px 0 0 !important;
-    padding: 10px 24px !important;
-    margin-right: 2px;
+    padding: 8px 20px !important;
+    margin-right: 4px;
 }
 .gr-tabs .tab-nav button.selected {
-    background-color: #1e3a5f !important;
-    color: #f5c518 !important;
-    border-bottom: 2px solid #f5c518 !important;
+    background-color: #0a2b4e !important;
+    color: white !important;
 }
-/* Input/output boxes */
+/* Input and output boxes - light grey border */
 .gr-box, .gr-form, .gr-input, .gr-panel {
-    background-color: #0f1725 !important;
-    border: 1px solid #2c4c6e !important;
+    background-color: #f9fafb !important;
+    border: 1px solid #d1d5db !important;
     border-radius: 12px !important;
 }
 /* Labels */
 label, .gr-form label {
-    color: #e0e8f0 !important;
+    color: #1e293b !important;
     font-weight: 500 !important;
 }
-/* Markdown text */
+/* Markdown text (report) */
 .gr-markdown p, .gr-markdown {
-    color: #e0e8f0;
+    color: #1e293b;
 }
 /* Footer */
 .skyguard-footer {
     text-align: center;
     margin-top: 30px;
     font-size: 12px;
-    color: #5a7a9a;
-    border-top: 1px solid #2c4c6e;
+    color: #6c757d;
+    border-top: 1px solid #e2e8f0;
     padding-top: 15px;
 }
 """
@@ -360,7 +353,7 @@ with gr.Blocks(title="SkyGuard - Drone Detection System", theme=gr.themes.Soft()
             <h1>SKYGUARD</h1>
             <div class="tagline">SEE EVERY THREAT BEFORE IT LANDS</div>
             <div class="sub">YOLOv11 Detection | Explainable AI (XAI) | BLIP Captioning</div>
-            <div class="sub" style="font-size:0.7rem; color:#b0c4de;">Mohamed Khider University of Biskra - Computer Science | Biskra, Algeria</div>
+            <div class="sub" style="font-size:0.75rem; color:#3b6e9e;">Mohamed Khider University of Biskra - Computer Science | Biskra, Algeria</div>
         </div>
     """)
     
@@ -389,8 +382,8 @@ with gr.Blocks(title="SkyGuard - Drone Detection System", theme=gr.themes.Soft()
         </div>
     """)
 
-# ============================================
+# ============================================================
 # 7. RUN APP
-# ============================================
+# ============================================================
 if __name__ == "__main__":
     demo.launch()