Git項目源碼：https://github.com/DaMaiGit/artifact
花絮
今天是一年一度的情人節。都說女生的梳妝檯上永遠缺一支口紅，在這個時候，給心儀的女神送一支適合她的口紅，表達自己的想念之情準沒錯。想到女神收到口紅後欣喜的樣子，還真有點小激動呢！
作爲技術直男，怎樣挑選色號才能不出錯呢？上次送女神死亡芭比粉的翻車經歷還歷歷在目。爲此，在這段宅家的日子裏，小編痛定思痛，製作出了一款口紅分析神器：計算機根據女神的照片，自動識別其脣色，從而幫她挑選與脣色最匹配的口紅色號。
有了這個神器，我們就能憑藉珍藏的女神美照，輕鬆分析出她們所匹配的口紅款式，進而投其所好，從此沐浴在愛情的春風裏！
開始動工
口紅分析神器的製作步驟主要有：
- 識別照片中嘴脣部分的顏色；
- 對比口紅顏色，篩選出適合的口紅款式。
識別照片中嘴脣顏色
首先我們應該讓機器準確識別出照片中嘴脣的位置。Google的AI框架TensorFlow可以幫助開發者搭建訓練機器學習的模型。
Google的AI框架TensorFlow能夠幫助開發者搭建訓練機器學習的模型。
對於入門者而言，自己使用TensorFlow去訓練模型不是一蹴而就的，這裏面涉及到很多深度學習以及TensorFlow的基本概念，例如張量、隱藏層、激活函數、卷積層、池化層等。
好在深度學習的應用並不難，justadudewhohacks大神的人臉識別模型框架face-api可以幫我們忙。構建於TensorFlow.js核心庫之上，face-api是基於MobileNetV1的神經網絡所進行的人臉樣本訓練。藉助它，我們能夠使程序快速獲得人臉識別的能力。
好在深度學習的應用並不困難，這讓我想起了justadudewhohacks大神的人臉識別模型框架:face-api。face-api本質上是構建於TensorFlow.js核心庫之上，基於MobileNetV1的神經網絡進行人臉樣本的訓練。總而言之，藉助它，我們能夠快速使我們的程序獲得人臉識別的能力。
深度學習的原理
深度學習指的是通過深度神經網絡訓練機器，使其獲得與人類相似的學習與分析能力，進而完成識別文字、圖像和語音的任務。
深度學習主要包括以下三個步驟：
- 構建深度神經網絡；
- 輸入數據樣本，獲得模型並評估效果；
- 優化模型並輸出。
face-api已經實現了上述三個步驟，爲開發者提供了人臉識別的模型，並封裝成了簡易的api，使我們能在前端項目上更方便地使用人臉識別技術。如圖所示，藍色部分是face-api已經完成的任務，而我們要做的則是輸入人臉圖片到已經訓練好的模型中，得到輸出值即可，即橙色框內的部分。
face-api的使用
引入方式
方式1:
如果我們不使用打包工具的話，可以直接將github庫中的dist目錄下的腳本face-api.js直接導入
<script src="face-api.js"></script>
方式2:
使用npm來引入face-api庫；
npm i face-api.js
初始化模型
藉助不同的卷積神經網絡，face-api提供了一系列模型。常用的模型如下所示：
var nets = {
ssdMobilenetv1: new SsdMobilenetv1(), // ssdMobilenetv1 目標檢測
tinyFaceDetector: new TinyFaceDetector(), // 人臉識別（精簡版）
tinyYolov2: new TinyYolov2(), // Yolov2 目標檢測（精簡版）
mtcnn: new Mtcnn(), // MTCNN
faceLandmark68Net: new FaceLandmark68Net(), // 面部 68 點特徵識別
faceLandmark68TinyNet: new FaceLandmark68TinyNet(), // 面部 68 點特徵識別（精簡版）
faceRecognitionNet: new FaceRecognitionNet(), // 面部識別
faceExpressionNet: new FaceExpressionNet(), // 表情識別
ageGenderNet: new AgeGenderNet() // 年齡識別
};
face-api 工程的weights目錄下放置了模型文件，我們只需要將weights全部拷貝到工程目錄中即可。
通過faceapi.net大家可以加載對應的模型：
faceApi.nets.ssdMobilenetv1.load('/weights') //加載ssdMobilenetv1 目標檢測模型
faceApi.nets.faceLandmark68Net.load('/weights')//加載面部 68 點特徵識別模型
在口紅分析神器中，我們僅需要加載ssdMobilenetv1和faceLandmark68Net模型即可。
加載完成後，大家可以調用faceApi.detectSingleFace(input)來識別單個人臉或使用faceapi.detectAllFaces(input)來識別多張人臉。
const detections1 = await faceapi.detectSingleFace(input) //return FaceDetection | undefined
const detections2 = await faceapi.detectAllFaces(input) //return Array<FaceDetection>
其中，對象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個特徵點信息，大家可以通過以下代碼查看效果：
let canvas = faceApi.createCanvasFromMedia(image)
faceApi.draw.drawFaceLandmarks(canvas,landmarks.landmarks) //繪畫68個特徵點
canvas.toBlob(function(blob){
console.log(URL.createObjectURL(blob))
})
`
此外，爲使開發者操作更加便捷，FaceLandmarks68還提供了一些方法用於獲取五官的點位信息：
let landmarkPositions = landmarks.positions // 獲取全部 68 個點
let jawline = landmarks.getJawOutline() // 下巴輪廓 1~17
let leftEyeBbrow = landmarks.getLeftEyeBrow() // 左眉毛 18~22
let rightEyeBrow = landmarks.getRightEyeBrow() // 右眉毛 23~27
let nose = landmarks.getNose() // 鼻子 28~36
let leftEye = landmarks.getLeftEye() // 左眼 37~40
let rightEye = landmarks.getRightEye() // 右眼 43~48
let mouth = landmarks.getMouth() // 嘴巴 49~68
我們可以採用FaceLandmarks68.getMouth()方法獲取脣部的20個特徵點，並通過循環遍歷特徵點的位置，來獲取對應位置的canvas信息。
/**
* 獲取嘴部20個特徵點的顏色
* @param canvans
* @param mouthPoint
*/
getMouthColor:function (canvans,mouthPoint) {
let context = canvans.getContext("2d")
for (let i =0;i<mouthPoint.length;i++){
let data = context.getImageData(mouthPoint[i]["_x"],mouthPoint[i]["_y"],1,1)
this.mouthColors[i] = data.data
}
}
至此，我們已經完成了女神嘴脣位置顏色的獲取，接下來就是將她們脣部20個特徵點的顏色和口紅的色號進行匹配，選擇相近的顏色值。
口紅顏色匹配
口紅顏色匹配可以藉助github上一個口紅可視化色號庫 (https://github.com/Ovilia/lipstick)**。該庫收錄了紀梵希、聖羅蘭等口紅品牌的相關色號。
項目中的口紅顏色以json格式存儲：
{
"brands":[
{
"name":"聖羅蘭",
"series":[
{
"name": "瑩亮純魅脣膏",
"lipsticks": [{
"color": "#D62352",
"id": "49",
"name": "撩騷"
},
...
}
]
},
...
]
}
我們複製json格式文件，將脣部20個特徵點的顏色分別遍歷口紅庫中口紅的顏色進行對比，獲得差值最小的一款口紅作爲匹配的結果值即可。
本文采用歐幾里得距離公式予以計算嘴脣的顏色和口紅的色號。步驟如下：
1、將口紅庫的color字段從十六進制轉換爲RGB模式；
2、將口紅的RGB和脣部的20個特徵點RGB帶入歐幾里得距離公式，計算得出差值最小的一款口紅色號作爲最終結果。
我們將RGB作爲顏色的三個維度，帶入歐幾里得公式進行計算：
compareColor:function(r1,g1,b1,r2,g2,b2){
let r = Math.pow((r1-r2),2)
let g = Math.pow((g1-g2),2)
let b = Math.pow((b1-b2),2)
return Math.sqrt((r+g+b))
}
我們把20個嘴部特徵點依次遍歷口紅庫中的顏色，記錄差值最小的一款口紅作爲最終結果並展示到UI界面上。
以上就是口紅分析神器的全步驟。
成果展示
寫在最後
該項目還存在很多可以優化的地方，例如：口紅顏色庫有待完善，照片模型識別的準確度還有提升空間等。希望本文能夠拋磚引玉，幫助我們非人工智能的開發工程師感受到AI的魅力和樂趣。
AI相關的知識值得我們去積極探索，如果你想繼續學習TensorFlow相關的內容，推薦閱讀《TensorFlow實戰Google深度學習框架》或直接訪問TensorFlow官網，抑或是觀看吳恩達教授的《機器學習》課程。
最後，受新型肺炎影響，希望大家出門戴口罩，保護好自己。分隔兩地的情侶也請避免不遠萬里來相見，畢竟真愛不會因爲暫時的距離所阻隔。祝天下有情人終成眷屬！
