前端机器学习--识别人脸在脸颊上画草莓

前端机器学习–识别人脸在脸颊上画草莓

一、最终结果

在线体验
急性子想直接食用的点这个：源码地址

二、原理

要在用户上传的人脸上画草莓，会面临几个问题：

1. 在哪儿画？
2. 画多大？
3. 草莓的角度和脸的角度是否一致？

基于这些问题，就不得不使用机器学习来解决了！

1. 前端的机器学习

提起前端的机器学习，首先想到的就是Google的TensorFlow：

TensorFlow 是一个端到端开源机器学习平台。它拥有一个包含各种工具、库和社区资源的全面灵活生态系统，可以让研究人员推动机器学习领域的先进技术的发展，并让开发者轻松地构建和部署由机器学习提供支持的应用。

有兴趣的可以去TensorFlow官网看看，有很多好玩的东西。

当然，我们仅仅是使用人脸识别，那有人已经在TensorFlow的基础上封装了专门针对人脸识别的库 face-api.js

2. 基本原理

我只是大体说一下，我只是一个感兴趣的可以去看看具体的内容。

1. 第一步：找出所有的面孔

解决方案HOG（Histogram of Oriented Gradients）方向梯度直方图，一种能够检测物体轮廓的算法。

2. 第二步：脸部的不同姿势

使用由瓦希德·卡奇米（Vahid Kazemi）和约瑟菲娜·沙利文（Josephine Sullivan）在 2014 年发明的一种面部特征点估计（face landmark estimation）算法。

这一算法的基本思路是找到68个人脸上普遍存在的点（称为特征点， landmark）：

其中：

下巴轮廓17个点 [0-16]
左眉毛5个点 [17-21]
右眉毛5个点 [22-26]
鼻梁4个点 [27-30]
鼻尖5个点 [31-35]
左眼6个点 [36-41]
右眼6个点 [42-47]
外嘴唇12个点 [48-59]
内嘴唇8个点 [60-67]

有了这68个点，我们就可以轻松的知道眉毛、眼睛、鼻子和嘴巴的位置信息了，根据这些位置信息，我们经过一些简单的计算就可以得出开始提到的这几个问题的答案：

1. 在哪儿画？
2. 画多大？
3. 草莓的角度和脸的角度是否一致？

三、基于vue-cli搞一个

有了face-api.js我们就可以动手开始搞了。大体上分为4步：

1. 使用vue-cli脚手架搭建项目
2. 使用face-api.js检测人脸图片，获取检测结果
3. 计算（草莓大小、位置、旋转角度等）
4. 画草莓

1. 使用vue-cli脚手架搭建项目

使用vue-cli快速创建一个项目

2. 使用face-api.js检测人脸图片，获取检测结果

(1)安装face-api.js

npm i face-api.js

(2)加载模型数据

使用face-api.js是不需要我们自己慢慢训练的，可以直接使用models。
你可以根据应用程序的要求加载你需要的特定模型。但是如果要运行一个完整的端到端的示例，我们还需要加载人脸检测、人脸特征点检测和人脸识别模型。相关的模型文件可以在代码仓库中找到。我们将它们放在public/models文件夹下并导入:

const MODEL_URL = "/models";
await faceapi.loadSsdMobilenetv1Model(MODEL_URL);
await faceapi.loadFaceLandmarkModel(MODEL_URL);
await faceapi.loadFaceRecognitionModel(MODEL_URL)