TensorFlow.js：讓你在瀏覽器中也能玩轉機器學習

當談及機器學習和谷歌的TensorFlow時候，相比於JavaScript和其他瀏覽器，大多數人會想到Python和專用硬體。本文解釋了TensorFlow.js的用途，以及機器學習在瀏覽器中執行的意義。

TensorFlow.js 是一個JavaScript庫，可以在瀏覽器中執行，也可以透過伺服器上的Node.js.執行。但是，在本文中，我們著眼的範圍僅在於瀏覽器中的應用程式。TensorFlow.js的介面完全基於TensorFlow的高階API Keras。Keras程式碼通常只能和TensorFlow.js程式碼區分開，大多數差異是因為在Python和JavaScript配置引數中語言結構不同而導致的。

每臺GPU都有機器學習

TensorFlow.js可以讓你從零開始機器學習。如果有可使用的必需資料，你可以直接在瀏覽器中訓練或執行模型。為此，TensorFlow.js透過WebGL瀏覽器API，使用計算機的圖形卡（GPU）。 這樣一來，由於WebGL瀏覽器需要一些技巧，才能強制執行TensorFlow.js所需的矩陣乘法，導致部分效能最終會丟失。然而，這是無法避免的，因為TensorFlow.js作為一種機器學習策略，是神經網路的主要支撐。這些損耗，可以在訓練期間或預測期間，透過矩陣乘法準確反映出來。

到這裡，我們已經看到了TensorFlow.js勝過TensorFlow的第一個優勢：儘管TensorFlow目前只能透過CUDA支援NVIDIA GPU，但TensorFlow.js可以和任意顯示卡配合使用。清單1包含了使用High Level API在瀏覽器中建立順序神經網路的程式碼。如果你瞭解TensorFlow的Keras API，那一切操作都很清楚，教程也可以在 tensorflow.org 上找到。

Listing 1

// create a sequential model

const model = tf.sequential();

// add a fully connected layer with 10 units (neurons)

model.add(tf.layers.dense({units: 10}));

// add a convolutional layer to work on a monochrome 28x28 pixel image with 8

// filter units

model.add(tf.layers.conv2d({

inputShape: [28, 28, 1],

filters: 8

}));

// compile the model like you would do in Keras

// the API speaks for itself

model.compile({

optimizer: 'adam',

loss: 'categoricalCrossentropy',

metrics: ['accuracy']

});

與所有瀏覽器API互動

尋找不同作業系統和裝置上的介面地址，著實令人苦惱。而基於瀏覽器的應用

程式，在開發過程中便無需這樣，它們甚至可以訪問相機或麥克風一類的複雜硬體，這些硬體都固定在HTML標準中，目前所有的瀏覽器都支援。

此外，瀏覽器的性質，既為瀏覽器互動而設計，同樣也適合你。因此，如今想獲取一個具有機器學習功能的互動式應用程式比以往更容易。

舉個例子，我們有一個簡單的遊戲Scavenger Hunt，它可以在手機瀏覽器中執行，從而給我們帶來極大的樂趣。

如下圖所示，在現實世界中，你必須快速找到與顯示的表情符號相匹配的物件。為此，內建攝像機和訓練好的神經網路，可以檢測到相匹配的物件。即使沒有機器學習技能，任何JavaScript開發人員都可以運用這樣的模型。

機器學習，無需在每臺計算機上安裝

TensorFlow.js允許你使用TensorFlow部署預先建立的模型。此模型可能已經在強硬體上完全或一定程度上接受過訓練。然而，在瀏覽器中，它僅被歸結為應用程式或進一步訓練。圖2顯示了透過不同姿勢控制的吃豆人變體，它基於預先訓練的網路，在瀏覽器中根據自己的姿勢進行再訓練，我們稱之為遷移學習。

模型由提供的程式進行轉換，並且可以在載入後透過輸入類似於以下內容的行，進行非同步載入：

const model = await tf.loadModel('model.json')

之後，模型不再與瀏覽器中直接建立的模型相區分開。因此，它便於進行預測，接著，預測又在GPU上非同步執行：

const example = tf.tensor([[150, 45, 10]]);

const prediction = model.predict(example);

const value = await prediction.data();

除了透過遊戲進行娛樂外，這裡還可以設想更多有用的應用程式。比如透過手勢進行導航或互動，可以為殘疾人或特殊情況下的人提供幫助。 正如前面已經提到的：只需載入一個網站，即可完成所有操作。

位置檢測技術的另一案例，是下圖中的PoseNet。它已經過預先訓練，即使圖片中有多個人，它也可以識別臉部，手臂和腿部的位置。在這裡，即使有一定的距離，我們也去有能力去有效地控制重要程式。PoseNet的使用非常簡單，甚至不需要機器學習領域的基礎知識。

清單2進行了概述。

Listing 2

import * as posenet from '@tensorflow-models/posenet';

import * as tf from '@tensorflow/tfjs';

// load the posenet model

const model = await posenet.load();

// get the poses from a video element linked to the camera

const poses = await model.estimateMultiplePoses(video);

// poses contain

// - confidence score

// - x, y positions

使用者資料無需離開瀏覽器

特別是現在，根據GDPR進行資料保護，已經越來越重要。人們會考慮，他們是否想在計算機上有特定的cookie，或者是否願意把使用者的統計資料傳送給製造商，用於改善軟體的使用者體驗。如果反過來，會怎麼樣？製造商提供瞭如何使用軟體的一般模型，類似於上述的吃豆人遊戲，它透過轉移學習模型來適應個人使用者。儘管這方面成果不多，但非常有發展潛力，讓我們拭目以待。

總結

首先，瀏覽器中的機器學習似乎對許多開發人員沒有多大意義。但是，如果你仔細研究，就會發現它的應用可能性，這是其他平臺無法提供的：

1.培訓：你可以直接與機器學習概念進行互動，透過實驗進行學習。

2.開發：如果你已經擁有或想要或需要構建JS應用程式，則可以直接使用或訓練機器學習模型。

3.遊戲：僅透過相機進行實時位置估算（當前相機前方的人們如何移動）或影像識別，可以與遊戲直接結合。已經有一些非常酷的遊戲案例，但是，你可以做的遠不止遊戲。

4.部署：假設你已經擁有了機器學習模型，想知道如何投入生產。可以用瀏覽器來解決這個問題。即使是已經完成的模型也可以集中到您自己的應用程式中，並無需深入瞭解機器學習。

5.互動式視覺化：用於互動式專案甚至藝術專案。

正如我們在上圖中看到的，對於相同的硬體，在TensorFlow上的效能仍有不足。在1080GTX GPU上執行後，作為比較，我們測量出使用MobileNet進行預測的時間，因為提到了它的運用示例。在這種情況下，TensorFlow的執行速度比TensorFlow.js快了三到四倍。但是，兩個值都非常低。WebGPU標準可以更直接地訪問GPU，有望實現更好的效能。