Git项目源码：https://github.com/DaMaiGit/a...琐事今天是一年一度的情人节。都说女生的梳妆台上永远少不了口红。这时候给喜欢的女神送一支适合她的口红就对了，表达一下想念。想想女神收到口红后开心的样子，真的有点小激动！作为技术直男，如何选择色号才不会出错呢？上次送死神芭比粉丝的翻车经历我还历历在目。为此，在家的这几天，小编痛定思痛做了一个口红分析神器：电脑根据照片自动识别女神的唇色，帮她选出最适合的口红号匹配唇色。有了这款神器，我们就可以轻松分析出她们和我们女神美照合集搭配的口红款式，然后搭配出自己喜欢的样子，从此沐浴爱情的春风！口红分析神器制作的主要步骤是：识别照片中嘴唇的颜色；对比口红颜色，选择合适的口红款式。识别照片中的唇色首先我们要让机器准确识别照片中嘴唇的位置。谷歌的AI框架TensorFlow可以帮助开发者构建用于训练机器学习的模型。谷歌的AI框架TensorFlow可以帮助开发者构建用于训练机器学习的模型。对于初学者来说，使用TensorFlow训练模型并不容易，涉及到很多深度学习和TensorFlow的基本概念，比如张量、隐藏层、激活函数、卷积层、池化层等。幸运的是，深度学习的应用学习并不难，只是adudewhohacks高手人脸识别模型框架face-api就可以帮到我们。face-api建立在TensorFlow.js核心库之上，是基于MobileNetV1神经网络的人脸样本训练。有了它，我们就可以让程序快速获得人脸识别的能力。
好在深度学习的应用并不难，这让我想起了justadudewhohacks的人脸识别模型框架：face-api。face-api基本上构建在TensorFlow.js核心库之上，并基于MobileNetV1神经网络对人脸样本进行训练。总之，在它的帮助下，我们可以快速的让我们的程序获得人脸识别的能力。深度学习原理深度学习是指通过深度神经网络对机器进行训练，使其获得与人类相似的学习和分析能力，进而完成识别文本、图像和语音的任务。深度学习主要包括以下三个步骤：构建深度神经网络；输入数据样本，得到模型并评估效果；优化模型并输出。face-api实现了以上三个步骤，为开发者提供了一个人脸识别模型，并将其封装成一个简单的api，方便我们在前端项目中更方便的使用人脸识别技术。如图，蓝色部分是face-api已经完成的任务，我们要做的就是将人脸图片输入到训练好的模型中，得到输出值，也就是橙色框内的部分。face-api的使用导入方法一：如果我们不使用打包工具，直接导入github库中dist目录下的脚本face-api.js即可方法二：使用npm导入face-api库；npmiface-api.js初始化模型借助不同的卷积神经网络，face-api提供了一系列模型。常用模型如下：varnets={ssdMonetonetv1:newSsdMonetonetv1(),//ssdMobilonetv1目标检测tinyFaceDetector:newTinyFaceDetector(),//人脸识别（简化版）tinyYolov2:newTinyYolov2(),//Yolov2目标检测（精简版）mtcnn:newMtcnn(),//MTCNNfaceLandmark68Net:newFaceLandmark68Net(),//人脸68点特征识别faceLandmark68TinyNet:newFaceLandmark68TinyNet(),//人脸68点特征识别（精简版）faceRecognitionNet:newFaceRecognitionNet(),//人脸识别faceExpressionNet:newFaceExpressionNet(),//表情识别ageGenderNet:newAgeGenderNet()//年龄识别};模型文件都放在face-api项目的weights目录下，我们只需要把所有的weights拷贝到项目目录下即可。通过faceapi.net，可以加载对应的模型：faceApi.nets.ssdMobilonetv1.load('/weights')//加载ssdMobilenetv1目标检测模型faceApi.nets.faceLandmark68Net.load('/weights')//加载68个点人脸特征识别模型在口红分析神器中，我们只需要加载ssdMobilenetv1和faceLandmark68Net模型。加载完成后，可以调用faceApi.detectSingleFace(input)识别单人脸或使用faceapi.detectAllFaces(input)识别多张人脸。constdetections1=awaitfaceapi.detectSingleFace(input)//返回人脸检测|undefinedconstdetections2=awaitfaceapi.detectAllFaces(input)//returnArray
其中，对象FaceDetection返回人脸识别的相关信息，如置信度、人脸边框等：{"_imageDims":{"_width":225,"_height":225},"_score":0.9931827187538147,"_classScore":0.9931827187538147,"_className":"","_box":{"_x":75.58209523558617,"_y":12.725257873535156,"_width":86.51270046830177,"_height":99.15830343961716}....}单靠FaceDetection返回的对象不能满足要求。我们可以调用链返回68个特征点信息：{detection:FaceDetection,landmarks:FaceLandmarks68}其中landmarks对象覆盖了人脸的68个特征点信息，可以通过如下代码查看效果：letcanvas=faceApi.createCanvasFromMedia(image)faceApi.draw.drawFaceLandmarks(canvas,landmarks.landmarks)//绘制68个特征点canvas.toBlob(function(blob){console.log(URL.createObjectURL(blob))})不难发现模型根据人脸的五官标记68个特征点大家可以用FaceLandmarks68.positions得到Array(68)，这些数组元素是68个特征点，点的具体分布如下：`另外，为了为了让开发者操作起来更方便，FaceLandmarks68还提供了一些获取面部特征点信息的方法：letlandmarkPositions=landmarks.positions//获取全部68个点letjawline=landmarks.getJawOutline()//下颌轮廓1~17letleftEyeBbrow=landmarks.getLeftEyeBrow()//左眉18~22letrightEyeBrow=landmarks.getRightEyeBrow()//右眉23~27letnose=landmarks.getNose()//鼻子28~36letleftEye=landmarks.getLeftEye()//lefteye37~40letrightEye=landmarks.getRightEye()//Righteye43~48letmouth=landmarks.getMouth()//对于嘴巴49~68，我们可以使用FaceLandmarks68.getMouth()方法获取20嘴唇的特征点，通过循环遍历特征点的位置，得到对应位置的canvas信息。/***获取嘴部20个特征点的颜色*@paramcanvas*@parammouthPoint*/getMouthColor:function(canvans,mouthPoint){letcontext=canvas.getContext("2d")for(leti=0;i
