Edge TensorFlow.js チュートリアル

作業内容

このチュートリアルでは、AutoML Vision Edge でトレーニングしてエクスポートした TensorFlow.js 画像分類モデルをダウンロードします。次に、モデルを読み込んで画像の予測を行うウェブページを作成します。

目標

JavaScript コードを記述して、以下を行います。

  • TensorFlow.js ライブラリを使用して、事前にトレーニングされた AutoML Vision Edge 画像分類モデルをウェブページで実行します。

始める前に

AutoML Vision Edge からモデルをトレーニングする

Edge デバイスにモデルをデプロイする前に、Edge デバイスモデルのクイックスタートに沿って AutoML Vision Edge から TensorFlow.js モデルをトレーニングしてエクスポートする必要があります。

最後のステップは、モデルを TensorFlow.js にエクスポートすることです。

更新後の TensorFlow.js モデルのエクスポートのスクリーンショット

クイックスタートを完了すると、次のファイルが Google Cloud Storage にエクスポートされています。

  • ラベル付きの dict.txt ファイル
  • model.json ファイル
  • *.bin 重み付けファイル
Tensorflow.js フォルダの例

モデルファイルをダウンロードする

Google Cloud Storage からエクスポートしたファイルをローカル ディレクトリにコピーします。

gsutil cp gs://${cloud-storage-bucket}/model-export/icn/${model-name}/* ${local-folder}

小さなウェブアプリを作成する

TensorFlow.js モデルファイルをローカルに保存したら、ウェブアプリの作成を開始できます。

  1. モデルファイルを保存したローカル ディレクトリに移動していない場合は、移動します。

  2. 同じローカル ディレクトリに、次の内容の index.html ファイルを作成します。

    index.html

    コードサンプル

    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">
<script>
async function run() {
  const model = await tf.automl.loadImageClassification('model.json');
  const image = document.getElementById('daisy');
  const predictions = await model.classify(image);
  console.log(predictions);
  // Show the resulting object on the page.
  const pre = document.createElement('pre');
  pre.textContent = JSON.stringify(predictions, null, 2);
  document.body.append(pre);
}
run();
</script>

ウェブアプリを実行する

ポート 8000 上の単純な HTTP サーバーを、index.html ファイルのあるディレクトリから起動します。

Python

python3 -m SimpleHTTPServer 8000

Node.js

Node.js をお持ちの場合は、http-server パッケージをグローバルにインストールして実行します。

http-server -p 8000

ブラウザで http://localhost:8000 を開くと、コンソール（[ビュー] > [デベロッパー] > [JavaScript コンソール]）とページに予測結果が表示されます。

ブラウザに表示された TensorFlow.js の予測結果

仕組み

アプリを実行したので、コードの動きを調べてみましょう。

最初の 2 つのスクリプトタグは、NPM パッケージ管理システムで使用可能な TensorFlow.js ライブラリと AutoML ライブラリを読み込みます。

<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>

AutoML NPM パッケージには、AutoML Vision Edge で作成されたモデルを読み込んで実行するための一連の API が用意されています。このパッケージでは、モデルの実行に必要な前処理や後処理（たとえば、画像や動画要素をフィードして、ピクセル値を正規化し、ラベルとスコアを含むソート済みのオブジェクトを返す）を行います。

画像タグは、公開の Google Cloud Storage パスからテスト画像を読み込みます。

<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">

モデルをテストするときは、画像 src をお持ちの画像のパスに置き換えてください。

次に、モデルを読み込んで、画像の予測を行います。

const model = await tf.automl.loadImageClassification('model.json');
const image = document.getElementById('daisy');
const predictions = await model.classify(image);

tf.automl.loadImageClassification(url) でモデルを指定します。この関数は、エクスポートされた model.json ファイルの URL の絶対パスまたは相対パスを受け取ります。この場合、index.html ファイルとモデルファイルが同じディレクトリにあるため、相対パスです。

model.classify(image) を呼び出して、予測を取得します。この関数は、モデルを通じて単一の画像に対して実行され、予測結果を返します。この関数の入力は、HTML 画像要素、動画要素、3D テンソルです。

次のステップ

Edge モデルを使用した TensorFlow.js 画像分類ウェブアプリのチュートリアルを完了しました。ウェブブラウザでウェブアプリを実行し、カスタム Edge モデルとウェブから読み込んだ画像を使用して分類予測を行いました。次に、サンプルコードの一部を調べて、基本的な機能を理解しました。

次のステップ: