使用Faceapi。js在Web上进行人脸检测

　　Web 浏览器日益强大。网站和 Web 应用程序的复杂性也在增加。几十年前需要超级计算机的操作现在可以在智能手机上运行。其中之一就是人脸检测。
　　检测和分析人脸的能力非常有用，因为它使我们能够添加聪明的特征。想想自动模糊面部（如谷歌地图）、平移和缩放网络摄像头供稿以专注于人（如 Microsoft Teams）、验证护照、添加愚蠢的过滤器（如 Instagram 和 Snapchat）等等。但在我们做这一切之前，我们首先需要找到这张脸！
　　Face-api.js是一个库，使开发人员无需机器学习背景即可在其应用程序中使用人脸检测。
　　本教程的代码可在GitHub上找到。 使用机器学习进行人脸检测
　　检测物体，比如人脸，是相当复杂的。想一想：也许我们可以编写一个程序来扫描像素以找到眼睛、鼻子和嘴巴。这是可以做到的，但要使其完全可靠实际上是无法实现的，因为要考虑许多因素。想想照明条件、面部毛发、各种各样的形状和颜色、妆容、角度、面罩等等。
　　然而，神经网络擅长处理这些类型的问题，并且可以概括为解释大多数（如果不是全部）条件。我们可以使用流行的 JavaScript 机器学习库 TensorFlow.js 在浏览器中创建、训练和使用神经网络。然而，即使我们使用现成的、预训练的模型，我们仍然会稍微了解向 TensorFlow 提供信息和解释输出的细节。如果您对机器学习的技术细节感兴趣，请查看＂ A Primer on Machine Learning with Python ＂。
　　输入 face-api.js。它将所有这些包装到一个直观的 API 中。我们可以传递一个img、canvas或videoDOM 元素，该库将返回一个或一组结果。Face-api.js 可以检测人脸，也可以估计人脸中的各种东西，如下所示。 人脸检测 ：获取一张或多张人脸的边界。这对于确定人脸在图片中的位置和大小很有用。 人脸地标检测 ：获取眉毛、眼睛、鼻子、嘴巴和嘴唇、下巴的位置和形状。这可用于确定朝向或在特定区域投影图形，例如鼻子和嘴唇之间的胡须。 人脸识别 ：确定照片中的人。 人脸表情检测 ：从人脸中获取表情。请注意，不同文化的里程可能会有所不同。 年龄和性别检测 ：从人脸中获取年龄和性别。请注意，对于＂性别＂分类，它将面孔分类为女性或男性，这并不一定揭示他们的性别。
　　在您使用任何超出实验的方法之前，请注意人工智能擅长放大偏见。性别分类适用于顺性别的人，但它无法检测我的非二元朋友的性别。它会在大部分时间识别白人，但经常无法检测到有色人种。
　　在使用这项技术时要深思熟虑，并与多元化的测试小组一起进行彻底的测试。 安装
　　我们可以通过 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://source.unsplash.com/512x512/?face,friends＂;   }); } 裁剪图片
　　您可以在随附的GitHub 存储库中找到此演示的代码。
　　首先，我们必须选择并加载模型。要裁剪图像，我们只需要知道人脸的边界框，因此人脸检测就足够了。我们可以使用两个模型来做到这一点：SSD Mobilenet v1 模型（不到 6MB）和 Tiny Face Detector 模型（不到 200KB）。假设准确性是无关紧要的，因为用户还可以选择手动裁剪。此外，假设访问者在互联网连接速度较慢的情况下使用此功能。因为我们的重点是带宽和性能，所以我们将选择较小的 Tiny Face Detector 模型。
　　下载模型后，我们可以加载它： await faceapi.nets.tinyFaceDetector.loadFromUri(＂/models＂);
　　我们现在可以加载图像并将其传递给 face-api.js。faceapi.detectAllFaces默认情况下使用 SSD Mobilenet v1 模型，因此我们必须显式传递new faceapi.TinyFaceDetectorOptions()以强制它使用 Tiny Face Detector 模型。 const image = await loadRandomImage(); const faces = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());
　　该变量faces现在包含一个结果数组。每个结果都有一个boxandscore属性。该分数表明神经网络对结果确实是一张脸的信心。该box属性包含一个带有人脸坐标的对象。我们可以选择第一个结果（或者我们可以使用faceapi.detectSingleFace()），但是如果用户提交了一张合影，我们希望在裁剪后的图片中看到所有这些。为此，我们可以计算一个自定义边界框： const box = {   // Set boundaries to their inverse infinity, so any number is greater/smaller   bottom: -Infinity,   left: Infinity,   right: -Infinity,   top: Infinity,    // Given the boundaries, we can compute width and height   get height() {     return this.bottom - this.top;   },    get width() {     return this.right - this.left;   }, };  // Update the box boundaries for (const face of faces) {   box.bottom = Math.max(box.bottom, face.box.bottom);   box.left = Math.min(box.left, face.box.left);   box.right = Math.max(box.right, face.box.right);   box.top = Math.min(box.top, face.box.top); }
　　最后，我们可以创建一个画布并显示结果： const canvas = document.createElement(＂canvas＂); const context = canvas.getContext(＂2d＂);  canvas.height = box.height; canvas.width = box.width;  context.drawImage(   image,   box.left,   box.top,   box.width,   box.height,   0,   0,   canvas.width,   canvas.height ); 放置表情符号
　　您可以在随附的GitHub 存储库中找到此演示的代码。
　　为什么不享受一点乐趣呢？我们可以制作一个过滤器，将嘴巴表情符号 () 放在所有眼睛上。为了找到眼睛标志，我们需要另一个模型。这一次，我们关心准确性，因此我们使用 SSD Mobilenet v1 和 68 Point Face Landmark Detection 模型。
　　同样，我们需要先加载模型和图像： await faceapi.nets.faceLandmark68Net.loadFromUri(＂/models＂); await faceapi.nets.ssdMobilenetv1.loadFromUri(＂/models＂);  const image = await loadRandomImage();
　　要获取地标，我们必须附加withFaceLandmarks()函数调用以detectAllFaces()获取地标数据： const faces = await faceapi   .detectAllFaces(image)   .withlandmarks();
　　与上次一样，faces包含结果列表。除了人脸在哪里之外，每个结果还包含一个原始的地标点列表。为了获得每个特征的正确地标，我们需要对点列表进行切片。因为点数是固定的，所以我选择对索引进行硬编码： for (const face of faces) {   const features = {     jaw: face.landmarks.positions.slice(0, 17),     eyebrowLeft: face.landmarks.positions.slice(17, 22),     eyebrowRight: face.landmarks.positions.slice(22, 27),     noseBridge: face.landmarks.positions.slice(27, 31),     nose: face.landmarks.positions.slice(31, 36),     eyeLeft: face.landmarks.positions.slice(36, 42),     eyeRight: face.landmarks.positions.slice(42, 48),     lipOuter: face.landmarks.positions.slice(48, 60),     lipInner: face.landmarks.positions.slice(60),   };    // ... }
　　现在我们终于可以享受一点乐趣了。有很多选择，但让我们用嘴巴表情符号（）遮住眼睛。
　　首先，我们必须确定表情符号的放置位置以及应该绘制多大。为此，让我们编写一个辅助函数，从任意一组点创建一个框。该框包含我们需要的所有信息： function getBoxFromPoints(points) {   const box = {     bottom: -Infinity,     left: Infinity,     right: -Infinity,     top: Infinity,      get center() {       return {         x: this.left + this.width / 2,         y: this.top + this.height / 2,       };     },      get height() {       return this.bottom - this.top;     },      get width() {       return this.right - this.left;     },   };    for (const point of points) {     box.left = Math.min(box.left, point.x);     box.right = Math.max(box.right, point.x);      box.bottom = Math.max(box.bottom, point.y);     box.top = Math.min(box.top, point.y);   }    return box; }
　　现在我们可以开始在图片上绘制表情符号了。因为我们必须对两只眼睛都这样做，所以我们可以将feature.eyeLeft和feature.eyeRight放入一个数组中并遍历它们以对每只眼睛执行相同的代码。剩下的就是在画布上绘制表情符号！ for (const eye of [features.eyeLeft, features.eyeRight]) {   const eyeBox = getBoxFromPoints(eye);   const fontSize = 6 * eyeBox.height;    context.font = `${fontSize}px/${fontSize}px serif`;   context.textAlign = ＂center＂;   context.textBaseline = ＂bottom＂;    context.fillStyle = ＂#000＂;   context.fillText(＂＂, eyeBox.center.x, eyeBox.center.y + 0.6 * fontSize); }
　　请注意，我使用了一些幻数来调整字体大小和确切的文本位置。因为表情符号是 unicode 并且网络上的排版很奇怪（至少对我来说），我只是调整数字直到它们看起来正确。更强大的替代方法是将图像用作叠加层。 结束语
　　Face-api.js 是一个很棒的库，它使人脸检测和识别变得非常容易。不需要熟悉机器学习和神经网络。我喜欢启用的工具，这绝对是其中之一。
　　根据我的经验，Web 上的人脸识别会影响性能。我们将不得不在带宽和性能或准确性之间做出选择。较小的模型肯定会不太准确，并且会在我之前提到的一些因素中错过一张脸，比如光线不足或脸部被面具覆盖。
　　微软 Azure、谷歌云和可能的其他企业在云中提供人脸检测。由于我们避免下载大型模型，基于云的检测避免了繁重的页面加载，并且由于经常改进而趋于更准确，并且由于优化的硬件甚至可能更快。如果您需要高精度，您可能需要研究一个您觉得满意的计划。
　　我绝对推荐使用 face-api.js 来进行业余项目、实验，也许还有 MVP。