update at 2026-06-04 14:09:16

2026-06-04 14:09:16 +08:00
parent 41bd03123c
commit 4603914e85
11 changed files with 692 additions and 68 deletions
--- a/app/templates/tokenizer.html
+++ b/app/templates/tokenizer.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>DETR Tokenizer 动态可视化</title>
+    <link rel="stylesheet" href="/static/style.css?v=tokenizer-layout-1-3" />
+  </head>
+  <body class="tokenizer-page">
+    <header class="topbar">
+      <div>
+        <!--<h1>DETR Tokenizer 动态可视化</h1>-->
+        <p>实时展示当前视频帧从图像预处理、视觉特征、token 序列到检测输出的过程。</p>
+      </div>
+      <div class="topbar-actions">
+        <a class="button-link" href="/">返回视频</a>
+        <div class="badge" id="tokenizer-status">等待帧</div>
+      </div>
+    </header>
+
+    <main class="tokenizer-layout">
+      <section class="tokenizer-card tokenizer-flow-card">
+        <h2>实时流程</h2>
+        <div class="pipeline-steps" id="pipeline-steps"></div>
+      </section>
+
+      <aside class="tokenizer-side">
+        <section class="tokenizer-card">
+          <h2>选中 Token</h2>
+          <div class="selected-token" id="selected-token">点击下方 token 查看向量采样。</div>
+        </section>
+
+        <section class="tokenizer-card">
+          <h2>Token 序列</h2>
+          <div class="token-summary" id="token-summary">等待视频帧</div>
+          <div class="token-sequence" id="token-sequence"></div>
+        </section>
+
+        <section class="tokenizer-card">
+          <h2>检测输出</h2>
+          <div id="tokenizer-detections" class="detections empty">暂无目标</div>
+        </section>
+      </aside>
+    </main>
+
+    <script src="/static/tokenizer.js"></script>
+  </body>
+</html>