Edge TensorFlow.js 教程

您需要构建的内容

包含预测结果的 Web 应用的图片

在本教程中,您将下载使用 AutoML Vision Edge 训练和导出的 TensorFlow.js Object Detection 模型。然后,您将构建一个网页来加载该模型并对图片进行预测。

目标

您将编写 JavaScript 代码以执行以下操作:

  • 使用 TensorFlow.js 库在网页中运行预训练的 AutoML Vision Edge Object Detection 模型。

准备工作

通过 AutoML Vision Edge 训练模型

您必须先按照 Edge 设备模型快速入门,从 AutoML Vision Edge 训练和导出 TensorFlow.js 模型,然后才能将模型部署到 Edge 设备。

在最后一步中,将模型导出到 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/iod/${model-name}/* ${local-folder}

编写一个小型 Web 应用

将 TensorFlow.js 模型文件存储在本地后,您可以编写 Web 应用:

  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 路径特性以指向您自己的图片。

运行 Web 应用

从包含 index.html 文件的目录,在端口 8000 上启动一个简单的 HTTP 服务器:

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 软件包文档

工作原理

现在您的应用已运行,您可以了解代码执行的操作。

前两个脚本标记会加载 TensorFlow.js 库和 AutoML 库,这两个库可在 NPM 软件包管理器上获取。

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

AutoML NPM 软件包提供了一组 API,用于加载和运行由 AutoML Vision Edge 生成的模型。该软件包会处理运行模型所需的任何预处理或后处理,如提供图片或视频元素,对像素值进行归一化以及返回带有标签和分数的已排序对象。

图片标记从 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 文件的绝对或相对网址(本例中为相对路径,因为 index.html 文件和模型文件位于同一目录中)。

您可以调用 model.detect(img, options) 来获取预测结果。该函数通过模型运行单张图片并返回预测的对象。此函数的输入是 HTML 图片元素、视频元素或 3D 张量

model.detect(img, options) 函数还接受可选的 options 参数,该参数指定可能的规范:

  • score - 概率得分介于 0 到 1 之间。默认为 0.5。得分低于此阈值的框将被忽略。
  • topk - 系统仅会返回 topk 可能性最大的对象。实际对象数可能少于此数字。
  • iou - 交并比阈值。IoU 是一个介于 0 和 1 之间的指标,用于衡量两个框的重叠度。预测框的重叠度不会超过指定的阈值。

    如需详细了解如何使用交并比 (IoU) 进行模型评估,请参阅评估模型页面。

如需详细了解 API,请参阅 AutoML NPM 软件包文档

后续步骤

您已经使用 Edge 模型完成了 TensorFlow.js Object Detection Web 应用的教程。您在网络浏览器中运行了 Web 应用,并使用自定义 Edge 模型和从 Web 加载的图片进行了对象检测预测。然后,您查看了部分示例代码以了解其基本功能。

后续步骤:

  • 查看使用 SVG演示,以将包含概率的预测框叠加到图片上。
  • 详细了解 TensorFlow.js
  • 通过官方文档详细了解 AutoML NPM 库。
  • 通过教程详细了解 TensorFlow 的概览信息。