使用face-api.js實現人臉識別(一)

2019 年 10 月 31 日
筆記

功能

　　第一階段實現對圖片中人臉的識別並打上標籤(比如：人名)

　　第二階段使用攝影機實現對人物的識別，比如典型的應用做一個人臉考勤的系統

資源

face-api.js https://github.com/justadudewhohacks/face-api.js/

　　Face-api.js 是一個 JavaScript API，是基於 tensorflow.js 核心 API 的人臉檢測和人臉識別的瀏覽器實現。它實現了一系列的卷積神經網路（CNN），針對網路和移動設備進行了優化。非常牛逼，簡單好用

filepond https://github.com/pqina/filepond

　　是一個 JavaScript 文件上傳庫。可以拖入上傳文件，並且會對影像進行優化以加快上傳速度。讓用戶體驗到出色、進度可見、如絲般順暢的用戶體驗。確實很酷的一款上傳圖片的開源產品

fancyBox https://fancyapps.com/fancybox/3/

　　是一個 JavaScript 庫，它以優雅的方式展示圖片，影片和一些 html 內容。它包含你所期望的一切特性 —— 支援觸屏，響應式和高度自定義

設計思路

準備一個人臉資料庫，上傳照片，並打上標籤（人名），最好但是單張臉的照片，測試的時候可以同時對一張照片上的多個人物進行識別
提取人臉資料庫中的照片和標籤進行量化處理，轉化成一堆數字，這樣就可以進行比較匹配
使用一張照片來測試一下匹配程度

最終的效果

Demo http://221.224.21.30:2020/FaceLibs/Index 密碼：123456

注意：紅框中的火箭浣熊,鋼鐵俠,戰爭機器沒有正確的識別,雖然可以通過調整一些參數可以識別出來，但還是其它的問題，應該是訓練的模型中缺少對帶面具的和動漫人物的人臉數據。

實現過程

還是先來看看程式碼吧，做這類開發，並沒有想像中的那麼難，因為難的核心別人都已經幫你實現了，所以和普通的程式開發沒有什麼不同，熟練掌握這些api的方法和功能就可以做出非常實用並且非常酷炫的產品。

1、準備素材

　　下載每個人物的圖片進行分類

2、上傳伺服器資料庫

3、測試

程式碼解析

　　這裡對face-api.js類庫程式碼做一下簡單的說明

