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

全文共2000字，預計學習時長4分鐘

當談及機器學習和谷歌的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());

// 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，有望實現更好的性能。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！