fix and info

frontend/vehicles.html

@@ -38,6 +38,53 @@
         ::-webkit-scrollbar-thumb:hover {
             background: #94a3b8;
         }
+
+        .info-wrap {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            margin-left: 6px;
+        }
+
+        .info-btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            background: #94a3b8;
+            color: #fff;
+            font-size: 8px;
+            cursor: default;
+            flex-shrink: 0;
+            transition: background 0.15s;
+        }
+
+        .info-wrap:hover .info-btn {
+            background: #64748b;
+        }
+
+        .info-tip {
+            display: none;
+            position: fixed;
+            z-index: 9999;
+            background: #0f172a;
+            color: #e2e8f0;
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 1.4;
+            padding: 8px 12px;
+            border-radius: 8px;
+            max-width: 280px;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+            white-space: normal;
+            pointer-events: none;
+        }
+
+        .info-wrap:hover .info-tip {
+            display: block;
+        }
     </style>
 </head>
 
@@ -111,9 +158,12 @@
 
             <!-- Congestion Index -->
             <div class="col-span-2 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
-                <div class="flex justify-between items-center mb-2">
-                    <h3 class="font-bold text-slate-900 text-sm">Congestion Index <span
-                            class="text-[10px] font-normal text-slate-500 ml-1">(Active Vehicles per Frame)</span></h3>
+                <div class="flex justify-between items-center mb-2 relative">
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Congestion Index
+                        <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                            <span class="info-tip">Count of active tracked vehicles visible in each processed
+                                frame.</span></span>
+                    </h3>
                 </div>
                 <div class="flex-1 relative w-full min-h-0">
                     <canvas id="congestionChart"></canvas>
@@ -151,17 +201,24 @@
             <!-- Vehicle Classification Breakdown -->
             <div
                 class="col-span-1 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col overflow-hidden">
-                <div class="flex justify-between items-center mb-1">
-                    <h3 class="font-bold text-slate-900 text-sm">Vehicle Classification Breakdown</h3>
+                <div class="flex justify-between items-center mb-1 relative">
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Classification
+                        <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                            <span class="info-tip">Per-class vehicle distribution with directional split across the
+                                counting line.</span></span>
+                    </h3>
                 </div>
-                <div class="text-[10px] text-slate-400 mb-3">Detailed distribution by vehicle subclass</div>
+                <div class="text-[10px] text-slate-400 mb-3">By vehicle subclass</div>
                 <div class="flex-1 overflow-y-auto pr-3 space-y-2" id="class-breakdown"></div>
             </div>
 
             <!-- Class Dominance -->
             <div class="col-span-2 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
-                <div class="flex justify-between items-center mb-2">
-                    <h3 class="font-bold text-slate-900 text-sm">Class Dominance</h3>
+                <div class="flex justify-between items-center mb-2 relative">
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Class Dominance
+                        <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                            <span class="info-tip">Aggregated vehicle count grouped by business category.</span></span>
+                    </h3>
                     <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Grouped
                         Categories</span>
                 </div>
@@ -172,8 +229,12 @@
 
             <!-- Traffic Flow Over Time -->
             <div class="col-span-2 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
-                <div class="flex justify-between items-center mb-2">
-                    <h3 class="font-bold text-slate-900 text-sm">Traffic Flow Over Time</h3>
+                <div class="flex justify-between items-center mb-2 relative">
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Traffic Flow
+                        <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                            <span class="info-tip">Number of vehicles crossing the counting line, binned per second of
+                                video duration.</span></span>
+                    </h3>
                     <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Vehicles / Sec</span>
                 </div>
                 <div class="flex-1 w-full relative min-h-0">
@@ -239,6 +300,18 @@
     </main>
 
     <script>
+        // =========== Tooltip ===========
+        // Position tooltip near the icon using fixed positioning to avoid clipping
+        document.addEventListener('mouseover', e => {
+            const wrap = e.target.closest('.info-wrap');
+            if (!wrap) return;
+            const tip = wrap.querySelector('.info-tip');
+            if (!tip) return;
+            const rect = wrap.getBoundingClientRect();
+            tip.style.top = (rect.bottom + 6) + 'px';
+            tip.style.left = Math.min(rect.left, window.innerWidth - 300) + 'px';
+        });
+
         // =========== Tab switching ===========
         function switchTab(tab) {
             document.getElementById('tab-overview').classList.toggle('hidden', tab !== 'overview');
@@ -256,7 +329,7 @@
             }
         }
 
-        // =========== Run Details panel ===========
+        // =========== Run Details helpers ===========
         function detailRow(label, value, extra) {
             extra = extra || '';
             return `<div class="flex justify-between items-center border-b border-slate-50 pb-2">
@@ -265,6 +338,17 @@
             </div>`;
         }
 
