目录
使用TensorFlow.js的好处
它可以在任何地方运行。
您将获得良好的性能。
您可以加载现有模型。
您可以重新训练导入的模型。
您可以直接在浏览器中创建模型。
预测狗的品种
导入模型和图像
使用模型
放在一起
下一步是什么？
在过去的几年中，软件行业发展迅速。随着软件架构的改进，计算能力的快速提高以及机器中嵌入的决策能力，用户现在可以与更智能的系统进行交互。从Facebook的“您可能认识的人”功能到智慧城市和自动驾驶汽车，公司正在寻找新的方法在其产品和服务中利用AI的“银弹”。
图像识别是AI引起广泛关注的关键领域之一，随着越来越复杂的工具的出现，图像识别的普及度也在不断增长。借助AI和计算机视觉中的先进工具和技术，已经可以在Web浏览器中进行图像识别，这意味着我们不再需要将输入图像发送到服务器。而是仅发送检测到的结果。这意味着您的用户将不必担心隐私。
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模型，则可以将其保存到网络上可用的位置，然后将其加载到浏览器中进行推理。您还可以使用其他库来包括诸如图像分类和姿势检测之类的功能，而无需从头开始训练模型。在本系列的后面，我们将看到这种情况的示例。
TensorFlow.js还允许您使用迁移学习来使用浏览器中收集的少量数据来提升现有模型。这使我们能够快速有效地训练准确的模型。在本系列的后面，我们还将看到一个实际应用中的转移学习示例。
在最基本的级别上，您可以使用TensorFlow.js完全在浏览器中定义、训练和运行模型。
如前所述，使用TensorFlow.js意味着您无需安装即可在静态HTML文档中创建和运行AI模型。在撰写本文时，TensorFlow.js涵盖了TensorFlow几乎90％的功能。根据您要解决的问题，很可能已经存在一个预先训练的模型供您导入代码。
假设我们对预测狗的品种（图像分类）感兴趣。我们可以使用的最受欢迎的图像分类模型之一是通过TensorFlow.js进行预训练的模型，称为MobileNet。MobileNet是参数化的小型、低延迟、低功耗模型，可以满足各种使用案例的资源限制。这些模型已经在数百万张图像上进行了训练，以识别大约1000种不同的类别，包括我们将要看到的狗的品种。您可以轻松地基于这些模型来分类、检测和分割图像。
接下来，请使用您喜欢的文本编辑器或IDE创建一个静态HTML文档。然后，我们开始在HTML文档的head标签中导入所需的模型和MobileNet模型：
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>为了使图像可被浏览器识别，我们将在HTML文档的正文中添加一个图像元素，该元素将用于预测：
<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模型，并对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('Predictions: ', predictions); }一切就绪后，您的代码应如下所示：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Predict dog breed</title> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script> <script src="https://cdn.jsdelivr.net/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浏览器中狗的种类。接下来可能是什么？如果我们想识别超出定义标签范围的对象怎么办？
在本系列的下一篇文章中，我们将创建一个Web应用程序，该应用程序可以随时随地训练分类器并识别脾气暴躁的面部表情。
