「開源」TensorSpace.js -- 神經網路3D視覺化框架，在瀏覽器端構建可互動模型

阿新 • • 發佈：2018-11-14

TensorSpace是一套用於構建神經網路3D視覺化應用的框架。開發者可以使用類 Keras 風格的 TensorSpace API，輕鬆建立視覺化網路、載入神經網路模型並在瀏覽器中基於已載入的模型進行3D可互動呈現。 TensorSpace 可以使您更直觀地觀察神經網路模型，並瞭解該模型是如何通過中間層 tensor 的運算來得出最終結果的。 TensorSpace 支援3D視覺化經過適當預處理之後的 TensorFlow、Keras、TensorFlow.js 模型。

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 具有以下特性：

互動 -- 使用類 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 及其依賴庫（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 中線上體驗一下吧~

圖3 - LeNet 模型判別輸入 “5”

應用展示

這部分將展示一些基於 TensorSpace 開發的3D視覺化神經網路模型例項。通過這些例項，可以體驗不同的可互動模型，包括但不限於：物體分類、物體探測、圖片生成等。我們希望通過展示這些模型例項，來更好、更直觀地體現 TensorSpace 的應用場景、操作方法以及展示效果。

點選“線上演示”連結可以進入 TensorSpace 官網的 playground 檢視對應模型的線上應用。考慮到部分模型的大小較大（例如：VGG-16 > 500MB，AlexNet > 250MB……）以及網路載入速度，部分模型可能需要較長的載入時間。同時，為了有更好的 UI 互動體驗，我們強烈建議在中型或者大型螢幕（寬度大於750px）中開啟線上演示連結。