画像を分類するシンプルなウェブサイトを作成する

1. 始める前に

この Codelab では、REST と gRPC を使用して TensorFlow Serving を呼び出し、ウェブサイトから画像分類推論を実行する方法を学びます。

前提条件

• HTML や JavaScript などのウェブ開発に関する基本的な知識
• TensorFlow を使用した機械学習に関する基本的な知識（トレーニングとデプロイなど）
• ターミナルと Docker に関する基本的な知識

学習内容

• TensorFlow Hub で事前トレーニング済み画像分類モデルを見つける方法。
• 簡単なウェブサイトを作成し、TensorFlow Serving（REST と gRPC）を使用してダウンロードした画像分類モデルで予測を行う方法。
• 検出結果を UI にレンダリングする方法。

必要なもの

• Docker
• Google Chrome
• Web Server for Chrome
• Node.js と NPM
• Bash
• プロトコル バッファ コンパイラ（gRPC スタブを自分で再生成する場合にのみ必要）
• gRPC-web コード ジェネレータ プラグイン（gRPC スタブを自分で再生成する場合にのみ必要）

2. 設定する

この Codelab のコードをダウンロードするには:

1. この GitHub リポジトリに移動します。
2. [Code] > [Download zip] をクリックして、この Codelab のすべてのコードをダウンロードします。

3. ダウンロードした zip ファイルを解凍して、codelabs ルートフォルダを展開します。このフォルダに必要なリソースがすべて含まれています。

この Codelab では、リポジトリの TFServing/ImageClassificationWeb サブディレクトリ内のファイルのみが必要です。このサブディレクトリには次の 2 つのフォルダが含まれています。

• starter フォルダには、この Codelab で構築するスターター コードが含まれています。
• finished フォルダには、完成したサンプルアプリの完全なコードが含まれています。

3. 依存関係をインストールする

依存関係をインストールするには:

• ターミナルで、starter フォルダに移動し、必要な NPM パッケージをインストールします。

npm install

4. スターター ウェブサイトを実行する

Chrome 用のウェブサーバーを使用して TFServing/ImageClassificationWeb/starter/dist/index.html ファイルを読み込みます。

1. Chrome のアドレスバーに「Chrome://apps/」と入力し、アプリの一覧で [Web Server for Chrome] を探します。
2. Chrome 用ウェブサーバーを起動し、TFServing/ImageClassificationWeb/starter/dist/ フォルダを選択します。
3. [Web Server] 切り替えをクリックして有効にし、ブラウザで http://localhost:8887/ に移動します。

注: これらのポートは後で必要になるため、ポート番号を 8000 または 8080 に変更しないでください。この Codelab が完了するまで、ウェブサーバーをシャットダウンしないでください。

ウェブサイトを実行して操作する

ウェブサイトが表示されます。UI は非常にシンプルです。分類する猫の画像があり、ユーザーは REST または gRPC を使用してデータをバックエンドに送信できます。バックエンドは画像に対して画像分類を実行し、分類結果をウェブサイトに返します。ウェブサイトは結果を表示します。

[Classify] をクリックしても、まだバックエンドと通信できないため、何も起こりません。

5. TensorFlow Serving を使用して画像分類モデルをデプロイする

注: TensorFlow Lite または ML Kit では、TensorFlow Serving にリクエストを送信する代わりに、デバイス上で画像分類を行うこともできます。詳しくは、モバイル画像分類を使ってみるをご覧ください。

画像分類は、画像の内容に基づいて画像を事前定義されたカテゴリに分類する、ごく一般的な ML タスクです。花の分類の例を次に示します。

TensorFlow Hub には、事前トレーニング済みの画像分類モデルが多数あります。この Codelab では、一般的な Inception v3 モデルを使用します。

TensorFlow Serving を使用して画像分類モデルをデプロイするには:

1. Inception v3 モデルファイルをダウンロードします。
2. ダウンロードした .tar.gz ファイルを、7-Zip などの解凍ツールで解凍します。
3. inception_v3 フォルダを作成し、その中に 123 サブフォルダを作成します。
4. 抽出した variables フォルダと saved_model.pb ファイルを 123 サブフォルダに配置します。

inception_v3 フォルダは SavedModel フォルダとして参照できます。123 はバージョン番号の例です。別の番号を選択することもできます。

