Edge TensorFlow.js チュートリアル

作業内容

予測を使用したウェブアプリの画像

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

目標

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 からエクスポートしたファイルをローカル ディレクトリにコピーします。

gcloud storage cp gs://${cloud-storage-bucket}/model-export/iod/${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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">
<script>
async function run() {
  const model = await tf.automl.loadObjectDetection('model.json');
  const img = document.getElementById('salad');
  const options = {score: 0.5, iou: 0.5, topk: 20};
  const predictions = await model.detect(img, options);
  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>

  3. （省略可）: <img> タグの src パス属性を書き換えて、独自の画像を指定します。

ウェブアプリを実行する

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

Python

python -m http.server 8000

Node.js

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

http-server -p 8000

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

結果は、ソートされた予測オブジェクトの一覧です。

[
  {
    "box": {
      "left": 105.1,
      "top": 22.2,
      "width": 70.6,
      "height": 55.7
    },
    "label": "Tomato",
    "score": 0.972
  },
  ...
]

API の詳細については、AutoML NPM パッケージ ドキュメントをご覧ください。

仕組み

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

最初の 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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">

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

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

const model = await tf.automl.loadObjectDetection('model.json');
const img = document.getElementById('salad');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);

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

model.detect(img, options) を呼び出して、予測を取得します。この関数は、モデルを通じて単一の画像に対して実行され、予測済みオブジェクトを返します。この関数の入力は、HTML 画像要素、動画要素、3D テンソルです。

model.detect(img, options) 関数は、可能な仕様を指定する任意の options 引数も引き受けます。

  • score - 確率スコアは 0～1 です。デフォルトは 0.5 です。スコアがこのしきい値より低いボックスは無視されます。
  • topk - 最も topk に近いオブジェクトのみが返されます。実際のオブジェクトの数は、この数より少ない場合があります。

  • iou - IoU（Intersection over Union）のしきい値です。IoU は、0 と 1 の間の値をとる指標で、2 つのボックスの重複の測定に使用されます。予測されたボックスは、指定したしきい値を超えて重なり合ってはいません。

    Intersection over union（IoU）を使用したモデル評価の詳細については、モデルの評価のページをご覧ください。

API の詳細については、AutoML NPM パッケージ ドキュメントをご覧ください。

次のステップ

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

次のステップ: