openvino adapted and adjustments

README.md

@@ -22,11 +22,12 @@ Full-stack traffic analytics dashboard. YOLO + ByteTrack backend processes uploa
 - **Frontend**: Vanilla HTML/JS, TailwindCSS CDN, Chart.js
 - **Infra**: Docker, CPU-only inference
 
-## Run with Docker
+## Run Locally with Docker
 
 ```bash
-docker build -t funky .
-docker run -p 7860:7860 funky
+docker build -t urbanflow .
+docker run -p 7860:7860 -e HF_TOKEN=hf_your_token_here urbanflow
+
 ```
 
 Open `http://localhost:7860`
@@ -45,4 +46,4 @@ python backend/server.py
 3. System auto-calculates optimal inference settings (adjustable)
 4. Draw counting line on first frame
 5. Engine processes frames, dashboard updates in real time
-6. View run details and live analytics
+6. View run details and live analytics

backend/config.py

@@ -57,7 +57,7 @@ def get_optimal_config(video_path):
     model_fps = _estimate_fps(imgsz, cpu_score)
     detect_stride = _select_stride(fps, model_fps)
     effective_fps = model_fps / detect_stride
-    # realtime_possible = effective_fps >= fps
+    realtime_possible = effective_fps >= fps
 
     return {
         "video_fps": fps,
@@ -69,6 +69,6 @@ def get_optimal_config(video_path):
         "imgsz": imgsz,
         "detect_stride": detect_stride,
         "model_fps_est": round(model_fps, 2),
-        "effective_fps_est": round(effective_fps, 2)
-        # "realtime_possible": realtime_possible
+        "effective_fps_est": round(effective_fps, 2),
+        "realtime_possible": realtime_possible
     }

backend/model.py

@@ -1,4 +1,3 @@
-# Using OpenVino as per Space settings compatible for performance on Intel CPU hardware
 import os
 from pathlib import Path
 from dotenv import load_dotenv
@@ -8,7 +7,7 @@ load_dotenv()
 
 MODEL_DIR = Path(__file__).parent / "weights"
 PT_PATH = MODEL_DIR / "best.pt"
-OV_PATH = MODEL_DIR / "best_openvino_model"  # it's a directory
+OV_DIR = MODEL_DIR / "best_openvino_model"
 
 
 def ensure_openvino():
@@ -22,12 +21,10 @@ def ensure_openvino():
             f'https://huggingface.co/Perception365/VehicleNet-Y26s/resolve/main/weights/best.pt'
         )
 
-    if not OV_PATH.exists():
-        # Export happens relative to the .pt file's location
-        # Result will be: weights/best_openvino_model/
+    if not OV_DIR.exists():
         YOLO(str(PT_PATH)).export(format="openvino", dynamic=True)
 
 
 def load_model():
     ensure_openvino()
-    return YOLO(str(OV_PATH), task="detect")
+    return YOLO(str(OV_DIR), task="detect")

frontend/initial.html

@@ -105,8 +105,9 @@
 
             <!-- STEP: Module Select -->
             <div id="step-modules" class="w-full flex flex-col fade-in justify-center">
-                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900">Select AI Module</h2>
-                <p class="text-[13px] font-medium text-slate-400 mb-6">Choose an intelligence pipeline for your media
+                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900 text-center">Select AI Module</h2>
+                <p class="text-[13px] font-medium text-slate-400 mb-6 text-center">Choose an intelligence pipeline for
+                    your media
                     stream.</p>
 
                 <div class="grid grid-cols-2 gap-4">
@@ -127,7 +128,8 @@
                             Coming Soon</div>
                         <i class="fa-solid fa-layer-group text-3xl text-slate-300 mb-4 block"></i>
                         <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight text-slate-700">Semantic
-                            <br>Segmentation</h3>
+                            <br>Segmentation
+                        </h3>
                         <p class="text-[10px] text-slate-400 font-medium">Pixel-perfect instance segmentation for
                             complex spatial scene understanding.</p>
                     </div>
@@ -138,7 +140,8 @@
                             Coming Soon</div>
                         <i class="fa-solid fa-tags text-3xl text-slate-300 mb-4 block"></i>
                         <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight text-slate-700">Image
-                            <br>Classification</h3>
+                            <br>Classification
+                        </h3>
                         <p class="text-[10px] text-slate-400 font-medium">High-speed categorical labeling for vast and
                             diverse image datasets.</p>
                     </div>
@@ -149,7 +152,8 @@
                             Coming Soon</div>
                         <i class="fa-solid fa-expand text-3xl text-slate-300 mb-4 block"></i>
                         <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight text-slate-700">Custom
-                            <br>Detection</h3>
+                            <br>Detection
+                        </h3>
                         <p class="text-[10px] text-slate-400 font-medium">Deploy proprietary neural networks for highly
                             specialized edge inference.</p>
                     </div>