フォルダ構造は次の画像のようになります。

TensorFlow Serving を開始する

• ターミナルで、Docker を使用して TensorFlow Serving を起動しますが、PATH/TO/SAVEDMODEL は、パソコンの inception_v3 フォルダの絶対パスに置き換えます。

docker pull tensorflow/serving

docker run -it --rm -p 8500:8500 -p 8501:8501 -v "PATH/TO/SAVEDMODEL:/models/inception" -e MODEL_NAME=inception tensorflow/serving

Docker は、まず TensorFlow Serving のイメージを自動的にダウンロードします。これには 1 分ほどかかります。その後、TensorFlow Serving が起動します。次のようなログが出力されます。

2022-02-25 06:01:12.513231: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:206] Restoring SavedModel bundle.
2022-02-25 06:01:12.585012: I external/org_tensorflow/tensorflow/core/platform/profile_utils/cpu_utils.cc:114] CPU Frequency: 3000000000 Hz
2022-02-25 06:01:13.395083: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:190] Running initialization op on SavedModel bundle at path: /models/inception/123
2022-02-25 06:01:13.837562: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:277] SavedModel load for tags { serve }; Status: success: OK. Took 1928700 microseconds.
2022-02-25 06:01:13.877848: I tensorflow_serving/servables/tensorflow/saved_model_warmup_util.cc:59] No warmup data file found at /models/inception/123/assets.extra/tf_serving_warmup_requests
2022-02-25 06:01:13.929844: I tensorflow_serving/core/loader_harness.cc:87] Successfully loaded servable version {name: inception version: 123}
2022-02-25 06:01:13.985848: I tensorflow_serving/model_servers/server_core.cc:486] Finished adding/updating models
2022-02-25 06:01:13.985987: I tensorflow_serving/model_servers/server.cc:367] Profiler service is enabled
2022-02-25 06:01:13.988994: I tensorflow_serving/model_servers/server.cc:393] Running gRPC ModelServer at 0.0.0.0:8500 ...
[warn] getaddrinfo: address family for nodename not supported
2022-02-25 06:01:14.033872: I tensorflow_serving/model_servers/server.cc:414] Exporting HTTP/REST API at:localhost:8501 ...
[evhttp_server.cc : 245] NET_LOG: Entering the event loop ...

注: TensorFlow Serving Docker イメージを起動したら、http://localhost:8501/v1/models/<MODEL_NAME>/metadata にアクセスして入力テンソルと出力テンソルを調べることができます。この Codelab では <MODEL_NAME> を inception に置き換えます。

6. Envoy プロキシを設定する

現在、TensorFlow Serving は Access-Control-Allow-Origin ヘッダーを設定していないため、ブラウザはセキュリティ上の理由から、フロントエンド JavaScript から TensorFlow Serving へのリクエストをブロックします。この問題を回避するには、Envoy などのプロキシを使用して、JavaScript から TensorFlow Serving バックエンドへのリクエストをプロキシする必要があります。

注: プロキシの使用は、本番環境システムのサーバー クラスタのロード バランシングでも標準的な方法です。Envoy 構成ファイル envoy-custom.yaml では、ポート 8000 への REST リクエストはポート 8501 にプロキシされ、ポート 8080 への gRPC リクエストはポート 8500 にプロキシされます。

Envoy を起動する

• ターミナルで、Envoy イメージをダウンロードし、Docker を使用して Envoy を起動します。ただし、PATH/TO/ENVOY-CUSTOM.YAML プレースホルダは、starter フォルダ内の envoy-custom.yaml ファイルの絶対パスに置き換えます。

docker pull envoyproxy/envoy-dev:fd3e8370ddb7a96634c192d1461516e6de1d1797

docker run --add-host host.docker.internal:host-gateway --rm -it -p 9901:9901 -p 8000:8000 -p 8080:8080 -v PATH/TO/ENVOY-CUSTOM.YAML:/envoy-custom.yaml envoyproxy/envoy-dev:fd3e8370ddb7a96634c192d1461516e6de1d1797 -c /envoy-custom.yaml

Docker は、まず Envoy イメージを自動的にダウンロードします。その後、Envoy が起動します。次のようなログが出力されます。