+        function infoRow(label, value, tip, extra) {
+            extra = extra || '';
+            return `<div class="flex justify-between items-center border-b border-slate-50 pb-2 relative">
+                <span class="text-xs font-medium text-slate-500 mono-font flex items-center">${label}
+                    <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                    <span class="info-tip">${tip}</span></span>
+                </span>
+                <span class="text-sm font-bold text-slate-800">${value}${extra}</span>
+            </div>`;
+        }
+
         function boolBadge(val) {
             if (val) return `<span class="inline-flex items-center bg-green-50 text-green-700 text-[10px] font-bold px-2 py-0.5 rounded border border-green-200"><i class="fa-solid fa-check mr-1"></i>TRUE</span>`;
             return `<span class="text-[10px] font-bold text-slate-300">FALSE</span>`;
@@ -282,8 +366,11 @@
 
             const cpuPct = Math.min(100, Math.round((c.cpu_score / 10) * 100));
             document.getElementById('panel-perf').innerHTML =
-                `<div class="flex justify-between items-center border-b border-slate-50 pb-2">
-                    <span class="text-xs font-medium text-slate-500 mono-font">cpu_score</span>
+                `<div class="flex justify-between items-center border-b border-slate-50 pb-2 relative">
+                    <span class="text-xs font-medium text-slate-500 mono-font flex items-center">cpu_score
+                        <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                        <span class="info-tip">Available CPU core count used for throughput estimation.</span></span>
+                    </span>
                     <div class="flex items-center">
                         <span class="text-sm font-bold text-slate-800 mr-2">${c.cpu_score}</span>
                         <div class="w-16 h-1.5 bg-slate-100 rounded-full overflow-hidden">
@@ -291,34 +378,24 @@
                         </div>
                     </div>
                 </div>` +
-                detailRow('model_fps_est', c.model_fps_est, ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
-                detailRow('effective_fps', c.effective_fps_est, ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
-                `<div class="flex justify-between items-center pt-1">
-                    <span class="text-xs font-medium text-slate-500 mono-font">realtime_possible</span>
-                    ${boolBadge(c.realtime_possible)}
-                </div>`;
+                infoRow('model_fps_est', c.model_fps_est, 'Estimated model inference throughput based on CPU benchmark.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
+                infoRow('effective_fps', c.effective_fps_est, 'Adjusted throughput accounting for frame stride.', ' <span class="text-xs text-slate-400 font-normal">fps</span>');
 
             document.getElementById('panel-model').innerHTML =
                 `<div class="flex justify-between items-center border-b border-slate-50 pb-2">
                     <span class="text-xs font-medium text-slate-500 mono-font">model</span>
-                    <span class="text-sm font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-100 mono-font">Perception365/VehicleNet-Y26s</span>
+                    <a href="https://huggingface.co/Perception365/VehicleNet-Y26s" target="_blank" class="text-sm font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-100 mono-font hover:bg-blue-100 transition">Perception365/VehicleNet-Y26s <i class="fa-solid fa-arrow-up-right-from-square text-[9px] ml-1"></i></a>
                 </div>` +
                 detailRow('task', 'detect') +
                 detailRow('tracker', 'ByteTrack');
 
             document.getElementById('panel-infer').innerHTML =
-                detailRow('imgsz', c.imgsz) +
-                detailRow('detect_stride', c.detect_stride) +
-                detailRow('conf', c.conf || 0.12) +
-                detailRow('iou', c.iou || 0.60) +
-                `<div class="flex justify-between items-center border-b border-slate-50 pb-2">
-                    <span class="text-xs font-medium text-slate-500 mono-font">stream</span>
-                    <span class="text-[10px] font-bold text-slate-400">TRUE</span>
-                </div>` +
-                `<div class="flex justify-between items-center border-b border-slate-50 pb-2">
-                    <span class="text-xs font-medium text-slate-500 mono-font">verbose</span>
-                    ${boolBadge(false)}
-                </div>`;
+                infoRow('imgsz', c.imgsz, 'Input image resolution for model inference.') +
+                infoRow('detect_stride', c.detect_stride, 'Frames skipped between consecutive detections.') +
+                infoRow('conf', c.conf || 0.12, 'Minimum confidence threshold for valid detections.') +
+                infoRow('iou', c.iou || 0.60, 'Intersection-over-Union threshold for non-max suppression.') +
+                infoRow('stream', 'TRUE', 'Frame-by-frame processing for constant memory usage.') +
+                infoRow('verbose', 'FALSE', 'Console logging suppressed during inference.');
         }
 
         // =========== Charts ===========
@@ -476,8 +553,8 @@
 
                     document.getElementById('panel-proc-results').innerHTML =
                         detailRow('processing_time', d.processing_time + ' sec') +
-                        detailRow('actual_fps', d.actual_fps, ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
-                        detailRow('speed_vs_realtime', d.speed_vs_realtime + 'x');
+                        infoRow('actual_fps', d.actual_fps, 'Measured frame throughput during processing.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
+                        infoRow('speed_vs_realtime', d.speed_vs_realtime + 'x', 'Processing speed relative to video playback rate.');
                     return;
                 }