} Summary text
- */
- async function externalIntel(frames) {
- // TODO: Call your VLM / Intel summary endpoint here
- console.log("externalIntel called with", frames.length, "frames");
- return "Video processed. No external intel provider connected.";
- }
-
- // ========= Core Physics & Logic Adapters =========
- function getKnobs() {
- const PkW = +helPower.value;
- const aperture = +helAperture.value;
- const M2 = +helM2.value;
- const jitter_urad = +helJitter.value;
- const duty = (+helDuty.value) / 100;
- const mode = helMode.value;
- const vis_km = +atmVis.value;
- const cn2 = +atmCn2.value;
- const spray = +seaSpray.value;
- const ao = +aoQ.value;
- const baseRange = +rangeBase.value;
- return { PkW, aperture, M2, jitter_urad, duty, mode, vis_km, cn2, spray, ao, baseRange };
- }
-
- // ========= Safe Stubs for Client-Side Visualization (Tab 2 / Tab 3) =========
- // These functions were removed to allow backend control, but are mocked here
- // to prevent UI crashes in the Engagement/Trade tabs until you wire them up.
-
- function maxPowerAtTarget(range_m) {
- // Placeholder: return 0 or simple fallback
- return { Ptar: 0, Pout: 0, trans: 0, turb: 0, beam: 0 };
- }
-
- function requiredPowerFromFeatures(feat) { return 10; } // Safe default
-
- function requiredDwell(range_m, reqP, maxP, baseDwell) { return 1.0; } // Safe default
-
- function pkillFromMargin(margin_kW, dwell_s, reqDwell_s) { return 0; }
-
-
-
- // ========= Aimpoint rules (default) =========
- function defaultAimpoint(label) {
- const l = (label || "object").toLowerCase();
- if (l.includes("airplane") || l.includes("drone") || l.includes("uav") || l.includes("kite") || l.includes("bird")) {
- return { relx: 0.62, rely: 0.55, label: "engine" };
- }
- if (l.includes("helicopter")) {
- return { relx: 0.50, rely: 0.45, label: "rotor_hub" };
- }
- if (l.includes("boat") || l.includes("ship")) {
- return { relx: 0.60, rely: 0.55, label: "bridge/engine" };
- }
- if (l.includes("truck") || l.includes("car")) {
- return { relx: 0.55, rely: 0.62, label: "engine_block" };
- }
- return { relx: 0.50, rely: 0.55, label: "center_mass" };
- }
-
- // ========= Feature generation (hookable) =========
- // (Merged into externalFeatures above)
-
-
- // [Deleted] synthFeatures, hashString, mulberry32, pick
-
-
- // ========= Detector hook =========
- // ========= Detector hook =========
- // (This block is merged into externalDetect above, removing old declaration)
-
-
- function canvasToBlob(canvas, quality = 0.88) {
- return new Promise((resolve, reject) => {
- if (!canvas.toBlob) { reject(new Error("Canvas.toBlob not supported")); return; }
- canvas.toBlob(blob => {
- if (!blob) { reject(new Error("Canvas toBlob failed")); return; }
- resolve(blob);
- }, "image/jpeg", quality);
- });
- }
-
- async function callHfObjectDetection(modelId, canvas) {
- const proxyBase = (API_CONFIG.PROXY_URL || "").trim();
- if (proxyBase) {
- const blob = await canvasToBlob(canvas);
- const form = new FormData();
- form.append("model", modelId);
- form.append("image", blob, "frame.jpg");
- const resp = await fetch(`${proxyBase.replace(/\/$/, "")}/detect`, {
- method: "POST",
- body: form
- });
- if (!resp.ok) {
- let detail = `Proxy inference failed (${resp.status})`;
- try {
- const err = await resp.json();
- detail = err.detail || err.error || detail;
- } catch (_) { }
- throw new Error(detail);
- }
- const payload = await resp.json();
- if (!Array.isArray(payload)) throw new Error("Unexpected proxy response format.");
- return payload;
- }
-
- const token = API_CONFIG.HF_TOKEN;
- if (!token) throw new Error("HF token missing (config.js).");
-
- const blob = await canvasToBlob(canvas);
- const base = (API_CONFIG.HF_INFERENCE_BASE || "https://router.huggingface.co/hf-inference/models").replace(/\/$/, "");
- const resp = await fetch(`${base}/${modelId}`, {
- method: "POST",
- headers: { Authorization: `Bearer ${token}` },
- body: blob
- });
- if (!resp.ok) {
- let detail = `HF inference failed (${resp.status})`;
- try {
- const err = await resp.json();
- detail = err.error || err.detail || detail;
- } catch (_) { }
- throw new Error(detail);
- }
- const payload = await resp.json();
- if (!Array.isArray(payload)) throw new Error("Unexpected HF response format.");
- return payload.map(p => {
- const b = p.box || p.bbox || p.bounding_box || {};
- const xmin = b.xmin ?? b.x ?? 0;
- const ymin = b.ymin ?? b.y ?? 0;
- const xmax = b.xmax ?? (b.x + (b.w || 0)) ?? 0;
- const ymax = b.ymax ?? (b.y + (b.h || 0)) ?? 0;
- return {
- bbox: [xmin, ymin, Math.max(1, xmax - xmin), Math.max(1, ymax - ymin)],
- class: p.label || p.class || "object",
- score: p.score ?? p.confidence ?? 0
- };
- });
- }
-
- async function detectWithCoco(inputForModel, applyMissionFilter) {
- await ensureCocoDetector();
- if (!state.detector.model) {
- log("Detector model not available in this browser. Switch to External detector or use HF models.", "w");
- return [];
- }
- let preds = await state.detector.model.detect(inputForModel);
- if (applyMissionFilter) preds = filterPredsByMission(preds);
-
- const filtered = preds
- .filter(p => p.score >= 0.45)
- .slice(0, 14)
- .map(p => ({ bbox: p.bbox, class: p.class, score: p.score }));
-
- if (!filtered.length) {
- log("Detector returned no confident objects for this frame.", "w");
- }
- return filtered;
- }
-
- async function waitForBackendDetections(timeoutMs = 2000) {
- const start = Date.now();
- while ((Date.now() - start) < timeoutMs) {
- if (Array.isArray(state.hf.firstFrameDetections)) {
- return state.hf.firstFrameDetections;
- }
- await new Promise(resolve => setTimeout(resolve, 100));
- }
- return null;
- }
-
- async function runDetectOnFrame() {
- const w = state.frame.w, h = state.frame.h;
- const inputForModel = frameCanvas; // canvas contains the first frame
- const sel = getDetectorSelection();
- const mode = sel.value;
- const kind = sel.kind;
-
- if (mode === "coco") {
- return await detectWithCoco(inputForModel, false);
- }
-
- if (mode === "external") {
- try {
- const res = await externalDetect({ canvas: frameCanvas, width: w, height: h });
- if (Array.isArray(res)) return res;
- log("External detector returned invalid response.", "w");
- return [];
- } catch (err) {
- log(`External detector failed: ${err.message}`, "w");
- return [];
- }
- }
-
- if (kind === "segmentation") {
- // For segmentation, we don't have instant local inference
- // User needs to process full video via HF async endpoint
- log("Segmentation requires full video processing via HF backend");
- return [];
- }
-
- if (kind === "drone") {
- const backendDets = await waitForBackendDetections();
- if (Array.isArray(backendDets) && backendDets.length) {
- return backendDets.map(d => {
- const bbox = Array.isArray(d.bbox) ? d.bbox : [0, 0, 1, 1];
- const x1 = bbox[0] || 0;
- const y1 = bbox[1] || 0;
- const x2 = bbox[2] || 0;
- const y2 = bbox[3] || 0;
- const depthRel = Number.isFinite(d.depth_rel) ? d.depth_rel : null;
- return {
- bbox: [x1, y1, Math.max(1, x2 - x1), Math.max(1, y2 - y1)],
- class: d.label || "drone",
- score: d.score ?? 0,
- depth_rel: depthRel // Visualization only, GPT handles distance
- };
- });
- }
- // Same for drone detection
- log("Drone detection requires full video processing via HF backend");
- return [];
- }
-
- if (kind === "object") {
- // HF object detection models
- if (["hf_yolov8", "detr_resnet50", "grounding_dino"].includes(mode)) {
- const backendDets = await waitForBackendDetections();
- if (Array.isArray(backendDets) && backendDets.length) {
- return backendDets.map(d => {
- const bbox = Array.isArray(d.bbox) ? d.bbox : [0, 0, 1, 1];
- const x1 = bbox[0] || 0;
- const y1 = bbox[1] || 0;
- const x2 = bbox[2] || 0;
- const y2 = bbox[3] || 0;
- const depthRel = Number.isFinite(d.depth_rel) ? d.depth_rel : null;
- return {
- bbox: [x1, y1, Math.max(1, x2 - x1), Math.max(1, y2 - y1)],
- class: d.label || "object",
- score: d.score ?? 0,
- depth_rel: depthRel // Visualization only, GPT handles distance
- };
- });
- }
- // For first-frame detection, we can show a placeholder or skip
- // The actual detections come from the async endpoint
- log(`${mode} requires backend async processing`);
- return [];
- } else {
- // Fallback to COCO if unknown
- return await detectWithCoco(inputForModel, false);
- }
- }
-
- return [];
- }
-
-
- // ========= Render first frame ========
- function drawFirstFrame() {
- const ctx = frameCanvas.getContext("2d");
- const w = state.frame.w, h = state.frame.h;
- frameCanvas.width = w; frameCanvas.height = h;
- frameOverlay.width = w; frameOverlay.height = h;
-
- ctx.clearRect(0, 0, w, h);
-
- // Check if we have HF processed first frame (segmentation or object detection with overlays)
- if (state.hf.firstFrameUrl) {
- // HF backend will draw the processed frame via displayAsyncFirstFrame()
- // Don't draw dark background - let the processed image show through
- log("Waiting for HF processed first frame to display...", "t");
- return;
- }
-
- // For local detection: show dark background, no original frame
- ctx.fillStyle = "#0b1026";
- ctx.fillRect(0, 0, w, h);
-
- if (!state.frame.bitmap) {
- ctx.fillStyle = "rgba(255,255,255,.65)";
- ctx.font = "16px " + getComputedStyle(document.body).fontFamily;
- ctx.fillText("No frame available", 18, 28);
- return;
- }
-
- // Original frame bitmap is NOT drawn for local detection - only processed results will be displayed
- // ctx.drawImage(state.frame.bitmap, 0, 0, w, h);
- }
-
- // ========= Agent cursor (optional, purely visual) =========
- function ensureAgentCursorOverlay() {
- if ($("#agentCursor")) return;
- const el = document.createElement("div");
- el.id = "agentCursor";
- el.style.position = "fixed";
- el.style.zIndex = "9999";
- el.style.width = "14px";
- el.style.height = "14px";
- el.style.borderRadius = "999px";
- el.style.pointerEvents = "none";
- el.style.background = "radial-gradient(circle at 30% 30%, rgba(34,211,238,.95), rgba(124,58,237,.65))";
- el.style.boxShadow = "0 0 18px rgba(34,211,238,.55), 0 0 46px rgba(124,58,237,.25)";
- el.style.border = "1px solid rgba(255,255,255,.25)";
- el.style.opacity = "0";
- document.body.appendChild(el);
- }
-
- function setCursorVisible(v) {
- ensureAgentCursorOverlay();
- const el = $("#agentCursor");
- el.style.opacity = v ? "1" : "0";
- state.ui.agentCursor.visible = v;
- }
-
- function moveCursorToRect(rect, mode = "glide") {
- state.ui.agentCursor.target = rect;
- state.ui.agentCursor.mode = mode;
- state.ui.agentCursor.t0 = now();
- setCursorVisible(state.ui.cursorMode === "on");
- }
-
- function tickAgentCursor() {
- const el = $("#agentCursor");
- if (!el || state.ui.cursorMode !== "on" || !state.ui.agentCursor.visible) return;
- const c = state.ui.agentCursor;
- if (!c.target) return;
-
- const tx = c.target.left + c.target.width * 0.72;
- const ty = c.target.top + c.target.height * 0.50;
-
- // smooth spring
- const ease = 0.12;
- const dx = tx - (c.x * window.innerWidth);
- const dy = ty - (c.y * window.innerHeight);
- c.vx = (c.vx + dx * 0.0018) * 0.85;
- c.vy = (c.vy + dy * 0.0018) * 0.85;
-
- const px = (c.x * window.innerWidth) + c.vx * 18;
- const py = (c.y * window.innerHeight) + c.vy * 18;
- c.x = clamp(px / window.innerWidth, 0.02, 0.98);
- c.y = clamp(py / window.innerHeight, 0.02, 0.98);
-
- el.style.transform = `translate(${c.x * window.innerWidth}px, ${c.y * window.innerHeight}px)`;
-
- // hide after settle
- const settle = Math.hypot(dx, dy);
- if (settle < 6 && (now() - c.t0) > 650) {
- // keep visible but soften
- el.style.opacity = "0.75";
- }
- }
-
- cursorMode.addEventListener("change", () => {
- state.ui.cursorMode = cursorMode.value;
- if (state.ui.cursorMode === "off") setCursorVisible(false);
- });
-
- // ========= Reason pipeline (Tab 1) =========
- btnReason.addEventListener("click", async () => {
- if (!state.videoLoaded) {
- log("No video loaded. Upload a video first.", "w");
- setStatus("warn", "READY · Upload a video");
- return;
- }
-
- // Prevent concurrent executions
- if (state.isReasoning) {
- log("Reason already in progress. Please wait for it to complete.", "w");
- return;
- }
-
- // Lock the Reason process
- state.isReasoning = true;
- btnReason.disabled = true;
- btnReason.style.opacity = "0.5";
- btnReason.style.cursor = "not-allowed";
-
- // Show Cancel button
- btnCancelReason.style.display = "inline-block";
-
- // Reset previous processed video output before new run
- if (state.hf.processedUrl && state.hf.processedUrl.startsWith("blob:")) {
- try { URL.revokeObjectURL(state.hf.processedUrl); } catch (_) { }
- }
- state.hf.processedUrl = null;
- state.hf.processedBlob = null;
- state.useProcessedFeed = false;
- btnEngage.disabled = true;
- videoEngage.removeAttribute("src");
- videoEngage.load();
-
- // Clear previous detections before running new detection
- state.detections = [];
- state.selectedId = null;
- renderFrameTrackList();
- renderFrameOverlay();
- // renderSummary(); // Removed
- renderFeatures(null);
- renderTrade();
-
- setStatus("warn", "REASONING · Running perception pipeline");
- // Start mission-driven HF backend (planning → video detection) in parallel.
- startHfPipeline();
- log("Reason started: detection → features → HEL synthesis.", "t");
-
- // a little agent cursor flair
- if (state.ui.cursorMode === "on") {
- moveCursorToRect(btnReason.getBoundingClientRect());
- setTimeout(() => moveCursorToRect(frameCanvas.getBoundingClientRect()), 260);
- setTimeout(() => moveCursorToRect(frameTrackList.getBoundingClientRect()), 560);
- // setTimeout(() => moveCursorToRect(summaryTable.getBoundingClientRect()), 880);
- }
-
- try {
- // Mission objective is optional:
- // - If blank: run unbiased detection across all classes immediately (no server wait).
- // - If provided: still show immediate first-frame results, while HF computes mission focus in the background.
- const missionPromptRaw = (missionText?.value || "").trim();
- if (!missionPromptRaw) {
- state.hf.plan = null;
- state.hf.missionId = null;
- renderMissionContext();
- setHfStatus("processing (all objects, background)…");
- } else {
- // Mission objective will be used directly by the detector
- setHfStatus("processing (mission-focused, background)…");
- }
-
-
- await captureFirstFrame();
- drawFirstFrame();
-
- const dets = await runDetectOnFrame();
-
- state.detections = dets.map((d, i) => {
- const id = `T${String(i + 1).padStart(2, "0")}`;
- const ap = defaultAimpoint(d.class);
- return {
- id,
- label: d.class,
- score: d.score,
- bbox: normBBox(d.bbox, state.frame.w, state.frame.h),
- aim: { ...ap }, // rel inside bbox
- features: null,
- baseRange_m: null,
- baseAreaFrac: null,
- baseDwell_s: null,
- reqP_kW: null,
- maxP_kW: null,
- pkill: null,
- // Depth visualization only
- depth_rel: Number.isFinite(d.depth_rel) ? d.depth_rel : null,
- // Bind GPT reasoning fields from backend
- gpt_distance_m: d.gpt_distance_m || null,
- gpt_direction: d.gpt_direction || null,
- gpt_description: d.gpt_description || null
- };
- });
-
- // range estimate calibration
- // [Deleted] calibrateRanges();
-
- // feature generation
- const featureMap = await externalFeatures(state.detections, { width: state.frame.w, height: state.frame.h });
- if (featureMap) {
- state.detections.forEach(d => {
- const f = featureMap[d.id] || featureMap[d.label] || null;
- if (f) d.features = f;
- });
- log("Features populated from external hook.", "g");
- } else {
- // Fallback if no external features: empty object
- state.detections.forEach(d => d.features = {});
- log("No external features provided.", "t");
- }
-
- // If external features provide aimpoint label, align aimpoint marker
- state.detections.forEach(d => {
- if (d.features && d.features.aimpoint_label) {
- const apLabel = String(d.features.aimpoint_label);
- d.aim.label = apLabel;
- // keep rel location but slightly adjust by label type
- const ap = aimpointByLabel(apLabel);
- d.aim.relx = ap.relx;
- d.aim.rely = ap.rely;
- }
- });
-
- // compute HEL synthesis (now async)
- await recomputeHEL();
-
- // pick default selection
- state.selectedId = state.detections[0]?.id || null;
- renderFrameTrackList();
- renderFrameOverlay();
- // renderSummary(); // Removed
- renderFeatures(getSelected());
- renderTrade();
-
- state.hasReasoned = true;
- setStatus("good", "READY · Reason complete (you can Engage)");
- log("Reason complete.", "g");
-
- // Pre-seed tracks for Tab 2 so radar shows targets immediately
- seedTracksFromTab1();
- renderRadar();
-
- // Generate intel summary (async)
- computeIntelSummary();
- } catch (err) {
- setStatus("bad", "ERROR · Reason failed");
- log(`Reason failed: ${err.message}`, "e");
- console.error(err);
- } finally {
- // Always unlock the Reason process
- state.isReasoning = false;
- btnReason.disabled = false;
- btnReason.style.opacity = "1";
- btnReason.style.cursor = "pointer";
-
- // Hide Cancel button
- btnCancelReason.style.display = "none";
- }
- });
-
- // Cancel button handler
- btnCancelReason.addEventListener("click", () => {
- cancelReasoning();
- });
-
- btnRecompute.addEventListener("click", () => {
- if (!state.hasReasoned) return;
- recomputeHEL();
- // renderSummary();
- renderFrameOverlay();
- renderTrade();
- log("Recomputed HEL metrics using current knobs (no new detection).", "t");
- });
-
- btnClear.addEventListener("click", () => {
- state.detections = [];
- state.selectedId = null;
- state.hasReasoned = false;
- state.isReasoning = false; // Reset reasoning lock
- btnReason.disabled = false; // Re-enable button if it was locked
- btnReason.style.opacity = "1";
- btnReason.style.cursor = "pointer";
- btnCancelReason.style.display = "none"; // Hide Cancel button
- renderFrameTrackList();
- renderFrameOverlay();
- // renderSummary();
- renderFeatures(null);
- renderTrade();
- log("Cleared Tab 1 outputs.", "w");
- setStatus("warn", state.videoLoaded ? "READY · Video loaded (run Reason)" : "STANDBY · No video loaded");
- });
-
- function aimpointByLabel(label) {
- const l = String(label || "").toLowerCase();
- if (l.includes("engine") || l.includes("fuel")) return { relx: 0.64, rely: 0.58, label: label };
- if (l.includes("wing")) return { relx: 0.42, rely: 0.52, label: label };
- if (l.includes("nose") || l.includes("sensor")) return { relx: 0.28, rely: 0.48, label: label };
- if (l.includes("rotor")) return { relx: 0.52, rely: 0.42, label: label };
- return { relx: 0.50, rely: 0.55, label: label || "center_mass" };
- }
-
- function normBBox(bbox, w, h) {
- const [x, y, bw, bh] = bbox;
- return {
- x: clamp(x, 0, w - 1),
- y: clamp(y, 0, h - 1),
- w: clamp(bw, 1, w),
- h: clamp(bh, 1, h)
- };
- }
-
- // [Deleted] calibrateRanges
-
-
- async function recomputeHEL() {
- if (!state.detections.length) return;
- const knobs = getKnobs();
- // summaryStamp.textContent = "Computing...";
-
- try {
- const result = await externalHEL(state.detections, knobs);
- const metrics = result.targets || {};
- const sys = result.system || {};
-
- state.detections.forEach(d => {
- const r = metrics[d.id] || {};
- d.maxP_kW = r.maxP || 0;
- d.reqP_kW = r.reqP || 0;
- d.baseDwell_s = r.dwell || 0;
- d.pkill = r.pkill || 0;
- });
-
- // Update system headline stats
- mMaxP.textContent = sys.maxP ? `${sys.maxP} kW` : "—";
- mReqP.textContent = sys.reqP ? `${sys.reqP} kW` : "—";
- const margin = sys.margin || 0;
- mMargin.textContent = `${margin > 0 ? "+" : ""}${margin} kW`;
- mMargin.style.color = margin >= 0 ? "rgba(34,197,94,.95)" : "rgba(239,68,68,.95)";
-
- mMaxPSub.textContent = "Calculated by external HEL engine";
-
- // Simple ranking for plan
- const ranked = state.detections.slice().sort((a, b) => (b.pkill || 0) - (a.pkill || 0));
- if (ranked.length && ranked[0].pkill > 0) {
- mPlan.textContent = `${ranked[0].id} → Engage`;
- mPlanSub.textContent = "Highest P(kill) target";
- } else {
- mPlan.textContent = "—";
- mPlanSub.textContent = "No viable targets";
- }
-
- } catch (err) {
- console.error("HEL recompute failed", err);
- }
-
- // summaryStamp.textContent = new Date().toLocaleTimeString();
- // renderSummary();
- refreshTradeTargets();
- }
-
- function getSelected() {
- return state.detections.find(d => d.id === state.selectedId) || null;
- }
-
- // ========= Rendering: Object list, features, summary table =========
- // ========= Track Cards & Interaction =========
- function selectObject(id) {
- state.selectedId = id;
-
- // Highlight Card
- $$(".track-card").forEach(el => el.classList.remove("active"));
- const card = document.getElementById("card-" + id);
- if (card) {
- // card.scrollIntoView({ behavior: "smooth", block: "nearest" });
- card.classList.add("active");
- }
-
- // Highlight BBox (via Overlay)
- renderFrameOverlay();
- // Highlight Radar uses state.selectedId, loops automatically
- }
-
- function renderFrameTrackList() {
- if (!frameTrackList || !trackCount) return;
- frameTrackList.innerHTML = "";
-
- const dets = state.detections || [];
- trackCount.textContent = dets.length;
-
- if (dets.length === 0) {
- frameTrackList.innerHTML = 'No objects tracked.
';
- return;
- }
-
- dets.forEach((det, i) => {
- // ID: T01, T02...
- // Ensure ID exists
- const id = det.id || `T${String(i + 1).padStart(2, '0')}`;
-
- // Resolve Range/Bearing
- let rangeStr = "---";
- let bearingStr = "---";
-
- if (det.gpt_distance_m) {
- rangeStr = `${det.gpt_distance_m}m (GPT)`;
- }
- // No depth_est_m fallback - GPT is the sole source of distance
-
- if (det.gpt_direction) {
- bearingStr = det.gpt_direction;
- }
-
- const card = document.createElement("div");
- card.className = "track-card";
- if (state.selectedId === id) card.classList.add("active");
- card.id = `card-${id}`;
- card.onclick = () => selectObject(id);
-
- const desc = det.gpt_description
- ? `${det.gpt_description}
`
- : ""; // No description, hide body
-
- const gptBadge = (det.gpt_distance_m || det.gpt_description)
- ? `GPT`
- : "";
-
- card.innerHTML = `
-
-
- RANGE: ${rangeStr} | BEARING: ${bearingStr}
-
- ${desc}
- `;
- frameTrackList.appendChild(card);
- });
- }
-
- function renderFeatures(det) {
- selId.textContent = det ? det.id : "—";
- const tbody = featureTable.querySelector("tbody");
- tbody.innerHTML = "";
- if (!det) {
- tbody.innerHTML = `| — | No target selected |
`;
- return;
- }
- const feats = det.features || {};
- const keys = Object.keys(feats);
- const show = keys.slice(0, 12);
-
- show.forEach(k => {
- const tr = document.createElement("tr");
- tr.innerHTML = `${escapeHtml(k)} | ${escapeHtml(String(feats[k]))} | `;
- tbody.appendChild(tr);
- });
-
- if (show.length < 10) {
- for (let i = show.length; i < 10; i++) {
- const tr = document.createElement("tr");
- tr.innerHTML = `— | awaiting additional expert outputs | `;
- tbody.appendChild(tr);
- }
- }
- }
-
- // renderSummary removed
-
- function escapeHtml(s) {
- return s.replace(/[&<>"']/g, m => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[m]));
- }
-
- // ========= Frame overlay rendering =========
- function renderFrameOverlay() {
- const ctx = frameOverlay.getContext("2d");
- const w = frameOverlay.width, h = frameOverlay.height;
- ctx.clearRect(0, 0, w, h);
-
- if (!state.detections.length) return;
-
- // subtle scanning effect
- const t = now() / 1000;
- const scanX = (Math.sin(t * 0.65) * 0.5 + 0.5) * w;
- ctx.fillStyle = "rgba(34,211,238,.06)";
- ctx.fillRect(scanX - 8, 0, 16, h);
-
- state.detections.forEach((d, idx) => {
- const isSel = d.id === state.selectedId;
-
- const b = d.bbox;
- const pad = 2;
-
- // box
- ctx.lineWidth = isSel ? 3 : 2;
- const isFocus = isMissionFocusLabel(d.label);
- ctx.strokeStyle = isSel ? "rgba(34,211,238,.95)" : (isFocus ? "rgba(34,211,238,.70)" : "rgba(124,58,237,.55)");
- ctx.shadowColor = isSel ? "rgba(34,211,238,.40)" : "rgba(124,58,237,.25)";
- ctx.shadowBlur = isSel ? 18 : 10;
- roundRect(ctx, b.x, b.y, b.w, b.h, 10, false, true);
-
- // pseudo mask glow (for segmentation-like effect)
- ctx.shadowBlur = 0;
- const g = ctx.createRadialGradient(b.x + b.w * 0.5, b.y + b.h * 0.5, 10, b.x + b.w * 0.5, b.y + b.h * 0.5, Math.max(b.w, b.h) * 0.75);
- g.addColorStop(0, isSel ? "rgba(34,211,238,.16)" : "rgba(124,58,237,.10)");
- g.addColorStop(1, "rgba(0,0,0,0)");
- ctx.fillStyle = g;
- ctx.fillRect(b.x, b.y, b.w, b.h);
-
- // aimpoint marker (red circle + crosshair)
- const ax = b.x + b.w * d.aim.relx;
- const ay = b.y + b.h * d.aim.rely;
- drawAimpoint(ctx, ax, ay, isSel);
-
- // no text overlay on first-frame view
- });
-
- // click-to-select on canvas (manual aimpoint override can be added later)
- frameOverlay.style.pointerEvents = "auto";
- frameOverlay.onclick = (ev) => {
- const rect = frameOverlay.getBoundingClientRect();
- const sx = frameOverlay.width / rect.width;
- const sy = frameOverlay.height / rect.height;
- const x = (ev.clientX - rect.left) * sx;
- const y = (ev.clientY - rect.top) * sy;
-
- const hit = state.detections
- .map(d => ({ d, inside: x >= d.bbox.x && x <= d.bbox.x + d.bbox.w && y >= d.bbox.y && y <= d.bbox.y + d.bbox.h }))
- .filter(o => o.inside)
- .sort((a, b) => (a.d.bbox.w * a.d.bbox.h) - (b.d.bbox.w * b.d.bbox.h))[0];
-
- if (hit) {
- selectObject(hit.d.id);
- renderFeatures(hit.d);
- renderTrade();
- }
- };
- }
-
- function roundRect(ctx, x, y, w, h, r, fill, stroke) {
- if (w < 2 * r) r = w / 2;
- if (h < 2 * r) r = h / 2;
- ctx.beginPath();
- ctx.moveTo(x + r, y);
- ctx.arcTo(x + w, y, x + w, y + h, r);
- ctx.arcTo(x + w, y + h, x, y + h, r);
- ctx.arcTo(x, y + h, x, y, r);
- ctx.arcTo(x, y, x + w, y, r);
- ctx.closePath();
- if (fill) ctx.fill();
- if (stroke) ctx.stroke();
- }
-
- function drawAimpoint(ctx, x, y, isSel) {
- ctx.save();
- ctx.shadowBlur = isSel ? 18 : 12;
- ctx.shadowColor = "rgba(239,68,68,.45)";
- ctx.strokeStyle = "rgba(239,68,68,.95)";
- ctx.lineWidth = isSel ? 3 : 2;
- ctx.beginPath();
- ctx.arc(x, y, isSel ? 10 : 9, 0, Math.PI * 2);
- ctx.stroke();
-
- ctx.shadowBlur = 0;
- ctx.strokeStyle = "rgba(255,255,255,.70)";
- ctx.lineWidth = 1.5;
- ctx.beginPath();
- ctx.moveTo(x - 14, y); ctx.lineTo(x - 4, y);
- ctx.moveTo(x + 4, y); ctx.lineTo(x + 14, y);
- ctx.moveTo(x, y - 14); ctx.lineTo(x, y - 4);
- ctx.moveTo(x, y + 4); ctx.lineTo(x, y + 14);
- ctx.stroke();
-
- ctx.fillStyle = "rgba(239,68,68,.95)";
- ctx.beginPath();
- ctx.arc(x, y, 2.5, 0, Math.PI * 2);
- ctx.fill();
- ctx.restore();
- }
-
- // ========= Engage tab: tracking + dynamic dwell =========
- btnEngage.addEventListener("click", async () => {
- if (!state.videoLoaded) { log("No video loaded for Engage.", "w"); return; }
- if (!state.hf.processedUrl) { log("Processed video not ready yet. Wait for completion.", "w"); return; }
- if (!state.hasReasoned) { log("Run Reason first to initialize baseline dwell and aimpoints.", "w"); return; }
-
- if (videoEngage.paused) {
- try {
- await videoEngage.play();
- } catch (err) {
- log("Video play failed (browser policy). Click inside the page then try Engage again.", "w");
- return;
- }
- }
-
- state.tracker.running = true;
- state.tracker.beamOn = true;
- state.tracker.lastDetTime = 0;
- state.tracker.lastFrameTime = now();
- state.tracker.frameCount = 0;
- engageNote.textContent = "Running";
- chipBeam.textContent = "BEAM:ON";
- log("Engage started: tracking enabled, dwell accumulation active.", "g");
-
- // Initialize tracks:
- // - Prefer Tab 1 detections if available (same first-frame context)
- // - Otherwise, seed from the current video frame (actual detector output)
- if (!state.tracker.tracks.length) {
- if (state.detections && state.detections.length) {
- seedTracksFromTab1();
- } else {
- const dets = await detectOnVideoFrame();
- if (dets && dets.length) {
- seedTracksFromDetections(dets);
- log(`Seeded ${state.tracker.tracks.length} tracks from video-frame detections.`, "t");
- } else {
- log("No detections available to seed tracks yet. Tracks will appear as detections arrive.", "w");
- }
- }
- }
-
- resizeOverlays();
- startLoop();
- });
-
- btnPause.addEventListener("click", () => {
- if (!state.videoLoaded) return;
- if (!videoEngage.paused) {
- videoEngage.pause();
- log("Video paused.", "t");
- }
- state.tracker.beamOn = false;
- chipBeam.textContent = "BEAM:OFF";
- });
-
- btnReset.addEventListener("click", async () => {
- if (!state.videoLoaded) return;
- videoEngage.pause();
- await seekTo(videoEngage, 0);
- state.tracker.tracks.forEach(t => { t.dwellAccum = 0; t.killed = false; t.state = "TRACK"; });
- state.tracker.selectedTrackId = null;
- state.tracker.beamOn = false;
- state.tracker.running = false;
- dwellBar.style.width = "0%";
- dwellText.textContent = "—";
- engageNote.textContent = "paused";
- chipBeam.textContent = "BEAM:OFF";
- log("Engage reset: video rewound, dwell cleared.", "w");
- renderRadar();
- renderTrackCards();
- renderEngageOverlay();
- });
-
- // Toggle sidebar (radar + live tracks) for fullscreen video
- btnToggleSidebar.addEventListener("click", () => {
- const engageGrid = $(".engage-grid");
- const isCollapsed = engageGrid.classList.contains("sidebar-collapsed");
-
- if (isCollapsed) {
- engageGrid.classList.remove("sidebar-collapsed");
- btnToggleSidebar.textContent = "◀ Hide Sidebar";
- log("Sidebar expanded.", "t");
- } else {
- engageGrid.classList.add("sidebar-collapsed");
- btnToggleSidebar.textContent = "▶ Show Sidebar";
- log("Sidebar collapsed - video fullscreen.", "t");
- }
- });
-
- function seedTracksFromTab1() {
- state.tracker.tracks = state.detections.map(d => {
- const t = {
- id: d.id,
- label: d.label,
- bbox: { ...d.bbox },
- score: d.score,
- aimRel: { relx: d.aim.relx, rely: d.aim.rely, label: d.aim.label },
- baseAreaFrac: d.baseAreaFrac || ((d.bbox.w * d.bbox.h) / (state.frame.w * state.frame.h)),
- baseRange_m: d.baseRange_m || +rangeBase.value,
- baseDwell_s: d.baseDwell_s || 4.0,
- reqP_kW: d.reqP_kW || 35,
- // Depth visualization (keep for depth view toggle)
- depth_rel: Number.isFinite(d.depth_rel) ? d.depth_rel : null,
- // GPT properties - the sole source of distance estimation
- gpt_distance_m: d.gpt_distance_m || null,
- gpt_direction: d.gpt_direction || null,
- gpt_description: d.gpt_description || null,
- // Track state
- lastSeen: now(),
- vx: 0, vy: 0,
- dwellAccum: 0,
- killed: false,
- state: "TRACK", // TRACK -> SETTLE -> FIRE -> ASSESS -> KILL
- assessT: 0
- };
- return t;
- });
- state.tracker.nextId = state.detections.length + 1;
- log(`Seeded ${state.tracker.tracks.length} tracks from Tab 1 detections.`, "t");
- }
-
- function seedTracksFromDetections(dets) {
- const w = videoEngage.videoWidth || state.frame.w;
- const h = videoEngage.videoHeight || state.frame.h;
-
- state.tracker.tracks = dets.slice(0, 12).map((d, i) => {
- const id = `T${String(i + 1).padStart(2, "0")}`;
- const ap = defaultAimpoint(d.class);
- const bb = normBBox(d.bbox, w, h);
- return {
- id,
- label: d.class,
- bbox: { ...bb },
- score: d.score,
- aimRel: { relx: ap.relx, rely: ap.rely, label: ap.label },
- baseAreaFrac: (bb.w * bb.h) / (w * h),
- baseRange_m: +rangeBase.value,
- baseDwell_s: 5.0,
- reqP_kW: 40,
- // Depth visualization only, GPT handles distance
- depth_rel: Number.isFinite(d.depth_rel) ? d.depth_rel : null,
- // GPT properties
- gpt_distance_m: d.gpt_distance_m || null,
- gpt_direction: d.gpt_direction || null,
- gpt_description: d.gpt_description || null,
- // Track state
- lastSeen: now(),
- vx: 0, vy: 0,
- dwellAccum: 0,
- killed: false,
- state: "TRACK",
- assessT: 0
- };
- });
- state.tracker.nextId = state.tracker.tracks.length + 1;
- }
-
- function iou(a, b) {
- const ax2 = a.x + a.w, ay2 = a.y + a.h;
- const bx2 = b.x + b.w, by2 = b.y + b.h;
- const ix1 = Math.max(a.x, b.x), iy1 = Math.max(a.y, b.y);
- const ix2 = Math.min(ax2, bx2), iy2 = Math.min(ay2, by2);
- const iw = Math.max(0, ix2 - ix1), ih = Math.max(0, iy2 - iy1);
- const inter = iw * ih;
- const ua = a.w * a.h + b.w * b.h - inter;
- return ua <= 0 ? 0 : inter / ua;
- }
-
- async function externalTrack(videoEl) {
- // Hook for user tracking: should return predictions similar to detector output
- if (typeof window.__HEL_TRACK__ === "function") {
- return await window.__HEL_TRACK__(videoEl);
- }
- throw new Error("External tracker hook is not installed.");
- }
-
- async function detectOnVideoFrame() {
- const mode = state.detector.mode;
- if (mode === "external") {
- try { return await externalTrack(videoEngage); }
- catch (e) { log(`External tracker failed: ${e.message}`, "w"); return []; }
- }
- if (state.detector.cocoBlocked) {
- return [];
- }
- if (isHfMode(mode)) {
- // In HF mode, we DO NOT fall back to local COCO for tracking.
- // Why? Because local COCO will overwrite high-quality labels (e.g. "drone")
- // with generic ones ("airplane"), breaking the user experience.
- // Instead, we rely on the tracker's predictive coasting (predictTracks)
- // or wait for sparse updates if we implement backend streaming later.
-
- // For now, return empty to prevent label pollution.
- // The tracker will maintain existing tracks via coasting/prediction
- // until they time out or we get a new "Reason" update.
- return [];
- }
- if (mode === "coco") {
- await ensureCocoDetector();
- if (state.detector.model) {
- try {
- let preds = await state.detector.model.detect(videoEngage);
- return preds
- .filter(p => p.score >= 0.45)
- .slice(0, 18)
- .map(p => ({ bbox: p.bbox, class: p.class, score: p.score }));
- } catch (err) {
- if (err && err.name === "SecurityError") {
- state.detector.cocoBlocked = true;
- log("Local COCO tracking blocked by tainted video. Use External tracker or RAW feed.", "w");
- return [];
- }
- throw err;
- }
- }
- return [];
- }
- return [];
- }
-
-
- function matchAndUpdateTracks(dets, dtSec) {
- // Convert detections to bbox in video coordinates
- const w = videoEngage.videoWidth || state.frame.w;
- const h = videoEngage.videoHeight || state.frame.h;
-
- const detObjs = dets.map(d => ({
- bbox: normBBox(d.bbox, w, h),
- label: d.class,
- score: d.score,
- depth_rel: Number.isFinite(d.depth_rel) ? d.depth_rel : null // Visualization only
- }));
-
- // mark all tracks as unmatched
- const tracks = state.tracker.tracks;
-
- const used = new Set();
- for (const tr of tracks) {
- let best = null;
- let bestI = 0.0;
- let bestIdx = -1;
- for (let i = 0; i < detObjs.length; i++) {
- if (used.has(i)) continue;
- const IoU = iou(tr.bbox, detObjs[i].bbox);
- if (IoU > bestI) {
- bestI = IoU;
- best = detObjs[i];
- bestIdx = i;
- }
- }
- // Strict matching threshold
- if (best && bestI >= 0.25) {
- used.add(bestIdx);
-
- // Velocity with Exponential Moving Average (EMA) for smoothing
- const cx0 = tr.bbox.x + tr.bbox.w * 0.5;
- const cy0 = tr.bbox.y + tr.bbox.h * 0.5;
- const cx1 = best.bbox.x + best.bbox.w * 0.5;
- const cy1 = best.bbox.y + best.bbox.h * 0.5;
-
- const rawVx = (cx1 - cx0) / Math.max(1e-3, dtSec);
- const rawVy = (cy1 - cy0) / Math.max(1e-3, dtSec);
-
- // Alpha of 0.3 means 30% new value, 70% history
- tr.vx = tr.vx * 0.7 + rawVx * 0.3;
- tr.vy = tr.vy * 0.7 + rawVy * 0.3;
-
- // smooth bbox update
- tr.bbox.x = lerp(tr.bbox.x, best.bbox.x, 0.7);
- tr.bbox.y = lerp(tr.bbox.y, best.bbox.y, 0.7);
- tr.bbox.w = lerp(tr.bbox.w, best.bbox.w, 0.6);
- tr.bbox.h = lerp(tr.bbox.h, best.bbox.h, 0.6);
-
- // Logic: Only update label if the new detection is highly confident
- // AND the current track doesn't have a "premium" label (like 'drone').
- // This prevents COCO's 'airplane' from overwriting a custom 'drone' label.
- const protectedLabels = ["drone", "uav", "missile"];
- const isProtected = protectedLabels.some(l => (tr.label || "").toLowerCase().includes(l));
-
- if (!isProtected || (best.label && protectedLabels.some(l => best.label.toLowerCase().includes(l)))) {
- tr.label = best.label || tr.label;
- }
-
- tr.score = best.score || tr.score;
- // Update depth visualization (not for distance)
- if (Number.isFinite(best.depth_rel)) {
- tr.depth_rel = best.depth_rel;
- }
- tr.lastSeen = now();
- } else {
- // Decay velocity if not seen to prevent "coasting" into infinity
- tr.vx *= 0.9;
- tr.vy *= 0.9;
- }
- }
-
- // add unmatched detections as new tracks (optional)
- // Limit total tracks to prevent memory leaks/ui lag
- if (tracks.length < 50) {
- for (let i = 0; i < detObjs.length; i++) {
- if (used.has(i)) continue;
- // create new track only if big enough (avoid clutter)
- const a = detObjs[i].bbox.w * detObjs[i].bbox.h;
- if (a < (w * h) * 0.0025) continue;
-
- const newId = `T${String(state.tracker.nextId++).padStart(2, "0")}`;
- const ap = defaultAimpoint(detObjs[i].label);
- tracks.push({
- id: newId,
- label: detObjs[i].label,
- bbox: { ...detObjs[i].bbox },
- score: detObjs[i].score,
- aimRel: { relx: ap.relx, rely: ap.rely, label: ap.label },
- baseAreaFrac: (detObjs[i].bbox.w * detObjs[i].bbox.h) / (w * h),
- baseRange_m: +rangeBase.value,
- baseDwell_s: 5.5,
- reqP_kW: 42,
- // Depth visualization only, GPT handles distance
- depth_rel: detObjs[i].depth_rel,
- // GPT properties (will be populated by updateTracksWithGPT)
- gpt_distance_m: null,
- gpt_direction: null,
- gpt_description: null,
- // Track state
- lastSeen: now(),
- vx: 0, vy: 0,
- dwellAccum: 0,
- killed: false,
- state: "TRACK",
- assessT: 0
- });
- log(`New track created: ${newId} (${detObjs[i].label})`, "t");
- }
- }
-
- // prune old tracks if they disappear
- const tNow = now();
- state.tracker.tracks = tracks.filter(tr => (tNow - tr.lastSeen) < 1500 || tr.killed);
- }
-
- function predictTracks(dtSec) {
- const w = videoEngage.videoWidth || state.frame.w;
- const h = videoEngage.videoHeight || state.frame.h;
- state.tracker.tracks.forEach(tr => {
- if (tr.killed) return;
- tr.bbox.x = clamp(tr.bbox.x + tr.vx * dtSec * 0.12, 0, w - 1);
- tr.bbox.y = clamp(tr.bbox.y + tr.vy * dtSec * 0.12, 0, h - 1);
- });
- }
-
- function hasValidDepth(item) {
- // Only used for depth VIEW toggle, not distance
- return item && Number.isFinite(item.depth_rel);
- }
-
- function getDisplayRange(item, fallbackRange) {
- // GPT is the ONLY source of distance
- if (item && item.gpt_distance_m) {
- return { range: item.gpt_distance_m, source: "GPT" };
- }
- return { range: fallbackRange, source: "area" };
- }
-
- function getDisplayRel(item) {
- if (item && Number.isFinite(item.depth_rel)) {
- return item.depth_rel;
- }
- return null;
- }
-
- function rangeFromArea(track) {
- // [DELETED] "calculated" depth removed per user request.
- // Fallback only if GPT hasn't returned yet.
- return 1000;
- }
-
- async function updateTracksWithGPT() {
- const activeTracks = state.tracker.tracks.filter(t => !t.killed);
- if (!activeTracks.length) return;
-
- // Take a snapshot of the current video frame
- const c = document.createElement("canvas");
- c.width = videoEngage.videoWidth || state.frame.w;
- c.height = videoEngage.videoHeight || state.frame.h;
- const ctx = c.getContext("2d");
- ctx.drawImage(videoEngage, 0, 0, c.width, c.height);
-
- const blob = await new Promise(r => c.toBlob(r, 'image/jpeg', 0.85));
-
- // Prepare tracks payload
- // Backend expects: [{"id":..., "bbox":[x,y,w,h], "label":...}]
- const tracksPayload = activeTracks.map(t => ({
- id: t.id,
- bbox: [Math.round(t.bbox.x), Math.round(t.bbox.y), Math.round(t.bbox.w), Math.round(t.bbox.h)],
- label: t.label
- }));
-
- const fd = new FormData();
- fd.append("frame", blob, "scan.jpg");
- fd.append("tracks", JSON.stringify(tracksPayload));
-
- log(`Requesting GPT reasoning for ${activeTracks.length} tracks...`, "t");
-
- try {
- const res = await fetch(`${state.hf.baseUrl}/reason/track`, {
- method: "POST",
- body: fd
- });
- if (res.ok) {
- const data = await res.json(); // { "T01": { "distance_m": 450, "description": "..." }, ... }
- let updatedCount = 0;
-
- // Merge into state
- Object.keys(data).forEach(tid => {
- const info = data[tid];
- const track = state.tracker.tracks.find(t => t.id === tid);
- if (track) {
- if (info.distance_m) track.gpt_distance_m = info.distance_m;
- if (info.description) track.gpt_description = info.description;
- updatedCount++;
- }
- });
- log(`GPT updated ${updatedCount} tracks.`, "g");
- renderTrackCards(); // Force refresh UI
- } else {
- console.warn("GPT reason failed", res.status);
- }
- } catch (e) {
- console.error("GPT reason error", e);
- }
- }
-
- function getTrackDisplayRange(track) {
- // GPT is the ONLY source of distance estimation
- if (track.gpt_distance_m) {
- return { range: track.gpt_distance_m, source: "GPT" };
- }
- // No fallback - return null if GPT hasn't provided distance yet
- return { range: null, source: null };
- }
-
- function dwellFromRange(track, range_m) {
- const mp = maxPowerAtTarget(range_m);
- const baseReq = track.reqP_kW || 40;
- const baseD = track.baseDwell_s || 5;
-
- // Use Tab1 baseline as reference; scale by range and power ratio.
- const dwell = requiredDwell(range_m, baseReq, mp.Ptar, baseD);
- return dwell;
- }
-
- function chooseTargetAuto() {
- // choose highest (maxP-reqP)/dwell among visible tracks
- let best = null;
- state.tracker.tracks.forEach(tr => {
- if (tr.killed) return;
- const range = getTrackDisplayRange(tr).range || 1000;
- const mp = maxPowerAtTarget(range);
- const margin = mp.Ptar - (tr.reqP_kW || 0);
- const dwell = dwellFromRange(tr, range);
- const score = margin / Math.max(0.8, dwell);
- if (!best || score > best.score) best = { id: tr.id, score, margin, dwell };
- });
- return best ? best.id : null;
- }
-
- function updateEngagementState(dtSec) {
- const assessS = +assessWindow.value;
- let targetId = state.tracker.selectedTrackId;
-
- if (policyMode.value === "auto") {
- targetId = chooseTargetAuto();
- state.tracker.selectedTrackId = targetId;
- }
-
- if (!state.tracker.beamOn || !targetId) return;
-
- const tr = state.tracker.tracks.find(t => t.id === targetId);
- if (!tr || tr.killed) return;
-
- if (!tr || tr.killed) return;
-
- const disp = getTrackDisplayRange(tr);
- const range = disp.range || 1000;
- const reqD = dwellFromRange(tr, range);
-
- // state machine: TRACK -> SETTLE -> FIRE -> ASSESS -> KILL
- if (tr.state === "TRACK") {
- tr.state = "SETTLE";
- tr.assessT = 0;
- }
-
- if (tr.state === "SETTLE") {
- tr.assessT += dtSec;
- if (tr.assessT >= 0.25) { tr.state = "FIRE"; tr.assessT = 0; }
- } else if (tr.state === "FIRE") {
- tr.dwellAccum += dtSec;
- if (tr.dwellAccum >= reqD) {
- tr.state = "ASSESS";
- tr.assessT = 0;
- }
- } else if (tr.state === "ASSESS") {
- tr.assessT += dtSec;
- if (tr.assessT >= assessS) {
- if (ENABLE_KILL) {
- tr.killed = true;
- tr.state = "KILL";
- state.tracker.beamOn = false; // stop beam after kill to make it dramatic
- chipBeam.textContent = "BEAM:OFF";
- log(`Target ${tr.id} assessed neutralized.`, "g");
- } else {
- tr.state = "ASSESS";
- tr.assessT = 0;
- }
- }
- }
-
- // update dwell bar UI
- const pct = clamp(tr.dwellAccum / Math.max(0.001, reqD), 0, 1) * 100;
- const displayRange = getTrackDisplayRange(tr);
- const rangeLabel = Number.isFinite(displayRange.range)
- ? `${Math.round(displayRange.range)}m (${displayRange.source})`
- : "—";
- dwellBar.style.width = `${pct.toFixed(0)}%`;
- dwellText.textContent = `${tr.id} · ${tr.state} · ${(tr.dwellAccum).toFixed(1)}s / ${reqD.toFixed(1)}s · R=${rangeLabel}`;
- }
-
- function pickTrackAt(x, y) {
- const hits = state.tracker.tracks
- .filter(t => !t.killed)
- .filter(t => x >= t.bbox.x && x <= t.bbox.x + t.bbox.w && y >= t.bbox.y && y <= t.bbox.y + t.bbox.h)
- .sort((a, b) => (a.bbox.w * a.bbox.h) - (b.bbox.w * b.bbox.h));
- return hits[0] || null;
- }
-
- // Main loop
- let rafId = null;
- async function startLoop() {
- if (rafId) cancelAnimationFrame(rafId);
- async function tick() {
- rafId = requestAnimationFrame(tick);
- tickAgentCursor();
-
- if (!state.tracker.running) return;
-
- const tNow = now();
- const dtSec = (tNow - state.tracker.lastFrameTime) / 1000;
- state.tracker.lastFrameTime = tNow;
-
- // detection schedule
- let hz = +detHz.value;
- // Throttle to ~5Hz (approx every 12 frames) for HF fallback mode to save resources
- if (isHfMode(state.detector.mode)) {
- hz = Math.min(hz, 5);
- }
- const period = 1000 / Math.max(1, hz);
- if ((tNow - state.tracker.lastDetTime) >= period) {
- state.tracker.lastDetTime = tNow;
- const dets = await detectOnVideoFrame();
- matchAndUpdateTracks(dets, Math.max(0.016, dtSec));
- } else {
- predictTracks(Math.max(0.016, dtSec));
- }
-
- updateEngagementState(Math.max(0.016, dtSec));
- renderEngageOverlay();
- renderRadar();
- renderTrackCards();
-
- chipTracks.textContent = `TRACKS:${state.tracker.tracks.filter(t => !t.killed).length}`;
- liveStamp.textContent = new Date().toLocaleTimeString();
-
- // GPT Update Loop
- state.tracker.frameCount++;
- if (state.tracker.frameCount % REASON_INTERVAL === 0) {
- updateTracksWithGPT().catch(e => console.error(e));
- }
- }
- tick();
-
- }
-
- function renderEngageOverlay() {
- if (engageOverlay.style.display === "none") {
- return;
- }
- const ctx = engageOverlay.getContext("2d");
- const w = engageOverlay.width, h = engageOverlay.height;
- ctx.clearRect(0, 0, w, h);
-
- if (!state.videoLoaded) return;
-
- // Draw dark background instead of video frame (only processed overlays shown)
- ctx.fillStyle = "#0b1026";
- ctx.fillRect(0, 0, w, h);
-
- // draw track boxes and labels
- const tNow = now();
- state.tracker.tracks.forEach(tr => {
- const isSel = tr.id === state.tracker.selectedTrackId;
- const killed = tr.killed;
-
- const b = tr.bbox;
- const ax = b.x + b.w * tr.aimRel.relx;
- const ay = b.y + b.h * tr.aimRel.rely;
-
- const displayRange = getTrackDisplayRange(tr);
- const range = displayRange.range || 1000;
- const reqD = dwellFromRange(tr, range);
-
- const mp = maxPowerAtTarget(range);
- const margin = mp.Ptar - (tr.reqP_kW || 0);
-
- const color = killed ? "rgba(34,197,94,.55)" : (isSel ? "rgba(34,211,238,.95)" : "rgba(124,58,237,.65)");
-
- // box
- ctx.lineWidth = isSel ? 3 : 2;
- ctx.strokeStyle = color;
- ctx.shadowBlur = isSel ? 16 : 10;
- ctx.shadowColor = color;
- roundRect(ctx, b.x, b.y, b.w, b.h, 10, false, true);
- ctx.shadowBlur = 0;
-
- // aimpoint
- if (!killed) {
- drawAimpoint(ctx, ax, ay, isSel);
- } else {
- // killed marker (no text overlay)
- }
-
- // dwell ring
- if (!killed) {
- const pct = clamp(tr.dwellAccum / Math.max(0.001, reqD), 0, 1);
- ctx.beginPath();
- ctx.strokeStyle = "rgba(34,197,94,.85)";
- ctx.lineWidth = 3;
- ctx.arc(ax, ay, 16, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2 * pct);
- ctx.stroke();
- }
-
- // no text overlay on engage view
-
- // engagement strip indicator near bbox bottom
- const st = tr.state || "TRACK";
- const stColor = st === "FIRE" ? "rgba(239,68,68,.92)" : (st === "ASSESS" ? "rgba(245,158,11,.92)" : (st === "KILL" ? "rgba(34,197,94,.92)" : "rgba(34,211,238,.92)"));
- ctx.fillStyle = stColor;
- ctx.globalAlpha = 0.85;
- ctx.fillRect(b.x, b.y + b.h + 4, clamp(b.w * 0.55, 70, b.w), 5);
- ctx.globalAlpha = 1;
-
- // no state text overlay on engage view
-
- // beam line to selected aimpoint
- if (state.tracker.beamOn && isSel && !killed) {
- ctx.strokeStyle = "rgba(239,68,68,.45)";
- ctx.lineWidth = 2;
- ctx.setLineDash([6, 6]);
- ctx.beginPath();
- ctx.moveTo(w * 0.5, h * 0.98);
- ctx.lineTo(ax, ay);
- ctx.stroke();
- ctx.setLineDash([]);
- }
- });
- }
-
- function renderTrackCards() {
- trackList.innerHTML = "";
- const alive = state.tracker.tracks.filter(t => !t.killed);
- if (!alive.length) {
- const div = document.createElement("div");
- div.className = "mini";
- div.style.padding = "8px";
- div.textContent = "No live tracks. Run Engage or adjust detector.";
- trackList.appendChild(div);
- return;
- }
-
- alive.forEach(tr => {
- const displayRange = getTrackDisplayRange(tr);
- const range = displayRange.range || 1000;
- const rangeTxt = Number.isFinite(displayRange.range)
- ? `${Math.round(displayRange.range)}m (${displayRange.source})`
- : "—";
- const relVal = getDisplayRel(tr);
- const relTxt = relVal != null ? relVal.toFixed(2) : "—";
- const reqD = dwellFromRange(tr, range);
- const mp = maxPowerAtTarget(range);
- const margin = mp.Ptar - (tr.reqP_kW || 0);
- const pk = pkillFromMargin(margin, tr.dwellAccum, reqD);
-
- const div = document.createElement("div");
- div.className = "obj" + (tr.id === state.tracker.selectedTrackId ? " active" : "");
- div.innerHTML = `
-
-
-
${tr.id}
-
${escapeHtml(tr.label)}
-
-
${margin >= 0 ? "+" : ""}${margin.toFixed(1)}kW
-
- R:${rangeTxt}
- REL:${relTxt}
- DW:${reqD.toFixed(1)}s
- Pk:${Math.round(pk * 100)}%
- AP:${escapeHtml(tr.aimRel.label)}
- STATE:${tr.state}
-
- `;
- div.addEventListener("click", () => {
- if (policyMode.value !== "manual") return;
- state.tracker.selectedTrackId = tr.id;
- state.tracker.beamOn = true;
- chipBeam.textContent = "BEAM:ON";
- renderTrackCards();
- });
- trackList.appendChild(div);
- });
- }
-
- // ========= Tab 1 Radar =========
- function renderFrameRadar() {
- if (!frameRadar) return;
- const ctx = frameRadar.getContext("2d");
- const rect = frameRadar.getBoundingClientRect();
- const dpr = devicePixelRatio || 1;
-
- // Resize if needed
- const targetW = Math.max(1, Math.floor(rect.width * dpr));
- const targetH = Math.max(1, Math.floor(rect.height * dpr));
- if (frameRadar.width !== targetW || frameRadar.height !== targetH) {
- frameRadar.width = targetW;
- frameRadar.height = targetH;
- }
-
- const w = frameRadar.width, h = frameRadar.height;
- const cx = w * 0.5, cy = h * 0.5;
- const R = Math.min(w, h) * 0.45; // Max radius
-
- ctx.clearRect(0, 0, w, h);
-
- // --- 1. Background (Tactical Grid) ---
- ctx.fillStyle = "#0a0f22"; // Matches --panel2
- ctx.fillRect(0, 0, w, h);
-
- // Grid Rings (Concentric)
- ctx.strokeStyle = "rgba(34, 211, 238, 0.1)"; // Cyan faint
- ctx.lineWidth = 1;
- for (let i = 1; i <= 4; i++) {
- ctx.beginPath();
- ctx.arc(cx, cy, R * (i / 4), 0, Math.PI * 2);
- ctx.stroke();
- }
-
- // Grid Spokes (Cross + Diagonals)
- ctx.beginPath();
- // Cardinals
- ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy);
- ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R);
- // Diagonals (optional, maybe too busy? let's stick to cleaning cardinals)
- ctx.stroke();
-
- // --- 2. Sweep Animation ---
- const t = now() / 1500; // Slower, more deliberate sweep
- const ang = (t * (Math.PI * 2)) % (Math.PI * 2);
-
- const grad = ctx.createConicGradient(ang + Math.PI / 2, cx, cy); // Offset to start at 0
- grad.addColorStop(0, "transparent");
- grad.addColorStop(0.1, "transparent");
- grad.addColorStop(0.8, "rgba(34, 211, 238, 0.0)");
- grad.addColorStop(1, "rgba(34, 211, 238, 0.15)"); // Trailing edge
-
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(cx, cy, R, 0, Math.PI * 2);
- ctx.fill();
-
- // Scan Line
- ctx.strokeStyle = "rgba(34, 211, 238, 0.6)";
- ctx.lineWidth = 1.5;
- ctx.beginPath();
- ctx.moveTo(cx, cy);
- ctx.lineTo(cx + Math.cos(ang) * R, cy + Math.sin(ang) * R);
- ctx.stroke();
-
- // --- 3. Ownship (Center) ---
- ctx.fillStyle = "#22d3ee"; // Cyan
- ctx.beginPath();
- ctx.arc(cx, cy, 3, 0, Math.PI * 2);
- ctx.fill();
- // Ring around ownship
- ctx.strokeStyle = "rgba(34, 211, 238, 0.5)";
- ctx.lineWidth = 1;
- ctx.beginPath();
- ctx.arc(cx, cy, 6, 0, Math.PI * 2);
- ctx.stroke();
-
- // --- 4. Render Detections ---
- if (state.detections) {
- state.detections.forEach(det => {
- // Determine Range (pixels)
- // Map logical range (meters) to graphical range (0..R)
- let rangeVal = 3000; // default max scale in meters
- let dist = 1000; // default unknown
-
- if (det.gpt_distance_m) {
- dist = det.gpt_distance_m;
- } else {
- // No GPT yet - show at far distance (unknown)
- dist = 3000;
- }
-
- // Log scale or Linear? Linear is easier for users to map.
- // Let's use linear: 0m -> 0px, 1500m -> R
- const maxRangeM = 1500;
- const rPx = (clamp(dist, 0, maxRangeM) / maxRangeM) * R;
-
- // Determine Bearing
- // box center relative to frame center
- const bx = det.bbox.x + det.bbox.w * 0.5;
- const fw = state.frame.w || 1280;
- const tx = (bx / fw) - 0.5; // -0.5 (left) to 0.5 (right)
- // Map x-axis (-0.5 to 0.5) to angle.
- // FOV assumption: ~60 degrees?
- const fovRad = (60 * Math.PI) / 180;
- // Actually canvas 0 is Right (0 rad).
- // We want Up (-PI/2) to be center.
- // So center (tx=0) should be -PI/2.
- // Left (tx=-0.5) => -PI/2 - fov/2.
- // Right (tx=0.5) => -PI/2 + fov/2.
- const angle = (-Math.PI / 2) + (tx * fovRad);
-
- // --- Draw Blip ---
- const px = cx + Math.cos(angle) * rPx;
- const py = cy + Math.sin(angle) * rPx;
-
- const isSelected = (state.selectedId === det.id);
-
- // Glow for selected
- if (isSelected) {
- ctx.shadowBlur = 10;
- ctx.shadowColor = "#f59e0b"; // Amber glow
- } else {
- ctx.shadowBlur = 0;
- }
-
- // Blip Color
- // If it has GPT data, maybe special color? Or just distinct per class?
- let col = "#7c3aed"; // Default violet
- if (det.label === 'person') col = "#ef4444"; // Red
- if (det.label === 'airplane') col = "#f59e0b"; // Amber
- if (isSelected) col = "#ffffff"; // White for selected
-
- ctx.fillStyle = col;
- ctx.beginPath();
- ctx.arc(px, py, isSelected ? 5 : 3.5, 0, Math.PI * 2);
- ctx.fill();
-
- // Blip Label (if selected or hovered - just show ID)
- // Just Show ID for all? Might clutter. Show for selected.
- if (isSelected) {
- ctx.fillStyle = "#fff";
- ctx.font = "bold 11px monospace";
- ctx.fillText(det.id, px + 8, py + 3);
-
- // Connected Line to center
- ctx.strokeStyle = "rgba(255, 255, 255, 0.4)";
- ctx.lineWidth = 1;
- ctx.setLineDash([2, 2]); // Optional: dashed line for "targeting" feel
- ctx.beginPath();
- ctx.moveTo(cx, cy);
- ctx.lineTo(px, py);
- ctx.stroke();
- ctx.setLineDash([]); // Reset
-
- // Distance Label on Line
- const mx = (cx + px) * 0.5;
- const my = (cy + py) * 0.5;
- const distStr = `${Math.round(dist)}m`;
-
- ctx.font = "10px monospace";
- const tm = ctx.measureText(distStr);
- const tw = tm.width;
- const th = 10;
-
- // Label Background
- ctx.fillStyle = "rgba(10, 15, 34, 0.85)";
- ctx.fillRect(mx - tw / 2 - 3, my - th / 2 - 2, tw + 6, th + 4);
-
- // Label Text
- ctx.fillStyle = "#22d3ee"; // Cyan
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
- ctx.fillText(distStr, mx, my);
-
- // Reset text alignment
- ctx.textAlign = "start";
- ctx.textBaseline = "alphabetic";
- }
-
- ctx.shadowBlur = 0; // reset
- });
- }
- requestAnimationFrame(renderFrameRadar);
- }
- // Start loop immediately
- requestAnimationFrame(renderFrameRadar);
-
- // ========= Radar rendering (Tab 2) - Aligned with Tab 1 Scale/FOV =========
- function renderRadar() {
- const ctx = radarCanvas.getContext("2d");
- const rect = radarCanvas.getBoundingClientRect();
- const dpr = devicePixelRatio || 1;
- const targetW = Math.max(1, Math.floor(rect.width * dpr));
- const targetH = Math.max(1, Math.floor(rect.height * dpr));
- if (radarCanvas.width !== targetW || radarCanvas.height !== targetH) {
- radarCanvas.width = targetW;
- radarCanvas.height = targetH;
- }
- const w = radarCanvas.width, h = radarCanvas.height;
- ctx.clearRect(0, 0, w, h);
-
- // Background (Matches Tab 1)
- ctx.fillStyle = "#0a0f22";
- ctx.fillRect(0, 0, w, h);
-
- const cx = w * 0.5, cy = h * 0.5;
- const R = Math.min(w, h) * 0.45; // Match Tab 1 Radius factor
-
- // Rings (Matches Tab 1 style)
- ctx.strokeStyle = "rgba(34, 211, 238, 0.1)";
- ctx.lineWidth = 1;
- for (let i = 1; i <= 4; i++) {
- ctx.beginPath();
- ctx.arc(cx, cy, R * (i / 4), 0, Math.PI * 2);
- ctx.stroke();
- }
- // Cross
- ctx.beginPath();
- ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy);
- ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R);
- ctx.stroke();
-
- // Sweep Animation
- const t = now() / 1500; // Match Tab 1 speed (slower)
- const ang = (t * (Math.PI * 2)) % (Math.PI * 2);
-
- // Gradient Sweep
- const grad = ctx.createConicGradient(ang + Math.PI / 2, cx, cy);
- grad.addColorStop(0, "transparent");
- grad.addColorStop(0.1, "transparent");
- grad.addColorStop(0.8, "rgba(34, 211, 238, 0.0)");
- grad.addColorStop(1, "rgba(34, 211, 238, 0.15)");
- ctx.fillStyle = grad;
- ctx.beginPath();
- ctx.arc(cx, cy, R, 0, Math.PI * 2);
- ctx.fill();
-
- // Scan Line
- ctx.strokeStyle = "rgba(34, 211, 238, 0.6)";
- ctx.lineWidth = 1.5;
- ctx.beginPath();
- ctx.moveTo(cx, cy);
- ctx.lineTo(cx + Math.cos(ang) * R, cy + Math.sin(ang) * R);
- ctx.stroke();
-
- // Ownship (Center)
- ctx.fillStyle = "#22d3ee";
- ctx.beginPath();
- ctx.arc(cx, cy, 3, 0, Math.PI * 2);
- ctx.fill();
- ctx.strokeStyle = "rgba(34, 211, 238, 0.5)";
- ctx.lineWidth = 1;
- ctx.beginPath();
- ctx.arc(cx, cy, 6, 0, Math.PI * 2);
- ctx.stroke();
-
- // Render Tracks (Tab 2 Source, Tab 1 Logic)
- const tracks = state.tracker.tracks;
- tracks.forEach(tr => {
- // Range Logic (Matches Tab 1)
- const displayRange = getTrackDisplayRange(tr);
-
- let dist = 3000;
- if (Number.isFinite(displayRange.range)) dist = displayRange.range;
- // else remain at default "unknown" distance (far out) until GPT returns
-
- // Scale: 0 -> 1500m (Matches Tab 1)
- const maxRangeM = 1500;
- const rPx = (clamp(dist, 0, maxRangeM) / maxRangeM) * R;
-
- // Bearing Logic (Matches Tab 1 FOV=60)
- // We need normalized X center (-0.5 to 0.5)
- // tracks store pixel coordinates on current frame scale
- const vw = videoEngage.videoWidth || state.frame.w || 1280;
- const bx = tr.bbox.x + tr.bbox.w * 0.5;
- const tx = (bx / vw) - 0.5; // -0.5 (left) to 0.5 (right)
-
- const fovRad = (60 * Math.PI) / 180;
- const angle = (-Math.PI / 2) + (tx * fovRad);
-
- const px = cx + Math.cos(angle) * rPx;
- const py = cy + Math.sin(angle) * rPx;
-
- // Styling based on State
- const isSelected = (state.tracker.selectedTrackId === tr.id);
- const killed = tr.killed;
-
- const col = killed ? "rgba(148,163,184,.65)" :
- (tr.state === "FIRE" ? "rgba(239,68,68,.9)" :
- (tr.state === "ASSESS" ? "rgba(245,158,11,.9)" :
- (isSelected ? "#f59e0b" : "rgba(34, 211, 238, 0.9)"))); // Cyan default
-
- if (isSelected) {
- ctx.shadowBlur = 10;
- ctx.shadowColor = col;
- } else {
- ctx.shadowBlur = 0;
- }
-
- ctx.fillStyle = col;
- ctx.beginPath();
- ctx.arc(px, py, 5, 0, Math.PI * 2);
- ctx.fill();
-
- // Label
- if (!killed && (isSelected || tracks.length < 5)) {
- ctx.fillStyle = "rgba(255,255,255,.75)";
- ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
- ctx.fillText(tr.id, px + 8, py + 4);
- }
- });
-
- // Legend
- ctx.shadowBlur = 0;
- ctx.fillStyle = "rgba(255,255,255,.55)";
- ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
- ctx.fillText("LIVE TRACKING: 60° FOV, 1500m SCALE", 10, 18);
- }
-
- // ========= Resizing overlays to match video viewports =========
- function resizeOverlays() {
- // Engage overlay matches displayed video size
- const rect = videoEngage.getBoundingClientRect();
- if (rect.width > 0 && rect.height > 0) {
- const w = Math.round(rect.width * devicePixelRatio);
- const h = Math.round(rect.height * devicePixelRatio);
- engageOverlay.width = w;
- engageOverlay.height = h;
- engageOverlay.style.width = rect.width + "px";
- engageOverlay.style.height = rect.height + "px";
-
- // scale track bboxes if video intrinsic differs from overlay (we keep bboxes in intrinsic coords)
- // rendering code assumes overlay coords = intrinsic coords. Therefore we remap by setting ctx transform each render.
- // Instead, we store bboxes in intrinsic and draw by transform.
- // We will implement by setting ctx.setTransform in renderEngageOverlay.
- }
-
- // Frame overlay uses intrinsic, but we still keep canvas scaled by CSS. No action needed.
- }
- window.addEventListener("resize", resizeOverlays);
-
- // Adjust engage overlay transform for drawing in intrinsic coordinates
- const _renderEngageOverlay = renderEngageOverlay;
- renderEngageOverlay = function () {
- const ctx = engageOverlay.getContext("2d");
- const rect = videoEngage.getBoundingClientRect();
- const vw = videoEngage.videoWidth || state.frame.w;
- const vh = videoEngage.videoHeight || state.frame.h;
- const pxW = engageOverlay.width;
- const pxH = engageOverlay.height;
-
- ctx.setTransform(1, 0, 0, 1, 0, 0);
- ctx.clearRect(0, 0, pxW, pxH);
-
- if (!rect.width || !rect.height) return;
- const sx = pxW / vw;
- const sy = pxH / vh;
- ctx.setTransform(sx, 0, 0, sy, 0, 0);
-
- _renderEngageOverlay();
- ctx.setTransform(1, 0, 0, 1, 0, 0);
- };
-
- // Also adjust click picking because overlay is scaled
- engageOverlay.addEventListener("click", (ev) => {
- if (!state.videoLoaded) return;
- if (policyMode.value !== "manual") return;
-
- const rect = engageOverlay.getBoundingClientRect();
- const vw = videoEngage.videoWidth || state.frame.w;
- const vh = videoEngage.videoHeight || state.frame.h;
- const pxW = engageOverlay.width;
- const pxH = engageOverlay.height;
-
- const xPx = (ev.clientX - rect.left) * devicePixelRatio;
- const yPx = (ev.clientY - rect.top) * devicePixelRatio;
-
- // inverse transform
- const x = xPx * (vw / pxW);
- const y = yPx * (vh / pxH);
-
- const tr = pickTrackAt(x, y);
- if (tr) {
- state.tracker.selectedTrackId = tr.id;
- state.tracker.beamOn = true;
- chipBeam.textContent = "BEAM:ON";
- log(`Manual target selected: ${tr.id}`, "t");
- renderTrackCards();
- }
- }, { passive: true });
-
- // ========= Trade-space rendering =========
- function refreshTradeTargets() {
- const sel = tradeTarget.value;
- tradeTarget.innerHTML = "";
- const ids = state.detections.map(d => d.id);
- if (!ids.length) {
- const opt = document.createElement("option");
- opt.value = "";
- opt.textContent = "No targets";
- tradeTarget.appendChild(opt);
- return;
- }
- ids.forEach(id => {
- const opt = document.createElement("option");
- opt.value = id;
- opt.textContent = id;
- tradeTarget.appendChild(opt);
- });
- if (sel && ids.includes(sel)) tradeTarget.value = sel;
- else tradeTarget.value = state.selectedId || ids[0];
- }
-
- btnReplot.addEventListener("click", renderTrade);
- tradeTarget.addEventListener("change", renderTrade);
-
- btnSnap.addEventListener("click", () => {
- if (!state.detections.length) return;
- const id = tradeTarget.value;
- const d = state.detections.find(x => x.id === id) || state.detections[0];
- const snap = {
- target: id,
- helPower_kW: +helPower.value,
- vis_km: +atmVis.value,
- cn2: +atmCn2.value,
- ao: +aoQ.value,
- baseRange_m: d.baseRange_m,
- reqP_kW: d.reqP_kW,
- baseDwell_s: d.baseDwell_s
- };
- log("SNAPSHOT: " + JSON.stringify(snap), "t");
- });
-
- function renderTrade() {
- const ctx = tradeCanvas.getContext("2d");
- const W = tradeCanvas.width, H = tradeCanvas.height;
- ctx.clearRect(0, 0, W, H);
-
- // background
- ctx.fillStyle = "rgba(0,0,0,.32)";
- ctx.fillRect(0, 0, W, H);
-
- if (!state.detections.length) {
- ctx.fillStyle = "rgba(255,255,255,.75)";
- ctx.font = "14px " + getComputedStyle(document.body).fontFamily;
- ctx.fillText("Run Reason to populate trade-space curves.", 18, 34);
- return;
- }
-
- const id = tradeTarget.value || state.selectedId || state.detections[0].id;
- const d = state.detections.find(x => x.id === id) || state.detections[0];
-
- const r0 = Math.max(50, +rMin.value || 200);
- const r1 = Math.max(r0 + 50, +rMax.value || 6000);
-
- // margins
- const padL = 64, padR = 18, padT = 18, padB = 52;
- const plotW = W - padL - padR;
- const plotH = H - padT - padB;
-
- // compute sweep
- const N = 120;
- const xs = [];
- let maxY = 0;
- let minY = Infinity;
-
- for (let i = 0; i <= N; i++) {
- const r = r0 + (r1 - r0) * (i / N);
- const mp = maxPowerAtTarget(r).Ptar;
- const reqP = d.reqP_kW || 40;
- const reqD = requiredDwell(r, reqP, mp, d.baseDwell_s || 5);
-
- xs.push({ r, mp, reqP, reqD });
- maxY = Math.max(maxY, mp, reqP);
- minY = Math.min(minY, mp, reqP);
- }
-
- maxY = Math.max(maxY, 20);
- minY = Math.max(0, minY - 10);
-
- // axes
- ctx.strokeStyle = "rgba(255,255,255,.14)";
- ctx.lineWidth = 1;
- ctx.beginPath();
- ctx.moveTo(padL, padT);
- ctx.lineTo(padL, padT + plotH);
- ctx.lineTo(padL + plotW, padT + plotH);
- ctx.stroke();
-
- // grid lines
- ctx.strokeStyle = "rgba(255,255,255,.07)";
- for (let i = 1; i <= 5; i++) {
- const y = padT + plotH * (i / 5);
- ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(padL + plotW, y); ctx.stroke();
- }
- for (let i = 1; i <= 6; i++) {
- const x = padL + plotW * (i / 6);
- ctx.beginPath(); ctx.moveTo(x, padT); ctx.lineTo(x, padT + plotH); ctx.stroke();
- }
-
- // helpers
- const xMap = (r) => padL + (r - r0) / (r1 - r0) * plotW;
- const yMap = (p) => padT + (1 - (p - minY) / (maxY - minY)) * plotH;
-
- // curve: max power at target
- ctx.strokeStyle = "rgba(34,211,238,.95)";
- ctx.lineWidth = 2.5;
- ctx.beginPath();
- xs.forEach((pt, i) => {
- const x = xMap(pt.r);
- const y = yMap(pt.mp);
- if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
- });
- ctx.stroke();
-
- // curve: required power
- ctx.strokeStyle = "rgba(239,68,68,.90)";
- ctx.lineWidth = 2.5;
- ctx.beginPath();
- xs.forEach((pt, i) => {
- const x = xMap(pt.r);
- const y = yMap(pt.reqP);
- if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
- });
- ctx.stroke();
-
- // annotate margin zones
- ctx.fillStyle = "rgba(34,197,94,.08)";
- ctx.beginPath();
- xs.forEach((pt, i) => {
- const x = xMap(pt.r);
- const y = yMap(Math.max(pt.reqP, pt.mp));
- if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
- });
- for (let i = xs.length - 1; i >= 0; i--) {
- const x = xMap(xs[i].r);
- const y = yMap(Math.min(xs[i].reqP, xs[i].mp));
- ctx.lineTo(x, y);
- }
- ctx.closePath();
- ctx.fill();
-
- // second axis for dwell (scaled)
- const dwellMax = Math.max(...xs.map(p => p.reqD));
- const yMapD = (dwell) => padT + (1 - (dwell / Math.max(1e-6, dwellMax))) * plotH;
-
- ctx.strokeStyle = "rgba(124,58,237,.85)";
- ctx.lineWidth = 2.2;
- ctx.beginPath();
- xs.forEach((pt, i) => {
- const x = xMap(pt.r);
- const y = yMapD(pt.reqD);
- if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
- });
- ctx.stroke();
-
- // optional pkill band
- if (showPk.value === "on") {
- ctx.fillStyle = "rgba(245,158,11,.08)";
- ctx.beginPath();
- xs.forEach((pt, i) => {
- const x = xMap(pt.r);
- const mp = pt.mp;
- const margin = mp - pt.reqP;
- const pk = pkillFromMargin(margin, d.baseDwell_s || 5, pt.reqD);
- const y = padT + plotH * (1 - pk);
- if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
- });
- ctx.lineTo(padL + plotW, padT + plotH);
- ctx.lineTo(padL, padT + plotH);
- ctx.closePath();
- ctx.fill();
- }
-
- // labels
- ctx.fillStyle = "rgba(255,255,255,.84)";
- ctx.font = "bold 14px " + getComputedStyle(document.body).fontFamily;
- ctx.fillText(`Target: ${id} (${d.label})`, padL, 16);
-
- ctx.fillStyle = "rgba(34,211,238,.95)";
- ctx.fillText("Max P@Target (kW)", padL + 10, padT + plotH + 30);
-
- ctx.fillStyle = "rgba(239,68,68,.92)";
- ctx.fillText("Required P@Target (kW)", padL + 190, padT + plotH + 30);
-
- ctx.fillStyle = "rgba(124,58,237,.90)";
- ctx.fillText(`Required Dwell (s, scaled)`, padL + 420, padT + plotH + 30);
-
- ctx.fillStyle = "rgba(255,255,255,.55)";
- ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
- ctx.fillText(`Range (m)`, padL + plotW - 64, padT + plotH + 46);
-
- // axis ticks
- ctx.fillStyle = "rgba(255,255,255,.55)";
- ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
-
- for (let i = 0; i <= 5; i++) {
- const p = minY + (maxY - minY) * (1 - i / 5);
- const y = padT + plotH * (i / 5);
- ctx.fillText(p.toFixed(0), 12, y + 4);
- }
-
- for (let i = 0; i <= 6; i++) {
- const r = r0 + (r1 - r0) * (i / 6);
- const x = padL + plotW * (i / 6);
- ctx.fillText(r.toFixed(0), x - 14, padT + plotH + 18);
- }
-
- // marker at baseline range
- const baseR = d.baseRange_m || +rangeBase.value;
- const xb = xMap(clamp(baseR, r0, r1));
- ctx.strokeStyle = "rgba(255,255,255,.28)";
- ctx.setLineDash([6, 6]);
- ctx.beginPath();
- ctx.moveTo(xb, padT);
- ctx.lineTo(xb, padT + plotH);
- ctx.stroke();
- ctx.setLineDash([]);
- }
-
- // ========= Helpers: keep drawing when idle =========
- function idleLoop() {
- requestAnimationFrame(idleLoop);
- tickAgentCursor();
- }
- idleLoop();
-
- // ========= Init =========
- unloadVideo();
- log("Console initialized. Upload a video to begin.", "t");
-
-})();