Upload 9 files

app.py

@@ -0,0 +1,673 @@
+from flask import Flask, render_template, request, jsonify, Response, send_from_directory
+from flask_socketio import SocketIO, emit
+import cv2
+import numpy as np
+import os
+import json
+import uuid
+import threading
+import queue
+import torch
+import time
+from datetime import datetime
+from collections import Counter
+import base64
+import sys
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+
+from rfdetr import RFDETRMedium
+import supervision as sv
+from gradio_client import Client, handle_file
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your-secret-key-here'
+socketio = SocketIO(app, cors_allowed_origins="*", async_mode='threading')
+
+# --- CONFIG ---
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+UPLOAD_FOLDER = os.path.join(BASE_DIR, 'static/uploads')
+RESULTS_FOLDER = os.path.join(BASE_DIR, 'static/results')
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(RESULTS_FOLDER, exist_ok=True)
+
+# Model Paths
+HELMET_WEIGHTS = os.path.join(BASE_DIR, "Model/v2_helmet/checkpoint_best_ema.pth")
+PLATE_WEIGHTS = os.path.join(BASE_DIR, "Model/models_v1/checkpoint_best_ema_plate.pth")
+HELMET_CLASSES = ["motorbike and helmet", "motorbike and no helmet"]
+
+# Thresholds (matching test.py)
+CONF_RIDER = 0.25 
+CONF_PLATE = 0.30
+CONF_HELMET_CONFIRM = 0.40  
+CONF_NO_HELMET_TRIGGER = 0.35
+
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+print(f"[INIT] Targeted Device: {device}")
+
+# --- MODEL INITIALIZATION ---
+print("[INIT] Loading Rider Detection Model...")
+rider_model = RFDETRMedium(num_classes=len(HELMET_CLASSES), pretrain_weights=HELMET_WEIGHTS)
+try:
+    rider_model.optimize_for_inference(compile=True, batch_size=1)
+    if device.type == "cuda": rider_model.model.half()
+except Exception as e: print(f"[WARNING] Rider model opt failed: {e}")
+
+print("[INIT] Loading License Plate Model...")
+plate_model = RFDETRMedium(num_classes=1, pretrain_weights=PLATE_WEIGHTS)
+try:
+    plate_model.optimize_for_inference(compile=True, batch_size=1)
+    if device.type == "cuda": plate_model.model.half()
+except Exception as e: print(f"[WARNING] Plate model opt failed: {e}")
+
+# --- GLOBAL STATE & WORKERS ---
+# We use a dictionary to separate state by session_id in a real app, 
+# but for simplicity here we reset globals on upload or use a simplified structure.
+current_session_data = {
+    "violations": {},        # {track_id: {data}}
+    "ocr_queue": queue.Queue(),
+    "track_plate_cache": {},
+    "track_capture_count": {},
+    "track_ocr_history": {}
+}
+
+# Live Camera Session State
+live_camera_sessions = {}  # {session_id: {tracker, history, etc}}
+
+json_lock = threading.Lock()
+
+def get_best_consensus(results):
+    from collections import Counter
+    cleaned = [r.replace("\n", " ").strip() for r in results if r not in ["API_ERROR", "PENDING...", ""]]
+    if not cleaned: return "PENDING..."
+    if len(cleaned) == 1: return cleaned[0]
+    max_len = max(len(r) for r in cleaned)
+    final_chars = []
+    for i in range(max_len):
+        char_pool = [r[i] for r in cleaned if i < len(r)]
+        if char_pool:
+            final_chars.append(Counter(char_pool).most_common(1)[0][0])
+    return "".join(final_chars).strip()
+
+def clamp_box(box, w, h):
+    x1, y1, x2, y2 = map(int, box)
+    return [max(0, x1), max(0, y1), min(w - 1, x2), min(h - 1, y2)]
+
+def expand_box(box, w, h):
+    x1, y1, x2, y2 = map(int, box)
+    bw, bh = x2 - x1, y2 - y1
+    return clamp_box([x1 - bw * 0.1, y1 + bh * 0.4, x2 + bw * 0.1, y2 + bh * 0.4], w, h)
+
+def background_ocr_worker():
+    print("[OCR] Worker Thread Started")
+    try:
+        # Initialize Gradio Client
+        client = Client("WebashalarForML/demo-glm-ocr")
+    except Exception as e:
+        print(f"[OCR] Connection Failed: {e}")
+        return
+
+    while True:
+        try:
+            task = current_session_data["ocr_queue"].get()
+            if task is None: continue # Keep alive
+            
+            track_id, plate_path, session_id = task
+            print(f"[OCR] Processing ID {track_id}...")
+            
+            try:
+                # Call external API
+                result = client.predict(image=handle_file(plate_path), api_name="/proses_intelijen")
+                plate_text = str(result).strip()
+            except Exception as e:
+                print(f"[OCR] API Error: {e}")
+                plate_text = "API_ERROR"
+
+            # Update History
+            if track_id not in current_session_data["track_ocr_history"]:
+                current_session_data["track_ocr_history"][track_id] = []
+            
+            if plate_text not in ["API_ERROR", ""]:
+                current_session_data["track_ocr_history"][track_id].append(plate_text)
+
+            # Consensus
+            final_plate = get_best_consensus(current_session_data["track_ocr_history"][track_id])
+            current_session_data["track_plate_cache"][track_id] = final_plate
+
+            # Update Main JSON Record
+            with json_lock:
+                if track_id in current_session_data["violations"]:
+                    current_session_data["violations"][track_id]["plate_number"] = final_plate
+                    current_session_data["violations"][track_id]["ocr_attempts"] = current_session_data["track_ocr_history"][track_id]
+                    
+                    # Save to JSON file for persistence
+                    json_path = os.path.join(RESULTS_FOLDER, f"session_{session_id}.json")
+                    with open(json_path, 'w') as f:
+                        json.dump(list(current_session_data["violations"].values()), f, indent=4)
+
+            current_session_data["ocr_queue"].task_done()
+        except Exception as e:
+            print(f"[OCR] Loop Error: {e}")
+
+# Start OCR Thread
+threading.Thread(target=background_ocr_worker, daemon=True).start()
+
+def parse_preds(preds, W, H):
+    boxes, scores, labels = np.array([]), np.array([]), np.array([])
+    if hasattr(preds, "xyxy"):
+        boxes = preds.xyxy.cpu().numpy() if not isinstance(preds.xyxy, np.ndarray) else preds.xyxy
+        scores = preds.confidence.cpu().numpy() if not isinstance(preds.confidence, np.ndarray) else preds.confidence
+        labels = preds.class_id.cpu().numpy() if not isinstance(preds.class_id, np.ndarray) else preds.class_id
+        if boxes.size > 0 and boxes.max() <= 1.01:
+            boxes = boxes.copy()
+            boxes[:, [0, 2]] *= W
+            boxes[:, [1, 3]] *= H
+    return boxes, scores, labels
+
+def expand_box(box, w, h):
+    x1, y1, x2, y2 = map(int, box)
+    bw, bh = x2 - x1, y2 - y1
+    return clamp_box([x1 - bw * 0.1, y1 + bh * 0.4, x2 + bw * 0.1, y2 + bh * 0.4], w, h)
+
+def process_video_gen(video_path, session_id):
+    cap = cv2.VideoCapture(video_path)
+    tracker = sv.ByteTrack()
+    
+    # Session specific tracking (matching test.py structure)
+    track_class_history = {}
+    track_violation_memory = {}
+    track_last_seen = {}
+    dead_ids = set()
+    frame_idx = 0
+    
+    while cap.isOpened():
+        ret, frame = cap.read()
+        if not ret: break
+        frame_idx += 1
+        
+        # Cleanup dead tracks (matching test.py)
+        to_kill = [tid for tid, last in track_last_seen.items() if frame_idx - last > 50 and tid not in dead_ids]
+        for tk in to_kill:
+            dead_ids.add(tk)
+
+        rgb_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+        h_orig, w_orig = frame.shape[:2]
+        
+        # 1. RIDER DETECTION
+        with torch.no_grad():
+            rider_preds = rider_model.predict(rgb_frame, conf=CONF_RIDER, iou=0.5)
+        
+        r_boxes, r_scores, r_labels = parse_preds(rider_preds, w_orig, h_orig)
+        
+        if r_boxes.size > 0:
+            detections = sv.Detections(
+                xyxy=r_boxes.astype(np.float32), 
+                confidence=r_scores.astype(np.float32), 
+                class_id=r_labels.astype(np.int32)
+            )
+        else:
+            detections = sv.Detections.empty()
+        
+        detections = tracker.update_with_detections(detections)
+        
+        for i, (xyxy, mask, confidence, class_id, tracker_id, data) in enumerate(detections):
+            if tracker_id is None: continue
+            tid = int(tracker_id)
+            track_last_seen[tid] = frame_idx
+            x1, y1, x2, y2 = map(int, xyxy)
+            cls_idx = int(class_id)
+            
+            # Track class history (matching test.py logic)
+            if tid not in track_class_history:
+                track_class_history[tid] = []
+            track_class_history[tid].append({"class": cls_idx, "conf": confidence})
+            if len(track_class_history[tid]) > 20:
+                track_class_history[tid].pop(0)
+
+            # Robust helmet state mapping (matching test.py)
+            is_nh_current = (cls_idx == 2)
+            is_h_current = (cls_idx == 0)
+            if cls_idx == 1:
+                hist = [h['class'] for h in track_class_history[tid]]
+                if 2 in hist:
+                    is_h_current = True
+                else:
+                    is_nh_current = True
+
+            # Violation memory logic (matching test.py)
+            if tid not in track_violation_memory:
+                if is_nh_current and confidence >= CONF_NO_HELMET_TRIGGER:
+                    track_violation_memory[tid] = True
+                hist = [h['class'] for h in track_class_history[tid]]
+                nh_hits = sum(1 for c in hist if c == 2 or (c == 1 and 2 not in hist))
+                if nh_hits > 3:
+                    track_violation_memory[tid] = True
+            
+            is_no_helmet = track_violation_memory.get(tid, False)
+            
+            # Display name logic (matching test.py)
+            if is_no_helmet:
+                display_name, color = "VIOLATION: NO HELMET", (0, 0, 255)
+            elif is_nh_current and confidence >= CONF_NO_HELMET_TRIGGER:
+                display_name, color = "WARNING: NO HELMET", (0, 165, 255)
+            elif is_nh_current and confidence > 0.15:
+                display_name, color = "ANALYZING...", (0, 255, 255)
+            elif is_h_current and confidence >= CONF_HELMET_CONFIRM:
+                display_name, color = "HELMET", (0, 255, 0)
+            else:
+                display_name, color = f"TRACKING (C{cls_idx})", (180, 180, 180)
+            
+            # 3. LOG VIOLATION & CROP
+            if is_no_helmet and tid not in dead_ids:
+                # 3. LOG VIOLATION & CROP
+                with json_lock:
+                    if tid not in current_session_data["violations"]:
+                        ts = datetime.now()
+                        
+                        # Save Rider Image
+                        rider_img_name = f"viol_{session_id}_{tid}_rider.jpg"
+                        rider_path = os.path.join(RESULTS_FOLDER, rider_img_name)
+                        cv2.imwrite(rider_path, frame[y1:y2, x1:x2])
+                        
+                        # Initialize Record
+                        current_session_data["violations"][tid] = {
+                            "id": tid,
+                            "timestamp": ts.strftime('%H:%M:%S'),
+                            "type": "No Helmet",
+                            "plate_number": "Scanning...",
+                            "image_url": f"/static/results/{rider_img_name}",
+                            "plate_image_url": None, # Will fill later
+                            "ocr_attempts": [],
+                            "raw": {
+                                "confidence": float(confidence),
+                                "box": xyxy.tolist()
+                            }
+                        }
+                        current_session_data["track_capture_count"][tid] = 0
+
+                # 4. PLATE DETECTION (Only if violation confirmed)
+                # Expand rider box to find plate inside/near it (matching test.py)
+                eb = expand_box(xyxy, w_orig, h_orig)
+                rider_crop = frame[eb[1]:eb[3], eb[0]:eb[2]]
+                
+                if rider_crop.size > 0 and current_session_data["track_capture_count"].get(tid, 0) < 3:
+                    # Run Plate Model on Crop
+                    with torch.no_grad():
+                        plate_preds = plate_model.predict(cv2.cvtColor(rider_crop, cv2.COLOR_BGR2RGB), conf=CONF_PLATE, iou=0.5)
+                    
+                    pb, ps, pl = parse_preds(plate_preds, rider_crop.shape[1], rider_crop.shape[0])
+                    
+                    if pb.size > 0:
+                        # Get best plate
+                        best_idx = np.argmax(ps)
+                        px1, py1, px2, py2 = map(int, pb[best_idx])
+                        
+                        # Validate size
+                        plate_crop = rider_crop[py1:py2, px1:px2]
+                        if plate_crop.size > 0 and plate_crop.shape[0] > 10 and plate_crop.shape[1] > 20:
+                            # Save Plate Image
+                            s_idx = current_session_data['track_capture_count'][tid] + 1
+                            plate_img_name = f"viol_{session_id}_{tid}_plate_snap{s_idx}.jpg"
+                            plate_path = os.path.join(RESULTS_FOLDER, plate_img_name)
+                            cv2.imwrite(plate_path, plate_crop)
+                            
+                            # Update JSON with plate image URL (use the latest one)
+                            with json_lock:
+                                current_session_data["violations"][tid]["plate_image_url"] = f"/static/results/{plate_img_name}"
+
+                            # Trigger OCR
+                            current_session_data["ocr_queue"].put((tid, plate_path, session_id))
+                            current_session_data["track_capture_count"][tid] += 1
+
+                # Draw UI (matching test.py style)
+                plate_text = current_session_data["track_plate_cache"].get(tid, "")
+                cv2.rectangle(frame, (x1, y1), (x2, y2), color, 2)
+                cv2.putText(frame, f"ID:{tid} {display_name} {confidence:.2f}", (x1, y1 - 10), 
+                           cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)
+                if plate_text:
+                    cv2.putText(frame, f"Plate: {plate_text}", (x1, y2 + 20), 
+                               cv2.FONT_HERSHEY_SIMPLEX, 0.5, (255, 0, 0), 2)
+
+            else:
+                # Normal Helmet/Tracking (matching test.py)
+                cv2.rectangle(frame, (x1, y1), (x2, y2), color, 2)
+                cv2.putText(frame, f"ID:{tid} {display_name} {confidence:.2f}", (x1, y1 - 10),
+                           cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)
+
+        # Encode for streaming
+        _, buffer = cv2.imencode('.jpg', frame)
+        yield (b'--frame\r\n'
+               b'Content-Type: image/jpeg\r\n\r\n' + buffer.tobytes() + b'\r\n')
+
+    cap.release()
+
+# --- ROUTES ---
+
+@app.route('/')
+def index():
+    return render_template('landing.html')
+
+@app.route('/dashboard')
+def dashboard():
+    return render_template('dashboard.html')
+
+@app.route('/camera_debug')
+def camera_debug():
+    return render_template('camera_debug.html')
+
+@app.route('/test_simple')
+def test_simple():
+    return send_from_directory('.', 'test_simple.html')
+
+@app.route('/test_socket_echo')
+def test_socket_echo():
+    return send_from_directory('.', 'test_socket_echo.html')
+
+@app.route('/upload', methods=['POST'])
+def upload_video():
+    if 'file' not in request.files:
+        return jsonify({"error": "No file part"}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({"error": "No selected file"}), 400
+    
+    # 1. Generate Session ID
+    session_id = str(uuid.uuid4())[:8]
+    
+    # 2. Reset Session Data
+    with json_lock:
+        current_session_data["violations"] = {}
+        current_session_data["track_plate_cache"] = {}
+        current_session_data["track_capture_count"] = {}
+        current_session_data["track_ocr_history"] = {}
+        # Clear queue
+        while not current_session_data["ocr_queue"].empty():
+            try: current_session_data["ocr_queue"].get_nowait()
+            except: pass
+            
+    filename = f"{session_id}_{file.filename}"
+    filepath = os.path.join(UPLOAD_FOLDER, filename)
+    file.save(filepath)
+    
+    return jsonify({"filename": filename, "session_id": session_id})
+
+@app.route('/get_violations')
+def get_violations():
+    # Return list of violations
+    with json_lock:
+        data = list(current_session_data["violations"].values())
+        # Sort by timestamp (descending)
+        data.reverse()
+        return jsonify(data)
+
+@app.route('/video_feed/<filename>/<session_id>')
+def video_feed(filename, session_id):
+    filepath = os.path.join(UPLOAD_FOLDER, filename)
+    return Response(process_video_gen(filepath, session_id),
+                    mimetype='multipart/x-mixed-replace; boundary=frame')
+
+@app.route('/mobile/<session_id>')
+def mobile_node(session_id):
+    return render_template('mobile.html', session_id=session_id)
+
+@app.route('/upload_frame/<session_id>', methods=['POST'])
+def upload_frame(session_id):
+    # (Simplified for now - can extend to run detection on mobile frames too)
+    return jsonify({"status": "received"})
+
+# --- SOCKET.IO HANDLERS FOR LIVE CAMERA ---
+
+@socketio.on('connect')
+def handle_connect():
+    print(f"[SOCKET] Client connected: {request.sid}")
+    emit('connection_response', {'status': 'connected'})
+
+@socketio.on('disconnect')
+def handle_disconnect():
+    print(f"[SOCKET] Client disconnected: {request.sid}")
+    # Cleanup session if exists
+    if request.sid in live_camera_sessions:
+        del live_camera_sessions[request.sid]
+
+@socketio.on('start_camera_session')
+def handle_start_camera(data):
+    session_id = data.get('session_id', str(uuid.uuid4())[:8])
+    print(f"[SOCKET] Starting camera session: {session_id}")
+    
+    # Initialize session state
+    live_camera_sessions[request.sid] = {
+        'session_id': session_id,
+        'tracker': sv.ByteTrack(),
+        'track_class_history': {},
+        'track_violation_memory': {},
+        'track_last_seen': {},
+        'dead_ids': set(),
+        'frame_idx': 0,
+        'violations': {},
+        'track_plate_cache': {},
+        'track_capture_count': {},
+        'track_ocr_history': {}
+    }
+    
+    emit('camera_session_started', {'session_id': session_id})
+
+@socketio.on('camera_frame')
+def handle_camera_frame(data):
+    if request.sid not in live_camera_sessions:
+        print(f"[SOCKET] No session found for {request.sid}")
+        emit('error', {'message': 'No active session'})
+        return
+    
+    try:
+        print(f"[SOCKET] Received frame from {request.sid}, size: {len(data.get('frame', ''))} bytes")
+        
+        # Decode base64 frame
+        frame_data = data['frame'].split(',')[1]  # Remove data:image/jpeg;base64,
+        frame_bytes = base64.b64decode(frame_data)
+        nparr = np.frombuffer(frame_bytes, np.uint8)
+        frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+        
+        if frame is None:
+            print("[SOCKET] Failed to decode frame")
+            return
+        
+        print(f"[SOCKET] Frame decoded: {frame.shape}")
+        
+        # Process frame
+        session = live_camera_sessions[request.sid]
+        session_id = session['session_id']
+        processed_frame, new_violations = process_live_frame(frame, session, session_id)
+        
+        print(f"[SOCKET] Frame processed, violations: {len(new_violations)}")
+        
+        # Encode processed frame
+        _, buffer = cv2.imencode('.jpg', processed_frame, [cv2.IMWRITE_JPEG_QUALITY, 85])
+        processed_b64 = base64.b64encode(buffer).decode('utf-8')
+        
+        print(f"[SOCKET] Encoded frame size: {len(processed_b64)} bytes")
+        
+        # Send back processed frame (use explicit room targeting)
+        socketio.emit('processed_frame', {
+            'frame': f'data:image/jpeg;base64,{processed_b64}',
+            'violations': new_violations
+        }, room=request.sid)
+        
+        print(f"[SOCKET] Emitted processed_frame to client {request.sid}")
+        
+    except Exception as e:
+        print(f"[SOCKET] Frame processing error: {e}")
+        import traceback
+        traceback.print_exc()
+        emit('error', {'message': str(e)})
+
+def process_live_frame(frame, session, session_id):
+    """Process a single frame from live camera feed"""
+    tracker = session['tracker']
+    track_class_history = session['track_class_history']
+    track_violation_memory = session['track_violation_memory']
+    track_last_seen = session['track_last_seen']
+    dead_ids = session['dead_ids']
+    frame_idx = session['frame_idx']
+    
+    session['frame_idx'] += 1
+    frame_idx = session['frame_idx']
+    
+    # Cleanup dead tracks
+    to_kill = [tid for tid, last in track_last_seen.items() if frame_idx - last > 50 and tid not in dead_ids]
+    for tk in to_kill:
+        dead_ids.add(tk)
+    
+    rgb_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+    h_orig, w_orig = frame.shape[:2]
+    
+    # 1. RIDER DETECTION
+    with torch.no_grad():
+        rider_preds = rider_model.predict(rgb_frame, conf=CONF_RIDER, iou=0.5)
+    
+    r_boxes, r_scores, r_labels = parse_preds(rider_preds, w_orig, h_orig)
+    
+    if r_boxes.size > 0:
+        detections = sv.Detections(
+            xyxy=r_boxes.astype(np.float32), 
+            confidence=r_scores.astype(np.float32), 
+            class_id=r_labels.astype(np.int32)
+        )
+    else:
+        detections = sv.Detections.empty()
+    
+    detections = tracker.update_with_detections(detections)
+    
+    new_violations = []
+    
+    for i, (xyxy, mask, confidence, class_id, tracker_id, data) in enumerate(detections):
+        if tracker_id is None: continue
+        tid = int(tracker_id)
+        track_last_seen[tid] = frame_idx
+        x1, y1, x2, y2 = map(int, xyxy)
+        cls_idx = int(class_id)
+        
+        # Track class history
+        if tid not in track_class_history:
+            track_class_history[tid] = []
+        track_class_history[tid].append({"class": cls_idx, "conf": confidence})
+        if len(track_class_history[tid]) > 20:
+            track_class_history[tid].pop(0)
+        
+        # Robust helmet state mapping
+        is_nh_current = (cls_idx == 2)
+        is_h_current = (cls_idx == 0)
+        if cls_idx == 1:
+            hist = [h['class'] for h in track_class_history[tid]]
+            if 2 in hist:
+                is_h_current = True
+            else:
+                is_nh_current = True
+        
+        # Violation memory logic
+        if tid not in track_violation_memory:
+            if is_nh_current and confidence >= CONF_NO_HELMET_TRIGGER:
+                track_violation_memory[tid] = True
+            hist = [h['class'] for h in track_class_history[tid]]
+            nh_hits = sum(1 for c in hist if c == 2 or (c == 1 and 2 not in hist))
+            if nh_hits > 3:
+                track_violation_memory[tid] = True
+        
+        is_no_helmet = track_violation_memory.get(tid, False)
+        
+        # Display name logic
+        if is_no_helmet:
+            display_name, color = "VIOLATION: NO HELMET", (0, 0, 255)
+        elif is_nh_current and confidence >= CONF_NO_HELMET_TRIGGER:
+            display_name, color = "WARNING: NO HELMET", (0, 165, 255)
+        elif is_nh_current and confidence > 0.15:
+            display_name, color = "ANALYZING...", (0, 255, 255)
+        elif is_h_current and confidence >= CONF_HELMET_CONFIRM:
+            display_name, color = "HELMET", (0, 255, 0)
+        else:
+            display_name, color = f"TRACKING (C{cls_idx})", (180, 180, 180)
+        
+        # LOG VIOLATION & CROP
+        if is_no_helmet and tid not in dead_ids:
+            with json_lock:
+                if tid not in session['violations']:
+                    ts = datetime.now()
+                    
+                    # Save Rider Image
+                    rider_img_name = f"viol_live_{session_id}_{tid}_rider.jpg"
+                    rider_path = os.path.join(RESULTS_FOLDER, rider_img_name)
+                    cv2.imwrite(rider_path, frame[y1:y2, x1:x2])
+                    
+                    # Initialize Record
+                    violation_record = {
+                        "id": tid,
+                        "timestamp": ts.strftime('%H:%M:%S'),
+                        "type": "No Helmet",
+                        "plate_number": "Scanning...",
+                        "image_url": f"/static/results/{rider_img_name}",
+                        "plate_image_url": None,
+                        "ocr_attempts": [],
+                        "raw": {
+                            "confidence": float(confidence),
+                            "box": xyxy.tolist()
+                        }
+                    }
+                    session['violations'][tid] = violation_record
+                    session['track_capture_count'][tid] = 0
+                    new_violations.append(violation_record)
+            
+            # PLATE DETECTION
+            eb = expand_box(xyxy, w_orig, h_orig)
+            rider_crop = frame[eb[1]:eb[3], eb[0]:eb[2]]
+            
+            if rider_crop.size > 0 and session['track_capture_count'].get(tid, 0) < 3:
+                with torch.no_grad():
+                    plate_preds = plate_model.predict(cv2.cvtColor(rider_crop, cv2.COLOR_BGR2RGB), conf=CONF_PLATE, iou=0.5)
+                
+                pb, ps, pl = parse_preds(plate_preds, rider_crop.shape[1], rider_crop.shape[0])
+                
+                if pb.size > 0:
+                    best_idx = np.argmax(ps)
+                    px1, py1, px2, py2 = map(int, pb[best_idx])
+                    
+                    plate_crop = rider_crop[py1:py2, px1:px2]
+                    if plate_crop.size > 0 and plate_crop.shape[0] > 10 and plate_crop.shape[1] > 20:
+                        s_idx = session['track_capture_count'][tid] + 1
+                        plate_img_name = f"viol_live_{session_id}_{tid}_plate_snap{s_idx}.jpg"
+                        plate_path = os.path.join(RESULTS_FOLDER, plate_img_name)
+                        cv2.imwrite(plate_path, plate_crop)
+                        
+                        with json_lock:
+                            session['violations'][tid]["plate_image_url"] = f"/static/results/{plate_img_name}"
+                        
+                        # Trigger OCR (using shared queue)
+                        current_session_data["ocr_queue"].put((tid, plate_path, f"live_{session_id}"))
+                        session['track_capture_count'][tid] += 1
+            
+            # Draw UI
+            plate_text = session['track_plate_cache'].get(tid, "")
+            cv2.rectangle(frame, (x1, y1), (x2, y2), color, 2)
+            cv2.putText(frame, f"ID:{tid} {display_name} {confidence:.2f}", (x1, y1 - 10), 
+                       cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)
+            if plate_text:
+                cv2.putText(frame, f"Plate: {plate_text}", (x1, y2 + 20), 
+                           cv2.FONT_HERSHEY_SIMPLEX, 0.5, (255, 0, 0), 2)
+        else:
+            # Normal Helmet/Tracking
+            cv2.rectangle(frame, (x1, y1), (x2, y2), color, 2)
+            cv2.putText(frame, f"ID:{tid} {display_name} {confidence:.2f}", (x1, y1 - 10),
+                       cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)
+    
+    return frame, new_violations
+
+@app.route('/get_live_violations/<session_id>')
+def get_live_violations(session_id):
+    """Get violations for a specific live camera session"""
+    for sid, session in live_camera_sessions.items():
+        if session['session_id'] == session_id:
+            with json_lock:
+                data = list(session['violations'].values())
+                data.reverse()
+                return jsonify(data)
+    return jsonify([])
+
+if __name__ == '__main__':
+    socketio.run(app, host='0.0.0.0', debug=True, port=7860, allow_unsafe_werkzeug=True)

requirements.txt

@@ -0,0 +1,10 @@
+flask
+flask-socketio
+opencv-python
+numpy
+torch
+supervision
+gradio-client
+rfdetr
+python-socketio
+eventlet

static/css/style.css

@@ -0,0 +1,810 @@
+:root {
+    --primary: #8b5cf6;
+    --secondary: #ec4899;
+    --accent: #f43f5e;
+    --orange: #f97316;
+    --bg-dark: #000000;
+    --sidebar-bg: rgba(18, 18, 18, 0.4);
+    --card-bg: rgba(25, 25, 25, 0.5);
+    --text-main: #ffffff;
+    --text-dim: rgba(255, 255, 255, 0.6);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --purple-main: #8a4fff;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Outfit', sans-serif;
+}
+
+body {
+    background-color: #000;
+    color: var(--text-main);
+    overflow-x: hidden;
+    min-height: 100vh;
+    width: 100%;
+    max-width: 100vw;
+}
+
+/* Background - Shared with Landing */
+.liquid-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    overflow: hidden;
+    background: #000;
+}
+
+.liquid-bg {
+    position: absolute;
+    width: 200%;
+    height: 200%;
+    top: -50%;
+    left: -50%;
+    background: radial-gradient(circle at 20% 30%, var(--primary) 0%, transparent 40%),
+        radial-gradient(circle at 80% 20%, var(--secondary) 0%, transparent 45%),
+        radial-gradient(circle at 40% 80%, var(--accent) 0%, transparent 50%),
+        radial-gradient(circle at 90% 90%, var(--orange) 0%, transparent 40%);
+    filter: blur(100px);
+    animation: liquidMove 40s linear infinite;
+    opacity: 0.9;
+}
+
+.grain-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.18;
+    pointer-events: none;
+    z-index: 1000;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+}
+
+@keyframes liquidMove {
+    0% {
+        transform: translate(0, 0) rotate(0deg);
+    }
+
+    33% {
+        transform: translate(5%, 5%) rotate(5deg);
+    }
+
+    66% {
+        transform: translate(-5%, 8%) rotate(-5deg);
+    }
+
+    100% {
+        transform: translate(0, 0) rotate(0deg);
+    }
+}
+
+/* Landing Page Styles */
+#canvas-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+.hero-content {
+    position: relative;
+    z-index: 10;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: #fff;
+    padding: 0 1rem;
+}
+
+.made-by {
+    font-size: 0.8rem;
+    /* default */
+    letter-spacing: 0.5em;
+    /* default */
+    opacity: 0.6;
+    text-transform: uppercase;
+}
+
+.made-by.top {
+    margin-bottom: 2rem;
+}
+
+.made-by.bottom {
+    margin-top: 5rem;
+    font-size: 0.6rem;
+    letter-spacing: 0.8em;
+    opacity: 0.4;
+}
+
+.landing-title {
+    font-size: clamp(3rem, 15vw, 10rem);
+    line-height: 0.85;
+    margin-bottom: 2rem;
+    font-weight: 800;
+    background: linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.2));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.landing-subtitle {
+    max-width: 600px;
+    line-height: 1.6;
+    opacity: 0.7;
+    margin-bottom: 3rem;
+    /* Adjusted for spacing */
+}
+
+.enter-btn {
+    /* margin-top: 3rem; -- handled by subtitle margin */
+    padding: 1.2rem 3rem;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.1rem;
+    border-radius: 100px;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    text-decoration: none;
+    letter-spacing: 0.1em;
+    display: inline-block;
+}
+
+.enter-btn:hover {
+    background: #fff;
+    color: #000;
+    transform: scale(1.05);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+/* Page Layout */
+.dashboard-container {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    z-index: 1;
+}
+
+/* Sidebar - Glass Styling */
+.sidebar {
+    width: 80px;
+    background: var(--sidebar-bg);
+    backdrop-filter: blur(20px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem 0;
+    gap: 2rem;
+    border-right: 1px solid var(--glass-border);
+    transition: width 0.3s ease;
+}
+
+.nav-icon {
+    font-size: 1.4rem;
+    color: var(--text-dim);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    padding: 12px;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}
+
+.nav-icon:hover,
+.nav-icon.active {
+    color: #fff;
+    background: var(--purple-main);
+    box-shadow: 0 0 20px rgba(138, 79, 255, 0.4);
+}
+
+/* Main Area */
+.main-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    overflow-y: auto;
+}
+
+.dashboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    gap: 2rem;
+}
+
+.search-bar {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    padding: 0.8rem 1.5rem 0.8rem 3rem;
+    border-radius: 14px;
+    color: #fff;
+    width: 300px;
+    outline: none;
+}
+
+.add-btn {
+    background: var(--purple-main);
+    color: #fff;
+    border: none;
+    padding: 0.8rem 1.8rem;
+    border-radius: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+/* Dashboard Grid - Responsive */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
+    gap: 1.5rem;
+    width: 100%;
+    max-width: 100%;
+}
+
+.card {
+    background: var(--card-bg);
+    backdrop-filter: blur(30px) saturate(160%);
+    border: 1px solid var(--glass-border);
+    border-radius: 32px;
+    padding: 1.8rem;
+    height: fit-content;
+}
+
+/* Video Feed */
+.feed-card {
+    grid-column: span 1;
+    background: #000;
+    border-radius: 32px;
+    position: relative;
+    overflow: hidden;
+    min-height: 450px;
+    max-height: 70vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* When overlay is visible, allow content to fit */
+.feed-card.overlay-active {
+    overflow: visible;
+    aspect-ratio: unset;
+    height: auto;
+}
+
+/* When video is playing, maintain aspect ratio */
+.feed-card.video-active {
+    aspect-ratio: 16/9;
+    overflow: hidden;
+}
+
+.feed-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    position: relative;
+    z-index: 1;
+}
+
+#drop-zone-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.6);
+    text-align: center;
+    padding: 2.5rem 2rem;
+    z-index: 10;
+    min-height: 100%;
+}
+
+#drop-zone-overlay .mode-btn-wrap {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    z-index: 10;
+    position: relative;
+}
+
+.live-badge {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 20;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(10px);
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+@keyframes pulse {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.3;
+    }
+}
+
+/* Mobile Optimizations */
+@media (max-width: 1024px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .sidebar {
+        width: 70px;
+    }
+
+    .feed-card {
+        min-height: 400px;
+        max-height: 60vh;
+    }
+
+    .feed-card.overlay-active {
+        min-height: 450px;
+    }
+}
+
+@media (max-width: 768px) {
+    .dashboard-container {
+        flex-direction: column-reverse;
+        height: auto;
+        min-height: 100vh;
+    }
+
+    .sidebar {
+        width: 100%;
+        height: 64px;
+        flex-direction: row;
+        justify-content: space-around;
+        padding: 0 1rem;
+        border-right: none;
+        border-top: 1px solid var(--glass-border);
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        z-index: 100;
+        background: rgba(10, 10, 10, 0.85);
+        backdrop-filter: blur(20px);
+    }
+
+    .nav-icon {
+        font-size: 1.1rem;
+        padding: 10px;
+    }
+
+    .main-wrapper {
+        padding: 1rem;
+        padding-bottom: 80px;
+        overflow-x: hidden;
+        width: 100%;
+    }
+
+    .dashboard-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.75rem;
+        margin-bottom: 1rem;
+    }
+
+    .dashboard-header h2 {
+        font-size: 1.3rem;
+    }
+
+    .system-stats {
+        display: flex;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+    }
+
+    .search-bar {
+        width: 100%;
+    }
+
+    .device-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .device-tabs {
+        overflow-x: auto;
+        padding-bottom: 15px;
+    }
+
+    .dashboard-header .header-actions {
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    /* Feed Card - Mobile Fix */
+    .feed-card {
+        min-height: 350px !important;
+        max-height: 50vh !important;
+        height: auto !important;
+        border-radius: 20px;
+        width: 100%;
+    }
+
+    .feed-card.overlay-active {
+        min-height: 400px !important;
+        height: auto !important;
+    }
+
+    .feed-card.video-active {
+        aspect-ratio: unset !important;
+    }
+
+    .feed-card #processed-stream {
+        object-fit: contain !important;
+        width: 100% !important;
+        height: auto !important;
+        max-height: 50vh !important;
+        position: relative !important;
+        min-height: 200px !important;
+    }
+
+    .feed-card .live-badge {
+        top: 10px !important;
+        left: 10px !important;
+        font-size: 0.75rem !important;
+        padding: 6px 12px !important;
+    }
+
+    #drop-zone-overlay {
+        padding: 1.5rem 1rem !important;
+    }
+
+    /* Drop zone buttons on mobile */
+    #drop-zone-overlay {
+        padding: 1rem !important;
+    }
+
+    #drop-zone-overlay h3 {
+        font-size: 1rem;
+    }
+
+    #drop-zone-overlay .mode-btn-wrap {
+        flex-direction: column;
+        gap: 0.6rem;
+        width: 100%;
+        max-width: 260px;
+    }
+
+    #drop-zone-overlay .mode-btn-wrap button {
+        width: 100%;
+    }
+
+    /* Results Panel */
+    #results-panel {
+        max-height: 260px !important;
+    }
+
+    .log-row-title {
+        font-size: 0.8rem !important;
+    }
+
+    .log-row-meta {
+        font-size: 0.72rem !important;
+    }
+
+    /* Evidence Cache - 3 cols on mobile */
+    .mini-feed-gallery {
+        grid-template-columns: repeat(3, 1fr) !important;
+        gap: 8px !important;
+    }
+
+    /* Cards */
+    .card {
+        border-radius: 20px;
+        padding: 1.2rem;
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .side-panel-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    .dashboard-grid {
+        width: 100%;
+        overflow-x: hidden;
+    }
+}
+
+/* Extra Small Mobile (Portrait Phones) */
+@media (max-width: 480px) {
+    .feed-card {
+        min-height: 180px !important;
+        max-height: 45vh !important;
+    }
+
+    .feed-card #processed-stream {
+        min-height: 180px !important;
+        max-height: 45vh !important;
+    }
+
+    .dashboard-header h2 {
+        font-size: 1.1rem !important;
+    }
+
+    .system-stats {
+        font-size: 0.75rem;
+    }
+
+    .stat-item {
+        font-size: 0.7rem;
+    }
+}
+
+/* === JSON Syntax Highlighting === */
+.json-viewer {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.72rem;
+    line-height: 1.7;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
+.json-key {
+    color: #c084fc;
+}
+
+.json-str {
+    color: #86efac;
+}
+
+.json-num {
+    color: #67e8f9;
+}
+
+.json-bool {
+    color: #fbbf24;
+}
+
+.json-null {
+    color: #f87171;
+}
+
+.json-url {
+    color: #38bdf8;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+/* JSON Table View */
+.json-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.75rem;
+}
+
+.json-table tr {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.json-table td {
+    padding: 0.6rem 0.8rem;
+    vertical-align: top;
+    word-break: break-word;
+}
+
+.json-table td:first-child {
+    color: #c084fc;
+    font-weight: 600;
+    width: 35%;
+    min-width: 100px;
+}
+
+.json-table td:last-child {
+    color: #86efac;
+    width: 65%;
+}
+
+/* === Modal Mobile === */
+@media (max-width: 768px) {
+    #detail-modal>div {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 0 !important;
+        height: 100vh !important;
+        border-radius: 0 !important;
+        padding: 1.2rem !important;
+        overflow-y: auto;
+    }
+
+    .modal-inner-grid {
+        grid-template-columns: 1fr !important;
+        gap: 1rem !important;
+        overflow: visible !important;
+    }
+
+    .modal-main-img-wrap {
+        max-height: 220px;
+        min-height: 160px;
+    }
+
+    #modal-thumb {
+        max-height: 220px;
+        width: 100%;
+    }
+
+    .modal-plate-box {
+        padding: 0.8rem !important;
+    }
+
+    #modal-plate-text {
+        font-size: 1.1rem !important;
+    }
+
+    .modal-json-box {
+        max-height: none !important;
+        overflow-y: auto;
+    }
+
+    .json-viewer {
+        font-size: 0.68rem !important;
+    }
+
+    .json-table {
+        font-size: 0.7rem !important;
+    }
+
+    .json-table td {
+        padding: 0.5rem 0.6rem !important;
+    }
+
+    .json-table td:first-child {
+        width: 40% !important;
+    }
+}
+
+/* === Log Row Styles === */
+.log-row {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 12px 14px;
+    border-radius: 10px;
+    border-left: 4px solid #ef4444;
+    cursor: pointer;
+    transition: background 0.2s;
+    position: relative;
+}
+
+.log-row:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.log-row-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.log-row-title {
+    font-weight: 700;
+    font-size: 0.85rem;
+    color: #fff;
+}
+
+.log-row-time {
+    font-size: 0.7rem;
+    opacity: 0.55;
+    white-space: nowrap;
+}
+
+.log-row-meta {
+    margin-top: 5px;
+    font-size: 0.78rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.log-row-id {
+    opacity: 0.6;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.log-row-plate {
+    color: #facc15;
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+
+/* Switches & Controls */
+.switch {
+    width: 48px;
+    height: 26px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 100px;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.switch.on {
+    background: var(--purple-main);
+}
+
+.switch::after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.switch.on::after {
+    left: 25px;
+}
+
+/* Detections Gallery */
+.mini-feed-gallery {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    margin-top: 1.5rem;
+}
+
+.mini-thumb {
+    aspect-ratio: 1/1;
+    background: #1a1a1a;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--glass-border);
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.mini-thumb:hover {
+    transform: scale(1.05);
+}
+
+.mini-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

static/js/main.js

@@ -0,0 +1,541 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if we are on dashboard or landing
+    if (document.getElementById('processed-stream')) {
+        initDashboard();
+    }
+});
+
+function initDashboard() {
+    const dropZone = document.getElementById('drop-zone-overlay');
+    const fileInput = document.getElementById('file-input');
+    const streamImg = document.getElementById('processed-stream');
+    const resultsPanel = document.getElementById('results-panel');
+    const miniResultsPanel = document.getElementById('mini-results-panel');
+    const violationBadge = document.getElementById('violation-count-badge');
+
+    // Camera elements
+    const cameraVideo = document.getElementById('camera-video');
+    const cameraCanvas = document.getElementById('camera-canvas');
+
+    // Modal Elements
+    const modal = document.getElementById('detail-modal');
+    const modalThumb = document.getElementById('modal-thumb');
+    const modalPlateThumb = document.getElementById('modal-plate-thumb');
+    const modalPlateText = document.getElementById('modal-plate-text');
+    const modalJson = document.getElementById('modal-json');
+    const closeModal = document.querySelector('.close-modal');
+
+    let knownDetections = new Map(); // Store full object
+    let pollInterval = null;
+    let socket = null;
+    let cameraStream = null;
+    let cameraMode = false;
+    let sessionId = null;
+
+    // --- MODE SELECTION (Using Event Delegation) ---
+    function attachModeButtons() {
+        const uploadBtn = document.getElementById('upload-mode-btn');
+        const cameraBtn = document.getElementById('camera-mode-btn');
+
+        console.log('[DEBUG] Attaching mode buttons...', { uploadBtn, cameraBtn });
+
+        if (uploadBtn) {
+            uploadBtn.onclick = (e) => {
+                e.stopPropagation();
+                console.log('[DEBUG] Upload mode clicked');
+
+                // NEW: Stop any active camera streams before opening the file picker
+                if (cameraMode) {
+                    stopCameraMode();
+                    resetDropZone(); // Re-shows the buttons so the user can choose again if they cancel
+                }
+
+                fileInput.click();
+            };
+            console.log('[DEBUG] Upload button attached');
+        } else {
+            console.error('[DEBUG] Upload button not found!');
+        }
+
+        if (cameraBtn) {
+            cameraBtn.onclick = (e) => {
+                e.stopPropagation();
+                console.log('[DEBUG] Camera mode clicked');
+                startCameraMode();
+            };
+            console.log('[DEBUG] Camera button attached');
+        } else {
+            console.error('[DEBUG] Camera button not found!');
+        }
+    }
+
+
+    // Attach buttons on load
+    console.log('[DEBUG] Initializing dashboard...');
+    attachModeButtons();
+
+    // --- CAMERA MODE ---
+    async function startCameraMode() {
+        try {
+            const liveStatus = document.getElementById('live-status');
+            const liveIndicator = document.getElementById('live-indicator');
+
+            dropZone.innerHTML = '<i class="fas fa-spinner fa-spin" style="font-size:3rem; color:var(--purple-main);"></i><p style="margin-top:10px">Requesting Camera Access...</p>';
+
+            if (liveStatus) liveStatus.textContent = 'REQUESTING CAMERA...';
+            if (liveIndicator) liveIndicator.style.background = '#facc15';
+
+            // Request camera permission
+            cameraStream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    facingMode: 'environment',
+                    width: { ideal: 1280 },
+                    height: { ideal: 720 }
+                }
+            });
+
+            console.log('[DEBUG] Camera stream obtained:', cameraStream);
+
+            cameraVideo.srcObject = cameraStream;
+            cameraMode = true;
+
+            // NEW: Explicitly command the video to play
+            cameraVideo.play().catch(err => console.error('[DEBUG] Video play failed:', err));
+
+            if (liveStatus) liveStatus.textContent = 'CAMERA ACTIVE';
+            if (liveIndicator) liveIndicator.style.background = '#10b981';
+
+            // Hide overlay and show stream
+            dropZone.style.display = 'none';
+            document.querySelector('.feed-card').classList.remove('overlay-active');
+            document.querySelector('.feed-card').classList.add('video-active');
+            streamImg.style.display = 'block';
+            streamImg.style.opacity = '1';
+            streamImg.style.visibility = 'visible';
+            streamImg.style.zIndex = '5';
+
+            console.log('[DEBUG] Stream image element:', streamImg);
+            console.log('[DEBUG] Stream image display:', streamImg.style.display);
+            console.log('[DEBUG] Stream image visibility:', streamImg.style.visibility);
+
+            // Clear UI
+            knownDetections.clear();
+            resultsPanel.innerHTML = '';
+            miniResultsPanel.innerHTML = '';
+            violationBadge.innerText = '0';
+
+            // Initialize Socket.IO
+            console.log('[DEBUG] Initializing Socket.IO...');
+            socket = io();
+
+            console.log('[DEBUG] Registering socket event handlers...');
+
+            socket.on('connect', () => {
+                console.log('[SOCKET] Connected, socket ID:', socket.id);
+                if (liveStatus) liveStatus.textContent = 'SOCKET CONNECTED';
+                sessionId = generateSessionId();
+                console.log('[SOCKET] Emitting start_camera_session with ID:', sessionId);
+                socket.emit('start_camera_session', { session_id: sessionId });
+            });
+
+            socket.on('camera_session_started', (data) => {
+                console.log('[SOCKET] Session started:', data.session_id);
+                console.log('[SOCKET] Socket connected:', socket.connected);
+                if (liveStatus) liveStatus.textContent = 'LIVE CAMERA STREAM';
+                sessionId = data.session_id;
+
+                // Ensure stream image is ready
+                streamImg.style.display = 'block';
+                streamImg.style.visibility = 'visible';
+                streamImg.style.zIndex = '5';
+                console.log('[SOCKET] Stream image prepared for display');
+
+                startCameraCapture();
+            });
+
+            socket.on('processed_frame', (data) => {
+                console.log('[SOCKET] ========== RECEIVED PROCESSED FRAME ==========');
+                console.log('[SOCKET] Data keys:', Object.keys(data));
+                console.log('[SOCKET] Frame length:', data.frame ? data.frame.length : 'no frame');
+                console.log('[SOCKET] Violations:', data.violations ? data.violations.length : 'no violations');
+                console.log('[SOCKET] Stream img element:', streamImg);
+                console.log('[SOCKET] Stream img parent:', streamImg.parentElement);
+
+                // Display processed frame
+                if (data.frame) {
+                    console.log('[SOCKET] Setting image src...');
+                    streamImg.src = data.frame;
+                    streamImg.style.display = 'block';
+                    streamImg.style.visibility = 'visible';
+                    streamImg.style.zIndex = '5';
+                    console.log('[SOCKET] Image updated - src length:', data.frame.length);
+                    console.log('[SOCKET] Image display:', streamImg.style.display);
+                    console.log('[SOCKET] Image visibility:', streamImg.style.visibility);
+                    console.log('[SOCKET] Image computed display:', window.getComputedStyle(streamImg).display);
+                    console.log('[SOCKET] Image computed visibility:', window.getComputedStyle(streamImg).visibility);
+
+                    // Force a reflow
+                    void streamImg.offsetHeight;
+                    console.log('[SOCKET] ========== FRAME UPDATE COMPLETE ==========');
+                } else {
+                    console.error('[SOCKET] No frame data in response!');
+                }
+
+                // Update violations
+                if (data.violations && data.violations.length > 0) {
+                    console.log('[SOCKET] Processing violations:', data.violations);
+                    data.violations.forEach(v => {
+                        if (!knownDetections.has(v.id)) {
+                            knownDetections.set(v.id, v);
+                            updateUI(v, true);
+                        }
+                    });
+                    violationBadge.innerText = knownDetections.size;
+                }
+            });
+
+            socket.on('error', (data) => {
+                console.error('[SOCKET] Error:', data.message);
+                if (liveStatus) liveStatus.textContent = 'ERROR: ' + data.message;
+                if (liveIndicator) liveIndicator.style.background = '#ef4444';
+            });
+
+            socket.on('disconnect', () => {
+                console.log('[SOCKET] Disconnected');
+                if (liveStatus) liveStatus.textContent = 'DISCONNECTED';
+                if (liveIndicator) liveIndicator.style.background = '#ef4444';
+
+                // Try to reconnect after 2 seconds
+                setTimeout(() => {
+                    if (cameraMode && cameraStream) {
+                        console.log('[SOCKET] Attempting to reconnect...');
+                        if (liveStatus) liveStatus.textContent = 'RECONNECTING...';
+                        socket.connect();
+                    }
+                }, 2000);
+            });
+
+        } catch (err) {
+            console.error('Camera access denied:', err);
+            const liveStatus = document.getElementById('live-status');
+            const liveIndicator = document.getElementById('live-indicator');
+            if (liveStatus) liveStatus.textContent = 'CAMERA DENIED';
+            if (liveIndicator) liveIndicator.style.background = '#ef4444';
+
+            dropZone.innerHTML = '<i class="fas fa-exclamation-triangle" style="font-size:3rem; color:#ef4444;"></i><p>Camera Access Denied</p><p style="font-size:0.8rem; opacity:0.6;">Please allow camera permissions</p>';
+            setTimeout(() => {
+                resetDropZone();
+                if (liveStatus) liveStatus.textContent = 'LIVE INFERENCE';
+                if (liveIndicator) liveIndicator.style.background = '#fff';
+            }, 3000);
+        }
+    }
+
+    function startCameraCapture() {
+        const ctx = cameraCanvas.getContext('2d');
+
+        console.log('[DEBUG] Starting camera capture...');
+        console.log('[DEBUG] Video element:', cameraVideo);
+        console.log('[DEBUG] Video ready state:', cameraVideo.readyState);
+
+        function captureFrame() {
+            if (!cameraMode || !cameraStream) {
+                console.log('[DEBUG] Camera mode stopped');
+                return;
+            }
+
+            // Check if video is ready
+            // Check if video is ready AND has valid dimensions
+            if (cameraVideo.readyState < 2 || cameraVideo.videoWidth === 0) {
+                console.log('[DEBUG] Video not ready or width is 0, waiting...');
+                setTimeout(captureFrame, 100);
+                return;
+            }
+
+            // Set canvas size to match video
+            if (cameraCanvas.width !== cameraVideo.videoWidth || cameraCanvas.height !== cameraVideo.videoHeight) {
+                cameraCanvas.width = cameraVideo.videoWidth;
+                cameraCanvas.height = cameraVideo.videoHeight;
+                console.log('[DEBUG] Canvas size set:', cameraCanvas.width, 'x', cameraCanvas.height);
+            }
+
+            // Draw current frame
+            ctx.drawImage(cameraVideo, 0, 0);
+
+            // Convert to base64
+            const frameData = cameraCanvas.toDataURL('image/jpeg', 0.8);
+
+            console.log('[DEBUG] Sending frame, size:', frameData.length, 'bytes');
+
+            // Send to server
+            if (socket && socket.connected) {
+                socket.emit('camera_frame', { frame: frameData });
+                console.log('[DEBUG] Frame emitted to server, socket ID:', socket.id);
+            } else {
+                console.error('[DEBUG] Socket not connected! Socket state:', socket ? socket.connected : 'socket is null');
+            }
+
+            // Capture next frame (adjust FPS here - currently ~10 FPS)
+            setTimeout(captureFrame, 100);
+        }
+
+        // Start immediately if video is ready, otherwise wait for metadata
+        if (cameraVideo.readyState >= 2) {
+            console.log('[DEBUG] Video already ready, starting capture');
+            captureFrame();
+        } else {
+            console.log('[DEBUG] Waiting for video metadata...');
+            cameraVideo.addEventListener('loadedmetadata', () => {
+                console.log('[DEBUG] Video metadata loaded, starting capture');
+                captureFrame();
+            }, { once: true });
+
+            // Fallback: start after 1 second anyway
+            setTimeout(() => {
+                if (cameraVideo.readyState >= 2) {
+                    console.log('[DEBUG] Fallback: starting capture after timeout');
+                    captureFrame();
+                }
+            }, 1000);
+        }
+    }
+
+    function stopCameraMode() {
+        cameraMode = false;
+        if (cameraStream) {
+            cameraStream.getTracks().forEach(track => track.stop());
+            cameraStream = null;
+        }
+        if (socket) {
+            socket.disconnect();
+            socket = null;
+        }
+    }
+
+    function generateSessionId() {
+        return Math.random().toString(36).substring(2, 10);
+    }
+
+    function resetDropZone() {
+        console.log('[DEBUG] Resetting drop zone...');
+        dropZone.innerHTML = `
+            <i class="fas fa-plus-circle" style="font-size:3.5rem; color: var(--purple-main); margin-bottom:1rem;"></i>
+            <h3 style="font-weight: 700;">Deploy Synaptic Node</h3>
+            <p style="opacity: 0.6; font-size: 0.9rem; margin-bottom: 1.5rem;">Choose your input source</p>
+            <div style="display: flex; gap: 1rem; margin-bottom: 1rem; z-index: 10; position: relative;">
+                <button id="upload-mode-btn" class="mode-btn" style="padding: 0.8rem 1.5rem; background: rgba(138, 79, 255, 0.2); border: 2px solid var(--purple-main); border-radius: 10px; color: #fff; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 0.9rem;"
+                    onmouseover="this.style.background='rgba(138, 79, 255, 0.4)'"
+                    onmouseout="this.style.background='rgba(138, 79, 255, 0.2)'">
+                    <i class="fas fa-upload"></i> Upload Video
+                </button>
+                <button id="camera-mode-btn" class="mode-btn" style="padding: 0.8rem 1.5rem; background: rgba(138, 79, 255, 0.2); border: 2px solid var(--purple-main); border-radius: 10px; color: #fff; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 0.9rem;"
+                    onmouseover="this.style.background='rgba(138, 79, 255, 0.4)'"
+                    onmouseout="this.style.background='rgba(138, 79, 255, 0.2)'">
+                    <i class="fas fa-video"></i> Live Camera
+                </button>
+            </div>
+        `;
+        dropZone.style.display = 'flex';
+        document.querySelector('.feed-card').classList.add('overlay-active');
+        document.querySelector('.feed-card').classList.remove('video-active');
+        console.log('[DEBUG] Re-attaching buttons after reset...');
+        attachModeButtons();
+    }
+
+    // --- UPLOAD HANDLING ---
+    dropZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        if (!cameraMode) {
+            dropZone.style.background = 'rgba(138, 79, 255, 0.2)';
+        }
+    });
+    dropZone.addEventListener('dragleave', () => {
+        if (!cameraMode) {
+            dropZone.style.background = 'rgba(0,0,0,0.6)';
+        }
+    });
+    dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        if (e.dataTransfer.files.length && !cameraMode) {
+            handleUpload(e.dataTransfer.files[0]);
+        }
+    });
+
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length) handleUpload(e.target.files[0]);
+    });
+
+    async function handleUpload(file) {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        // NEW: Stop camera if it's running before starting upload
+        if (cameraMode) {
+            stopCameraMode();
+        }
+
+        dropZone.innerHTML = '<i class="fas fa-spinner fa-spin" style="font-size:3rem; color:var(--purple-main);"></i><p style="margin-top:10px">Ingesting Neural Feed...</p>';
+
+        try {
+            const response = await fetch('/upload', { method: 'POST', body: formData });
+            const data = await response.json();
+
+            if (data.filename) {
+                // Ensure the upload overlay is hidden
+                dropZone.style.display = 'none';
+                document.querySelector('.feed-card').classList.remove('overlay-active');
+                document.querySelector('.feed-card').classList.add('video-active');
+
+                // NEW: Explicitly make the stream image visible (Copying logic from Camera Mode)
+                streamImg.src = `/video_feed/${data.filename}/${data.session_id}`;
+                streamImg.style.display = 'block';
+                streamImg.style.opacity = '1';
+                streamImg.style.visibility = 'visible';
+                streamImg.style.zIndex = '5';
+
+                console.log('[DEBUG] Upload successful, showing stream:', streamImg.src);
+
+                // Clear UI
+                knownDetections.clear();
+                resultsPanel.innerHTML = '';
+                miniResultsPanel.innerHTML = '';
+                violationBadge.innerText = '0';
+
+                // Start Polling
+                if (pollInterval) clearInterval(pollInterval);
+                pollInterval = setInterval(pollViolations, 1000);
+            }
+        } catch (err) {
+            console.error(err);
+            dropZone.innerHTML = '<i class="fas fa-exclamation-triangle" style="font-size:3rem; color:#ef4444;"></i><p>Connection Refused</p>';
+        }
+    }
+
+    // --- POLLING LOGIC ---
+    async function pollViolations() {
+        try {
+            const response = await fetch('/get_violations');
+            const data = await response.json(); // Array of violations
+
+            data.forEach(v => {
+                // If new or updated (e.g., OCR finished)
+                const stored = knownDetections.get(v.id);
+                const isNew = !stored;
+                const isUpdated = stored && (stored.plate_number !== v.plate_number);
+
+                if (isNew || isUpdated) {
+                    knownDetections.set(v.id, v);
+                    updateUI(v, isNew);
+                }
+            });
+            violationBadge.innerText = knownDetections.size;
+        } catch (err) { console.error("Sync Error", err); }
+    }
+
+    function updateUI(v, isNew) {
+        // If it's an update, remove the old row first
+        if (!isNew) {
+            const oldRow = document.getElementById(`log-${v.id}`);
+            if (oldRow) oldRow.remove();
+        }
+
+        // Create Log Row
+        const row = document.createElement('div');
+        row.id = `log-${v.id}`;
+
+        const plateDisplay = v.plate_number === "Scanning..." ?
+            `<span class="log-row-plate" style="color:var(--text-dim);"><i class="fas fa-circle-notch fa-spin"></i> Reading...</span>` :
+            `<span class="log-row-plate">${v.plate_number}</span>`;
+
+        row.className = 'log-row';
+        row.innerHTML = `
+            <div class="log-row-header">
+                <span class="log-row-title">⚠ NO HELMET DETECTED</span>
+                <span class="log-row-time">${v.timestamp}</span>
+            </div>
+            <div class="log-row-meta">
+                <span class="log-row-id">ID: ${v.id}</span>
+                ${plateDisplay}
+            </div>
+        `;
+
+        row.onclick = () => showDetail(v);
+
+        // Prepend to list
+        resultsPanel.prepend(row);
+
+        // Add to Mini Gallery (only if new)
+        if (isNew) {
+            const thumb = document.createElement('div');
+            thumb.className = 'mini-thumb';
+            thumb.innerHTML = `<img src="${v.image_url}" style="width:100%; height:100%; object-fit:cover;">`;
+            thumb.onclick = () => showDetail(knownDetections.get(v.id)); // get latest data on click
+            miniResultsPanel.prepend(thumb);
+
+            // Limit gallery items
+            if (miniResultsPanel.children.length > 8) {
+                miniResultsPanel.removeChild(miniResultsPanel.lastChild);
+            }
+        }
+    }
+
+    function syntaxHighlightJSON(obj) {
+        // Create a table view for better mobile responsiveness
+        let tableHTML = '<table class="json-table">';
+
+        for (const [key, value] of Object.entries(obj)) {
+            let displayValue = value;
+            let valueClass = 'json-str';
+
+            if (typeof value === 'number') {
+                valueClass = 'json-num';
+            } else if (typeof value === 'boolean') {
+                valueClass = 'json-bool';
+            } else if (value === null) {
+                valueClass = 'json-null';
+                displayValue = 'null';
+            } else if (typeof value === 'string' && value.startsWith('http')) {
+                valueClass = 'json-url';
+                displayValue = `<a href="${value}" target="_blank" style="color: #38bdf8; text-decoration: underline;">${value}</a>`;
+            } else if (typeof value === 'object') {
+                displayValue = JSON.stringify(value, null, 2);
+            }
+
+            tableHTML += `
+                <tr>
+                    <td><span class="json-key">${key}</span></td>
+                    <td><span class="${valueClass}">${displayValue}</span></td>
+                </tr>
+            `;
+        }
+
+        tableHTML += '</table>';
+        return tableHTML;
+    }
+
+    function showDetail(v) {
+        // Refetch latest from map in case OCR updated while modal was closed
+        const latest = knownDetections.get(v.id);
+
+        modalThumb.src = latest.image_url;
+
+        // Handle Plate Image
+        if (latest.plate_image_url) {
+            modalPlateThumb.src = latest.plate_image_url;
+            modalPlateThumb.style.display = 'block';
+        } else {
+            modalPlateThumb.style.display = 'none';
+            modalPlateThumb.src = '';
+        }
+
+        modalPlateText.innerText = latest.plate_number || "----";
+
+        // Syntax highlighted JSON
+        modalJson.innerHTML = syntaxHighlightJSON(latest);
+
+        modal.style.display = 'flex';
+    }
+
+    closeModal.onclick = () => modal.style.display = 'none';
+    window.onclick = (e) => { if (e.target == modal) modal.style.display = 'none'; };
+}

