使用 Face-api.js 在 Web 上进行人脸检测 _Face-api.js

Web 浏览器日益强大，网站和 Web 应用程序的复杂性也在增加。几十年前需要超级计算机的操作现在可以在智能手机上运行，其中之一就是人脸检测。
检测和分析人脸的能力非常有用，因为它能让我们添加聪明的特征。比如自动模糊人脸(比如谷歌Maps)、移动和缩放摄像头feed以聚焦于人(比如微软团队)、验证护照、添加愚蠢的滤镜(比如Instagram和Snapchat)等等。但在这之前，我们得先找到那张脸！
Face-api.js 是一个库，使开发人员无需机器学习背景即可在其应用程序中使用人脸检测。

本教程的代码可在 GitHub 上找到。
https://github.com/sitepoint-editors/demo-face-api-js

机器学习人脸检测检测物体，如人脸，是相当复杂的。想一想：也许我们可以写一个程序，通过扫描像素来找到眼睛、鼻子和嘴巴。这是可以做到的，但要使它完全可靠，实际上是无法实现的，因为有许多因素需要考虑。想想光照条件、面部毛发、各种各样的形状和颜色、化妆、角度、脸部面具，以及其他许多因素。
然而，神经网络擅长解决这类问题，并且可以推广到大多数（如果不是全部）条件。我们可以使用流行的 JAVAScript 机器学习库 TensorFlow.js 在浏览器中创建、训练和使用神经网络。然而，即使我们使用现成的、预训练的模型，我们仍然会对向 TensorFlow 提供信息和解释输出的细节有所了解。
使用 face-api.js，它将所有这些都包装到一个直观的 API 中。我们可以传递一个 img、canvas 或 video DOM 元素，该库将返回一个或一组结果。Face-api.js 可以检测人脸，但也可以估计其中的各种内容，如下所列。

面部检测：获取一张或多张人脸的边界，这对于确定图片中人脸的位置和大小很有用。
面部地标检测：获取眉毛、眼睛、鼻子、嘴和嘴唇以及下巴的位置和形状。这可以用来确定朝向或在特定区域投射图形，如鼻子和嘴唇之间的胡子。
面部识别：确定谁在画面中。
面部表情检测：从一个人的脸上获得表情。
年龄和性别检测：从一张脸中得到年龄和性别。请注意，在“性别”分类中，它将一张脸分为女性化或男性化，这并不一定揭示他们的性别。

在你在实验之外使用这些东西之前，请注意，人工智能擅长放大偏见。性别分类对双性恋者来说效果很好，但它不能检测我的非双性恋朋友的性别。它在大多数时候都能识别出白人，但经常无法检测到有色人种。
在使用这项技术时要非常周到，并与不同的测试小组进行彻底的测试。
安装【使用 Face-api.js 在 Web 上进行人脸检测】我们可以通过 npm 安装 face-api.js：
npm install face-api.js然而，为了跳过构建工具的设置，我将通过unpkg.org包括UMD包：
/* globals faceapi */import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';之后，我们需要从库的资源库中下载正确的预训练模型。
确定我们想从脸部知道什么，并使用可用模型部分来确定需要哪些模型。有些功能可以使用多个模型。在这种情况下，我们必须在带宽/性能和精度之间做出选择。比较各种可用模型的文件大小，选择你认为最适合你的项目的模型。
不确定你的使用需要哪些型号？你可以稍后再回到这个步骤。当我们在没有加载所需模型的情况下使用API时，将抛出一个错误，说明该库所期望的模型。

文章插图

我们现在准备使用 face-api.js API 。
示例让我们来建造一些东西吧！
对于下面的示例，我将使用此函数从 Unsplash Source 加载随机图像：

function loadRandomImage() {const image = new Image();image.crossOrigin = true;return new Promise((resolve, reject) => {image.addEventListener('error', (error) => reject(error));image.addEventListener('load', () => resolve(image));image.src = https://www.isolves.com/it/cxkf/yy/js/2021-08-20/'https://source.unsplash.com/512x512/?face,friends';});}

/ 裁剪图片 /

你可以在附带的GitHub repo中找到这个演示的代码。
https://github.com/sitepoint-editors/demo-face-api-js/blob/main/scripts/1-image-crop.js

首先，我们要选择并加载模型。为了裁剪图像，我们只需要知道一个人脸的边界框，所以人脸检测就足够了。我们可以用两个模型来做。SSD Mobilenet v1模型（仅低于6MB）和Tiny Face Detector模型（低于200KB）。我们说准确性是不相干的，因为用户也可以选择手动裁剪。此外，让我们假设访问者在缓慢的网络连接上使用这个功能。因为我们的重点是带宽和性能，我们将选择较小的Tiny Face Detector模型。