PWA 应用如何实现 On-device Image Recognition 功能？-JavaScript中文网-JavaScript教程资源分享门户

现在，图像识别技术已经非常成熟，很多公司已经在自己的产品中实现了该功能。这个功能可以用于人脸识别、商品识别与搜索或者其他相关的应用。我们可以使用现有的机器学习模型，在服务端进行计算得出识别结果。然而，在某些场景下，需要在本地进行图像识别，这时候 PWA（Progressive Web Apps）可以提供一个很好的解决方案。在 PWA 应用中，可以使用 TensorFlow.js 模块，它是 TensorFlow 的 JS 版本。

在接下来的文章中，我们将详细介绍如何在 PWA 应用中实现 On-device Image Recognition 功能，以及如何使用 TensorFlow 提供的工具进行模型的训练与优化。

安装 TensorFlow.js

在使用 TensorFlow.js 之前，我们需要先将其安装。可以使用以下命令行：

npm install @tensorflow/tfjs

加载预先训练的模型

TensorFlow.js 中提供了许多预先训练好的模型，我们可以在这些模型的基础上进行自己的应用开发。

加载模型的代码如下所示：

import * as tf from '@tensorflow/tfjs';

const modelURL = 'https://path/model.json'
const model = await tf.loadLayersModel(modelURL);

这里我们使用 loadLayersModel 方法可以加载已经训练好的模型。

图像预处理

在输入模型之前，我们需要对图像进行一些预处理。对于我们的例子，我们需要将输入的图像转换为一个 224x224 的图像，因为该模型训练时使用的是该大小的图片。

以下是图像预处理的代码片段：

const tensorImg = tf.browser.fromPixels(img)
    .resizeNearestNeighbor([224, 224])
    .toFloat()
    .expandDims();

在这里，我们使用 tf.browser.fromPixels 函数来将图像转换为 TensorFlow 张量。然后使用 resizeNearestNeighbor 函数将图像调整为 224x224 的大小，接下来，将像素值转换为 Float，然后通过 expandDims 函数将图像塑造成 TensorFlow 张量所需的形状。

Run inference on a model

有了上述的预处理的图片，我们可以将图像输入到模型中，并该模型会预测出这个图像是什么。

以下是代码实现：

const prediction = await model.predict(tensorImg).data();

在这里我们使用了 predict 函数将处理后的图像输入模型中进行预测。运行 predict 函数后返回的是包含预测的结果的数组。

总结

在这篇文章中，我们介绍了在 PWA 应用中实现 On-device Image Recognition 的步骤，包括 TensorFlow.js 工具的安装、使用预训练模型和图像预处理。对于那些希望自己实现这个功能的开发者，了解这些步骤对他们来说是非常有帮助的。

完整代码

以下是完整的代码：

// javascriptcn.com 代码示例
import * as tf from '@tensorflow/tfjs';

async function onDeviceRecognition() {
  const img = document.getElementById('image');
  const tensorImg = tf.browser.fromPixels(img)
    .resizeNearestNeighbor([224, 224])
    .toFloat()
    .expandDims();
  const modelURL = 'https://path/model.json';
  const model = await tf.loadLayersModel(modelURL);
  const prediction = await model.predict(tensorImg).data();
}

在这里你可以看到，我们首先加载了需要使用的 TensorFlow.js 库。然后，在 onDeviceRecognition 函数中，我们使用了上述步骤中所说过的图像预处理，加载预训练模型和输入预处理的图像来运行预测。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654b02507d4982a6eb4f451b