TensorSpace.js：用於構建神經網路 3D 視覺化應用的框架
TensorSpace.js
Present Tensor in Space
ofollow,noindex" target="_blank"> English | 中文
TensorSpace是一套用於構建神經網路3D視覺化應用的框架。 開發者可以使用類Keras風格的TensorSpace API，輕鬆建立視覺化網路、載入神經網路模型並在瀏覽器中基於已載入的模型進行3D可互動呈現。 TensorSpace可以使您更直觀地觀察神經網路模型，並瞭解該模型是如何通過中間層 tensor 的運算來得出最終結果的。 TensorSpace 支援3D視覺化經過適當預處理之後的 TensorFlow、Keras、TensorFlow.js 模型。
圖1 - 使用 TensorSpace 建立的互動式 LeNet 模型
目錄
TensorSpace 使用場景
TensorSpace 基於 TensorFlow.js、Three.js 和 Tween.js 開發，用於對神經網路進行3D視覺化呈現。通過使用 TensorSpace，不僅僅能展示神經網路的結構，還可以呈現網路的內部特徵提取、中間層的資料互動以及最終的結果預測等一系列過程。
通過使用 TensorSpace，可以幫助您更直觀地觀察並理解基於TensorFlow、Keras或者TensorFlow.js開發的神經網路模型。 TensorSpace 降低了前端開發者進行深度學習相關應用開發的門檻。 我們期待看到更多基於 TensorSpace 開發的3D視覺化應用。
-
互動-- 使用類 Keras 的API，在瀏覽器中構建可互動的3D視覺化模型。
-
直觀-- 觀察並展示模型中間層預測資料，直觀演示模型推測過程。
-
整合-- 支援使用 TensorFlow、Keras 以及 TensorFlow.js 訓練的模型。
開始使用
安裝
- 第一步: 下載 TensorSpace.js
我們提供了三種下載 TensorSpace.js 的方法，它們分別是 npm、yarn 以及 來自官方網站。
途徑 1: NPM
npm install tensorspace
途徑 2: Yarn
yarn add tensorspace
途徑 3: 官方網站下載
- 第二步: 安裝依賴庫
請在使用 TensorSapce.js 之前，引入 TensorFlow.js 、 Three.js 、 Tween.js 和 TrackballControl.js 至所需要的 html 檔案中，並置於 TensorSpace.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
將 TensorSpace.js 引入 html 檔案中：
<script src="tensorspace.min.js"></script>
模型預處理
為了獲得神經網路中間層的運算結果，我們需要對已有的模型進行 模型預處理 。
基於不同的機器學習庫，我們提供了 TensorFlow 模型預處理教程 、 Keras 模型預處理教程 以及 TensorFlow.js 模型預處理教程 。
使用
在成功安裝完成 TensorSpace 並完成神經網路模型預處理之後，我們可以來建立一個3D TensorSpace 模型。
為了簡化步驟，請隨意使用我們在 HelloWorld 路徑下所提供的資源。
我們將會用到 適配 TensorSpace 的預處理模型 以及 樣例輸入資料（“5”） 作為使用樣例來進行說明。所有的原始碼都可以在 helloworld.html 檔案中找到。
首先，我們需要新建一個 TensorSpace 模型例項：
let container = document.getElementById( "container" ); let model = new TSP.models.Sequential( container );
然後，基於 LeNet 網路的結構：輸入層 + 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"]
}) );
最後，我們需要載入 經過預處理的 TensorSpace 適配模型 並使用 init() 方法來建立模型物件：
model.load({
type: "tfjs",
url: './lenetModel/mnist.json'
});
model.init(function(){
console.log("Hello World from TensorSpace!");
});
我們可以在瀏覽器中看到以下模型：
圖2 - 所建立的 LeNet 模型 (無輸入資料）
我們可以使用我們已經提取好的 手寫“5” 作為模型的輸入：
model.init(function() {
model.predict( image_5 );
});
我們在這裡將預測方法放入 init() 的回撥函式中以確保預測在初始化完成之後進行( 線上演示 )。
點選後面這個CodePen logo來在CodePen中試一下這個例子吧 ~ 
圖3 - LeNet 模型判別輸入 “5”
樣例展示
- LeNet
圖4 - 使用 TensorSpace 構建 LeNet
圖5 - 使用 TensorSpace 構建 AlexNet
- Yolov2-tiny
圖6 - 使用 TensorSpace 構建 YOLO-v2-tiny
- ResNet-50
圖7 - 使用 TensorSpace 構建 ResNet-50
- Vgg16
圖8 - 使用 TensorSpace 構建 VGG-16
- ACGAN
圖9 - 使用 TensorSpace 構建 ACGAN 生成網路
- MobileNetv1
圖10 - 使用 TensorSpace 構建 MobileNetv1 生成網路
文件
- 迅速開始使用，參閱 開始使用 。
- 下載並安裝，檢視 下載 。
- 瞭解更多 基本概念 。
- 如何使用神經網路模型，檢視 模型預處理 。
- 瞭解核心組成構件： 模型 、 網路層 以及 網路層融合 。
- 希望獲取更多 TensorSpace 的資訊，請訪問 TensorSpace 官方網站 TensorSpace.org 。
更新日誌
開發人員
|
|
|
|
|
|---|
syt123450 
Chenhua Zhu 
YaoXing Liu 
Qi(Nora) 聯絡方式
若有任何疑問，歡迎通過以下方式聯絡我們：
- Email: [email protected]
- GitHub Issues: create issue
- Slack: #questions
- Gitter: #Lobby
許可證
ICENSE" rel="nofollow,noindex" target="_blank">Apache License 2.0