HuggerInChief/crowd-anomaly-detection

1<meta charset="UTF-8" />2<title>Crowd Anomaly Detection — YOLOv8 (Live, In-Browser)</title>3<meta name="viewport" content="width=device-width, initial-scale=1" />4<link rel="stylesheet" href="style.css" />5<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.19.2/dist/ort.min.js"></script>6 7<div class="wrap">8  <header class="hero">9    <div class="badge">Runs 100% in your browser — no server, no upload</div>10    <h1>🚨 Crowd Anomaly Detection</h1>11    <p>12      YOLOv8s trained on UCSD Ped1/Ped2 and CUHK Avenue surveillance footage,13      exported to ONNX and running fully client-side via14      <code>onnxruntime-web</code>. Detects anomalous objects/behaviour15      (cyclists, carts, running, throwing) in pedestrian scenes.16    </p>17  </header>18 19  <div class="tabs">20    <button class="tab-btn active" data-tab="tab-image">🖼️ Image</button>21    <button class="tab-btn" data-tab="tab-webcam">🔴 Live Webcam</button>22    <button class="tab-btn" data-tab="tab-metrics">📊 Model &amp; Metrics</button>23  </div>24 25  <div class="panel controls-row">26    <div class="control">27      <label for="conf-slider">Confidence threshold: <output id="conf-value">0.25</output></label>28      <input type="range" id="conf-slider" min="0.05" max="0.9" step="0.05" value="0.25" />29    </div>30  </div>31 32  <div id="tab-image" class="tab-view active panel">33    <div class="stage">34      <div class="stage-col">35        <div id="dropzone" class="dropzone">36          Click or drop an image here37          <input type="file" id="file-input" accept="image/*" hidden />38        </div>39        <div class="examples">40          <img src="examples/avenue_01_sample.jpg" title="Avenue sample 1" />41          <img src="examples/avenue_05_sample.jpg" title="Avenue sample 2" />42          <img src="examples/ucsd_ped1_sample.jpg" title="UCSD Ped1 sample" />43          <img src="examples/ucsd_ped2_sample.jpg" title="UCSD Ped2 sample" />44        </div>45      </div>46      <div class="stage-col">47        <div class="canvas-frame">48          <canvas id="img-canvas"></canvas>49        </div>50        <div style="margin-top: 12px;">51          <button id="detect-btn" class="primary" disabled>Detect</button>52        </div>53      </div>54    </div>55  </div>56 57  <div id="tab-webcam" class="tab-view panel">58    <p style="color: var(--muted); margin-top: 0;">59      Streams your webcam locally and re-runs detection continuously — nothing60      leaves your machine. First inference may take a moment while the model61      warms up.62    </p>63    <div class="stage-col" style="max-width: 640px;">64      <div class="canvas-frame">65        <video id="webcam-video" muted playsinline style="display:none;"></video>66        <canvas id="webcam-canvas"></canvas>67      </div>68      <div style="margin-top: 12px; display: flex; gap: 10px;">69        <button id="start-webcam-btn" class="primary">Start webcam</button>70        <button id="stop-webcam-btn" class="secondary" disabled>Stop</button>71      </div>72    </div>73  </div>74 75  <div id="tab-metrics" class="tab-view panel">76    <h3 style="margin-top:0;">Model &amp; training summary</h3>77    <table class="metrics">78      <tr><th>Architecture</th><td>YOLOv8s, 640×640</td></tr>79      <tr><th>Training data</th><td>UCSD Ped1, UCSD Ped2, CUHK Avenue (pixel-mask GT → YOLO boxes)</td></tr>80      <tr><th>Experiments</th><td>E0 baseline → E1 + augmentation → E2 (this model): larger model + resolution</td></tr>81    </table>82    <h3>Test-set results (locked, clip-level split)</h3>83    <table class="metrics">84      <tr><th>ROC-AUC (frame-level)</th><td>0.7941</td></tr>85      <tr><th>PR-AUC (frame-level)</th><td>0.7823</td></tr>86      <tr><th>EER (frame-level)</th><td>0.2599</td></tr>87      <tr><th>F1 @ threshold</th><td>0.7417</td></tr>88      <tr><th>mAP50 (box-level)</th><td>0.5345</td></tr>89      <tr><th>mAP50-95 (box-level)</th><td>0.4113</td></tr>90    </table>91    <p style="color: var(--muted);">92      Phase 1 vs Phase 2 (identical test set, identical metrics): YOLOv893      improves ROC-AUC by +6.1%, F1 by +11.6%, and EER by −22.3% over the best94      classical baseline (PCA reconstruction / Conv-AE).95    </p>96  </div>97 98  <div id="status" class="status-line">Loading model…</div>99 100  <footer>101    Single detection class: <code>anomaly</code>. Built with Ultralytics102    YOLOv8 (exported to ONNX) + onnxruntime-web. See the project report for103    full methodology and error analysis.104  </footer>105</div>106 107<script src="main.js"></script>108