随着软件架构的证明、计算能力的快速提升以及机器中的嵌入式决策能力，用户现在与更智能的系统进行交互。从Facebook的“可能认识的人”功能到智能城市和自动驾驶汽车，公司正在寻找新的方法来利用AI在他们的产品和服务中。AI中一个受到很多关注的领域是图像识别，随着更复杂的工具的出现，其受欢迎程度持续增长。通过AI和计算机视觉中的先进工具和技术，现在可以在网络浏览器中进行图像识别，这意味着不再需要将输入图像发送到服务器。相反，只发送检测到的结果。这意味着用户不必担心隐私问题。
在本系列中，将学习如何实现这一点：使用TensorFlow.js在浏览器中实时检测性别、年龄（最重要的是）以及情绪检测器。点击下面的“启动演示”按钮。（注意：这只适用于现代浏览器，并且需要允许浏览器使用网络摄像头）。
TensorFlow.js是一个由Google开发的JavaScript库，允许开发者在浏览器中训练和使用机器学习（ML）模型。这也允许熟悉JavaScript的开发者进入构建和使用机器学习模型的领域，而无需学习新的编程语言。它是TensorFlow的一个配套库，TensorFlow是一个流行的Python机器学习库。那么，既然有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。MobileNets是小型、低延迟、低功耗的模型，参数化以满足各种用例的资源约束。这些模型已经在数百万张图像上进行了训练，以识别大约1000个不同的类别，包括将作为示例看到的狗的品种。可以轻松地在这些模型的基础上进行构建，以分类、检测和分割图像。
要继续，请使用首选的文本编辑器或IDE创建一个静态HTML文档。然后，从在HTML文档的头部标签中导入所需的模型和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模型并对图像标签中指定的图像进行分类。
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>