您需要构建的内容
在本教程中,您将下载使用 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:
完成快速入门后,在 Google Cloud Storage 中应该会有以下导出的文件:
- 一个带有标签的
dict.txt
文件 - 一个
model.json
文件 - 多个
*.bin
权重文件
下载模型文件
将导出的文件从 Google Cloud Storage 复制到本地目录:
gsutil cp gs://${cloud-storage-bucket}/model-export/icn/${model-name}/* ${local-folder}
编写一个小型 Web 应用
将 TensorFlow.js 模型文件存储在本地后,您可以编写 Web 应用:
导航到存储模型文件的本地目录(如果您尚未导航到此目录)。
在同一本地目录中创建一个
index.html
文件,其中包含以下内容:index.html
代码示例
运行 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 库和 AutoML 库,这两个库可在 NPM 软件包管理器上获取。
AutoML NPM 软件包提供了一组 API,用于加载和运行由 AutoML Vision Edge 生成的模型。该软件包会处理运行模型所需的任何预处理或后处理,如提供图片或视频元素,对像素值进行归一化以及返回带有标签和分数的已排序对象。
图片标记从 Google Cloud Storage 发布路径加载测试图片:
在测试模型时,您应该将图片 src
替换为自己图片的路径。
接下来,加载模型并对图片进行预测:
您可以使用 tf.automl.loadImageClassification(url)
指定模型。此函数接受导出的 model.json
文件的绝对或相对网址(本例中为相对路径,因为 index.html
文件和模型文件位于同一目录中)。
您可以调用 model.classify(image)
来获取预测结果。该函数通过模型运行单张图片并返回预测结果。此函数的输入是 HTML 图片元素、视频元素或 3D 张量。
后续步骤
您已经使用 Edge 模型完成了 TensorFlow.js 图片分类 Web 应用的教程。您在网络浏览器中运行了 Web 应用,并使用自定义 Edge 模型和从 Web 加载的图片进行了分类预测。然后,您查看了部分示例代码以了解其基本功能。
后续步骤:
- 查看使用 Parcel 打包器的演示以将 ES6 代码构建到独立应用中。
- 详细了解 TensorFlow.js。
- 通过官方文档详细了解 AutoML NPM 库。
- 通过教程详细了解 TensorFlow 的概览信息。