Update templates/index.html

templates/index.html

@@ -284,7 +284,7 @@
                             <i class="fas fa-eye text-indigo-600 dark:text-purple-300 text-xl"></i>
                         </div>
                         <h4 class="text-sm font-black uppercase tracking-wider text-indigo-950 dark:text-purple-50 mb-2">Spatial Engine</h4>
-                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">YOLOv8 Medium with XAI bounding boxes.</p>
+                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">YOLOv8 XAI Tracking overlays.</p>
                     </div>
                     <div class="ios-glass p-6 rounded-[32px] hover:-translate-y-1 transition-transform duration-300 shadow-sm cursor-default">
                         <div class="w-12 h-12 rounded-2xl bg-fuchsia-100 dark:bg-white/10 flex items-center justify-center mb-5 border border-fuchsia-200/50 dark:border-white/10 shadow-sm">
@@ -317,20 +317,40 @@
                         
                         <!-- Interactive Media Player Area -->
                         <div class="rounded-[32px] overflow-hidden shadow-2xl border border-white/50 dark:border-white/20 relative bg-black aspect-video flex items-center justify-center group">
-                            <!-- Display Image -->
+                            <!-- Display Image (AI Overlays) -->
                             <img id="previewImg" src="" class="w-full h-full object-contain z-10 hidden" alt="Detection View">
-                            <!-- Standard Video Player -->
-                            <video id="previewVideo" controls class="w-full h-full object-contain hidden z-10 bg-black"></video>
+                            <!-- Raw Video Feed Image -->
+                            <img id="rawFeedImg" src="" class="w-full h-full object-contain z-10 hidden" alt="Raw View">
+
+                            <!-- Snapshot Container Overlay -->
+                            <div id="snapshotContainer" class="absolute inset-0 z-30 hidden bg-black flex items-center justify-center">
+                                <img id="snapshotImg" src="" class="w-full h-full object-contain">
+                                <!-- Fullscreen / Close Controls -->
+                                <div class="absolute top-6 right-6 flex gap-3">
+                                    <button onclick="fullscreenSnapshot()" class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 border border-white/40 text-white flex items-center justify-center transition-all shadow-lg backdrop-blur-md">
+                                        <i class="fas fa-expand"></i>
+                                    </button>
+                                    <button onclick="closeSnapshot()" class="w-8 h-8 rounded-full bg-red-500/80 hover:bg-red-500 border border-red-400 text-white flex items-center justify-center transition-all shadow-lg backdrop-blur-md">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                                <!-- Snapshot Tag -->
+                                <div class="absolute top-6 left-6 z-20">
+                                    <span class="bg-black/60 backdrop-blur-xl text-white text-[10px] px-3 py-1.5 rounded-xl font-black uppercase tracking-widest border border-white/20 flex items-center gap-2">
+                                        <i class="fas fa-camera text-blue-400"></i> CAPTURED SNAPSHOT
+                                    </span>
+                                </div>
+                            </div>
 
                             <!-- Live Tag -->
-                            <div class="absolute top-6 left-6 z-20">
+                            <div id="liveBadgeContainer" class="absolute top-6 left-6 z-20">
                                 <span id="liveBadge" class="bg-black/60 backdrop-blur-xl text-white text-[10px] px-3 py-1.5 rounded-xl font-black uppercase tracking-widest border border-white/20 flex items-center gap-2">
-                                    <span class="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_8px_red]"></span> XAI SNAPSHOT
+                                    <span class="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_8px_red]"></span> LIVE AI FEED
                                 </span>
                             </div>
                         </div>
 
-                        <!-- Media Controls (Moved completely underneath the video) -->
+                        <!-- Media Controls -->
                         <div class="flex justify-center gap-4 mt-8" id="mediaControls">
                             <button onclick="takeSnapshot()" class="px-5 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-indigo-900 dark:text-white bg-white/50 dark:bg-white/10 border border-indigo-200/50 dark:border-white/20 hover:scale-105 transition-transform shadow-sm flex items-center gap-2">
                                 <i class="fas fa-camera"></i> Snapshot
