在機(jī)器學(xué)習(xí)飛速發(fā)展的今天，各種機(jī)器學(xué)習(xí)平臺(tái)層出不窮，為了滿足不同業(yè)務(wù)場(chǎng)景的需求，可以將機(jī)器學(xué)習(xí)的模型分別部署到 Android、iOS、Web 瀏覽器，讓模型在端側(cè)能夠進(jìn)行推演，從而發(fā)揮模型的潛能。其中TensorFlow.js 是 TensorFlow 的 JavaScript 版本，支持 GPU 硬件加速，可以運(yùn)行在 Node.js 或?yàn)g覽器環(huán)境中。它不但支持完全基于 JavaScript 從頭開發(fā)、訓(xùn)練和部署模型，也可以用來(lái)運(yùn)行已有的 Python 版 TensorFlow 模型，或者基于現(xiàn)有的模型進(jìn)行繼續(xù)訓(xùn)練。

TensorFlow.js 優(yōu)勢(shì)

TensorFlow.js 可以讓使用者在瀏覽器中加載 TensorFlow模型，讓用戶通過本地的 CPU/GPU 資源進(jìn)行機(jī)器學(xué)習(xí)推演。瀏覽器中進(jìn)行機(jī)器學(xué)習(xí)，相對(duì)比與服務(wù)器端來(lái)講，將擁有以下四大優(yōu)勢(shì)：

1. 不需要安裝軟件或驅(qū)動(dòng)（打開瀏覽器即可使用）；

2. 可以通過瀏覽器進(jìn)行更加方便的人機(jī)交互；

3. 可以通過手機(jī)瀏覽器，調(diào)用手機(jī)硬件的各種傳感器（如：GPS、加速度傳感器、攝像頭等）；

4. 用戶的數(shù)據(jù)可以無(wú)需上傳到服務(wù)器，在本地即可完成所需操作。

TensorFlow.js 架構(gòu)

上面介紹了TensorFlow.js 的優(yōu)勢(shì)，這里讓我們來(lái)了解一下TensorFlow.js 的架構(gòu)。如圖1 所示，TensorFlow.js 架構(gòu)包括Core API 和 Layers API（圖的上半部分）。其中Layers API 提供更高層次的接口，例如類似Keras API的語(yǔ)法結(jié)構(gòu)，這些語(yǔ)法結(jié)構(gòu)的目的是通過更加高粒度的抽象讓開發(fā)人員使用JavaScript 便捷地進(jìn)行機(jī)器學(xué)習(xí)的開發(fā)。而Core API主要包括TensorFlow.js 所提供的核心功能，例如Tensor的創(chuàng)建、數(shù)據(jù)的運(yùn)算、內(nèi)存管理等。同時(shí)Core API 還提供了工具將Python中的機(jī)器學(xué)習(xí)模型轉(zhuǎn)換成瀏覽器能夠使用的JSON格式，方便在JavaScript中能夠復(fù)用已有的模型。因此，Core API能夠在瀏覽器端運(yùn)行，可以使用WebGL進(jìn)行GPU加速，當(dāng)然它也可以在Node.js 上運(yùn)行，依賴具體的運(yùn)行環(huán)境通過GPU、TPU進(jìn)行加速。

圖1  TensorFlow.js 架構(gòu)

TensorFlow.js 進(jìn)行線性回歸的案例

前面說了TensorFlow.js 的優(yōu)勢(shì)和架構(gòu)，這里為了大家能對(duì)TensorFlow.js 有更深的了解，我們舉一個(gè)簡(jiǎn)單的線性回歸例子來(lái)看看在瀏覽器端是如何實(shí)現(xiàn)機(jī)器學(xué)習(xí)的訓(xùn)練和推演的。

假設(shè)我們需要構(gòu)建 y = ax1+bx2+c 的線性模型，如圖2 所示，需要如下幾個(gè)步驟完成：

1. 下載TensorFlow.js 文件

2. 訓(xùn)練數(shù)據(jù)和測(cè)試數(shù)據(jù)

3. 構(gòu)建模型

4. 訓(xùn)練模型

5. 模型應(yīng)用

圖2 TensorFlow.js 構(gòu)建線性回歸模型

