Update templates/index.html

templates/index.html

@@ -11,9 +11,10 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#1e1b4b">
     
-    <link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('serve_logo') }}?v=3">
-    <link rel="apple-touch-icon" href="{{ url_for('serve_logo') }}?v=3">
-    <link rel="manifest" href='data:application/manifest+json;utf8,{"name":"CrashVision AI","short_name":"CrashVision","start_url":"./","display":"standalone","background_color":"#F4F4F9","theme_color":"#1e1b4b","icons":[{"src":"{{ url_for("serve_logo") }}?v=3","sizes":"192x192","type":"image/png"},{"src":"{{ url_for("serve_logo") }}?v=3","sizes":"512x512","type":"image/png"}]}'>
+    <!-- FIX: Reverted to standard static routing now that ProxyFix handles the Hugging Face URL translation. Added ?v=5 to bust mobile caches. -->
+    <link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='logo.png') }}?v=5">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='logo.png') }}?v=5">
+    <link rel="manifest" href='data:application/manifest+json;utf8,{"name":"CrashVision AI","short_name":"CrashVision","start_url":"./","display":"standalone","background_color":"#F4F4F9","theme_color":"#1e1b4b","icons":[{"src":"{{ url_for("static", filename="logo.png") }}?v=5","sizes":"192x192","type":"image/png"},{"src":"{{ url_for("static", filename="logo.png") }}?v=5","sizes":"512x512","type":"image/png"}]}'>
 
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
@@ -183,7 +184,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">Real-time Emergency Email Dispatch.</p>
+                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">HTTP Push Dispatch via ntfy.sh.</p>
                     </div>
                 </div>
             </div>
@@ -280,6 +281,7 @@
                             </div>
 
                             <div class="space-y-7 mb-10">
+                                <!-- ALPR Section (Shows dynamically when plates are detected) -->
                                 <div id="alprSection" class="hidden">
                                     <div class="flex justify-between items-end mb-3">
                                         <span class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-50 flex items-center gap-3">