[2022-03-02 07:51:48.563][1][info][main] [source/server/server.cc:436]   response trailer map: 152 bytes: grpc-message,grpc-status
[2022-03-02 07:51:48.681][1][info][main] [source/server/server.cc:772] runtime: {}
[2022-03-02 07:51:48.682][1][info][admin] [source/server/admin/admin.cc:134] admin address: 0.0.0.0:9901
[2022-03-02 07:51:48.683][1][info][config] [source/server/configuration_impl.cc:127] loading tracing configuration
[2022-03-02 07:51:48.683][1][info][config] [source/server/configuration_impl.cc:87] loading 0 static secret(s)
[2022-03-02 07:51:48.683][1][info][config] [source/server/configuration_impl.cc:93] loading 2 cluster(s)
[2022-03-02 07:51:48.687][1][info][config] [source/server/configuration_impl.cc:97] loading 2 listener(s)
[2022-03-02 07:51:48.694][1][info][config] [source/server/configuration_impl.cc:109] loading stats configuration
[2022-03-02 07:51:48.696][1][info][main] [source/server/server.cc:868] starting main dispatch loop
[2022-03-02 07:51:48.881][1][info][runtime] [source/common/runtime/runtime_impl.cc:446] RTDS has finished initialization
[2022-03-02 07:51:48.881][1][info][upstream] [source/common/upstream/cluster_manager_impl.cc:207] cm init: all clusters initialized
[2022-03-02 07:51:48.881][1][info][main] [source/server/server.cc:849] all clusters initialized. initializing init manager
[2022-03-02 07:51:48.881][1][info][config] [source/server/listener_manager_impl.cc:784] all dependencies initialized. starting workers
[2022-03-02 07:51:48.902][1][warning][main] [source/server/server.cc:747] there is no configured limit to the number of allowed active connections. Set a limit via the runtime key overload.global_downstream_max_connections

7. REST を介してウェブサイトを TensorFlow に接続する

これでバックエンドの準備が整いました。TensorFlow Serving にクライアント リクエストを送信して、画像を分類できます。TensorFlow Serving にリクエストを送信する方法は 2 つあります。

• REST
• gRPC

REST でリクエストを送信してレスポンスを受信する

REST でリクエストを送信してレスポンスを受信する場合は、次の 3 つの簡単なステップを行います。

1. REST リクエストを作成します。
2. TensorFlow Serving に REST リクエストを送信します。
3. REST レスポンスから予測結果を抽出し、結果を表示します。

これらの手順は src/index.js ファイルで実行します。

REST リクエストを作成する

この状態では、classify_img() 関数は TensorFlow Serving に REST リクエストを送信しません。まず、この REST ブランチを実装して REST リクエストを作成する必要があります。

if (radioButtons[0].checked) {
    console.log('Using REST');
    // TODO: Add code to send a REST request to TensorFlow Serving.

} 

TensorFlow Serving は、使用する Inception v3 モデルの画像テンソルを含む POST リクエストを想定しています。そのため、画像の各ピクセルから RGB 値を配列に抽出し、その配列を JSON でラップする必要があります。これがリクエストのペイロードになります。

• 次のコードを REST ブランチに追加します。

//Create the REST request.
let imgTensor = new Array();
let pixelArray = new Array();
context.drawImage(img, 0, 0);
for(let i=0; i<inputImgHeight; i++) {
    pixelArray[i] = new Array();
    for (let j=0; j<inputImgWidth; j++) {
        pixelArray[i][j] = new Array();
        pixelArray[i][j].push(context.getImageData(i, j, 1, 1).data[0]/255); 
        pixelArray[i][j].push(context.getImageData(i, j, 1, 1).data[1]/255); 
        pixelArray[i][j].push(context.getImageData(i, j, 1, 1).data[2]/255); 
    }
}
imgTensor.push(pixelArray);

const RESTURL = 'http://localhost:8000/v1/models/inception:predict';        
let xhr = new XMLHttpRequest();
xhr.open('POST', RESTURL);
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8;');
let data = JSON.stringify({
    instances: imgTensor
});    
xhr.onload = () => {

}
xhr.onerror = () => {
    console.log('REST request error');
}

TensorFlow Serving に REST リクエストを送信する

リクエストを送信できるようになりました。

