BiasLab2025/perception2
0
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8" />6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />7 <link rel="stylesheet" href="style.css">8 <title>HEL Perception & Engagement Reasoner (Weapon-Grade Demo)</title>9</head>10 11<body>12 <div id="app">13 <header>14 <div class="brand">15 <div class="logo" aria-hidden="true"></div>16 <div>17 <h1>HEL Perception & Engagement Reasoner</h1>18 <div class="sub">Video → detection → expert features → aimpoint + Intensity@Target → HEL feasibility →19 closed-loop tracking & dwell control</div>20 </div>21 </div>22 <div class="status-row">23 <div class="pill">24 <span class="dot" id="sys-dot"></span>25 <span id="sys-status">STANDBY · No video loaded</span>26 </div>27 <div class="pill">28 <span class="kbd">Reason</span>29 <span>Frame-1 inference</span>30 </div>31 <div class="pill">32 <span class="kbd">Engage</span>33 <span>Closed-loop track + dwell</span>34 </div>35 </div>36 </header>37 38 <div class="workspace">39 <aside>40 <div class="card">41 <h2>Video Input</h2>42 <div class="hint">Upload one video. Tab 1 uses only the first frame. Tab 2 reuses the same video for tracking43 and engagement.</div>44 45 <div class="row mt-md">46 <label for="videoFile">Video file</label>47 <span class="badge"><span id="videoMeta">No file</span></span>48 </div>49 <input id="videoFile" type="file" accept="video/*" />50 51 <div class="mt-md">52 <label>Mission Objective (optional · enables class filtering)</label>53 <textarea id="missionText" rows="3"54 placeholder="Optional: e.g., Detect people and vehicles; highlight hazards and key objects."></textarea>55 56 <div class="hint mt-sm">57 Mission objective is <b>optional</b>. If provided, it will be used directly as input to the detector.58 If left blank, the detector will detect <b>all</b> objects without filtering.59 <div class="mini mt-xs" id="hfBackendStatus">HF Backend: STANDBY</div>60 </div>61 </div>62 63 <div class="btnrow">64 <button id="btnLoadSample" class="btn secondary" title="Optional: wire up sample videos later" disabled>Load65 Sample</button>66 <button id="btnEject" class="btn danger" title="Unload video">Eject</button>67 </div>68 69 <div class="grid2">70 <div>71 <label>Detector</label>72 <select id="detectorSelect">73 <optgroup label="Object Detection Models">74 <option value="hf_yolov8" data-kind="object" selected>Lite</option>75 <option value="detr_resnet50" data-kind="object">Big</option>76 <option value="grounding_dino" data-kind="object">Large</option>77 </optgroup>78 <optgroup label="Segmentation Models">79 <option value="sam3" data-kind="segmentation">Segmentor</option>80 </optgroup>81 <optgroup label="Drone Detection Models">82 <option value="drone_yolo" data-kind="drone">Drone</option>83 </optgroup>84 85 </select>86 </div>87 <div>88 <label>Tracking</label>89 <select id="trackerSelect">90 <option value="iou">IOU + velocity (built-in)</option>91 <option value="external">External hook (user API)</option>92 </select>93 </div>94 95 <label class="checkbox-row" for="enableDepthToggle">96 <input type="checkbox" id="enableDepthToggle">97 <span>Enable Legacy Depth Map (Slow)</span>98 </label>99 <label class="checkbox-row" for="enableGPTToggle" style="margin-top: 4px;">100 <input type="checkbox" id="enableGPTToggle" checked>101 <span style="color: var(--accent-light);">Enable GPT Reasoning</span>102 </label>103 <label class="checkbox-row" for="enableStreamToggle" style="margin-top: 4px;">104 <input type="checkbox" id="enableStreamToggle" checked>105 <span>Enable Stream Processing</span>106 </label>107 </div>108 109 <div class="hint mt-sm" id="detectorHint">110 If the browser model cannot load (offline), plug in your own detector in <span111 class="kbd">externalDetect()</span>.112 </div>113 </div>114 115 <div class="card">116 <h2>Mission Intel Summary</h2>117 <div class="hint">Unbiased 2–3 sentence scene description computed from a few sampled frames + detected118 objects (no location inference).</div>119 120 <div class="intel">121 <div class="intel-top">122 <span class="badge"><span class="dot warn" id="intelDot"123 style="width:7px;height:7px;box-shadow:none"></span><span id="intelStamp">Idle</span></span>124 <button id="btnIntelRefresh" class="btn secondary"125 style="padding:8px 10px; border-radius:10px; font-weight:700">Refresh</button>126 </div>127 128 <div class="thumbrow" aria-label="sampled frames">129 <img id="intelThumb0" alt="sample frame 1" />130 <img id="intelThumb1" alt="sample frame 2" />131 <img id="intelThumb2" alt="sample frame 3" />132 </div>133 134 <div id="intelSummaryBox" class="intelbox">Upload a video, then click <b>Reason</b> to generate an unbiased135 scene summary.</div>136 </div>137 </div>138 139 <div class="card">140 <h2>HEL & Director Knobs</h2>141 <div class="grid2">142 <div>143 <label>Max output power (kW)</label>144 <input id="helPower" type="range" min="20" max="250" step="1" value="60" />145 <div class="row"><small class="mini"><span id="helPowerVal">60</span> kW</small><small class="mini">turret146 output</small></div>147 </div>148 <div>149 <label>Aperture (m)</label>150 <input id="helAperture" type="range" min="0.05" max="0.6" step="0.01" value="0.25" />151 <div class="row"><small class="mini"><span id="helApertureVal">0.25</span> m</small><small152 class="mini">beam director</small></div>153 </div>154 </div>155 156 <div class="grid2 mt-sm">157 <div>158 <label>Beam quality (M²)</label>159 <input id="helM2" type="range" min="1.1" max="4.0" step="0.1" value="1.6" />160 <div class="row"><small class="mini"><span id="helM2Val">1.6</span></small><small class="mini">lower is161 better</small></div>162 </div>163 <div>164 <label>Jitter (μrad RMS)</label>165 <input id="helJitter" type="range" min="0.5" max="15" step="0.1" value="3.2" />166 <div class="row"><small class="mini"><span id="helJitterVal">3.2</span></small><small167 class="mini">director stability</small></div>168 </div>169 </div>170 171 <div class="grid2 mt-sm">172 <div>173 <label>Mode</label>174 <select id="helMode">175 <option value="cw">CW (continuous)</option>176 <option value="burst">Burst (duty-limited)</option>177 <option value="pulse">Pulsed (peak shaping)</option>178 </select>179 </div>180 <div>181 <label>Duty cycle (%)</label>182 <input id="helDuty" type="range" min="10" max="100" step="1" value="85" />183 <div class="row"><small class="mini"><span id="helDutyVal">85</span>%</small><small class="mini">thermal /184 power</small></div>185 </div>186 </div>187 </div>188 189 <div class="card">190 <h2>Atmosphere & Maritime</h2>191 <div class="grid2">192 <div>193 <label>Visibility (km)</label>194 <input id="atmVis" type="range" min="1" max="30" step="1" value="16" />195 <div class="row"><small class="mini"><span id="atmVisVal">16</span> km</small><small196 class="mini">aerosol/haze</small></div>197 </div>198 <div>199 <label>Turbulence (Cn²)</label>200 <input id="atmCn2" type="range" min="1" max="10" step="1" value="5" />201 <div class="row"><small class="mini"><span id="atmCn2Val">5</span>/10</small><small202 class="mini">wavefront</small></div>203 </div>204 </div>205 206 <div class="grid2 mt-sm">207 <div>208 <label>Sea spray</label>209 <input id="seaSpray" type="range" min="0" max="10" step="1" value="2" />210 <div class="row"><small class="mini"><span id="seaSprayVal">2</span>/10</small><small class="mini">salt211 attenuation</small></div>212 </div>213 <div>214 <label>Adaptive optics</label>215 <input id="aoQ" type="range" min="0" max="10" step="1" value="7" />216 <div class="row"><small class="mini"><span id="aoQVal">7</span>/10</small><small class="mini">turbulence217 mitigation</small></div>218 </div>219 </div>220 221 <div class="grid2 mt-sm">222 <div>223 <label>Baseline range (m)</label>224 <input id="rangeBase" type="range" min="200" max="6000" step="25" value="1500" />225 <div class="row"><small class="mini"><span id="rangeBaseVal">1500</span> m</small><small226 class="mini">median target</small></div>227 </div>228 <div>229 <label>Update rate (Hz)</label>230 <input id="detHz" type="range" min="1" max="12" step="1" value="6" />231 <div class="row"><small class="mini"><span id="detHzVal">6</span> Hz</small><small class="mini">tab 2232 detection</small></div>233 </div>234 </div>235 </div>236 237 <div class="card">238 <h2>Engagement Policy</h2>239 <div class="grid2">240 <div>241 <label>Targeting</label>242 <select id="policyMode">243 <option value="auto">Auto: highest lethality margin</option>244 <option value="manual">Manual: click target</option>245 </select>246 </div>247 <div>248 <label>Assess window (s)</label>249 <input id="assessWindow" type="range" min="0.3" max="3.0" step="0.1" value="1.0" />250 <div class="row"><small class="mini"><span id="assessWindowVal">1.0</span> s</small><small251 class="mini">post-dwell</small></div>252 </div>253 </div>254 255 <div class="row">256 <label>Show agent cursor</label>257 <select id="cursorMode">258 <option value="on">On</option>259 <option value="off">Off</option>260 </select>261 </div>262 263 <div class="hint">The UI is wired for your APIs. Replace <span class="kbd">externalDetect()</span>, <span264 class="kbd">externalFeatures()</span>, and <span class="kbd">externalTrack()</span> when ready.</div>265 </div>266 267 <div class="card" style="flex:1; min-height:0">268 <h2>System Log</h2>269 <div class="log" id="sysLog"></div>270 </div>271 </aside>272 273 <main>274 <div class="tabs">275 <button class="tabbtn active" data-tab="frame">Tab 1 · Frame-1 Reason</button>276 <button class="tabbtn" data-tab="engage">Tab 2 · Video Engage</button>277 <button class="tabbtn" data-tab="trade">Trade Space</button>278 </div>279 280 <!-- ===== Tab 1 ===== -->281 <section class="tab active" id="tab-frame">282 <div class="frame-grid">283 <div class="panel panel-monitor">284 <h3>285 <span>First Frame · Detection + Aimpoints</span>286 <span class="rightnote" id="frameNote">Awaiting video</span>287 </h3>288 <div class="viewbox" id="frameViewBox">289 <canvas id="frameCanvas" width="1280" height="720"></canvas>290 <canvas id="frameOverlay" class="overlay" width="1280" height="720"></canvas>291 <div class="watermark">EO/IR · Track-ID · Aimpoint · Required Dwell</div>292 <div class="empty" id="frameEmpty">293 <div class="big">Upload a video to begin</div>294 <div class="small">This demo performs first-frame perception and engagement reasoning. Then it replays295 the same video with closed-loop tracking and dynamic dwell updates.</div>296 <div style="display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; justify-content:center;">297 <span class="badge"><span class="dot"></span> If you are online, COCO-SSD loads automatically</span>298 </div>299 </div>300 </div>301 302 <div class="btnrow" style="margin-top:10px">303 <button id="btnReason" class="btn">Reason</button>304 <button id="btnCancelReason" class="btn danger" style="display: none;">Cancel</button>305 <button id="btnRecompute" class="btn secondary">Recompute HEL</button>306 <button id="btnClear" class="btn secondary">Clear</button>307 </div>308 309 <div class="strip mt-md">310 <span class="chip" id="chipFrameDepth"311 title="Toggle depth view of first frame (if available)">VIEW:DEFAULT</span>312 </div>313 </div>314 315 <div class="panel panel-objects radar">316 <h3>317 <span>Radar / Relative Geometry</span>318 <span class="rightnote" id="objCount">0</span>319 </h3>320 <canvas id="frameRadar" width="600" height="260" class="full-size"></canvas>321 </div>322 323 <div class="panel panel-features">324 <h3>325 <span>Selected Target · Features</span>326 <span class="rightnote" id="selId">—</span>327 </h3>328 <table class="table" id="featureTable">329 <thead>330 <tr>331 <th style="width:42%">Feature</th>332 <th>Value</th>333 </tr>334 </thead>335 <tbody>336 <tr>337 <td class="k">—</td>338 <td class="mini">No target selected</td>339 </tr>340 </tbody>341 </table>342 <div class="hint mt-sm">You can replace feature generation via <span343 class="kbd">externalFeatures()</span>. The UI will render whatever 10–12 key-value pairs you return.344 </div>345 </div>346 347 <div class="panel panel-summary" style="display:flex; flex-direction:column; min-height: 0;">348 <h3>349 <span>Object Track Cards</span>350 <span class="rightnote" id="trackCount">0</span>351 </h3>352 <div class="list" id="frameTrackList" style="flex:1; overflow-y:auto; padding:8px;">353 <!-- Cards injected here -->354 <div style="font-style:italic; color:var(--text-dim); text-align:center; margin-top:20px;">355 No objects tracked.356 </div>357 </div>358 </div>359 360 </div>361 362 </section>363 364 <!-- ===== Tab 2 ===== -->365 <section class="tab" id="tab-engage">366 <div class="engage-grid">367 <div class="panel">368 <h3>369 <span>Video Engage · Tracking + Dynamic Dwell</span>370 <div style="display: flex; gap: 8px; align-items: center;">371 <button class="collapse-btn" id="btnToggleSidebar">◀ Hide Sidebar</button>372 <span class="rightnote" id="engageNote">Awaiting video</span>373 </div>374 </h3>375 376 <div class="viewbox" style="min-height: 420px;">377 <video id="videoEngage" playsinline muted></video>378 <canvas id="engageOverlay" class="overlay"></canvas>379 <div class="watermark">LOCK · DIST · DWELL · AIMPOINT · FIRE/ASSESS</div>380 <div class="empty" id="engageEmpty">381 <div class="big">No video loaded</div>382 <div class="small">Upload a video. Run <b>Reason</b> first to initialize aimpoints and baseline dwell.383 Then click <b>Engage</b>.</div>384 </div>385 </div>386 387 <div class="btnrow mt-md">388 <button id="btnEngage" class="btn">Engage</button>389 <button id="btnPause" class="btn secondary">Pause</button>390 <button id="btnReset" class="btn secondary">Reset</button>391 </div>392 393 <div class="strip mt-md">394 <span class="chip" id="chipPolicy">POLICY:AUTO</span>395 <span class="chip" id="chipTracks">TRACKS:0</span>396 <span class="chip" id="chipBeam">BEAM:OFF</span>397 <span class="chip" id="chipHz">DET:6Hz</span>398 <span class="chip" id="chipFeed" title="Toggle raw vs HF-processed feed (if available)">FEED:RAW</span>399 <span class="chip" id="chipDepth" title="Toggle depth view (if available)">VIEW:DEFAULT</span>400 </div>401 402 <div class="mt-md">403 <div class="row"><label>Active dwell progress (selected)</label><small class="mini"404 id="dwellText">—</small>405 </div>406 <div class="bar">407 <div id="dwellBar"></div>408 </div>409 </div>410 411 <div class="hint mt-md">Manual targeting: choose “Manual” in Engagement Policy, then412 click a target in the video. The “beam” will track its aimpoint and accumulate dwell.</div>413 </div>414 415 <div class="engage-right">416 <div class="panel radar">417 <h3>418 <span>Radar / Relative Geometry</span>419 <span class="rightnote">Dynamic</span>420 </h3>421 <canvas id="radarCanvas" width="600" height="260" class="full-size"></canvas>422 </div>423 424 <div class="panel" style="flex:1; min-height:0">425 <h3>426 <span>Live Track Cards</span>427 <span class="rightnote" id="liveStamp">—</span>428 </h3>429 <div class="list" id="trackList" style="max-height:none"></div>430 431 <!-- Radar Controls -->432 <div class="mt-sm" style="padding: 10px; background: rgba(0,0,0,0.2); border-radius: 6px;">433 <div class="row">434 <label class="mini">History Trails</label>435 <input id="radarHistoryLen" type="range" min="0" max="100" value="30" style="flex:1; margin:0 8px">436 <small class="mini" id="radarHistoryVal">30</small>437 </div>438 <div class="row mt-xs">439 <label class="mini">Future Pred</label>440 <input id="radarFutureLen" type="range" min="0" max="100" value="30" style="flex:1; margin:0 8px">441 <small class="mini" id="radarFutureVal">30</small>442 </div>443 </div>444 </div>445 </div>446 </div>447 </section>448 449 <!-- ===== Tab 3 ===== -->450 <section class="tab" id="tab-trade">451 <div class="trade-grid">452 <div class="panel plot">453 <h3>454 <span>Range Sensitivity · Max vs Required Power · Dwell</span>455 <span class="rightnote">Interactive</span>456 </h3>457 <canvas id="tradeCanvas" width="1100" height="420" class="full-size"></canvas>458 </div>459 460 <div class="panel">461 <h3>462 <span>Trade Controls</span>463 <span class="rightnote">What-if</span>464 </h3>465 <div class="hint">This plot is computed from your current HEL and atmosphere knobs. It uses the selected466 target’s baseline requirements (from Tab 1) as a reference curve.</div>467 468 <div class="mt-md">469 <label>Selected target for curve</label>470 <select id="tradeTarget"></select>471 </div>472 473 <div class="grid2 mt-sm">474 <div>475 <label>Range sweep min (m)</label>476 <input id="rMin" type="number" value="200" min="50" max="10000" step="50" />477 </div>478 <div>479 <label>Range sweep max (m)</label>480 <input id="rMax" type="number" value="6000" min="100" max="20000" step="50" />481 </div>482 </div>483 484 <div class="row mt-md">485 <label>Show P(kill)</label>486 <select id="showPk">487 <option value="on">On</option>488 <option value="off">Off</option>489 </select>490 </div>491 492 <div class="btnrow">493 <button class="btn secondary" id="btnReplot">Replot</button>494 <button class="btn secondary" id="btnSnap">Snapshot (log)</button>495 </div>496 497 <div class="hint">This tab is designed to look like a weapon trade-space console: propagation, lethality498 margin, and dwell inflation with range and atmosphere.</div>499 </div>500 </div>501 </section>502 </main>503 </div>504 505 <footer>506 <div>Demo mode · Unclassified visuals · Integrate your APIs where marked</div>507 <div class="mono" id="telemetry">HEL=60kW · VIS=16km · Cn²=5/10 · AO=7/10 · DET=6Hz</div>508 </footer>509 510 <!-- Hidden video used only for first-frame capture -->511 <video id="videoHidden" playsinline muted style="display:none"></video>512 </div>513 514 <script>515 window.API_CONFIG = {516 BACKEND_BASE: "https://biaslab2025-perception.hf.space"517 };518 </script>519 <script src="./js/init.js"></script>520 <script src="./js/core/config.js"></script>521 <script src="./js/core/utils.js"></script>522 <script src="./js/core/state.js"></script>523 <script src="./js/core/physics.js"></script>524 <script src="./js/core/video.js"></script>525 <script src="./js/core/hel.js"></script>526 <script src="./js/ui/logging.js"></script>527 <script src="./js/core/tracker.js"></script>528 <script src="./js/api/client.js"></script>529 <script src="./js/ui/overlays.js"></script>530 <script src="./js/ui/radar.js"></script>531 <script src="./js/ui/cards.js"></script>532 <script src="./js/ui/features.js"></script>533 <script src="./js/ui/intel.js"></script>534 <script src="./js/ui/cursor.js"></script>535 <script src="./js/ui/trade.js"></script>536 <script src="./data/helicopter_demo_data.js"></script>537 <script src="./js/core/demo.js"></script>538 <script src="./js/main.js"></script>539 540</body>541 542</html>