@@ -339,7 +359,7 @@
                                 <i class="fas fa-brain"></i> AI Tracking
                             </button>
                             <button onclick="goOriginal()" id="oBtn" class="px-5 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-indigo-900 dark:text-white bg-white/50 dark:bg-white/10 border border-indigo-200/50 dark:border-white/20 hover:scale-105 transition-transform shadow-sm flex items-center gap-2">
-                                <i class="fas fa-play"></i> Original
+                                <i class="fas fa-play"></i> Raw Feed
                             </button>
                         </div>
 
@@ -734,268 +754,269 @@
                 if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = "Not Supported";
             }
             const now = new Date();
-            if(document.getElementById('vTime')) document.getElementById('vTime').innerText = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});
+            if(document.getElementById('vTime')) document.getElementById('vTime').innerText = now.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
         }
 
-        fetchRealLocationData();
-
-        const fileInput = document.getElementById('fileInput');
-        const uploadSection = document.getElementById('uploadSection');
-        const resultsDiv = document.getElementById('results');
-        const emergencyBanner = document.getElementById('emergencyBanner');
-        const ipCamModal = document.getElementById('ipCamModal');
-        const predictiveModal = document.getElementById('predictiveModal');
-
         let streamId = null;
         let poller = null;
 
-        // Clean UI Start Flow
-        fileInput.addEventListener('change', () => {
-            if(fileInput.files.length > 0) {
-                startStream('file', fileInput.files[0]);
-            }
-        });
+        function openIpCamModal() { document.getElementById('ipCamModal').classList.remove('hidden'); }
+        function closeIpCamModal() { document.getElementById('ipCamModal').classList.add('hidden'); }
+
+        function openPredictModal() {
+            document.getElementById('predictiveModal').classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+        function closePredictModal() {
+            document.getElementById('predictiveModal').classList.add('hidden');
+            document.body.style.overflow = '';
+        }
+        function resetPredictModal() {
+            document.getElementById('predictiveResultView').classList.add('hidden');
+            document.getElementById('predictiveFormView').classList.remove('hidden');
+        }
 
         async function connectIpCam() {
-            const url = document.getElementById('ipCamUrl').value.trim();
+            const url = document.getElementById('ipCamUrl').value;
             if(!url) return;
             closeIpCamModal();
-            startStream('live');
+            startSession({url: url, location: currentLocationStr}, '/init_stream');
         }
 
-        async function startStream(type, file = null) {
-            // Instantly transition out of the upload menu and show the dashboard!
-            uploadSection.classList.add('hidden');
-            resultsDiv.classList.remove('hidden');
-
+        document.getElementById('fileInput').addEventListener('change', async (e) => {
+            if(!e.target.files.length) return;
             const fd = new FormData();
-            let res;
-            if(type === 'file') { 
-                fd.append('file', file); 
-                res = await fetch('/init_upload', {method: 'POST', body: fd}); 
-            } else { 
-                res = await fetch('/init_stream', {
-                    method: 'POST', 
-                    headers: {'Content-Type': 'application/json'}, 
-                    body: JSON.stringify({url: document.getElementById('ipCamUrl').value})
-                }); 
-            }
+            fd.append('file', e.target.files[0]);
+            startSession(fd, '/init_upload', true);
+        });
+
+        async function startSession(payload, endpoint, isFormData=false) {
+            document.getElementById('uploadSection').classList.add('hidden');
+            document.getElementById('results').classList.remove('hidden');
             
+            document.getElementById('labelText').innerText = "Initializing Stream...";
+
+            const opts = { method: 'POST' };
+            if(isFormData) { opts.body = payload; }
+            else { opts.headers = {'Content-Type': 'application/json'}; opts.body = JSON.stringify(payload); }
+
+            const res = await fetch(endpoint, opts);
             const data = await res.json();
             streamId = data.stream_id;
             
-            if(type === 'file') {
-                if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = "--";
-                if(document.getElementById('vWx')) document.getElementById('vWx').innerText = "--";
-                if(document.getElementById('vTime')) document.getElementById('vTime').innerText = "--";
+            if(data.location && data.location !== "Nil" && document.getElementById('vLoc')) {
+                document.getElementById('vLoc').innerText = data.location;
             } else {
-                if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = data.location || "--";
-                if(document.getElementById('vWx')) document.getElementById('vWx').innerText = data.weather || "--";
-                if(document.getElementById('vTime')) document.getElementById('vTime').innerText = data.time || "--";
+                fetchRealLocationData(); // fallback
             }
-            
-            // Instantly unhide tracking box and begin stream fetching
+
+            if(data.weather && data.weather !== "Nil" && document.getElementById('vWx')) {
+                document.getElementById('vWx').innerText = data.weather;
+            }
+
             activateTrackingUI(); 
             
-            // Set the source directly so the image connects right away 
             const locText = document.getElementById('vLoc') ? document.getElementById('vLoc').innerText : "Unknown";
             document.getElementById('previewImg').src = `/video_feed/${streamId}?loc=${encodeURIComponent(locText)}&t=${Date.now()}`;
+            document.getElementById('rawFeedImg').src = `/raw_feed/${streamId}?loc=${encodeURIComponent(locText)}&t=${Date.now()}`;
             
             if(poller) clearInterval(poller);
             poller = setInterval(update, 1000);
         }
 
         function activateTrackingUI() {
-            const ai = document.getElementById('previewImg');
-            ai.classList.remove('hidden');
-            document.getElementById('liveBadge').innerHTML = '<span class="w-2 h-2 rounded-full bg-fuchsia-500 animate-pulse shadow-[0_0_8px_fuchsia]"></span> LIVE AI TRACKING';
+            document.getElementById('previewImg').classList.remove('hidden');
+            document.getElementById('rawFeedImg').classList.add('hidden');
+            document.getElementById('snapshotContainer').classList.add('hidden');
+            document.getElementById('liveBadgeContainer').classList.remove('hidden');
+
+            document.getElementById('liveBadge').innerHTML = '<span class="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_8px_red]"></span> LIVE AI FEED';
             if(document.getElementById('tBtn')) document.getElementById('tBtn').classList.add('opacity-50');
             if(document.getElementById('oBtn')) document.getElementById('oBtn').classList.remove('opacity-50');
         }
 
         function goTracking() { activateTrackingUI(); }
-        function goOriginal() { alert("Raw video toggle requires caching. Please use XAI feed."); }
+        
+        function goOriginal() { 
+            document.getElementById('previewImg').classList.add('hidden');
+            document.getElementById('rawFeedImg').classList.remove('hidden');
+            document.getElementById('snapshotContainer').classList.add('hidden');
+            document.getElementById('liveBadgeContainer').classList.remove('hidden');
+
+            document.getElementById('liveBadge').innerHTML = '<span class="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_blue]"></span> RAW FEED';
+            if(document.getElementById('oBtn')) document.getElementById('oBtn').classList.add('opacity-50');
+            if(document.getElementById('tBtn')) document.getElementById('tBtn').classList.remove('opacity-50');
+        }
 
         function takeSnapshot() { 
-            let feed = document.getElementById('previewImg');
-            if(feed && !feed.classList.contains('hidden')) {
+            let feed = null;
+            if(!document.getElementById('previewImg').classList.contains('hidden')) {
+                feed = document.getElementById('previewImg');
+            } else if (!document.getElementById('rawFeedImg').classList.contains('hidden')) {
+                feed = document.getElementById('rawFeedImg');
+            }
+
+            if(feed && feed.src) {
                 const c = document.createElement('canvas'); 
-                c.width = feed.naturalWidth || feed.videoWidth; c.height = feed.naturalHeight || feed.videoHeight; 
+                c.width = feed.naturalWidth || feed.width || 640; 
+                c.height = feed.naturalHeight || feed.height || 480; 
                 c.getContext('2d').drawImage(feed, 0, 0, c.width, c.height); 
-                window.open().document.write(`<img src="${c.toDataURL()}">`); 
+                
+                document.getElementById('snapshotImg').src = c.toDataURL('image/jpeg');
+                
+                document.getElementById('snapshotContainer').classList.remove('hidden');
+                document.getElementById('previewImg').classList.add('hidden');
+                document.getElementById('rawFeedImg').classList.add('hidden');
+                document.getElementById('liveBadgeContainer').classList.add('hidden');
             }
         }
 
-        // --- Predictive Modal Functions ---
-        function openIpCamModal() { ipCamModal.classList.remove('hidden'); }
-        function closeIpCamModal() { ipCamModal.classList.add('hidden'); document.getElementById('ipCamUrl').value = ''; }
-        function openPredictModal() { predictiveModal.classList.remove('hidden'); resetPredictModal(); }
-        function closePredictModal() { predictiveModal.classList.add('hidden'); }
-        function resetPredictModal() {
-            document.getElementById('predictiveFormView').classList.remove('hidden');
-            document.getElementById('predictiveResultView').classList.add('hidden');
+        function closeSnapshot() {
+            if (document.getElementById('tBtn').classList.contains('opacity-50')) {
+                goTracking();
+            } else {
+                goOriginal();
+            }
         }
 
-        async function submitPredictiveData(e) {
-            e.preventDefault();
-            const btn = document.getElementById('predictBtn');
-            const spinner = document.getElementById('predictSpinner');
-            btn.disabled = true; spinner.classList.remove('hidden');
-
-            const payload = {
-                Weather: document.getElementById('tab_weather').value, Road_Type: document.getElementById('tab_road_type').value,
-                Time_of_Day: document.getElementById('tab_time').value, Traffic_Density: document.getElementById('tab_density').value,
-                Speed_Limit: document.getElementById('tab_speed').value, Number_of_Vehicles: document.getElementById('tab_vehicles').value,
-                Driver_Alcohol: document.getElementById('tab_alcohol').value, Road_Condition: document.getElementById('tab_road_cond').value,
-                Vehicle_Type: document.getElementById('tab_vehicle').value, Driver_Age: document.getElementById('tab_age').value,
-                Driver_Experience: document.getElementById('tab_exp').value, Road_Light_Condition: document.getElementById('tab_light').value
-            };
-
-            try {
-                const response = await fetch('/predict_traffic_risk', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
-                const data = await response.json();
-                if (data.error) throw new Error(data.error);
-                
-                document.getElementById('predictiveFormView').classList.add('hidden');
-                document.getElementById('predictiveResultView').classList.remove('hidden');
-                
-                const riskProb = data.risk_probability_percentage;
-                const willHappen = data.will_accident_happen;
-                
-                const badge = document.getElementById('riskBadge');
-                const icon = document.getElementById('riskIcon');
-                document.getElementById('riskLabelText').innerText = data.status;
-                
-                if (willHappen || riskProb >= 50) {
-                    badge.className = "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-black mb-6 uppercase tracking-[0.2em] border shadow-sm bg-red-100 text-red-600 border-red-300 dark:bg-red-500/20 dark:text-red-400 dark:border-red-500/30";
-                    icon.className = "fas fa-exclamation-triangle";
-                } else {
-                    badge.className = "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-black mb-6 uppercase tracking-[0.2em] border shadow-sm bg-emerald-100 text-emerald-600 border-emerald-300 dark:bg-emerald-500/20 dark:text-emerald-400 dark:border-emerald-500/30";
-                    icon.className = "fas fa-shield-check";
-                }
-                animateValue("riskProbabilityValue", 0, Math.floor(riskProb), 1000);
-            } catch (err) { alert(`Error: ${err.message}`); resetPredictModal(); } 
-            finally { btn.disabled = false; spinner.classList.add('hidden'); }
+        function fullscreenSnapshot() {
+            const imgSrc = document.getElementById('snapshotImg').src;
+            if(imgSrc) {
+                const w = window.open('');
+                w.document.write(`<html><body style="margin:0;background:#000;display:flex;justify-content:center;align-items:center;height:100vh;"><img src="${imgSrc}" style="max-width:100%;max-height:100%;object-fit:contain;"></body></html>`);
+            }
         }
 
         async function update() {
             if(!streamId) return;
             try {
-                const r = await fetch(`/stream_status/${streamId}`);
-                const d = await r.json();
-                if(!d.label) return;
-                
-                document.getElementById('confVal').innerText = d.confidence;
-                document.getElementById('cnnVal').innerText = d.cnn + '%';
-                document.getElementById('rcnnVal').innerText = d.rcnn + '%';
-                document.getElementById('cnnBar').style.width = d.cnn + '%';
-                document.getElementById('rcnnBar').style.width = d.rcnn + '%';
-                
-                document.getElementById('labelText').innerText = d.label;
-                const statusBox = document.getElementById('statusCard');
-                const statusBadge = document.getElementById('statusBadge');
+                const res = await fetch(`/stream_status/${streamId}`);
+                const data = await res.json();
+                if(!data || Object.keys(data).length === 0) return;
+
+                document.getElementById('labelText').innerText = data.label || "Monitoring...";
+                document.getElementById('confVal').innerText = data.confidence || 0;
+                document.getElementById('cnnBar').style.width = `${data.cnn || 0}%`;
+                document.getElementById('cnnVal').innerText = `${data.cnn || 0}%`;
+                document.getElementById('rcnnBar').style.width = `${data.rcnn || 0}%`;
+                document.getElementById('rcnnVal').innerText = `${data.rcnn || 0}%`;
+                document.getElementById('severityLevel').innerText = data.severity || "--";
+
+                const statusCard = document.getElementById('statusCard');
                 const statusIcon = document.getElementById('statusIcon');
-                const severityLevel = document.getElementById('severityLevel');
-                
-                // Parse distinct backend logic states accurately
-                const isError = d.label.includes("Failed") || d.label.includes("Error") || d.label.includes("Missing");
-                const isFinished = d.label.includes("No accident detected") || d.label.includes("Finished");
-                const isAnalyzing = d.label.includes("Analyzing") || d.label.includes("Scanning") || d.label.includes("Buffering");
-
-                if(d.is_accident) {
-                    statusBox.className = "ios-glass-inner p-8 rounded-[32px] mb-8 shadow-sm dark:shadow-lg relative overflow-hidden border-l-4 border-red-500 bg-red-50/50 dark:bg-red-900/20 transition-colors duration-500";
-                    statusBadge.className = "inline-flex items-center gap-2 px-3 py-1.5 rounded-xl text-[10px] font-black mb-4 uppercase tracking-[0.2em] shadow-sm bg-red-100 text-red-600 border border-red-300 dark:bg-red-500/20 dark:text-red-400";
-                    statusIcon.className = "fas fa-skull-crossbones";
-                    if(severityLevel) {
-                        severityLevel.innerText = d.severity;
-                        severityLevel.className = "font-black text-sm uppercase text-red-600 dark:text-red-300";
-                    }
-                    if(d.alert_sent && document.getElementById('emergencyBanner')) document.getElementById('emergencyBanner').classList.remove('hidden');
-                } else if(isError) {
-                    statusBox.className = "ios-glass-inner p-8 rounded-[32px] mb-8 shadow-sm dark:shadow-lg relative overflow-hidden border-l-4 border-orange-500 transition-colors duration-500";
-                    statusBadge.className = "inline-flex items-center gap-2 px-3 py-1.5 rounded-xl text-[10px] font-black mb-4 uppercase tracking-[0.2em] shadow-sm bg-orange-100 text-orange-600 border border-orange-300 dark:bg-orange-500/20 dark:text-orange-400";
-                    statusIcon.className = "fas fa-exclamation-triangle";
-                    if(severityLevel) {
-                        severityLevel.innerText = "Offline";
-                        severityLevel.className = "font-black text-[10px] uppercase text-orange-600 dark:text-orange-400";
-                    }
-                } else if(isAnalyzing) {
-                    statusBox.className = "ios-glass-inner p-8 rounded-[32px] mb-8 shadow-sm dark:shadow-lg relative overflow-hidden border-l-4 border-indigo-500 transition-colors duration-500";
-                    statusBadge.className = "inline-flex items-center gap-2 px-3 py-1.5 rounded-xl text-[10px] font-black mb-4 uppercase tracking-[0.2em] border border-indigo-200 shadow-sm bg-white text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-300";
-                    statusIcon.className = "fas fa-spinner fa-spin";
-                    if(severityLevel) {
-                        severityLevel.innerText = "Calculating...";
-                        severityLevel.className = "font-black text-[10px] uppercase text-indigo-500 animate-pulse";
-                    }
-                } else if(isFinished) {
-                    statusBox.className = "ios-glass-inner p-8 rounded-[32px] mb-8 shadow-sm dark:shadow-lg relative overflow-hidden border-l-4 border-emerald-500 bg-emerald-50/30 transition-colors duration-500";
-                    statusBadge.className = "inline-flex items-center gap-2 px-3 py-1.5 rounded-xl text-[10px] font-black mb-4 uppercase tracking-[0.2em] border border-emerald-200 shadow-sm bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400";
-                    statusIcon.className = "fas fa-check-double";
-                    if(severityLevel) {
-                        severityLevel.innerText = "Clear";
-                        severityLevel.className = "font-black text-[10px] uppercase text-emerald-600";
+                const emergencyBanner = document.getElementById('emergencyBanner');
+
+                if(data.is_accident) {
+                    statusCard.classList.remove('border-indigo-500');
+                    statusCard.classList.add('border-rose-500', 'bg-rose-50/50', 'dark:bg-rose-900/20');
+                    statusIcon.className = "fas fa-exclamation-triangle text-rose-600";
+                    
+                    if(data.severity && (data.severity.toLowerCase() === 'major' || data.severity.toLowerCase() === 'moderate')) {
+                        emergencyBanner.classList.remove('hidden');
                     }
                 } else {
-                    // Standard Monitoring
-                    statusBox.className = "ios-glass-inner p-8 rounded-[32px] mb-8 shadow-sm dark:shadow-lg relative overflow-hidden border-l-4 border-emerald-500 transition-colors duration-500";
-                    statusBadge.className = "inline-flex items-center gap-2 px-3 py-1.5 rounded-xl text-[10px] font-black mb-4 uppercase tracking-[0.2em] border border-emerald-200 dark:border-emerald-500/30 shadow-sm bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400";
-                    statusIcon.className = "fas fa-shield-check";
-                    if(severityLevel) {
-                        severityLevel.innerText = "Monitoring...";
-                        severityLevel.className = "font-black text-[10px] uppercase text-emerald-600 animate-pulse";
-                    }
+                    statusCard.classList.add('border-indigo-500');
+                    statusCard.classList.remove('border-rose-500', 'bg-rose-50/50', 'dark:bg-rose-900/20');
+                    statusIcon.className = "fas fa-shield-check text-indigo-600";
+                    emergencyBanner.classList.add('hidden');
                 }
 
-                const alprSection = document.getElementById('alprSection');
-                const pBox = document.getElementById('alprContainer');
-                pBox.innerHTML = '';
-                let validPlates = false;
-
-                if (d.plates && d.plates.length > 0) {
-                    d.plates.forEach(p => {
-                        if (p.text && p.text !== "NO CLEAR PLATES") {
-                            validPlates = true;
-                            const div = document.createElement('div');
-                            div.className = "bg-yellow-400 text-black p-2 rounded-xl shadow-sm border border-yellow-500 flex items-center gap-4";
-                            let img = p.image ? `<img src="data:image/jpeg;base64,${p.image}" class="h-10 rounded-lg border border-black/20 bg-white object-contain shadow-inner">` : "";
-                            div.innerHTML = `${img} <span class="font-black text-xl tracking-widest px-2">${p.text}</span>`;
-                            pBox.appendChild(div);
-                        }
-                    });
+                const alprSec = document.getElementById('alprSection');
+                const alprCont = document.getElementById('alprContainer');
+                if(data.plates && data.plates.length > 0) {
+                    alprSec.classList.remove('hidden');
+                    alprCont.innerHTML = data.plates.map(p => `
+                        <div class="flex items-center gap-2 bg-white/80 dark:bg-black/40 px-3 py-1.5 rounded-lg border border-indigo-100 dark:border-white/10 shadow-sm">
+                            <img src="data:image/jpeg;base64,${p.image}" class="h-6 rounded object-cover">
+                            <span class="font-mono font-bold text-xs text-indigo-900 dark:text-white">${p.text}</span>
+                        </div>
+                    `).join('');
                 }
-                if(validPlates) alprSection.classList.remove('hidden');
-                else alprSection.classList.add('hidden');
-
             } catch(e) {}
         }
 
         function resetApp() {
-            if(fileInput) fileInput.value = '';
-            if(emergencyBanner) emergencyBanner.classList.add('hidden');
-            if(uploadSection) uploadSection.classList.remove('hidden');
-            if(resultsDiv) resultsDiv.classList.add('hidden');
             if(poller) clearInterval(poller);
+            streamId = null;
             document.getElementById('previewImg').src = "";
-            fetchRealLocationData(); 
+            document.getElementById('rawFeedImg').src = "";
+            document.getElementById('uploadSection').classList.remove('hidden');
+            document.getElementById('results').classList.add('hidden');
+            document.getElementById('emergencyBanner').classList.add('hidden');
+            document.getElementById('fileInput').value = "";
         }
 
-        function animateValue(id, start, end, duration) {
-            let current = start;
-            const range = end - start;
-            const obj = document.getElementById(id);
-            if(!obj) return;
-            if(range === 0) { obj.innerHTML = end; return; }
-            const increment = end > start ? 1 : -1;
-            const stepTime = Math.abs(Math.floor(duration / range));
-            const timer = setInterval(function() {
-                current += increment;
-                obj.innerHTML = current;
-                if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
-                    clearInterval(timer);
-                    obj.innerHTML = end; 
+        async function submitPredictiveData(e) {
+            e.preventDefault();
+            const btn = document.getElementById('predictBtn');
+            const spinner = document.getElementById('predictSpinner');
+            btn.disabled = true;
+            spinner.classList.remove('hidden');
+
+            const payload = {
+                Weather_Conditions: document.getElementById('tab_weather').value,
+                Light_Conditions: document.getElementById('tab_light').value,
+                Time_of_Day: document.getElementById('tab_time').value,
+                Road_Type: document.getElementById('tab_road_type').value,
+                Road_Surface_Conditions: document.getElementById('tab_road_cond').value,
+                Speed_Limit: document.getElementById('tab_speed').value,
+                Traffic_Density: document.getElementById('tab_density').value,
+                Number_of_Vehicles: document.getElementById('tab_vehicles').value,
+                Vehicle_Type: document.getElementById('tab_vehicle').value,
+                Driver_Age: document.getElementById('tab_age').value,
+                Driver_Experience: document.getElementById('tab_exp').value,
+                Driver_Alcohol: document.getElementById('tab_alcohol').value
+            };
+
+            try {
+                const res = await fetch('/predict_traffic_risk', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify(payload)
+                });
+                const data = await res.json();
+                
+                document.getElementById('predictiveFormView').classList.add('hidden');
+                document.getElementById('predictiveResultView').classList.remove('hidden');
+                
+                const prob = data.risk_probability_percentage || 0;
+                document.getElementById('riskProbabilityValue').innerText = prob;
+                
+                const riskCard = document.getElementById('riskStatusCard');
+                const riskBadge = document.getElementById('riskBadge');
+                const riskIcon = document.getElementById('riskIcon');
+                const riskLabel = document.getElementById('riskLabelText');
+
+                riskCard.className = 'ios-glass-inner p-10 rounded-[32px] shadow-sm dark:shadow-lg relative overflow-hidden w-full max-w-sm border';
+                riskBadge.className = 'inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-black mb-6 uppercase tracking-[0.2em] border shadow-sm text-white';
+
+                if(prob >= 70) {
+                    riskCard.classList.add('border-red-500', 'bg-red-50/10', 'dark:bg-red-900/20');
+                    riskBadge.classList.add('bg-red-500', 'border-red-400');
+                    riskIcon.className = 'fas fa-exclamation-triangle';
+                    riskLabel.innerText = 'Critical Risk';
+                } else if(prob >= 40) {
+                    riskCard.classList.add('border-amber-500', 'bg-amber-50/10', 'dark:bg-amber-900/20');
+                    riskBadge.classList.add('bg-amber-500', 'border-amber-400');
+                    riskIcon.className = 'fas fa-exclamation-circle';
+                    riskLabel.innerText = 'Elevated Risk';
+                } else {
+                    riskCard.classList.add('border-green-500', 'bg-green-50/10', 'dark:bg-green-900/20');
+                    riskBadge.classList.add('bg-green-500', 'border-green-400');
+                    riskIcon.className = 'fas fa-shield-check';
+                    riskLabel.innerText = 'Low Risk';
                 }
-            }, stepTime);
+
+            } catch (e) {
+                alert("Error running prediction.");
+            } finally {
+                btn.disabled = false;
+                spinner.classList.add('hidden');
+            }
         }
+        
+        // Setup script initialization call
+        fetchRealLocationData();
     </script>
 </body>
 </html>