@@ -364,36 +366,112 @@
                                 <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
                                     <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3"><div class="w-8 h-8 rounded-xl bg-cyan-100 dark:bg-cyan-500/20 flex items-center justify-center border border-cyan-200/50 dark:border-cyan-400/30 group-hover:scale-110 transition-transform"><i class="fas fa-cloud-sun text-cyan-600 dark:text-cyan-300 text-xs"></i></div><h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Conditions</h4></div>
                                     <div class="space-y-4">
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Weather</label><select id="tab_weather" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"><option value="">Unknown</option><option value="Clear">Clear</option><option value="Rainy">Rainy</option><option value="Foggy">Foggy</option><option value="Snowy">Snowy</option></select></div>
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Light Cond.</label><select id="tab_light" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"><option value="">Unknown</option><option value="Daylight">Daylight</option><option value="Artificial Light">Artificial Light</option><option value="No Light">No Light</option></select></div>
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Time of Day</label><select id="tab_time" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"><option value="">Unknown</option><option value="Morning">Morning</option><option value="Afternoon">Afternoon</option><option value="Evening">Evening</option><option value="Night">Night</option></select></div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Weather</label>
+                                            <select id="tab_weather" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                                <option value="">Select...</option>
+                                                <option value="Clear">Clear</option>
+                                                <option value="Rainy">Rainy</option>
+                                                <option value="Foggy">Foggy</option>
+                                                <option value="Snowy">Snowy</option>
+                                                <option value="Stormy">Stormy</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Light Cond.</label>
+                                            <select id="tab_light" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                                <option value="">Select...</option>
+                                                <option value="Daylight">Daylight</option>
+                                                <option value="Artificial Light">Artificial Light</option>
+                                                <option value="No Light">No Light</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Time of Day</label>
+                                            <select id="tab_time" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                                <option value="">Select...</option>
+                                                <option value="Morning">Morning</option>
+                                                <option value="Afternoon">Afternoon</option>
+                                                <option value="Evening">Evening</option>
+                                                <option value="Night">Night</option>
+                                            </select>
+                                        </div>
                                     </div>
                                 </div>
 
                                 <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
                                     <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3"><div class="w-8 h-8 rounded-xl bg-rose-100 dark:bg-rose-500/20 flex items-center justify-center border border-rose-200/50 dark:border-rose-400/30 group-hover:scale-110 transition-transform"><i class="fas fa-road text-rose-600 dark:text-rose-300 text-xs"></i></div><h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Road Specs</h4></div>
                                     <div class="space-y-4">
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Road Type</label><select id="tab_road_type" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"><option value="City Road">City Road</option><option value="Highway">Highway</option><option value="Rural Road">Rural Road</option></select></div>
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Surface</label><select id="tab_road_cond" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"><option value="Dry">Dry</option><option value="Wet">Wet</option><option value="Icy">Icy</option><option value="Under Construction">Under Construction</option></select></div>
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Speed Limit</label><input type="number" id="tab_speed" placeholder="e.g. 60" min="10" max="250" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"></div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Road Type</label>
+                                            <select id="tab_road_type" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                                <option value="">Select...</option>
+                                                <option value="City Road">City Road</option>
+                                                <option value="Highway">Highway</option>
+                                                <option value="Rural Road">Rural Road</option>
+                                                <option value="Mountain Road">Mountain Road</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Surface</label>
+                                            <select id="tab_road_cond" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                                <option value="">Select...</option>
+                                                <option value="Dry">Dry</option>
+                                                <option value="Wet">Wet</option>
+                                                <option value="Icy">Icy</option>
+                                                <option value="Under Construction">Under Construction</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Speed Limit</label>
+                                            <input type="number" id="tab_speed" placeholder="e.g. 60" min="10" max="250" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                        </div>
                                     </div>
                                 </div>
 
                                 <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
                                     <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3"><div class="w-8 h-8 rounded-xl bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center border border-amber-200/50 dark:border-amber-400/30 group-hover:scale-110 transition-transform"><i class="fas fa-car-side text-amber-600 dark:text-amber-300 text-xs"></i></div><h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Traffic Data</h4></div>
                                     <div class="space-y-4">
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Density (0-5)</label><input type="number" id="tab_density" placeholder="e.g. 2" min="0" max="5" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"></div>
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicles Inv.</label><input type="number" id="tab_vehicles" placeholder="e.g. 2" min="1" max="20" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"></div>
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicle Type</label><select id="tab_vehicle" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"><option value="Car">Car</option><option value="Truck">Truck</option><option value="Bus">Bus</option><option value="Motorcycle">Motorcycle</option></select></div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Density (0-5)</label>
+                                            <input type="number" id="tab_density" placeholder="e.g. 2" min="0" max="5" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicles Inv.</label>
+                                            <input type="number" id="tab_vehicles" placeholder="e.g. 2" min="1" max="20" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicle Type</label>
+                                            <select id="tab_vehicle" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                                <option value="">Select...</option>
+                                                <option value="Car">Car</option>
+                                                <option value="Truck">Truck</option>
+                                                <option value="Bus">Bus</option>
+                                                <option value="Motorcycle">Motorcycle</option>
+                                            </select>
+                                        </div>
                                     </div>
                                 </div>
 
                                 <div class="ios-glass-inner p-5 sm:p-6 rounded-[24px] shadow-sm border border-white/50 dark:border-white/10 hover:bg-white/50 dark:hover:bg-white/5 transition-colors group">
                                     <div class="flex items-center gap-3 mb-4 border-b border-indigo-100/50 dark:border-white/10 pb-3"><div class="w-8 h-8 rounded-xl bg-fuchsia-100 dark:bg-fuchsia-500/20 flex items-center justify-center border border-fuchsia-200/50 dark:border-fuchsia-400/30 group-hover:scale-110 transition-transform"><i class="fas fa-user text-fuchsia-600 dark:text-fuchsia-300 text-xs"></i></div><h4 class="font-black text-[11px] uppercase tracking-widest text-indigo-900 dark:text-purple-200">Driver Profile</h4></div>
                                     <div class="space-y-4">
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Driver Age</label><input type="number" id="tab_age" placeholder="e.g. 35" min="16" max="99" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"></div>
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Experience (Yrs)</label><input type="number" id="tab_exp" placeholder="e.g. 5" min="0" max="80" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"></div>
-                                        <div><label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Drunk</label><select id="tab_alcohol" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white"><option value="No">No</option><option value="Yes">Yes</option></select></div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Driver Age</label>
+                                            <input type="number" id="tab_age" placeholder="e.g. 35" min="16" max="99" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Experience (Yrs)</label>
+                                            <input type="number" id="tab_exp" placeholder="e.g. 5" min="0" max="80" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Drunk</label>
+                                            <select id="tab_alcohol" class="predict-input bg-white/60 dark:bg-black/20 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white">
+                                                <option value="">Select...</option>
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -676,10 +754,12 @@
                     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('');
+                } else {
+                    alprSec.classList.add('hidden');
+                    alprCont.innerHTML = '';
                 }
             } catch(e) {}
         }
@@ -728,22 +808,22 @@
             spinner.classList.remove('hidden');
 
             const payload = {
-                Weather_Conditions: document.getElementById('tab_weather').value,
-                Light_Conditions: document.getElementById('tab_light').value,
+                Weather: document.getElementById('tab_weather').value,
+                Road_Light_Condition: 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,
+                Road_Condition: 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 === "Yes" ? 1.0 : 0.0
+                Driver_Alcohol: document.getElementById('tab_alcohol').value === "Yes" ? 1 : (document.getElementById('tab_alcohol').value === "No" ? 0 : "")
             };
 
-            // FIX: Validation check to enforce that empty inputs return an "Invalid/Error" output
-            const isAllBlank = !payload.Weather_Conditions && !payload.Light_Conditions && !payload.Time_of_Day && !payload.Speed_Limit && !payload.Traffic_Density && !payload.Number_of_Vehicles && !payload.Driver_Age && !payload.Driver_Experience;
+            const inputs = ['tab_weather', 'tab_light', 'tab_time', 'tab_road_type', 'tab_road_cond', 'tab_speed', 'tab_density', 'tab_vehicles', 'tab_vehicle', 'tab_age', 'tab_exp', 'tab_alcohol'];
+            const isAllBlank = inputs.every(id => document.getElementById(id).value.trim() === "");
             
             if (isAllBlank) {
                 document.getElementById('predictiveFormView').classList.add('hidden');