Update app.py

app.py

@@ -1,7 +1,6 @@
 import gradio as gr
 from ultralytics import YOLO
 from PIL import Image
-import os
 
 # Load YOLO model
 model = YOLO("Suspicious_Activities_nano.pt")
@@ -12,42 +11,57 @@ def predict_suspicious_activity(image):
     results_img = results[0].plot()
     return Image.fromarray(results_img)
 
-# Create Gradio interface with reliable example images
-interface = gr.Interface(
-    fn=predict_suspicious_activity,
-    inputs=gr.Image(type="pil", label="Security Camera Feed", height=380),
-    outputs=gr.Image(type="pil", label="Threat Analysis", height=380),
-    title="🛡️ AI-Powered Suspicious Activity Detection System",
-    description="""
-    **Advanced security monitoring using YOLOv8 technology**  
-    Our system detects critical security threats including:
-    - Unauthorized loitering in restricted zones
-    - Trespassing incidents captured in surveillance footage
-    - Vandalism and property damage activities
-    - Suspicious package handling
-    - Physical confrontations
-    
-    Upload your security footage or test with the examples below:
-    """,
-    examples=[
-        ["https://raw.githubusercontent.com/ultralytics/ultralytics/main/ultralytics/assets/bus.jpg"],
-        ["https://raw.githubusercontent.com/ultralytics/ultralytics/main/ultralytics/assets/zidane.jpg"],
-        ["https://ultralytics.com/images/bus.jpg"]
-    ],
-    cache_examples=False,
-    theme=gr.themes.Soft(
-        primary_hue="amber",
-        font=[gr.themes.GoogleFont('IBM Plex Sans'), 'system-ui']
-    ),
-    css=".footer {margin-top: 20px; padding: 15px; border-top: 1px solid #eee; text-align: center; color: #666;} footer {visibility: hidden}"
-)
-
-# Correct way to enable queue in newer Gradio versions
-# Call .queue() before .launch()
-interface.queue().launch(
-    share=True,
-    server_port=7860,
-    show_api=False,
-    favicon_path="https://raw.githubusercontent.com/ultralytics/assets/main/logo-Ultralytics.svg",
-    analytics_enabled=False
-)
+# Custom CSS for beauty ✨
+custom_css = """
+#main-card {
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(12px);
+    border-radius: 20px;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+    padding: 30px;
+}
+h1 {
+    font-size: 2.5rem !important;
+    background: linear-gradient(90deg, #ff4b1f, #1fddff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.description {
+    text-align: center;
+    font-size: 1.1rem;
+    margin-bottom: 25px;
+    color: #ddd;
+}
+.gr-button {
+    border-radius: 12px !important;
+    padding: 10px 20px !important;
+    font-weight: bold !important;
+    transition: all 0.3s ease-in-out;
+}
+.gr-button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+}
+"""
+
+# Build modern UI
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    with gr.Column(elem_id="main-card"):
+        gr.Markdown("<h1>🚨 Suspicious Activity Detection</h1>")
+        gr.Markdown("<p class='description'>Upload an image and let YOLO detect suspicious activities instantly ⚡</p>")
+
+        with gr.Row():
+            input_image = gr.Image(type="pil", label="Upload Image", height=350)
+            output_image = gr.Image(type="pil", label="Detection Result", height=350)
+
+        with gr.Row():
+            detect_btn = gr.Button("🔍 Detect", variant="primary")
+            clear_btn = gr.Button("🗑️ Clear", variant="secondary")
+
+        detect_btn.click(fn=predict_suspicious_activity, inputs=input_image, outputs=output_image)
+        clear_btn.click(fn=lambda: (None, None), inputs=None, outputs=[input_image, output_image])
+
+# Launch
+demo.launch(share=True)