Upload 8 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/logo.PNG filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,569 @@
+import os
+import io
+import cv2
+import base64
+import torch
+import torch.nn as nn
+import numpy as np
+import pandas as pd
+import joblib
+import smtplib
+import ssl
+import threading
+import uuid
+import time
+import requests
+from urllib.parse import urlparse
+from email.message import EmailMessage
+from flask import Flask, request, render_template, jsonify, Response, send_from_directory
+from werkzeug.utils import secure_filename
+
+# --- Auto-install missing libraries ---
+try:
+    from ultralytics import YOLO
+    import easyocr
+except ModuleNotFoundError:
+    import sys
+    import subprocess
+    print("Installing ultralytics and easyocr (ALPR)... This might take a minute...")
+    subprocess.check_call([sys.executable, "-m", "pip", "install", "ultralytics", "scikit-learn", "easyocr", "pandas", "requests"])
+    from ultralytics import YOLO
+    import easyocr
+
+from torchvision.models.video import r3d_18
+
+app = Flask(__name__)
+
+# ==========================================
+# 🚨 ALERT CONFIGURATION (EMAIL SETUP) 🚨
+# ==========================================
+ALERT_EMAIL_SENDER = "gowreeshgowri50@gmail.com" 
+ALERT_EMAIL_PASSWORD = "omzw fjsu nwnr sgvl" 
+ALERT_EMAIL_RECEIVER = "ridhinmr32@gmail.com"
+ENABLE_EMAIL_ALERTS = True
+
+# --- Configurations ---
+UPLOAD_FOLDER = 'uploads'
+MODEL_FOLDER = 'models' 
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(MODEL_FOLDER, exist_ok=True)
+
+device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
+classes = ['major', 'minor', 'moderate']
+
+# --- Load Models ---
+print("Loading AI Models & ALPR... This might take a few seconds.")
+models_loaded = False
+try:
+    yolo_path = os.path.join(MODEL_FOLDER, 'yolov8_accident_model.pt')
+    model_yolo = YOLO(yolo_path)
+
+    cnn3d_path = os.path.join(MODEL_FOLDER, '3dcnn_accident_model.pth')
+    model_3d = r3d_18()
+    model_3d.fc = nn.Linear(model_3d.fc.in_features, 3)
+    model_3d.load_state_dict(torch.load(cnn3d_path, map_location=device))
+    model_3d.to(device)
+    model_3d.eval()
+
+    svm_path = os.path.join(MODEL_FOLDER, 'ensemble_svm_model.pkl')
+    model_svm = joblib.load(svm_path)
+
+    print("Loading OCR Engine...")
+    ocr_reader = easyocr.Reader(['en'], gpu=torch.cuda.is_available())
+
+    models_loaded = True
+    print("✅ Visual AI Models & OCR Loaded Successfully!")
+except Exception as e:
+    print(f"⚠️ Warning: Could not load real visual models. Using mock simulation. Error: {e}")
+
+# Load Traffic Predictor (Tabular Model)
+try:
+    traffic_model_path = os.path.join(MODEL_FOLDER, 'traffic_predictor.pkl')
+    model_traffic = joblib.load(traffic_model_path)
+    print("✅ Traffic Risk Predictor Loaded Successfully!")
+except Exception as e:
+    print(f"⚠️ Warning: Could not load traffic predictor model. Error: {e}")
+    model_traffic = None
+
+def cleanup_old_files():
+    for f in os.listdir(app.config['UPLOAD_FOLDER']):
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], f)
+        try:
+            if os.path.isfile(file_path):
+                if time.time() - os.path.getmtime(file_path) > 3600:
+                    os.remove(file_path)
+        except Exception as e: pass
+
+# --- NEW: Extract Location and Weather from IP Camera URL ---
+def get_camera_info_from_ip(url):
+    try:
+        parsed = urlparse(url)
+        netloc = parsed.netloc.split(':')[0]
+        if not netloc: return None, None
+        
+        print(f"🔍 Tracing IP Address: {netloc}...")
+        
+        # 1. Get City/Country from IP Address
+        res = requests.get(f"http://ip-api.com/json/{netloc}", timeout=5).json()
+        if res.get("status") == "success":
+            city = res.get("city", "Unknown City")
+            country = res.get("countryCode", "Unknown Country")
+            lat = res.get("lat")
+            lon = res.get("lon")
+            cam_location = f"{city}, {country}"
+            print(f"🌍 IP Geolocation Success! Camera is located in: {cam_location}")
+            
+            # 2. Get Real-time Weather for that Camera's Location
+            try:
+                wx_res = requests.get(f"https://api.open-meteo.com/v1/forecast?latitude={lat}&longitude={lon}&current_weather=true", timeout=5).json()
+                temp = wx_res["current_weather"]["temperature"]
+                cam_weather = f"{temp}°C, Active"
+                print(f"⛅ Weather API Success! Conditions: {cam_weather}")
+            except Exception as wx_e:
+                print(f"⚠️ Weather API failed: {wx_e}")
+                cam_weather = "--"
+                
+            return cam_location, cam_weather
+        else:
+            print(f"❌ IP API Error: {res.get('message', 'Unknown Error')}")
+    except Exception as e:
+        print(f"❌ IP Geolocation failed: {e}")
+    return None, None
+
+def send_email_alert(location, confidence, plates_data, image_b64, severity, video_path=None):
+    if not ENABLE_EMAIL_ALERTS:
+        return
+    try:
+        msg = EmailMessage()
+        msg['Subject'] = f"🚨 {severity.upper()} COLLISION DETECTED - {location}"
+        msg['From'] = ALERT_EMAIL_SENDER
+        msg['To'] = ALERT_EMAIL_RECEIVER
+        
+        # Extract just the text from the plates dictionary for the email body
+        plates_text_list = [p['text'] for p in plates_data] if plates_data else []
+        plates_text = ', '.join(plates_text_list) if plates_text_list else 'None Detected'
+
+        content = f"""
+        EMERGENCY DISPATCH ALERT
+        ------------------------
+        A collision has been detected by CrashVision AI.
+        
+        Location: {location}
+        Severity: {severity.upper()} COLLISION
+        AI Confidence: {confidence}%
+        Detected Plates: {plates_text}
+        
+        Immediate response requested. See attached surveillance media.
+        """
+        msg.set_content(content)
+
+        if image_b64:
+            img_data = base64.b64decode(image_b64)
+            msg.add_attachment(img_data, maintype='image', subtype='jpeg', filename='incident_snapshot.jpg')
+
+        if video_path and os.path.exists(video_path):
+            if video_path.lower().endswith(('.mp4', '.avi', '.mov', '.webm')):
+                file_size = os.path.getsize(video_path)
+                if file_size < 20 * 1024 * 1024:
+                    with open(video_path, 'rb') as f:
+                        vid_data = f.read()
+                    msg.add_attachment(vid_data, maintype='video', subtype='mp4', filename='incident_video.mp4')
+
+        context = ssl.create_default_context()
+        with smtplib.SMTP_SSL('smtp.gmail.com', 465, context=context) as smtp:
+            smtp.login(ALERT_EMAIL_SENDER, ALERT_EMAIL_PASSWORD)
+            smtp.send_message(msg)
+        print("✅ Email Alert successfully sent!")
+    except Exception as e:
+        print(f"❌ Failed to send email alert: {e}")
+
+def process_video_or_image(file_path):
+    is_image = file_path.lower().endswith(('.png', '.jpg', '.jpeg'))
+    frames_3d = []
+    yolo_probs = []
+    annotated_frame = None
+    best_raw_frame = None
+    
+    if is_image:
+        frame = cv2.imread(file_path)
+        best_raw_frame = frame.copy()
+        res = model_yolo(file_path, verbose=False)[0]
+        annotated_frame = res.plot() 
+        if res.probs is not None:
+            yolo_probs.append(res.probs.data.cpu().numpy())
+        elif res.boxes is not None and len(res.boxes) > 0:
+            confs = np.zeros(4) # SVM expects 4 classes from YOLO to total 15 features
+            for box in res.boxes:
+                cls_id = int(box.cls[0].item())
+                conf = box.conf[0].item()
+                if cls_id < 4 and conf > confs[cls_id]:
+                    confs[cls_id] = conf
+            yolo_probs.append(confs)
+        f_3d = cv2.resize(frame, (112, 112))
+        f_3d = cv2.cvtColor(f_3d, cv2.COLOR_BGR2RGB)
+        frames_3d = [f_3d] * 16
+    else:
+        cap = cv2.VideoCapture(file_path)
+        frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        if frame_count <= 0: return None, None, None, None
+        
+        start_3d = int(frame_count * 0.70)
+        intervals_3d = np.linspace(start_3d, max(start_3d, frame_count-1), 16, dtype=int)
+        start_yolo = int(frame_count * 0.75)
+        intervals_yolo = np.linspace(start_yolo, max(start_yolo, frame_count-1), 5, dtype=int)
+        
+        for idx in set(intervals_3d).union(set(intervals_yolo)):
+            cap.set(cv2.CAP_PROP_POS_FRAMES, idx)
+            ret, frame = cap.read()
+            if not ret: continue
+            if idx in intervals_3d:
+                f_3d = cv2.resize(frame, (112, 112))
+                f_3d = cv2.cvtColor(f_3d, cv2.COLOR_BGR2RGB)
+                frames_3d.append(f_3d)
+            if idx in intervals_yolo:
+                temp_path = os.path.join(UPLOAD_FOLDER, "temp_yolo_frame.jpg")
+                cv2.imwrite(temp_path, frame)
+                res = model_yolo(temp_path, verbose=False)[0]
+                best_raw_frame = frame.copy()
+                annotated_frame = res.plot() 
+                if res.probs is not None:
+                    yolo_probs.append(res.probs.data.cpu().numpy())
+                elif res.boxes is not None and len(res.boxes) > 0:
+                    confs = np.zeros(4) # Parse bounding boxes for 4 classes
+                    for box in res.boxes:
+                        cls_id = int(box.cls[0].item())
+                        conf = box.conf[0].item()
+                        if cls_id < 4 and conf > confs[cls_id]:
+                            confs[cls_id] = conf
+                    yolo_probs.append(confs)
+        cap.release()
+
+    return frames_3d, yolo_probs, annotated_frame, best_raw_frame
+
+def get_real_prediction(file_path, location_data):
+    frames_3d, yolo_probs, annotated_frame, best_raw_frame = process_video_or_image(file_path)
+    if not frames_3d: return mock_predict(location_data, file_path)
+
+    # --- 3D-CNN ---
+    if len(frames_3d) == 16:
+        tensor_3d = torch.tensor(np.array(frames_3d), dtype=torch.float32).permute(3, 0, 1, 2) / 255.0
+        tensor_3d = tensor_3d.unsqueeze(0).to(device)
+        with torch.no_grad():
+            out_3d = model_3d(tensor_3d)
+            prob_3d = torch.nn.functional.softmax(out_3d, dim=1).cpu().numpy()[0] 
+    else:
+        prob_3d = np.array([0.33, 0.33, 0.33])
+
+    # --- YOLOv8 ---
+    if len(yolo_probs) > 0:
+        prob_mean = np.mean(yolo_probs, axis=0) 
+        prob_max = np.max(yolo_probs, axis=0)
+        prob_min = np.min(yolo_probs, axis=0)
+        
+        # Ensure length 4 for SVM compatibility (15 features total)
+        if len(prob_mean) < 4:
+            prob_mean = np.pad(prob_mean, (0, 4 - len(prob_mean)))
+            prob_max = np.pad(prob_max, (0, 4 - len(prob_max)))
+            prob_min = np.pad(prob_min, (0, 4 - len(prob_min)))
+        elif len(prob_mean) > 4:
+            prob_mean = prob_mean[:4]
+            prob_max = prob_max[:4]
+            prob_min = prob_min[:4]
+    else:
+        # Fallback to zeros of length 4 to prevent the 12-feature crash
+        prob_mean = prob_max = prob_min = np.zeros(4)
+
+    combined_features = np.concatenate((prob_mean, prob_max, prob_min, prob_3d)).reshape(1, -1)
+    ensemble_probs = model_svm.predict_proba(combined_features)[0]
+    final_pred_idx = model_svm.predict(combined_features)[0]
+    
+    severity_label = classes[final_pred_idx]
+    confidence = ensemble_probs[final_pred_idx] * 100
+    
+    # --- Fallback: If SVM doesn't trigger but YOLO sees an accident ---
+    yolo_max_conf = float(np.max(prob_max)) * 100
+    if confidence < 60 and yolo_max_conf > 60:
+        confidence = yolo_max_conf
+        severity_label = classes[min(int(np.argmax(prob_max)), 2)]
+
+    # --- ADVANCED ALPR: CROP AND EXTRACT PLATES ---
+    detected_plates = []
+    if best_raw_frame is not None:
+        ocr_results = ocr_reader.readtext(best_raw_frame, detail=1)
+        for (bbox, text, prob) in ocr_results:
+            text_clean = text.upper().strip()
+            if len(text_clean) > 4 and any(c.isalpha() for c in text_clean) and any(c.isdigit() for c in text_clean):
+                try:
+                    x_min = max(0, int(min([p[0] for p in bbox])))
+                    x_max = min(best_raw_frame.shape[1], int(max([p[0] for p in bbox])))
+                    y_min = max(0, int(min([p[1] for p in bbox])))
+                    y_max = min(best_raw_frame.shape[0], int(max([p[1] for p in bbox])))
+                    
+                    plate_crop = best_raw_frame[y_min:y_max, x_min:x_max]
+                    _, buffer = cv2.imencode('.jpg', plate_crop)
+                    plate_b64 = base64.b64encode(buffer).decode('utf-8')
+                    
+                    detected_plates.append({"text": text_clean, "image": plate_b64})
+                except Exception as e:
+                    print(f"Error cropping plate: {e}")
+                    detected_plates.append({"text": text_clean, "image": ""})
+
+    encoded_img = ""
+    if annotated_frame is not None:
+        _, buffer = cv2.imencode('.jpg', annotated_frame)
+        encoded_img = base64.b64encode(buffer).decode('utf-8')
+
+    alert_sent = True
+    print(f"\n{'='*50}\n🚨 {severity_label.upper()} ALERT DISPATCHED! 🚨")
+    print(f"📍 Location Triggered: {location_data}")
+    threading.Thread(target=send_email_alert, args=(location_data, confidence, detected_plates, encoded_img, severity_label, file_path)).start()
+
+    return {
+        "label": f"Accident Detected ({severity_label.capitalize()})",
+        "confidence": round(float(confidence), 1),
+        "cnn": round(float(np.max(prob_max)) * 100, 1), 
+        "rcnn": round(float(np.max(prob_3d)) * 100, 1),
+        "alert_sent": alert_sent,
+        "plates": detected_plates,
+        "image": encoded_img
+    }
+
+def mock_predict(location_data, file_path=None):
+    import random
+    svm_prob = np.random.uniform(0.7, 0.95)
+    cnn_prob = np.random.uniform(0.6, 0.95)
+    rcnn_prob = np.random.uniform(0.6, 0.9)
+    ensemble_prob = (svm_prob + cnn_prob + rcnn_prob) / 3
+    
+    severities = ["Major", "Moderate", "Minor"]
+    severity_label = random.choice(severities)
+    
+    alert_sent = True
+    plates = [] 
+    
+    print(f"\n🚨 [MOCK] {severity_label.upper()} ALERT DISPATCHED! 🚨\n")
+    print(f"📍 Location Triggered: {location_data}")
+    threading.Thread(target=send_email_alert, args=(location_data, round(float(ensemble_prob) * 100, 1), plates, None, severity_label, file_path)).start()
+
+    return {
+        "label": f"Accident Detected ({severity_label})",
+        "confidence": round(float(ensemble_prob) * 100, 1),
+        "cnn": round(cnn_prob * 100, 1),
+        "rcnn": round(rcnn_prob * 100, 1),
+        "alert_sent": alert_sent,
+        "plates": plates,
+        "image": ""
+    }
+
+# --- ROUTES ---
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/upload_media', methods=['POST'])
+def upload_media():
+    """Immediately saves file and returns ID so frontend can start video tracking."""
+    if 'file' not in request.files:
+        return jsonify({"error": "No file uploaded"}), 400
+    
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({"error": "No selected file"}), 400
+
+    cleanup_old_files()
+    unique_id = f"{uuid.uuid4().hex}_{secure_filename(file.filename)}"
+    file_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_id)
+    file.save(file_path)
+    
+    return jsonify({"video_id": unique_id})
+
+@app.route('/analyze_media', methods=['POST'])
+def analyze_media():
+    """Runs the heavy CNN/SVM processing in the background."""
+    data = request.json
+    unique_id = data.get('video_id')
+    file_path = os.path.join(app.config['UPLOAD_FOLDER'], secure_filename(unique_id))
+    
+    if not os.path.exists(file_path):
+        return jsonify({"error": "File not found"}), 404
+        
+    try:
+        if models_loaded:
+            results = get_real_prediction(file_path, "N/A (Uploaded Media)")
+        else:
+            results = mock_predict("N/A (Uploaded Media)", file_path)
+        
+        results['video_id'] = unique_id
+        results['is_video'] = True 
+        return jsonify(results)
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/predict_stream', methods=['POST'])
+def predict_stream():
+    data = request.json
+    stream_url = data.get('url')
+    location = data.get('location', 'Unknown Location') # Default to browser location
+
+    if not stream_url:
+        return jsonify({"error": "No stream URL provided"}), 400
+
+    try:
+        # Sanitize Live IP Camera URLs (fix HTML entities)
+        if isinstance(stream_url, str):
+            stream_url = stream_url.replace('&amp;', '&')
+            
+            # --- OVERRIDE BROWSER LOCATION IF CAMERA IP CAN BE TRACED ---
+            cam_loc, cam_wx = get_camera_info_from_ip(stream_url)
+            if cam_loc:
+                location = cam_loc # Override browser location with actual Camera location!
+
+        cleanup_old_files()
+        
+        cap = cv2.VideoCapture(stream_url)
+        if not cap.isOpened():
+            return jsonify({"error": "Failed to open stream. Check URL and connection."}), 400
+
+        frames = []
+        for _ in range(90):
+            ret, frame = cap.read()
+            if not ret: break
+            frames.append(frame)
+        cap.release()
+
+        if not frames:
+            return jsonify({"error": "Stream is empty or unreachable"}), 400
+
+        unique_id = f"stream_{uuid.uuid4().hex}.webm"
+        temp_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_id)
+        height, width, _ = frames[0].shape
+        fourcc = cv2.VideoWriter_fourcc(*'VP80') 
+        out = cv2.VideoWriter(temp_path, fourcc, 30.0, (width, height))
+        for f in frames:
+            out.write(f)
+        out.release()
+
+        if models_loaded:
+            results = get_real_prediction(temp_path, location)
+        else:
+            results = mock_predict(location, temp_path)
+            _, buffer = cv2.imencode('.jpg', frames[int(len(frames)/2)])
+            results['image'] = base64.b64encode(buffer).decode('utf-8')
+
+        # Pass the camera's location back to the frontend so the UI updates
+        if 'cam_loc' in locals() and cam_loc:
+            results['cam_location'] = cam_loc
+            results['cam_weather'] = cam_wx
+
+        results['video_id'] = unique_id
+        results['is_video'] = True
+        results['source_type'] = 'live'
+        return jsonify(results)
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/predict_traffic_risk', methods=['POST'])
+def predict_traffic_risk():
+    """Handles the Tabular Predictor requests from the frontend."""
+    data = request.json
+    if not data:
+        return jsonify({"error": "No data provided"}), 400
+
+    try:
+        # If the model isn't found, return a mock simulation for demo purposes
+        if model_traffic is None:
+            import random
+            risk_prob = random.uniform(10, 85)
+            will_happen = risk_prob > 50
+            return jsonify({
+                "risk_probability_percentage": round(risk_prob, 1),
+                "will_accident_happen": will_happen,
+                "status": "High Risk Detected" if will_happen else "Low Risk Environment"
+            })
+
+        # Replace empty string payloads with None so Pandas treats them as True missing values (NaN)
+        cleaned_data = {k: (v if v != "" else None) for k, v in data.items()}
+
+        # Load data into pandas DataFrame
+        df = pd.DataFrame([cleaned_data])
+
+        # Ensure numeric columns are cast appropriately to prevent scikit-learn errors
+        numeric_cols = ['Traffic_Density', 'Speed_Limit', 'Number_of_Vehicles', 
+                        'Driver_Alcohol', 'Driver_Age', 'Driver_Experience']
+        for col in numeric_cols:
+            if col in df.columns:
+                df[col] = pd.to_numeric(df[col], errors='coerce')
+
+        # Feature Engineering (Robust against NaN values)
+        if 'Speed_Limit' in df.columns and 'Driver_Alcohol' in df.columns:
+            df['Speed_Alcohol_Risk'] = (df['Speed_Limit'] // 10) * (df['Driver_Alcohol'] + 0.1)
+        if 'Traffic_Density' in df.columns and 'Number_of_Vehicles' in df.columns:
+            df['Congestion_Risk'] = df['Traffic_Density'] * df['Number_of_Vehicles']
+
+        # Get prediction and probabilities
+        prediction = model_traffic.predict(df)[0]
+        probabilities = model_traffic.predict_proba(df)[0]
+        
+        # Determine probability of accident (class 1)
+        accident_probability = probabilities[1] * 100
+        status = "High Risk Detected" if accident_probability >= 50 else "Low Risk Environment"
+
+        return jsonify({
+            "risk_probability_percentage": round(accident_probability, 1),
+            "will_accident_happen": bool(prediction),
+            "status": status
+        })
+
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/video/<video_id>')
+def get_video(video_id):
+    """Serves the actual MP4 file for the HTML5 native video player"""
+    return send_from_directory(app.config['UPLOAD_FOLDER'], secure_filename(video_id))
+
+@app.route('/stream_tracking/<video_id>')
+def stream_tracking(video_id):
+    """Real-time YOLO object tracking generator (yields MJPEG frames at normal video speed)."""
+    file_path = os.path.join(app.config['UPLOAD_FOLDER'], secure_filename(video_id))
+    
+    def generate():
+        cap = cv2.VideoCapture(file_path)
+        fps = cap.get(cv2.CAP_PROP_FPS)
+        if fps <= 0: fps = 30
+        delay = 1.0 / fps # Calculate standard frame wait time
+        
+        while cap.isOpened():
+            start_time = time.time()
+            ret, frame = cap.read()
+            if not ret:
+                cap.set(cv2.CAP_PROP_POS_FRAMES, 0) # Loop video
+                continue
+                
+            if models_loaded:
+                # Add bounding boxes over the frame (confidence kept low to ensure visibility)
+                res = model_yolo(frame, conf=0.25, verbose=False)[0]
+                frame = res.plot()
+                
+            _, buffer = cv2.imencode('.jpg', frame)
+            yield (b'--frame\r\nContent-Type: image/jpeg\r\n\r\n' + buffer.tobytes() + b'\r\n')
+            
+            # Maintain native video speed without artificial slowdown
+            elapsed = time.time() - start_time
+            if elapsed < delay:
+                time.sleep(delay - elapsed)
+        cap.release()
+        
+    return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)