function dodetectpic() {        $.messager.progress();        //載入訓練好的模型（weight，bias）        Promise.all([          faceapi.nets.faceRecognitionNet.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.faceLandmark68Net.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.faceLandmark68TinyNet.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.ssdMobilenetv1.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.tinyFaceDetector.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.mtcnn.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          //faceapi.nets.tinyYolov.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights')        ]).then(async () => {          //在原來圖片容器中添加一層用於顯示識別的藍色框框          const container = document.createElement('div')          container.style.position = 'relative'          $('#picmodal').prepend(container)          //先載入維護好的人臉數據(人臉的特徵數據和標籤，用於後面的比對)          const labeledFaceDescriptors = await loadLabeledImages()          //比對人臉特徵數據          const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)          //獲取輸入圖片          let image = document.getElementById('testpic')          //根據圖片大小創建一個圖層，用於顯示方框          let canvas = faceapi.createCanvasFromMedia(image)          //console.log(canvas);          container.prepend(canvas)          const displaySize = { width: image.width, height: image.height }          faceapi.matchDimensions(canvas, displaySize)          //設置需要使用什麼演算法和參數進行掃描識別圖片的人臉特徵          const options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.38 })          //const options = new faceapi.TinyFaceDetectorOptions()          //const options = new faceapi.MtcnnOptions()          //開始獲取圖片中每一張人臉的特徵數據          const detections = await faceapi.detectAllFaces(image, options).withFaceLandmarks().withFaceDescriptors()          //根據人臉輪廓的大小，調整方框的大小          const resizedDetections = faceapi.resizeResults(detections, displaySize)          //開始和事先準備的標籤庫比對，找出最符合的那個標籤          const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor))          console.log(results)          results.forEach((result, i) => {            //顯示比對的結果            const box = resizedDetections[i].detection.box            const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() })            drawBox.draw(canvas)            console.log(box, drawBox)          })          $.messager.progress('close');          })        }  //讀取人臉標籤數據      async function loadLabeledImages() {        //獲取人臉圖片數據,包含：圖片+標籤        const data = await $.get('/FaceLibs/GetImgData');        //對圖片按標籤進行分類        const labels = [...new Set(data.map(item => item.Label))]        console.log(labels);        return Promise.all(          labels.map(async label => {            const descriptions = []            const imgs = data.filter(item => item.Label == label);            for (let i = 0; i < imgs.length; i++) {              const item = imgs[i];              const img = await faceapi.fetchImage(`${item.ImgUrl}`)              //console.log(item.ImgUrl, img);              //const detections = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor()              //識別人臉的初始化參數              const options = new faceapi.SsdMobilenetv1Options({ minConfidence:0.38})              //const options = new faceapi.TinyFaceDetectorOptions()              //const options = new faceapi.MtcnnOptions()              //掃描圖片中人臉的輪廓數據              const detections = await faceapi.detectSingleFace(img, options).withFaceLandmarks().withFaceDescriptor()              console.log(detections);              if (detections) {                descriptions.push(detections.descriptor)              } else {                console.warn('Unrecognizable face')              }            }            console.log(label, descriptions);            return new faceapi.LabeledFaceDescriptors(label, descriptions)          })        )        }

face-api.js

face-api 類庫介紹

　　face-api 有幾個非常重要的方法下面說明一下都是來自 https://github.com/justadudewhohacks/face-api.js/ 的介紹

　　在使用這些方法前必須先載入訓練好的模型,這裡並不需要自己照片進行訓練了，face-api.js應該是在tensorflow.js上改的所以這些訓練好的模型應該和python版的tensorflow都是通用的，所有可用的模型都在https://github.com/justadudewhohacks/face-api.js/tree/master/weights 可以找到

//載入訓練好的模型（weight，bias）  // ageGenderNet 識別性別和年齡  // faceExpressionNet 識別表情,開心，沮喪，普通  // faceLandmark68Net 識別臉部特徵用於mobilenet演算法  // faceLandmark68TinyNet 識別臉部特徵用於tiny演算法  // faceRecognitionNet 識別人臉  // ssdMobilenetv1 google開源AI演算法除庫包含分類和線性回歸  // tinyFaceDetector 比Google的mobilenet更輕量級，速度更快一點  // mtcnn  多任務CNN演算法，一開瀏覽器就卡死  // tinyYolov2 識別身體輪廓的演算法，不知道怎麼用        Promise.all([          faceapi.nets.faceRecognitionNet.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.faceLandmark68Net.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.faceLandmark68TinyNet.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.ssdMobilenetv1.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.tinyFaceDetector.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          faceapi.nets.mtcnn.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights'),          //faceapi.nets.tinyYolov.loadFromUri('https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights')        ]).then(async () => {})

　　非常重要參數設置，在優化識別性能和比對的正確性上很有幫助，就是需要慢慢的微調。

SsdMobilenetv1Options  export interface ISsdMobilenetv1Options {    // minimum confidence threshold    // default: 0.5    minConfidence?: number      // maximum number of faces to return    // default: 100    maxResults?: number  }    // example  const options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.8 })  TinyFaceDetectorOptions  export interface ITinyFaceDetectorOptions {    // size at which image is processed, the smaller the faster,    // but less precise in detecting smaller faces, must be divisible    // by 32, common sizes are 128, 160, 224, 320, 416, 512, 608,    // for face tracking via webcam I would recommend using smaller sizes,    // e.g. 128, 160, for detecting smaller faces use larger sizes, e.g. 512, 608    // default: 416    inputSize?: number      // minimum confidence threshold    // default: 0.5    scoreThreshold?: number  }    // example  const options = new faceapi.TinyFaceDetectorOptions({ inputSize: 320 })  MtcnnOptions  export interface IMtcnnOptions {    // minimum face size to expect, the higher the faster processing will be,    // but smaller faces won't be detected    // default: 20    minFaceSize?: number      // the score threshold values used to filter the bounding    // boxes of stage 1, 2 and 3    // default: [0.6, 0.7, 0.7]    scoreThresholds?: number[]      // scale factor used to calculate the scale steps of the image    // pyramid used in stage 1    // default: 0.709    scaleFactor?: number      // number of scaled versions of the input image passed through the CNN    // of the first stage, lower numbers will result in lower inference time,    // but will also be less accurate    // default: 10    maxNumScales?: number      // instead of specifying scaleFactor and maxNumScales you can also    // set the scaleSteps manually    scaleSteps?: number[]  }    // example  const options = new faceapi.MtcnnOptions({ minFaceSize: 100, scaleFactor: 0.8 })

　　最常用的圖片識別方法，想要識別什麼就調用相應的方法就好了

// all faces  await faceapi.detectAllFaces(input)  await faceapi.detectAllFaces(input).withFaceExpressions()  await faceapi.detectAllFaces(input).withFaceLandmarks()  await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceExpressions()  await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceExpressions().withFaceDescriptors()  await faceapi.detectAllFaces(input).withFaceLandmarks().withAgeAndGender().withFaceDescriptors()  await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceExpressions().withAgeAndGender().withFaceDescriptors()    // single face  await faceapi.detectSingleFace(input)  await faceapi.detectSingleFace(input).withFaceExpressions()  await faceapi.detectSingleFace(input).withFaceLandmarks()  await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceExpressions()  await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceExpressions().withFaceDescriptor()  await faceapi.detectSingleFace(input).withFaceLandmarks().withAgeAndGender().withFaceDescriptor()  await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceExpressions().withAgeAndGender().withFaceDescriptor()

學習AI資源

　　ml5js.org https://ml5js.org/ 這裡有很多封裝好的詳細的例子，非常好。

接下來我準備第二部分功能，通過攝影機快速識別人臉，做一個人臉考勤的應用。應該剩下的工作也不多了，只要接上攝影機就可以了