kunpeng/yolo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add video detection and robot alerts

Browse Source
This commit is contained in:
Kunpeng
2026-08-12 17:15:11 +08:00
parent 67d5b40736
commit bb395e3d9a
22 changed files with 1623 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/index.html Normal file
View File

@@ -0,0 +1,90 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>烟火视频检测</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="app-shell">
<header class="topbar">
<div>
<p class="eyebrow">YOLO11S / VIDEO DETECTION</p>
<h1>烟火视频检测</h1>
</div>
<span id="connectionStatus" class="status-pill status-idle">正在检查服务</span>
</header>
<section class="workspace">
<div class="stage-panel">
<div class="panel-heading">
<div>
<p class="eyebrow">VIDEO VIEW</p>
<h2>检测画面</h2>
</div>
<span id="sourceLabel" class="muted">等待选择视频</span>
</div>
<div class="media-stage">
<video id="videoPreview" controls muted playsinline hidden></video>
<div id="emptyState" class="empty-state">
<div class="empty-icon">+</div>
<strong>选择本地视频开始检测</strong>
<span>视频仅在浏览器本地播放，发送的是抽取帧</span>
</div>
<canvas id="overlayCanvas" aria-hidden="true"></canvas>
<div id="loadingState" class="loading-state" hidden>正在分析视频帧...</div>
</div>
<div class="stage-footer">
<span id="lastUpdated">尚未检测</span>
<button id="runDetectionButton" class="button button-primary" type="button" disabled>开始连续检测</button>
</div>
</div>
<aside class="control-panel">
<div class="panel-heading">
<div>
<p class="eyebrow">INPUT</p>
<h2>视频源</h2>
</div>
</div>
<div class="control-stack">
<label class="upload-control">
<span class="button button-secondary">选择视频</span>
<input id="videoInput" type="file" accept="video/*" />
<small>支持浏览器可播放的 MP4、WebM 等格式</small>
</label>
<label class="setting-row">
<span>检测间隔</span>
<select id="intervalSelect">
<option value="500">0.5 秒</option>
<option value="1000" selected>1 秒</option>
<option value="2000">2 秒</option>
</select>
</label>
<button id="clearButton" class="button button-quiet" type="button">清除视频</button>
</div>
<div class="divider"></div>
<div class="panel-heading compact-heading">
<div>
<p class="eyebrow">RESULTS</p>
<h2>检测摘要</h2>
</div>
</div>
<div class="metrics-grid">
<div class="metric-card"><span>烟雾</span><strong id="smokeCount">0</strong></div>
<div class="metric-card"><span>火焰</span><strong id="fireCount">0</strong></div>
<div class="metric-card"><span>最高置信度</span><strong id="maxConfidence">--</strong></div>
<div class="metric-card"><span>状态</span><strong id="riskStatus">待机</strong></div>
</div>
<div id="alertStatus" class="alert-status">机器人告警状态：检查中</div>
<div id="detectionList" class="detection-list">
<p class="muted">暂无检测结果</p>
</div>
</aside>
</section>
</main>
<script src="./app.js" type="module"></script>
</body>
</html>