82 lines
2.6 KiB
HTML
82 lines
2.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>DETR 动态打标</title>
|
||
<link rel="stylesheet" href="/static/style.css" />
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div>
|
||
<!-- <h1>DETR 动态打标</h1> -->
|
||
<p>DETR动态打标：Python、OpenCV、PyTorch、Transformers DETR 和 FastAPI。</p>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<a class="button-link" href="/tokenizer">tokenizer</a>
|
||
<div class="badge" id="connection">连接中</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="layout">
|
||
<section class="video-card">
|
||
<div class="video-grid">
|
||
{% for device_item in video_grid_devices %}
|
||
<article class="video-grid-item">
|
||
<div class="video-grid-title">{{ device_item.name }} · {{ device_item.device_num }}</div>
|
||
<div class="video-wrap video-grid-wrap">
|
||
<img class="grid-video" src="/video/{{ device_item.device_num | urlencode }}" data-src="/video/{{ device_item.device_num | urlencode }}" alt="{{ device_item.name }} 视频流" />
|
||
</div>
|
||
</article>
|
||
{% endfor %}
|
||
</div>
|
||
<section class="detections-panel">
|
||
<div id="detections" class="detections empty">暂无目标</div>
|
||
</section>
|
||
</section>
|
||
|
||
<aside class="side-card">
|
||
<section>
|
||
<h2>运行状态</h2>
|
||
<dl class="status-grid">
|
||
<dt>摄像头</dt>
|
||
<dd>
|
||
<select id="device-select" class="device-select"></select>
|
||
</dd>
|
||
<dt>视频源</dt>
|
||
<dd id="source">{{ stream_url }}</dd>
|
||
<dt>模型</dt>
|
||
<dd>{{ model }}</dd>
|
||
<dt>设备</dt>
|
||
<dd>{{ device }}</dd>
|
||
<dt>帧号</dt>
|
||
<dd id="frame-id">-</dd>
|
||
<dt>FPS</dt>
|
||
<dd id="fps">-</dd>
|
||
<dt>状态</dt>
|
||
<dd id="error">等待视频帧</dd>
|
||
</dl>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>连接耗时</h2>
|
||
<dl class="status-grid">
|
||
<dt>Token</dt>
|
||
<dd id="timing-token">-</dd>
|
||
<dt>签名</dt>
|
||
<dd id="timing-sign">-</dd>
|
||
<dt>取流地址</dt>
|
||
<dd id="timing-url">-</dd>
|
||
<dt>打开流</dt>
|
||
<dd id="timing-open">-</dd>
|
||
<dt>首帧</dt>
|
||
<dd id="timing-frame">-</dd>
|
||
</dl>
|
||
</section>
|
||
</aside>
|
||
</main>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|