Update app.py

app.py

@@ -1,211 +1,339 @@
 import gradio as gr
 import mlflow
-import dagshub
+import os
+import time
+import tempfile
 from ultralytics import YOLO
 from PIL import Image
 import cv2
 import numpy as np
-import os
-import time
-import tempfile
 
 # ==============================
-# MLflow Authentication via Secrets (زي ما أنت عايز بالظبط)
+# MLflow Configuration using Secrets
 # ==============================
 tracking_uri = os.getenv("MLFLOW_TRACKING_URI")
 username = os.getenv("MLFLOW_TRACKING_USERNAME")
 password = os.getenv("MLFLOW_TRACKING_PASSWORD")
 
 if not all([tracking_uri, username, password]):
-    raise ValueError("❌ MLflow Secrets مش موجودة أو غلط! روح Settings → Secrets وتأكد من الأسماء التلاتة")
+    raise ValueError("MLflow Secrets are not configured! Go to Space Settings → Secrets and verify the names")
 
 os.environ["MLFLOW_TRACKING_URI"] = tracking_uri
 os.environ["MLFLOW_TRACKING_USERNAME"] = username
 os.environ["MLFLOW_TRACKING_PASSWORD"] = password
 
-# تفعيل DagsHub
-dagshub.init(repo_owner="Mosensei7", repo_name="AutonomousVehiclesDetectionDEPI", mlflow=True)
-
-# إنشاء experiment مخصص
 mlflow.set_experiment("YOLOv12s_Inference_Logs")
-
-print("✅ MLflow + DagsHub connected successfully via Secrets!")
+print("✅ MLflow configured successfully using secrets!")
 
 # ==============================
-# تحميل الموديل الصحيح
+# Load Model
 # ==============================
-# لو رافع الموديل على HF كـ repo، استخدم الاسم الكامل
-model = YOLO("Mosensei7/yolov12s-egyptian-autonomous-vehicles/best.pt")  # غيّر الاسم لو مختلف
+model = YOLO("Yolo12s.pt")
 
 # ==============================
-# Inference مع رفع كل حاجة على DagsHub
+# Inference with Full MLflow Tracking
 # ==============================
 def run_inference(media_file, media_type):
     if media_file is None:
-        return None, None, "⚠️ ارفع صورة أو فيديو أولاً"
-
+        return None, None, "⚠️ Please upload a file first"
+    
     media_path = media_file.name
-
-    with mlflow.start_run(run_name=f"YOLOv12s_Inference_{int(time.time())}") as run:
+    
+    with mlflow.start_run(run_name=f"Inference_{int(time.time())}") as run:
         mlflow.log_param("media_type", media_type)
-        mlflow.log_param("model_version", "YOLOv12s")
+        mlflow.log_param("model", "YOLOv12s")
         mlflow.log_param("timestamp", time.strftime("%Y-%m-%d %H:%M:%S"))
-
-        run_url = f"https://dagshub.com/Mosensei7/AutonomousVehiclesDetectionDEPI/mlflow/#/experiments/{mlflow.get_experiment_by_name('YOLOv12s_Inference_Logs').experiment_id}/runs/{run.info.run_id}"
-
+        
         if media_type == "Image":
             img = Image.open(media_path).convert("RGB")
             img_array = np.array(img)
-
             results = model(img_array)[0]
             annotated = results.plot()
             output_img = Image.fromarray(annotated[..., ::-1])
-
-            # رفع input/output
+            
             with tempfile.TemporaryDirectory() as tmpdir:
                 in_path = os.path.join(tmpdir, "input.jpg")
                 out_path = os.path.join(tmpdir, "output.jpg")
                 img.save(in_path)
                 output_img.save(out_path)
-
-                mlflow.log_artifact(in_path, "input")
-                mlflow.log_artifact(out_path, "output")
-
+                mlflow.log_artifact(in_path, artifact_path="input")
+                mlflow.log_artifact(out_path, artifact_path="output")
+            
             detections = len(results.boxes) if results.boxes is not None else 0
-            mlflow.log_metric("detections", detections)
-
-            return output_img, None, f"**✅ تم الكشف والتسجيل بنجاح!**\n\n**Run ID:** `{run.info.run_id}`\n[👀 شوف الـ Log كامل على DagsHub]({run_url})"
-
+            mlflow.log_metric("detections_count", detections)
+            
+            run_url = f"https://dagshub.com/Mosensei7/AutonomousVehiclesDetectionDEPI/mlflow/#/experiments/{mlflow.get_experiment_by_name('YOLOv12s_Inference_Logs').experiment_id}/runs/{run.info.run_id}"
+            
+            return output_img, None, f"✅ **Detection Complete!**\n\n🔍 **Detections:** {detections}\n🆔 **Run ID:** `{run.info.run_id}`\n\n[📊 View on DagsHub]({run_url})"
+        
         else:  # Video
             cap = cv2.VideoCapture(media_path)
             fps = cap.get(cv2.CAP_PROP_FPS) or 30
             w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
             h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
