文章目录
前端机器学习–识别人脸在脸颊上画草莓
一、最终结果
二、原理
要在用户上传的人脸上画草莓,会面临几个问题:
- 在哪儿画?
- 画多大?
- 草莓的角度和脸的角度是否一致?
基于这些问题,就不得不使用机器学习来解决了!
1. 前端的机器学习
提起前端的机器学习,首先想到的就是Google的TensorFlow:
TensorFlow 是一个端到端开源机器学习平台。它拥有一个包含各种工具、库和社区资源的全面灵活生态系统,可以让研究人员推动机器学习领域的先进技术的发展,并让开发者轻松地构建和部署由机器学习提供支持的应用。
有兴趣的可以去TensorFlow官网看看,有很多好玩的东西。
当然,我们仅仅是使用人脸识别,那有人已经在TensorFlow的基础上封装了专门针对人脸识别的库 face-api.js
2. 基本原理
我只是大体说一下,我只是一个感兴趣的可以去看看具体的内容。
- 第一步:找出所有的面孔
解决方案HOG(Histogram of Oriented Gradients)方向梯度直方图,一种能够检测物体轮廓的算法。
- 第二步:脸部的不同姿势
使用由瓦希德·卡奇米(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个点,我们就可以轻松的知道眉毛、眼睛、鼻子和嘴巴的位置信息了,根据这些位置信息,我们经过一些简单的计算就可以得出开始提到的这几个问题的答案:
- 在哪儿画?
- 画多大?
- 草莓的角度和脸的角度是否一致?
三、基于vue-cli
搞一个
有了face-api.js我们就可以动手开始搞了。大体上分为4步:
- 使用
vue-cli
脚手架搭建项目- 使用
face-api.js
检测人脸图片,获取检测结果- 计算(草莓大小、位置、旋转角度等)
- 画草莓
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)