models/3dcnn_accident_model.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e5d1d4af597a3ad658d32cfabac0f9a1446f9af63d31ada359f74f786dd97c89
+size 132753611

models/ensemble_svm_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d778d6f7d784e3ab0e2cd84094be07c680e764dcca06f1a23800733074b8a1ca
+size 1987831

models/traffic_predictor.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f8aa5d74bd6e651abd8ad38610f1ade837db406e2c016d7a960adb77d1e9cd9c
+size 29778

models/yolov8_accident_model.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4029939bb86ecee593cf0444fce12c7002859a7d9d90a67171fec6d87772531a
+size 31690272

requirements.txt

@@ -0,0 +1,15 @@
+Flask
+werkzeug
+numpy
+pandas
+requests
+Pillow
+opencv-python-headless
+torch
+torchvision
+scikit-learn
+joblib
+ultralytics
+easyocr
+tqdm
+gunicorn

templates/index.html

@@ -0,0 +1,1106 @@
+<!DOCTYPE html>
+<html lang="en" class="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CrashVision AI - Accident Detection</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['-apple-system', 'BlinkMacSystemFont', 'San Francisco', 'Inter', 'sans-serif'],
+                    },
+                    animation: {
+                        'blob': 'blob 10s infinite',
+                        'pulse-glow': 'pulse-glow 3s infinite',
+                    },
+                    keyframes: {
+                        blob: {
+                            '0%': { transform: 'translate(0px, 0px) scale(1)' },
+                            '33%': { transform: 'translate(40px, -60px) scale(1.2)' },
+                            '66%': { transform: 'translate(-30px, 30px) scale(0.8)' },
+                            '100%': { transform: 'translate(0px, 0px) scale(1)' },
+                        },
+                        'pulse-glow': {
+                            '0%, 100%': { opacity: 0.6, transform: 'scale(1)' },
+                            '50%': { opacity: 1, transform: 'scale(1.05)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            background-color: #F4F4F9; 
+            -webkit-font-smoothing: antialiased;
+            transition: background-color 0.5s ease, background-image 0.5s ease;
+        }
+        .dark body {
+            background-color: #151518;
+            background-image: linear-gradient(135deg, #151518 0%, #2a1f3d 50%, #101012 100%);
+            background-attachment: fixed;
+        }
+        
+        /* New class to copy body background onto the predictive modal overlay */
+        .modal-bg {
+            background-color: #F4F4F9;
+        }
+        .dark .modal-bg {
+            background-color: #151518;
+            background-image: linear-gradient(135deg, #151518 0%, #2a1f3d 50%, #101012 100%);
+            background-attachment: fixed;
+        }
+
+        .ios-glass {
+            background: rgba(255, 255, 255, 0.45); 
+            backdrop-filter: blur(40px) saturate(200%);
+            -webkit-backdrop-filter: blur(40px) saturate(200%);
+            border: 1.5px solid rgba(255, 255, 255, 0.9); 
+            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 8px 32px rgba(0, 0, 0, 0.08); 
+            transition: all 0.5s ease;
+        }
+        .dark .ios-glass {
+            background: rgba(20, 20, 25, 0.35); 
+            border: 1px solid rgba(255, 255, 255, 0.15); 
+            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.6); 
+            backdrop-filter: blur(40px) saturate(200%);
+            -webkit-backdrop-filter: blur(40px) saturate(200%);
+        }
+        .ios-glass-inner {
+            background: rgba(255, 255, 255, 0.5);
+            border: 1px solid rgba(255, 255, 255, 0.8);
+            transition: all 0.5s ease;
+        }
+        .dark .ios-glass-inner {
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+        }
+        .bg-mesh {
+            background-size: 40px 40px;
+            background-image: 
+                linear-gradient(to right, rgba(100, 100, 150, 0.06) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(100, 100, 150, 0.06) 1px, transparent 1px);
+        }
+        .dark .bg-mesh {
+            background-image: 
+                linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+        }
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.5); border-radius: 10px; }
+        .dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
+        
+        /* Custom input styling for the prediction form */
+        .predict-input {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border-radius: 0.75rem;
+            font-size: 0.875rem;
+            font-weight: 600;
+            outline: none;
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body class="relative min-h-screen transition-colors duration-500 overflow-x-hidden">
+
+    <!-- Background Effects -->
+    <div class="fixed inset-0 z-0 bg-mesh pointer-events-none"></div>
+    <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
+        <div class="absolute top-[5%] left-[10%] w-[35rem] h-[35rem] bg-indigo-400 dark:bg-purple-500/30 rounded-full mix-blend-multiply dark:mix-blend-screen filter blur-[120px] dark:blur-[140px] opacity-20 dark:opacity-30 animate-blob"></div>
+        <div class="absolute top-[20%] right-[10%] w-[30rem] h-[30rem] bg-fuchsia-300 dark:bg-indigo-500/20 rounded-full mix-blend-multiply dark:mix-blend-screen filter blur-[120px] opacity-20 dark:opacity-25 animate-blob" style="animation-delay: 2s"></div>
+        <div class="absolute bottom-[10%] left-[25%] w-[35rem] h-[35rem] bg-blue-300 dark:bg-fuchsia-500/20 rounded-full mix-blend-multiply dark:mix-blend-screen filter blur-[120px] dark:blur-[140px] opacity-20 dark:opacity-30 animate-blob" style="animation-delay: 4s"></div>
+    </div>
+
+    <!-- Theme Toggle (Elevated z-index to stay above modals) -->
+    <div class="fixed top-6 right-6 sm:top-8 sm:right-8 z-[70]">
+        <button id="themeToggle" class="w-10 h-10 rounded-full flex items-center justify-center hover:scale-105 active:scale-95 transition-all shadow-sm text-indigo-900 dark:text-purple-100 cursor-pointer bg-white/30 dark:bg-white/10 backdrop-blur-xl border border-white/40 dark:border-white/20">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 hidden dark:block drop-shadow-md" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-2.25l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+            </svg>
+        </button>
+    </div>
+
+    <!-- Emergency Dispatch Banner -->
+    <div id="emergencyBanner" class="hidden fixed top-0 left-0 w-full bg-red-600 text-white py-3 px-4 z-50 flex items-center justify-center gap-4 animate-pulse shadow-lg shadow-red-500/50">
+        <i class="fas fa-exclamation-triangle text-xl"></i>
+        <span class="font-black uppercase tracking-widest text-sm sm:text-base">Major Collision Detected. Automated SOS Dispatched to Emergency Services.</span>
+        <i class="fas fa-exclamation-triangle text-xl"></i>
+    </div>
+
+    <header class="relative z-40 pt-8 sm:pt-16 pb-4 sm:pb-8 flex flex-col items-center justify-center mt-2 sm:mt-6">
+        <div class="mb-3 sm:mb-5 flex items-center justify-center group transition-all duration-500 hover:scale-110 drop-shadow-xl">
+            <svg class="w-12 h-12 sm:w-16 sm:h-16 z-10 text-indigo-700 dark:text-purple-400 transition-colors duration-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 22L9 8H15L21 22" stroke-width="1.5" />
+                <path d="M12 22V17M12 13V11M12 9V8" stroke-width="1.5" />
+                <path d="M9.5 16L10.5 13H13.5L14.5 16V17.5H9.5V16Z" stroke-width="1.5" fill="currentColor" fill-opacity="0.1" />
+                <path d="M10.5 13L11 10.5H13L13.5 13" stroke-width="1.5" />
+                <path d="M8 9H6V11" stroke-width="2" />
+                <path d="M16 9H18V11" stroke-width="2" />
+                <path d="M8 19H6V17" stroke-width="2" />
+                <path d="M16 19H18V17" stroke-width="2" />
+                <circle cx="12" cy="14" r="1.5" fill="currentColor" stroke="none" class="animate-pulse" />
+            </svg>
+        </div>
+        
+        <div class="text-center">
+            <h1 class="text-3xl sm:text-5xl font-black tracking-tight leading-tight text-indigo-700 dark:text-purple-400 drop-shadow-sm transition-colors duration-500">
+                CrashVision AI
+            </h1>
+            <span class="text-[9px] sm:text-xs text-indigo-800/60 dark:text-purple-200 font-black tracking-[0.4em] uppercase mt-2 sm:mt-3 block opacity-90 transition-colors duration-500">
+                Road Safety Analytics
+            </span>
+        </div>
+    </header>
+
+    <main class="relative z-10 container mx-auto pb-12 px-4 sm:px-6 lg:px-8 max-w-6xl">
+
+        <div class="w-full transition-all duration-500">
+            
+            <!-- SECTION 1: HOME AREA (Upload + Risk Island) -->
+            <div id="uploadSection" class="flex flex-col gap-6">
+                
+                <!-- Incident Analysis Island (Video/IP) -->
+                <div class="ios-glass rounded-[32px] sm:rounded-[40px] p-6 sm:p-10 md:p-16 text-center shadow-lg">
+                    <div class="max-w-3xl mx-auto">
+                        <h2 class="text-2xl sm:text-3xl font-extrabold mb-2 sm:mb-4 tracking-tight text-indigo-950 dark:text-white">
+                            Incident Analysis
+                        </h2>
+                        <p class="text-indigo-800/60 dark:text-purple-100 mb-6 sm:mb-10 text-xs sm:text-base leading-relaxed font-semibold">
+                            Input surveillance streams or connect a live IP camera.
+                        </p>
+                        
+                        <div class="grid grid-cols-2 gap-3 sm:gap-6 justify-center">
+                            <!-- IP Camera / Stream -->
+                            <div class="relative group cursor-pointer h-full" onclick="openIpCamModal()">
+                                <div class="block w-full h-full p-4 sm:p-10 border-2 border-dashed border-rose-400/30 dark:border-rose-400/40 rounded-[20px] sm:rounded-[32px] ios-glass-inner hover:bg-rose-50/70 dark:hover:bg-rose-900/20 transition-all group-hover:border-rose-500/50 dark:group-hover:border-rose-400/60 flex flex-col items-center justify-center">
+                                    <div class="w-12 h-12 sm:w-20 sm:h-20 bg-rose-50 dark:bg-rose-500/20 rounded-[14px] sm:rounded-3xl flex items-center justify-center mb-2 sm:mb-4 group-hover:scale-110 transition-transform duration-500 shadow-sm border border-rose-100 dark:border-rose-400/30">
+                                        <i class="fas fa-satellite-dish text-xl sm:text-3xl text-rose-600 dark:text-rose-300"></i>
+                                    </div>
+                                    <span class="block text-sm sm:text-xl font-black text-rose-900 dark:text-rose-100 mb-0 sm:mb-1 leading-tight">Live IP</span>
+                                    <span class="block text-[9px] sm:text-xs text-rose-600/60 dark:text-rose-300 font-bold uppercase tracking-widest hidden sm:block">Connect RTSP</span>
+                                </div>
+                            </div>
+
+                            <!-- File Upload -->
+                            <form id="uploadForm" class="relative group cursor-pointer h-full">
+                                <input type="file" id="fileInput" name="file" accept="image/png, image/jpeg, image/jpg, video/mp4" class="hidden">
+                                <label for="fileInput" class="block w-full h-full p-4 sm:p-10 border-2 border-dashed border-indigo-400/30 dark:border-purple-400/40 rounded-[20px] sm:rounded-[32px] ios-glass-inner hover:bg-white/70 dark:hover:bg-white/5 transition-all cursor-pointer group-hover:border-indigo-500/50 dark:group-hover:border-purple-300/60 flex flex-col items-center justify-center">
+                                    <div class="w-12 h-12 sm:w-20 sm:h-20 bg-indigo-50 dark:bg-white/10 rounded-[14px] sm:rounded-3xl flex items-center justify-center mb-2 sm:mb-4 group-hover:scale-110 transition-transform duration-500 shadow-sm border border-indigo-100 dark:border-white/20">
+                                        <i class="fas fa-arrow-up-from-bracket text-xl sm:text-3xl text-indigo-600 dark:text-purple-200"></i>
+                                    </div>
+                                    <span class="block text-sm sm:text-xl font-black text-indigo-900 dark:text-white mb-0 sm:mb-1 leading-tight">Select Media</span>
+                                    <span class="block text-[9px] sm:text-xs text-indigo-600/60 dark:text-purple-200 font-bold uppercase tracking-widest hidden sm:block">MP4 • JPEG • PNG</span>
+                                </label>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- NEW: Traffic Risk Predictor Small Clickable Island -->
+                <div class="relative group cursor-pointer mt-2 mb-2" onclick="openPredictModal()">
+                    <div class="ios-glass p-5 sm:p-6 rounded-[32px] hover:-translate-y-1 transition-transform duration-300 shadow-sm border border-cyan-400/30 hover:border-cyan-500/50 dark:border-cyan-500/20 dark:hover:border-cyan-400/40 flex items-center justify-between bg-gradient-to-r from-transparent to-cyan-50/30 dark:to-cyan-900/10">
+                        <div class="flex items-center gap-5">
+                            <div class="w-14 h-14 rounded-2xl bg-cyan-100 dark:bg-cyan-500/20 flex items-center justify-center shadow-sm group-hover:scale-110 transition-transform duration-300 border border-cyan-200/50 dark:border-cyan-400/30">
+                                <i class="fas fa-chart-line text-cyan-600 dark:text-cyan-300 text-2xl"></i>
+                            </div>
+                            <div class="text-left">
+                                <h3 class="text-lg sm:text-xl font-black tracking-tight text-indigo-950 dark:text-white mb-0">Traffic Risk Predictor</h3>
+                                <p class="text-[9px] sm:text-[10px] font-bold text-indigo-800/60 dark:text-purple-200 uppercase tracking-widest mt-1">Run Tabular AI Simulations</p>
+                            </div>
+                        </div>
+                        <div class="w-10 h-10 rounded-full bg-indigo-900/5 dark:bg-white/5 flex items-center justify-center group-hover:bg-cyan-100 dark:group-hover:bg-cyan-500/30 transition-colors">
+                            <i class="fas fa-arrow-right text-indigo-400 dark:text-purple-300 group-hover:text-cyan-600 dark:group-hover:text-cyan-100 text-sm"></i>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 3 Columns Architecture Features -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
+                    <div class="ios-glass p-6 rounded-[32px] hover:-translate-y-1 transition-transform duration-300 shadow-sm cursor-default">
+                        <div class="w-12 h-12 rounded-2xl bg-indigo-100 dark:bg-white/10 flex items-center justify-center mb-5 border border-indigo-200/50 dark:border-white/10 shadow-sm">
+                            <i class="fas fa-eye text-indigo-600 dark:text-purple-300 text-xl"></i>
+                        </div>
+                        <h4 class="text-sm font-black uppercase tracking-wider text-indigo-950 dark:text-purple-50 mb-2">Spatial Engine</h4>
+                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">YOLOv8 Medium with XAI bounding boxes.</p>
+                    </div>
+                    <div class="ios-glass p-6 rounded-[32px] hover:-translate-y-1 transition-transform duration-300 shadow-sm cursor-default">
+                        <div class="w-12 h-12 rounded-2xl bg-fuchsia-100 dark:bg-white/10 flex items-center justify-center mb-5 border border-fuchsia-200/50 dark:border-white/10 shadow-sm">
+                            <i class="fas fa-layer-group text-fuchsia-600 dark:text-fuchsia-300 text-xl"></i>
+                        </div>
+                        <h4 class="text-sm font-black uppercase tracking-wider text-indigo-950 dark:text-purple-50 mb-2">Temporal Engine</h4>
+                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">3D-CNN models physical motion.</p>
+                    </div>
+                    <div class="ios-glass p-6 rounded-[32px] hover:-translate-y-1 transition-transform duration-300 shadow-sm cursor-default">
+                        <div class="w-12 h-12 rounded-2xl bg-rose-100 dark:bg-white/10 flex items-center justify-center mb-5 border border-rose-200/50 dark:border-white/10 shadow-sm">
+                            <i class="fas fa-bolt text-rose-600 dark:text-rose-300 text-xl"></i>
+                        </div>
+                        <h4 class="text-sm font-black uppercase tracking-wider text-indigo-950 dark:text-purple-50 mb-2">Automated SOS</h4>
+                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">Dispatch triggered by SVM Ensemble.</p>
+                    </div>
+                </div>
+
+            </div>
+
+            <!-- SECTION 2: LOADING -->
+            <div id="loading" class="hidden ios-glass rounded-[40px] p-24 text-center shadow-xl">
+                <div class="relative w-28 h-28 mx-auto mb-10">
+                    <div class="absolute inset-0 border-[4px] border-indigo-200/50 dark:border-white/20 rounded-full"></div>
+                    <div class="absolute inset-0 border-[4px] border-t-transparent border-l-transparent border-indigo-600 dark:border-purple-300 rounded-full animate-spin dark:shadow-[0_0_15px_var(--purple-300)]"></div>
+                    <div class="absolute inset-4 bg-white/50 dark:bg-white/10 rounded-full backdrop-blur-xl flex items-center justify-center border border-white/40 dark:border-white/20">
+                        <i id="loadingIcon" class="fas fa-brain text-2xl text-indigo-600 dark:text-fuchsia-300 animate-pulse"></i>
+                    </div>
+                </div>
+                <h3 id="loadingText" class="text-2xl font-black mb-3 tracking-tight text-indigo-950 dark:text-white">Synchronizing AI Layers</h3>
+                <p id="loadingSub" class="text-indigo-800/60 dark:text-purple-200 animate-pulse text-sm font-black uppercase tracking-widest">Weighted Ensemble Inference...</p>
+            </div>
+
+            <!-- SECTION 3: RESULTS DASHBOARD (Visual Detection) -->
+            <div id="results" class="hidden ios-glass rounded-[40px] overflow-hidden shadow-2xl">
+                <div class="grid grid-cols-1 lg:grid-cols-12 gap-0">
+                    
+                    <!-- Left: Media View -->
+                    <div class="lg:col-span-7 p-8 md:p-12 border-b lg:border-b-0 lg:border-r border-indigo-200/50 dark:border-white/10">
+                        <div class="flex justify-between items-center mb-6">
+                            <h3 class="text-xs font-black uppercase tracking-[0.3em] text-indigo-800/50 dark:text-purple-200">XAI Analytics Feed</h3>
+                            <span class="px-4 py-1.5 text-[10px] font-black uppercase tracking-widest bg-white/60 dark:bg-white/10 rounded-full text-indigo-900 dark:text-white border border-indigo-200/50 dark:border-white/20 shadow-sm">Channel: CV-PRIME</span>
+                        </div>
+                        
+                        <!-- Interactive Media Player Area -->
+                        <div class="rounded-[32px] overflow-hidden shadow-2xl border border-white/50 dark:border-white/20 relative bg-black aspect-video flex items-center justify-center group">
+                            <!-- Display Image -->
+                            <img id="previewImg" src="" class="w-full h-full object-contain z-10 hidden" alt="Detection View">
+                            <!-- Standard Video Player -->
+                            <video id="previewVideo" controls class="w-full h-full object-contain hidden z-10 bg-black"></video>
+
+                            <!-- Live Tag -->
+                            <div class="absolute top-6 left-6 z-20">
+                                <span id="liveBadge" class="bg-black/60 backdrop-blur-xl text-white text-[10px] px-3 py-1.5 rounded-xl font-black uppercase tracking-widest border border-white/20 flex items-center gap-2">
+                                    <span class="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_8px_red]"></span> XAI SNAPSHOT
+                                </span>
+                            </div>
+                        </div>
+
+                        <!-- Media Controls (Moved completely underneath the video) -->
+                        <div id="mediaControls" class="flex justify-center gap-4 mt-6 hidden">
+                            <button onclick="showSnapshot()" class="px-5 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-indigo-900 dark:text-white bg-white/50 dark:bg-white/10 border border-indigo-200/50 dark:border-white/20 hover:scale-105 transition-transform shadow-sm flex items-center gap-2">
+                                <i class="fas fa-camera"></i> Snapshot
+                            </button>
+                            <button onclick="playTracking()" class="px-5 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-white hover:bg-rose-500/80 transition-all bg-rose-600 shadow-lg shadow-rose-500/50 flex items-center gap-2">
+                                <i class="fas fa-brain"></i> AI Tracking
+                            </button>
+                            <button onclick="playOriginal()" class="px-5 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-indigo-900 dark:text-white bg-white/50 dark:bg-white/10 border border-indigo-200/50 dark:border-white/20 hover:scale-105 transition-transform shadow-sm flex items-center gap-2">
+                                <i class="fas fa-play"></i> Original
+                            </button>
+                        </div>
+
+                        <div class="grid grid-cols-3 gap-5 mt-10">
+                            <div class="ios-glass-inner p-5 rounded-3xl flex flex-col items-center text-center gap-1 hover:bg-white/60 dark:hover:bg-white/10 transition-colors">
+                                <i class="fas fa-location-dot text-rose-500 text-xl mb-2"></i>
+                                <p class="text-[9px] uppercase tracking-widest text-indigo-800/50 dark:text-purple-200 font-black">Location</p>
+                                <p id="realLocation" class="text-xs font-black text-indigo-950 dark:text-white truncate w-full tracking-tight text-center px-1">Detecting...</p>
+                            </div>
+                            <div class="ios-glass-inner p-5 rounded-3xl flex flex-col items-center text-center gap-1 hover:bg-white/60 dark:hover:bg-white/10 transition-colors">
+                                <i class="fas fa-cloud-bolt text-cyan-500 text-xl mb-2"></i>
+                                <p class="text-[9px] uppercase tracking-widest text-indigo-800/50 dark:text-purple-200 font-black">Conditions</p>
+                                <p id="realWeather" class="text-xs font-black text-indigo-950 dark:text-white truncate w-full tracking-tight text-center">Detecting...</p>
+                            </div>
+                            <div class="ios-glass-inner p-5 rounded-3xl flex flex-col items-center text-center gap-1 hover:bg-white/60 dark:hover:bg-white/10 transition-colors">
+                                <i class="fas fa-stopwatch text-indigo-500 dark:text-purple-300 text-xl mb-2"></i>
+                                <p class="text-[9px] uppercase tracking-widest text-indigo-800/50 dark:text-purple-200 font-black">Timeline</p>
+                                <p id="realTime" class="text-xs font-black text-indigo-950 dark:text-white truncate w-full tracking-tight text-center">--</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Right: AI Diagnostics -->
+                    <div class="lg:col-span-5 p-8 md:p-12 bg-white/20 dark:bg-black/20 flex flex-col justify-between relative">
+                        <div>
+                            <h3 class="text-xs font-black uppercase tracking-[0.3em] text-indigo-800/50 dark:text-purple-200 mb-8">AI Diagnostics</h3>
+                            
+                            <div id="statusCard" class="ios-glass-inner p-8 rounded-[32px] mb-8 shadow-sm dark:shadow-lg relative overflow-hidden">
+                                <div id="statusLine" class="absolute top-0 left-0 w-2 h-full bg-indigo-500 dark:bg-purple-400"></div>
+                                
+                                <div class="flex items-start justify-between pl-2">
+                                    <div>
+                                        <div id="statusBadge" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl text-[10px] font-black mb-4 uppercase tracking-[0.2em] border border-indigo-200/50 dark:border-white/20 shadow-sm bg-white/60 dark:bg-white/10 text-indigo-900 dark:text-white">
+                                            <i id="statusIcon" class="fas"></i>
+                                            <span id="labelText">Scanning...</span>
+                                        </div>
+                                        <h4 class="text-5xl font-black tracking-tighter text-indigo-950 dark:text-white mb-1"><span id="confidenceValue">0</span>%</h4>
+                                        <p class="text-indigo-800/60 dark:text-purple-200 text-[10px] font-black uppercase tracking-widest">Ensemble Confidence</p>
+                                    </div>
+                                    <div id="severityContainer" class="text-center bg-white dark:bg-white/10 px-4 py-3 rounded-2xl shadow-sm border border-indigo-100 dark:border-white/20 hidden">
+                                        <span class="block text-[9px] uppercase tracking-widest text-indigo-500 dark:text-fuchsia-300 font-black mb-1">Severity</span>
+                                        <span id="severityLevel" class="font-black text-sm uppercase">--</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="space-y-7 mb-10">
+                                <div>
+                                    <div class="flex justify-between items-end mb-3">
+                                        <span class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-50 flex items-center gap-3">
+                                            <div class="w-8 h-8 rounded-xl bg-white/60 dark:bg-white/10 flex items-center justify-center border border-indigo-200/50 dark:border-white/20 shadow-sm">
+                                                <i class="fas fa-car-side text-indigo-600 dark:text-fuchsia-300 text-xs"></i>
+                                            </div>
+                                            ALPR (License Plates)
+                                        </span>
+                                    </div>
+                                    <div id="alprContainer" class="w-full bg-indigo-50 dark:bg-white/5 rounded-2xl p-4 border border-indigo-100 dark:border-white/10 flex flex-wrap gap-2 shadow-inner">
+                                        <span class="text-xs font-black text-indigo-900 dark:text-white">Scanning...</span>
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <div class="flex justify-between items-end mb-3">
+                                        <span class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-50 flex items-center gap-3">
+                                            <div class="w-8 h-8 rounded-xl bg-white/60 dark:bg-white/10 flex items-center justify-center border border-indigo-200/50 dark:border-white/20 shadow-sm">
+                                                <i class="fas fa-layer-group text-indigo-600 dark:text-fuchsia-300 text-xs"></i>
+                                            </div>
+                                            Temporal (3D-CNN)
+                                        </span>
+                                        <span id="slowfastScore" class="font-black text-sm text-indigo-900 dark:text-white">--%</span>
+                                    </div>
+                                    <div class="w-full bg-indigo-200/50 dark:bg-white/20 rounded-full h-3 overflow-hidden border border-white/40 dark:border-white/10">
+                                        <div id="slowfastBar" class="bg-gradient-to-r from-indigo-500 to-fuchsia-500 dark:from-purple-500 dark:to-fuchsia-400 h-full rounded-full transition-all duration-1000 ease-out shadow-sm" style="width: 0%"></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="flex justify-between items-end mb-3">
+                                        <span class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-50 flex items-center gap-3">
+                                            <div class="w-8 h-8 rounded-xl bg-white/60 dark:bg-white/10 flex items-center justify-center border border-indigo-200/50 dark:border-white/20 shadow-sm">
+                                                <i class="fas fa-crosshairs text-amber-600 dark:text-amber-400 text-xs"></i>
+                                            </div>
+                                            Spatial (YOLOv8 Max)
+                                        </span>
+                                        <span id="yoloScore" class="font-black text-sm text-indigo-900 dark:text-white">--%</span>
+                                    </div>
+                                    <div class="w-full bg-indigo-200/50 dark:bg-white/20 rounded-full h-3 overflow-hidden border border-white/40 dark:border-white/10">
+                                        <div id="yoloBar" class="bg-gradient-to-r from-amber-400 to-orange-500 dark:from-fuchsia-400 dark:to-orange-400 h-full rounded-full transition-all duration-1000 ease-out shadow-sm" style="width: 0%"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mt-8 flex gap-4">
+                            <button onclick="resetApp()" class="flex-1 py-4 px-6 bg-indigo-950 dark:bg-purple-600 text-white rounded-2xl font-black uppercase tracking-widest transition-all active:scale-95 text-xs flex justify-center items-center gap-3 shadow-xl dark:shadow-purple-500/40 hover:opacity-90 dark:hover:bg-purple-500">
+                                <i class="fas fa-plus text-white"></i> New Scan
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- IP Camera Modal -->
+    <div id="ipCamModal" class="hidden fixed inset-0 z-[60] flex items-center justify-center bg-indigo-950/60 dark:bg-black/80 backdrop-blur-md p-4">
+        <div class="ios-glass p-8 rounded-[32px] max-w-md w-full shadow-2xl relative">
+            <h3 class="text-2xl font-black text-indigo-950 dark:text-white mb-2">Connect IP Camera</h3>
+            <p class="text-sm font-bold text-indigo-800/60 dark:text-purple-200 mb-6">Enter the RTSP or HTTP stream URL for your surveillance camera.</p>
+            
+            <input type="text" id="ipCamUrl" placeholder="e.g., http://192.168.1.5:8080/video" class="w-full px-5 py-4 rounded-xl border border-indigo-200 dark:border-white/20 bg-white/50 dark:bg-white/5 text-indigo-900 dark:text-white font-semibold outline-none focus:border-indigo-500 dark:focus:border-purple-400 mb-6 placeholder-indigo-300 dark:placeholder-white/30">
+            
+            <div class="flex gap-4">
+                <button onclick="closeIpCamModal()" class="flex-1 py-3 rounded-xl font-black uppercase tracking-widest text-xs bg-white dark:bg-white/10 text-indigo-900 dark:text-white border border-indigo-200 dark:border-white/20 shadow-sm hover:bg-gray-50 dark:hover:bg-white/20 transition-all">Cancel</button>
+                <button onclick="connectIpCam()" class="flex-1 py-3 rounded-xl font-black uppercase tracking-widest text-xs bg-rose-600 text-white shadow-lg shadow-rose-500/30 hover:bg-rose-500 transition-all">Connect</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Predictive Analysis Form Modal (Overlay Screen) -->
+    <div id="predictiveModal" class="hidden fixed inset-0 z-[60] modal-bg overflow-y-auto transition-colors duration-500">
+        
+        <!-- Background Mesh & Animated Blobs to match Theme -->
+        <div class="fixed inset-0 z-0 bg-mesh pointer-events-none"></div>
+        <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
+            <div class="absolute top-[10%] left-[20%] w-[35rem] h-[35rem] bg-cyan-400 dark:bg-cyan-500/20 rounded-full mix-blend-multiply dark:mix-blend-screen filter blur-[120px] dark:blur-[140px] opacity-20 dark:opacity-30 animate-blob"></div>
+            <div class="absolute bottom-[20%] right-[10%] w-[30rem] h-[30rem] bg-indigo-300 dark:bg-indigo-500/20 rounded-full mix-blend-multiply dark:mix-blend-screen filter blur-[120px] opacity-20 dark:opacity-25 animate-blob" style="animation-delay: 2s"></div>
+        </div>
+
+        <!-- Back Button (Top Left) -->
+        <button onclick="closePredictModal()" class="fixed top-6 left-6 sm:top-8 sm:left-8 z-[70] w-10 h-10 rounded-full flex items-center justify-center hover:scale-105 active:scale-95 transition-all shadow-sm text-indigo-900 dark:text-purple-100 cursor-pointer bg-white/30 dark:bg-white/10 backdrop-blur-xl border border-white/40 dark:border-white/20">
+            <i class="fas fa-arrow-left text-sm"></i>
+        </button>
+
+        <!-- Main Content Wrapper -->
+        <div class="relative z-10 min-h-screen flex flex-col">
+            
+            <!-- Header (Text Outside the Island) -->
+            <div class="pt-20 sm:pt-24 pb-8 px-4 flex flex-col items-center justify-center text-center">
+                <div class="mb-4 sm:mb-6 flex items-center justify-center group transition-all duration-500 hover:scale-110 drop-shadow-xl">
+                    <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl bg-cyan-100 dark:bg-cyan-500/20 flex items-center justify-center border border-cyan-200/50 dark:border-cyan-400/30 shadow-sm relative overflow-hidden">
+                        <i class="fas fa-chart-line text-cyan-600 dark:text-cyan-300 text-2xl sm:text-3xl z-10"></i>
+                    </div>
+                </div>
+                <h2 class="text-3xl sm:text-4xl font-black tracking-tight text-indigo-950 dark:text-white mb-3">Traffic Risk Predictor</h2>
+                <p class="text-indigo-800/60 dark:text-purple-200 text-xs sm:text-sm font-semibold max-w-xl mx-auto px-4">
+                    Predict the probability of an accident using our trained Tabular AI model. Adjust the parameters below to run a simulation.
+                </p>
+            </div>
+
+            <!-- Island Container (Smaller: max-w-4xl) -->
+            <div class="container mx-auto px-4 pb-16 max-w-4xl flex-grow">
+                <div class="ios-glass p-6 sm:p-10 rounded-[32px] sm:rounded-[40px] shadow-2xl w-full">
+                    
+                    <!-- Form View -->
+                    <div id="predictiveFormView">
+                        <form id="tabularForm" onsubmit="submitPredictiveData(event)">
+                            <!-- Restructured Grid: 2 Columns for 4 sections -->
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+                                
+                                <!-- Group 1: Environment Island -->
+                                <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
+                                    <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3">
+                                        <div class="w-8 h-8 rounded-xl bg-cyan-100 dark:bg-cyan-500/20 flex items-center justify-center border border-cyan-200/50 dark:border-cyan-400/30 group-hover:scale-110 transition-transform">
+                                            <i class="fas fa-cloud-sun text-cyan-600 dark:text-cyan-300 text-xs"></i>
+                                        </div>
+                                        <h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Conditions</h4>
+                                    </div>
+                                    <div class="space-y-4">
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Weather</label>
+                                            <select id="tab_weather" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 shadow-sm cursor-pointer">
+                                                <option value="">Unknown / Leave Blank</option>
+                                                <option value="Clear">Clear</option>
+                                                <option value="Rainy">Rainy</option>
+                                                <option value="Foggy">Foggy</option>
+                                                <option value="Snowy">Snowy</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Light Cond.</label>
+                                            <select id="tab_light" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 shadow-sm cursor-pointer">
+                                                <option value="">Unknown / Leave Blank</option>
+                                                <option value="Daylight">Daylight</option>
+                                                <option value="Artificial Light">Artificial Light</option>
+                                                <option value="No Light">No Light</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Time of Day</label>
+                                            <select id="tab_time" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 shadow-sm cursor-pointer">
+                                                <option value="">Unknown / Leave Blank</option>
+                                                <option value="Morning">Morning</option>
+                                                <option value="Afternoon">Afternoon</option>
+                                                <option value="Evening">Evening</option>
+                                                <option value="Night">Night</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Group 2: Road Specs Island -->
+                                <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
+                                    <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3">
+                                        <div class="w-8 h-8 rounded-xl bg-rose-100 dark:bg-rose-500/20 flex items-center justify-center border border-rose-200/50 dark:border-rose-400/30 group-hover:scale-110 transition-transform">
+                                            <i class="fas fa-road text-rose-600 dark:text-rose-300 text-xs"></i>
+                                        </div>
+                                        <h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Road Specs</h4>
+                                    </div>
+                                    <div class="space-y-4">
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Road Type</label>
+                                            <select id="tab_road_type" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20 shadow-sm cursor-pointer">
+                                                <option value="">Unknown / Leave Blank</option>
+                                                <option value="City Road">City Road</option>
+                                                <option value="Highway">Highway</option>
+                                                <option value="Rural Road">Rural Road</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Surface</label>
+                                            <select id="tab_road_cond" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20 shadow-sm cursor-pointer">
+                                                <option value="">Unknown / Leave Blank</option>
+                                                <option value="Dry">Dry</option>
+                                                <option value="Wet">Wet</option>
+                                                <option value="Icy">Icy</option>
+                                                <option value="Under Construction">Under Construction</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Speed Limit</label>
+                                            <input type="number" id="tab_speed" placeholder="e.g. 60" min="10" max="250" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20 shadow-sm">
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Group 3: Traffic Details Island -->
+                                <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
+                                    <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3">
+                                        <div class="w-8 h-8 rounded-xl bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center border border-amber-200/50 dark:border-amber-400/30 group-hover:scale-110 transition-transform">
+                                            <i class="fas fa-car-side text-amber-600 dark:text-amber-300 text-xs"></i>
+                                        </div>
+                                        <h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Traffic Data</h4>
+                                    </div>
+                                    <div class="space-y-4">
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Density (0-5)</label>
+                                            <input type="number" id="tab_density" placeholder="e.g. 2" min="0" max="5" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicles Inv.</label>
+                                            <input type="number" id="tab_vehicles" placeholder="e.g. 2" min="1" max="20" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicle Type</label>
+                                            <select id="tab_vehicle" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm cursor-pointer">
+                                                <option value="">Unknown / Leave Blank</option>
+                                                <option value="Car">Car</option>
+                                                <option value="Truck">Truck</option>
+                                                <option value="Bus">Bus</option>
+                                                <option value="Motorcycle">Motorcycle</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Group 4: Driver Metrics Island -->
+                                <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
+                                    <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3">
+                                        <div class="w-8 h-8 rounded-xl bg-fuchsia-100 dark:bg-fuchsia-500/20 flex items-center justify-center border border-fuchsia-200/50 dark:border-fuchsia-400/30 group-hover:scale-110 transition-transform">
+                                            <i class="fas fa-user text-fuchsia-600 dark:text-fuchsia-300 text-xs"></i>
+                                        </div>
+                                        <h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Driver Profile</h4>
+                                    </div>
+                                    <div class="space-y-4">
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Driver Age</label>
+                                            <input type="number" id="tab_age" placeholder="e.g. 35" min="16" max="99" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Experience (Yrs)</label>
+                                            <input type="number" id="tab_exp" placeholder="e.g. 10" min="0" max="80" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Alcohol Lvl (0-1)</label>
+                                            <input type="number" id="tab_alcohol" placeholder="e.g. 0.0" step="0.1" min="0" max="1" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Group 2: Road Specs Island -->
+                                <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
+                                    <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3">
+                                        <div class="w-8 h-8 rounded-xl bg-rose-100 dark:bg-rose-500/20 flex items-center justify-center border border-rose-200/50 dark:border-rose-400/30 group-hover:scale-110 transition-transform">
+                                            <i class="fas fa-road text-rose-600 dark:text-rose-300 text-xs"></i>
+                                        </div>
+                                        <h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Road Specs</h4>
+                                    </div>
+                                    <div class="space-y-4">
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Road Type</label>
+                                            <select id="tab_road_type" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20 shadow-sm cursor-pointer">
+                                                <option value="City Road">City Road</option>
+                                                <option value="Highway">Highway</option>
+                                                <option value="Rural Road">Rural Road</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Surface</label>
+                                            <select id="tab_road_cond" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20 shadow-sm cursor-pointer">
+                                                <option value="Dry">Dry</option>
+                                                <option value="Wet">Wet</option>
+                                                <option value="Icy">Icy</option>
+                                                <option value="Under Construction">Under Construction</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Speed Limit</label>
+                                            <input type="number" id="tab_speed" value="60" min="10" max="250" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20 shadow-sm">
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Group 3: Traffic Details Island -->
+                                <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
+                                    <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3">
+                                        <div class="w-8 h-8 rounded-xl bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center border border-amber-200/50 dark:border-amber-400/30 group-hover:scale-110 transition-transform">
+                                            <i class="fas fa-car-side text-amber-600 dark:text-amber-300 text-xs"></i>
+                                        </div>
+                                        <h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Traffic Data</h4>
+                                    </div>
+                                    <div class="space-y-4">
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Density (0-5)</label>
+                                            <input type="number" id="tab_density" value="2" min="0" max="5" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicles Inv.</label>
+                                            <input type="number" id="tab_vehicles" value="2" min="1" max="20" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicle Type</label>
+                                            <select id="tab_vehicle" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm cursor-pointer">
+                                                <option value="Car">Car</option>
+                                                <option value="Truck">Truck</option>
+                                                <option value="Bus">Bus</option>
+                                                <option value="Motorcycle">Motorcycle</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Group 4: Driver Metrics Island -->
+                                <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
+                                    <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3">
+                                        <div class="w-8 h-8 rounded-xl bg-fuchsia-100 dark:bg-fuchsia-500/20 flex items-center justify-center border border-fuchsia-200/50 dark:border-fuchsia-400/30 group-hover:scale-110 transition-transform">
+                                            <i class="fas fa-user text-fuchsia-600 dark:text-fuchsia-300 text-xs"></i>
+                                        </div>
+                                        <h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Driver Profile</h4>
+                                    </div>
+                                    <div class="space-y-4">
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Driver Age</label>
+                                            <input type="number" id="tab_age" value="35" min="16" max="99" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Experience (Yrs)</label>
+                                            <input type="number" id="tab_exp" value="10" min="0" max="80" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Alcohol Lvl (0-1)</label>
+                                            <input type="number" id="tab_alcohol" value="0.0" step="0.1" min="0" max="1" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                            </div>
+
+                            <!-- Submit Area -->
+                            <div class="mt-8 pt-6 border-t border-indigo-200/50 dark:border-white/10 flex justify-end">
+                                <button type="submit" id="predictBtn" class="w-full sm:w-auto px-8 py-4 rounded-2xl font-black uppercase tracking-widest text-xs bg-cyan-600 text-white shadow-lg shadow-cyan-500/40 hover:bg-cyan-500 active:scale-95 transition-all flex items-center justify-center gap-3">
+                                    <span>Run Risk Simulation</span>
+                                    <i id="predictSpinner" class="fas fa-circle-notch fa-spin hidden"></i>
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+
+                    <!-- Tabular Results View (Hidden by default) -->
+                    <div id="predictiveResultView" class="hidden text-center animate-fade-in py-6">
+                        <h3 class="text-xs font-black uppercase tracking-[0.3em] text-indigo-800/50 dark:text-purple-200 mb-6">Prediction Outcome</h3>
+                        
+                        <div class="flex flex-col items-center justify-center gap-6">
+                            <div id="riskStatusCard" class="ios-glass-inner p-10 rounded-[32px] shadow-sm dark:shadow-lg relative overflow-hidden w-full max-w-sm border border-indigo-200/50 dark:border-white/20">
+                                <div id="riskBadge" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-black mb-6 uppercase tracking-[0.2em] border shadow-sm">
+                                    <i id="riskIcon" class="fas fa-check-circle"></i>
+                                    <span id="riskLabelText">Low Risk</span>
+                                </div>
+                                
+                                <h4 class="text-7xl font-black tracking-tighter text-indigo-950 dark:text-white mb-2 drop-shadow-sm"><span id="riskProbabilityValue">0</span>%</h4>
+                                <p class="text-indigo-800/60 dark:text-purple-200 text-[10px] font-black uppercase tracking-widest mt-4">Calculated Accident Probability</p>
+                            </div>
+
+                            <div class="flex gap-4 max-w-sm w-full mt-4">
+                                <button onclick="resetPredictModal()" class="flex-1 py-4 px-6 bg-cyan-600 text-white rounded-2xl font-black uppercase tracking-widest transition-all active:scale-95 text-xs flex justify-center items-center gap-2 shadow-xl shadow-cyan-500/30 hover:bg-cyan-500">
+                                    <i class="fas fa-redo text-white"></i> Retry
+                                </button>
+                                <button onclick="closePredictModal()" class="flex-1 py-4 px-6 bg-indigo-950 dark:bg-white/10 text-white rounded-2xl font-black uppercase tracking-widest transition-all active:scale-95 text-xs flex justify-center items-center gap-2 shadow-xl hover:opacity-90 border border-indigo-200/50 dark:border-white/20">
+                                    Dashboard
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const themeToggleBtn = document.getElementById('themeToggle');
+        const htmlElement = document.documentElement;
+
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            htmlElement.classList.add('dark');
+        } else {
+            htmlElement.classList.remove('dark');
+        }
+
+        themeToggleBtn.addEventListener('click', () => {
+            htmlElement.classList.toggle('dark');
+            if (htmlElement.classList.contains('dark')) {
+                localStorage.theme = 'dark';
+            } else {
+                localStorage.theme = 'light';
+            }
+        });
+
+        let currentLocationStr = "Unknown Location";
+        
+        async function fetchRealLocationData() {
+            if ("geolocation" in navigator) {
+                navigator.geolocation.getCurrentPosition(async (position) => {
+                    const lat = position.coords.latitude;
+                    const lon = position.coords.longitude;
+                    
+                    try {
+                        const geoRes = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`);
+                        const geoData = await geoRes.json();
+                        const city = geoData.address.city || geoData.address.town || geoData.address.village || geoData.address.county || "Unknown Region";
+                        currentLocationStr = `${city}, ${geoData.address.country_code.toUpperCase()}`;
+                        document.getElementById('realLocation').innerText = currentLocationStr;
+                    } catch(e) { document.getElementById('realLocation').innerText = "Location API Error"; }
+
+                    try {
+                        const wxRes = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`);
+                        const wxData = await wxRes.json();
+                        const temp = wxData.current_weather.temperature;
+                        document.getElementById('realWeather').innerText = `${temp}°C, Active`;
+                    } catch(e) { document.getElementById('realWeather').innerText = "--"; }
+                }, (error) => {
+                    document.getElementById('realLocation').innerText = "Location Denied";
+                    document.getElementById('realWeather').innerText = "--";
+                });
+            } else {
+                document.getElementById('realLocation').innerText = "Not Supported";
+            }
+            const now = new Date();
+            document.getElementById('realTime').innerText = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});
+        }
+
+        fetchRealLocationData();
+
+        const fileInput = document.getElementById('fileInput');
+        const uploadSection = document.getElementById('uploadSection');
+        const resultsDiv = document.getElementById('results');
+        const loadingDiv = document.getElementById('loading');
+        const emergencyBanner = document.getElementById('emergencyBanner');
+        const ipCamModal = document.getElementById('ipCamModal');
+        const predictiveModal = document.getElementById('predictiveModal');
+
+        fileInput.addEventListener('change', () => {
+            if(fileInput.files.length > 0) {
+                handleUpload(fileInput.files[0]);
+            }
+        });
+
+        // --- IP Camera Modal Functions ---
+        function openIpCamModal() { ipCamModal.classList.remove('hidden'); }
+        function closeIpCamModal() {
+            ipCamModal.classList.add('hidden');
+            document.getElementById('ipCamUrl').value = '';
+        }
+
+        // --- Predictive Modal Functions ---
+        function openPredictModal() { 
+            predictiveModal.classList.remove('hidden'); 
+            resetPredictModal(); // Ensure form shows up first
+        }
+        function closePredictModal() { 
+            predictiveModal.classList.add('hidden'); 
+        }
+        function resetPredictModal() {
+            document.getElementById('predictiveFormView').classList.remove('hidden');
+            document.getElementById('predictiveResultView').classList.add('hidden');
+        }
+
+        async function submitPredictiveData(e) {
+            e.preventDefault();
+            
+            const btn = document.getElementById('predictBtn');
+            const spinner = document.getElementById('predictSpinner');
+            
+            btn.disabled = true;
+            spinner.classList.remove('hidden');
+
+            const payload = {
+                Weather: document.getElementById('tab_weather').value,
+                Road_Type: document.getElementById('tab_road_type').value,
+                Time_of_Day: document.getElementById('tab_time').value,
+                Traffic_Density: document.getElementById('tab_density').value,
+                Speed_Limit: document.getElementById('tab_speed').value,
+                Number_of_Vehicles: document.getElementById('tab_vehicles').value,
+                Driver_Alcohol: document.getElementById('tab_alcohol').value,
+                Road_Condition: document.getElementById('tab_road_cond').value,
+                Vehicle_Type: document.getElementById('tab_vehicle').value,
+                Driver_Age: document.getElementById('tab_age').value,
+                Driver_Experience: document.getElementById('tab_exp').value,
+                Road_Light_Condition: document.getElementById('tab_light').value
+            };
+
+            try {
+                const response = await fetch('/predict_traffic_risk', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                const data = await response.json();
+                
+                if (data.error) throw new Error(data.error);
+                
+                // Hide Form, Show Result
+                document.getElementById('predictiveFormView').classList.add('hidden');
+                document.getElementById('predictiveResultView').classList.remove('hidden');
+                
+                const riskProb = data.risk_probability_percentage;
+                const willHappen = data.will_accident_happen;
+                
+                const badge = document.getElementById('riskBadge');
+                const icon = document.getElementById('riskIcon');
+                const text = document.getElementById('riskLabelText');
+                
+                text.innerText = data.status;
+                
+                if (willHappen || riskProb >= 50) {
+                    badge.className = "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-black mb-6 uppercase tracking-[0.2em] border shadow-sm bg-red-100 text-red-600 border-red-300 dark:bg-red-500/20 dark:text-red-400 dark:border-red-500/30";
+                    icon.className = "fas fa-exclamation-triangle";
+                } else {
+                    badge.className = "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-black mb-6 uppercase tracking-[0.2em] border shadow-sm bg-emerald-100 text-emerald-600 border-emerald-300 dark:bg-emerald-500/20 dark:text-emerald-400 dark:border-emerald-500/30";
+                    icon.className = "fas fa-shield-check";
+                }
+                
+                animateValue("riskProbabilityValue", 0, Math.floor(riskProb), 1000);
+
+            } catch (err) {
+                alert(`Error: ${err.message}`);
+                resetPredictModal();
+            } finally {
+                btn.disabled = false;
+                spinner.classList.add('hidden');
+            }
+        }
+
+        async function connectIpCam() {
+            const url = document.getElementById('ipCamUrl').value.trim();
+            if(!url) return;
+            closeIpCamModal();
+
+            uploadSection.classList.add('hidden');
+            loadingDiv.classList.remove('hidden');
+            resultsDiv.classList.add('hidden');
+            emergencyBanner.classList.add('hidden');
+            
+            document.getElementById('loadingIcon').className = "fas fa-satellite-dish text-2xl text-rose-600 dark:text-rose-400 animate-pulse";
+            document.getElementById('loadingText').innerText = "Connecting to IP Camera...";
+            document.getElementById('loadingSub').innerText = "Buffering 3s stream chunk...";
+
+            try {
+                const response = await fetch('/predict_stream', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ url: url, location: currentLocationStr })
+                });
+                const data = await response.json();
+                if (data.error) throw new Error(data.error);
+                renderResultsUI(data);
+            } catch (err) {
+                alert(`Error: ${err.message}`);
+                resetApp();
+            }
+        }
+
+        async function handleUpload(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('location', currentLocationStr);
+
+            uploadSection.classList.add('hidden');
+            loadingDiv.classList.add('hidden'); // Bypass the loading spinner
+            resultsDiv.classList.remove('hidden');
+            emergencyBanner.classList.add('hidden');
+            document.getElementById('mediaControls').classList.remove('hidden');
+            
+            // Empty metadata for uploaded MP4s (cannot extract location/weather)
+            document.getElementById('realLocation').innerText = "--";
+            document.getElementById('realWeather').innerText = "--";
+            document.getElementById('realTime').innerText = "--";
+            
+            // Initialize panel to 'Analyzing' state while video streams
+            document.getElementById('labelText').innerText = "Analyzing Video...";
+            document.getElementById('confidenceValue').innerText = "0";
+            document.getElementById('severityLevel').innerText = "--";
+            document.getElementById('slowfastScore').innerText = "--%";
+            document.getElementById('yoloScore').innerText = "--%";
+            document.getElementById('statusLine').style.backgroundColor = "#6366f1";
+            document.getElementById('statusBadge').style.color = "#6366f1";
+            document.getElementById('statusIcon').className = "fas fa-spinner fa-spin";
+            document.getElementById('alprContainer').innerHTML = '';
+
+            try {
+                // 1. Instantly upload and get Video ID
+                const upRes = await fetch('/upload_media', { method: 'POST', body: formData });
+                const upData = await upRes.json();
+                if (upData.error) throw new Error(upData.error);
+                
+                window.currentVideoId = upData.video_id;
+                
+                // 2. Start YOLO Stream Immediately
+                playTracking();
+
+                // 3. Kick off heavy prediction processing in the background
+                const anRes = await fetch('/analyze_media', { 
+                    method: 'POST', 
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({ video_id: upData.video_id }) 
+                });
+                const anData = await anRes.json();
+                if (anData.error) throw new Error(anData.error);
+                
+                renderResultsUI(anData);
+            } catch (err) {
+                console.error(err);
+                alert("Processing failed: " + err.message);
+                resetApp();
+            }
+        }
+        
+        // --- Media Player Functions ---
+        window.currentVideoId = null;
+        window.currentSnapshotData = null;
+
+        function showSnapshot() {
+            if(!window.currentSnapshotData) return;
+            document.getElementById('previewVideo').classList.add('hidden');
+            document.getElementById('previewVideo').pause();
+            const img = document.getElementById('previewImg');
+            img.classList.remove('hidden');
+            img.src = `data:image/jpeg;base64,${window.currentSnapshotData}`;
+            document.getElementById('liveBadge').innerHTML = '<span class="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_8px_red]"></span> XAI SNAPSHOT';
+        }
+
+        function playTracking() {
+            document.getElementById('previewVideo').classList.add('hidden');
+            document.getElementById('previewVideo').pause();
+            const img = document.getElementById('previewImg');
+            img.classList.remove('hidden');
+            // Cache bust query parameter enforces a clean, immediate stream start
+            img.src = `/stream_tracking/${window.currentVideoId}?t=${new Date().getTime()}`; 
+            document.getElementById('liveBadge').innerHTML = '<span class="w-2 h-2 rounded-full bg-fuchsia-500 animate-pulse shadow-[0_0_8px_fuchsia]"></span> LIVE AI TRACKING';
+        }
+
+        function playOriginal() {
+            document.getElementById('previewImg').classList.add('hidden');
+            document.getElementById('previewImg').src = "";
+            const video = document.getElementById('previewVideo');
+            video.classList.remove('hidden');
+            video.src = `/video/${window.currentVideoId}`; 
+            video.play().catch(e => console.error("Playback error", e));
+            document.getElementById('liveBadge').innerHTML = '<span class="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_blue]"></span> ORIGINAL VIDEO';
+        }
+
+        function renderResultsUI(data) {
+            window.currentVideoId = data.video_id;
+            if(data.image) window.currentSnapshotData = data.image;
+
+            // Retain IP location data if present (ignores uploads)
+            if (data.cam_location) document.getElementById('realLocation').innerText = data.cam_location;
+            if (data.cam_weather) document.getElementById('realWeather').innerText = data.cam_weather;
+
+            if (data.is_video) {
+                document.getElementById('mediaControls').classList.remove('hidden');
+            } else {
+                document.getElementById('mediaControls').classList.add('hidden');
+            }
+
+            document.getElementById('labelText').innerText = data.label;
+            
+            const confValue = data.confidence;
+            const sfScore = data.rcnn;
+            const yScore = data.cnn;
+            
+            document.getElementById('slowfastScore').innerText = sfScore + "%";
+            document.getElementById('yoloScore').innerText = yScore + "%";
+
+            const statusLine = document.getElementById('statusLine');
+            const badge = document.getElementById('statusBadge');
+            const icon = document.getElementById('statusIcon');
+            const isAccident = data.label.includes("Accident Detected");
+
+            if (isAccident) {
+                statusLine.style.backgroundColor = "#ef4444"; 
+                statusLine.style.boxShadow = "0 0 20px rgba(239,68,68,0.6)";
+                badge.style.color = "#ef4444";
+                badge.style.borderColor = "#fca5a5";
+                icon.className = "fas fa-skull-crossbones";
+                
+                const sevMatch = data.label.match(/\((.*?)\)/);
+                if (sevMatch) {
+                    const sev = sevMatch[1];
+                    const severityContainer = document.getElementById('severityContainer');
+                    const severityLevel = document.getElementById('severityLevel');
+                    severityLevel.innerText = sev;
+                    severityContainer.classList.remove('hidden');
+                    if(sev.toLowerCase() === 'major') severityLevel.style.color = "#ef4444";
+                    if(sev.toLowerCase() === 'moderate') severityLevel.style.color = "#f97316";
+                    if(sev.toLowerCase() === 'minor') severityLevel.style.color = "#eab308";
+                }
+            } else {
+                statusLine.style.backgroundColor = "#10b981";
+                statusLine.style.boxShadow = "0 0 20px rgba(16,185,129,0.6)";
+                badge.style.color = "#10b981";
+                badge.style.borderColor = "#6ee7b7";
+                icon.className = "fas fa-shield-check";
+                document.getElementById('severityContainer').classList.add('hidden');
+            }
+
+            // Strictly enforcing empty ALPR panel if no valid plates exist
+            const alprContainer = document.getElementById('alprContainer');
+            alprContainer.innerHTML = '';
+            if (data.plates && data.plates.length > 0) {
+                const validPlates = data.plates.filter(p => p !== "NO CLEAR PLATES" && p.text !== "NO CLEAR PLATES");
+                validPlates.forEach(plate => {
+                    const span = document.createElement('span');
+                    span.className = "bg-yellow-400 text-black px-3 py-1.5 rounded-xl font-black text-sm uppercase tracking-widest shadow-sm border border-yellow-500/50";
+                    span.innerText = plate.text || plate;
+                    alprContainer.appendChild(span);
+                });
+            }
+
+            if (data.alert_sent) emergencyBanner.classList.remove('hidden');
+
+            loadingDiv.classList.add('hidden');
+            resultsDiv.classList.remove('hidden');
+
+            animateValue("confidenceValue", 0, Math.floor(confValue), 1200);
+            setTimeout(() => {
+                document.getElementById('slowfastBar').style.width = sfScore + '%';
+                document.getElementById('yoloBar').style.width = yScore + '%';
+            }, 200);
+        }
+
+        function resetApp() {
+            fileInput.value = '';
+            document.getElementById('previewVideo').pause();
+            document.getElementById('slowfastBar').style.width = '0%';
+            document.getElementById('yoloBar').style.width = '0%';
+            
+            emergencyBanner.classList.add('hidden');
+            uploadSection.classList.remove('hidden');
+            resultsDiv.classList.add('hidden');
+            loadingDiv.classList.add('hidden');
+            fetchRealLocationData(); // reset location back to user's browser location
+        }
+
+        function animateValue(id, start, end, duration) {
+            let current = start;
+            const range = end - start;
+            if(range === 0) { document.getElementById(id).innerHTML = end; return; }
+            const increment = end > start ? 1 : -1;
+            const stepTime = Math.abs(Math.floor(duration / range));
+            const obj = document.getElementById(id);
+            const timer = setInterval(function() {
+                current += increment;
+                obj.innerHTML = current;
+                if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
+                    clearInterval(timer);
+                    obj.innerHTML = end; 
+                }
+            }, stepTime);
+        }
+    </script>
+</body>
+</html>