Edge TensorFlow.js 教程

您需要构建的内容

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

目标

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

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

准备工作

通过 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/icn/${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="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>

运行 Web 应用

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

Python

python3 -m SimpleHTTPServer 8000

Node.js

如果您有 Node.js,请全局安装 http-server 软件包并运行以下命令:

http-server -p 8000

在浏览器中打开 http://localhost:8000,然后您会在控制台(查看 > 开发者 > JavaScript 控制台)和此页面上看到预测结果。

浏览器中的 TensorFlow.js 预测结果

工作原理

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

前两个脚本标记会加载 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="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 文件的绝对或相对网址(本例中为相对路径,因为 index.html 文件和模型文件位于同一目录中)。

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

后续步骤

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

后续步骤: