1. 簡介
上次更新時間：2022 年 4 月 11 日
在本程式碼研究室中，您將瞭解如何使用 Teachable Machine 訓練圖像分類模型，以及如何使用 TensorFlow.js (功能強大且彈性靈活的 JavaScript 機器學習程式庫) 搭配 Coral 硬體加速執行模型。您建構一個 Electron 應用程式，可顯示網路攝影機的圖像，並使用 Coral 邊緣 TPU 分類圖片。您可以在 sig-tfjs GitHub 存放區中找到本程式碼研究室的高效版本。
我需要珊瑚紅裝置嗎？
不需要。您可以在沒有 Coral 裝置的情況下試用本程式碼研究室，並仍可使用 WebNN 加速器在桌上型電腦上獲得優異的效能。
建構項目
在本程式碼研究室中，您將建構用於分類圖片的 Electron 應用程式。您的應用程式：
- 將網路攝影機中的圖像依照您訓練模型定義的類別進行分類。
- 使用珊瑚加速器提高效能 (如果有的話)。
- 使用 WebNN 提高效能 (如果你的平台支援 WebNN)。
課程內容
- 如何安裝及設定 tfjs-tflite-node NPM 套件，以在 Node.js 中執行 TFLite 模型。
- 如何安裝 Edge TPU 執行階段程式庫，以在 Coral 裝置上執行模型。
- 如何使用 Coral Edge TPU 加快模型推論速度。
- 如何使用 WebNN 加快模型推論速度。
本程式碼研究室著重於以 Node.js 中的 TFLite 說明。我們不會對與本主題無關的概念和程式碼區塊做介紹，但會事先準備好這些程式碼區塊，屆時您只要複製及貼上即可。
軟硬體需求
如要完成這個程式碼研究室，您需要：
- 配備網路攝影機的電腦。
- 針對珊瑚紅，我們建議使用搭載 Raspberry Pi OS (64 位元) 電腦的 Raspberry Pi。
- 對於 WebNN，我們建議使用執行 Ubuntu 20.04 或 Windows 10 的 Intel x86-64 電腦。
- Node.js 版本 >= 12。
- JavaScript 知識。
- (建議使用) 珊瑚紅 USB 加速器可加快模型速度。
2. 做好準備
取得程式碼
我們已將本專案所需的所有程式碼都放到 Git 存放區中。如要開始使用，請擷取程式碼，然後在慣用的開發環境中開啟。在本程式碼研究室中，建議使用 Raspberry Pi，並在電腦上執行 Raspberry Pi OS (64 位元)。這樣就能輕鬆連結珊瑚加速器。
強烈建議：使用 Git 在 Raspberry Pi 上複製存放區
如要取得程式碼，請開啟新的終端機視窗並複製存放區：
git clone https://github.com/tensorflow/sig-tfjs.git
本程式碼研究室需要編輯的所有檔案都位於 sig-tfjs 的 tfjs-tflite-node-codelab 目錄中。在這個目錄中，會找到名為 starter_code、cpu_inference_working、coral_inference_working 和 webnn_inference_working 的子目錄。這些是本程式碼研究室步驟的查核點。
存放區中的其他檔案是 tfjs-tflite-node-codelab 依附的 NPM 套件。您不需要編輯這些檔案，但必須執行一些測試來確保環境設定正確。
安裝 Edge TPU 執行階段程式庫
使用 Coral 裝置前，您必須先安裝 Edge TPU 執行階段程式庫。根據平台適用的操作說明進行安裝。
Linux / Raspberry Pi
在 Linux 上，Google 的 PPA 可做為 Debian 套件 (libedgetpu1-std)，使用適用於 x86-64 和 Armv8 (64 位元) 架構。如果您的處理器採用的架構不同，您必須從來源編譯。
執行下列指令，新增 Google 的 Coral PPA，並安裝 Edge TPU 執行階段程式庫。
# None of this is needed on Coral boards
# This repo is needed for almost all packages below
echo "deb https://packages.cloud.google.com/apt coral-edgetpu-stable main" | sudo tee /etc/apt/sources.list.d/coral-edgetpu.list
# This repo is needed for only python3-coral-cloudiot and python3-coral-enviro
echo "deb https://packages.cloud.google.com/apt coral-cloud-stable main" | sudo tee /etc/apt/sources.list.d/coral-cloud.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
sudo apt-get update
sudo apt-get install libedgetpu1-std
Windows / 其他作業系統
MacOS 和 Windows 的 x86-64 版本都提供預先編譯的二進位檔，下載後只要執行封存檔中的 install.sh 或 install.bat 指令碼即可安裝。
重新啟動裝置
安裝 Edge TPU 執行階段後，請重新啟動裝置，啟用安裝程式新增的 Coral Udev 規則。
確認偵測到 Coral 裝置
如要確認偵測到的 Coral 裝置是否正常運作，請執行 coral-tflite-delegate 套件的整合測試。這個套件位於存放區的根目錄中。如要執行整合測試，請插入 Coral 加速器，然後在套件的目錄中執行下列指令：
npx yarn
npx yarn build-deps
npx yarn test-integration
輸出內容應如下所示：
yarn run v1.22.17
$ yarn build && yarn test-integration-dev
$ tsc
$ jasmine --config=jasmine-integration.json
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 78904
Started
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
WARNING: converting 'int32' to 'uint8'
.
1 spec, 0 failures
Finished in 2.777 seconds
Randomized with seed 78904 (jasmine --random=true --seed=78904)
Done in 6.36s.
無須按照記錄中所述安裝 @tensorflow/tfjs-node,，因為您會在 TFLite 中執行模型。
如果輸出內容包含 Encountered unresolved custom op: edgetpu-custom-op，表示偵測不到珊瑚紅裝置。確認您已安裝 Edge TPU 執行階段程式庫，並將 Coral 裝置插入電腦。您也可以按照 Coral 的入門指南，測試 Python 版本的 Coral 繫結協定。如果 Python 版本可正常運作，但這些測試還是失敗，請提交錯誤報告通知我們。
執行範例程式碼
您現在可以執行範例程式碼了。請按照下列步驟操作。
- 移至
tfjs-tflite-node-codelab目錄下的starter_code目錄。 - 執行
npm install以安裝依附元件。 - 執行
npm start以啟動專案。這時應會開啟應用程式，顯示電腦網路攝影機的影片畫面。
從哪裡開始？
我們要從專為本程式碼研究室所設計的基本 Electron 相機應用程式開始著手。程式碼經過簡化，以便顯示程式碼研究室中的概念，而且不太需要處理錯誤。如果您選擇在正式版應用程式中重複使用任何程式碼，請務必處理所有錯誤並全面測試所有程式碼。
探索範例程式碼
這個範例程式碼中有許多檔案，但唯一需要編輯的檔案是 renderer.js。可控管頁面上顯示的內容 (包括影片動態消息和 HTML 元素)，以及將機器學習模型加入應用程式的位置。其他檔案為 index.html 檔案，但只會載入 renderer.js 檔案。此外還有 main.js 檔案，是 Electron 的進入點。可控管應用程式的生命週期，包括應用程式開啟時顯示的內容，以及關閉後執行的動作，但您不需要對應用程式進行任何變更。
開啟偵錯工具
按照本程式碼研究室的說明，您可能需要對應用程式進行偵錯。這個應用程式以 Electron 為基礎，因此已內建 Chrome 偵錯工具。在大多數平台上，使用 Ctrl + Shift + I 都能開啟。按一下「Console」分頁標籤即可查看應用程式的記錄和錯誤訊息。
這裡這裡沒有其他可以探索的內容，現在就來訓練圖片分類器吧！
3. 訓練圖片分類器
在本節中，您將訓練自訂圖片分類模型的 TFLite 和珊瑚紅版本。
訓練分類器
圖片分類器接受輸入圖片，並為其指派標籤。在本程式碼研究室中，您將使用 Teachable Machine 在瀏覽器中訓練模型。如要加快本節的訓練速度，您可以使用桌上型或筆記型電腦，而非 Raspberry Pi，不過您必須將產生的檔案複製到 Pi。
現在，您可以開始訓練模型。如果您不確定要訓練哪種模型，可採用人員偵測器，輕鬆訓練出人員是否入鏡。
- 在新分頁中開啟 Teachable Machine Training 頁面。
- 依序選取「Image Project」和「Standard image model」。
- 為每個類別新增圖片範例。使用網路攝影機輸入是最簡單的方式。您也可以變更課程名稱。
- 當您為每個類別收集到足夠的資料後 (通常 50 個樣本就足夠)，請按下「Train Model」(訓練模型)。
模型訓練完成後，您應該會看到模型輸出內容的預覽畫面。
請試著提供模型不同的輸入內容。如果您發現輸入內容未正確分類，請將輸入內容新增至訓練資料並重新訓練模型。
- 對模型的準確度感到滿意之後，請按一下「匯出模型」。您需要下載兩個獨立的模型版本，
- 將模型匯出為 Tensorflow Lite 浮點模型。這會下載名為
converted_tflite.zip的檔案。也就是在 CPU 運作的 - 將模型匯出為 Tensorflow Lite EdgeTPU 模型。即可下載在 Coral Edge TPU 上執行的名為
converted_edgetpu.zip的檔案。
4. 在應用程式中執行 CPU 模型
模型訓練完畢後，接下來請將其新增至應用程式。在本節結束時，應用程式將可使用裝置的 CPU 執行模型。
在應用程式中新增模型檔案
將訓練分類器時下載的 converted_tflite.zip 模型檔案解壓縮。封存檔包含兩個檔案，model_uquant.tflite 是已儲存的 TFLite 模型，包括模型圖和權重。labels.txt 包含人類可讀的標籤，適用於模型預測的類別。將這兩個檔案放入modeldirectory。
安裝依附元件
載入模型和預先處理輸入內容需要 TensorFlow.js 中的幾項依附元件：
tfjs-tflite-node：TensorFlow.js 的套件，用於在 Node.js 中執行 TFLite 模型。@tensorflow/tfjs：TensorFlow.js 的主要套件。
已安裝 @tensorflow/tfjs，但需要透過下列指令安裝 tfjs-tflite-node：
npm install --save tfjs-tflite-node
安裝之後，請將其新增至 renderer.js 頂端的應用程式：
CODELAB 第 1 部分：匯入 tfjs-tflite-node。
const {loadTFLiteModel} = require('tfjs-tflite-node');
載入模型
您現在可以載入模型了。tfjs-tflite-node 提供 loadTFLiteModel 函式來完成這項作業。可透過檔案路徑、ArrayBuffer 或 TFHub 網址載入模型。如要載入模型及其權重，請在 main 函式中加入以下內容：
const modelPath = './model/model_unquant.tflite';
const model = await loadTFLiteModel(modelPath);
const labels = fs.readFileSync('./model/labels.txt', 'utf8')
.split('\n');
執行模型
執行模型需要三個步驟。首先，從網路攝影機提取及預先處理輸入畫面。然後，在該影格上執行模型並取得預測結果。接著，您會在頁面上顯示預測結果。
預先處理網路攝影機輸入資料
目前網路攝影機只是 HTML 元素，而 JavaScript 轉譯器.js 檔案中無法使用網路攝影機顯示的影格。為了從網路攝影機中擷取畫面，TensorFlow.js 提供 tf.data.webcam，提供簡單易用的 capture() 方法從相機中擷取畫面。
如要使用，請在 main() 中加入以下設定程式碼：
CODELAB 第 1 部分：在這裡設定 tf.data.webcam。
const tensorCam = await tf.data.webcam(webcam);
接著，如要針對每個影格擷取圖片，請在 run() 中新增下列內容：
const image = await tensorCam.capture();
此外，您也需要預先處理每個影格，才能與模型相容。本程式碼研究室使用的模型含有 [1, 224, 224, 3] 輸入形狀，因此應為 224 x 224 像素的 RGB 圖片。tensorCam.capture() 的形狀是 [224、224、3]，因此您需要使用 tf.expandDims，在張量前方新增額外維度。此外，CPU 模型預期 -1 和 1 之間的 Float32 輸入，但網路攝影機會擷取 0 到 255 之間的值。您可以將輸入張量除以 127，將範圍從 [0, 255] 變更為 [0, ~2]，然後再減去 1，即可取得所需的範圍 [-1, ~1]。在 run() 函式中的 tf.tidy() 中加入以下幾行程式碼，即可執行此操作：
CODELAB 第 1 部分：在這裡預先處理網路攝影機畫面。
const expanded = tf.expandDims(image, 0);
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
使用張量後，請務必丟棄。tf.tidy() 會自動對回呼中包含的程式碼執行這項作業，但不支援非同步函式。您必須呼叫 dispose() 方法，手動處理先前建立的圖片張量。
image.dispose();
執行模型並顯示結果
如要在預先處理的輸入上執行模型，請在正規化的張量上呼叫 model.predict()。這會傳回包含每個標籤預測機率的一維張量。將此機率乘以 100，即可取得每個標籤的機率百分比，並使用範例程式碼中的 showPrediction 函式，在畫面上顯示模型的預測結果。
此程式碼也會使用 stats.js，在 model.predict 左右呼叫 stats.begin 和 stats.end 來計算預測所需時間。
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
使用 yarn start 再次執行應用程式，您應該會看到模型中的分類。
效能
目前設定，模型會在 CPU 上執行。這種做法適用於桌上型電腦和大多數筆記型電腦，但如果是在 Raspberry Pi 或其他低功耗裝置上執行，則可能不適合使用這種裝置。在 Raspberry Pi 4 中，您可能會看到每秒 10 個影格，但對某些應用程式而言，速度可能不夠快。如要在不使用速度較快的機器的情況下獲得更好的效能，您可以使用 Coral Edge TPU 形式的應用程式專用晶片。
5. 在應用程式中執行 Coral 模型
如果你沒有珊瑚紅裝置，可以略過這個部分。
本程式碼研究室的步驟是以您在上一節編寫的程式碼為基礎，但如果想要從簡潔的插入畫面開始，請改用 cpu_inference_working 查核點。
執行 Coral 模型的步驟與執行 CPU 模型的步驟幾乎相同。主要差異在於模型格式。由於 Coral 僅支援 uint8 張量，因此模型已量化。這會影響傳遞至模型的輸入張量和其傳回的輸出張量。另一個差別是，模型必須透過 Edge TPU 編譯器進行編譯，才能在 Coral TPU 上執行。TeachableMachine 已完成這個步驟，但您可以參閱 Coral 說明文件，瞭解如何為其他模型執行這項操作。
將 Coral 模型檔案新增至應用程式
將訓練分類器時下載的 converted_edgetpu.zip 模型檔案解壓縮。封存檔案包含兩個檔案，model_edgetpu.tflite 是已儲存的 TFLite 模型，包括模型圖和權重。labels.txt 包含人類可讀的標籤，適用於模型預測的類別。將模型檔案放在 coral_model 目錄中。
安裝依附元件
執行 Coral 模型需要 Edge TPU 執行階段程式庫。繼續操作前，請先按照設定操作說明完成安裝程序。
珊瑚紅裝置以 TFLite 委派身分存取。如要透過 JavaScript 存取，請安裝 coral-tflite-delegate 套件：
npm install --save coral-tflite-delegate
接著，在 renderer.js 檔案頂端加入這一行以匯入委派：
const {CoralDelegate} = require('coral-tflite-delegate');
載入模型
現在可以載入珊瑚紅模型了。這項操作的方式與 CPU 模型相同，只不過現在要將選項傳遞至 loadTFLiteModel 函式來載入 Coral 委派項目。
const coralModelPath = './coral_model/model_edgetpu.tflite';
const options = {delegates: [new CoralDelegate()]};
const coralModel = await loadTFLiteModel(coralModelPath, options);
標籤與 CPU 模型的標籤相同，無須載入標籤。
新增切換 CPU 和珊瑚紅的按鈕
新增 Coral 模型和上一節新增的 CPU 型號。同時執行兩者會很難看到效能差異，因此使用切換鈕即可在 Coral 和 CPU 執行作業間切換。
使用此程式碼新增按鈕：
let useCoralDelegate = false;
const toggleCoralButton = document.createElement('button');
function toggleCoral() {
useCoralDelegate = !useCoralDelegate;
toggleCoralButton.innerText = useCoralDelegate
? 'Using Coral. Press to switch to CPU.'
: 'Using CPU. Press to switch to Coral.';
}
toggleCoralButton.addEventListener('click', toggleCoral);
toggleCoral();
document.body.appendChild(toggleCoralButton);
讓我們在 run() 函式中連結這個條件。如果 useCoralDelegate 為 false，則應執行 CPU 版本。否則，它會執行珊瑚紅版本 (但目前只會執行什麼動作)。在 if 陳述式中納入執行 CPU 模型的程式碼。請注意，expanded 張量不在 if 陳述式內，因為 Coral 模型會使用它。
// NOTE: Don't just copy-paste this code into the app.
// You'll need to edit the code from the CPU section.
const expanded = tf.expandDims(image, 0);
if (useCoralDelegate) {
// CODELAB part 2: Run Coral prediction here.
} else {
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
}
執行模型
珊瑚紅模型預期的 uint8 張量介於 0 到 255 之間，因此輸入不需要正規化。不過輸出也是介於 0 到 255 之間的 uint8 張量。這需要先轉換為 0 到 100 的浮點值，才會顯示。
CODELAB 第 2 部分：在這裡執行珊瑚紅預測。(這是上方程式碼片段的一部分)。
stats.begin();
const prediction = coralModel.predict(expanded);
stats.end();
const percentage = tf.div(tf.mul(prediction, tf.scalar(100)), tf.scalar(255));
showPrediction(percentage.dataSync(), labels);
使用 yarn start 再次執行應用程式，應用程式應會顯示 Coral 加速器的分類。
如果想切換珊瑚紅和 CPU 推論，只要按下按鈕即可。您可能會發現，珊瑚紅模型的可信度排名不如 CPU 模型的可信度，且最終是以平均小數點結尾。這種精確度的損失，是在 Coral 上執行量化模型的取捨。實務上通常沒有影響，但需要注意的是。
效能注意事項
畫面顯示的影格速率包含預先處理和後續處理作業，因此無法代表珊瑚紅的硬體功能。按一下 FPS 計量器，直到顯示延遲時間 (以毫秒為單位)，這只評估對 model.predict 的呼叫，即可進一步瞭解效能。不過，這仍包含將 Tensor 移至 TFLite 原生 C 繫結所需的時間，以及轉移至珊瑚紅裝置所需的時間，因此不是理想的測量結果。如需更準確的 C++ 編寫效能基準，請參閱 EdgeTPU 基準頁面。
另外也請注意，影片是使用筆電 (而非 Raspberry Pi) 錄製，因此你可能會看到不同的 FPS。
加快 Coral 預先處理速度
在某些情況下，您可以切換 TFJS 後端來加快預先處理速度。預設後端為 WebGL，適合用於大型可平行處理的作業，但這個應用程式在預先處理階段的執行並非如此 (唯一使用的運算是 expandDims，不採用平行處理)。您可以在檔案頂端的匯入後加入這一行，立即切換至 CPU 後端，以避免將張量移入或移出 GPU 時發生額外的延遲。
tf.setBackend(‘cpu');
這也會影響 TFLite CPU 模型的預先處理作業 (「會」平行處理)，因此經過這項變更後，模型的執行速度會大幅變慢。
6. 使用 WebNN 加快 CPU 模型速度
如果您沒有珊瑚加速器，或只是想透過其他方式加快模型速度，則可使用 WebNN TFLite 委派。這個委派代表使用 Intel 處理器內建的機器學習硬體，透過 OpenVINO 工具包加快模型推論速度。因此，除了本程式碼研究室的設定部分，當中還有其他需求條件，您必須安裝 OpenVINO 工具包。請務必先根據支援的目標系統平台檢查設定，再繼續操作。請注意，WebNN 委派目前不支援 macOS。
安裝 OpenVINO 工具包
OpenVINO 工具包採用 Intel 處理器內建的機器學習硬體，可加快模型速度。您可以從 Intel 下載預先編譯版本，或是從原始碼建構。安裝 OpenVINO 的方法有很多種，但為了進行本程式碼研究室，建議您使用 Windows 或 Linux 的安裝程式指令碼。請務必安裝 2021.4.2 LTS 執行階段版本，因為其他版本可能不相容。執行安裝程式後，請確認您已按照 Linux 或 Windows ( 永久解決方案) 的安裝操作說明來設定殼層的環境變數，或是執行位於 webnn-tflite-delegate 目錄中的 setupvars.sh (Linux) 或 setupvars.bat (Windows) 指令。
確認 WebNN 委派代表正常運作
如要驗證 WebNN 委派作業是否正常運作，請針對存放區根目錄中的 webnn-tflite-delegate 套件執行整合測試。如要執行整合測試，請在套件的 目錄中執行下列指令：
# In webnn-tflite-delegate/
npx yarn
npx yarn test-integration
輸出內容應如下所示：
WebNN delegate: WebNN device set to 0.
INFO: Created TensorFlow Lite WebNN delegate for device Default and power Default.
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
label: wine bottle
score: 0.934505045413971
.
1 spec, 0 failures
Finished in 0.446 seconds
Randomized with seed 58441 (jasmine --random=true --seed=58441)
Done in 8.07s.
如果看到類似下方的輸出內容，表示設定錯誤：
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 05938
Started
error Command failed with exit code 3221225477.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
這個輸出內容很有可能表示您尚未設定 OpenVINO 的環境變數。如要暫時設定這些設定，請執行 setupvars.sh (Linux) 或 setupvars.bat (Windows) 指令，但您也可以按照 Linux 或 Windows ( 永久解決方案) 的操作說明加以永久設定。如果你使用的是 Windows，請參閱
setupvars.bat
指令不支援 Git bash，因此請務必透過 Windows 命令提示字元執行這個程式碼研究室以及其他指令。
安裝 WebNN 委派
安裝 OpenVINO 後，您現在可以使用 WebNN 加快 CPU 模型的速度。本節的程式碼研究室是以您在「在您的應用程式中執行 CPU 模型」中撰寫的程式碼為基礎專區。您可以使用這個步驟中編寫的程式碼，但如果您已完成「珊瑚紅」部分，請改用 cpu_inference_working 檢查點，這樣系統會先使用乾淨的插入畫面。
WebNN 委派的 Node.js 部分則會在 npmjs 上發布。如要安裝這個套件，請執行下列指令：
npm install --save webnn-tflite-delegate
接著，在 renderer.js 檔案頂端加入這一行以匯入委派：
const {WebNNDelegate, WebNNDevice} = require('webnn-tflite-delegate');
WebNN 委派支援在 CPU 或 GPU 上執行；WebNNDevice 可讓您選擇要使用的裝置。
載入模型
現在您已經準備好在啟用 WebNN 委派的情況下載入模型。針對 Coral，您必須載入不同的模型檔案，但 WebNN 支援與 TFLite 相同的模型格式。將 WebNNDelegate 新增至傳遞至模型的委派清單以啟用：
let webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice: WebNNDevice.DEFAULT})],
});
你不必再次載入標籤，因為這是相同的模型。
新增切換 TfLite CPU 和 WebNN 的按鈕
現在模型的 WebNN 版本已準備就緒，請新增按鈕，在 WebNN 和 TfLite CPU 推論之間切換。但同時執行兩者，會很難看到成效差異。
使用下列程式碼新增按鈕 (請注意，此按鈕實際上不會切換模型)：
let useWebNNDelegate = false;
const divElem = document.createElement('div');
const toggleWebNNButton = document.createElement('button');
function toggleWebNN() {
useWebNNDelegate = !useWebNNDelegate;
toggleWebNNButton.innerHTML = useWebNNDelegate
? 'Using WebNN. Press to switch to TFLite CPU.'
: 'Using TFLite CPU. Press to switch to WebNN.';
divElem.hidden = useWebNNDelegate ? false : true;
}
toggleWebNNButton.addEventListener('click', toggleWebNN);
toggleWebNN();
document.body.appendChild(toggleWebNNButton);
document.body.appendChild(divElem);
此程式碼也會新增 div 元素，您可以在下一節中用來設定 WebNN 設定。
新增下拉式選單以切換 WebNN 裝置
WebNN 支援在 CPU 和 GPU 上執行，因此請新增下拉式選單，以便在兩者間切換。將這段程式碼加到建立按鈕的程式碼後方：
// Create elements for WebNN device selection
divElem.innerHTML = '<br/>WebNN Device: ';
const selectElem = document.createElement('select');
divElem.appendChild(selectElem);
const webnnDevices = ['Default', 'GPU', 'CPU'];
// append the options
for (let i = 0; i < webnnDevices.length; i++) {
var optionElem = document.createElement('option');
optionElem.value = i;
optionElem.text = webnnDevices[i];
selectElem.appendChild(optionElem);
}
現在，如果您執行應用程式，就會看到列出「Default」、「GPU」和「CPU」的下拉式選單。由於下拉式選單尚未連結完畢，選擇其中一項後，系統目前還不會執行任何動作。
透過下拉式選單變更裝置
如要連接下拉式選單來變更使用的 WebNN 裝置，請在下拉式選單選取器元素的 change 事件中加入事件監聽器。當所選值有所變更時，請在委派選項中選取對應的 WebNN 裝置，重新建立 WebNN 模型。
在新增下拉式選單的程式碼後方，加入下列程式碼：
selectElem.addEventListener('change', async () => {
let webnnDevice;
switch(selectElem.value) {
case '1':
webnnDevice = WebNNDevice.GPU;
break;
case '2':
webnnDevice = WebNNDevice.CPU;
break;
default:
webnnDevice = WebNNDevice.DEFAULT;
break;
}
webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice})],
});
});
這項變更生效後，下拉式選單會在每次變更時，使用正確設定建立新的模式。接下來，讓我們連結 WebNN 模型並用於推論。
執行 WebNN 模型
WebNN 模型已可供使用，但切換 WebNN 和 TfLite CPU 的按鈕目前並未切換模型。如要切換模型，您必須先在程式碼研究室的第一部分載入 TfLite CPU 模型時重新命名 model 變數。
變更下列程式碼...
const model = await loadTFLiteModel(modelPath);
...以便比對這行程式碼。
const cpuModel = await loadTFLiteModel(modelPath);
當 model 變數重新命名為 cpuModel 時，將其新增至 run 函式，以便根據按鈕狀態選擇正確的模型：
let model;
if (useWebNNDelegate) {
model = webnnModel;
} else {
model = cpuModel;
}
現在，當您執行應用程式時，該按鈕會在 TfLite CPU 和 WebNN 之間切換。
如果您有整合的 Intel GPU，也可以切換 WebNN CPU 和 GPU 推論。
效能注意事項
畫面顯示的影格速率包含預先處理和後續處理作業，因此無法代表 WebNN 的能力。按一下 FPS 計量器，直到顯示延遲時間 (以毫秒為單位)，這只評估對 model.predict 的呼叫，即可進一步瞭解效能。不過，這仍包含將 Tensor 移至 TFLite 原生 C 繫結所需的時間，因此不是理想的測量結果。
7. 恭喜
恭喜！您剛剛在 Electron 中使用 tfjs-tflite-node 完成第一個 Coral / WebNN 專案。
立即試用，並針對各種圖片進行測試。您也可以在 TeachableMachine 上訓練新模型，以完全不同的分類方式。
重點回顧
在本程式碼研究室中，您已瞭解以下內容：
- 如何安裝及設定 tfjs-tflite-node npm 套件，以在 Node.js 中執行 TFLite 模型。
- 如何安裝 Edge TPU 執行階段程式庫，以在 Coral 裝置上執行模型。
- 如何使用 Coral Edge TPU 加快模型推論速度。
- 如何使用 WebNN 加快模型推論速度。
後續步驟
既然有了初步工作基礎，接下來您可以思考哪些創意構想，讓這個機器學習模型執行器應用到您目前正在開發的應用實例中。或許，您可以在快速且平價的推論過程中，徹底改變您所合作的產業；或者，您也可以修改烤麵包機，在麵包看起來恰到好處時停止烤吐司。一切都有無限的可能。
如想進一步瞭解 TeachableMachine 如何訓練您使用的模型，請參閱 Transfer Learning 程式碼研究室。如果你想尋找其他支援珊瑚紅的模型，例如語音辨識及姿勢評估模型，請參閱 coral.ai/models。你也可以在 TensorFlow Hub 找到這些模型的 CPU 版本和許多其他版本。
分享您的成果
此外，你可以輕鬆將今日成果拓展至其他創意用途，建議跳脫傳統思維並持續嘗試入侵。
請記得在社群媒體上標記我們，並加上 #MadeWithTFJS 主題標記，你的專案就有機會登上我們的 TensorFlow 網誌，甚至是日後的活動。我們很期待看到你的作品。