wired endpoints to new html

LaserPerception/LaserPerception.css

@@ -0,0 +1,844 @@
+/* =========================================
+   LaserPerception Design System
+   ========================================= */
+
+   :root {
+    /* --- Colors --- */
+    --bg: #060914;
+    --panel: #0b1026;
+    --panel2: #0a0f22;
+
+    --stroke: rgba(255, 255, 255, .08);
+    --stroke2: rgba(255, 255, 255, .12);
+
+    --text: rgba(255, 255, 255, .92);
+    --muted: rgba(255, 255, 255, .62);
+    --faint: rgba(255, 255, 255, .42);
+
+    --good: #22c55e;
+    --warn: #f59e0b;
+    --bad: #ef4444;
+
+    --accent: #7c3aed;
+    --cyan: #22d3ee;
+    --mag: #fb7185;
+
+    /* --- Effects --- */
+    --shadow: 0 18px 60px rgba(0, 0, 0, .55);
+
+    /* --- Typography --- */
+    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    background:
+        radial-gradient(1200px 700px at 20% 8%, rgba(124, 58, 237, .22), transparent 60%),
+        radial-gradient(900px 500px at 82% 18%, rgba(34, 211, 238, .18), transparent 60%),
+        radial-gradient(800px 520px at 52% 82%, rgba(251, 113, 133, .10), transparent 65%),
+        linear-gradient(180deg, #040614, #060914);
+    color: var(--text);
+    font-family: var(--sans);
+    overflow: hidden;
+}
+
+/* =========================================
+   Layout & Structure
+   ========================================= */
+
+#app {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px 12px;
+    border-bottom: 1px solid var(--stroke);
+    background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
+}
+
+.workspace {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 540px 1fr;
+    /* Fixed sidebar width */
+    gap: 12px;
+    padding: 12px;
+    min-height: 0;
+}
+
+aside,
+main {
+    background: rgba(255, 255, 255, .02);
+    border: 1px solid var(--stroke);
+    border-radius: 16px;
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+footer {
+    padding: 10px 14px;
+    border-top: 1px solid var(--stroke);
+    color: var(--muted);
+    font-size: 11px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    background: linear-gradient(0deg, rgba(255, 255, 255, .03), transparent);
+}
+
+footer .mono {
+    font-family: var(--mono);
+    color: rgba(255, 255, 255, .76);
+}
+
+/* =========================================
+   Brand & Status
+   ========================================= */
+
+.brand {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    min-width: 420px;
+}
+
+.logo {
+    width: 40px;
+    height: 40px;
+    border-radius: 14px;
+    background:
+        radial-gradient(circle at 30% 30%, rgba(34, 211, 238, .9), rgba(124, 58, 237, .9) 55%, rgba(0, 0, 0, .1) 70%),
+        linear-gradient(135deg, rgba(255, 255, 255, .10), transparent 60%);
+    box-shadow: 0 16px 46px rgba(124, 58, 237, .25);
+    border: 1px solid rgba(255, 255, 255, .16);
+    position: relative;
+    overflow: hidden;
+}
+
+.logo:after {
+    content: "";
+    position: absolute;
+    inset: -40px;
+    background: conic-gradient(from 180deg, transparent, rgba(255, 255, 255, .10), transparent);
+    animation: spin 10s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.brand h1 {
+    font-size: 14px;
+    margin: 0;
+    letter-spacing: .16em;
+    text-transform: uppercase;
+}
+
+.brand .sub {
+    font-size: 12px;
+    color: var(--muted);
+    margin-top: 2px;
+    line-height: 1.2;
+}
+
+.status-row {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+/* =========================================
+   Components: Cards & Panels
+   ========================================= */
+
+.card {
+    padding: 12px 12px 10px;
+    border-bottom: 1px solid var(--stroke);
+    position: relative;
+}
+
+.card:last-child {
+    border-bottom: none;
+}
+
+.card h2 {
+    margin: 0;
+    font-size: 12px;
+    letter-spacing: .14em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, .78);
+}
+
+.card small {
+    color: var(--muted);
+}
+
+.card .hint {
+    color: var(--faint);
+    font-size: 11px;
+    line-height: 1.35;
+    margin-top: 6px;
+}
+
+.panel {
+    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));
+    border: 1px solid var(--stroke);
+    border-radius: 16px;
+    padding: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
+    overflow: hidden;
+    position: relative;
+}
+
+.panel h3 {
+    margin: 0 0 8px;
+    font-size: 12px;
+    letter-spacing: .14em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, .78);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.panel h3 .rightnote {
+    font-size: 11px;
+    color: var(--muted);
+    font-family: var(--mono);
+    letter-spacing: 0;
+    text-transform: none;
+}
+
+.collapse-btn {
+    background: rgba(255, 255, 255, .05);
+    border: 1px solid rgba(255, 255, 255, .12);
+    border-radius: 8px;
+    padding: 4px 8px;
+    color: var(--muted);
+    cursor: pointer;
+    font-size: 11px;
+    font-family: var(--mono);
+    transition: all 0.2s ease;
+    text-transform: none;
+    letter-spacing: 0;
+}
+
+.collapse-btn:hover {
+    background: rgba(255, 255, 255, .08);
+    color: var(--text);
+    border-color: rgba(255, 255, 255, .18);
+}
+
+/* =========================================
+   Components: Inputs & Controls
+   ========================================= */
+
+.grid2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 8px;
+}
+
+label {
+    font-size: 11px;
+    color: var(--muted);
+}
+
+input[type="range"] {
+    width: 100%;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="number"] {
+    width: 100%;
+    background: rgba(255, 255, 255, .04);
+    border: 1px solid var(--stroke2);
+    border-radius: 10px;
+    padding: 8px 10px;
+    color: var(--text);
+    outline: none;
+    font-size: 12px;
+}
+
+select:focus,
+textarea:focus,
+input[type="text"]:focus,
+input[type="number"]:focus {
+    border-color: rgba(124, 58, 237, .55);
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
+}
+
+.btn {
+    user-select: none;
+    cursor: pointer;
+    border: none;
+    border-radius: 12px;
+    padding: 10px 12px;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .04em;
+    color: rgba(255, 255, 255, .92);
+    background: linear-gradient(135deg, rgba(124, 58, 237, .95), rgba(34, 211, 238, .45));
+    box-shadow: 0 18px 40px rgba(124, 58, 237, .24);
+}
+
+.btn:hover {
+    filter: brightness(1.06);
+}
+
+.btn:active {
+    transform: translateY(1px);
+}
+
+.btn.secondary {
+    background: rgba(255, 255, 255, .06);
+    border: 1px solid var(--stroke2);
+    box-shadow: none;
+    font-weight: 600;
+}
+
+.btn.secondary:hover {
+    background: rgba(255, 255, 255, .08);
+}
+
+.btn.danger {
+    background: linear-gradient(135deg, rgba(239, 68, 68, .95), rgba(251, 113, 133, .55));
+    box-shadow: 0 18px 40px rgba(239, 68, 68, .18);
+}
+
+.btnrow {
+    display: flex;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.btnrow .btn {
+    flex: 1;
+}
+
+.pill {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: 999px;
+    border: 1px solid var(--stroke2);
+    background: rgba(255, 255, 255, .04);
+    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
+    font-size: 12px;
+    color: var(--muted);
+    white-space: nowrap;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--good);
+    box-shadow: 0 0 16px rgba(34, 197, 94, .6);
+}
+
+.dot.warn {
+    background: var(--warn);
+    box-shadow: 0 0 16px rgba(245, 158, 11, .55);
+}
+
+.dot.bad {
+    background: var(--bad);
+    box-shadow: 0 0 16px rgba(239, 68, 68, .55);
+}
+
+.kbd {
+    font-family: var(--mono);
+    font-size: 11px;
+    padding: 2px 6px;
+    border: 1px solid var(--stroke2);
+    border-bottom-color: rgba(255, 255, 255, .24);
+    background: rgba(0, 0, 0, .35);
+    border-radius: 7px;
+    color: rgba(255, 255, 255, .78);
+}
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 999px;
+    border: 1px solid var(--stroke2);
+    background: rgba(0, 0, 0, .25);
+    font-family: var(--mono);
+}
+
+/* =========================================
+   Navigation: Tabs
+   ========================================= */
+
+.tabs {
+    display: flex;
+    gap: 8px;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--stroke);
+    background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
+    flex-wrap: wrap;
+}
+
+.tabbtn {
+    cursor: pointer;
+    border: none;
+    border-radius: 999px;
+    padding: 8px 12px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, .75);
+    background: rgba(255, 255, 255, .04);
+    border: 1px solid var(--stroke2);
+}
+
+.tabbtn.active {
+    color: rgba(255, 255, 255, .92);
+    background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(34, 211, 238, .10));
+    border-color: rgba(124, 58, 237, .45);
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
+}
+
+.tab {
+    display: none;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 12px;
+}
+
+.tab.active {
+    display: block;
+}
+
+/* =========================================
+   Visualization: Views & Canvas
+   ========================================= */
+
+.viewbox {
+    position: relative;
+    border-radius: 14px;
+    overflow: hidden;
+    background: radial-gradient(700px 380px at 30% 30%, rgba(124, 58, 237, .12), rgba(0, 0, 0, .0) 60%),
+        linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .15));
+    border: 1px solid rgba(255, 255, 255, .08);
+    min-height: 360px;
+}
+
+.viewbox canvas,
+.viewbox video {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+/* Always show the engage video feed */
+#videoEngage {
+    display: block;
+    opacity: 1;
+}
+
+.viewbox .overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+/* Make engage overlay visible as main display (not just overlay) */
+#engageOverlay {
+    display: none;
+    pointer-events: none;
+}
+
+.viewbox .watermark {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: rgba(255, 255, 255, .55);
+    background: rgba(0, 0, 0, .35);
+    border: 1px solid rgba(255, 255, 255, .14);
+    padding: 6px 8px;
+    border-radius: 10px;
+}
+
+.viewbox .empty {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    color: rgba(255, 255, 255, .72);
+    text-align: center;
+    padding: 22px;
+}
+
+.viewbox .empty .big {
+    font-size: 14px;
+    letter-spacing: .12em;
+    text-transform: uppercase;
+}
+
+.viewbox .empty .small {
+    color: var(--muted);
+    font-size: 12px;
+    max-width: 520px;
+    line-height: 1.4;
+}
+
+/* =========================================
+   Lists & Tables
+   ========================================= */
+
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 160px;
+    max-height: 320px;
+    overflow: auto;
+    padding-right: 4px;
+}
+
+.obj {
+    padding: 10px;
+    border-radius: 14px;
+    border: 1px solid var(--stroke2);
+    background: rgba(255, 255, 255, .03);
+    cursor: pointer;
+}
+
+.obj:hover {
+    background: rgba(255, 255, 255, .05);
+}
+
+.obj.active {
+    border-color: rgba(34, 211, 238, .45);
+    box-shadow: 0 0 0 3px rgba(34, 211, 238, .14);
+    background: linear-gradient(135deg, rgba(34, 211, 238, .10), rgba(124, 58, 237, .08));
+}
+
+.obj .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.obj .id {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: rgba(255, 255, 255, .90);
+}
+
+.obj .cls {
+    font-size: 12px;
+    color: rgba(255, 255, 255, .80);
+}
+
+.obj .meta {
+    margin-top: 6px;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    font-size: 11px;
+    color: var(--muted);
+}
+
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow: hidden;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, .10);
+}
+
+.table th,
+.table td {
+    padding: 8px 10px;
+    font-size: 12px;
+    border-bottom: 1px solid rgba(255, 255, 255, .08);
+    vertical-align: top;
+}
+
+.table th {
+    background: rgba(255, 255, 255, .04);
+    color: rgba(255, 255, 255, .78);
+    letter-spacing: .12em;
+    text-transform: uppercase;
+    font-size: 11px;
+}
+
+.table tr:last-child td {
+    border-bottom: none;
+}
+
+.k {
+    font-family: var(--mono);
+    color: rgba(255, 255, 255, .84);
+}
+
+.mini {
+    font-size: 11px;
+    color: var(--muted);
+    line-height: 1.35;
+}
+
+/* =========================================
+   Metrics & Logs
+   ========================================= */
+
+.metricgrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+}
+
+.metric {
+    border: 1px solid rgba(255, 255, 255, .10);
+    background: rgba(255, 255, 255, .03);
+    border-radius: 14px;
+    padding: 10px;
+}
+
+.metric .label {
+    font-size: 11px;
+    color: var(--muted);
+    letter-spacing: .12em;
+    text-transform: uppercase;
+}
+
+.metric .value {
+    margin-top: 6px;
+    font-family: var(--mono);
+    font-size: 16px;
+    color: rgba(255, 255, 255, .92);
+}
+
+.metric .sub {
+    margin-top: 4px;
+    font-size: 11px;
+    color: var(--faint);
+    line-height: 1.35;
+}
+
+.log {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: rgba(255, 255, 255, .78);
+    line-height: 1.45;
+    background: rgba(0, 0, 0, .35);
+    border: 1px solid rgba(255, 255, 255, .12);
+    border-radius: 14px;
+    padding: 10px;
+    height: 210px;
+    overflow: auto;
+    white-space: pre-wrap;
+}
+
+.log .t {
+    color: rgba(34, 211, 238, .95);
+}
+
+.log .w {
+    color: rgba(245, 158, 11, .95);
+}
+
+.log .e {
+    color: rgba(239, 68, 68, .95);
+}
+
+.log .g {
+    color: rgba(34, 197, 94, .95);
+}
+
+/* =========================================
+   Tab Specific: Intel + Frame
+   ========================================= */
+
+.frame-grid {
+    display: grid;
+    grid-template-columns: 1.6fr .9fr;
+    grid-template-rows: auto auto 240px;
+    gap: 12px;
+    min-height: 0;
+}
+
+.intel {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.intel-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.thumbrow {
+    display: flex;
+    gap: 8px;
+}
+
+.thumbrow img {
+    flex: 1;
+    height: 86px;
+    object-fit: cover;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, .12);
+    background: rgba(0, 0, 0, .25);
+}
+
+.intelbox {
+    font-size: 12px;
+    line-height: 1.45;
+    color: rgba(255, 255, 255, .84);
+    background: rgba(0, 0, 0, .35);
+    border: 1px solid rgba(255, 255, 255, .12);
+    border-radius: 14px;
+    padding: 10px;
+    min-height: 72px;
+}
+
+/* =========================================
+   Tab Specific: Engage
+   ========================================= */
+
+.engage-grid {
+    display: grid;
+    grid-template-columns: 4.5fr 0.5fr;
+    gap: 12px;
+    min-height: 0;
+    transition: grid-template-columns 0.3s ease;
+}
+
+.engage-grid.sidebar-collapsed {
+    grid-template-columns: 1fr 0fr;
+}
+
+.engage-grid.sidebar-collapsed .engage-right {
+    display: none;
+}
+
+.engage-right {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 0;
+    max-width: 320px;
+}
+
+.radar {
+    height: 180px;
+}
+
+.strip {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    align-items: center;
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.strip .chip {
+    padding: 6px 10px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, .12);
+    background: rgba(255, 255, 255, .03);
+    font-family: var(--mono);
+    color: rgba(255, 255, 255, .78);
+}
+
+.bar {
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, .08);
+    border: 1px solid rgba(255, 255, 255, .12);
+    overflow: hidden;
+}
+
+.bar>div {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, rgba(34, 211, 238, .95), rgba(124, 58, 237, .95));
+    transition: width .18s ease;
+}
+
+/* =========================================
+   Tab Specific: Trade Space
+   ========================================= */
+
+.trade-grid {
+    display: grid;
+    grid-template-columns: 1.35fr .65fr;
+    gap: 12px;
+    min-height: 0;
+}
+
+.plot {
+    height: 420px;
+}
+
+/* =========================================
+   Utilities
+   ========================================= */
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, .10);
+    border-radius: 999px;
+    border: 2px solid rgba(0, 0, 0, .25);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, .16);
+}

