Present Tensor in Space
English | 中文
图1 - 使用 TensorSpace 创建的交互式 LeNet 模型
## 目录 * [TensorSpace 使用场景](#motivation) * [开始使用](#getting-start) * [Awesome TensorSpace](https://github.com/tensorspace-team/tensorspace/blob/master/awesome-tensorspace.md) * [使用样例](#example) * [文档](#documentation) * [更新日志](https://github.com/tensorspace-team/tensorspace/blob/master/CHANGELOG.md) * [开发人员](#contributors) * [联系方式](#contact) * [许可证](#license) * [下集预告](#next) ##
图2 - TensorSpace 使用流程
### 1. 安装 #### 基本使用场景下安装 - 第一步：下载依赖库 下载依赖库文件 TensorFlow.js ([tf.min.js](https://cdnjs.com/libraries/tensorflow))，Three.js ([three.min.js](https://cdnjs.com/libraries/three.js))，Tween.js ([tween.min.js](https://cdnjs.com/libraries/tween.js))，TrackballControls ([TrackballControls.js](https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js))。 - 第二步：下载 TensorSpace 可以通过这些途径下载 `tensorspace.min.js`： [Github](https://github.com/tensorspace-team/tensorspace/tree/master/dist), [NPM](https://www.npmjs.com/package/tensorspace)， [TensorSpace 网站](https://tensorspace.org/#download)，或者 CDN： ```html ``` - 第三步：在页面中引入库文件 ```html ``` #### 在渐进式框架中安装 - 第一步： 安装 TensorSpace - 途径一: NPM ```bash npm install tensorspace ``` - 途径二: Yarn ```bash yarn add tensorspace ``` - 第二步： 引入 TensorSpace ```javascript import * as TSP from 'tensorspace'; ``` 这个 [Angular 样例](https://github.com/tensorspace-team/tensorspace/tree/master/examples/helloworld-angular) 具体展示了如何使用。 ### 2. 模型预处理 在应用 TensorSpace 可视化之前，需要完成一个重要的步骤————对预训练模型进行预处理（通过 [这篇介绍](https://tensorspace.org/html/docs/preIntro_zh.html) 可以了解更多有关 TensorSpace 预处理的概念与原理）。[TensorSpace-Converter](https://github.com/tensorspace-team/tensorspace-converter) 可以帮助开发者快速完成 TensorSpace 预处理过程的辅助工具。 举个例子，如果现在有一个 [tf.keras model](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/rawModel) 的模型，我们可以使用以下 TensorSpace-Converter 转化脚本快速将 tf.keras 模型转化成 TensorSpace 兼容的格式： ```shell $ tensorspacejs_converter \ --input_model_from="tensorflow" \ --input_model_format="tf_keras" \ --output_layer_names="padding_1,conv_1,maxpool_1,conv_2,maxpool_2,dense_1,dense_2,softmax" \ ./PATH/TO/MODEL/tf_keras_model.h5 \ ./PATH/TO/SAVE/DIR ``` **注意：** * 在使用 TensorSpace-Converter 对预训练的模型进行预处理之前，需要下载 `tensorspacejs` 的 pip 包，并且配置 TensorSpace-Converter 的运行环境。 * 基于不同的机器学习库，我们提供了 [TensorFlow 模型预处理教程](https://tensorspace.org/html/docs/preTf_zh.html)，[Keras 模型预处理教程](https://tensorspace.org/html/docs/preKeras_zh.html)，[TensorFlow.js 模型预处理教程](https://tensorspace.org/html/docs/preTfjs_zh.html)。 * 查看 [TensorSpace-Converter 仓库](https://github.com/tensorspace-team/tensorspace-converter) 了解更多有关 TensorSpace-Converter 的使用细节。
图3 - TensorSpace-Converter 使用流程
### 3. 使用 TensorSpace 可视化模型 在成功安装完成 TensorSpace 并完成神经网络模型预处理之后，我们可以来创建一个3D TensorSpace 模型。 我们将使用 [HelloWorld](https://github.com/tensorspace-team/tensorspace/tree/master/examples/helloworld) 路径下的资源，其中包括[适配 TensorSpace 的预处理模型](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/convertedModel) 以及[样例输入数据（“5”）](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/data/5.json)作为使用样例来进行说明。所有的源码都可以在 [helloworld.html](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/helloworld.html) 文件中找到。 首先，我们需要新建一个 TensorSpace 模型实例： ```JavaScript let container = document.getElementById( "container" ); let model = new TSP.models.Sequential( container ); ``` 然后，基于 LeNet 网络的结构：输入层 + Padding2d层 + 2 X (Conv2D层 & Maxpooling层) + 3 X (Dense层)，我们可以搭建其模型结构： ```JavaScript model.add( new TSP.layers.GreyscaleInput() ); model.add( new TSP.layers.Padding2d() ); model.add( new TSP.layers.Conv2d() ); model.add( new TSP.layers.Pooling2d() ); model.add( new TSP.layers.Conv2d() ); model.add( new TSP.layers.Pooling2d() ); model.add( new TSP.layers.Dense() ); model.add( new TSP.layers.Dense() ); model.add( new TSP.layers.Output1d({ outputs: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] }) ); ``` 最后，我们需要载入[经过预处理的 TensorSpace 适配模型](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/convertedModel)并使用`init()`方法来创建模型对象： ```JavaScript model.load({ type: "tensorflow", url: './PATH/TO/MODEL/model.json' }); model.init(function(){ console.log("Hello World from TensorSpace!"); }); ``` 我们可以在浏览器中看到以下模型：
图4 - 所创建的 LeNet 模型 (无输入数据）
我们可以使用我们已经提取好的[手写“5”](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/data/5.json)作为模型的输入： ``` model.init(function() { model.predict( image_5 ); }); ``` 我们在这里将预测方法放入`init()`的回调函数中以确保预测在初始化完成之后进行([在线演示](https://tensorspace.org/html/helloworld.html))。 点击后面这个CodePen logo来在CodePen中试一下这个例子吧 ~
图5 - LeNet 模型判别输入 “5”
##
图6 - 使用 TensorSpace 构建 LeNet
* **AlexNet** [ TensorFlow 模型 ] [➡ 在线演示](https://tensorspace.org/html/playground/alexnet_zh.html)
图7 - 使用 TensorSpace 构建 AlexNet
* **Yolov2-tiny** [ TensorFlow 模型 ] [➡ 在线演示](https://tensorspace.org/html/playground/yolov2-tiny_zh.html)
图8 - 使用 TensorSpace 构建 YOLO-v2-tiny
* **ResNet-50** [ Keras 模型 ] [➡ 在线演示](https://tensorspace.org/html/playground/resnet50_zh.html)
图9 - 使用 TensorSpace 构建 ResNet-50
* **Vgg16** [ Keras 模型 ] [➡ 在线演示](https://tensorspace.org/html/playground/vgg16_zh.html)
图10 - 使用 TensorSpace 构建 VGG-16
* **ACGAN** [ Keras 模型 ] [➡ 在线演示](https://tensorspace.org/html/playground/acgan_zh.html)
图11 - 使用 TensorSpace 构建 ACGAN 生成网络
* **MobileNetv1** [ Keras 模型 ] [➡ 在线演示](https://tensorspace.org/html/playground/mobilenetv1_zh.html)
图12 - 使用 TensorSpace 构建 MobileNetv1
* **Inceptionv3** [ Keras 模型 ] [➡ 在线演示](https://tensorspace.org/html/playground/inceptionv3_zh.html)
图13 - 使用 TensorSpace 构建 Inceptionv3
* **LeNet训练过程3D可视化** [ TensorFlow.js 动态模型 ] 使用 TensorSpace.js 和 TensorFlow.js 将 LeNet 的训练过程在浏览器端进行3D可视化展示 [➡ 在线演示](https://tensorspace.org/html/playground/trainingLeNet_zh.html)
图14 - LeNet训练过程3D可视化
### 本地查看以上模型 有些模型非常大，使用官网的`Playground`载入非常慢。如果你想获得更好的载入速度，把`TensorSpace`项目拷贝到本地是一个好选择 - 第一步：`Clone` 项目文件夹到任意文件夹（无系统要求，这一步时间较长，大约2GB大小，都是预训练模型） ```bash git clone https://github.com/tensorspace-team/tensorspace.git ``` - 第二步：本地使用 `WebStorm` 打开项目 - 第三步：打开 `/examples` 文件夹，点选任意模型的 `.html` 文件（比如`/exampes/resnet50/resnet50.html`） - 第四步：点击**右上角**的Chrome图表在本地运行`.html` 文件（`js` 和 `css` ）直接可以在本地浏览器内查看对应模型 ##
Present Neural Network in VR
图15 - TensorSpace VR Demo