TensorSpace 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
TensorSpace 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: Apache
开发语言: JavaScript 查看源码 »
操作系统: 跨平台
收录时间: 2018-11-15
提 交 者: HelloGio

TensorSpace 是一套用于构建神经网络3D可视化应用的框架。 开发者可以使用类 Keras 风格的 TensorSpace API,轻松创建可视化网络、加载神经网络模型并在浏览器中基于已加载的模型进行3D可交互呈现。 TensorSpace 可以使您更直观地观察神经网络模型,并了解该模型是如何通过中间层 tensor 的运算来得出最终结果的。 TensorSpace 支持3D可视化经过适当预处理之后的 TensorFlow、Keras、TensorFlow.js 模型。

图1 - 使用 TensorSpace 创建的交互式 LeNet 模型

使用场景及特性

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

通过使用 TensorSpace,可以更直观地观察并理解基于 TensorFlow、Keras 以及 TensorFlow.js 开发的神经网络模型。 从工业开发的角度来看,TensorSpace 降低了前端深度学习可视化相关应用的开发门槛。总的来说,TensorSpace 具有以下特性:

  • 交互 -- 使用类 Keras 的 API,在浏览器中构建可交互的3D可视化模型。

  • 直观 -- 观察并展示模型中间层预测数据,直观演示模型推测过程。

  • 集成 -- 支持使用 TensorFlow、Keras 以及 TensorFlow.js 训练的模型。

开始使用

图2 - TensorSpace 开发流程图

首先我们可以通过 NPM 或者 YARN 下载最新的 TensorSpace.js。

npm install tensorspace --save
yarn add tensorspace

TensorSpace.js 支持可视化基于 TensorFlow、Keras 以及 TensorFlow.js 训练的神经网络模型,不过在可视化这些模型之前,需要对模型进行适当的预处理,生成 TensorSpace兼容模型。针对不同的深度学习模型训练库,我们分别提供了相应的预处理教程 TensorFlow模型预处理教程Keras模型预处理教程TensorFlow.js模型预处理教程

接下来将通过快速构建一个3D的 LeNet 模型,来展示 TensorSpace 的开发流程。这个例子中要用到的所有代码文件和资源文件都可以在 TensorSpace Github 仓库的 examples/helloworld 文件夹下找到。同时为了着重展示如何使用 TensorSpace.js 的 API,我们提前使用 TensorFlow.js 训练了一个 LeNet模型,完成了预处理过程,并且准备了好了 预测数据

在使用 TensorSpace.js 的API 之前,需要在 HTML 页面中添加了 TensorSpace.js 及其依赖库(TensorFlow.js, Three.js, Tween.js, TrackballControl.js),然后创建一个 Div 作为 TensorSpace 模型的渲染容器。


在页面中添加以下 Javascript 代码,使用 TensorSpace.js 提供的 API 构建模型,载入经过预处理的模型,作出预测并展示。

// 创建 TensorSpace 模型  
let modelContainer = document.getElementById("container");    
let model = new TSP.models.Sequential(modelContainer);    

// 根据 LeNet 结构为 TensorSpace 模型添加网络层     
// Input + 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"]    
}));    

// 载入经过预处理的 LeNet 模型    
model.load({        
    type: "tfjs",        
    url: "PATH_TO_MODEL/mnist.json"    
});        

// 渲染模型并预测    
model.init(function() {        
    console.log("Hello World from TensorSpace!");        
    model.predict(data5);    
});

如果一切顺利,打开浏览器,将会看到如 图3 所示的模型。在构建完成模型后,可对模型进行交互操作,比如打开关闭网络层,控制3D场景视角等。

这个 LeNet 的 demo 同时被 host 了在 CodePen 中,点击这个 链接 到 CodePen 中在线体验一下吧~

图3 - LeNet 模型判别输入5

应用展示

这部分将展示一些基于 TensorSpace 开发的3D可视化神经网络模型实例。通过这些实例,可以体验不同的可交互模型,包括但不限于:物体分类、物体探测、图片生成等。我们希望通过展示这些模型实例,来更好、更直观地体现 TensorSpace 的应用场景、操作方法以及展示效果。

点击在线演示链接可以进入 TensorSpace 官网的 playground 查看对应模型的在线应用。考虑到部分模型的大小较大(例如:VGG-16 > 500MB,AlexNet > 250MB)以及网络加载速度,部分模型可能需要较长的加载时间。同时,为了有更好的 UI 交互体验,我们强烈建议在中型或者大型屏幕(宽度大于750px)中打开在线演示链接。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

TensorSpace 的相关资讯

还没有任何资讯

TensorSpace 的相关博客

TensorSpace:超酷炫3D神经网络可视化框架

TensorSpace - 一款 3D 模型可视化框架,支持多种模型,帮助你可视化层间输出,更直观地展示模型的输入输出,帮助理解模型结构...

TensorSpace:超酷炫3D神经网络可视化框架

是什么(What) TensorSpace 是一款 3D 模型可视化框架,一动图胜千言。 官网链接: https://tensorspace.org/ Github链接: ...

CNN结构设计和可视化工具

整理盘点常用的神经网络结构可视化工具 一共盘点22个cnn可视化工具,其各有特点,我也只用过其中的两三个。 例如: •PlotNeu...

大盘点 | 22 款神经网络设计和可视化的工具汇总

点击上方“AI算法与图像处理”,选择加"星标"或“置顶” 重磅干货,第一时间送达 来源算法猿的成长 总第 143 篇文章,本文大约...

22 款设计和可视化神经网络的工具

点击上方“算法猿的成长“,关注公众号,选择加“星标“或“置顶” 总第 143 篇文章,本文大约 3000 字,阅读大约需要 10 分钟...

开源中国 2018 新增开源软件最受欢迎 TOP 50

来源:开源中国 本周开源中国陆续公布了两个年度榜单,分别是国产新秀榜 TOP 30 和国产新增榜 TOP 50。由于两个榜单的数据来源...

开源中国 2018 新增开源软件最受欢迎 TOP 50

本周开源中国陆续公布了两个年度榜单,分别是国产新秀榜 TOP 30 和国产新增榜 TOP 50。由于两个榜单的数据来源都是国内开源项...

TensorSpace 的相关问答

还没有任何问答,马上提问

评论 (4)

加载中
这是什么?
2019/01/22 10:50
回复
举报
这个演示看的我一愣一愣的,每个演示都一样,有断层。
2018/11/29 11:36
回复
举报
牛逼,很炫,但感觉没什么用
2018/11/19 15:20
回复
举报
这个要是拿来给外行做演示,肯定牛比刹了! 估计能看得他们一愣一愣的,哈哈哈!
2018/11/17 09:30
回复
举报
更多评论
4 评论
90 收藏
分享
返回顶部
顶部