templates/camera_debug.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Camera Debug</title>
+    <style>
+        body {
+            background: #000;
+            color: #fff;
+            font-family: monospace;
+            padding: 20px;
+        }
+
+        .container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+
+        video,
+        img {
+            width: 100%;
+            border: 2px solid #0f0;
+        }
+
+        .info {
+            background: #222;
+            padding: 10px;
+            margin: 10px 0;
+        }
+
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Camera Stream Debug</h1>
+    <button onclick="startTest()">Start Camera Test</button>
+    <button onclick="stopTest()">Stop Test</button>
+
+    <div class="container">
+        <div>
+            <h3>Raw Camera Feed</h3>
+            <video id="camera" autoplay playsinline muted></video>
+            <div class="info" id="camera-info">Not started</div>
+        </div>
+
+        <div>
+            <h3>Processed Stream (from server)</h3>
+            <img id="processed" src="" alt="Waiting for processed frames...">
+            <div class="info" id="processed-info">Not started</div>
+        </div>
+    </div>
+
+    <div class="info">
+        <h3>Console Log</h3>
+        <div id="log" style="max-height: 300px; overflow-y: auto;"></div>
+    </div>
+
+    <canvas id="canvas" style="display:none;"></canvas>
+
+    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
+    <script>
+        let stream = null;
+        let socket = null;
+        let capturing = false;
+
+        const camera = document.getElementById('camera');
+        const processed = document.getElementById('processed');
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const logDiv = document.getElementById('log');
+
+        function log(msg) {
+            const time = new Date().toLocaleTimeString();
+            logDiv.innerHTML += `[${time}] ${msg}<br>`;
+            logDiv.scrollTop = logDiv.scrollHeight;
+            console.log(msg);
+        }
+
+        async function startTest() {
+            try {
+                log('Requesting camera access...');
+                stream = await navigator.mediaDevices.getUserMedia({
+                    video: { width: 640, height: 480 }
+                });
+
+                camera.srcObject = stream;
+                document.getElementById('camera-info').textContent = 'Camera active';
+                log('Camera started successfully');
+
+                // Connect socket
+                log('Connecting to Socket.IO...');
+                socket = io();
+
+                socket.on('connect', () => {
+                    log('Socket connected: ' + socket.id);
+                    socket.emit('start_camera_session', { session_id: 'debug_test' });
+                });
+
+                socket.on('camera_session_started', (data) => {
+                    log('Session started: ' + data.session_id);
+                    startCapture();
+                });
+
+                socket.on('processed_frame', (data) => {
+                    log('Received processed frame, size: ' + data.frame.length);
+                    processed.src = data.frame;
+                    document.getElementById('processed-info').textContent = 'Last update: ' + new Date().toLocaleTimeString();
+                });
+
+                socket.on('error', (data) => {
+                    log('ERROR: ' + data.message);
+                });
+
+            } catch (err) {
+                log('ERROR: ' + err.message);
+            }
+        }
+
+        function startCapture() {
+            capturing = true;
+            log('Starting frame capture...');
+            captureFrame();
+        }
+
+        function captureFrame() {
+            if (!capturing) return;
+
+            if (camera.readyState < 2) {
+                setTimeout(captureFrame, 100);
+                return;
+            }
+
+            canvas.width = camera.videoWidth;
+            canvas.height = camera.videoHeight;
+            ctx.drawImage(camera, 0, 0);
+
+            const frameData = canvas.toDataURL('image/jpeg', 0.8);
+
+            if (socket && socket.connected) {
+                socket.emit('camera_frame', { frame: frameData });
+                log('Sent frame: ' + frameData.length + ' bytes');
+            }
+
+            setTimeout(captureFrame, 500); // 2 FPS for debugging
+        }
+
+        function stopTest() {
+            capturing = false;
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+                stream = null;
+            }
+            if (socket) {
+                socket.disconnect();
+                socket = null;
+            }
+            log('Test stopped');
+        }
+    </script>
+</body>
+
+</html>

