「开源」TensorSpace.js -- 神经网络3D可视化框架，在浏览器端构建可交互模型

时间 2019-11-05

标签开源 tensorspace.js tensorspace 神经网络 3d 可视化框架浏览器构建交互模型栏目 JavaScript 繁體版

原文原文链接

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

Github 地址： github.com/tensorspace…
中文官网: tensorspace.org/index_zh.ht…
TensorSpace 在线3D深度学习模型: tensorspace.org/html/playgr…

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

使用场景及特性

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

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

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

开始使用

图2 - TensorSpace 开发流程图 github

首先咱们能够经过 NPM 或者 YARN 下载最新的 TensorSpace.js。shell

npm install tensorspace --save
复制代码

yarn add tensorspace
复制代码

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

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

在使用 TensorSpace.js 的API 以前，须要在 HTML 页面中添加了 TensorSpace.js 及其依赖库（TensorFlow.js, Three.js, Tween.js, TrackballControl.js），而后建立一个 Div 做为 TensorSpace 模型的“渲染容器”。浏览器

<!DOCTYPE HTML>
<html>
<head>
    <!-- 引入依赖 TensorFlow.js, Three.js, Tween.js 和 TrackballControls.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 -->
    <script src="tensorspace.min.js"></script>
</head>
<body>
  <!-- 建立一个 div 做为3D网络的绘制容器 -->
  <div id="modelArea"></div>
</body>
</html>
复制代码

在页面中添加如下 Javascript 代码，使用 TensorSpace.js 提供的 API 构建模型，载入通过预处理的模型，做出预测并展现。网络

<script>
    // 建立 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);
    });
</script>
复制代码

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

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

图3 - LeNet 模型判别输入 “5”

应用展现

这部分将展现一些基于 TensorSpace 开发的3D可视化神经网络模型实例。经过这些实例，能够体验不一样的可交互模型，包括但不限于：物体分类、物体探测、图片生成等。咱们但愿经过展现这些模型实例，来更好、更直观地体现 TensorSpace 的应用场景、操做方法以及展现效果。

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

LeNet 在线演示

AlexNet 在线演示

YOLOv2-tiny 在线演示

ResNet-50 在线演示

VGG16 在线演示

ACGAN 在线演示

MobileNetv1 在线演示

写在最后

若是有关于 TensorSpace 的使用问题，欢迎到 github 上的 Issue 部分提出宝贵意见或给咱们发 PR。

最后的最后，衷心感谢 TensorFlow.js， Three.js， Tween.js 框架的开发者们，感谢他们不懈的探索，让咱们有机会站在巨人的肩膀上，眺望那未知的远方。