tensorspace
用 Three.js 在浏览器里3D交互展示神经网络结构的开源可视化框架
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
用 Three.js 在浏览器里3D交互展示神经网络结构的开源可视化框架
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
TensorSpace Logo
想象一下，你正在学习一台精密轿车的构造——4S店给你两个选择：一份密密麻麻的零件手册，或者一台可以360度旋转、拆解、放大每一个零件的3D实车模型。绝大多数人都会选后者。TensorSpace.js 正是为神经网络学习者准备的「3D实车模型」——它能把一个黑箱般的深度学习模型，变成浏览器里可以交互旋转、点击、放大的可视化网络。
2017年前后，深度学习开始井喷式普及，TensorFlow、Keras、PyTorch 等框架相继成熟。但对于刚入门的新手而言，神经网络的学习曲线陡峭得令人沮丧——代码写好了，训练跑通了，却没人知道模型「里面」到底在干什么。中间层的特征图长什么样？数据在每一层之间经历了怎样的变换？为什么加一层卷积就能提升准确率？
传统的可视化方案大多止步于静态图表：画出网络结构图（Graphviz）、绘制训练曲线（loss/accuracy），这些方法只能展示「结果」，无法呈现「过程」。开发者社区迫切需要一种能够直观展示神经网络内部运作机制的工具。
TensorSpace.js 正是在这一背景下由 tensorspace-team（GitHub @syt123450 等贡献者）发起，它的核心思路是：既然浏览器已经能跑 WebGL 3D 渲染，为什么不把神经网络画成 3D 图形？
TensorSpace 提供了一套精心设计的 Layer API，开发者可以像搭建乐高一样，用代码描述一个神经网络的结构。每一个 Layer（层）对应神经网络中的一个组成部分：
每个 Layer 不仅负责自己的 3D 几何呈现，还承载着对应的张量（tensor）数据流动。当模型在推理时，TensorSpace 会实时渲染每一层的激活值变化，用户能亲眼看到一张「猫」的图片是如何一步步经过各层变换，最终被识别为「猫」的概率逐渐上升。
这种交互式的「过程可视化」，是 TensorSpace 区别于所有静态图表工具的根本价值。用户不再只能「读」网络，而是可以「玩」网络——旋转视角查看残差连接的走向，点击某层查看特征图的激活热力图，调整参数观察输出变化。
图1：TensorSpace 可视化 VGG16 网络结构
TensorSpace 的技术选型非常务实：
前端渲染层：基于 Three.js（一个成熟的 WebGL 3D 渲染引擎），负责把网络结构用 3D 几何体绘制出来。Three.js 提供了丰富的 3D 原语（立方体、球体、圆柱体、线框）和相机控制（轨道旋转、缩放、平移），这正是构建复杂网络拓扑所需的基础能力。
数据流层：深度集成 TensorFlow.js（@tensorflow/tfjs），直接读取 TensorFlow/Keras 导出的模型权重文件（通过 ts-converter 预转换），将模型的中间层输出实时注入到对应的 Layer 中。
动画层：使用 Tween.js 实现流畅的过渡动画，让数据流动和层激活的变化看起来自然、连贯。
打包层：项目使用 Rollup 进行多格式打包，输出兼容 CommonJS（tensorspace.cjs.js）、ES Module 以及 UMD 格式，适配从 Node.js 项目到纯静态网页的各种使用场景。
图2：TensorSpace 展示 LeNet 模型训练过程中各层激活变化
TensorSpace 并不直接加载原生 TensorFlow/Keras 模型文件，而是需要通过配套工具 ts-converter 将模型预先转换为中间格式（.h5 转 JSON + binary 的中间表示）。这一设计巧妙地解耦了前端渲染和后端训练：
转换完成后，用户只需几行代码即可在浏览器中加载并渲染。以下是一个 LeNet 模型的完整示例：
import TensorSpace from 'tensorspace';
const model = new TSP.models.Sequential(space, {
features: { shape: [28, 28, 1] }
});
model.add(new TSP.layers.Grey2RGB());
model.add(new TSP.layers.Conv2d({ kernelSize: 3, filters: 6 }));
model.add(new TSP.layers.Pooling2d({ poolSize: [2, 2] }));
model.add(new TSP.layers.Dense({ units: 10 }));
model.add(new TSP.layers.Output1d({ units: 10 }));
space.render();
图3：TensorSpace 呈现 AlexNet 的多分支并行结构
除了核心库，TensorSpace 仓库还提供了大量预置模型的可视化示例，堪称一部「神经网络百科全书」：
| 模型 | 类型 | 可视化特点 |
|---|---|---|
| LeNet | 经典CNN | 极简结构，适合入门 |
| AlexNet | ImageNet冠军 | 多 GPU 分支结构一目了然 |
| VGG16 | VGG 系列 | 深层堆叠的卷积核结构 |
| ResNet50 | 残差网络 | 跳跃连接可视化是其亮点 |
| YOLOv2 | 目标检测 | 锚框和 bounding box 可视化 |
| MobileNetV1 | 轻量模型 | 深度可分离卷积的结构优势清晰可见 |
| InceptionV3 | 多尺度 | 并行 Inception Module 的复杂拓扑 |
| ACGAN | 条件生成对抗网络 | 生成器/判别器的对抗博弈可视化 |
这些预置案例不仅展示了 TensorSpace 的技术能力，更是深度学习教学和科普的宝贵资源。
图4：ResNet50 的残差跳跃连接（skip connection）清晰可见
TensorSpace 的定位介于「前端开发者工具」和「AI 教学平台」之间：
适合的用户：
门槛较高的用户：
好在 TensorSpace 提供了 CodePen 集成，用户无需安装任何依赖，直接在 CodePen 中修改示例代码即可看到效果，大幅降低了试玩门槛。
图5：TensorSpace 提供 CodePen 在线编辑示例，零配置即可体验
没有工具是完美的，TensorSpace 也有其局限性：
1. 模型转换的版本依赖问题：ts-converter 对 TensorFlow/Keras 版本有严格限制。很多新版模型（如 TensorFlow 2.x 的 SavedModel）需要特定版本的转换器，版本不匹配会导致转换失败。这让项目的维护成本上升，且官方维护频率不高。
2. 浏览器性能瓶颈：3D 渲染和大规模张量计算都吃内存和 GPU。对于深层网络（如 ResNet152）或大批量推理，浏览器端的渲染帧率可能下降到难以接受的程度。
3. 活跃度下降：从 GitHub 的提交记录看，项目在 2022 年后活跃度明显降低，最后一次 release 为 v0.6.1，与 TensorFlow 2.x 及更新 Keras 版本的适配存在一定脱节。
4. 移动端体验一般：3D WebGL 在移动端浏览器的兼容性不如桌面端，部分动画效果在手机上可能卡顿。
TensorSpace 的价值不仅在于技术本身，更在于它代表了一种「让AI更透明」的理念。
2023-2024年，随着大语言模型（LLM）成为主流，可解释性（Explainability）和可解释AI（XAI）领域迎来爆发式增长。学术界和工业界都在追问：模型决策的依据是什么？中间层在做什么？TensorSpace 早在2018年就给出了方向性回答——用3D交互的方式，让神经网络不再是一个黑箱。
对于整个AI开发生态而言，TensorSpace 的贡献是：它证明了前端技术与AI结合的可行性。Three.js + TensorFlow.js 的组合打开了「在浏览器里跑AI」的想象空间，为后续的 ONNX.js、WebLLM 等更强大的浏览器端AI推理引擎铺平了道路。
截至目前，TensorSpace 在 GitHub 上拥有 5174 Stars、450+ Forks，涵盖 3D、深度学习、机器学习、可视化等多个领域，是该细分方向最知名的开源项目之一。
图6：MobileNetV1 的深度可分离卷积结构清晰可辨
如果你正在学习深度学习、或者需要向他人解释神经网络的运作原理，TensorSpace.js 是一款值得收藏到工具箱里的利器。它不完美，但它打开的那扇「3D透视神经网络的窗户」，至今无人能完全替代。