LaserPerception/LaserPerception.html

@@ -0,0 +1,530 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="LaserPerception.css">
+  <title>HEL Perception & Engagement Reasoner (Weapon-Grade Demo)</title>
+</head>
+
+<body>
+  <div id="app">
+    <header>
+      <div class="brand">
+        <div class="logo" aria-hidden="true"></div>
+        <div>
+          <h1>HEL Perception & Engagement Reasoner</h1>
+          <div class="sub">Video → detection → expert features → aimpoint + Intensity@Target → HEL feasibility →
+            closed-loop tracking & dwell control</div>
+        </div>
+      </div>
+      <div class="status-row">
+        <div class="pill">
+          <span class="dot" id="sys-dot"></span>
+          <span id="sys-status">STANDBY · No video loaded</span>
+        </div>
+        <div class="pill">
+          <span class="kbd">Reason</span>
+          <span>Frame-1 inference</span>
+        </div>
+        <div class="pill">
+          <span class="kbd">Engage</span>
+          <span>Closed-loop track + dwell</span>
+        </div>
+      </div>
+    </header>
+
+    <div class="workspace">
+      <aside>
+        <div class="card">
+          <h2>Video Input</h2>
+          <div class="hint">Upload one video. Tab 1 uses only the first frame. Tab 2 reuses the same video for tracking
+            and engagement.</div>
+
+          <div class="row mt-md">
+            <label for="videoFile">Video file</label>
+            <span class="badge"><span id="videoMeta">No file</span></span>
+          </div>
+          <input id="videoFile" type="file" accept="video/*" />
+
+          <div class="mt-md">
+            <label>Mission Objective (optional · enables class filtering)</label>
+            <textarea id="missionText" rows="3"
+              placeholder="Optional: e.g., Detect people and vehicles; highlight hazards and key objects."></textarea>
+
+            <div class="hint mt-sm">
+              Mission objective is <b>optional</b>. If provided, it will be used directly as input to the detector.
+              If left blank, the detector will detect <b>all</b> objects without filtering.
+              <div class="mini mt-xs" id="hfBackendStatus">HF Backend: STANDBY</div>
+            </div>
+          </div>
+
+          <div class="btnrow">
+            <button id="btnLoadSample" class="btn secondary" title="Optional: wire up sample videos later" disabled>Load
+              Sample</button>
+            <button id="btnEject" class="btn danger" title="Unload video">Eject</button>
+          </div>
+
+          <div class="grid2">
+            <div>
+              <label>Detector</label>
+              <select id="detectorSelect">
+                <optgroup label="Object Detection Models">
+                  <option value="hf_yolov8" data-kind="object" selected>Lite</option>
+                  <option value="detr_resnet50" data-kind="object">Big</option>
+                  <option value="grounding_dino" data-kind="object">Large</option>
+                </optgroup>
+                <optgroup label="Segmentation Models">
+                  <option value="sam3" data-kind="segmentation">Segmentor</option>
+                </optgroup>
+                <optgroup label="Drone Detection Models">
+                  <option value="drone_yolo" data-kind="drone">Drone</option>
+                </optgroup>
+              </select>
+            </div>
+            <div>
+              <label>Tracking</label>
+              <select id="trackerSelect">
+                <option value="iou">IOU + velocity (built-in)</option>
+                <option value="external">External hook (user API)</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="hint mt-sm" id="detectorHint">
+            If the browser model cannot load (offline), plug in your own detector in <span
+              class="kbd">externalDetect()</span>.
+          </div>
+        </div>
+
+        <div class="card">
+          <h2>Mission Intel Summary</h2>
+          <div class="hint">Unbiased 2–3 sentence scene description computed from a few sampled frames + detected
+            objects (no location inference).</div>
+
+          <div class="intel">
+            <div class="intel-top">
+              <span class="badge"><span class="dot warn" id="intelDot"
+                  style="width:7px;height:7px;box-shadow:none"></span><span id="intelStamp">Idle</span></span>
+              <button id="btnIntelRefresh" class="btn secondary"
+                style="padding:8px 10px; border-radius:10px; font-weight:700">Refresh</button>
+            </div>
+
+            <div class="thumbrow" aria-label="sampled frames">
+              <img id="intelThumb0" alt="sample frame 1" />
+              <img id="intelThumb1" alt="sample frame 2" />
+              <img id="intelThumb2" alt="sample frame 3" />
+            </div>
+
+            <div id="intelSummaryBox" class="intelbox">Upload a video, then click <b>Reason</b> to generate an unbiased
+              scene summary.</div>
+          </div>
+        </div>
+
+        <div class="card">
+          <h2>HEL & Director Knobs</h2>
+          <div class="grid2">
+            <div>
+              <label>Max output power (kW)</label>
+              <input id="helPower" type="range" min="20" max="250" step="1" value="60" />
+              <div class="row"><small class="mini"><span id="helPowerVal">60</span> kW</small><small class="mini">turret
+                  output</small></div>
+            </div>
+            <div>
+              <label>Aperture (m)</label>
+              <input id="helAperture" type="range" min="0.05" max="0.6" step="0.01" value="0.25" />
+              <div class="row"><small class="mini"><span id="helApertureVal">0.25</span> m</small><small
+                  class="mini">beam director</small></div>
+            </div>
+          </div>
+
+          <div class="grid2 mt-sm">
+            <div>
+              <label>Beam quality (M²)</label>
+              <input id="helM2" type="range" min="1.1" max="4.0" step="0.1" value="1.6" />
+              <div class="row"><small class="mini"><span id="helM2Val">1.6</span></small><small class="mini">lower is
+                  better</small></div>
+            </div>
+            <div>
+              <label>Jitter (μrad RMS)</label>
+              <input id="helJitter" type="range" min="0.5" max="15" step="0.1" value="3.2" />
+              <div class="row"><small class="mini"><span id="helJitterVal">3.2</span></small><small
+                  class="mini">director stability</small></div>
+            </div>
+          </div>
+
+          <div class="grid2 mt-sm">
+            <div>
+              <label>Mode</label>
+              <select id="helMode">
+                <option value="cw">CW (continuous)</option>
+                <option value="burst">Burst (duty-limited)</option>
+                <option value="pulse">Pulsed (peak shaping)</option>
+              </select>
+            </div>
+            <div>
+              <label>Duty cycle (%)</label>
+              <input id="helDuty" type="range" min="10" max="100" step="1" value="85" />
+              <div class="row"><small class="mini"><span id="helDutyVal">85</span>%</small><small class="mini">thermal /
+                  power</small></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card">
+          <h2>Atmosphere & Maritime</h2>
+          <div class="grid2">
+            <div>
+              <label>Visibility (km)</label>
+              <input id="atmVis" type="range" min="1" max="30" step="1" value="16" />
+              <div class="row"><small class="mini"><span id="atmVisVal">16</span> km</small><small
+                  class="mini">aerosol/haze</small></div>
+            </div>
+            <div>
+              <label>Turbulence (Cn²)</label>
+              <input id="atmCn2" type="range" min="1" max="10" step="1" value="5" />
+              <div class="row"><small class="mini"><span id="atmCn2Val">5</span>/10</small><small
+                  class="mini">wavefront</small></div>
+            </div>
+          </div>
+
+          <div class="grid2 mt-sm">
+            <div>
+              <label>Sea spray</label>
+              <input id="seaSpray" type="range" min="0" max="10" step="1" value="2" />
+              <div class="row"><small class="mini"><span id="seaSprayVal">2</span>/10</small><small class="mini">salt
+                  attenuation</small></div>
+            </div>
+            <div>
+              <label>Adaptive optics</label>
+              <input id="aoQ" type="range" min="0" max="10" step="1" value="7" />
+              <div class="row"><small class="mini"><span id="aoQVal">7</span>/10</small><small class="mini">turbulence
+                  mitigation</small></div>
+            </div>
+          </div>
+
+          <div class="grid2 mt-sm">
+            <div>
+              <label>Baseline range (m)</label>
+              <input id="rangeBase" type="range" min="200" max="6000" step="25" value="1500" />
+              <div class="row"><small class="mini"><span id="rangeBaseVal">1500</span> m</small><small
+                  class="mini">median target</small></div>
+            </div>
+            <div>
+              <label>Update rate (Hz)</label>
+              <input id="detHz" type="range" min="1" max="12" step="1" value="6" />
+              <div class="row"><small class="mini"><span id="detHzVal">6</span> Hz</small><small class="mini">tab 2
+                  detection</small></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card">
+          <h2>Engagement Policy</h2>
+          <div class="grid2">
+            <div>
+              <label>Targeting</label>
+              <select id="policyMode">
+                <option value="auto">Auto: highest lethality margin</option>
+                <option value="manual">Manual: click target</option>
+              </select>
+            </div>
+            <div>
+              <label>Assess window (s)</label>
+              <input id="assessWindow" type="range" min="0.3" max="3.0" step="0.1" value="1.0" />
+              <div class="row"><small class="mini"><span id="assessWindowVal">1.0</span> s</small><small
+                  class="mini">post-dwell</small></div>
+            </div>
+          </div>
+
+          <div class="row">
+            <label>Show agent cursor</label>
+            <select id="cursorMode">
+              <option value="on">On</option>
+              <option value="off">Off</option>
+            </select>
+          </div>
+
+          <div class="hint">The UI is wired for your APIs. Replace <span class="kbd">externalDetect()</span>, <span
+              class="kbd">externalFeatures()</span>, and <span class="kbd">externalTrack()</span> when ready.</div>
+        </div>
+
+        <div class="card" style="flex:1; min-height:0">
+          <h2>System Log</h2>
+          <div class="log" id="sysLog"></div>
+        </div>
+      </aside>
+
+      <main>
+        <div class="tabs">
+          <button class="tabbtn active" data-tab="frame">Tab 1 · Frame-1 Reason</button>
+          <button class="tabbtn" data-tab="engage">Tab 2 · Video Engage</button>
+          <button class="tabbtn" data-tab="trade">Trade Space</button>
+        </div>
+
+        <!-- ===== Tab 1 ===== -->
+        <section class="tab active" id="tab-frame">
+          <div class="frame-grid">
+            <div class="panel panel-monitor">
+              <h3>
+                <span>First Frame · Detection + Aimpoints</span>
+                <span class="rightnote" id="frameNote">Awaiting video</span>
+              </h3>
+              <div class="viewbox" id="frameViewBox">
+                <canvas id="frameCanvas" width="1280" height="720"></canvas>
+                <canvas id="frameOverlay" class="overlay" width="1280" height="720"></canvas>
+                <div class="watermark">EO/IR · Track-ID · Aimpoint · Required Dwell</div>
+                <div class="empty" id="frameEmpty">
+                  <div class="big">Upload a video to begin</div>
+                  <div class="small">This demo performs first-frame perception and engagement reasoning. Then it replays
+                    the same video with closed-loop tracking and dynamic dwell updates.</div>
+                  <div style="display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; justify-content:center;">
+                    <span class="badge"><span class="dot"></span> If you are online, COCO-SSD loads automatically</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="btnrow" style="margin-top:10px">
+                <button id="btnReason" class="btn">Reason</button>
+                <button id="btnCancelReason" class="btn danger" style="display: none;">Cancel</button>
+                <button id="btnRecompute" class="btn secondary">Recompute HEL</button>
+                <button id="btnClear" class="btn secondary">Clear</button>
+              </div>
+            </div>
+
+            <div class="panel panel-objects">
+              <h3>
+                <span>Detected Objects</span>
+                <span class="rightnote" id="objCount">0</span>
+              </h3>
+              <div class="hint mt-xs">
+                Mission classes: <span class="kbd" id="missionClasses">—</span>
+                <div class="mini" id="missionId">Mission: —</div>
+              </div>
+              <div class="list" id="objList"></div>
+            </div>
+
+            <div class="panel panel-features">
+              <h3>
+                <span>Selected Target · Features</span>
+                <span class="rightnote" id="selId">—</span>
+              </h3>
+              <table class="table" id="featureTable">
+                <thead>
+                  <tr>
+                    <th style="width:42%">Feature</th>
+                    <th>Value</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="k">—</td>
+                    <td class="mini">No target selected</td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="hint mt-sm">You can replace feature generation via <span
+                  class="kbd">externalFeatures()</span>. The UI will render whatever 10–12 key-value pairs you return.
+              </div>
+            </div>
+
+            <div class="panel panel-summary">
+              <h3>
+                <span>HEL Summary Outputs</span>
+                <span class="rightnote" id="summaryStamp">—</span>
+              </h3>
+
+              <div class="metricgrid">
+                <div class="metric">
+                  <div class="label">HEL Max power at target</div>
+                  <div class="value" id="mMaxP">—</div>
+                  <div class="sub" id="mMaxPSub">Propagation + beam control + duty cycle</div>
+                </div>
+                <div class="metric">
+                  <div class="label">Worst-case required power</div>
+                  <div class="value" id="mReqP">—</div>
+                  <div class="sub" id="mReqPSub">From target robustness + reflectivity + aimpoint</div>
+                </div>
+                <div class="metric">
+                  <div class="label">Feasibility margin</div>
+                  <div class="value" id="mMargin">—</div>
+                  <div class="sub" id="mMarginSub">Positive margin indicates viable engagement</div>
+                </div>
+                <div class="metric">
+                  <div class="label">Recommended engagement</div>
+                  <div class="value" id="mPlan">—</div>
+                  <div class="sub" id="mPlanSub">Order + dwell window + assess</div>
+                </div>
+              </div>
+
+              <div class="scroll-table mt-md">
+                <table class="table" id="summaryTable">
+                  <thead>
+                    <tr>
+                      <th style="width:9%">ID</th>
+                      <th style="width:16%">Class</th>
+                      <th style="width:14%">Range (m)</th>
+                      <th style="width:16%">Aimpoint</th>
+                      <th style="width:15%">Req P@Target</th>
+                      <th style="width:15%">Max P@Target</th>
+                      <th style="width:15%">Req Dwell</th>
+                      <th style="width:10%">P(kill)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="k">—</td>
+                      <td colspan="7" class="mini">No outputs yet. Click <b>Reason</b>.</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- ===== Tab 2 ===== -->
+        <section class="tab" id="tab-engage">
+          <div class="engage-grid">
+            <div class="panel">
+              <h3>
+                <span>Video Engage · Tracking + Dynamic Dwell</span>
+                <div style="display: flex; gap: 8px; align-items: center;">
+                  <button class="collapse-btn" id="btnToggleSidebar">◀ Hide Sidebar</button>
+                  <span class="rightnote" id="engageNote">Awaiting video</span>
+                </div>
+              </h3>
+
+              <div class="viewbox" style="min-height: 650px;">
+                <video id="videoEngage" playsinline muted></video>
+                <canvas id="engageOverlay" class="overlay"></canvas>
+                <div class="watermark">LOCK · DIST · DWELL · AIMPOINT · FIRE/ASSESS</div>
+                <div class="empty" id="engageEmpty">
+                  <div class="big">No video loaded</div>
+                  <div class="small">Upload a video. Run <b>Reason</b> first to initialize aimpoints and baseline dwell.
+                    Then click <b>Engage</b>.</div>
+                </div>
+              </div>
+
+              <div class="btnrow mt-md">
+                <button id="btnEngage" class="btn">Engage</button>
+                <button id="btnPause" class="btn secondary">Pause</button>
+                <button id="btnReset" class="btn secondary">Reset</button>
+              </div>
+
+              <div class="strip mt-md">
+                <span class="chip" id="chipPolicy">POLICY:AUTO</span>
+                <span class="chip" id="chipTracks">TRACKS:0</span>
+                <span class="chip" id="chipBeam">BEAM:OFF</span>
+                <span class="chip" id="chipHz">DET:6Hz</span>
+                <span class="chip" id="chipFeed" title="Toggle raw vs HF-processed feed (if available)">FEED:RAW</span>
+              </div>
+
+              <div class="mt-md">
+                <div class="row"><label>Active dwell progress (selected)</label><small class="mini"
+                    id="dwellText">—</small></div>
+                <div class="bar">
+                  <div id="dwellBar"></div>
+                </div>
+              </div>
+
+              <div class="hint mt-md">Manual targeting: choose “Manual” in Engagement Policy, then
+                click a target in the video. The “beam” will track its aimpoint and accumulate dwell.</div>
+            </div>
+
+            <div class="engage-right">
+              <div class="panel radar">
+                <h3>
+                  <span>Radar / Relative Geometry</span>
+                  <span class="rightnote">Dynamic</span>
+                </h3>
+                <canvas id="radarCanvas" width="600" height="260" class="full-size"></canvas>
+              </div>
+
+              <div class="panel" style="flex:1; min-height:0">
+                <h3>
+                  <span>Live Track Cards</span>
+                  <span class="rightnote" id="liveStamp">—</span>
+                </h3>
+                <div class="list" id="trackList" style="max-height:none"></div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- ===== Tab 3 ===== -->
+        <section class="tab" id="tab-trade">
+          <div class="trade-grid">
+            <div class="panel plot">
+              <h3>
+                <span>Range Sensitivity · Max vs Required Power · Dwell</span>
+                <span class="rightnote">Interactive</span>
+              </h3>
+              <canvas id="tradeCanvas" width="1100" height="420" class="full-size"></canvas>
+            </div>
+
+            <div class="panel">
+              <h3>
+                <span>Trade Controls</span>
+                <span class="rightnote">What-if</span>
+              </h3>
+              <div class="hint">This plot is computed from your current HEL and atmosphere knobs. It uses the selected
+                target’s baseline requirements (from Tab 1) as a reference curve.</div>
+
+              <div class="mt-md">
+                <label>Selected target for curve</label>
+                <select id="tradeTarget"></select>
+              </div>
+
+              <div class="grid2 mt-sm">
+                <div>
+                  <label>Range sweep min (m)</label>
+                  <input id="rMin" type="number" value="200" min="50" max="10000" step="50" />
+                </div>
+                <div>
+                  <label>Range sweep max (m)</label>
+                  <input id="rMax" type="number" value="6000" min="100" max="20000" step="50" />
+                </div>
+              </div>
+
+              <div class="row mt-md">
+                <label>Show P(kill)</label>
+                <select id="showPk">
+                  <option value="on">On</option>
+                  <option value="off">Off</option>
+                </select>
+              </div>
+
+              <div class="btnrow">
+                <button class="btn secondary" id="btnReplot">Replot</button>
+                <button class="btn secondary" id="btnSnap">Snapshot (log)</button>
+              </div>
+
+              <div class="hint">This tab is designed to look like a weapon trade-space console: propagation, lethality
+                margin, and dwell inflation with range and atmosphere.</div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+
+    <footer>
+      <div>Demo mode · Unclassified visuals · Integrate your APIs where marked</div>
+      <div class="mono" id="telemetry">HEL=60kW · VIS=16km · Cn²=5/10 · AO=7/10 · DET=6Hz</div>
+    </footer>
+
+    <!-- Hidden video used only for first-frame capture -->
+    <video id="videoHidden" playsinline muted style="display:none"></video>
+  </div>
+
+  <script>
+    window.API_CONFIG = {
+      BACKEND_BASE: "https://biaslab2025-perception.hf.space"
+    };
+  </script>
+  <script src="LaserPerception.js"></script>
+
+</body>
+
+</html>

