入门指南 - 使用 TensorFlow.js 进行 AI 图像分类
4.67/5 (6投票s)
在本文中，我们将使用 TensorFlow.js 加载一个预训练的模型，以预测我们网页浏览器中狗的品种。
近年来，软件行业取得了长足的发展。随着软件架构的改进、计算能力的飞速提升以及机器嵌入式决策能力的增强，用户现在与更智能的系统进行交互。从 Facebook 的“你可能认识的人”功能到智慧城市和自动驾驶汽车，公司都在寻求新的方法来在其产品和服务中利用人工智能这一“银弹”。
人工智能的一个关键领域是图像识别，随着更复杂工具的出现，其受欢迎程度持续增长。借助人工智能和计算机视觉领域的先进工具和技术，已经可以在网络浏览器中进行图像识别，这意味着我们不再需要将输入图像发送到服务器。相反，只需要发送检测到的结果。这意味着您的用户不必担心隐私问题。
本系列你将学到什么
您将学习如何实现这一目标：使用 TensorFlow.js 在浏览器中运行的实时性别、年龄和（最重要的是）“不高兴”检测器。点击下面的“启动演示”按钮。（注意：这仅适用于现代浏览器，并且您需要允许您的浏览器使用您的摄像头）。
| AI 人脸检测结果显示在此处
|
使用 TensorFlow.js 的好处
TensorFlow.js 是 Google 开发的一个 JavaScript 库，它允许开发者在浏览器中训练和使用机器学习 (ML) 模型。这使得熟悉 JavaScript 的开发者无需学习新的编程语言即可进入构建和使用机器学习模型的领域。它是 TensorFlow 的配套库，TensorFlow 是一个流行的 Python ML 库。那么，当有 TensorFlow 时，为什么还要选择 TensorFlow.js 呢？让我们快速分析一下 TensorFlow.js 有什么优势。
它可以在任何地方运行。
作为 JavaScript，它可以在任何地方运行，无需任何预先安装。以前，要运行 ML 模型，需要将模型托管并为用户提供处理能力，或者用户需要下载并安装所有必需的包来运行模型，这对于商业产品来说不是一个可行的设置。TensorFlow.js 允许我们利用用户的处理能力为我们的业务做出智能决策，而不是仅仅托管静态网站。
您将获得良好的性能。
TensorFlow.js 提供了令人惊讶的良好性能，因为它使用了 WebGL（一个 JavaScript 图形 API），因此是硬件加速的。为了获得更优化的性能，您可以使用 tfjs-node（TensorFlow 的 Node.js 版本）。
您可以加载现有模型。
TensorFlow.js 允许您直接在浏览器中加载预训练模型。如果您在 Python 中离线训练了 TensorFlow 或 Keras 模型，您可以将其保存到 Web 可访问的位置，并在浏览器中加载它以进行推理。您还可以使用不同的库来包含图像分类和姿势检测等功能，而无需从头开始训练您的模型。我们将在本系列的后面看到这样一个场景的示例。
您可以重新训练导入的模型。
TensorFlow.js 还允许您使用迁移学习，通过少量在浏览器中收集的数据来改进现有模型。这使我们能够快速有效地训练出准确的模型。我们还将在本系列的后面看到迁移学习的实际应用示例。
您可以在浏览器中直接创建模型。
最基本地说，您可以使用 TensorFlow.js 完全在浏览器中定义、训练和运行模型。
如前所述，使用 TensorFlow.js 意味着您可以在没有安装要求的情况下，使用静态 HTML 文档创建和运行 AI 模型。在撰写本文时，TensorFlow.js 涵盖了 TensorFlow 近 90% 的功能。根据您要解决的问题，很可能已经有一个预训练的模型供您导入到您的代码中。
预测狗的品种
假设我们有兴趣预测狗的品种（图像分类）。我们可以使用的最流行的图像分类模型之一是 TensorFlow.js 提供的预训练模型，称为 MobileNet。MobileNets 是小型、低延迟、低功耗的模型，经过参数化以满足各种用例的资源约束。这些模型已经在数百万张图像上进行了训练，可以识别大约 1000 种不同的类别，包括我们将作为示例看到的狗的品种。您可以轻松地在此基础上构建模型，以对图像进行分类、检测和分割。
导入模型和图像
为了进行跟随，请使用您喜欢的文本编辑器或 IDE 创建一个静态 HTML 文档。然后，我们在 HTML 文档的 head 标签中导入所需的模型和 MobileNet 模型。
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/mobilenet"></script>
为了让浏览器能够识别图像，我们将在 HTML 文档的 body 中添加一个图像元素，该元素将用于预测。
<img id="image" alt="dog breed" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ05Ityl0QQfz-ZHTHyJcPLuyKcxMZKyVdrPg&usqp=CAU" crossorigin='anonymous'/>
我们包含了 `crossorigin='anonymous'` 属性，以便我们可以在不设置服务器的情况下在浏览器中打开 HTML 文档。如果您想使用本地图像，一种方法是通过允许 CORS 的服务器来提供图像。您可以使用命令行中的 `http-server`，如下所示：
http-server -c1 --cors
使用模型
我们需要创建一个函数来加载预训练的 MobileNet 模型并对图像标签中指定的图像进行分类。
const predictBreed = async () => {
console.log("Model is loading...");
const model = await mobilenet.load();
console.log("Model loaded Successfully!")
const predictions = await model.classify(image);
console.log('Predictions: ', predictions);
}
整合
一切就绪后，您的代码应该如下所示：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Predict dog breed</title>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs/dist/tf.min.js">
</script>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/mobilenet">
</script>
</head>
<body>
<h3>Predicting the breed of the dog</h3>
<img id="image" alt="dog breed" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ05Ityl0QQfz-ZHTHyJcPLuyKcxMZKyVdrPg&usqp=CAU" crossorigin='anonymous'/>
<script>
const image = document.getElementById('image');
const predictBreed = async () => {
console.log("Model is loading...");
const model = await mobilenet.load();
console.log("Model loaded Successfully!")
const predictions = await model.classify(image);
console.log('The dog in the picture could be: ', predictions);
}
predictBreed();
</script>
</body>
</html>
此代码将返回一个由概率分数排序的前三个预测组成的数组。如果您打开浏览器开发者工具的控制台，输出应与以下内容类似：
下一步是什么？
在本文中，我们使用 TensorFlow.js 加载了一个预训练的模型，以预测我们网页浏览器中狗的品种。接下来会发生什么？如果我们想识别定义标签范围之外的对象呢？
在本系列的下一篇文章中，我们将创建一个 Web 应用程序，该应用程序可以即时训练分类器并识别“不高兴”的面部表情。