從這5 個(gè)步驟可以看出基本過程和在Python中構(gòu)建模型是一樣的，除了第一步需要下載TensorFlow.js 的文件以外。

如圖3 所示，為了加載TensorFlow.js 文件，我們需要在頁(yè)面的head 標(biāo)簽中引入script，其中文件tf.min.js 已經(jīng)部署到了TensorFlow 的CDN 服務(wù)器了，我們只需要引用該文件即可。

圖3 引用TensorFlow.js 文件

為了保證TensorFlow.js 文件被正確引入，如圖4所示，打開瀏覽器并開啟開發(fā)者工具，在Console 中輸入tf.version 從而可以獲取TensorFlow對(duì)應(yīng)的tfjs-core，tfjs-backend-cpu 等信息，說明文件引入成功了。由于TensorFlow.js 文件中包含了TensorFlow的運(yùn)算庫(kù)，因此這里需要確保該文件被正確加載了。

圖 4 確認(rèn)TensorFlow.js 文件被正確引入

有了對(duì)TensorFlow.js 文件的加載之后，我們就可以在html中寫入機(jī)器學(xué)習(xí)的代碼了。 如圖5 所示，在script標(biāo)簽中寫入如下代碼，其中async 的doTraining 方法是用來(lái)對(duì)模型進(jìn)行訓(xùn)練的，epoch 是500 次，這里使用async 的目的是不讓網(wǎng)頁(yè)的其他操作阻塞。在函數(shù)內(nèi)部調(diào)用了model 中的fit 方法對(duì)模型進(jìn)行擬合，輸入?yún)?shù)是xs 和ys，在回調(diào)函數(shù)callbacks 中輸出擬合結(jié)果，并打印loss 的損失函數(shù)。

接下來(lái)就是來(lái)構(gòu)造model了，這里使用了tf.sequential();構(gòu)建模型，為了構(gòu)建y = ax1+bx2+c 模型，這里需要構(gòu)建一個(gè)神經(jīng)元，這個(gè)神經(jīng)元有兩個(gè)輸入和一個(gè)輸出。

所以，通過model.add 添加一個(gè)dense 層，定義units：1，也就是一個(gè)神經(jīng)元，inputShape:[2]，輸入是一個(gè)二維。有了模型之后，通過model.complie進(jìn)行編譯模型，這里使用了meanSquareError的損失函數(shù)以及optimizer為sgd。最后通過model的summary方法把整個(gè)神經(jīng)元網(wǎng)絡(luò)打印出來(lái)。緊接著在dataset環(huán)節(jié)，我們準(zhǔn)備了xs 、ys作為輸入，testData_x作為測(cè)試數(shù)據(jù)。最后，調(diào)用doTraining(model)對(duì)模型進(jìn)行訓(xùn)練，并使用predict方法對(duì)結(jié)果進(jìn)行預(yù)測(cè)。

圖5 在瀏覽器中訓(xùn)練模型

將上述文件保存為html文件以后重新打開，大約1-2秒以后就可以看到圖6 的結(jié)果。右邊是開發(fā)者工具中打印出每次epoch 獲得的loss 結(jié)果，可以看出隨著訓(xùn)練的進(jìn)程loss 損失函數(shù)是越來(lái)越小的。同時(shí)最終得到了Tensor的結(jié)果為 15.5082932 的預(yù)測(cè)結(jié)果。

圖6 運(yùn)行結(jié)果

TensorFlow.js 模型復(fù)用

有了上面簡(jiǎn)單的例子，我們可以在瀏覽器端輕松地巡檢機(jī)器學(xué)習(xí)模型，但是模型的訓(xùn)練本事是需要耗費(fèi)資源，同時(shí)也需要較長(zhǎng)的訓(xùn)練時(shí)間。那么，我們能否將已經(jīng)訓(xùn)練好的模型直接拿到瀏覽器進(jìn)行預(yù)測(cè)和推演呢？答案是肯定的。

模型的復(fù)用一般而言有兩種方式，第一種是使用開發(fā)者自己在Python中創(chuàng)建好的模型，通過TensroFlow提供的工具，將模型保存成tfjs格式并將其在瀏覽器中使用。另一種是直接調(diào)用TensorFlow 提供的模型。

圖7 模型復(fù)用

開發(fā)自己定義的模型