-
+            
             output_video = "output_video.mp4"
             writer = cv2.VideoWriter(output_video, cv2.VideoWriter_fourcc(*'mp4v'), fps, (w, h))
-
+            
             frame_count = 0
             total_detections = 0
-
+            
             while cap.isOpened():
                 ret, frame = cap.read()
                 if not ret:
                     break
+                
                 results = model(frame)[0]
                 annotated = results.plot()
                 writer.write(annotated)
+                
                 frame_count += 1
                 total_detections += len(results.boxes) if results.boxes is not None else 0
-
+            
             cap.release()
             writer.release()
-
-            mlflow.log_artifact(media_path, "input_video")
-            mlflow.log_artifact(output_video, "output_video")
-            mlflow.log_metric("frames", frame_count)
+            
+            mlflow.log_artifact(media_path, artifact_path="input_video")
+            mlflow.log_artifact(output_video, artifact_path="output_video")
+            mlflow.log_metric("frames_processed", frame_count)
             mlflow.log_metric("total_detections", total_detections)
-            mlflow.log_metric("avg_detections_per_frame", round(total_detections / frame_count, 2) if frame_count > 0 else 0)
-
-            # حذف الفيديو المؤقت
+            mlflow.log_metric("avg_detections_per_frame", total_detections / frame_count if frame_count > 0 else 0)
+            
+            run_url = f"https://dagshub.com/Mosensei7/AutonomousVehiclesDetectionDEPI/mlflow/#/experiments/{mlflow.get_experiment_by_name('YOLOv12s_Inference_Logs').experiment_id}/runs/{run.info.run_id}"
+            
+            result_message = f"✅ **Video Processing Complete!**\n\n📹 **Frames:** {frame_count}\n🔍 **Total Detections:** {total_detections}\n📊 **Avg per Frame:** {total_detections / frame_count:.2f}\n🆔 **Run ID:** `{run.info.run_id}`\n\n[📊 View on DagsHub]({run_url})"
+            
             if os.path.exists(output_video):
                 os.remove(output_video)
-
-            return None, output_video, f"**✅ تم معالجة الفيديو والتسجيل بنجاح!**\n\n**Run ID:** `{run.info.run_id}`\n[👀 شوف الـ Log كامل على DagsHub]({run_url})"
+            
+            return None, output_video, result_message
 
 # ==============================
-# التصميم الفضائي الرهيب جدًا (Cyberpunk 2077 style)
+# Modern Aesthetic UI
 # ==============================
 css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+* {
+    font-family: 'Inter', sans-serif;
+}
+
 body {
-    background: linear-gradient(135deg, #000428, #004e92);
-    color: #00ffea;
-    font-family: 'Rajdhani', sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
+
 .gradio-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    background: linear-gradient(145deg, rgba(0,20,40,0.9), rgba(0,10,30,0.95));
-    border: 3px solid #00ffea;
-    border-radius: 30px;
-    padding: 40px;
-    box-shadow: 
-        0 0 30px #00ffea,
-        inset 0 0 30px rgba(0,255,234,0.2);
-}
-h1 {
-    text-align: center;
-    font-size: 3.8em;
-    color: #00ffea;
-    text-shadow: 
-        0 0 10px #00ffea,
-        0 0 20px #00ffea,
-        0 0 40px #00ffea;
-    letter-spacing: 4px;
-    margin-bottom: 20px;
-}
-p {
+    max-width: 1400px !important;
+    margin: 40px auto !important;
+    background: rgba(255, 255, 255, 0.95) !important;
+    border-radius: 24px !important;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+}
+
+/* Header Styling */
+.header-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 48px 40px;
     text-align: center;
-    font-size: 1.4em;
-    color: #00ffea;
-    text-shadow: 0 0 10px #00ffea;
-}
-button {
-    background: linear-gradient(45deg, #ff00ff, #00ffff, #00ff00);
-    background-size: 300% 300%;
-    animation: gradient 5s ease infinite;
-    border: none;
-    border-radius: 25px;
-    font-size: 1.6em;
-    height: 70px;
-    font-weight: bold;
-    box-shadow: 0 0 30px #00ffff;
-    transition: all 0.3s;
-}
-button:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 50px #00ffff;
-}
-@keyframes gradient {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+    border-radius: 24px 24px 0 0;
+}
+
+.header-container h1 {
+    color: white !important;
+    font-size: 2.8em !important;
+    font-weight: 700 !important;
+    margin: 0 0 12px 0 !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-container p {
+    color: rgba(255, 255, 255, 0.95) !important;
+    font-size: 1.1em !important;
+    margin: 0 !important;
+}
+
+/* Main Content Area */
+.main-content {
+    padding: 48px 40px;
+}
+
+/* File Upload Area */
+.file-upload-area {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-radius: 16px;
+    padding: 32px;
+    border: 2px dashed #667eea;
+    transition: all 0.3s ease;
+}
+
+.file-upload-area:hover {
+    border-color: #764ba2;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
+}
+
+/* Buttons */
+button.primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    font-size: 1.1em !important;
+    padding: 16px 48px !important;
+    border-radius: 12px !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
+}
+
+button.primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6) !important;
+}
+
+/* Radio Buttons */
+.radio-group label {
+    background: white;
+    padding: 12px 24px;
+    border-radius: 8px;
+    border: 2px solid #e5e7eb;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.radio-group label:hover {
+    border-color: #667eea;
+    background: #f5f7fa;
+}
+
+/* Output Areas */
+.output-image, .output-video {
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    background: white;
+}
+
+/* Info Box */
+.info-box {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-radius: 12px;
+    padding: 24px;
+    border-left: 4px solid #667eea;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #764ba2;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-in {
+    animation: fadeIn 0.6s ease-out;
 }
 """
 
 with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
-    gr.Markdown("""
-    # 🚀 YOLOv12s
-    ### كشف المركبات في الشوارع المصرية بذكاء اصطناعي 🇪🇬
-    **كل عملية كشف بتترفع تلقائيًا على DagsHub MLflow مع كل التفاصيل**
+    # Header
+    gr.HTML("""
+        <div class="header-container animate-in">
+            <h1>🚗 YOLOv12s Vehicle Detection</h1>
+            <p>Detect vehicles in Egyptian streets with state-of-the-art AI • All inferences logged to DagsHub MLflow</p>
+        </div>
     """)
