1. はじめに
最終更新日: 2022 年 4 月 11 日
この Codelab では、Teachable Machine を使用して画像分類モデルをトレーニングし、強力かつ柔軟な機械学習ライブラリである TensorFlow.js を使用して Coral ハードウェア アクセラレーションで実行する方法を学習します。 JavaScript ウェブカメラの画像を表示し、Coral Edge TPU で分類する Electron アプリを作成します。この Codelab の完全に動作するバージョンは、sig-tfjs GitHub リポジトリで入手できます。
Coral デバイスが必要ですか？
いいえ。Coral デバイスなしでこの Codelab を試すことはできますが、代わりに WebNN アクセラレータを使用することでデスクトップ パソコンで優れたパフォーマンスを得ることができます。
作成するアプリの概要
この Codelab では、画像を分類する Electron アプリを作成します。アプリ:
- ウェブカメラの画像から、トレーニング済みのモデルで定義されたカテゴリへの分類が可能です。
- Coral アクセラレータを使用して、パフォーマンスを向上させることができます（可能な場合）。
- プラットフォームでサポートされている場合、WebNN を使用してパフォーマンスを向上させる。
学習内容
- Node.js で TFLite モデルを実行するために、tfjs-tflite-node NPM パッケージをインストールしてセットアップする方法。
- Edge TPU ランタイム ライブラリをインストールして、Coral デバイスでモデルを実行する方法。
- Coral Edge TPU を使用してモデルの推論を高速化する方法。
- WebNN を使用してモデルの推論を高速化する方法。
この Codelab では、Node.js での TFLite に焦点を当てます。関連のない概念やコードブロックについては詳しく触れず、コードはコピーして貼るだけの状態で提供されています。
必要なもの
この Codelab を完了するには、以下が必要です。
- ウェブカメラが設置されているパソコン。
- Coral では、デスクトップで Raspberry Pi OS（64 ビット）を実行する Raspberry Pi をおすすめします。
- WebNN の場合、Ubuntu 20.04 または Windows 10 を実行する Intel x86-64 マシンをおすすめします。
- Node.js バージョン 12 以上。
- JavaScript に関する知識。
- （推奨）モデルを高速化するコーラル USB アクセラレータ。
2. 設定する
コードを取得する
このプロジェクトに必要なすべてのコードを Git リポジトリに格納しました。まず、コードを取得してお好みの開発環境で開きます。この Codelab では、デスクトップで Raspberry Pi OS（64 ビット）を実行する Raspberry Pi を使用することをおすすめします。Coral アクセラレータを簡単に接続することができます。
強く推奨: Git を使用して Raspberry Pi でリポジトリのクローンを作成する
コードを取得するには、新しいターミナル ウィンドウを開き、リポジトリのクローンを作成します。
git clone https://github.com/tensorflow/sig-tfjs.git
Codelab 用に編集する必要があるファイルはすべて、tfjs-tflite-node-codelab ディレクトリ（sig-tfjs 内）にあります。このディレクトリには、starter_code、cpu_inference_working、coral_inference_working、webnn_inference_working というサブディレクトリがあります。これらは、この Codelab のステップのチェックポイントです。
リポジトリ内の他のファイルには、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 / その他の OS
コンパイル済みのバイナリは、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 が含まれている場合、Coral デバイスは検出されていません。Edge TPU ランタイム ライブラリがインストールされ、Coral デバイスがパソコンに接続されていることを確認します。Coral のスタートガイドに沿って、Coral バインディングの Python バージョンをテストすることもできます。Python バージョンが動作するにもかかわらずテストが失敗する場合は、バグレポートを提出してお知らせください。
スターター コードを実行する
これで、スターター コードを実行する準備が整いました。手順は次のとおりです。
tfjs-tflite-node-codelabディレクトリのstarter_codeディレクトリに移動します。npm installを実行して依存関係をインストールします。npm startを実行してプロジェクトを起動します。パソコンのウェブカメラの動画フィードを表示するアプリが開きます。
出発点
まずは、この Codelab 用に設計された基本的な Electron カメラアプリを使用します。コードは Codelab のコンセプトを示すために簡略化されており、エラー処理はほとんどありません。本番環境のアプリでコードを再利用する場合は、必ずエラーを処理し、すべてのコードを完全にテストしてください。
スターター コードの確認
このスターター コードには多くのファイルがありますが、編集が必要なのは renderer.js だけです。動画フィードや HTML 要素など、ページに表示される内容を制御し、機械学習モデルをアプリに追加します。他のファイルには index.html ファイルがありますが、それには renderer.js ファイルを読み込むだけです。また、Electron のエントリ ポイントである main.js ファイルもあります。この API によって、アプリを開いたときや閉じたときの動作などを管理できます。ただし、アプリに変更を加える必要はありません。
デバッガを開く
この Codelab では、アプリのデバッグが必要になることがあります。このアプリは Electron をベースとしているため、Chrome デバッガが組み込まれています。ほとんどのプラットフォームでは、Ctrl+Shift+I キーで開くことができます。[Console] タブをクリックして、アプリからのログとエラー メッセージを確認します。
解説することはそれほど多くないので、まずは画像分類のトレーニングを行います。
3. 画像分類のトレーニング
このセクションでは、TFLite と Coral バージョンのカスタム画像分類モデルをトレーニングします。
分類器をトレーニングする
画像分類器は、入力画像を受け取ってラベルを割り当てます。この Codelab では、「Teachable Machine」を使用してブラウザでモデルをトレーニングします。このセクションのトレーニングを高速化するには、Raspberry Pi の代わりにデスクトップ パソコンまたはノートパソコンを使用してください。ただし、結果として得られるファイルを Pi にコピーする必要があります。
これで、モデルをトレーニングする準備が整いました。トレーニングするモデルの種類がわからない場合でも、簡単に使用できるモデルは人感センサーです。これは、人物がフレームに収まっているかどうかを検知するだけです。
- 新しいタブで Teachable Machine トレーニング ページを開きます。
- [イメージ プロジェクト]、[標準イメージモデル] の順に選択します。
- クラスごとに画像サンプルを追加します。 ウェブカメラの入力を使用すると、これが簡単に行えます。クラスの名前を変更することもできます。
- 各クラスに十分なデータを収集したら（通常は 50 サンプルで十分）、モデルのトレーニングを押します。
モデルのトレーニングが完了すると、モデルの出力のプレビューが表示されます。
モデルに異なる入力をしてみます。間違って分類された入力を見つけた場合、それをトレーニング データに追加してモデルを再トレーニングします。
- モデルの精度に問題がなければ、[モデルをエクスポート] をクリックします。モデルの 2 つのバージョンをダウンロードする必要があります。
- モデルを TensorFlow Lite 浮動小数点モデルとしてエクスポートします。これにより、
converted_tflite.zipというファイルがダウンロードされます。。 - モデルを Tensorflow Lite EdgeTPU モデルとしてエクスポートします。これにより、Coral Edge TPU 上で実行される
converted_edgetpu.zipというファイルがダウンロードされます。
4.アプリで CPU モデルを実行する
モデルをトレーニングしたので、次はそれをアプリに追加します。このセクションを終了すると、アプリはデバイスの CPU を使用してモデルを実行できるようになります。
モデルファイルをアプリに追加する
分類器のトレーニング時にダウンロードした converted_tflite.zip モデルファイルを解凍します。アーカイブには 2 つのファイルがあります。model_uquant.tflite は、保存された TFLite モデルで、モデルのグラフと重み付けが含まれます。labels.txt には、モデルが予測するクラスの人が読める形式のラベルが含まれます。両方のファイルを modeldirectory に配置します。
依存関係をインストールする
モデルの読み込みと入力の前処理には、TensorFlow.js からの依存関係がいくつか必要です。
tfjs-tflite-node: Node.js で TFLite モデルを実行するための TensorFlow.js パッケージ。@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 URL からモデルを読み込むことができます。モデルとその重みを読み込むには、次の行を main 関数に追加します。
const modelPath = './model/model_unquant.tflite';
const model = await loadTFLiteModel(modelPath);
const labels = fs.readFileSync('./model/labels.txt', 'utf8')
.split('\n');
モデルを実行する
モデルの実行には 3 つのステップがあります。まず、ウェブカメラから入力フレームを取得して前処理します。次に、そのフレームでモデルを実行して、予測を取得します。その後、予測をページに表示します。
ウェブカメラの入力を前処理する
現時点では、ウェブカメラは単なる HTML 要素であり、表示されるフレームは JavaScript renderer.js ファイルでは使用できません。TensorFlow.js では、ウェブカメラからフレームを取得するために tf.data.webcam が用意されています。これは、簡単にカメラからフレームをキャプチャできる capture() メソッドを提供します。
使用するには、次のセットアップ コードを main() に追加します。
CODELAB パート 1: tf.data.webcam をここで設定します。
const tensorCam = await tf.data.webcam(webcam);
次に、フレームごとに画像をキャプチャするには、次の行を run() に追加します。
CODELAB パート 1: ウェブカメラのフレームをキャプチャします。
const image = await tensorCam.capture();
また、モデルとの互換性を確保するために各フレームを前処理する必要もあります。この Codelab で使用するモデルは入力シェイプ [1, 224, 224, 3] であるため、224x224 ピクセルの RGB 画像を想定しています。 tensorCam.capture() の形状は [224, 224, 3] であるため、tf.expandDims を使用してテンソルの前に追加のディメンションを追加する必要があります。また、CPU モデルは Float32 入力を -1 ～ 1 の範囲を想定していますが、ウェブカメラは 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() メソッドを呼び出して、手動で破棄する必要があります。
CODELAB パート 1: ウェブカメラのフレームはこちらに廃棄してください。
image.dispose();
モデルを実行して結果を表示する
前処理された入力に対してモデルを実行するには、正規化されたテンソルで model.predict() を呼び出します。これは、各ラベルの予測確率を含む 1 次元のテンソルを返します。この可能性に 100 を掛けて各ラベルの確率を計算します。その際、スターター コードに含まれる showPrediction 関数を使用して、モデルの予測を画面に表示します。
また、このコードでは stats.js を使用して、model.predict の周囲に stats.begin と stats.end を呼び出し、予測に要する時間を測定します。
CODELAB パート 1: モデルを実行し、結果をこちらに表示します。
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 FPS 前後が表示されますが、これは一部のアプリケーションには十分でない可能性があります。より高速なマシンを使用せずにパフォーマンスを向上させるには、Coral Edge TPU の形式でアプリケーション固有のシリコンを使用します。
5. アプリで Coral モデルを実行する
Coral デバイスがない場合は、このセクションをスキップできます。
Codelab のこのステップは、前のセクションで作成したコードに基づいていますが、最初に cpu_inference_working チェックポイントを使用することもできます。
Coral モデルを実行する手順は、CPU モデルを実行する手順とほぼ同じです。主な違いはモデルの形式です。Coral は uint8 テンソルのみをサポートしているため、モデルが量子化されます。これは、モデルに渡される入力テンソルと、モデルから返される出力テンソルに影響します。もう一つの違いは、モデルを Coral TPU で実行するには Edge TPU コンパイラでコンパイルする必要があることです。TeachableMachine はすでにこの手順を行っていますが、他のモデルでこれを行う方法については、Coral のドキュメントをご覧ください。
Coral モデルファイルをアプリに追加する
分類器のトレーニング時にダウンロードした converted_edgetpu.zip モデルファイルを解凍します。このアーカイブには 2 つのファイルが含まれています。model_edgetpu.tflite は、保存された TFLite モデルで、モデルのグラフと重み付けが含まれます。labels.txt には、モデルが予測するクラスの人が読める形式のラベルが含まれます。モデルファイルを coral_model ディレクトリに配置します。
依存関係をインストールする
Coral モデルを実行するには、Edge TPU ランタイム ライブラリが必要です。続行する前に、セットアップ手順に沿ってインストールしてください。
Coral デバイスは TFLite 代理人としてアクセスされます。JavaScript からこれらにアクセスするには、coral-tflite-delegate パッケージをインストールします。
npm install --save coral-tflite-delegate
次に、renderer.js ファイルの先頭に次の行を追加して、デリゲートをインポートします。
CODELAB パート 2: デリゲートをここにインポートします。
const {CoralDelegate} = require('coral-tflite-delegate');
モデルを読み込む
Coral モデルを読み込む準備が整いました。これは Coral デリゲートを読み込むオプションを loadTFLiteModel 関数に渡す点を除けば、CPU モデルの場合と同じです。
CODELAB パート 2: デリゲート モデルをここに読み込む
const coralModelPath = './coral_model/model_edgetpu.tflite';
const options = {delegates: [new CoralDelegate()]};
const coralModel = await loadTFLiteModel(coralModelPath, options);
ラベルは CPU モデルと同じであるため、読み込む必要はありません。
CPU と Coral を切り替えるボタンを追加する
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 バージョンを実行します。それ以外の場合は、Coral バージョンを実行します（現時点では何もしません）。CPU モデルの実行コードを if ステートメントでラップします。Coral モデルでは expanded ステートメントを使用しているため、if ステートメントでは省略されています。
CODELAB パート 2: デリゲートをここで使用するかどうかの確認
// 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);
}
モデルを実行する
モデルの Coral バージョンは 0 から 255 までの uint8 テンソルを想定しているため、入力を正規化する必要はありません。ただし、出力は 0 ～ 255 の範囲の uint8 テンソルでもあります。0 から 100 の浮動小数点数に変換しないと表示されない。
CODELAB パート 2: Coral 予測をここで実行する。（上記のコード スニペットの一部です）。
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 アクセラレータの分類が表示されます。
ボタンを押して Coral と CPU の推論を切り替えることができます。Coral モデルの信頼ランキングは CPU モデルよりも信頼度が低く、通常は小数点以下が 1 桁で終わることにお気づきでしょうか。この精度の低下は、Coral で量子化モデルを実行するというトレードオフにつながります。通常、これはそれほど重要なことではありませんが、留意しなければならない点があります。
掲載結果に関する注意事項
表示されるフレームレートには、前処理と後処理が含まれるため、Coral ハードウェアが何の機能に対応しているかを表すものではありません。model.predict の呼び出しだけを測定するレイテンシ（ミリ秒単位）が表示されるまで、FPS メーターをクリックすると、パフォーマンスをより詳しく把握できます。ただし、テンソルを TFLite ネイティブ C バインディング、次に Coral デバイスに移動するまでの時間は依然として含まれているため、完全な測定値ではありません。C++ で書かれたパフォーマンス ベンチマークの精度については、EdgeTPU ベンチマーク ページをご覧ください。
また、動画は Raspberry Pi ではなくノートパソコンで録画されたため、別の FPS が表示される可能性があります。
Coral の前処理の高速化
場合によっては、TFJS バックエンドを切り替えることで前処理を高速化できます。デフォルトのバックエンドは WebGL です。WebGL は、並列処理が可能な大規模なオペレーションに適しています。ただし、このアプリは前処理フェーズでほとんどそのことを行いません（使用する op は expandDims のみで、並行処理はされません）。CPU バックエンドに切り替えると、GPU との間でテンソルを移動する際の余分なレイテンシを回避できます。ファイルの先頭でインポートを行った後に、次の行を追加します。
tf.setBackend(‘cpu');
これは、並列化された TFLite CPU モデルの前処理にも影響するため、この変更によってモデルの実行速度は大幅に低下します。
6. WebNN による CPU モデルの高速化
Coral アクセラレータがない場合や、モデルを高速化する別の方法を試したい場合は、WebNN TFLite デリゲートを使用できます。このデリゲートは、Intel プロセッサに組み込まれた機械学習ハードウェアを使用して、OpenVINO ツールキットでモデルの推論を高速化します。そのため、この Codelab の設定セクションで説明していない追加要件があり、OpenVINO ツールキットをインストールする必要があります。続行する前に、サポートされているターゲット システム プラットフォームとの間で設定を確認してください。ただし、WebNN デリゲートは macOS をまだサポートしていません。
OpenVINO ツールキットをインストールする
OpenVINO ツールキットでは、Intel プロセッサに組み込まれた機械学習ハードウェアを使用してモデルが高速化されます。Intel からプリコンパイルされたバージョンをダウンロードするか、ソースからビルドできます。OpenVINO のインストール方法はいくつかありますが、この Codelab では Windows または Linux 用のインストーラ スクリプトを使用することをおすすめします。他のバージョンと互換性がない可能性があるため、必ず 2021.4.2 LTS ランタイム バージョンをインストールしてください。インストーラを実行した後、Linux または Windows のインストール手順の説明に沿ってシェルの環境変数を設定します（恒久的な解決策）。 ）、または webnn-tflite-delegate ディレクトリにある setupvars.sh（Linux）または setupvars.bat（Windows）コマンドを実行します。
WebNN Delegater が機能していることを確認する
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 をサポートしません。そのため、この Codelab のコマンドを実行し、Windows コマンド プロンプトから他のコマンドを実行してください。
WebNN Delegate をインストールする
OpenVINO がインストールされているので、WebNN で CPU モデルを高速化できます。Codelab のこのセクションは、「アプリの CPU モデルの実行」セクションで記述したコードに基づいています。この手順で自分で作成したコードを使用できますが、Coral セクションがすでに完了している場合は、代わりに cpu_inference_working チェックポイントを使用して、最初に新しいコードを入力します。
WebNN デリゲートの Node.js 部分は、npmjs に配布されています。インストールするには、次のコマンドを実行します。
npm install --save webnn-tflite-delegate
次に、renderer.js ファイルの先頭に次の行を追加して、デリゲートをインポートします。
CODELAB パート 2: デリゲートをここにインポートします。
const {WebNNDelegate, WebNNDevice} = require('webnn-tflite-delegate');
WebNN デリゲートは、CPU または GPU での実行をサポートします。 WebNNDevice では、使用する API を選択できます。
モデルを読み込む
これで、WebNN デリゲートを有効にしてモデルを読み込む準備が整いました。Coral の場合は別のモデルファイルを読み込む必要がありましたが、WebNN は TFLite と同じモデル形式をサポートしています。モデルに渡す委任のリストに WebNNDelegate を追加して、有効にします。
CODELAB パート 2: デリゲート モデルをここに読み込む
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);
また、このコードでは、次のセクションで WebNN 設定を構成するために使用する div 要素も追加します。
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);
}
アプリを実行すると、デフォルト、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 を切り替えるボタンではまだモデルは切り替わりません。モデルを切り替えるには、まず Codelab の最初のセクションで TfLite CPU モデルを読み込んだ時点から、model 変数の名前を変更する必要があります。
次の行を変更する...
const model = await loadTFLiteModel(modelPath);
...この行と一致するようにします。
const cpuModel = await loadTFLiteModel(modelPath);
model 変数の名前を cpuModel に変更し、これを run 関数に追加して、ボタンの状態に基づいて適切なモデルを選択します。
CODELAB パート 2: デリゲートをここで使用するかどうかの確認
let model;
if (useWebNNDelegate) {
model = webnnModel;
} else {
model = cpuModel;
}
これで、アプリを実行すると TfLite CPU と WebNN が切り替わります。 
さん
Intel GPU が統合されている場合は、WebNN CPU と GPU 推論を切り替えることもできます。
掲載結果に関する注意事項
表示されるフレームレートには、前処理と後処理が含まれるため、WebNN が何の機能を備えているかを表すものではありません。model.predict の呼び出しだけを測定するレイテンシ（ミリ秒単位）が表示されるまで、FPS メーターをクリックすると、パフォーマンスをより詳しく把握できます。ただし、これにはテンソルを TFLite のネイティブ C バインディングに移動するのにかかる時間が含まれるため、完全な測定にはなりません。
7. 完了
これで、Electron で tfjs-tflite-node を使用して最初の Coral / WebNN プロジェクトを完了し、
さまざまな画像で実際にお試しください。TeachableMachine で新しいモデルをトレーニングして、まったく異なるものを分類することもできます。
内容のまとめ
この Codelab では、以下のことを学びました。
- Node.js で TFLite モデルを実行するため、tfjs-tflite-node npm パッケージをインストールしてセットアップする方法。
- Edge TPU ランタイム ライブラリをインストールして、Coral デバイスでモデルを実行する方法。
- Coral Edge TPU を使用してモデルの推論を高速化する方法。
- WebNN でモデルの推論を高速化する方法。
次のステップ
これで、実際に使える基礎的な知識を得ることができました。クリエイティブなアイデアを思いついたら、この機械学習モデルを実際のユースケースに拡張して応用できるでしょうか。 たとえば、手早く推定できる手頃な価格で業界を刷新したり、トーストをトーストにしたりしてトーストを直せば見やすくなるかもしれません。できることは無限にあります。
TeachableMachine が使用したモデルのトレーニング方法について詳しくは、転移学習に関する Codelab をご覧ください。音声認識や姿勢推定など、Coral で動作する他のモデルをお探しの場合は、coral.ai/models をご覧ください。TensorFlow Hub では、これらのモデルの CPU バージョンなど多くのバージョンを確認できます。
作成したものを共有する
他のクリエイティブ ユースケースでも、今回作成した機能を簡単に拡張できます。また、既成概念にとらわれずに、引き続きハッキングを行うことをおすすめします。
ソーシャル メディアで #MadeWithTFJS ハッシュタグを使用すると、作成したプロジェクトが TensorFlow ブログや 今後のイベント。作品づくりを楽しみにしています。