{{ device_item.name }} · {{ device_item.device_num }}
+
+ 
+
+
-
- 源节点
- →
- DETR 推理
- →
- OSD 打标
- →
- FastAPI 输出
-
- 
+
+
diff --git a/app/templates/tokenizer.html b/app/templates/tokenizer.html
new file mode 100644
index 0000000..5f53455
--- /dev/null
+++ b/app/templates/tokenizer.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+ DETR Tokenizer 动态可视化
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tokenizer.md b/tokenizer.md
index 611af19..b8a803c 100644
--- a/tokenizer.md
+++ b/tokenizer.md
@@ -1,3 +1,4 @@
+
# DETR 的视觉 token 化过程说明
本文基于当前项目代码 `app/detector.py` 中的实现说明 DETR 的“token 化”过程。
@@ -58,19 +59,39 @@ projected feature map: [batch, 256, H', W']
↓
flatten 空间维度 H' × W'
↓
-visual tokens: [batch, H'×W', 256]
+visual token embeddings: [batch, H'×W', 256]
↓
-加入二维位置编码
+加入二维位置 embedding
↓
Transformer Encoder
↓
-Object Queries + Transformer Decoder
+Object query embeddings + Transformer Decoder
↓
类别 logits + 边界框 boxes
↓
post_process_object_detection 还原到原图坐标
```
+## Embedding 在 1-11 个环节中的位置
+
+在这个 DETR 流程里，embedding 不是单独只有一步，而是出现在 3 个关键环节：
+
+| 页面步骤 | 名称 | embedding 含义 |
+| --- | --- | --- |
+| 第 6 步 | visual token embedding | `projected feature map` 经过 flatten 后，每个空间网格点变成一个 256 维视觉 token embedding。 |
+| 第 7 步 | position embedding | 给每个视觉 token 加入二维位置 embedding，让 Transformer 知道 token 原本在图像中的位置。 |
+| 第 9 步 | object query embedding | DETR 使用一组可学习的 object query embeddings 进入 Decoder，每个 query 最终预测一个候选目标。 |
+
+所以如果问“embedding 在 1-11 哪个环节”，最核心的是：
+
+```text
+第 6 步：产生视觉 token embedding
+第 7 步：加入位置 embedding
+第 9 步：object query embedding 进入 Decoder
+```
+
+第 6 步是图像内容 embedding，第 7 步是空间位置 embedding，第 9 步是检测目标查询 embedding。
+
## 第 1 步：图像预处理
代码：
@@ -212,7 +233,7 @@ x = x.permute(2, 0, 1) # [h*w, batch, 256]
两种写法本质相同，只是 Transformer 接口期望的维度顺序不同。
-## 第 5 步：加入二维位置编码
+## 第 5 步：加入二维位置 embedding
Transformer 本身不理解图像中的二维空间位置。
@@ -264,11 +285,11 @@ Encoder 会通过 self-attention 建模图像中不同区域之间的关系。
- 道路区域可以影响车辆判断。
- 远处小目标可以和周围上下文一起被理解。
-## 第 7 步：Object Queries 和 Transformer Decoder
+## 第 7 步：Object query embedding 和 Transformer Decoder
DETR 与传统检测器不同，它不是先生成大量 anchor box。
-它使用一组可学习的 object queries。常见数量是：
+它使用一组可学习的 object query embeddings。常见数量是：
```text
100 个 object queries
+ {% for device_item in video_grid_devices %}
+
+
+ {% endfor %}
+ 暂无目标
+
+
+
+
+ 实时展示当前视频帧从图像预处理、视觉特征、token 序列到检测输出的过程。
+