91 lines
3.6 KiB
HTML
91 lines
3.6 KiB
HTML
<!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>
|