• REST ブランチで、上記のコードの直後に次のコードを追加します。

// Send the REST request.
xhr.send(data);

TensorFlow Serving からの REST レスポンスを処理する

Inception v3 モデルは、画像が事前定義されたカテゴリに属する確率の配列を返します。予測が成功した場合は、最も可能性の高いカテゴリを UI に出力する必要があります。

onload() リスナーを実装してレスポンスを処理します。

xhr.onload = () => {

}

• 次のコードを onload() リスナーに追加します。

// Process the REST response.
const response = JSON.parse(xhr.responseText);
const maxIndex = argmax(response['predictions'][0])
document.getElementById('category').textContent = 'Predicted category: ' + maxIndex;

リスナーはレスポンスから予測確率を抽出し、オブジェクトの最も可能性の高いカテゴリを特定して、結果を UI に表示します。

実行

1. ターミナルで starter フォルダに移動し、webpack を使用してすべての JavaScript ファイルを 1 つのファイルにバンドルします。このファイルは dist/index.html ファイルに埋め込むことができます。

npm install -g npx
npm install --save-dev webpack
npx webpack

2. ブラウザで http://localhost:8887/ を更新し、[REST > Classify] をクリックします。

ウェブサイトには、予測カテゴリとして 286 が表示されます。これは、ImageNet データセットの Egyptian Cat ラベルにマッピングされます。

8. gRPC を使用してウェブサイトを TensorFlow Serving に接続する

TensorFlow Serving は、REST に加えて gRPC もサポートします。

gRPC は、最新のオープンソースの高性能なリモート プロシージャ コール（RPC）フレームワークで、あらゆる環境で実行できます。ロード バランシング、トレース、ヘルスチェック、認証のプラグ可能なサポートにより、データセンター内やセンター間で効率的にサービスを接続できます。gRPC は、REST よりもパフォーマンスが高いことが確認されています。

gRPC でリクエストを送信してレスポンスを受信する

簡単な 4 つのステップがあります。

1. （省略可）gRPC クライアント スタブコードを生成します。
2. gRPC リクエストを作成します。
3. TensorFlow Serving に gRPC リクエストを送信します。
4. gRPC レスポンスから予測結果を抽出し、UI に表示します。

これらの手順を src/index.js ファイルに記述します。

省略可: gRPC クライアント スタブコードを生成する

注: スターター コードには gRPC クライアント スタブコードがすでに含まれているため、この手順は省略可能です。クライアント スタブを自身で生成する場合は、この説明を読み、プロセスをよく理解してください。プロトコル バッファ コンパイラと gRPC JavaScript コード生成プラグインを自分で設定している場合は、適切に設定されていることを確認します。

gRPC と TensorFlow Serving を使用する場合は、gRPC ワークフローに従う必要があります。詳細については、gRPC のドキュメントをご覧ください。

TensorFlow Serving と TensorFlow は必要な .proto ファイルを定義します。TensorFlow と TensorFlow Serving 2.8 では、次の .proto ファイルが必要です。

tensorflow/core/example/example.proto
tensorflow/core/example/feature.proto
tensorflow/core/protobuf/struct.proto
tensorflow/core/protobuf/saved_object_graph.proto
tensorflow/core/protobuf/saver.proto
tensorflow/core/protobuf/trackable_object_graph.proto
tensorflow/core/protobuf/meta_graph.proto
tensorflow/core/framework/node_def.proto
tensorflow/core/framework/attr_value.proto
tensorflow/core/framework/function.proto
tensorflow/core/framework/types.proto
tensorflow/core/framework/tensor_shape.proto
tensorflow/core/framework/full_type.proto
tensorflow/core/framework/versions.proto
tensorflow/core/framework/op_def.proto
tensorflow/core/framework/graph.proto
tensorflow/core/framework/tensor.proto
tensorflow/core/framework/resource_handle.proto
tensorflow/core/framework/variable.proto

tensorflow_serving/apis/inference.proto
tensorflow_serving/apis/classification.proto
tensorflow_serving/apis/predict.proto
tensorflow_serving/apis/regression.proto
tensorflow_serving/apis/get_model_metadata.proto
tensorflow_serving/apis/input.proto
tensorflow_serving/apis/prediction_service.proto
tensorflow_serving/apis/model.proto

