feat: add fire prevention management platform

2026-08-12 17:35:03 +08:00
parent bb395e3d9a
commit 9a1788fe8f
6 changed files with 806 additions and 229 deletions
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -1,24 +1,38 @@
 const API_ENDPOINT = "/api/detect";
-
-const elements = {
-  alertStatus: document.querySelector("#alertStatus"),
-  clearButton: document.querySelector("#clearButton"),
-  connectionStatus: document.querySelector("#connectionStatus"),
-  detectionList: document.querySelector("#detectionList"),
-  emptyState: document.querySelector("#emptyState"),
-  fireCount: document.querySelector("#fireCount"),
-  intervalSelect: document.querySelector("#intervalSelect"),
-  lastUpdated: document.querySelector("#lastUpdated"),
-  loadingState: document.querySelector("#loadingState"),
-  maxConfidence: document.querySelector("#maxConfidence"),
-  overlayCanvas: document.querySelector("#overlayCanvas"),
-  riskStatus: document.querySelector("#riskStatus"),
-  runDetectionButton: document.querySelector("#runDetectionButton"),
-  smokeCount: document.querySelector("#smokeCount"),
-  sourceLabel: document.querySelector("#sourceLabel"),
-  videoInput: document.querySelector("#videoInput"),
-  videoPreview: document.querySelector("#videoPreview"),
+const VIEW_LABELS = {
+  overview: "系统总览",
+  inspection: "视频巡检",
+  events: "告警中心",
+  risks: "风险台账",
+  channels: "通知通道",
+  settings: "系统设置",
 };
+const STATUS_LABELS = {
+  pending: "待处置",
+  acknowledged: "已确认",
+  resolved: "已解决",
+};
+
+const elements = Object.fromEntries(
+  [
+    "ackEventsCount", "alertStatus", "allEventsCount", "channelCount",
+    "channelSummary", "clearButton", "confirmFramesValue", "cooldownValue",
+    "currentClock", "detectionList", "emptyState", "eventTableBody",
+    "eventTableMeta", "feishuChannelBadge", "fireCount", "globalStatus",
+    "inspectionStatus", "intervalSelect", "lastUpdated", "loadingState",
+    "maxConfidence", "menuButton", "modelStatusDetail", "modelStatusValue",
+    "notificationDot", "overlayCanvas", "overviewMessage", "pendingEventCount",
+    "pendingEventsCount", "pendingNavCount", "readyApi", "readyFeishu",
+    "readyWechat", "readyWeights", "recentEventList", "refreshEventsButton",
+    "resolvedEventsCount", "riskChannelValue", "riskConfidenceValue",
+    "riskPendingValue", "riskStatus", "runDetectionButton", "settingConfidence",
+    "settingConfirmFrames", "settingCooldown", "settingImageSize", "settingIou",
+    "settingWeights", "sidebar", "sidebarStatus", "sidebarStatusDot", "smokeCount",
+    "sourceLabel", "todayEventCount", "toastRegion", "trendChart", "videoClock",
+    "videoInput", "videoMeta", "videoPreview", "viewBreadcrumb", "viewTitle",
+    "wechatChannelBadge",
+  ].map((id) => [id, document.querySelector(`#${id}`)])
+);

 const frameCanvas = document.createElement("canvas");
 let videoUrl = null;
@@ -26,10 +40,40 @@ let sessionId = null;
 let detectionActive = false;
 let requestInFlight = false;
 let lastDetectionAt = 0;
+let dashboardData = null;
+let eventData = [];
+let eventFilter = "";

-function setConnectionStatus(label, state = "idle") {
-  elements.connectionStatus.textContent = label;
-  elements.connectionStatus.className = `status-pill status-${state}`;
+function showToast(message, type = "info") {
+  const toast = document.createElement("div");
+  toast.className = `toast ${type}`;
+  toast.textContent = message;
+  elements.toastRegion.appendChild(toast);
+  setTimeout(() => toast.remove(), 3600);
+}
+
+function switchView(viewName) {
+  if (!VIEW_LABELS[viewName]) return;
+  document.querySelectorAll("[data-view-panel]").forEach((panel) => {
+    panel.classList.toggle("is-active", panel.dataset.viewPanel === viewName);
+  });
+  document.querySelectorAll("[data-view]").forEach((button) => {
+    button.classList.toggle("is-active", button.dataset.view === viewName);
+  });
+  elements.viewTitle.textContent = VIEW_LABELS[viewName];
+  elements.viewBreadcrumb.textContent = VIEW_LABELS[viewName];
+  elements.sidebar.classList.remove("is-open");
+  if (viewName === "events") loadEvents();
+  if (["overview", "risks", "channels", "settings"].includes(viewName)) loadDashboard();
+}
+
+function setServiceStatus(online) {
+  elements.globalStatus.textContent = online ? "服务运行正常" : "服务连接异常";
+  elements.globalStatus.className = `status-chip ${online ? "status-online" : "status-offline"}`;
+  elements.sidebarStatus.textContent = online ? "服务在线" : "服务离线";
+  elements.sidebarStatusDot.className = `status-dot ${online ? "is-online" : "is-offline"}`;
+  elements.readyApi.textContent = online ? "正常" : "异常";
+  elements.readyApi.className = online ? "ready" : "not-ready";
 }

 function enabledChannelNames(channels = {}) {
@@ -39,12 +83,189 @@ function enabledChannelNames(channels = {}) {
  return names;
 }

-function clearResults() {
+function updateClock() {
+  elements.currentClock.textContent = new Date().toLocaleString("zh-CN", {
+    hour12: false,
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+function formatDate(value) {
+  if (!value) return "--";
+  return new Date(value).toLocaleString("zh-CN", { hour12: false });
+}
+
+function formatTime(seconds) {
+  if (!Number.isFinite(seconds)) return "00:00";
+  const minutes = Math.floor(seconds / 60);
+  const remaining = Math.floor(seconds % 60);
+  return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
+}
+
+function updateDashboard(data) {
+  dashboardData = data;
+  const { summary, system, detection } = data;
+  const channels = system.alert_channels || {};
+  const channelNames = enabledChannelNames(channels);
+  elements.todayEventCount.textContent = String(summary.today);
+  elements.pendingEventCount.textContent = String(summary.pending);
+  elements.pendingNavCount.textContent = String(summary.pending);
+  elements.notificationDot.hidden = summary.pending === 0;
+  elements.modelStatusValue.textContent = system.weights_available ? "运行正常" : "权重缺失";
+  elements.modelStatusDetail.textContent = system.weights_available ? "模型文件已就绪" : "请检查 YOLO_WEIGHTS";
+  elements.modelStatusValue.className = "text-value";
+  elements.channelCount.textContent = String(channelNames.length);
+  elements.channelSummary.textContent = channelNames.length ? channelNames.join(" + ") : "尚未启用机器人";
+  elements.overviewMessage.textContent = summary.pending
+    ? `当前有 ${summary.pending} 条告警事件等待处置，请尽快进入告警中心确认。`
+    : "当前无待处置事件，模型与视频巡检服务保持监测状态。";
+  elements.readyWeights.textContent = system.weights_available ? "已就绪" : "缺失";
+  elements.readyWeights.className = system.weights_available ? "ready" : "not-ready";
+  setChannelReady(elements.readyWechat, channels.wechat);
+  setChannelReady(elements.readyFeishu, channels.feishu);
+  setChannelBadge(elements.wechatChannelBadge, channels.wechat);
+  setChannelBadge(elements.feishuChannelBadge, channels.feishu);
+  elements.riskPendingValue.textContent = String(summary.pending);
+  elements.riskChannelValue.textContent = `${channelNames.length} / 2`;
+  elements.riskConfidenceValue.textContent = `${Math.round(detection.confidence * 100)}%`;
+  elements.confirmFramesValue.textContent = `${detection.confirm_frames} 帧`;
+  elements.cooldownValue.textContent = `${detection.cooldown_seconds} 秒`;
+  elements.settingWeights.textContent = system.weights;
+  elements.settingImageSize.textContent = `${detection.image_size} px`;
+  elements.settingConfidence.textContent = detection.confidence.toFixed(2);
+  elements.settingIou.textContent = detection.iou.toFixed(2);
+  elements.settingConfirmFrames.textContent = `${detection.confirm_frames} 帧`;
+  elements.settingCooldown.textContent = `${detection.cooldown_seconds} 秒`;
+  renderRecentEvents(data.recent_events || []);
+  renderTrend(eventData.length ? eventData : data.recent_events || []);
+}
+
+function setChannelReady(element, enabled) {
+  element.textContent = enabled ? "已启用" : "未配置";
+  element.className = enabled ? "ready" : "optional";
+}
+
+function setChannelBadge(element, enabled) {
+  element.textContent = enabled ? "已启用" : "未配置";
+  element.className = `channel-badge ${enabled ? "enabled" : ""}`;
+}
+
+async function loadDashboard() {
+  try {
+    const response = await fetch("/api/dashboard");
+    if (!response.ok) throw new Error(`API ${response.status}`);
+    const data = await response.json();
+    setServiceStatus(true);
+    updateDashboard(data);
+  } catch (error) {
+    setServiceStatus(false);
+    showToast(`无法读取管理数据：${error.message}`, "error");
+  }
+}
+
+async function loadEvents() {
+  try {
+    const query = eventFilter ? `?status=${eventFilter}` : "";
+    const response = await fetch(`/api/events${query}`);
+    if (!response.ok) throw new Error(`API ${response.status}`);
+    const result = await response.json();
+    eventData = result.events || [];
+    renderEventTable(eventData);
+    updateEventSummary(result.summary);
+    renderTrend(eventData);
+    setServiceStatus(true);
+  } catch (error) {
+    setServiceStatus(false);
+    showToast(`无法读取告警事件：${error.message}`, "error");
+  }
+}
+
+function updateEventSummary(summary) {
+  elements.allEventsCount.textContent = String(summary.total);
+  elements.pendingEventsCount.textContent = String(summary.pending);
+  elements.ackEventsCount.textContent = String(summary.acknowledged);
+  elements.resolvedEventsCount.textContent = String(summary.resolved);
+  elements.pendingNavCount.textContent = String(summary.pending);
+  elements.notificationDot.hidden = summary.pending === 0;
+}
+
+function renderRecentEvents(events) {
+  if (!events.length) {
+    elements.recentEventList.innerHTML = "<p>暂无告警事件。开始视频巡检后，满足连续帧条件的告警会显示在这里。</p>";
+    return;
+  }
+  elements.recentEventList.innerHTML = events.map((event) => {
+    const primary = event.classes.includes("fire") ? "fire" : "smoke";
+    const label = event.classes.map(classLabel).join("、");
+    return `<div class="event-list-item"><span class="event-type-icon ${primary}">${primary === "fire" ? "火" : "烟"}</span><div class="event-description"><strong>${label}检测告警</strong><span>${formatDate(event.created_at)} · ${event.id}</span></div><strong class="event-confidence">${Math.round(event.max_confidence * 100)}%</strong><span class="event-status status-${event.status}">${STATUS_LABELS[event.status]}</span></div>`;
+  }).join("");
+}
+
+function renderEventTable(events) {
+  elements.eventTableMeta.textContent = `${events.length} 条记录`;
+  if (!events.length) {
+    elements.eventTableBody.innerHTML = '<tr><td colspan="7" class="empty-cell">当前筛选条件下暂无告警事件</td></tr>';
+    return;
+  }
+  elements.eventTableBody.innerHTML = events.map((event) => {
+    const classes = event.classes.map((name) => `<span class="type-tag type-${name}">${classLabel(name)}</span>`).join(" ");
+    const channels = enabledChannelNames(event.notification_channels).join(" + ") || "未发送";
+    return `<tr><td>${event.id}</td><td>${formatDate(event.created_at)}</td><td>${classes}</td><td>${Math.round(event.max_confidence * 100)}%</td><td>${channels}</td><td><span class="event-status status-${event.status}">${STATUS_LABELS[event.status]}</span></td><td><div class="table-actions">${event.status === "pending" ? `<button class="table-action" data-event-id="${event.id}" data-event-status="acknowledged">确认</button>` : ""}${event.status !== "resolved" ? `<button class="table-action" data-event-id="${event.id}" data-event-status="resolved">解决</button>` : ""}</div></td></tr>`;
+  }).join("");
+}
+
+function classLabel(name) {
+  return name === "fire" ? "火焰" : "烟雾";
+}
+
+async function updateEventStatus(eventId, status) {
+  try {
+    const response = await fetch(`/api/events/${eventId}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ status }),
+    });
+    if (!response.ok) throw new Error(`API ${response.status}`);
+    showToast(`事件 ${eventId} 已更新为${STATUS_LABELS[status]}`, "success");
+    await Promise.all([loadEvents(), loadDashboard()]);
+  } catch (error) {
+    showToast(`事件更新失败：${error.message}`, "error");
+  }
+}
+
+function renderTrend(events) {
+  const days = Array.from({ length: 7 }, (_, index) => {
+    const date = new Date();
+    date.setDate(date.getDate() - (6 - index));
+    return { key: date.toISOString().slice(0, 10), label: `${date.getMonth() + 1}/${date.getDate()}`, fire: 0, smoke: 0 };
+  });
+  events.forEach((event) => {
+    const day = days.find((item) => item.key === String(event.created_at).slice(0, 10));
+    if (!day) return;
+    if (event.classes.includes("fire")) day.fire += 1;
+    if (event.classes.includes("smoke")) day.smoke += 1;
+  });
+  const width = 720;
+  const height = 225;
+  const padding = { left: 34, right: 12, top: 14, bottom: 28 };
+  const maxValue = Math.max(3, ...days.flatMap((day) => [day.fire, day.smoke]));
+  const x = (index) => padding.left + index * ((width - padding.left - padding.right) / 6);
+  const y = (value) => height - padding.bottom - value * ((height - padding.top - padding.bottom) / maxValue);
+  const path = (key) => days.map((day, index) => `${index ? "L" : "M"}${x(index)},${y(day[key])}`).join(" ");
+  const gridValues = [0, Math.ceil(maxValue / 2), maxValue];
+  elements.trendChart.innerHTML = `<svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="none"><title>最近七天火焰与烟雾告警趋势</title>${gridValues.map((value) => `<line class="chart-grid" x1="${padding.left}" x2="${width - padding.right}" y1="${y(value)}" y2="${y(value)}"></line><text class="chart-axis-label" x="4" y="${y(value) + 3}">${value}</text>`).join("")}<path class="chart-fire" d="${path("fire")}"></path><path class="chart-smoke" d="${path("smoke")}"></path>${days.map((day, index) => `<circle class="chart-point-fire" cx="${x(index)}" cy="${y(day.fire)}" r="3"></circle><circle class="chart-point-smoke" cx="${x(index)}" cy="${y(day.smoke)}" r="3"></circle><text class="chart-axis-label" text-anchor="middle" x="${x(index)}" y="${height - 8}">${day.label}</text>`).join("")}</svg>`;
+}
+
+function clearDetectionResults() {
  elements.smokeCount.textContent = "0";
  elements.fireCount.textContent = "0";
  elements.maxConfidence.textContent = "--";
  elements.riskStatus.textContent = "待机";
-  elements.detectionList.innerHTML = '<p class="muted">暂无检测结果</p>';
+  elements.detectionList.innerHTML = '<p class="empty-copy">暂无检测结果</p>';
  const context = elements.overlayCanvas.getContext("2d");
  context.clearRect(0, 0, elements.overlayCanvas.width, elements.overlayCanvas.height);
 }
@@ -59,7 +280,7 @@ function drawDetections(detections = []) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  detections.forEach((detection) => {
    const [x1, y1, x2, y2] = detection.box || [];
-    const color = detection.class === "fire" ? "#ff786b" : "#55d5c2";
+    const color = detection.class === "fire" ? "#ff665e" : "#41d6c3";
    context.strokeStyle = color;
    context.lineWidth = Math.max(2, canvas.width / 320);
    context.strokeRect(x1, y1, x2 - x1, y2 - y1);
@@ -69,7 +290,7 @@ function drawDetections(detections = []) {
  });
 }

-function updateResults(result) {
+function updateDetectionResults(result) {
  const detections = result.detections || [];
  const smoke = detections.filter((item) => item.class === "smoke").length;
  const fire = detections.filter((item) => item.class === "fire").length;
@@ -77,35 +298,26 @@ function updateResults(result) {
  elements.smokeCount.textContent = String(smoke);
  elements.fireCount.textContent = String(fire);
  elements.maxConfidence.textContent = max ? `${Math.round(max * 100)}%` : "--";
-  elements.riskStatus.textContent = fire ? "火焰告警" : smoke ? "烟雾告警" : "正常";
+  elements.riskStatus.textContent = fire ? "高风险" : smoke ? "需关注" : "正常";
  elements.detectionList.innerHTML = detections.length
-    ? detections.map((item) => `<div class="detection-row"><span>${item.class === "fire" ? "火焰" : "烟雾"}</span><strong>${Math.round(item.confidence * 100)}%</strong></div>`).join("")
-    : '<p class="muted">未发现目标</p>';
+    ? detections.map((item) => `<div class="detection-row"><span>${classLabel(item.class)}</span><strong>${Math.round(item.confidence * 100)}%</strong></div>`).join("")
+    : '<p class="empty-copy">未发现烟雾或火焰目标</p>';
  const alert = result.alert || {};
+  const channelNames = enabledChannelNames(alert.notification_channels);
  if (alert.triggered) {
-    const labels = alert.classes.map((name) => name === "fire" ? "火焰" : "烟雾").join("、");
-    const channelNames = enabledChannelNames(alert.notification_channels);
-    elements.alertStatus.textContent = channelNames.length
-      ? `已触发 ${channelNames.join(" + ")} 告警：${labels}`
-      : `已满足告警条件：${labels}（未配置机器人 Webhook）`;
+    const labels = alert.classes.map(classLabel).join("、");
+    elements.alertStatus.textContent = channelNames.length ? `已触发 ${channelNames.join(" + ")} 告警：${labels}` : `已生成告警事件：${labels}（机器人未配置）`;
    elements.alertStatus.className = "alert-status alert-triggered";
+    showToast(`检测到${labels}，已生成告警事件`, "error");
+    loadDashboard();
  } else {
    const fireFrames = alert.consecutive?.fire || 0;
    const smokeFrames = alert.consecutive?.smoke || 0;
-    const channelNames = enabledChannelNames(alert.notification_channels);
-    elements.alertStatus.textContent = channelNames.length
-      ? `${channelNames.join(" + ")} 告警已启用 · 连续帧 火焰 ${fireFrames} / 烟雾 ${smokeFrames}`
-      : "机器人告警未配置，检测功能正常";
+    elements.alertStatus.textContent = channelNames.length ? `${channelNames.join(" + ")}已启用 · 连续帧 火焰 ${fireFrames} / 烟雾 ${smokeFrames}` : `机器人未配置 · 连续帧 火焰 ${fireFrames} / 烟雾 ${smokeFrames}`;
    elements.alertStatus.className = "alert-status";
  }
  drawDetections(detections);
-  elements.lastUpdated.textContent = `视频 ${formatTime(elements.videoPreview.currentTime)} · 推理 ${result.inference_ms ?? "--"} ms`;
-}
-
-function formatTime(seconds) {
-  const minutes = Math.floor(seconds / 60);
-  const remaining = Math.floor(seconds % 60);
-  return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
+  elements.lastUpdated.textContent = `推理 ${result.inference_ms ?? "--"} ms`;
 }

 function captureFrame() {
@@ -117,13 +329,7 @@ function captureFrame() {
 }

 async function detectCurrentFrame(timestamp) {
-  if (
-    !detectionActive
-    || requestInFlight
-    || !sessionId
-    || elements.videoPreview.paused
-    || elements.videoPreview.ended
-  ) return;
+  if (!detectionActive || requestInFlight || !sessionId || elements.videoPreview.paused || elements.videoPreview.ended) return;
  const interval = Number(elements.intervalSelect.value);
  if (timestamp - lastDetectionAt < interval) return;
  lastDetectionAt = timestamp;
@@ -136,11 +342,14 @@ async function detectCurrentFrame(timestamp) {
    form.append("file", frame, "video-frame.jpg");
    const response = await fetch(`${API_ENDPOINT}?session_id=${encodeURIComponent(sessionId)}`, { method: "POST", body: form });
    if (!response.ok) throw new Error(`API ${response.status}`);
-    updateResults(await response.json());
-    setConnectionStatus("检测服务已连接", "ready");
+    updateDetectionResults(await response.json());
+    elements.inspectionStatus.textContent = "检测运行中";
+    elements.inspectionStatus.className = "status-chip status-online";
+    setServiceStatus(true);
  } catch (error) {
-    setConnectionStatus("检测服务异常", "alert");
-    elements.detectionList.innerHTML = `<p class="muted">${error.message}</p>`;
+    elements.inspectionStatus.textContent = "检测异常";
+    elements.inspectionStatus.className = "status-chip status-offline";
+    showToast(`视频检测失败：${error.message}`, "error");
  } finally {
    requestInFlight = false;
    elements.loadingState.hidden = true;
@@ -160,42 +369,50 @@ async function startDetection() {
  elements.intervalSelect.disabled = true;
  try {
    await elements.videoPreview.play();
+    requestAnimationFrame(scheduleDetection);
  } catch {
-    setConnectionStatus("请允许视频播放", "alert");
+    stopDetection();
+    showToast("浏览器未允许视频播放，请手动点击播放后重试。", "error");
  }
-  requestAnimationFrame(scheduleDetection);
 }

 function stopDetection() {
  detectionActive = false;
  elements.runDetectionButton.textContent = "开始连续检测";
  elements.intervalSelect.disabled = false;
+  elements.inspectionStatus.textContent = elements.videoPreview.src ? "检测已暂停" : "等待视频";
+  elements.inspectionStatus.className = "status-chip status-idle";
 }

 async function resetSession() {
-  const previousSession = sessionId;
+  const previous = sessionId;
  sessionId = crypto.randomUUID();
-  if (previousSession) {
-    fetch(`/api/sessions/${encodeURIComponent(previousSession)}`, { method: "DELETE" }).catch(() => {});
-  }
-}
-
-async function checkHealth() {
-  try {
-    const response = await fetch("/api/health");
-    if (!response.ok) throw new Error();
-    const health = await response.json();
-    setConnectionStatus("检测服务已连接", "ready");
-    const channelNames = enabledChannelNames(health.alert_channels);
-    elements.alertStatus.textContent = channelNames.length
-      ? `${channelNames.join(" + ")} 告警已启用`
-      : "机器人告警未配置，检测功能正常";
-  } catch {
-    setConnectionStatus("检测服务未连接", "alert");
-    elements.alertStatus.textContent = "无法读取机器人告警状态";
-  }
+  if (previous) fetch(`/api/sessions/${encodeURIComponent(previous)}`, { method: "DELETE" }).catch(() => {});
 }

+document.querySelectorAll("[data-view], [data-view-jump]").forEach((control) => {
+  control.addEventListener("click", () => switchView(control.dataset.view || control.dataset.viewJump));
+});
+document.querySelectorAll("[data-event-filter]").forEach((button) => {
+  button.addEventListener("click", () => {
+    eventFilter = button.dataset.eventFilter;
+    document.querySelectorAll("[data-event-filter]").forEach((item) => item.classList.toggle("is-active", item === button));
+    loadEvents();
+  });
+});
+elements.eventTableBody.addEventListener("click", (event) => {
+  const button = event.target.closest("[data-event-id]");
+  if (button) updateEventStatus(button.dataset.eventId, button.dataset.eventStatus);
+});
+elements.menuButton.addEventListener("click", () => elements.sidebar.classList.toggle("is-open"));
+elements.refreshEventsButton.addEventListener("click", loadEvents);
+elements.runDetectionButton.addEventListener("click", () => detectionActive ? stopDetection() : startDetection());
+elements.videoPreview.addEventListener("ended", stopDetection);
+elements.videoPreview.addEventListener("timeupdate", () => {
+  elements.videoClock.textContent = `${formatTime(elements.videoPreview.currentTime)} / ${formatTime(elements.videoPreview.duration)}`;
+});
+elements.videoPreview.addEventListener("seeked", async () => { drawDetections([]); await resetSession(); });
+elements.videoPreview.addEventListener("resize", () => drawDetections([]));
 elements.videoInput.addEventListener("change", async () => {
  const [file] = elements.videoInput.files;
  if (!file) return;
@@ -207,22 +424,13 @@ elements.videoInput.addEventListener("change", async () => {
  elements.videoPreview.hidden = false;
  elements.emptyState.hidden = true;
  elements.sourceLabel.textContent = file.name;
+  elements.videoMeta.textContent = `${(file.size / 1024 / 1024).toFixed(1)} MB · 本地视频`;
  elements.runDetectionButton.disabled = false;
+  elements.inspectionStatus.textContent = "视频已就绪";
+  elements.inspectionStatus.className = "status-chip status-online";
  await resetSession();
-  clearResults();
+  clearDetectionResults();
 });
-
-elements.runDetectionButton.addEventListener("click", () => {
-  if (detectionActive) stopDetection(); else startDetection();
-});
-
-elements.videoPreview.addEventListener("ended", stopDetection);
-elements.videoPreview.addEventListener("seeked", async () => {
-  drawDetections([]);
-  await resetSession();
-});
-elements.videoPreview.addEventListener("resize", () => drawDetections([]));
-
 elements.clearButton.addEventListener("click", async () => {
  stopDetection();
  elements.videoPreview.pause();
@@ -232,12 +440,15 @@ elements.clearButton.addEventListener("click", async () => {
  if (videoUrl) URL.revokeObjectURL(videoUrl);
  videoUrl = null;
  elements.videoInput.value = "";
-  elements.sourceLabel.textContent = "等待选择视频";
+  elements.sourceLabel.textContent = "未选择视频";
+  elements.videoMeta.textContent = "支持 MP4、WebM 等浏览器可播放格式";
  elements.emptyState.hidden = false;
  elements.runDetectionButton.disabled = true;
  await resetSession();
-  clearResults();
+  clearDetectionResults();
 });

+updateClock();
+setInterval(updateClock, 1000);
 resetSession();
-checkHealth();
+Promise.all([loadDashboard(), loadEvents()]);