Hugging Face's logo

Spaces:
webapp1
/
CrashVisionAI
Sleeping

App Files Community
webapp1 commited on
Commit
b5765c9
·
verified ·
1 Parent(s): fc35f8f

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +50 -20
templates/index.html CHANGED
@@ -63,10 +63,19 @@
63
  </head>
64
  <body class="relative min-h-screen transition-colors duration-500 overflow-x-hidden">
65
 
66
- <!-- FIX: App Loading Screen uses true logo.png now instead of SVG -->
67
  <div id="appSplashScreen" class="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#F4F4F9] dark:bg-[#151518] transition-all duration-700 ease-in-out">
68
  <div class="mb-8">
69
- <img src="{{ url_for('serve_logo') }}?v=3" alt="CrashVision Logo" class="w-32 h-32 object-contain drop-shadow-2xl animate-pulse-glow">
 
 
 
 
 
 
 
 
 
 
70
  </div>
71
  <h1 class="text-4xl font-black tracking-tight text-indigo-950 dark:text-white drop-shadow-sm">CrashVision AI</h1>
72
  <p class="text-xs font-black uppercase tracking-[0.3em] text-indigo-500 mt-3">Initializing Systems</p>
@@ -102,7 +111,17 @@
102
 
103
  <header class="relative z-40 pt-10 sm:pt-16 pb-6 sm:pb-8 flex flex-col items-center justify-center mt-2 sm:mt-6">
104
  <div class="mb-4 sm:mb-5 flex items-center justify-center group transition-all duration-500 hover:scale-110 drop-shadow-xl">
105
- <svg class="w-20 h-20 sm:w-16 sm:h-16 z-10 text-indigo-700 dark:text-purple-400 transition-colors duration-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M3 22L9 8H15L21 22M12 22V17M12 13V11M12 9V8" stroke-width="1.5"/><circle cx="12" cy="14" r="1.5" fill="currentColor" stroke="none" class="animate-pulse"/></svg>
 
 
 
 
 
 
 
 
 
 
106
  </div>
107
  <div class="text-center">
108
  <h1 class="text-3xl sm:text-5xl font-black tracking-tight leading-tight text-indigo-700 dark:text-purple-400 drop-shadow-sm transition-colors duration-500">CrashVision AI</h1>
@@ -503,20 +522,7 @@
503
 
504
  if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = data.location || "--";
505
  if(document.getElementById('vWx')) document.getElementById('vWx').innerText = data.weather || "--";
506
-
507
- if (data.is_live) {
508
- document.getElementById('vTime').innerText = "LIVE FEED";
509
- document.getElementById('progressBarContainer').style.display = "none";
510
- document.getElementById('skipBackBtn').style.display = "none";
511
- document.getElementById('skipFwdBtn').style.display = "none";
512
- document.getElementById('playBtn').style.display = "none";
513
- } else {
514
- document.getElementById('vTime').innerText = data.time || "--";
515
- document.getElementById('progressBarContainer').style.display = "block";
516
- document.getElementById('skipBackBtn').style.display = "block";
517
- document.getElementById('skipFwdBtn').style.display = "block";
518
- document.getElementById('playBtn').style.display = "flex";
519
- }
520
 
521
  document.getElementById('previewImg').classList.remove('hidden');
522
  document.getElementById('playerControlsOverlay').classList.remove('hidden');
@@ -532,7 +538,7 @@
532
  document.getElementById('playPauseIcon').className = 'fas fa-pause text-sm';
533
 
534
  if(poller) clearInterval(poller);
535
- poller = setInterval(update, 500);
536
  }
537
 
538
  async function goTracking() {
@@ -639,7 +645,7 @@
639
  document.getElementById('rcnnVal').innerText = `${data.rcnn || 0}%`;
640
  document.getElementById('severityLevel').innerText = data.severity || "--";
641
 
642
- if (data.progress !== undefined && !data.is_live) {
643
  if (data.progress >= 100) { document.getElementById('progressFill').style.width = `100%`; }
644
  else { document.getElementById('progressFill').style.width = `${data.progress}%`; }
645
  }
@@ -655,7 +661,7 @@
655
 
656
  if(data.severity) {
657
  const sevLevel = data.severity.toUpperCase();
658
- emergencyText.innerText = `${sevLevel} COLLISION DETECTED. AUTOMATED SOS DISPATCHED VIA EMAIL.`;
659
  emergencyBanner.classList.remove('hidden');
660
  }
661
  } else {
@@ -736,6 +742,30 @@
736
  Driver_Alcohol: document.getElementById('tab_alcohol').value === "Yes" ? 1.0 : 0.0
737
  };
