Pre-wire local ONNX player detection engine + export script

streamgeeks · streamgeeks · commit fdb0a2935549 · 2026-02-24T09:55:56.000-05:00
Local ONNX inference engine (ready for when .onnx file is exported):
- OnnxModelRunner for player detection wired into app.js
- 3-engine toggle restored: Local ONNX (default) | Cloud API | Moondream
- Auto-fallback: if ONNX model fails to load, switches to Cloud
- Max FPS mode via requestAnimationFrame for local engine
- Analysis rate options: Max FPS, 10, 5, 2, 1 FPS
- Player class names mapped (11 classes: ball, player, referee, etc.)
- ONNX model path: model/rfdetr-player.onnx (not yet exported)

Export script (export_to_onnx.py):
- Run in Google Colab or any machine with pip access
- Installs rfdetr, loads checkpoint, exports via model.export()
- Cannot run on this Windows machine (rfdetr needs C++ build tools
  for stringzilla dependency, and PyTorch 2.10's ONNX exporter has
  a Unicode bug on Windows with the new dynamo path)

To complete local inference:
1. Open Google Colab
2. Upload players.pt
3. Run: pip install rfdetr
4. Run: from rfdetr import RFDETRSmall; m = RFDETRSmall(num_classes=11, resolution=640); m.load_checkpoint('players.pt'); m.export('rfdetr-player.onnx')
5. Download rfdetr-player.onnx
6. Place in 19-sports-player-id/model/rfdetr-player.onnx
7. The tool will automatically detect and use it