templates/dashboard.html

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard | AI Vision</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+
+<body class="dashboard-body">
+    <div class="liquid-container">
+        <div class="liquid-bg"></div>
+    </div>
+    <div class="grain-overlay"></div>
+
+    <div class="dashboard-container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <a href="/" class="nav-icon"><i class="fas fa-house"></i></a>
+            <div class="nav-icon active"><i class="fas fa-th-large"></i></div>
+            <div class="nav-icon"><i class="fas fa-chart-line"></i></div>
+            <div class="nav-icon mobile-hide"><i class="fas fa-gear"></i></div>
+        </aside>
+
+        <main class="main-wrapper">
+            <!-- Header -->
+            <header class="dashboard-header">
+                <div class="user-info">
+                    <h2 style="font-weight: 800; letter-spacing: -0.02em;">Synaptic Dashboard</h2>
+                    <div class="system-stats">
+                        <div class="stat-item"><i class="fas fa-memory" style="color: #60a5fa;"></i> RF-DETR ACTIVE
+                        </div>
+                        <div class="stat-item"><i class="fas fa-eye" style="color: #facc15;"></i> OCR ON</div>
+                    </div>
+                </div>
+                <div class="header-actions">
+                    <button class="add-btn mobile-hide">EXPORT LOGS</button>
+                </div>
+            </header>
+
+            <div class="dashboard-grid">
+                <!-- Video Feed -->
+                <div class="feed-card card overlay-active" style="position: relative;">
+                    <div class="live-badge" style="position: absolute; top: 20px; left: 20px; z-index: 20;">
+                        <span id="live-indicator"
+                            style="display:inline-block; width:8px; height:8px; background:#fff; border-radius:50%; animation: pulse 1.5s infinite;"></span>
+                        <span id="live-status">LIVE INFERENCE</span>
+                    </div>
+                    <img id="processed-stream" src="" alt="Neural Stream Output"
+                        style="width:100%; height:100%; object-fit:contain; background: #000; display: none; position: absolute; top: 0; left: 0; z-index: 1;">
+                    <canvas id="camera-canvas" style="display:none;"></canvas>
+                    <video id="camera-video" autoplay playsinline muted
+                        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1;"></video>
+
+                    <!-- Upload Overlay -->
+                    <div id="drop-zone-overlay"
+                        style="position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; background:rgba(0,0,0,0.6); text-align:center; padding: 2rem; z-index: 10;">
+                        <i class="fas fa-plus-circle"
+                            style="font-size:3.5rem; color: var(--purple-main); margin-bottom:1rem;"></i>
+                        <h3 style="font-weight: 700;">Deploy Synaptic Node</h3>
+                        <p style="opacity: 0.6; font-size: 0.9rem; margin-bottom: 1.5rem;">Choose your input source</p>
+
+                        <!-- Mode Selection Buttons -->
+                        <div class="mode-btn-wrap"
+                            style="display: flex; gap: 1rem; margin-bottom: 1rem; z-index: 10; position: relative;">
+                            <button id="upload-mode-btn" class="mode-btn"
+                                style="padding: 0.8rem 1.5rem; background: rgba(138, 79, 255, 0.2); border: 2px solid var(--purple-main); border-radius: 10px; color: #fff; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 0.9rem;"
+                                onmouseover="this.style.background='rgba(138, 79, 255, 0.4)'"
+                                onmouseout="this.style.background='rgba(138, 79, 255, 0.2)'">
+                                <i class="fas fa-upload"></i> Upload Video
+                            </button>
+                            <button id="camera-mode-btn" class="mode-btn"
+                                style="padding: 0.8rem 1.5rem; background: rgba(138, 79, 255, 0.2); border: 2px solid var(--purple-main); border-radius: 10px; color: #fff; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 0.9rem;"
+                                onmouseover="this.style.background='rgba(138, 79, 255, 0.4)'"
+                                onmouseout="this.style.background='rgba(138, 79, 255, 0.2)'">
+                                <i class="fas fa-video"></i> Live Camera
+                            </button>
+                        </div>
+
+                        <input type="file" id="file-input" hidden accept="video/*">
+                    </div>
+                </div>
+
+                <!-- Side Panel (Logs) -->
+                <div class="side-panel-wrapper" style="display:flex; flex-direction:column; gap:1.5rem;">
+                    <div class="chart-card card">
+                        <div style="display:flex; justify-content:space-between; margin-bottom:1rem;">
+                            <h3 style="font-size: 1.1rem; font-weight: 700;">Real-time Analytics</h3>
+                            <span id="violation-count-badge"
+                                style="background: rgba(239, 68, 68, 0.2); color: #ef4444; padding: 2px 8px; border-radius: 100px; font-size: 0.7rem; font-weight: 800;">0</span>
+                        </div>
+
+                        <!-- Scrollable Log List -->
+                        <div id="results-panel"
+                            style="flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; max-height: 400px; padding-right: 5px;">
+                            <!-- Items injected by JS -->
+                            <div style="text-align:center; opacity:0.5; padding:20px; font-size:0.8rem;">
+                                Waiting for data stream...
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Mini Gallery -->
+                    <div class="side-card card" style="height: auto; min-height: 150px;">
+                        <h4
+                            style="font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom:10px;">
+                            Evidence Cache</h4>
+                        <div class="mini-feed-gallery" id="mini-results-panel">
+                            <!-- Thumbs injected by JS -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Enhanced Modal -->
+    <div id="detail-modal" class="modal"
+        style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:3000; backdrop-filter:blur(10px);">
+        <div
+            style="width:90%; max-width:1100px; margin:5vh auto; background: #1a1a1a; border: 1px solid var(--glass-border); padding:2rem; border-radius:30px; position:relative; display: flex; flex-direction: column; height: 90vh;">
+
+            <span class="close-modal"
+                style="position:absolute; top:20px; right:30px; font-size:2rem; cursor:pointer; color: #fff;">&times;</span>
+            <h2 style="margin-bottom:1.5rem; font-weight: 800; color:#fff;">Violation Detail View</h2>
+
+            <div class="modal-inner-grid"
+                style="display:grid; grid-template-columns: 2fr 1fr; gap:2rem; flex: 1; overflow: hidden;">
+                <!-- Main Rider Image -->
+                <div class="modal-main-img-wrap"
+                    style="background: #000; border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center;">
+                    <img id="modal-thumb" src="" style="max-width:100%; max-height: 100%; object-fit: contain;">
+                </div>
+
+                <!-- Right Sidebar: Plate & Data -->
+                <div style="display: flex; flex-direction: column; gap: 1.5rem; overflow: hidden;">
+
+                    <!-- Plate Zoom -->
+                    <div class="modal-plate-box"
+                        style="background: #252525; padding: 1rem; border-radius: 15px; border: 1px solid var(--glass-border);">
+                        <h4
+                            style="color: var(--text-dim); font-size: 0.8rem; margin-bottom: 0.5rem; text-transform: uppercase;">
+                            License Plate OCR</h4>
+                        <div
+                            style="height: 100px; background: #000; border-radius: 8px; margin-bottom: 0.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+                            <img id="modal-plate-thumb" src="" alt="No Plate Detected"
+                                style="max-height: 100%; max-width: 100%; object-fit: contain;">
+                        </div>
+                        <div id="modal-plate-text"
+                            style="font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; color: #facc15; text-align: center; letter-spacing: 2px;">
+                            ----
+                        </div>
+                    </div>
+
+                    <!-- JSON Data -->
+                    <div class="modal-json-box"
+                        style="flex: 1; background:rgba(0,0,0,0.45); padding:1rem; border-radius:15px; border: 1px solid var(--glass-border); overflow-y: auto; min-height: 0;">
+                        <div
+                            style="font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.5rem;">
+                            Detection Data</div>
+                        <div id="modal-json" class="json-viewer"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liquid Vision | RF-DETR</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+
+<body>
+    <div class="grain-overlay"></div>
+
+    <div class="liquid-container">
+        <div class="liquid-bg"></div>
+    </div>
+
+    <!-- Landing Page Hero -->
+    <section class="hero">
+        <p class="made-by" style="margin-bottom: 2rem;">AI</p>
+        <h1>Computer<br>Vision</h1>
+        <p class="subtitle" style="max-width: 600px; margin: 0 auto; line-height: 1.6;">
+            Empowering traffic safety with high-precision RF-DETR analytics.
+            Real-time helmet detection, plate recognition, and mobile nodes.
+        </p>
+        <div class="made-by" style="margin-top: 3rem;">MADE BY WEBASHLAR</div>
+        <div class="scroll-hint" onclick="document.querySelector('.container').scrollIntoView({behavior: 'smooth'})">
+            <i class="fas fa-chevron-down"></i>
+        </div>
+    </section>
+
+    <!-- Main Dashboard -->
+    <div class="container" id="dashboard">
+        <div class="dashboard-grid">
+            <!-- Central Feed Section -->
+            <div class="main-feed">
+                <section class="card vision-card">
+                    <div class="card-header">
+                        <h2><i class="fas fa-microchip"></i> Neural Core</h2>
+                        <div class="live-indicator"><span class="dot"></span> LIVE</div>
+                    </div>
+
+                    <!-- Mode Selector -->
+                    <div class="mode-selector" style="display: flex; gap: 10px; margin-bottom: 1rem;">
+                        <button class="mode-btn active" id="upload-mode-btn" onclick="switchInputMode('upload')">
+                            <i class="fas fa-cloud-upload-alt"></i> Upload Video
+                        </button>
+                        <button class="mode-btn" id="camera-mode-btn" onclick="switchInputMode('camera')">
+                            <i class="fas fa-video"></i> Live Camera
+                        </button>
+                    </div>
+
+                    <!-- Upload Mode -->
+                    <div class="upload-area" id="drop-zone">
+                        <div class="upload-icon">
+                            <i class="fas fa-cloud-upload-alt"></i>
+                        </div>
+                        <p class="upload-title">Ingest Video Evidence</p>
+                        <p class="upload-subtitle">Drag & Drop or Click to Ingest</p>
+                        <input type="file" id="file-input" hidden accept="video/*">
+                    </div>
+
+                    <!-- Camera Mode -->
+                    <div class="camera-area" id="camera-zone" style="display: none;">
+                        <video id="camera-preview" autoplay playsinline
+                            style="width: 100%; border-radius: 16px; background: #000;"></video>
+                        <canvas id="camera-canvas" style="display: none;"></canvas>
+                        <div style="display: flex; gap: 10px; margin-top: 1rem;">
+                            <button class="btn btn-primary" id="start-camera-btn" onclick="startCamera()">
+                                <i class="fas fa-play"></i> Start Camera
+                            </button>
+                            <button class="btn btn-danger" id="stop-camera-btn" onclick="stopCamera()"
+                                style="display: none;">
+                                <i class="fas fa-stop"></i> Stop Camera
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="video-preview-wrapper" id="video-wrapper">
+                        <img id="processed-stream" src="" alt="Neural Stream Output">
+                    </div>
+                </section>
+
+                <section class="card log-card">
+                    <h2><i class="fas fa-terminal"></i> System Logs</h2>
+                    <div id="logs">
+                        <div class="log-entry system">[SYSTEM] Kernal initialized. Awaiting neural link...</div>
+                    </div>
+                </section>
+            </div>
+
+            <!-- Side Panels -->
+            <div class="side-panels">
+                <!-- Live Detection Panel -->
+                <section class="card results-card">
+                    <div class="card-header">
+                        <h2><i class="fas fa-bolt"></i> Detections</h2>
+                        <div id="violation-count" class="count-badge">0</div>
+                    </div>
+                    <div id="results-panel" class="results-list">
+                        <!-- Detection cards will be injected here -->
+                        <div class="empty-state">
+                            <i class="fas fa-radar"></i>
+                            <p>Scanning for violations...</p>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Mobile Connection Card -->
+                <section class="card mobile-card">
+                    <h2><i class="fas fa-mobile-screen-button"></i> Mobile Node</h2>
+                    <div class="qr-container">
+                        <div class="qr-box">
+                            <i class="fas fa-qrcode"></i>
+                        </div>
+                        <div class="qr-label">NODE HANDSHAKE</div>
+                    </div>
+                    <div class="connection-status">
+                        <div class="status-row">
+                            <span>SURVEILLANCE LINK</span>
+                            <span class="status-offline">OFFLINE</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill"></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </div>
+
+    <!-- Event Detail Modal -->
+    <div id="detail-modal" class="modal">
+        <div class="modal-content card">
+            <span class="close-modal">&times;</span>
+            <h2><i class="fas fa-search-plus"></i> Violation Detail</h2>
+            <div class="modal-body">
+                <div class="modal-image">
+                    <img id="modal-thumb" src="" alt="Violation Full Resolution">
+                </div>
+                <div class="modal-info">
+                    <div id="modal-json" class="json-preview"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+
+</html>

