Integrated GPT Reasoning and Object Track Cards

LaserPerception/LaserPerception.css

@@ -866,4 +866,62 @@ input[type="number"]:focus {
 
 ::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, .16);
+}
+
+/* Track Cards */
+.track-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.track-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.track-card.active {
+    border-color: var(--accent);
+    background: rgba(34, 211, 238, 0.1);
+}
+
+.track-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+    margin-bottom: 4px;
+    font-size: 13px;
+    color: var(--text-color);
+}
+
+.track-card-meta {
+    font-size: 11px;
+    color: var(--text-dim);
+    margin-bottom: 4px;
+}
+
+.track-card-body {
+    font-size: 11px;
+    line-height: 1.4;
+    color: #ccc;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 6px;
+    border-radius: 4px;
+}
+
+.gpt-badge {
+    color: gold;
+    font-size: 10px;
+    border: 1px solid gold;
+    border-radius: 3px;
+    padding: 1px 4px;
+    margin-left: 6px;
+}
+
+.gpt-text {
+    color: #e0e0e0;
 }

LaserPerception/LaserPerception.html

@@ -95,6 +95,10 @@
               <input type="checkbox" id="enableDepthToggle">
               <span>Enable Legacy Depth Map (Slow)</span>
             </label>
+            <label class="checkbox-row" for="enableGPTToggle" style="margin-top: 4px;">
+              <input type="checkbox" id="enableGPTToggle">
+              <span style="color: var(--accent-light);">Enable GPT Reasoning</span>
+            </label>
           </div>
 
           <div class="hint mt-sm" id="detectorHint">
@@ -335,194 +339,156 @@
               </div>
             </div>
 
-            <div class="panel panel-summary">
+            <div class="panel panel-summary" style="display:flex; flex-direction:column; min-height: 0;">
               <h3>
-                <span>HEL Summary Outputs</span>
-                <span class="rightnote" id="summaryStamp">—</span>
+                <span>Object Track Cards</span>
+                <span class="rightnote" id="trackCount">0</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 class="list" id="frameTrackList" style="flex:1; overflow-y:auto; padding:8px;">
+                <!-- Cards injected here -->
+                <div style="font-style:italic; color:var(--text-dim); text-align:center; margin-top:20px;">
+                  No objects tracked.
                 </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: 420px;">
+            <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>
-        </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: 420px;">
-                <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>
-                <span class="chip" id="chipDepth" title="Toggle depth view (if available)">VIEW:DEFAULT</span>
-              </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="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="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>
+            <span class="chip" id="chipDepth" title="Toggle depth view (if available)">VIEW:DEFAULT</span>
+          </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 class="mt-md">
+            <div class="row"><label>Active dwell progress (selected)</label><small class="mini" id="dwellText">—</small>
             </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 class="bar">
+              <div id="dwellBar"></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="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="mt-md">
-                <label>Selected target for curve</label>
-                <select id="tradeTarget"></select>
-              </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="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="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="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="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="btnrow">
-                <button class="btn secondary" id="btnReplot">Replot</button>
-                <button class="btn secondary" id="btnSnap">Snapshot (log)</button>
-              </div>
+          <div class="mt-md">
+            <label>Selected target for curve</label>
+            <select id="tradeTarget"></select>
+          </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 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>
-        </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>
+          <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>
+  <!-- Hidden video used only for first-frame capture -->
+  <video id="videoHidden" playsinline muted style="display:none"></video>
   </div>
 
   <script>

LaserPerception/LaserPerception.js

@@ -146,8 +146,11 @@
     const objCount = $("#objCount");
     const featureTable = $("#featureTable");
     const selId = $("#selId");
+    const checkEnableGPT = $("#enableGPTToggle");
 
-    const summaryStamp = $("#summaryStamp");
+    const trackCount = $("#trackCount");
+    const frameTrackList = $("#frameTrackList");
+    // Removed old summary references
     const summaryTable = $("#summaryTable");
     const mMaxP = $("#mMaxP");
     const mReqP = $("#mReqP");
@@ -876,9 +879,11 @@
         // Add depth_estimator parameter for depth processing
         const enableDepthToggle = document.getElementById("enableDepthToggle");
         const useLegacyDepth = enableDepthToggle && enableDepthToggle.checked;
+        const useGPT = checkEnableGPT && checkEnableGPT.checked;
 
         form.append("depth_estimator", useLegacyDepth ? "depth" : "");
         form.append("enable_depth", useLegacyDepth ? "true" : "false");
+        form.append("enable_gpt", useGPT ? "true" : "false");
 
         // Submit async job
         setHfStatus(`submitting ${mode} job...`);
@@ -1927,9 +1932,9 @@
         // Clear previous detections before running new detection
         state.detections = [];
         state.selectedId = null;
-        renderObjectList();
+        renderFrameTrackList();
         renderFrameOverlay();
-        renderSummary();
+        // renderSummary(); // Removed
         renderFeatures(null);
         renderTrade();
 
@@ -2023,9 +2028,9 @@
 
             // pick default selection
             state.selectedId = state.detections[0]?.id || null;
-            renderObjectList();
+            renderFrameTrackList();
             renderFrameOverlay();
-            renderSummary();
+            // renderSummary(); // Removed
             renderFeatures(getSelected());
             renderTrade();
 
@@ -2160,61 +2165,87 @@
     }
 
     // ========= Rendering: Object list, features, summary table =========
-    function renderObjectList() {
-        objList.innerHTML = "";
-        objCount.textContent = `${state.detections.length}`;
-        if (!state.detections.length) {
-            const empty = document.createElement("div");
-            empty.className = "mini";
-            empty.style.padding = "8px";
-            empty.textContent = "No detections yet. Click Reason.";
-            objList.appendChild(empty);
-            return;
+    // ========= 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");
         }
 
-        const dets = state.detections.slice();
-        // Sort by confidence (mission filtering is handled by backend)
-        dets.sort((a, b) => ((b.score || 0) - (a.score || 0)));
+        // Highlight BBox (via Overlay)
+        renderFrameOverlay();
+        // Highlight Radar uses state.selectedId, loops automatically
+    }
 
