卷帘机厂家
免费服务热线

Free service

hotline

010-00000000
卷帘机厂家
热门搜索:
行业资讯
当前位置:首页 > 行业资讯

手把手教你在浏览器中使用脸部识别软件包_[#第一枪]

发布时间:2021-06-07 15:48:34 阅读: 来源:卷帘机厂家

按:本文为雷锋字幕组编译的技术博客,原标题 face-api.js?—?JavaScript API for Face Recognition in the Browser with tensorflow.js,作者为Vincent Mühler 。

翻译 | 王飞 赵朋飞 整理 | MY

我可以很激动地说,我们终于有可能在浏览器中运行人脸识别程序了!在这篇文章中,我会给大家介绍一个基于 TensorFlow.js 核心的 JavaScript 模块,这个模块叫做 face-api.js。为了实现人脸检测、人脸识别以及人脸特征点检测的目的,该模块分别实现了三种类型的卷积神经网络。

和往常一样,我们先看一个简单一点的代码实例,用几行的代码以便能够让大家可以直接开始使用这个包。我们开始吧!

第一个 face-recognition.js,那么现在还有其他包吗?

如果你有阅读过我的另外一篇关于 nodejs 进行人脸识别方面的文章:Node.js+face-recognition.js: Simple and Robust Face Recognition using Deep Learning , 你可能会意识到,一段时间以前,我构建过一个相似的包。比方说三个 face-recognition.js,将人脸识别功能引入 nodejs 当中。

起初,我没有想到在 javascript 社区中对脸部识别软件包的需求如此之高。对于很多人来说,face-recognition.js 似乎是一个很不错的免费软件包了,另外也有像微软和亚马逊提供的付费软件包。但是,一直有人问我能否在浏览器中完整地运行整个人脸识别的流程

最后的答案是肯定的,多亏了 tensorflow.js,利用好 tfjs-core, 我成功实现了部分相似的工具,这些小工具能够让你得到和使用 face-recognition.js 几乎相似的运行结果,并且是在浏览器中。而且最棒的一点是你不需要再安装任何依赖项,它可以直接运行。额外的好处是它还支持 GPU 加速,在 WebGL 上运行操作。

这足让我相信 JavaScript 社区需要这样的浏览器软件包!接下来就是发挥你自己的想象力,你可以用这个来构建各种各样的应用程序。:)

如何用深度学习来解决人脸识别的问题

如果你是那种想要尽快开始的人(或妹子),你可以跳过这一部分并直接跳到代码部分。但为了更好地理解 face-api.js 中用于实现人脸识别的方法,我强烈建议你按照步骤来,因为我经常被问到这一部分的问题。

为了简单起见,我们实际想要实现的是给定一个人的脸部图像然后对他/她进行识别,给定的图像即输入图像。我们解决这个问题的方法是为每个我们想要识别的人提供一个(或多个)图像,并用人名称标记,即参考数据。现在我们将输入图像与参考数据进行比较,并找到最相似的参考图像。如果两个图像足够相似,那我们就输出人名,否则我们输出'未知'。

听起来像是个不错的计划!但是这里仍存在两个问题。首先,如果我们有一张显示多个人的图像,并且我们想要识别所有这些图像,那该怎么办呢?其次,我们还需要能够获得度量两张人脸图像的相似性的量,以便进行比较。

人脸检测

第一个问题的答案是人脸检测。简单地说,我们首先找到输入图像中的所有的人脸。对于人脸检测,face-api.js 实现了 SSD(Single Shot Multibox Detector),它基本上是一个基于 MobileNetV1 的 CNN,在网络顶部叠加了一些额外的预测层。

这个网络返回包围每张脸的 bounding box,以及其对应的分数,即每个 boundingbox 中包含人脸的概率。这里的分数用于过滤边界框,因为图像中可能根本不包含人脸。另外要注意的是,即使图像中只有一个人,为了得到 boundingbox,也应该首先进行人脸检测这一步骤。

人脸特征点检测与人脸对齐

第一个问题解决了 但是,我想指出我们接下来要对齐边界框,在将它们传递到面部识别网络之前,为每个框提取以面部为中心的图像,因为这样可以使面部识别更准确!

针对这个目标。face-api.js 已经实现了一个简单的 CNN,这个网络能够返回给定人脸图片的 68 个脸部特征点。

根据特征点的位置,boundingbox 可以被确定在脸部的中心。下面显示的是人脸检测的结果(左)以及人脸对齐后的结果(右)。

人脸识别

现在我们可以将提取和对齐的人脸图像提供给人脸识别网络,该网络基于类似 ResNet-34 的体系结构,基本上与 dlib 中实现的体系结构相对应。该网络已经被训练,能够学习将人脸的特征映射到一个人脸描述器上(具有 128 个值的特征向量),这一过程通常也被称为面部嵌入。

现在回到我们最开始比较两张脸的这个问题上:我们将使用每个提取的面部图像的面部描述符,并将它们与参考数据的面部描述符进行比较。更确切地说,我们可以计算两个面部描述符之间的欧氏距离,并基于阈值判断两个面是否相似(对于 150×150 大小的面部图像来说,0.6 是比较好的阈值)。使用欧几里德距离的效果非常好,但当然你也可以使用你选择的任何类型的分类器。以下 gif 可视化了两张图片通过欧几里德距离进行比较的过程。

现在,让我们消化一下人脸识别的理论,接下来用代码来编写一个例子吧。

编码时间!

在这个简短的例子中,我们将逐步了解如何在以下输入图像中识别多个人脸:

包含脚本

首先,从 dist/face-api.js 获取最新的编译,或者 从 dist/face-api.min.js 获取修订版,并将脚本包含进来:

如果使用 npm:

加载模型数据

根据您的应用程序的需求,您可以专门加载您需要的模型,但是要运行一个完整的端到端示例,我们需要加载人脸检测、 脸部特征点和人脸识别模型。模型文件可以在 repo 或点击这里获取。

模型的权重已经被量化,与原始模型相比,将模型文件的大小减少了 75%,以允许您的客户只加载所需的最少数据。此外,模型权重被分割成最大 4 MB 的块,允许浏览器缓冲这些文件,以便这些文件只被加载一次。

模型文件可以简单的被当做浏览器的静态资源,或者你可以在其他地方托管它们,并可以通过特定的路由或 URL 加载这些文件。假设你将它们和你的其他资源一起放到模型目录下(public/models):

或者,如果你仅仅想加载特定的模型:

从输入图像中获得对所有面孔的完整描述

神经网络接受 HTML 图像、画布、视频或者张量等形式的输入。使用 score > minScore 检测面部边界框,我们简单的说:

完整的面部描述包括检测结果(边界框+分值),脸部特征,以及计算描述符。正如你所看到的,在前面的讨论中 faceapi.allFaces 在后台做了所有的工作。然而,你也可以手动获取脸部位置和特征点。如果你以此为目标的话,可以在 github repo 找到很多例子。

注意,边界框和特征点位置依赖于原始图像/媒体的大小。如果显示的图像大小与原始图像大小不一致,您可以简单地调整大小:

我们可以通过将边界框绘制到画布上来可视化检测结果 :

脸部特征点可以如下方式显示:

通常,我所做的是将一个绝对定位的画布叠加在 img 元素的顶部,它们的宽度和高度是相同的(可以查看 github 上的示例了解更多信息)

面部识别

现在我们知道了如何检索输入图像中所有人脸的位置和描述了,我们将从一些图像中指出每个人脸并计算出人脸的描述符。这些描述符将会是我们的参考数据。

假设我们有一些可用的示例图像,我们首先从一个 url 获取图像,并使用 faceapi.bufferToImage 从数据缓冲区中创建 HTML 图像元素:

接下来,对于每一个图像,我们定位主题并计算面部描述符,就像我们之前对输入图像所做的操作:

现在,我们要做的所有事情都是循环遍历我们输入图像的面部描述,并找到与参考数据距离最小的描述符:

正如前面提到的,我们使用欧氏距离度量相似度,结果证明它是有效的。我们最终得到了在输入图像中检测到的每个面孔的最佳匹配。

最后,我们可以将边界框和它们的标签一起绘制到画布上,以显示结果:

好了!到目前为止,我希望您已经了解了如何使用这个 api。另外,我还建议您看一下 repo 的其他例子。现在尽情享受这个软件包吧!

如果你喜欢这篇文章,欢迎点赞并在 medium 或 twitter 上关注我。也欢迎在 github repository 上评价。请继续关注更多教程!

原文

教辅图书价格

染发剂鉴定价格

塑料分散剂批发