Add new AI detectors and modernize UI

backend/requirements-render.txt

@@ -16,3 +16,5 @@ firebase-admin
 a2wsgi
 scikit-learn
 numpy
+passlib[bcrypt]
+python-jose[cryptography]

frontend/src/AbandonedVehicleDetector.jsx

@@ -0,0 +1,174 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { detectorsApi } from './api';
+
+const AbandonedVehicleDetector = ({ onBack }) => {
+    const videoRef = useRef(null);
+    const canvasRef = useRef(null);
+    const [isDetecting, setIsDetecting] = useState(false);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        let interval;
+        if (isDetecting) {
+            startCamera();
+            interval = setInterval(detectFrame, 2000); // Check every 2 seconds
+        } else {
+            stopCamera();
+            if (interval) clearInterval(interval);
+            if (canvasRef.current) {
+                const ctx = canvasRef.current.getContext('2d');
+                ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+            }
+        }
+        return () => {
+            stopCamera();
+            if (interval) clearInterval(interval);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isDetecting]);
+
+    const startCamera = async () => {
+        setError(null);
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    facingMode: 'environment',
+                    width: { ideal: 640 },
+                    height: { ideal: 480 }
+                }
+            });
+            if (videoRef.current) {
+                videoRef.current.srcObject = stream;
+            }
+        } catch (err) {
+            setError("Could not access camera: " + err.message);
+            setIsDetecting(false);
+        }
+    };
+
+    const stopCamera = () => {
+        if (videoRef.current && videoRef.current.srcObject) {
+            const tracks = videoRef.current.srcObject.getTracks();
+            tracks.forEach(track => track.stop());
+            videoRef.current.srcObject = null;
+        }
+    };
+
+    const drawDetections = (detections, context) => {
+        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+
+        context.lineWidth = 4;
+        context.font = 'bold 18px Arial';
+
+        if (!detections || detections.length === 0) return;
+
+        detections.forEach(det => {
+            const { label, confidence, box } = det;
+
+            // For Abandoned Vehicle (likely zero-shot, no box)
+            // But if we had box...
+            if (box && box.length === 4) {
+                 const [x1, y1, x2, y2] = box;
+                 context.strokeStyle = '#A9A9A9'; // DarkGray
+                 context.strokeRect(x1, y1, x2 - x1, y2 - y1);
+
+                 context.fillStyle = 'rgba(0,0,0,0.5)';
+                 const text = `${label} ${(confidence * 100).toFixed(0)}%`;
+                 const textWidth = context.measureText(text).width;
+                 context.fillRect(x1, y1 > 20 ? y1 - 25 : y1, textWidth + 10, 25);
+
+                 context.fillStyle = '#FFFFFF';
+                 context.fillText(text, x1 + 5, y1 > 20 ? y1 - 7 : y1 + 18);
+            } else {
+                 context.fillStyle = 'rgba(169, 169, 169, 0.8)'; // DarkGray
+                 const text = `${label} ${(confidence * 100).toFixed(0)}%`;
+                 context.fillText(text, 20, 40);
+            }
+        });
+    };
+
+    const detectFrame = async () => {
+        if (!videoRef.current || !canvasRef.current || !isDetecting) return;
+
+        const video = videoRef.current;
+        if (video.readyState !== 4) return;
+
+        const canvas = canvasRef.current;
+        const context = canvas.getContext('2d');
+
+        if (canvas.width !== video.videoWidth || canvas.height !== video.videoHeight) {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+        }
+
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+        canvas.toBlob(async (blob) => {
+            if (!blob) return;
+
+            const formData = new FormData();
+            formData.append('image', blob, 'frame.jpg');
+
+            try {
+                const data = await detectorsApi.abandonedVehicle(formData);
+                if (data && data.detections) {
+                    drawDetections(data.detections, context);
+                }
+            } catch (err) {
+                console.error("Detection error:", err);
+            }
+        }, 'image/jpeg', 0.8);
+    };
+
+    return (
+        <div className="mt-6 flex flex-col items-center w-full">
+            <h2 className="text-xl font-semibold mb-4 text-center">Abandoned Vehicle Detector</h2>
+
+            {error && <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">{error}</div>}
+
+            <div className="relative w-full max-w-md bg-black rounded-lg overflow-hidden shadow-lg mb-6">
+                <div className="relative">
+                     <video
+                        ref={videoRef}
+                        autoPlay
+                        playsInline
+                        muted
+                        className="w-full h-auto block"
+                        style={{ opacity: isDetecting ? 1 : 0.5 }}
+                    />
+                    <canvas
+                        ref={canvasRef}
+                        className="absolute top-0 left-0 w-full h-full pointer-events-none"
+                    />
+                    {!isDetecting && (
+                        <div className="absolute inset-0 flex items-center justify-center">
+                            <p className="text-white font-medium bg-black bg-opacity-50 px-4 py-2 rounded">
+                                Camera Paused
+                            </p>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            <button
+                onClick={() => setIsDetecting(!isDetecting)}
+                className={`w-full max-w-md py-3 px-4 rounded-lg text-white font-medium shadow-md transition transform active:scale-95 ${isDetecting ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'}`}
+            >
+                {isDetecting ? 'Stop Detection' : 'Start Live Detection'}
+            </button>
+
+            <p className="text-sm text-gray-500 mt-2 text-center max-w-md">
+                Identifies abandoned, rusted, or wrecked vehicles.
+            </p>
+
+            <button
+                onClick={onBack}
+                className="mt-6 text-gray-600 hover:text-gray-900 underline"
+            >
+                Back to Home
+            </button>
+        </div>
+    );
+};
+
+export default AbandonedVehicleDetector;

frontend/src/App.jsx

@@ -34,6 +34,12 @@ const SmartScanner = React.lazy(() => import('./SmartScanner'));
 const GrievanceAnalysis = React.lazy(() => import('./views/GrievanceAnalysis'));
 const NoiseDetector = React.lazy(() => import('./NoiseDetector'));
 const CivicEyeDetector = React.lazy(() => import('./CivicEyeDetector'));
+const WasteDetector = React.lazy(() => import('./WasteDetector'));
+const WaterLeakDetector = React.lazy(() => import('./WaterLeakDetector'));
+const CrowdDetector = React.lazy(() => import('./CrowdDetector'));
+const AccessibilityDetector = React.lazy(() => import('./AccessibilityDetector'));
+const TrafficSignDetector = React.lazy(() => import('./TrafficSignDetector'));
+const AbandonedVehicleDetector = React.lazy(() => import('./AbandonedVehicleDetector'));
 const MyReportsView = React.lazy(() => import('./views/MyReportsView'));
 
 
@@ -42,6 +48,9 @@ import { AuthProvider } from './contexts/AuthContext';
 import Login from './views/Login';
 import ProtectedRoute from './components/ProtectedRoute';
 import AdminDashboard from './views/AdminDashboard';
+import AppHeader from './components/AppHeader';
+import FloatingButtonsManager from './components/FloatingButtonsManager';
+import LoadingSpinner from './components/LoadingSpinner';
 
 // Create a wrapper component to handle state management
 function AppContent() {
@@ -59,12 +68,12 @@ function AppContent() {
 
   // Safe navigation helper
   const navigateToView = useCallback((view) => {
-    const validViews = ['home', 'map', 'report', 'action', 'mh-rep', 'pothole', 'garbage', 'vandalism', 'flood', 'infrastructure', 'parking', 'streetlight', 'fire', 'animal', 'blocked', 'tree', 'pest', 'smart-scan', 'grievance-analysis', 'noise', 'safety-check', 'my-reports', 'login', 'signup'];
+    const validViews = ['home', 'map', 'report', 'action', 'mh-rep', 'pothole', 'garbage', 'vandalism', 'flood', 'infrastructure', 'parking', 'streetlight', 'fire', 'animal', 'blocked', 'tree', 'pest', 'smart-scan', 'grievance-analysis', 'noise', 'safety-check', 'my-reports', 'waste', 'water-leak', 'crowd', 'accessibility', 'traffic-sign', 'abandoned-vehicle', 'login', 'signup'];
     if (validViews.includes(view)) {
-      navigate(view === 'home' ? '/' : `/${view}`);
+      navigate(view === 'home' ? '/home' : `/${view}`);
     } else {
       console.warn(`Attempted to navigate to invalid view: ${view}`);
-      navigate('/');
+      navigate('/home');
     }
   }, [navigate]);
 
@@ -191,7 +200,7 @@ function AppContent() {
             />
 
             <Route
-              path="/"
+              path="/home"
               element={
                 <Home
                   setView={navigateToView}
@@ -285,6 +294,12 @@ function AppContent() {
             <Route path="/smart-scan" element={<SmartScanner onBack={() => navigate('/')} />} />
             <Route path="/grievance-analysis" element={<GrievanceAnalysis onBack={() => navigate('/')} />} />
             <Route path="/noise" element={<NoiseDetector onBack={() => navigate('/')} />} />
+            <Route path="/waste" element={<WasteDetector onBack={() => navigate('/')} />} />
+            <Route path="/water-leak" element={<WaterLeakDetector onBack={() => navigate('/')} />} />
+            <Route path="/crowd" element={<CrowdDetector onBack={() => navigate('/')} />} />
+            <Route path="/accessibility" element={<AccessibilityDetector onBack={() => navigate('/')} />} />
+            <Route path="/traffic-sign" element={<TrafficSignDetector onBack={() => navigate('/')} />} />
+            <Route path="/abandoned-vehicle" element={<AbandonedVehicleDetector onBack={() => navigate('/')} />} />
             <Route path="/safety-check" element={
               <div className="flex flex-col h-full p-4">
                 <button onClick={() => navigate('/')} className="self-start text-blue-600 mb-2 font-bold">