app.py

@@ -12,6 +12,7 @@ import cv2
 from fastapi import BackgroundTasks, FastAPI, File, Form, HTTPException, UploadFile
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
 import uvicorn
 
 from inference import process_first_frame, run_inference, run_segmentation
@@ -52,6 +53,11 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# Optional: serve the LaserPerception frontend from this backend.
+_LASER_DIR = Path(__file__).with_name("LaserPerception")
+if _LASER_DIR.exists():
+    app.mount("/laser", StaticFiles(directory=_LASER_DIR), name="laser")
+
 # Valid detection modes
 VALID_MODES = {"object_detection", "segmentation", "drone_detection"}
 
@@ -336,6 +342,25 @@ async def detect_status(job_id: str):
     }
 
 
+@app.delete("/detect/job/{job_id}")
+async def cancel_job(job_id: str):
+    """Cancel a running job."""
+    job = get_job_storage().get(job_id)
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found or expired.")
+    if job.status != JobStatus.PROCESSING:
+        return {
+            "message": f"Job already {job.status.value}",
+            "status": job.status.value,
+        }
+
+    get_job_storage().update(job_id, status=JobStatus.CANCELLED)
+    return {
+        "message": "Job cancellation requested",
+        "status": "cancelled",
+    }
+
+
 @app.get("/detect/first-frame/{job_id}")
 async def detect_first_frame(job_id: str):
     job = get_job_storage().get(job_id)
