TensorSpace.js
Present Tensor in Space
English | 中文
TensorSpace是一套用于构建神经网络3D可视化应用的框架。 开发者可以使用类Keras风格的TensorSpace API,轻松创建可视化网络、加载神经网络模型并在浏览器中基于已加载的模型进行3D可交互呈现。 TensorSpace可以使您更直观地观察神经网络模型,并了解该模型是如何通过中间层 tensor 的运算来得出最终结果的。 TensorSpace 支持3D可视化经过适当预处理之后的 TensorFlow、Keras、TensorFlow.js 模型。
图1 - 使用 TensorSpace 创建的交互式 LeNet 模型
目录
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.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!"); });
我们可以在浏览器中看到以下模型:
图2 - 所创建的 LeNet 模型 (无输入数据)
我们可以使用我们已经提取好的 手写“5” 作为模型的输入:
model.init(function() { model.predict( image_5 ); });
我们在这里将预测方法放入 init()
的回调函数中以确保预测在初始化完成之后进行( 在线演示 )。
点击后面这个CodePen logo来在CodePen中试一下这个例子吧 ~
图3 - LeNet 模型判别输入 “5”
样例展示
- LeNet
图4 - 使用 TensorSpace 构建 LeNet
- AlexNet
图5 - 使用 TensorSpace 构建 AlexNet
- Yolov2-tiny
图6 - 使用 TensorSpace 构建 YOLO-v2-tiny
- ResNet-50
图7 - 使用 TensorSpace 构建 ResNet-50
- Vgg16
图8 - 使用 TensorSpace 构建 VGG-16
- ACGAN
图9 - 使用 TensorSpace 构建 ACGAN 生成网络
- MobileNetv1
图10 - 使用 TensorSpace 构建 MobileNetv1 生成网络
文档
- 迅速开始使用,参阅 开始使用 。
- 下载并安装,查看 下载 。
- 了解更多 基本概念 。
- 如何使用神经网络模型,查看 模型预处理 。
- 了解核心组成构件: 模型 、 网络层 以及 网络层融合 。
- 希望获取更多 TensorSpace 的信息,请访问 TensorSpace 官方网站 TensorSpace.org 。
更新日志
开发人员
|
|
|
|
---|
联系方式
若有任何疑问,欢迎通过以下方式联系我们:
- Email: tensorspaceteam@gmail.com
- GitHub Issues: create issue
- Slack: #questions
- Gitter: #Lobby
许可证
以上所述就是小编给大家介绍的《TensorSpace.js:用于构建神经网络 3D 可视化应用的框架》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- PyTorch可视化卷积神经网络
- 可视化探索卷积神经网络提取特征
- PyTorch可视化理解卷积神经网络
- 通过可视化隐藏表示,更好地理解神经网络
- NeurIPS 2018提前看:可视化神经网络泛化能力
- 通过可视化体验人工智能神经网络工具——TensorFlow PlayGround来认识神经网络
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。