-
-    with gr.Row():
+    
+    with gr.Row(elem_classes="main-content"):
+        # Left Column - Input
         with gr.Column(scale=1):
-            gr.Markdown("### 📤 ارفع ملفك")
+            gr.Markdown("### 📁 Upload Media")
             media = gr.File(
-                label="صورة أو فيديو",
+                label="Drop your image or video here",
                 file_types=[".jpg", ".jpeg", ".png", ".mp4", ".avi"],
-                height=200
+                elem_classes="file-upload-area"
             )
+            
+            gr.Markdown("### 🎯 Media Type")
             media_type = gr.Radio(
                 ["Image", "Video"],
-                label="نوع الميديا",
+                label="Select type",
                 value="Image",
-                info="اختار نوع الملف اللي هترفعه"
+                elem_classes="radio-group"
             )
-            btn = gr.Button("🔥 ابدأ الكشف الآن", variant="primary", size="lg")
-
+            
+            btn = gr.Button("🚀 Run Detection", variant="primary", size="lg", elem_classes="primary")
+            
+            gr.Markdown("""
+                ---
+                ### 📊 Features
+                - Real-time vehicle detection
+                - Support for images & videos
+                - Auto-logging to DagsHub
+                - Detailed metrics tracking
+            """)
+        
+        # Right Column - Output
         with gr.Column(scale=2):
-            gr.Markdown("### 📊 النتيجة")
-            img_out = gr.Image(label="نتيجة الكشف على الصورة", height=550)
-            vid_out = gr.Video(label="نتيجة الكشف على الفيديو", height=550)
-            info = gr.Markdown("**جاهز للكشف... ارفع ملف واضغط ابدأ**")
-
+            gr.Markdown("### 🎬 Detection Results")
+            
+            with gr.Tabs():
+                with gr.Tab("📸 Image Output"):
+                    img_out = gr.Image(
+                        label="Detected Objects",
+                        height=500,
+                        elem_classes="output-image"
+                    )
+                
+                with gr.Tab("🎥 Video Output"):
+                    vid_out = gr.Video(
+                        label="Processed Video",
+                        height=500,
+                        elem_classes="output-video"
+                    )
+            
+            gr.Markdown("### 📈 Run Information")
+            info = gr.Markdown(
+                "**Ready to detect...** Upload a file and click 'Run Detection' to start!",
+                elem_classes="info-box"
+            )
+    
+    # Event Handler
     btn.click(
         fn=run_inference,
         inputs=[media, media_type],
         outputs=[img_out, vid_out, info]
     )
+    
+    # Footer
+    gr.HTML("""
+        <div style="text-align: center; padding: 32px; color: #6b7280;">
+            <p>Powered by YOLOv12s • MLflow Tracking • DagsHub Integration</p>
+        </div>
+    """)
 
 demo.launch()