COMPUTER VISION · ADVANCED

计算机视觉进阶可视化实验室

从目标检测到 NeRF,8 大前沿方向的可交互 SVG 可视化。每个模块包含原理动画、参数控件与实时统计,帮助你直观理解深度视觉模型的核心机制。

8 模块 0 依赖 纯 HTML/CSS/JS + SVG 主色 #5e6ad2
01 · OBJECT DETECTION

目标检测 — YOLO / DETR

检测框回归、Anchor 先验框采样与 NMS 非极大值抑制的全流程可视化。观察候选框如何被置信度过滤、IoU 去重,最终保留高置信检测。

svg · realtime DETECTING
置信度阈值 0.50

原理说明

YOLO 将图像划为网格,每格预测 B 个 Anchor 框的偏移与类别;DETR 则用 Transformer 直接输出集合预测。两者最终都经 NMS 去除重叠框:按置信度排序,依次保留 IoU 低于阈值的框。拖动阈值可实时看到候选框被过滤的过程。

0
候选框
0
保留框
0.00
平均 IoU
0fps
推理速度
02 · SEMANTIC SEGMENTATION

语义分割 — FCN / U-Net / DeepLab

逐像素分类的可视化:编码器下采样提取特征,解码器上采样恢复分辨率,跳跃连接融合细节。观察像素如何被归入不同语义类别。

pixel-wise U-NET
分辨率 20

原理说明

FCN 首次用卷积替代全连接实现端到端像素预测;U-Net 以对称编解码 + 跳跃连接擅长医学小样本;DeepLab 引入空洞卷积扩大感受野并使用 ASPP 多尺度聚合。下方色块即每个像素的类别归属。

0
像素数
5
类别数
0.0%
mIoU
0.0%
像素精度
03 · INSTANCE SEGMENTATION

实例分割 — Mask R-CNN

RoI Align 将不同尺寸候选区对齐为固定网格,再逐像素生成实例掩码。每个实例拥有独立 ID 与掩码,区分同类的不同个体。

roi · mask RoI ALIGN
RoI 网格 7×7

原理说明

Mask R-CNN 在 Faster R-CNN 基础上增加掩码分支。RoI Align 用双线性插值替代 RoI Pool 的量化取整,消除小目标错位;每个 RoI 输出 K×m×m 掩码(K 类),通过阈值化得到实例轮廓。

0
实例数
0px
掩码像素
0.0%
Mask AP
0ms
RoI 延迟
04 · KEYPOINT DETECTION

关键点检测 — 姿态估计 / PAF

热图回归定位人体关节,PAF(部分亲和场)向量场连接相邻关键点形成骨架。观察热图峰值如何转化为关键点坐标。

heatmap · paf HEATMAP
姿态 A

原理说明

热图回归对每个关键点输出一张概率图,取峰值即坐标。OpenPose 额外预测 PAF——连接两个关键点的 2D 向量场,通过匹配积分判定骨骼归属,可在多人场景下拼出完整骨架。

17
关键点
0
骨骼连接
0.0%
OKS
0.00
平均置信度
05 · VISION TRANSFORMER

视觉 Transformer — ViT

图像切分为 Patch 序列,经线性嵌入加位置编码送入 Transformer。可视化注意力如何在不同 Patch 间流动聚合全局信息。

patch · attention ATTN
Patch 8×8
Layer L3

原理说明

ViT 将 H×W 图像切为 N 个 Patch,每个 Patch 线性投影为 token 并叠加位置编码。自注意力 QKᵀ/√d 计算全局依赖,多头机制关注不同子空间。点击 Patch 可查看其对全图的注意力分布。

0
Token 数
8
注意力头
0.00
注意力熵
0
Top-1 Patch
06 · OPTICAL FLOW

光流估计 — FlowNet / 能量最小化

两帧间像素的运动向量场。FlowNet 端到端回归位移,遮挡区域由前向-后向一致性检测,能量最小化保证流场平滑。

flow field FLOWNET
时间帧 t0

原理说明

光流假设像素亮度恒定:I(x,t)=I(x+v,t+1)。FlowNet 用编解码 CNN 直接回归密集位移;经典变分法通过 数据项 + 平滑项 能量泛函迭代最小化。遮挡由前后向流不一致区域标定。

0
流向量
0.0px
平均位移
0%
遮挡率
0.00
EPE 误差
07 · IMAGE GENERATION

图像生成 — StyleGAN 潜空间

W 潜空间插值生成连续人脸,风格混合将粗 / 细层向量来自不同样本。观察潜在向量如何在流形上平滑过渡。

latent · style STYLEGAN
插值 0.50

原理说明

StyleGAN 将 z∈Z 经映射网络变为 w∈W+,每个卷积层以 AdaIN 注入独立风格。风格混合 让不同层取自不同 w,可组合粗结构(姿态/脸型)与细纹理(发色/肤色)。W 空间比 Z 更线性、更利于插值。

512
W 维度
18
风格层
0.0
FID ↓
0%
混合比例
08 · 3D RECONSTRUCTION

3D 重建 — 多视图立体 / NeRF

多视图立体重建从 2D 视图恢复深度;NeRF 用 MLP 拟合辐射场,体密度积分渲染任意视角。观察体积的旋转与深度融合。

nerf · mvs NeRF
视角 30°

原理说明

MVS 对多视角图像做特征匹配 + 深度图融合得到点云/网格。NeRF 则用 MLP F(x,d)=(σ,c) 拟合体积密度与颜色,沿射线积分:C(r)=∫T(t)σc dt。拖动视角可实时旋转体渲染结果。

0
训练视角
0
采样点
0.0dB
PSNR
0
迭代步