创建用于对图片进行分类的简单网站

1. 准备工作

在此 Codelab 中，您将学习如何将 TensorFlow Serving 与 REST 和 gRPC 搭配使用，从网站中运行图片分类推断。

前提条件

• 具备网络开发（例如 HTML 和 JavaScript）方面的基础知识
• 具备使用 TensorFlow 进行机器学习的基础知识，例如训练和部署
• 具备终端和 Docker 方面的基础知识

学习内容

• 如何在 TensorFlow Hub 中查找预训练的图片分类模型。
• 如何构建一个简单的网站，并通过 TensorFlow Serving（REST 和 gRPC）使用下载的图片分类模型进行预测。
• 如何在界面中呈现检测结果。

所需物品

• Docker
• Google Chrome
• 适用于 Chrome 的网络服务器
• Node.js 和 NPM
• Bash
• 协议缓冲区编译器（仅在您希望自行重新生成 gRPC 桩时才需要）
• gRPC-web 代码生成器插件（仅在您希望自行重新生成 gRPC 桩时才需要）

2. 进行设置

如需下载此 Codelab 的代码，请执行以下操作：

1. 转到此 GitHub 代码库。
2. 依次点击 Code > Download zip，下载此 Codelab 的所有代码。

3. 解压缩下载的 ZIP 文件，将包含您需要的所有资源的 codelabs 根文件夹解压缩。

在本 Codelab 中，您只需要代码库 TFServing/ImageClassificationWeb 子目录中的文件，其中包含两个文件夹：

• starter 文件夹包含您基于此 Codelab 构建的起始代码。
• finished 文件夹包含完成后的示例应用的完整代码。

3.安装依赖项

如需安装依赖项，请执行以下操作：

• 在您的终端中，转到 starter 文件夹，然后安装所需的 NPM 软件包：

npm install

4.运行入门级网站

使用 Web Server for 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 之前，请勿关停网络服务器。

运行和浏览网站

您现在应该会看到该网站。界面非常简单：有一张猫的图片需要进行分类，用户可以使用 REST 或 gRPC 将数据发送到后端。后端对图片执行图片分类，并将分类结果返回给网站，然后网站显示结果。

如果您点击分类，则什么都不做，因为它还不能与后端进行通信。

5. 使用 TensorFlow Serving 部署图像分类模型

注意：您也可以完全使用 TensorFlow Lite 或机器学习套件在设备上执行图片分类，而不是向 TensorFlow Serving 发送请求。有关详情，请参阅移动图片分类入门。

图片分类是一项非常常见的机器学习任务，可根据图片的主要内容将图片归类到预定义的类别。下面是一个花卉分类示例：

TensorFlow Hub 上提供了许多预训练的图片分类模型。此 Codelab 使用的是常用的 Inception v3 模型。

如需使用 TensorFlow Serving 部署图片分类模型，请执行以下操作：

1. 下载 Inception v3 模型文件。
2. 使用解压缩工具（例如 7-Zip）解压缩下载的 .tar.gz 文件。
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 映像，此过程需要一分钟时间。之后，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 ...

注意：开始前，您可以访问 http://localhost:8501/v1/models/<MODEL_NAME>/metadata，以检查输入和输出张量的详细信息 TensorFlow Serving Docker 映像。在此 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 发送请求：

• REST
• gRPC

通过 REST 发送请求和接收响应

通过 REST 发送和接收请求有三个简单的步骤：

1. 创建 REST 请求。
2. 将 REST 请求发送到 TensorFlow Serving。
3. 从 REST 响应中提取预测结果，并显示结果。

您可以在 src/index.js 文件中完成以下步骤。

创建 REST 请求

目前，classify_img() 函数不会将 REST 请求发送到 TensorFlow Serving。您需要先实现此 REST 分支才能创建 REST 请求：

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

}

TensorFlow Serving 需要一个 POST 请求，其中包含您使用的 Inception v3 模型的图片张量，因此您需要将图片的每个像素中的 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');
}

向 REST Serving 发送 REST 请求

现在您可以发送请求了。

• 将以下代码添加到 REST 分支中的上述代码之后，且紧邻以下代码：

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

处理来自 TensorFlow Serving 的 REST 响应

Inception v3 模型会返回图片属于预定义类别的数组。预测成功后，您应该在界面中输出最可能的类别。

您需要实现 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;

现在，监听器会从响应中提取预测概率，识别对象的最可能类别，并在界面中显示结果。

运行应用

1. 在您的终端中，转到 starter 文件夹，并使用 webpack 将所有 JavaScript 文件捆绑到单个文件中，您可以将该文件嵌入到 dist/index.html 文件中：

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

2. 在浏览器中刷新 http://localhost:8887/，然后依次点击 REST > 分类。

网站会将 286 显示为预测类别，该类别会映射到 ImageNet 数据集中的 Egyptian Cat 标签。

8. 通过 gRPC 将网站与 TensorFlow Serving 连接

除了 REST 之外，TensorFlow Serving 还支持 gRPC。

gRPC 是一种现代的高性能远程过程调用 (RPC) 框架，可以在任何环境中运行。它通过可插入式支持负载均衡、跟踪、健康检查和身份验证，高效地连接数据中心内和各个数据中心内的服务。我们发现，在实践中，gRPC 的性能比 REST 更高。

使用 gRPC 发送请求和接收响应

有四个简单的步骤：

1. 可选：生成 gRPC 客户端桩代码。
2. 创建 gRPC 请求。
3. 将 gRPC 请求发送到 TensorFlow Serving。
4. 从 gRPC 响应中提取预测结果，并将其显示在界面中。

请在 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;
}

现在，监听器会从响应中提取预测概率，识别对象的最可能类别，并在界面中显示结果。

运行应用

1. 在您的终端中，使用 webpack 将所有 JavaScript 文件捆绑到单个文件中，然后将该文件嵌入到 index.html 文件中：

npx webpack

2. 在浏览器中刷新 http://localhost:8887/。
3. 点击 gRPC > 分类。

网站会显示预测的 286 类别，该类别会映射到 ImageNet 数据集中的 Egyptian Cat 标签。

9. 恭喜

您已使用 TensorFlow Serving 在您的网站中添加图片分类功能！

了解详情

• TensorFlow Serving 首页
• gRPC 首页
• TensorFlow 基本图片分类