first commit

2026-06-03 11:00:50 +08:00
commit 322b72ac5b
18 changed files with 1821 additions and 0 deletions
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -0,0 +1,82 @@
+<!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>使用 Python、OpenCV、PyTorch、Transformers DETR 和 FastAPI，Mac mini m2 上运行。</p>
+      </div>
+      <div class="badge" id="connection">连接中</div>
+    </header>
+
+    <main class="layout">
+      <section class="video-card">
+        <div class="pipeline">
+          <div class="stage active">源节点</div>
+          <div class="arrow">→</div>
+          <div class="stage active">DETR 推理</div>
+          <div class="arrow">→</div>
+          <div class="stage active">OSD 打标</div>
+          <div class="arrow">→</div>
+          <div class="stage active">FastAPI 输出</div>
+        </div>
+        <div class="video-wrap">
+          <img id="video" src="/video" alt="动态打标视频流" />
+        </div>
+      </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>
+
+        <section>
+          <h2>检测结果</h2>
+          <div id="detections" class="detections empty">暂无目标</div>
+        </section>
+      </aside>
+    </main>
+
+    <script src="/static/app.js"></script>
+  </body>
+</html>