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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

爱意满满的作品展示区。

This topic created in 2730 days ago, the information mentioned may be changed or developed.

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

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

TensorSpace LeNet

图 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 训练的模型。

开始使用

workflow

图 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 及其依赖库（TensorSpace.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 中在线体验一下吧~

lenet5

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

应用展示

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

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

LeNet 在线演示

TensorSpace LeNet

AlexNet 在线演示

TensorSpace AlexNet

YOLOv2-tiny 在线演示

TensorSpace YOLOv2-tiny

ResNet-50 在线演示

TensorSpace ResNet-50

VGG16 在线演示

TensorSpace VGG16

ACGAN 在线演示

TensorSpace ACGAN

MobileNetv1 在线演示

TensorSpace MobileNetv1

写在最后

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

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

模型

tensorspace

TensorFlow

script

14 replies • 2018-11-17 06:24:37 +08:00

askfermi

Nov 14, 2018

厉害，前两天有看到这个项目。有可能支持一下 pytorch 吗

syt123450

Nov 14, 2018

@askfermi 谢谢支持。现在文档里没有，不过偷偷地说，从我的角度来看是可以的 : ) 如果要展示 pytorch，我觉得可以用 onnx 将 pytorch 转成 tensorflow，接下来就可以使用标准流程操作了。不过我们没有把这个写进文档中，是因为 onnx 现在也是一个正在发展的库，并不能保证 pytorch 到 tensorflow 的转化流程完全符合期望 QAQ

googlefans

Nov 14, 2018 via iPad

牛

xiaoluoboding

Nov 14, 2018

厉害了老铁

but0n

Nov 14, 2018

很酷! 之前在 Twitter 看到过这个演示, 很直观

syt123450

Nov 15, 2018

@googlefans 感谢关注~

syt123450

Nov 15, 2018

@xiaoluoboding 只是在神经网络可视化方面做了一些很小的工作，其实还有很多的工作需要做。

syt123450

Nov 15, 2018

@but0n 谢谢鼓励~ 做这个项目的初衷就是希望能在 3 维空间中，利用高维的特性尽量还原神经网络的本质。

yao978318542

Nov 15, 2018

额.....什么叫神经网络能具体解释一下吗？有点懵

syt123450

Nov 16, 2018

@yao978318542 只是个人观点，可以把它看成一个输入输出的黑盒，各种训练库比如 TensorFlow, Keras 等就是把这个黑盒内部优化然后封装，TensorSpace 希望做的事情是在一定程度上，把这个黑盒解开来。

ddup

Nov 16, 2018

这个真是牛逼了

fantastic

Nov 16, 2018

厉害了

syt123450

Nov 17, 2018

@ddup 谢谢鼓励~

syt123450

Nov 17, 2018

@fantastic 谢谢鼓励~