738
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
739
  try {
740
  const res = await fetch('/predict_traffic_risk', {
741
  method: 'POST',
 
63
  </head>
64
  <body class="relative min-h-screen transition-colors duration-500 overflow-x-hidden">
65
 
 
66
  <div id="appSplashScreen" class="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#F4F4F9] dark:bg-[#151518] transition-all duration-700 ease-in-out">
67
  <div class="mb-8">
68
+ <svg class="w-24 h-24 text-indigo-700 dark:text-purple-400 drop-shadow-xl" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
69
+ <path d="M3 22L9 8H15L21 22" stroke-width="1.5" />
70
+ <path d="M12 22V17M12 13V11M12 9V8" stroke-width="1.5" />
71
+ <path d="M9.5 16L10.5 13H13.5L14.5 16V17.5H9.5V16Z" stroke-width="1.5" fill="currentColor" fill-opacity="0.1" />
72
+ <path d="M10.5 13L11 10.5H13L13.5 13" stroke-width="1.5" />
73
+ <path d="M8 9H6V11" stroke-width="2" />
74
+ <path d="M16 9H18V11" stroke-width="2" />
75
+ <path d="M8 19H6V17" stroke-width="2" />
76
+ <path d="M16 19H18V17" stroke-width="2" />
77
+ <circle cx="12" cy="14" r="1.5" fill="currentColor" stroke="none" class="animate-pulse" />
78
+ </svg>
79
  </div>
80
  <h1 class="text-4xl font-black tracking-tight text-indigo-950 dark:text-white drop-shadow-sm">CrashVision AI</h1>
81
  <p class="text-xs font-black uppercase tracking-[0.3em] text-indigo-500 mt-3">Initializing Systems</p>
 
111
 
112
  <header class="relative z-40 pt-10 sm:pt-16 pb-6 sm:pb-8 flex flex-col items-center justify-center mt-2 sm:mt-6">
113
  <div class="mb-4 sm:mb-5 flex items-center justify-center group transition-all duration-500 hover:scale-110 drop-shadow-xl">
114
+ <svg class="w-20 h-20 sm:w-16 sm:h-16 z-10 text-indigo-700 dark:text-purple-400 transition-colors duration-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
115
+ <path d="M3 22L9 8H15L21 22" stroke-width="1.5" />
116
+ <path d="M12 22V17M12 13V11M12 9V8" stroke-width="1.5" />
117
+ <path d="M9.5 16L10.5 13H13.5L14.5 16V17.5H9.5V16Z" stroke-width="1.5" fill="currentColor" fill-opacity="0.1" />
118
+ <path d="M10.5 13L11 10.5H13L13.5 13" stroke-width="1.5" />
119
+ <path d="M8 9H6V11" stroke-width="2" />
120
+ <path d="M16 9H18V11" stroke-width="2" />
121
+ <path d="M8 19H6V17" stroke-width="2" />
122
+ <path d="M16 19H18V17" stroke-width="2" />
123
+ <circle cx="12" cy="14" r="1.5" fill="currentColor" stroke="none" class="animate-pulse" />
124
+ </svg>
125
  </div>
126
  <div class="text-center">
127
  <h1 class="text-3xl sm:text-5xl font-black tracking-tight leading-tight text-indigo-700 dark:text-purple-400 drop-shadow-sm transition-colors duration-500">CrashVision AI</h1>
 
522
 
523
  if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = data.location || "--";
524
  if(document.getElementById('vWx')) document.getElementById('vWx').innerText = data.weather || "--";
525
+ if(document.getElementById('vTime')) document.getElementById('vTime').innerText = data.time || "--";
 
 
 
 
 
 
 
 
 
 
 
 
 
526
 
527
  document.getElementById('previewImg').classList.remove('hidden');
528
  document.getElementById('playerControlsOverlay').classList.remove('hidden');
 
538
  document.getElementById('playPauseIcon').className = 'fas fa-pause text-sm';
539
 
540
  if(poller) clearInterval(poller);
541
+ poller = setInterval(update, 1000);
542
  }
543
 
544
  async function goTracking() {
 
645
  document.getElementById('rcnnVal').innerText = `${data.rcnn || 0}%`;
646
  document.getElementById('severityLevel').innerText = data.severity || "--";
647
 
648
+ if (data.progress !== undefined) {
649
  if (data.progress >= 100) { document.getElementById('progressFill').style.width = `100%`; }
650
  else { document.getElementById('progressFill').style.width = `${data.progress}%`; }
651
  }
 
661
 
662
  if(data.severity) {
663
  const sevLevel = data.severity.toUpperCase();
664
+ emergencyText.innerText = `${sevLevel} COLLISION DETECTED. AUTOMATED SOS DISPATCHED.`;
665
  emergencyBanner.classList.remove('hidden');
666
  }
667
  } else {
 
742
  Driver_Alcohol: document.getElementById('tab_alcohol').value === "Yes" ? 1.0 : 0.0
743
  };
744
 
745
+ // FIX: Validation check to enforce that empty inputs return an "Invalid/Error" output
746
+ 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;
747
+
748
+ if (isAllBlank) {
749
+ document.getElementById('predictiveFormView').classList.add('hidden');
750
+ document.getElementById('predictiveResultView').classList.remove('hidden');
751
+
752
+ const riskCard = document.getElementById('riskStatusCard');
753
+ const riskBadge = document.getElementById('riskBadge');
754
+ const riskIcon = document.getElementById('riskIcon');
755
+ const riskLabel = document.getElementById('riskLabelText');
756
+ const riskText = document.getElementById('riskLevelResult');
757
+
758
+ riskCard.className = 'ios-glass-inner p-10 rounded-[32px] shadow-sm dark:shadow-lg relative overflow-hidden w-full max-w-sm border border-gray-400 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50';
759
+ 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 bg-gray-500 border-gray-400';
760
+ riskIcon.className = 'fas fa-ban';
761
+ riskLabel.innerText = 'Invalid Input';
762
+ riskText.innerText = 'ERROR';
763
+
764
+ btn.disabled = false;
765
+ spinner.classList.add('hidden');
766
+ return;
767
+ }
768
+
769
  try {
770
  const res = await fetch('/predict_traffic_risk', {
771
  method: 'POST',