-        dets.forEach(d => {
-            const div = document.createElement("div");
-            div.className = "obj" + (d.id === state.selectedId ? " active" : "");
-            div.dataset.id = d.id;
+    function renderFrameTrackList() {
+        if (!frameTrackList || !trackCount) return;
+        frameTrackList.innerHTML = "";
 
-            const rangeData = getDisplayRange(d, d.baseRange_m);
-            const rangeTxt = Number.isFinite(rangeData.range) ? `${Math.round(rangeData.range)} m` : "—";
-            const rangeSuffix = rangeTxt === "—" ? "" : ` (${rangeData.source})`;
-            const relVal = getDisplayRel(d);
-            const relTxt = relVal != null ? relVal.toFixed(2) : "—";
-            const dwellTxt = d.baseDwell_s ? `${d.baseDwell_s.toFixed(1)} s` : "—";
-            const pkTxt = (d.pkill != null) ? `${Math.round(d.pkill * 100)}%` : "—";
+        const dets = state.detections || [];
+        trackCount.textContent = dets.length;
 
-            div.innerHTML = `
-          <div class="top">
-            <div>
-              <div class="id">${d.id}</div>
-              <div class="cls">${escapeHtml(d.label)}</div>
-            </div>
-            <div style="display:flex; gap:8px; align-items:center; justify-content:flex-end;">${isMissionFocusLabel(d.label) ? `<span class="badge" style="border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.08)">FOCUS</span>` : ""}<div class="badge"><span class="dot" style="width:7px;height:7px"></span><span>${Math.round(d.score * 100)}%</span></div></div>
-          </div>
-          <div class="meta">
-            <span class="badge">RANGE:${rangeTxt}${rangeSuffix}</span>
-            <span class="badge">REL:${relTxt}</span>
-            <span class="badge">DWELL:${dwellTxt}</span>
-            <span class="badge">P(k):${pkTxt}</span>
-            <span class="badge">AIM:${escapeHtml(d.aim?.label || "center")}</span>
-          </div>
-        `;
+        if (dets.length === 0) {
+            frameTrackList.innerHTML = '<div style="font-style:italic; color:var(--text-dim); text-align:center; margin-top:20px;">No objects tracked.</div>';
+            return;
+        }
 
-            div.addEventListener("click", () => {
-                state.selectedId = d.id;
-                renderObjectList();
-                renderFeatures(d);
-                renderFrameOverlay();
-                renderTrade();
-            });
+        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)`;
+            } else if (det.depth_est_m) {
+                rangeStr = `${Math.round(det.depth_est_m)}m (Lidar)`;
+            } else {
+                // Fallback
+                if (det.box) {
+                    const [x1, y1, x2, y2] = det.box;
+                    const area = ((x2 - x1) * (y2 - y1)) / (state.frame.w * state.frame.h);
+                    const est = clamp(200 / Math.sqrt(Math.max(1e-6, area)), 50, 6000);
+                    rangeStr = `~${Math.round(est)}m (Est)`;
+                }
+            }
+
+            if (det.gpt_direction) {
+                bearingStr = det.gpt_direction;
+            }
 
-            objList.appendChild(div);
+            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
+                ? `<div class="track-card-body"><span class="gpt-text">${det.gpt_description}</span></div>`
+                : ""; // No description, hide body
+
+            const gptBadge = (det.gpt_distance_m || det.gpt_description)
+                ? `<span class="gpt-badge">GPT</span>`
+                : "";
+
+            card.innerHTML = `
+                <div class="track-card-header">
+                    <span>${id} · ${det.label} ${gptBadge}</span>
+                    <span class="badgemini">${(det.score * 100).toFixed(0)}%</span>
+                </div>
+                <div class="track-card-meta">
+                   RANGE: ${rangeStr} | BEARING: ${bearingStr}
+                </div>
+                ${desc}
+            `;
+            frameTrackList.appendChild(card);
         });
     }
 

app.py

@@ -146,6 +146,7 @@ async def detect_endpoint(
     detector: str = Form("hf_yolov8"),
     segmenter: str = Form("sam3"),
     enable_depth: bool = Form(False),
+    enable_gpt: bool = Form(False),
 ):
     """
     Main detection endpoint.
@@ -289,6 +290,7 @@ async def detect_async_endpoint(
     depth_estimator: str = Form("depth"),
     depth_scale: float = Form(25.0),
     enable_depth: bool = Form(False),
+    enable_gpt: bool = Form(False),
 ):
     if mode not in VALID_MODES:
         raise HTTPException(
@@ -346,6 +348,7 @@ async def detect_async_endpoint(
             depth_estimator_name=active_depth,
             depth_scale=depth_scale,
             enable_depth_estimator=enable_depth,
+            enable_gpt=enable_gpt,
         )
         cv2.imwrite(str(first_frame_path), processed_frame)
     except Exception:

inference.py

@@ -404,6 +404,7 @@ def process_first_frame(
     depth_estimator_name: Optional[str] = None,
     depth_scale: Optional[float] = None,
     enable_depth_estimator: bool = False,
+    enable_gpt: bool = False,
 ) -> Tuple[np.ndarray, List[Dict[str, Any]]]:
     frame, _, _, _ = extract_first_frame(video_path)
     if mode == "segmentation":
@@ -426,8 +427,8 @@ def process_first_frame(
             _DEPTH_SCALE if depth_scale is None else depth_scale,
         )
 
-    # 2. GPT-based Distance/Direction Estimation (Now gated by enable_depth_estimator to prevent "depth" appearing when unwanted)
-    if enable_depth_estimator:
+    # 2. GPT-based Distance/Direction Estimation (Explicitly enabled)
+    if enable_gpt:
         # We need to save the frame temporarily to pass to GPT (or refactor gpt_distance to take buffer)
         # For now, write to temp file
         try: