实操：使用React和face-api.js为偶像组合提供面部识别SPA！

如今，人脸检测和识别并不是什么新鲜事。一年前，我曾经尝试在Python上使用TensorFlow和facenet制作我自己的面部识别系统。该项目的目的是对AKB48成员的照片进行人脸检测和识别。

可能看了现在大多数的女团，记住名字都是一个问题，更别说是区分和识别他们的面孔了。

我的Python项目工作得很好。我可以在Jupyter-Notebook中创建代码来检测和识别来自任何已经输入图像的成员。但是，系统运行在Python环境中，这对于大多数面部识别系统来说都是普通的。但这意味着如果我想从其他设备输入图像，例如智能手机，我需要创建前端来连接和发送图像到Python后端来处理面部检测和识别。

由于缺乏动力，项目停止，一年过去了。直到我发现了VincentMühler的face-api.js，这是一个用于TensorFlow.js的面部检测和识别的JavaScript API。现在可以在浏览器上运行所有深度学习过程，而不需要后端代码。

是的，没有任何后端编码或环境设置要求！你需要的只是一个静态的网络托管。它可以在任何设备或浏览器上运行。 （如果您的浏览器可以运行TensorFlow.js，那就是全部）在本文的最后，我将向您展示如何将此React应用程序部署到Github 页面上。

偶像组合：BNK48

这次回到我的项目，我决定使用来自另一个偶像小组的照片，BNK48，是AKB48的姐妹乐队，位于曼谷。

让我告诉你为什么偶像组是实验面部识别应用程序的一个很好的选择。（声明：我不是一个粉丝。）那是因为我们需要许多已知的面孔和名字来测试我们的系统，对吗？使用5-10张照片来测试系统可能很简单，但在现实世界中，你不会只为10个人制作人脸识别系统，所以，采用偶像组合BNK48的30-50名成员是一个很好的测试数字。 （不是太少，也不是太多）我们可以很容易地从互联网上找到他们的肖像照片，其中有各种各样的角度的脸，特别是他们的Facebook粉丝页上的图片。

我们会做什么？

在这个项目中，我们将使用React和face-api.js库创建单页面应用程序来检测和识别偶像的面部。由于Vincent在他的API中为我们做了所有困难的部分，包括预先训练的人脸检测、面部标记、面部对齐和面部识别模型，因此我们不需要自己训练模型，甚至不需要在TensorFlow中编写DL模型。实际上，您并不需要了解深度学习或CNN如何制作此应用程序。您需要知道的只是JavaScript和React的基本概念。

如果您迫不及待看到这个展示页，请访问我的演示页面（//p1-tt.byteimg.com/origin/pgc-image/75d24266a64b42d19f177f36f72d2e1d.jpg" style="width: 650px;">

打开浏览器并转到http：// localhost：3000 /如果您看到带有React徽标的起始页面，那么您可以继续。现在用您喜欢的任何代码编辑器打开项目文件夹。您应该看到这样的文件夹结构。

现在转到src / App.js并用下面的代码替换代码。

我们这里只有导入Home组件并创建一路由到“/”作为我们的登陆页面。我们将很快创建这个组件。

让我们从创建新文件夹src / views开始，并在此文件夹中创建新文件Home.js。然后将下面的代码放到文件中并保存。

我们只为照片输入链接创建2个链接到“localhost：3000 / photo”，将摄像机链接创建为“localhost：3000 / camera。如果一切正常，我们应该在登录页面看到类似下面的内容。

Face API

在我们继续创建新页面之前，我们要安装face-api.js并创建我们的API文件以将React与API连接。现在返回控制台并安装库。

npm i face-api.js\n

该库附带了TensorFlow.js和我们想要的所有组件，模型权重除外。模型权重是已经使用大数据集训练的神经网络权重，在这个例子中指的是数千个人脸图像。

由于许多聪明人已经为我们训练了模型，我们需要做的只是掌握我们想要使用的必要权重然后手动输入项目。

您将在此处找到此API的所有权重。（//p1-tt.byteimg.com/origin/pgc-image/5f79da43a2194a688a92a4b832994460.jpg" style="width: 650px;">

确保您在public / models文件夹下有所有权重，如下所示，否则如果没有适当的权重我们的模型将无法工作。

现在返回并为src / api创建API的新文件夹，并在该文件夹中创建新文件face.js。我们想要做的是加载模型并创建函数以将图像提供给API并返回所有面部描述，并比较描述符以识别面部。我们将导出这些函数并稍后在React组件中使用。

这个API文件中有两个重要的部分。第一个是使用函数loadModels（）加载模型和权重。本步骤只加载了人脸检测器模型、人脸地标模型和人脸识别模型。

另一部分是函数getFullFaceDescription（），它接收图像blob作为输入并返回全面描述。此函数使用API functionfaceapi.fetchImage（）将图像blob提取到API。然后faceapi.detectAllFaces（）将获取该图像并查找图像中的所有面，然后.withFaceLandmarks（）将在使用.withFaceDescriptors（）返回128个值的面部特征作为Float32Array之前绘制68个面部地标。

值得一提的是，我使用图像inputSize 512像素进行图像输入，稍后将使用160像素进行视频输入。它是由API推荐的。

现在我希望您将下面的图像保存到新文件夹src / img并将其命名为test.jpg。这将是我们测试我们的应用程序的测试图像。 （如果你不知道，顺便说一下，她是Cherprang，BNK48的成员。）

让我们创建新文件src / views / ImageInput.js。这将是视图组件，用于输入和显示我们的图像文件。

此时，此组件将仅显示测试图像src / img / test.jpg并开始将API模型加载到浏览器，这将花费几秒钟。之后，图像将被输入API以获得完整的面部描述。我们可以将返回的fullDesc存储在状态中以便稍后使用，也可以在console.log中查看其详细信息。

但在此之前，我们必须将ImageInput组件导入我们的src / App.js文件。并为/photo创建新的路线。

现在，如果您转到登录页面http：// localhost：3000并单击照片输入，您应该会看到照片显示。如果您检查浏览器的控制台，则应该看到此图像的全脸描述。

人脸检测盒

如您所见，描述包含我们在此项目中需要的所有面部信息，包括描述符和检测。在内部检测中，存在诸如坐标x y上下左右高度宽度等框信息。

face-api.js库附带了使用html canvas绘制人脸检测框的功能，这真的很不错。但由于我们使用的是React，为什么我们不用CSS绘制人脸检测框呢，这样我们就可以用React方式来管理框和识别显示了。

我们想要做的是使用检测的框信息覆盖在图像顶部的面部框。我们还可以稍后显示应用程序识别的每个面部的名称。这是我将drawBox添加到ImageInput组件的方法。

让我们一起添加输入标签，以便我们可以更改输入图像。

在React中使用内联CSS，我们可以将所有面部框放置在这样的图像上。如果您尝试使用更多面部更改照片，您也可以看到更多框。

面部识别

现在来到有趣的部分。为了识别人，我们需要至少一个参考图像来从图像中提取128个特征向量或描述符的值。

API具有LabeledFaceDescriptors功能，可以为我们想要识别的每个人创建描述符和名称的标签。该标签将与查询的描述符一起提供给API以匹配人。但在此之前，我们将要准备一份名称和描述符的简介。

面部轮廓

我们已经为Cherprang提供了一个图像参考。所以，让我们使用它的描述符制作一个配置文件。

我们现在要做的是创建新的JSON文件和文件夹src / descriptors / bnk48.json。此文件将包含其参考照片中的成员名称和描述符。这是第一个样本文件，只有一个图像描述符。

如果我们有所有成员的照片，我们可以逐个添加描述符和名称来完成我们的面部轮廓。我已经做了一个。我使用每个成员的5-10张照片来创建这个完整的面部轮廓。所以，你可以直接下载这个文件并替换src / descriptors / bnk48.json，轻松搞定。（这里我用泰语和平假名作为显示名称）

整个成员的文件大小约为1MB，这对我们的测试应用程序来说也不错。但在现实世界中，您可能需要将所有面部轮廓存储在数据库中，这样您就不必再担心文件大小了，但您需要使用服务器端来运行面部识别过程。

面对匹配

下一步我们要为面部识别任务创建labeledDescriptors和faceMatcher。现在返回src / api / face.js，然后将下面的函数添加到您的文件中。

此函数将接收面部轮廓（JSON文件）作为输入，并创建每个成员描述符的labeledDescriptors，其名称为label。然后我们可以使用label创建并导出faceMatcher。

您可能会注意到我们配置了maxDescriptorDistance 0.5。这是欧几里德距离的阈值，以确定参考描述符和查询描述符是否足够接近于说出某些内容。 API默认值为0.6，这对于一般情况来说已经足够了。但是我发现0.5对于我来说更精确，误差更小，因为一些偶像的脸很相似，如何调整此参数取决于您。

由于我们的函数已经准备就绪，请回到src / views / ImageInput.js来完成我们的代码。

在这个最终代码中，我们从face.js导入createMatcher函数，并使用我们准备的面部轮廓创建faceMatcher。在函数handleImage（）中，在我们从图像中获取fullDesc之后，我们绘制出描述符并找到每个面的最佳匹配。

然后我们使用p标签和CSS在每个面部检测框下显示我们的最佳匹配，像这样。

如果你已经下载了完整的面部资料。你可以试着用这个改变图像。我希望你能看到所有的面孔检测与正确的匹配!!

实时视频输入

本节将指导您使用实时视频作为带有React-webcam的face-api.js的输入。 让我们从安装库开始。

同样，在创建新的视图组件之前，我们还需要在/src/App.js中添加一个用于视频输入的路径。我们将很快创建VideoInput组件。

视频输入组件

让我们创建新文件src / views / VideoInput.js并将下面的所有代码放在文件中并保存。这是该组件的完整代码。

面部检测和识别的所有机制都与ImageInput组件相同，除了输入是每1500ms网络摄像头截取一次。

我将屏幕尺寸设置为420x420像素，但您可以尝试更小或更大的尺寸。 （更大的尺寸将需要更多时间来处理面部检测）

在函数setInputDevice内部，我只需检查设备是否有1或2个摄像头（或更多）。如果只有一台摄像机，我们的应用程序将假设它是一台PC，然后我们将从摄像头面向模式：用户进行捕获，但如果有2个或更多，那么它可能是智能手机，那么我们将使用摄像头从后侧面向摄像头捕获： {exact：'environment'}

我使用相同的功能绘制面部检测框，如组件ImageInput。实际上，我们可以把它作为另一个组件，这样我们就不必再重复两次了。

现在我们的应用已经完成。你可以用你的脸来测试VideoInput，但它很可能会将你识别为未知或有时会误认为你是偶像。这是因为如果欧氏距离小于0.5，系统将尝试识别所有出现的面部。

总结与教训

该应用程序可以非常准确地检测和识别偶像脸，但有时仍然会发生一些错误。这是因为拍摄对象可能无法正面面对相机，脸部可能会倾斜，或者照片是由其他一些应用编辑的。

一些偶像可能看起来很相似，这使得App有时会混淆。我发现当来自不同的来源或灯光设置时，偶像的脸可能会有所不同。戴眼镜或化妆品的偶像也可能会混淆我们的应用程序。

我不得不承认系统并不完美，但仍有改进的余地。

我已经使用Chrome和Safari进行了测试，它在PC上运行良好。我认为它也适用于IE或Firefox。使用Android智能手机进行测试对图像输入和视频输入都有效，但由于安全问题，react-webcam无法与iPhone配合使用，我仍在寻找解决方法。较旧的手机往往无法与TensorFlow一起正常工作，因为它需要足够的计算能力来运行神经网络。

部署到Github

您可以将此应用程序部署到任何静态主机，但本节将指导您使用一些技巧将此React应用程序部署到Github页面。而且您需要拥有Github帐户。如果你没有，那就去做一个免费的。

首先，让我们安装gh-pages库。

npm i gh-pages\n

然后我们需要在src / App.js中的createHistory（）内添加{basename：process.env.PUBLIC_URL}。

现在转到你的Github并使用App名称创建新的存储库，在我们的例子中，先识别脸部表情，然后复制git URL以便稍后添加到我们的项目中。接下来，打开package.json并使用您的Github帐户和App名称添加“homepage”。

暂时不要关闭package.json文件，因为我们将在这样的“脚本”下添加predeploy和deploy命令行。

现在您可以保存文件并返回控制台终端，然后运行git命令将代码上传到Github存储库，并运行runnpm run deploy以部署到Github Pages。该页面应使用您设置的URL发布：http：//YOUR_GITHUB_ACCOUNT.github.io/react-face-recognition您可以在此处查看本教程的Github页面（//p1-tt.byteimg.com/origin/pgc-image/6ced66ade69848a489e89dc796cc9f2b.jpg" style="width: 650px;">