feat: Add threat chat feature for Q&A about detected threats

- Add utils/threat_chat.py with chat_about_threats() function
- Add POST /chat/threat endpoint to app.py
- Add frontend chat panel to Tab 1 (index.html)
- Add js/ui/chat.js UI module
- Add chatAboutThreats() API function to client.js
- Add chat panel CSS styles to style.css

app.py

@@ -56,6 +56,7 @@ from jobs.storage import (
     get_output_video_path,
 )
 from utils.gpt_reasoning import estimate_threat_gpt
+from utils.threat_chat import chat_about_threats
 
 logging.basicConfig(level=logging.INFO)
 
@@ -688,6 +689,42 @@ async def reason_track(
     return results
 
 
+@app.post("/chat/threat")
+async def chat_threat_endpoint(
+    question: str = Form(...),
+    detections: str = Form(...)  # JSON string of current detections
+):
+    """
+    Chat about detected threats using GPT.
+    
+    Args:
+        question: User's question about the current threat situation.
+        detections: JSON string of detection list with threat analysis data.
+        
+    Returns:
+        GPT response about the threats.
+    """
+    import json as json_module
+    
+    if not question.strip():
+        raise HTTPException(status_code=400, detail="Question cannot be empty.")
+    
+    try:
+        detection_list = json_module.loads(detections)
+    except json_module.JSONDecodeError:
+        raise HTTPException(status_code=400, detail="Invalid detections JSON.")
+    
+    if not isinstance(detection_list, list):
+        raise HTTPException(status_code=400, detail="Detections must be a list.")
+    
+    # Run chat in thread to avoid blocking
+    try:
+        response = await asyncio.to_thread(chat_about_threats, question, detection_list)
+        return {"response": response}
+    except Exception as e:
+        logging.exception("Threat chat failed")
+        raise HTTPException(status_code=500, detail=str(e))
+
 
 if __name__ == "__main__":
     uvicorn.run("app:app", host="0.0.0.0", port=7860, reload=False)

frontend/index.html

@@ -195,6 +195,26 @@
               </div>
             </div>
 
+            <!-- Threat Chat Panel -->
+            <div class="panel panel-chat" id="chatPanel">
+              <h3>
+                <span>🎖️ Threat Analyst Chat</span>
+                <button class="collapse-btn" id="chatToggle" style="font-size: 0.75rem;">▲ Close Chat</button>
+              </h3>
+              <div class="chat-container">
+                <div class="chat-messages" id="chatMessages">
+                  <div class="chat-message chat-system">
+                    <span class="chat-icon">ℹ️</span>
+                    <span class="chat-content">Run detection first, then ask questions about detected threats.</span>
+                  </div>
+                </div>
+                <div class="chat-input-row">
+                  <input type="text" id="chatInput" placeholder="Ask about threats..." autocomplete="off">
+                  <button id="chatSend" class="btn">Send</button>
+                </div>
+              </div>
+            </div>
+
           </div>
 
         </section>
@@ -292,6 +312,7 @@
   <script src="./js/ui/cards.js"></script>
   <script src="./js/ui/features.js"></script>
   <script src="./js/ui/cursor.js"></script>
+  <script src="./js/ui/chat.js"></script>
   <script src="./data/helicopter_demo_data.js"></script>
   <script src="./js/core/demo.js"></script>
   <script src="./js/main.js"></script>

frontend/js/api/client.js

@@ -236,3 +236,24 @@ APP.api.client.callHfObjectDetection = async function (canvas) {
 
     return await resp.json();
 };
+
+// Chat about threats using GPT
+APP.api.client.chatAboutThreats = async function (question, detections) {
+    const { state } = APP.core;
+
+    const form = new FormData();
+    form.append("question", question);
+    form.append("detections", JSON.stringify(detections));
+
+    const resp = await fetch(`${state.hf.baseUrl}/chat/threat`, {
+        method: "POST",
+        body: form
+    });
+
+    if (!resp.ok) {
+        const err = await resp.json().catch(() => ({ detail: resp.statusText }));
+        throw new Error(err.detail || "Chat request failed");
+    }
+
+    return await resp.json();
+};

frontend/js/ui/chat.js

@@ -0,0 +1,155 @@
+// Chat UI Module - Threat-aware chat with GPT
+(function () {
+    const { state } = APP.core;
+    const { $ } = APP.core.utils;
+    const { log } = APP.ui.logging;
+
+    let chatHistory = [];
+
+    /**
+     * Initialize the chat module.
+     */
+    function init() {
+        const chatInput = $("#chatInput");
+        const chatSend = $("#chatSend");
+
+        if (chatSend) {
+            chatSend.addEventListener("click", sendMessage);
+        }
+
+        if (chatInput) {
+            chatInput.addEventListener("keydown", (e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+        }
+
+        // Toggle chat panel
+        const chatToggle = $("#chatToggle");
+        const chatPanel = $("#chatPanel");
+        if (chatToggle && chatPanel) {
+            chatToggle.addEventListener("click", () => {
+                chatPanel.classList.toggle("collapsed");
+                chatToggle.textContent = chatPanel.classList.contains("collapsed")
+                    ? "▼ Chat"
+                    : "▲ Close Chat";
+            });
+        }
+    }
+
+    /**
+     * Send a chat message about current threats.
+     */
+    async function sendMessage() {
+        const chatInput = $("#chatInput");
+        const chatMessages = $("#chatMessages");
+
+        if (!chatInput || !chatMessages) return;
+
+        const question = chatInput.value.trim();
+        if (!question) {
+            log("Please enter a question.", "w");
+            return;
+        }
+
+        // Check if we have detections
+        if (!state.detections || state.detections.length === 0) {
+            appendMessage("system", "No threats detected yet. Run Reason first to analyze the scene.");
+            return;
+        }
+
+        // Add user message to UI
+        appendMessage("user", question);
+        chatInput.value = "";
+        chatInput.disabled = true;
+
+        // Show loading indicator
+        const loadingId = appendMessage("assistant", "Analyzing threats...", true);
+
+        try {
+            const response = await APP.api.client.chatAboutThreats(question, state.detections);
+
+            // Remove loading message
+            removeMessage(loadingId);
+
+            if (response.response) {
+                appendMessage("assistant", response.response);
+                chatHistory.push({ role: "user", content: question });
+                chatHistory.push({ role: "assistant", content: response.response });
+            } else if (response.error || response.detail) {
+                appendMessage("system", `Error: ${response.error || response.detail}`);
+            }
+        } catch (err) {
+            removeMessage(loadingId);
+            appendMessage("system", `Failed to get response: ${err.message}`);
+            log(`Chat error: ${err.message}`, "e");
+        } finally {
+            chatInput.disabled = false;
+            chatInput.focus();
+        }
+    }
+
+    /**
+     * Append a message to the chat display.
+     */
+    function appendMessage(role, content, isLoading = false) {
+        const chatMessages = $("#chatMessages");
+        if (!chatMessages) return null;
+
+        const msgId = `msg-${Date.now()}`;
+        const msgDiv = document.createElement("div");
+        msgDiv.className = `chat-message chat-${role}`;
+        msgDiv.id = msgId;
+
+        if (isLoading) {
+            msgDiv.classList.add("loading");
+        }
+
+        // Format content with line breaks
+        const formatted = content.replace(/\n/g, "<br>");
+
+        const icon = role === "user" ? "👤" : role === "assistant" ? "🎖️" : "⚠️";
+        msgDiv.innerHTML = `<span class="chat-icon">${icon}</span><span class="chat-content">${formatted}</span>`;
+
+        chatMessages.appendChild(msgDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+
+        return msgId;
+    }
+
+    /**
+     * Remove a message by ID.
+     */
+    function removeMessage(msgId) {
+        const msg = document.getElementById(msgId);
+        if (msg) msg.remove();
+    }
+
+    /**
+     * Clear chat history.
+     */
+    function clearChat() {
+        const chatMessages = $("#chatMessages");
+        if (chatMessages) {
+            chatMessages.innerHTML = "";
+        }
+        chatHistory = [];
+    }
+
+    // Export
+    APP.ui = APP.ui || {};
+    APP.ui.chat = {
+        init,
+        sendMessage,
+        clearChat
+    };
+
+    // Auto-init on DOMContentLoaded
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();

frontend/style.css

@@ -932,4 +932,141 @@ input[type="number"]:focus {
 
 .gpt-text {
     color: #e0e0e0;
+}
+
+/* =========================================
+   Threat Chat Panel
+   ========================================= */
+
+.panel-chat {
+    grid-column: 1 / -1;
+    max-height: 280px;
+    display: flex;
+    flex-direction: column;
+}
+
+.panel-chat.collapsed .chat-container {
+    display: none;
+}
+
+.panel-chat.collapsed {
+    max-height: 44px;
+}
+
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    gap: 8px;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    background: rgba(0, 0, 0, .35);
+    border: 1px solid rgba(255, 255, 255, .10);
+    border-radius: 12px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 100px;
+    max-height: 160px;
+}
+
+.chat-message {
+    display: flex;
+    gap: 8px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    font-size: 12px;
+    line-height: 1.4;
+    animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.chat-message.chat-user {
+    background: linear-gradient(135deg, rgba(124, 58, 237, .25), rgba(34, 211, 238, .10));
+    border: 1px solid rgba(124, 58, 237, .35);
+    margin-left: 20px;
+}
+
+.chat-message.chat-assistant {
+    background: rgba(255, 255, 255, .04);
+    border: 1px solid rgba(255, 255, 255, .10);
+    margin-right: 20px;
+}
+
+.chat-message.chat-system {
+    background: rgba(245, 158, 11, .10);
+    border: 1px solid rgba(245, 158, 11, .25);
+    color: rgba(245, 158, 11, .95);
+    font-size: 11px;
+}
+
+.chat-message.loading .chat-content::after {
+    content: "";
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 2px solid rgba(255, 255, 255, .3);
+    border-top-color: var(--cyan);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-left: 8px;
+    vertical-align: middle;
+}
+
+.chat-icon {
+    flex-shrink: 0;
+    font-size: 14px;
+}
+
+.chat-content {
+    flex: 1;
+    color: rgba(255, 255, 255, .88);
+    word-break: break-word;
+}
+
+.chat-input-row {
+    display: flex;
+    gap: 8px;
+}
+
+.chat-input-row input {
+    flex: 1;
+    background: rgba(255, 255, 255, .04);
+    border: 1px solid rgba(255, 255, 255, .12);
+    border-radius: 10px;
+    padding: 10px 12px;
+    color: var(--text);
+    font-size: 12px;
+    outline: none;
+}
+
+.chat-input-row input:focus {
+    border-color: rgba(124, 58, 237, .55);
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
+}
+
+.chat-input-row input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.chat-input-row .btn {
+    padding: 10px 16px;
+    min-width: 70px;
 }

utils/threat_chat.py

@@ -0,0 +1,142 @@
+"""
+Threat Chat Module - GPT-powered Q&A about detected threats.
+"""
+
+import os
+import json
+import logging
+from typing import List, Dict, Any
+
+logger = logging.getLogger(__name__)
+
+
+def chat_about_threats(question: str, detections: List[Dict[str, Any]]) -> str:
+    """
+    Answer user questions about detected threats using GPT.
+    
+    Args:
+        question: User's question about the current threat situation.
+        detections: List of detection dicts with gpt_raw threat analysis.
+        
+    Returns:
+        GPT's response as a string.
+    """
+    import urllib.request
+    import urllib.error
+    
+    api_key = os.environ.get("OPENAI_API_KEY")
+    if not api_key:
+        logger.warning("OPENAI_API_KEY not set. Cannot process threat chat.")
+        return "Error: OpenAI API key not configured."
+
+    if not detections:
+        return "No threats detected yet. Run detection first to analyze the scene."
+
+    # Build threat context from detections
+    threat_context = _build_threat_context(detections)
+    
+    system_prompt = (
+        "You are a Naval Tactical Intelligence Officer providing real-time threat analysis support. "
+        "You have access to the current threat assessment data from optical surveillance. "
+        "Answer questions concisely and tactically. Use military terminology where appropriate. "
+        "If asked about engagement recommendations, always note that final decisions rest with the commanding officer.\n\n"
+        "CURRENT THREAT PICTURE:\n"
+        f"{threat_context}\n\n"
+        "Respond to the operator's question based on this threat data."
+    )
+
+    payload = {
+        "model": "gpt-4o",
+        "messages": [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": question}
+        ],
+        "max_tokens": 500,
+        "temperature": 0.3,
+    }
+
+    headers = {
+        "Content-Type": "application/json",
+        "Authorization": f"Bearer {api_key}"
+    }
+
+    try:
+        req = urllib.request.Request(
+            "https://api.openai.com/v1/chat/completions",
+            data=json.dumps(payload).encode('utf-8'),
+            headers=headers,
+            method="POST"
+        )
+        with urllib.request.urlopen(req, timeout=30) as response:
+            resp_data = json.loads(response.read().decode('utf-8'))
+            
+        content = resp_data['choices'][0]['message'].get('content', '')
+        return content.strip() if content else "No response generated."
+        
+    except urllib.error.HTTPError as e:
+        logger.error(f"OpenAI API HTTP error: {e.code} - {e.reason}")
+        return f"API Error: {e.reason}"
+    except Exception as e:
+        logger.error(f"Threat chat failed: {e}")
+        return f"Error processing question: {str(e)}"
+
+
+def _build_threat_context(detections: List[Dict[str, Any]]) -> str:
+    """Build a text summary of all detected threats for GPT context."""
+    lines = []
+    
+    for det in detections:
+        obj_id = det.get("id", "Unknown")
+        label = det.get("label", "object")
+        
+        # Extract GPT raw data if available
+        gpt_raw = det.get("gpt_raw") or det.get("features") or {}
+        
+        # Basic info
+        threat_score = det.get("threat_level_score") or gpt_raw.get("threat_level_score", "?")
+        threat_class = det.get("threat_classification") or gpt_raw.get("threat_classification", "Unknown")
+        
+        # Detailed fields
+        vessel_cat = gpt_raw.get("vessel_category", label)
+        specific_class = gpt_raw.get("specific_class", "")
+        weapons = gpt_raw.get("visible_weapons", [])
+        weapon_ready = gpt_raw.get("weapon_readiness") or det.get("weapon_readiness", "Unknown")
+        motion = gpt_raw.get("motion_status", "Unknown")
+        range_nm = gpt_raw.get("range_estimation_nm")
+        bearing = gpt_raw.get("bearing_clock") or det.get("gpt_direction", "")
+        flag = gpt_raw.get("flag_state", "Unknown")
+        sensors = gpt_raw.get("sensor_profile", [])
+        aspect = gpt_raw.get("aspect", "")
+        activity = gpt_raw.get("deck_activity", "")
+        intent = gpt_raw.get("tactical_intent", "")
+        
+        # Build entry
+        entry = f"[{obj_id}] {vessel_cat}"
+        if specific_class:
+            entry += f" ({specific_class})"
+        entry += f"\n  - Threat: {threat_class} (Score: {threat_score}/10)"
+        
+        if range_nm:
+            entry += f"\n  - Range: {range_nm} NM"
+        if bearing:
+            entry += f", Bearing: {bearing}"
+        if motion:
+            entry += f"\n  - Motion: {motion}"
+        if aspect:
+            entry += f", Aspect: {aspect}"
+        if weapons:
+            entry += f"\n  - Weapons: {', '.join(weapons) if isinstance(weapons, list) else weapons}"
+        if weapon_ready and weapon_ready != "Unknown":
+            entry += f" ({weapon_ready})"
+        if sensors:
+            entry += f"\n  - Sensors: {', '.join(sensors) if isinstance(sensors, list) else sensors}"
+        if flag and flag != "Unknown":
+            entry += f"\n  - Flag State: {flag}"
+        if activity:
+            entry += f"\n  - Deck Activity: {activity}"
+        if intent:
+            entry += f"\n  - Assessed Intent: {intent}"
+            
+        lines.append(entry)
+    
+    return "\n\n".join(lines) if lines else "No threat data available."