templates/landing.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Computer Vision | Webashlar</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+</head>
+
+<body>
+    <div id="canvas-container"></div>
+    <div class="grain-overlay"></div>
+
+    <section class="hero-content">
+        <p class="made-by top">AI</p>
+        <h1 class="landing-title">
+            Computer<br>Vision</h1>
+        <p class="landing-subtitle">
+            Next-gen traffic safety with high-precision RF-DETR analytics.
+            Real-time helmet detection and smart mobile nodes.
+        </p>
+        <a href="/dashboard" class="enter-btn">ENTER DASHBOARD</a>
+        <div class="made-by bottom">MADE BY
+            WEBASHLAR</div>
+    </section>
+
+    <script>
+        // Simple Three.js Liquid Gradient Shader
+        const scene = new THREE.Scene();
+        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const renderer = new THREE.WebGLRenderer({ alpha: true });
+        document.getElementById('canvas-container').appendChild(renderer.domElement);
+
+        const uniforms = {
+            u_time: { value: 0 },
+            u_resolution: { value: new THREE.Vector2() }
+        };
+
+        const geometry = new THREE.PlaneGeometry(2, 2);
+        const material = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            vertexShader: `
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    gl_Position = vec4(position, 1.0);
+                }
+            `,
+            fragmentShader: `
+                uniform float u_time;
+                uniform vec2 u_resolution;
+                varying vec2 vUv;
+
+                void main() {
+                    vec2 p = vUv * 2.0 - 1.0;
+                    p.x *= u_resolution.x / u_resolution.y;
+
+                    float t = u_time * 0.2;
+                    
+                    vec3 col1 = vec3(0.54, 0.36, 0.96); // #8b5cf6
+                    vec3 col2 = vec3(0.93, 0.28, 0.60); // #ec4899
+                    vec3 col3 = vec3(0.96, 0.25, 0.37); // #f43f5e
+                    vec3 col4 = vec3(0.98, 0.45, 0.09); // #f97316
+
+                    float d1 = length(p - vec2(sin(t)*0.7, cos(t*0.7)*0.5));
+                    float d2 = length(p - vec2(cos(t*0.8)*0.8, sin(t*0.6)*0.6));
+                    float d3 = length(p - vec2(sin(t*1.2)*0.5, cos(t*0.4*0.8)));
+                    
+                    float v = 0.0;
+                    v += 1.0 / (1.0 + d1 * 2.0);
+                    v += 1.0 / (1.0 + d2 * 1.5);
+                    v += 1.0 / (1.0 + d3 * 2.0);
+
+                    vec3 color = mix(col1, col2, sin(d1 + t) * 0.5 + 0.5);
+                    color = mix(color, col3, sin(d2 - t*0.5) * 0.5 + 0.5);
+                    color = mix(color, col4, 1.0 / (1.0 + length(p) * 2.0));
+
+                    gl_FragColor = vec4(color * (v * 0.5 + 0.5), 1.0);
+                }
+            `
+        });
+
+        const mesh = new THREE.Mesh(geometry, material);
+        scene.add(mesh);
+
+        function resize() {
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+            renderer.setSize(w, h);
+            uniforms.u_resolution.value.set(w, h);
+        }
+
+        window.addEventListener('resize', resize);
+        resize();
+
+        function animate(t) {
+            uniforms.u_time.value = t * 0.001;
+            renderer.render(scene, camera);
+            requestAnimationFrame(animate);
+        }
+        requestAnimationFrame(animate);
+    </script>
+</body>
+
+</html>

templates/mobile.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mobile Vision Node</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            margin: 0;
+            background: #000;
+            color: #fff;
+            overflow: hidden;
+        }
+
+        video {
+            width: 100vw;
+            height: 100vh;
+            object-fit: cover;
+            position: absolute;
+            z-index: 1;
+        }
+
+        .overlay {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            z-index: 10;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(10px);
+            padding: 15px;
+            border-radius: 12px;
+            border-left: 4px solid #8b5cf6;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="grain-overlay" style="z-index: 5;"></div>
+    <div class="overlay">
+        <div id="status" style="font-weight: 800; font-size: 0.9rem; letter-spacing: 0.05em;"><i
+                class="fas fa-circle-notch fa-spin"></i> INITIALIZING NODE</div>
+        <div style="font-size: 0.7rem; opacity: 0.7; margin-top: 6px; font-family: 'JetBrains Mono', monospace;">ID: {{
+            session_id }}</div>
+    </div>
+    <video id="webcam" autoplay playsinline></video>
+    <canvas id="snapshot" style="display: none;"></canvas>
+
+    <script>
+        const video = document.getElementById('webcam');
+        const canvas = document.getElementById('snapshot');
+        const status = document.getElementById('status');
+        const sessionId = "{{ session_id }}";
+
+        async function startNode() {
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
+                video.srcObject = stream;
+                status.innerHTML = '<i class="fas fa-wifi" style="margin-right:5px;"></i> STREAMING ACTIVE';
+                status.style.color = "#10b981";
+
+                setInterval(sendFrame, 200); // 5 FPS
+            } catch (err) {
+                status.innerHTML = '<i class="fas fa-exclamation-triangle"></i> ACCESS DENIED';
+                status.style.color = "#ef4444";
+            }
+        }
+
+        function sendFrame() {
+            const context = canvas.getContext('2d');
+            canvas.width = video.videoWidth / 2; // Resize for speed
+            canvas.height = video.videoHeight / 2;
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+            canvas.toBlob(async (blob) => {
+                const formData = new FormData();
+                formData.append('frame', blob);
+                try {
+                    await fetch(`/upload_frame/${sessionId}`, { method: 'POST', body: formData });
+                } catch (e) { }
+            }, 'image/jpeg', 0.6);
+        }
+
+        startNode();
+    </script>
+</body>
+
+</html>