• ターミナルで、starter/src/proto/ フォルダに移動し、スタブを生成します。

bash generate_grpc_stub_js.sh

gRPC リクエストを作成する

REST リクエストと同様に、gRPC ブランチに gRPC リクエストを作成します。.

if (connectionMode[picker.selectedRow(inComponent: 0)] == "REST") {

}
else {
    print("Using gRPC")
    // TODO: Add code to send a gRPC request to TensorFlow Serving.
    
}

• 次のコードを gRPC ブランチに追加します。

// Create the gRPC request.
const PredictModule = require('./proto/generated/tensorflow_serving/apis/predict_pb.js');
const PredictionServiceClientModule = require('./proto/generated/tensorflow_serving/apis/prediction_service_grpc_web_pb.js');
const ModelModule = require('./proto/generated/tensorflow_serving/apis/model_pb.js');
const TensorModule = require('./proto/generated/tensorflow/core/framework/tensor_pb.js');

const GPRCURL = 'http://localhost:8080';
const stub = new PredictionServiceClientModule.PredictionServiceClient(GPRCURL);

const modelSpec = new ModelModule.ModelSpec();
modelSpec.setName('inception');

const tensorProto = new TensorModule.TensorProto();
const tensorShapeProto = new TensorModule.TensorShapeProto();

const batchDim = (new TensorModule.TensorShapeProto.Dim()).setSize(1);
const heightDim = (new TensorModule.TensorShapeProto.Dim()).setSize(inputImgHeight);
const widthDim = (new TensorModule.TensorShapeProto.Dim()).setSize(inputImgWidth);
const channelDim = (new TensorModule.TensorShapeProto.Dim()).setSize(3);

tensorShapeProto.setDimList([batchDim, heightDim, widthDim, channelDim]);

tensorProto.setDtype(proto.tensorflow.DataType.DT_FLOAT);
tensorProto.setTensorShape(tensorShapeProto);
context.drawImage(img, 0, 0);
for(let i=0; i<inputImgHeight; i++) {
    for (let j=0; j<inputImgWidth; j++) {
        tensorProto.addFloatVal(context.getImageData(i, j, 1, 1).data[0]/255); 
        tensorProto.addFloatVal(context.getImageData(i, j, 1, 1).data[1]/255); 
        tensorProto.addFloatVal(context.getImageData(i, j, 1, 1).data[2]/255); 
    }
}

const predictionServiceRequest = new PredictModule.PredictRequest();
predictionServiceRequest.setModelSpec(modelSpec);
predictionServiceRequest.getInputsMap().set('inputs', tensorProto);

TensorFlow Serving に gRPC リクエストを送信する

リクエストを送信できるようになりました。

• 上記のコード スニペットの gRPC ブランチのコードの直後に次のコードを追加します。

// Send the gRPC request.
stub.predict(predictionServiceRequest, {}, function(err, response) {
    // TODO: Add code to process the response.
});

TensorFlow Serving からの gRPC レスポンスを処理する

最後に、上記のコールバック関数を実装してレスポンスを処理します。

• このコードを、前のコード スニペットの関数本体に追加します。

// Process the gRPC response.
if (err) {
    console.log(err.code);
    console.log(err.message);
} 
else {
    const maxIndex = argmax(response.getOutputsMap().get('logits').getFloatValList());
    document.getElementById('category').textContent = 'Predicted category: ' + maxIndex;
}

リスナーはレスポンスから予測確率を抽出し、オブジェクトの最も可能性の高いカテゴリを特定して、結果を UI に表示します。

実行

1. ターミナルで webpack を使用して、すべての JavaScript ファイルを index.html ファイルに埋め込むことができる 1 つのファイルにバンドルします。

npx webpack

2. ブラウザで http://localhost:8887/ を更新します。
3. [gRPC] > [Classify] をクリックします。

ウェブサイトには、286 の予測カテゴリが表示されます。これは、ImageNet データセットの Egyptian Cat ラベルにマッピングされます。

9. 完了

TensorFlow Serving を使用して、ウェブサイトに画像分類機能を追加しました。

その他の情報

• TensorFlow Serving のホームページ
• gRPC のホームページ
• TensorFlow の基本的な画像分類