如圖8 所示，我們?cè)趐ython中進(jìn)行模型構(gòu)建、訓(xùn)練和保存。構(gòu)建模型、神經(jīng)元網(wǎng)絡(luò)、設(shè)置優(yōu)化器、損失函數(shù)以及數(shù)據(jù)準(zhǔn)備等步驟，這里就不贅述。在模型訓(xùn)練完畢之后通過save_model 方法對(duì)模型進(jìn)行保存。

圖 8 開發(fā)自己的模型

有了模型，接著就需要使用TensorFlow.js 提供的工具對(duì)模型進(jìn)行轉(zhuǎn)換，才能讓該模型在瀏覽器中被使用。

這里使用如下命令安裝TensorFlow.js的工具。

pip install tensorflowjs
tensorflwjs_converter --input_format=keras_saved_model ./saved_model/ ./model/

這里使用了tensorflwjs_converter 命令對(duì)模型進(jìn)行轉(zhuǎn)換，input的格式是keras_saved_model,源文件地址是./saved_model/，目標(biāo)文件地址是./model/，回車執(zhí)行之后就可以在目標(biāo)文件地址看到轉(zhuǎn)換以后的文件了。

在瀏覽器中只需要引用這個(gè)轉(zhuǎn)化好的模型文件，如圖9 所示，在script中的run方法直接引用了模型文件model.json使用loadLayersModel裝載模型，設(shè)置了input 之后就使用predict方法對(duì)模型進(jìn)行預(yù)測(cè)了。

圖9 使用轉(zhuǎn)換后的模型

TensorFlow 提供的模型

上面我們演示了可以使用自己訓(xùn)練好的機(jī)器學(xué)習(xí)模型，這里也可以通過??https://www.tensorflow.org/js/models ??查找TensorFlow 提供的模型。

如圖10 所示，TensorFlow 已經(jīng)為一些業(yè)務(wù)場(chǎng)景量身打造了一些模型，例如：人像深度估測(cè)、圖像分類、對(duì)象檢測(cè)、身體分割、姿勢(shì)檢測(cè)、文本惡意檢測(cè)等等。想了解如何進(jìn)一步在生產(chǎn)場(chǎng)景中部署模型的同學(xué)，也可以抽空看看谷歌開發(fā)者專家對(duì) TensorFlow 部署功能的講解和常見問題的解答：??https://zhibo.51cto.com/liveDetail/373??

圖 10 TensorFlow 提供的模型

通過學(xué)習(xí)TensorFlow 官方在線課程，我從一個(gè)機(jī)器學(xué)習(xí)小白成長(zhǎng)為一個(gè)經(jīng)驗(yàn)豐富的機(jī)器學(xué)習(xí)老手。從??《TensorFlow 入門實(shí)操課程》??和??《TensorFlow入門課程 — 部署篇》??課程中，我學(xué)會(huì)了如何對(duì)機(jī)器學(xué)習(xí)模型進(jìn)行保存轉(zhuǎn)換，同時(shí)還可以根據(jù)不同的應(yīng)用場(chǎng)景將機(jī)器學(xué)習(xí)模型部署到Android、iOS、瀏覽器以及服務(wù)端。TensorFlow 的平臺(tái)就好像一個(gè)萬(wàn)花筒，讓我看到了五彩繽紛的應(yīng)用項(xiàng)目，同時(shí)也了解了機(jī)器學(xué)習(xí)建模和預(yù)測(cè)的底層邏輯。如果你也想讓機(jī)器學(xué)習(xí)的能力有所提高，可以一起學(xué)習(xí)??《TensorFlow入門課程 — 部署篇》??，并留下你對(duì)課程的評(píng)價(jià)，現(xiàn)在報(bào)名參與，還有機(jī)會(huì)贏得官方精美禮品哦！

張?jiān)撇ǎ钴S的IT網(wǎng)紅講師，擁有學(xué)員31w+，國(guó)內(nèi)早期開始和發(fā)布蘋果Swift、安卓Kotlin、微信小程序、區(qū)塊鏈技術(shù)的講師之一。主攻前端開發(fā)、iOS開發(fā)、Android開發(fā)、Flutter開發(fā)、區(qū)塊鏈Dapp開發(fā)，有豐富的大公司和海外工作經(jīng)驗(yàn)。