@@ -355,6 +380,8 @@ async def detect_video(job_id: str):
         raise HTTPException(status_code=404, detail="Job not found or expired.")
     if job.status == JobStatus.FAILED:
         raise HTTPException(status_code=500, detail=f"Job failed: {job.error}")
+    if job.status == JobStatus.CANCELLED:
+        raise HTTPException(status_code=410, detail="Job was cancelled")
     if job.status == JobStatus.PROCESSING:
         return JSONResponse(
             status_code=202,

inference.py

@@ -9,6 +9,18 @@ from models.segmenters.model_loader import load_segmenter
 from utils.video import extract_frames, write_video
 
 
+def _check_cancellation(job_id: Optional[str]) -> None:
+    """Check if job has been cancelled and raise exception if so."""
+    if job_id is None:
+        return
+    from jobs.storage import get_job_storage
+    from jobs.models import JobStatus
+
+    job = get_job_storage().get(job_id)
+    if job and job.status == JobStatus.CANCELLED:
+        raise RuntimeError("Job cancelled by user")
+
+
 def _color_for_label(label: str) -> tuple[int, int, int]:
     # Deterministic BGR color from label text.
     value = abs(hash(label)) % 0xFFFFFF
@@ -251,6 +263,7 @@ def run_inference(
     queries: List[str],
     max_frames: Optional[int] = None,
     detector_name: Optional[str] = None,
+    job_id: Optional[str] = None,
 ) -> str:
     """
     Run object detection inference on a video.
@@ -261,6 +274,7 @@ def run_inference(
         queries: List of object classes to detect (e.g., ["person", "car"])
         max_frames: Optional frame limit for testing
         detector_name: Detector to use (default: hf_yolov8)
+        job_id: Optional job ID for cancellation support
 
     Returns:
         Path to processed output video
@@ -285,6 +299,9 @@ def run_inference(
     # Process frames
     processed_frames: List[np.ndarray] = []
     for idx, frame in enumerate(frames):
+        # Check for cancellation every frame
+        _check_cancellation(job_id)
+
         if max_frames is not None and idx >= max_frames:
             break
         logging.debug("Processing frame %d", idx)
@@ -304,6 +321,7 @@ def run_segmentation(
     queries: List[str],
     max_frames: Optional[int] = None,
     segmenter_name: Optional[str] = None,
+    job_id: Optional[str] = None,
 ) -> str:
     try:
         frames, fps, width, height = extract_frames(input_video_path)
@@ -316,6 +334,9 @@ def run_segmentation(
 
     processed_frames: List[np.ndarray] = []
     for idx, frame in enumerate(frames):
+        # Check for cancellation every frame
+        _check_cancellation(job_id)
+
         if max_frames is not None and idx >= max_frames:
             break
         logging.debug("Processing frame %d", idx)

jobs/background.py

@@ -22,6 +22,7 @@ async def process_video_async(job_id: str) -> None:
                 job.queries,
                 None,
                 job.segmenter_name,
+                job_id,
             )
         else:
             output_path = await asyncio.to_thread(
@@ -31,6 +32,7 @@ async def process_video_async(job_id: str) -> None:
                 job.queries,
                 None,
                 job.detector_name,
+                job_id,
             )
         storage.update(
             job_id,
@@ -38,6 +40,24 @@ async def process_video_async(job_id: str) -> None:
             completed_at=datetime.utcnow(),
             output_video_path=output_path,
         )
+    except RuntimeError as exc:
+        # Handle cancellation specifically
+        if "cancelled" in str(exc).lower():
+            logging.info("Job %s was cancelled", job_id)
+            storage.update(
+                job_id,
+                status=JobStatus.CANCELLED,
+                completed_at=datetime.utcnow(),
+                error="Cancelled by user",
+            )
+        else:
+            logging.exception("Background processing failed for job %s", job_id)
+            storage.update(
+                job_id,
+                status=JobStatus.FAILED,
+                completed_at=datetime.utcnow(),
+                error=str(exc),
+            )
     except Exception as exc:
         logging.exception("Background processing failed for job %s", job_id)
         storage.update(

jobs/models.py

@@ -8,6 +8,7 @@ class JobStatus(str, Enum):
     PROCESSING = "processing"
     COMPLETED = "completed"
     FAILED = "failed"
+    CANCELLED = "cancelled"
 
 
 @dataclass