Also: .gitignore for .pt files, removed uncommitted weight files
diff --git a/19-sports-player-id/.gitignore b/19-sports-player-id/.gitignore
@@ -0,0 +1,2 @@
+*.pt
+*.pyc
diff --git a/19-sports-player-id/app.js b/19-sports-player-id/app.js
@@ -52,7 +52,7 @@ document.addEventListener('DOMContentLoaded', async function() {
     // ══════════════════════════════════════════════════
     //  STATE
     // ══════════════════════════════════════════════════
-    let engine = 'roboflow-cloud'; // 'roboflow-cloud' | 'moondream'
+    let engine = 'onnx-local'; // 'onnx-local' | 'roboflow-cloud' | 'moondream'
     let mode = 'camera';
     let moondreamClient = null;
     let currentStream = null;
@@ -65,10 +65,18 @@ document.addEventListener('DOMContentLoaded', async function() {
     let uploadedImages = [];
     let uploadIndex = 0;
 
-    // Roboflow API key — used for both cloud and local inference
+    // Roboflow API key — used for cloud inference
     var ROBOFLOW_DEFAULT_KEY = 'eMRExtPvBQ73dtzKu8Yu';
 
-
+    // Local ONNX player detection model
+    var playerOnnxModel = null;
+    var playerModelLoaded = false;
+    var PLAYER_ONNX_PATH = 'model/rfdetr-player.onnx';
+    var PLAYER_CLASS_NAMES = {
+        0: 'ball', 1: 'ball-in-basket', 2: 'number', 3: 'player',
+        4: 'player-in-possession', 5: 'player-jump-shot', 6: 'player-layup-dunk',
+        7: 'player-shot-block', 8: 'referee', 9: 'rim', 10: 'background'
+    };
 
     // FPS tracking
     let fpsHistory = [];
@@ -324,6 +332,73 @@ document.addEventListener('DOMContentLoaded', async function() {
         }
     }
 
+    // ══════════════════════════════════════════════════
+    //  LOCAL ONNX PLAYER DETECTION
+    // ══════════════════════════════════════════════════
+    async function loadPlayerModel() {
+        if (playerModelLoaded) return true;
+        updateStatus('Loading local ONNX model...');
+        window.reasoningConsole.logInfo('Loading player detection ONNX model...');
+
+        playerOnnxModel = new OnnxModelRunner(PLAYER_ONNX_PATH, {
+            inputWidth: 640,
+            inputHeight: 640,
+            task: 'detect',
+            classNames: PLAYER_CLASS_NAMES
+        });
+
+        var loaded = await playerOnnxModel.load(function(msg) {
+            updateStatus('ONNX: ' + msg);
+        });
+
+        playerModelLoaded = loaded;
+        if (loaded) {
+            window.reasoningConsole.logInfo('Player ONNX model loaded');
+            updateStatus('Local model ready');
+        } else {
+            window.reasoningConsole.logError('Player ONNX model failed to load');
+            updateStatus('Local model failed — try Cloud engine', true);
+        }
+        return loaded;
+    }
+
+    async function onnxLocalDetect() {
+        if (!playerModelLoaded) {
+            var ok = await loadPlayerModel();
+            if (!ok) throw new Error('Local ONNX model not available');
+        }
+
+        var source = (mode === 'sample') ? sampleVideo : video;
+        var confidence = parseInt(confidenceSlider.value) / 100;
+        var startTime = Date.now();
+
+        var result = await playerOnnxModel.infer(source, confidence);
+        var latency = Date.now() - startTime;
+
+        // Parse into standard format
+        var players = [];
+        var numbers = [];
+        var others = [];
+
+        (result.detections || []).forEach(function(det) {
+            if (ROBOFLOW_PLAYER_CLASSES.indexOf(det.class) !== -1) {
+                players.push(det);
+            } else if (det.class === ROBOFLOW_NUMBER_CLASS) {
+                numbers.push(det);
+            } else {
+                others.push(det);
+            }
+        });
+
+        var vw = source.videoWidth || 640;
+        var vh = source.videoHeight || 480;
+
+        if (framesAnalyzed % 20 === 0 || latency > 500) {
+            window.reasoningConsole.logInfo('ONNX Local: ' + players.length + ' players, ' + numbers.length + ' numbers (' + latency + 'ms)');
+        }
+        return { players: players, numbers: numbers, others: others, imageWidth: vw, imageHeight: vh };
+    }
+
     // ══════════════════════════════════════════════════
     //  FPS TRACKING
     // ══════════════════════════════════════════════════
@@ -578,7 +653,9 @@ document.addEventListener('DOMContentLoaded', async function() {
         try {
             // Step 1: Detect — dispatch to selected engine
             var detResult;
-            if (engine === 'roboflow-cloud') {
+            if (engine === 'onnx-local') {
+                detResult = await onnxLocalDetect();
+            } else if (engine === 'roboflow-cloud') {
                 detResult = await roboflowCloudDetect(imageBase64);
             } else {
                 detResult = await moondreamDetect(imageBase64);
@@ -588,7 +665,9 @@ document.addEventListener('DOMContentLoaded', async function() {
             updateFPS();
 
             // Step 2: Team clustering via K-means on uniform colors
-
+            if (!imageBase64 || engine === 'onnx-local') {
+                imageBase64 = captureFrame();
+            }
             var colors = detResult.players.map(function(p) {
                 return sampleDominantColor(imageBase64, p);
             });
@@ -604,8 +683,10 @@ document.addEventListener('DOMContentLoaded', async function() {
             updateTrackedPlayers(detResult.players, teamAssignments, numberPairs, imageBase64);
 
             // Step 5: OCR jersey numbers
-            if (engine === 'roboflow-cloud' && Object.keys(numberPairs).length > 0 && moondreamClient) {
-                ocrNumberCrops(imageBase64, detResult.players, numberPairs);
+            if ((engine === 'roboflow-cloud' || engine === 'onnx-local') && Object.keys(numberPairs).length > 0 && moondreamClient) {
+                if (engine === 'roboflow-cloud' || framesAnalyzed % 15 === 0) {
+                    ocrNumberCrops(imageBase64, detResult.players, numberPairs);
+                }
             } else if (engine === 'moondream') {
                 var unconfirmed = trackedPlayers.filter(function(tp) { return !tp.confirmedNumber; }).slice(0, 3);
                 for (var i = 0; i < unconfirmed.length; i++) {
@@ -635,8 +716,12 @@ document.addEventListener('DOMContentLoaded', async function() {
 
         // Schedule next frame
         if (running) {
-            var interval = parseInt(intervalSelect.value) || 500;
-            analysisTimeout = setTimeout(analyzeFrame, interval);
+            var interval = parseInt(intervalSelect.value);
+            if (interval === 0 && engine === 'onnx-local') {
+                requestAnimationFrame(function() { analyzeFrame(); });
+            } else {
+                analysisTimeout = setTimeout(analyzeFrame, interval || 200);
+            }
         }
     }
 
@@ -951,6 +1036,14 @@ document.addEventListener('DOMContentLoaded', async function() {
     // ══════════════════════════════════════════════════
     async function startAnalysis() {
         // Validate engine requirements
+        if (engine === 'onnx-local') {
+            var ok = await loadPlayerModel();
+            if (!ok) {
+                window.reasoningConsole.logInfo('Local ONNX failed, falling back to Cloud');
+                engine = 'roboflow-cloud';
+                switchEngine('roboflow-cloud');
+            }
+        }
         if (engine === 'roboflow-cloud') {
             if (!window.apiKeyManager.hasRoboflowKey() && !ROBOFLOW_DEFAULT_KEY) {
                 window.apiKeyManager.showModal();
@@ -1045,9 +1138,10 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     function switchEngine(eng) {
         engine = eng;
-        document.getElementById('engineRoboflowBtn').classList.toggle('active', engine === 'roboflow-cloud');
+        document.getElementById('engineLocalBtn').classList.toggle('active', engine === 'onnx-local');
+        document.getElementById('engineCloudBtn').classList.toggle('active', engine === 'roboflow-cloud');
         engineMoondreamBtn.classList.toggle('active', engine === 'moondream');
-        roboflowInfo.style.display = engine === 'roboflow-cloud' ? '' : 'none';
+        roboflowInfo.style.display = (engine === 'roboflow-cloud' || engine === 'onnx-local') ? '' : 'none';
         window.reasoningConsole.logInfo('Switched to ' + engine + ' engine');
     }
 
@@ -1604,7 +1698,8 @@ document.addEventListener('DOMContentLoaded', async function() {
     modeCameraBtn.addEventListener('click', function() { switchMode('camera'); });
     modeSampleBtn.addEventListener('click', function() { switchMode('sample'); });
     modeUploadBtn.addEventListener('click', function() { switchMode('upload'); });
-    document.getElementById('engineRoboflowBtn').addEventListener('click', function() { switchEngine('roboflow-cloud'); });
+    document.getElementById('engineLocalBtn').addEventListener('click', function() { switchEngine('onnx-local'); });
+    document.getElementById('engineCloudBtn').addEventListener('click', function() { switchEngine('roboflow-cloud'); });
     engineMoondreamBtn.addEventListener('click', function() { switchEngine('moondream'); });
     cameraSelect.addEventListener('change', function() { if (cameraSelect.value) startCamera(cameraSelect.value); });
     refreshCamerasBtn.addEventListener('click', enumerateCameras);
diff --git a/19-sports-player-id/export_to_onnx.py b/19-sports-player-id/export_to_onnx.py
@@ -0,0 +1,55 @@
+"""
+RF-DETR Small → ONNX Export Script
+===================================
+Run this in Google Colab or any Linux/Mac machine with pip access.
+It will NOT work on Windows without Visual Studio C++ build tools.
+
+Usage (Colab):
+  1. Upload players.pt to your Colab session
+  2. Run this script
+  3. Download rfdetr-player.onnx
+
+Usage (local):
+  pip install rfdetr
+  python export_to_onnx.py --checkpoint players.pt --output model/rfdetr-player.onnx
+"""
+
+import argparse
+import os
+import sys
+
+def main():
+    parser = argparse.ArgumentParser(description='Export RF-DETR Small to ONNX')
+    parser.add_argument('--checkpoint', type=str, default='players.pt',
+                        help='Path to the .pt checkpoint file')
+    parser.add_argument('--output', type=str, default='rfdetr-player.onnx',
+                        help='Output ONNX file path')
+    parser.add_argument('--num-classes', type=int, default=11,
+                        help='Number of classes (default: 11 for basketball)')
+    parser.add_argument('--resolution', type=int, default=640,
+                        help='Input resolution (default: 640)')
+    args = parser.parse_args()
+
+    # Install rfdetr if not present
+    try:
+        from rfdetr import RFDETRSmall
+    except ImportError:
+        print('Installing rfdetr...')
+        os.system(f'{sys.executable} -m pip install rfdetr')
+        from rfdetr import RFDETRSmall
+
+    print(f'Loading checkpoint: {args.checkpoint}')
+    model = RFDETRSmall(num_classes=args.num_classes, resolution=args.resolution)
+    model.load_checkpoint(args.checkpoint)
+
+    print(f'Exporting to ONNX: {args.output}')
+    model.export(args.output)
+
+    size_mb = os.path.getsize(args.output) / 1024 / 1024
+    print(f'Done! Output: {args.output} ({size_mb:.1f} MB)')
+    print()
+    print('Next step: copy rfdetr-player.onnx to 19-sports-player-id/model/')
+
+
+if __name__ == '__main__':
+    main()
diff --git a/19-sports-player-id/index.html b/19-sports-player-id/index.html
@@ -384,13 +384,16 @@ <h2>Settings</h2>
                     </div>
                 </div>
 
-                <!-- Engine selector -->
+                <!-- Engine selector (3-way) -->
                 <div class="engine-toggle">
-                    <button id="engineRoboflowBtn" class="active" data-engine="roboflow-cloud">
-                        Roboflow<span class="engine-sub">RF-DETR v13 &middot; Cloud API</span>
+                    <button id="engineLocalBtn" class="active" data-engine="onnx-local">
+                        Local ONNX<span class="engine-sub">In-browser &middot; Fast</span>
+                    </button>
+                    <button id="engineCloudBtn" data-engine="roboflow-cloud">
+                        Cloud<span class="engine-sub">Roboflow API</span>
                     </button>
                     <button id="engineMoondreamBtn" data-engine="moondream">
-                        Moondream<span class="engine-sub">VLM &middot; Flexible</span>
+                        Moondream<span class="engine-sub">VLM</span>
                     </button>
                 </div>
 
@@ -403,11 +406,13 @@ <h2>Settings</h2>
                 <div class="control-group">
                     <label for="intervalSelect">Analysis Rate</label>
                     <select id="intervalSelect">
+                        <option value="0">Max FPS (Local ONNX)</option>
+                        <option value="100">~10 FPS</option>
+                        <option value="200" selected>~5 FPS</option>
                         <option value="500">~2 FPS</option>
-                        <option value="1000" selected>~1 FPS</option>
+                        <option value="1000">~1 FPS</option>
                         <option value="2000">Every 2s</option>
                         <option value="5000">Every 5s</option>
-                        <option value="10000">Every 10s</option>
                     </select>
                 </div>
 