@@ -162,8 +166,10 @@
                     class="text-slate-400 hover:text-black transition flex items-center text-xs font-bold uppercase tracking-widest mb-6 w-fit">
                     <i class="fa-solid fa-arrow-left mr-2"></i> Back to Modules
                 </button>
-                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900">Initialize Media Source</h2>
-                <p class="text-[13px] font-medium text-slate-400 mb-8">Provide the target video footage to configure the
+                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900 text-center">Initialize Media Source
+                </h2>
+                <p class="text-[13px] font-medium text-slate-400 mb-8 text-center">Provide the target video footage to
+                    configure the
                     Traffic Analytics pipeline.</p>
 
                 <div id="dropzone"
@@ -192,8 +198,9 @@
 
             <!-- STEP: Config -->
             <div id="step-config" class="hidden w-full flex flex-col fade-in justify-center">
-                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900">System Configuration</h2>
-                <p class="text-[11px] font-montserrat font-bold text-slate-400 mb-8 uppercase tracking-widest">
+                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900 text-center">System Configuration</h2>
+                <p
+                    class="text-[11px] font-montserrat font-bold text-slate-400 mb-8 uppercase tracking-widest text-center">
                     Optimal values auto-configured for performance
                 </p>
 
@@ -207,8 +214,10 @@
 
             <!-- STEP: Draw Line -->
             <div id="step-draw" class="hidden w-full flex flex-col fade-in justify-center">
-                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900">Define Boundary</h2>
-                <p class="text-[11px] font-montserrat font-bold uppercase tracking-widest text-slate-400 mb-6">Click two
+                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900 text-center">Define Boundary</h2>
+                <p
+                    class="text-[11px] font-montserrat font-bold uppercase tracking-widest text-slate-400 mb-6 text-center">
+                    Click two
                     points to establish counting threshold</p>
 
                 <div
@@ -244,9 +253,9 @@
         let runConfig = {};
 
         const configParams = [
-            { key: "imgsz", label: "Image Size", step: 32, min: 320, max: 1280 },
-            { key: "conf", label: "Confidence", step: 0.01, min: 0.01, max: 1.0, decimals: 2 },
-            { key: "iou", label: "IoU Threshold", step: 0.05, min: 0.1, max: 1.0, decimals: 2 },
+            { key: "imgsz", label: "Image Size", step: 32, min: 640, max: 1280 },
+            { key: "conf", label: "Confidence", step: 0.01, min: 0.08, max: 1.0, decimals: 2 },
+            { key: "iou", label: "IoU Threshold", step: 0.05, min: 0.5, max: 1.0, decimals: 2 },
             { key: "detect_stride", label: "Frame Stride", step: 1, min: 1, max: 10 }
         ];
 

frontend/vehicles.html

@@ -154,10 +154,10 @@
         </div>
 
         <!-- TAB: Overview -->
-        <div id="tab-overview" class="grid grid-cols-4 gap-4 flex-1 min-h-0 grid-rows-2">
+        <div id="tab-overview" class="grid grid-cols-6 gap-4 flex-1 min-h-0 grid-rows-2">
 
             <!-- Congestion Index -->
-            <div class="col-span-2 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
+            <div class="col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
                 <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>
@@ -200,7 +200,7 @@
 
             <!-- 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">
+                class="col-span-2 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 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>
@@ -213,7 +213,7 @@
             </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="col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
                 <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>
@@ -228,7 +228,7 @@
             </div>
 
             <!-- 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="col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
                 <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>
@@ -246,7 +246,7 @@
 
         <!-- TAB: Run Details -->
         <div id="tab-run-details" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div class="grid grid-cols-2 gap-4 h-full">
+            <div class="grid grid-cols-2 gap-4">
                 <!-- Video Input -->
                 <div class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
                     <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
@@ -308,7 +308,12 @@
             const tip = wrap.querySelector('.info-tip');
             if (!tip) return;
             const rect = wrap.getBoundingClientRect();
-            tip.style.top = (rect.bottom + 6) + 'px';
+            const tipH = 60;
+            if (rect.bottom + tipH + 10 > window.innerHeight) {
+                tip.style.top = (rect.top - tipH - 6) + 'px';
+            } else {
+                tip.style.top = (rect.bottom + 6) + 'px';
+            }
             tip.style.left = Math.min(rect.left, window.innerWidth - 300) + 'px';
         });
 
@@ -387,11 +392,12 @@
                     <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('format', 'OpenVINO') +
                 detailRow('tracker', 'ByteTrack');
 
             document.getElementById('panel-infer').innerHTML =
                 infoRow('imgsz', c.imgsz, 'Input image resolution for model inference.') +
-                infoRow('detect_stride', c.detect_stride, 'Frames skipped between consecutive detections.') +
+                infoRow('vid_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.') +

requirements.txt

@@ -7,6 +7,7 @@ numpy==1.24.3
 python-dotenv==1.0.0
 websockets==12.0
 onnxruntime
+openvino>=2024.0.0
 onnx>=1.12.0
 onnxslim>=0.1.71
 lap>=0.5.12