TensorSpace 使用场景

TensorSpace 基于 TensorFlow.js、Three.js 和 Tween.js 开发，用于对神经网络进行3D可视化呈现。通过使用 TensorSpace，不仅仅能展示神经网络的结构，还可以呈现网络的内部特征提取、中间层的数据交互以及最终的结果预测等一系列过程。

通过使用 TensorSpace，可以帮助您更直观地观察并理解基于TensorFlow、Keras或者TensorFlow.js开发的神经网络模型。 TensorSpace 降低了前端开发者进行深度学习相关应用开发的门槛。 我们期待看到更多基于 TensorSpace 开发的3D可视化应用。

• 交互 -- 使用类 Keras 的API，在浏览器中构建可交互的3D可视化模型。
• 直观 -- 观察并展示模型中间层预测数据，直观演示模型推测过程。
• 集成 -- 支持使用 TensorFlow、Keras 以及 TensorFlow.js 训练的模型。

开始使用

TensorSpace 开发流程图

安装

• 第一步: 下载 TensorSpace.js

我们提供了三种下载 TensorSpace.js 的方法，它们分别是 npm、yarn 以及 来自官方网站。

途径 1: NPM

npm install tensorspace

途径 2: Yarn

yarn add tensorspace

途径 3: 官方网站下载

• 第二步: 安装依赖库

请在使用 TensorSapce.js 之前，引入TensorFlow.js、 Three.js、 Tween.js 和 TrackballControl.js 至所需要的 html 文件中，并置于 TensorSpace.js 的引用之前。

<script src="tf.min.js"></script>
<script src="three.min.js"></script>
<script src="tween.min.js"></script>
<script src="TrackballControls.js"></script>

• 第三步: 安装 TensorSpace.js

将 TensorSpace.js 引入 html 文件中：

<script src="tensorspace.min.js"></script>

模型预处理

为了获得神经网络中间层的运算结果，我们需要对已有的模型进行模型预处理。

基于不同的机器学习库，我们提供了 TensorFlow 模型预处理教程、Keras 模型预处理教程 以及 TensorFlow.js 模型预处理教程。

使用

在成功安装完成 TensorSpace 并完成神经网络模型预处理之后，我们可以来创建一个3D TensorSpace 模型。

为了简化步骤，请随意使用我们在 HelloWorld 路径下所提供的资源。

我们将会用到适配 TensorSpace 的预处理模型 以及样例输入数据（“5”）作为使用样例来进行说明。所有的源码都可以在 helloworld.html 文件中找到。

首先，我们需要新建一个 TensorSpace 模型实例：

let container = document.getElementById( "container" );
let model = new TSP.models.Sequential( container );

然后，基于 LeNet 网络的结构：输入层 + 2 X (Conv2D层 & Maxpooling层) + 3 X (Dense层)，我们可以搭建其模型结构：

model.add( new TSP.layers.GreyscaleInput({ shape: [28, 28, 1] }) );
model.add( new TSP.layers.Padding2d({ padding: [2, 2] }) );
model.add( new TSP.layers.Conv2d({ kernelSize: 5, filters: 6, strides: 1 }) );
model.add( new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }) );
model.add( new TSP.layers.Conv2d({ kernelSize: 5, filters: 16, strides: 1 }) );
model.add( new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }) );
model.add( new TSP.layers.Dense({ units: 120 }) );
model.add( new TSP.layers.Dense({ units: 84 }) );
model.add( new TSP.layers.Output1d({
 units: 10,
 outputs: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
}) );

最后，我们需要载入经过预处理的 TensorSpace 适配模型并使用init()方法来创建模型对象：

model.load({
 type: "tfjs",
 url: './lenetModel/mnist.json'
});
model.init(function(){
 console.log("Hello World from TensorSpace!");
});

我们可以在浏览器中看到以下模型：

所创建的 LeNet 模型 (无输入数据）

演示

使用 TensorSpace 构建 AlexNet

使用 TensorSpace 构建 YOLO-v2-tiny

资源地址

• 中文官网: https://tensorspace.org/index_zh.html
• TensorSpace 在线3D深度学习模型: https://tensorspace.org/html/playground/index_zh.html
• 项目地址：https://github.com/tensorspace-team/tensorspace