info dots added for inference config, shdes removed from KPIs

frontend/vehicles.html

@@ -142,7 +142,7 @@
         }
 
         .shadow-sm {
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
+            box-shadow: none !important;
         }
 
         /* Controls */
@@ -243,9 +243,8 @@
         }
 
         .s-row.disabled {
-            opacity: 0.4 !important;
+            opacity: 0.7 !important;
             pointer-events: none !important;
-            filter: grayscale(1);
         }
 
         #btn-start-processing {
@@ -671,7 +670,12 @@
                     <div class="px-6 py-2" id="settings-params">
                         <div class="s-row" data-param="imgsz">
                             <div>
-                                <div class="text-xs font-semibold text-slate-700">Image Size</div>
+                                <div class="text-xs font-semibold text-slate-700 flex items-center">Image Size
+                                    <span class="info-wrap ml-1">
+                                        <span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Input resolution fed to the detection model. Locked to the value compiled into the OpenVINO graph.</span>
+                                    </span>
+                                </div>
                                 <div class="text-[10px] text-slate-400">Model input resolution</div>
                             </div>
                             <div class="s-stepper"><button onclick="stepParam('imgsz',-32)">&#8249;</button><span
@@ -680,7 +684,12 @@
                         </div>
                         <div class="s-row" data-param="conf">
                             <div>
-                                <div class="text-xs font-semibold text-slate-700">Confidence</div>
+                                <div class="text-xs font-semibold text-slate-700 flex items-center">Confidence
+                                    <span class="info-wrap ml-1">
+                                        <span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Minimum score a detection must reach to be counted. Lower values detect more but may include false positives.</span>
+                                    </span>
+                                </div>
                                 <div class="text-[10px] text-slate-400">Minimum detection threshold</div>
                             </div>
                             <div class="s-stepper"><button onclick="stepParam('conf',-0.01)">&#8249;</button><span
@@ -689,7 +698,12 @@
                         </div>
                         <div class="s-row" data-param="iou">
                             <div>
-                                <div class="text-xs font-semibold text-slate-700">IoU Threshold</div>
+                                <div class="text-xs font-semibold text-slate-700 flex items-center">IoU Threshold
+                                    <span class="info-wrap ml-1">
+                                        <span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Controls how aggressively overlapping detections are merged. Higher values allow more overlap before suppression.</span>
+                                    </span>
+                                </div>
                                 <div class="text-[10px] text-slate-400">Non-max suppression overlap</div>
                             </div>
                             <div class="s-stepper"><button onclick="stepParam('iou',-0.05)">&#8249;</button><span
@@ -698,7 +712,12 @@
                         </div>
                         <div class="s-row" data-param="stride">
                             <div>
-                                <div class="text-xs font-semibold text-slate-700">Frame Stride</div>
+                                <div class="text-xs font-semibold text-slate-700 flex items-center">Frame Stride
+                                    <span class="info-wrap ml-1">
+                                        <span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Number of frames skipped between each detection pass. Higher values trade accuracy for speed.</span>
+                                    </span>
+                                </div>
                                 <div class="text-[10px] text-slate-400">Frames skipped between detections</div>
                             </div>
                             <div class="s-stepper"><button onclick="stepParam('stride',-1)">&#8249;</button><span
@@ -1058,18 +1077,7 @@
                 },
                 animation: { duration: 0 }
             },
-            plugins: [{
-                id: 'glow',
-                beforeDatasetsDraw: (chart) => {
-                    const ctx = chart.ctx;
-                    ctx.save();
-                    ctx.shadowBlur = 12;
-                    ctx.shadowColor = activePalette.congestion;
-                },
-                afterDatasetsDraw: (chart) => {
-                    chart.ctx.restore();
-                }
-            }]
+            plugins: []
         });
 
         const doughChart = new Chart(document.getElementById('doughnutChart').getContext('2d'), {
@@ -1091,18 +1099,7 @@
                 },
                 animation: { duration: 0 }
             },
-            plugins: [{
-                id: 'glow',
-                beforeDatasetsDraw: (chart) => {
-                    const ctx = chart.ctx;
-                    ctx.save();
-                    ctx.shadowBlur = 12;
-                    ctx.shadowColor = activePalette.doughOut;
-                },
-                afterDatasetsDraw: (chart) => {
-                    chart.ctx.restore();
-                }
-            }]
+            plugins: []
         });
 
         const domChart = new Chart(document.getElementById('dominanceChart').getContext('2d'), {
@@ -1117,18 +1114,7 @@
                 },
                 animation: { duration: 0 }
             },
-            plugins: [{
-                id: 'glow',
-                beforeDatasetsDraw: (chart) => {
-                    const ctx = chart.ctx;
-                    ctx.save();
-                    ctx.shadowBlur = 12;
-                    ctx.shadowColor = activePalette.dominance;
-                },
-                afterDatasetsDraw: (chart) => {
-                    chart.ctx.restore();
-                }
-            }]
+            plugins: []
         });
 
         const flowChart = new Chart(document.getElementById('flowChart').getContext('2d'), {
@@ -1143,18 +1129,7 @@
                 },
                 animation: { duration: 0 }
             },
-            plugins: [{
-                id: 'glow',
-                beforeDatasetsDraw: (chart) => {
-                    const ctx = chart.ctx;
-                    ctx.save();
-                    ctx.shadowBlur = 12;
-                    ctx.shadowColor = activePalette.flow;
-                },
-                afterDatasetsDraw: (chart) => {
-                    chart.ctx.restore();
-                }
-            }]
+            plugins: []
         });
 
         // =========== Update functions ===========