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

2021年11月30日01:59:30 发表评论 296 次浏览

Web 浏览器日益强大。网站和 Web 应用程序的复杂性也在增加。几十年前需要超级计算机的操作现在可以在智能手机上运行。其中之一就是人脸检测,本为你介绍详细的Face-api.js人脸检测实例。

检测和分析人脸的能力非常有用,因为它使我们能够添加巧妙的特征。想想自动模糊面部(如谷歌地图)、平移和缩放网络摄像头提要以专注于人(如 Microsoft Teams)、验证护照、添加愚蠢的过滤器(如 Instagram 和 Snapchat)等等。但在我们做这一切之前,我们首先需要找到这张脸!

如何使用Face-api.js实现人脸检测Face-api.js是一个库,使开发人员无需机器学习背景即可在其应用程序中使用人脸检测。

本教程的代码可在GitHub上找到。

Face-api.js人脸检测实现教程:机器学习人脸检测介绍

检测物体(如人脸)非常复杂。想一想:也许我们可以编写一个程序来扫描像素以找到眼睛、鼻子和嘴巴。这是可以做到的,但考虑到许多因素需要考虑,使其完全可靠实际上是无法实现的。想想光照条件、面部毛发、各种各样的形状和颜色、化妆、角度、面膜等等。

然而,神经网络擅长解决这类问题,并且可以推广到大多数(如果不是全部)条件。我们可以使用流行的 JavaScript 机器学习库 TensorFlow.js 在浏览器中创建、训练和使用神经网络。然而,即使我们使用现成的、预训练的模型,我们仍然会对向 TensorFlow 提供信息和解释输出的细节有所了解。如果你对机器学习的技术细节感兴趣,请查看“ Python 机器学习入门”。

输入 face-api.js。它将所有这些都封装到一个直观的 API 中。我们可以传递一个imgcanvasvideoDOM 元素,库将返回一个或一组结果。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在Web上进行人脸检测?

我们现在可以使用face-api.js API 了

Face-api.js人脸检测实例

让我们建造一些东西吧!

对于下面的实例,我将使用此函数从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 存储库中找到此演示的代码。

如何使用Face-api.js实现人脸检测?首先,我们必须选择并加载模型。要裁剪图像,我们只需要知道人脸的边界框,因此人脸检测就足够了。我们可以使用两种模型来做到这一点: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());

Face-api.js人脸检测实现教程解析:该变量faces现在包含一个结果数组。每个结果都有一个boxscore属性。该分数表明神经网络对结果确实是一张脸的信心。该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 存储库中找到此演示的代码。

Face-api.js人脸检测实例:为什么不找点乐子呢?我们可以制作一个过滤器,将嘴巴表情符号 (👄) 放在所有眼睛上。为了找到眼睛界标,我们需要另一个模型。这一次,我们关心的是准确性,所以我们使用了 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();

Face-api.js人脸检测实现教程:像上次一样,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),
  };

  // ...
}

现在我们终于可以享受一点乐趣了。有很多选择,但让我们用嘴巴表情符号(👄)遮住眼睛。

如何使用Face-api.js实现人脸检测?首先,我们必须确定表情符号的放置位置以及应绘制的大小。为此,让我们编写一个辅助函数,从任意一组点创建一个框。该框包含我们需要的所有信息:

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.eyeLeftfeature.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 并且 Web 上的排版很奇怪(至少对我来说),所以我只是调整数字,直到它们看起来正确为止。更强大的替代方法是使用图像作为叠加层。

如何使用Face-api.js在Web上进行人脸检测?
Face-api.js人脸检测实例

Face-api.js人脸检测实现教程结语

如何使用Face-api.js实现人脸检测?Face-api.js 是一个很棒的库,它使人脸检测和识别变得真正可访问。不需要熟悉机器学习和神经网络。我喜欢启用的工具,这绝对是其中之一。

根据我的经验,Web 上的人脸识别会影响性能。我们必须在带宽和性能或准确性之间做出选择。较小的模型肯定不太准确,并且会在我之前提到的一些因素中遗漏人脸,例如光线不足或脸部被面具覆盖时。

Microsoft Azure、Google Cloud 和其他可能的企业都提供云中的人脸检测。因为我们避免下载大模型,基于云的检测避免了繁重的页面加载,随着它的频繁改进往往更准确,并且由于优化的硬件甚至可能更快。如果你需要高精度,你可能需要研究一个你满意的计划。

我绝对建议将 face-api.js 用于业余项目、实验,甚至可能是 MVP。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: