Update templates/index.html

templates/index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>CrashVision AI - Accident Detection</title>
     
-    <!-- 📱 MOBILE APP & HOME SCREEN ICONS SETUP 📱 -->
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="CrashVision">
@@ -170,7 +169,7 @@
                     <div class="ios-glass p-6 rounded-[32px] hover:-translate-y-1 transition-transform duration-300 shadow-sm cursor-default">
                         <div class="w-12 h-12 rounded-2xl bg-rose-100 dark:bg-white/10 flex items-center justify-center mb-5 border border-rose-200/50 dark:border-white/10 shadow-sm"><i class="fas fa-bolt text-rose-600 dark:text-rose-300 text-xl"></i></div>
                         <h4 class="text-sm font-black uppercase tracking-wider text-indigo-950 dark:text-purple-50 mb-2">Automated SOS</h4>
-                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">HTTP Push Dispatch via ntfy.sh.</p>
+                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">Real-time Emergency Email Dispatch.</p>
                     </div>
                 </div>
             </div>
@@ -422,7 +421,11 @@
 
         themeToggleBtn.addEventListener('click', () => {
             htmlElement.classList.toggle('dark');
-            localStorage.theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
+            if (htmlElement.classList.contains('dark')) {
+                localStorage.theme = 'dark';
+            } else {
+                localStorage.theme = 'light';
+            }
         });
 
         window.addEventListener('load', () => {
@@ -431,7 +434,9 @@
                 if(splash) {
                     splash.style.opacity = '0';
                     splash.style.transform = 'scale(1.05)';
-                    setTimeout(() => { splash.style.display = 'none'; }, 700);
+                    setTimeout(() => {
+                        splash.style.display = 'none';
+                    }, 700);
                 }
             }, 1800);
         });
@@ -447,12 +452,14 @@
             document.getElementById('predictiveModal').classList.remove('hidden');
             document.body.style.overflow = 'hidden';
         }
+        
         function closePredictModal() {
             document.getElementById('predictiveModal').classList.add('hidden');
             document.body.style.overflow = '';
             document.getElementById('tabularForm').reset(); 
             resetPredictModal(); 
         }
+        
         function resetPredictModal() {
             document.getElementById('predictiveResultView').classList.add('hidden');
             document.getElementById('predictiveFormView').classList.remove('hidden');
@@ -460,30 +467,41 @@
         }
 
         async function connectIpCam() {
-            const url = document.getElementById('ipCamUrl').value;
+            const url = document.getElementById('ipCamUrl').value.trim();
             if(!url) return;
             closeIpCamModal();
-            startSession({url: url}, '/init_stream');
+            
+            document.getElementById('uploadSection').classList.add('hidden');
+            document.getElementById('results').classList.remove('hidden');
+            document.getElementById('labelText').innerText = "Resolving URL...";
+            
+            try {
+                await startSession({url: url}, '/init_stream');
+            } catch (err) {
+                alert("Failed to connect to the camera. Please check the URL.");
+                resetApp();
+            }
         }
 
         document.getElementById('fileInput').addEventListener('change', async (e) => {
             if(!e.target.files.length) return;
             const fd = new FormData();
             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 = "Uploading Media...";
             
-            document.getElementById('labelText').innerText = "Initializing Stream...";
+            startSession(fd, '/init_upload', true);
+        });
 
+        async function startSession(payload, endpoint, isFormData=false) {
             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);
+            if (!res.ok) throw new Error("Backend error");
             const data = await res.json();
             streamId = data.stream_id;
             
@@ -505,7 +523,8 @@
             document.getElementById('playPauseIcon').className = 'fas fa-pause text-sm';
 
             if(poller) clearInterval(poller);
-            poller = setInterval(update, 1000);
+            // Polling increased to 500ms to make UI highly responsive!
+            poller = setInterval(update, 500);
         }
 
         async function goTracking() { 
@@ -599,6 +618,9 @@
             try {
                 const res = await fetch(`/stream_status/${streamId}`);
                 const data = await res.json();
+                
+                if(!streamId) return; // Prevent ghost updates if ended mid-fetch
+                
                 if(!data || Object.keys(data).length === 0) return;
 
                 document.getElementById('labelText').innerText = data.label || "Monitoring...";
@@ -650,12 +672,15 @@
 
         function resetApp() {
             if(poller) clearInterval(poller);
-            streamId = null;
+            streamId = null; 
+            
             document.getElementById('previewImg').src = "";
             document.getElementById('uploadSection').classList.remove('hidden');
             document.getElementById('results').classList.add('hidden');
+            
             document.getElementById('emergencyBanner').classList.add('hidden');
             document.getElementById('alprSection').classList.add('hidden');
+            
             document.getElementById('progressFill').style.width = "0%";
             document.getElementById('playerControlsOverlay').classList.add('hidden');
             document.getElementById('playerControlsOverlay').classList.remove('flex');