V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
syt123450
V2EX  ›  分享创造

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

  •  6
     
  •   syt123450 · 2018-11-14 21:41:27 +08:00 · 3613 次点击
    这是一个创建于 1961 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    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 )中打开在线演示链接。

    TensorSpace LeNet

    TensorSpace AlexNet

    TensorSpace YOLOv2-tiny

    TensorSpace ResNet-50

    TensorSpace VGG16

    TensorSpace ACGAN

    TensorSpace MobileNetv1

    写在最后

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

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

    14 条回复    2018-11-17 06:24:37 +08:00
    askfermi
        1
    askfermi  
       2018-11-14 21:50:28 +08:00
    厉害,前两天有看到这个项目。有可能支持一下 pytorch 吗
    syt123450
        2
    syt123450  
    OP
       2018-11-14 22:10:17 +08:00
    @askfermi 谢谢支持。现在文档里没有,不过偷偷地说,从我的角度来看是可以的 : ) 如果要展示 pytorch,我觉得可以用 onnx 将 pytorch 转成 tensorflow,接下来就可以使用标准流程操作了。不过我们没有把这个写进文档中,是因为 onnx 现在也是一个正在发展的库,并不能保证 pytorch 到 tensorflow 的转化流程完全符合期望 QAQ
    googlefans
        3
    googlefans  
       2018-11-14 22:32:28 +08:00 via iPad
    xiaoluoboding
        4
    xiaoluoboding  
       2018-11-14 22:43:43 +08:00
    厉害了老铁
    but0n
        5
    but0n  
       2018-11-14 23:14:35 +08:00
    很酷! 之前在 Twitter 看到过这个演示, 很直观
    syt123450
        6
    syt123450  
    OP
       2018-11-15 07:02:17 +08:00
    @googlefans 感谢关注~
    syt123450
        7
    syt123450  
    OP
       2018-11-15 07:03:48 +08:00
    @xiaoluoboding 只是在神经网络可视化方面做了一些很小的工作,其实还有很多的工作需要做。
    syt123450
        8
    syt123450  
    OP
       2018-11-15 07:09:45 +08:00
    @but0n 谢谢鼓励~ 做这个项目的初衷就是希望能在 3 维空间中,利用高维的特性尽量还原神经网络的本质。
    yao978318542
        9
    yao978318542  
       2018-11-15 09:17:21 +08:00
    额.....什么叫神经网络 能具体解释一下吗? 有点懵
    syt123450
        10
    syt123450  
    OP
       2018-11-16 02:20:58 +08:00
    @yao978318542 只是个人观点,可以把它看成一个输入输出的黑盒,各种训练库比如 TensorFlow, Keras 等就是把这个黑盒内部优化然后封装,TensorSpace 希望做的事情是在一定程度上,把这个黑盒解开来。
    ddup
        11
    ddup  
       2018-11-16 14:55:18 +08:00
    这个真是牛逼了
    fantastic
        12
    fantastic  
       2018-11-16 20:43:16 +08:00
    厉害了
    syt123450
        13
    syt123450  
    OP
       2018-11-17 06:24:29 +08:00
    @ddup 谢谢鼓励~
    syt123450
        14
    syt123450  
    OP
       2018-11-17 06:24:37 +08:00
    @fantastic 谢谢鼓励~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1032 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:31 · PVG 06:31 · LAX 15:31 · JFK 18:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.