「開源」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）中打開在線演示連接。