face-api.js - ブラウザでの顔認識を行うJavaScript API

1. face-api.js

「face-api.js」は、顔検出・顔認識のための「JavaScript API」です。「tensorflow.js」（tensorflow/tfjs-core）上に実装されています。

利用可能な顔検出・顔認識モデルは次のとおり。

・ ssdMobilenetv1
精度が高い顔検出。バウンディングボックスと精度を取得。
・ tinyFaceDetector
推論が高速な顔検出。バウンディングボックスと精度を取得。
・ faceLandmark68Net
顔ランドマークを検出。68個の顔のポイントを取得。
・ faceRecognitionNet
2つの顔の類似性を判断。
・ faceExpressionNet
顔の表情の分類。neutral, happy, sad, angry, fearful, disgusted, surprised。
・ ageGenderNet
年齢と性別を推定。

2. 顔検出

顔検出のコードは、次のとおりです。

<!-- face-api.js -->
<script src="js/face-api.min.js"></script>

<!-- テストに使用する画像 -->
<img id="img" src="face.jpg"></img>

<script>
  // 画像の取得
  const img = document.getElementById('img')

  const app = async () => {
    // モデルの読み込み
    await faceapi.nets.tinyFaceDetector.load("models/");

    // 顔検出の実行
    const detections = await faceapi.detectAllFaces(img, new faceapi.TinyFaceDetectorOptions())
    
    // 結果の出力
    console.log(detections);
  }
  app()
</script>

◎ face-apiのライブラリとモデルの準備
face-api.jsのリポジトリをクローンします。

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

そして、リポジトリのdistをjs、weightをmodelsに名前変更して、コードと同じフォルダに配置してください。

・index.html
・js    ... distを名前変更
・models    ... weightを名前変更

◎ モデルの読み込み
顔検出のモデルの読み込みは、以下のメソッドを使います。
・ssdMobilenetv1: faceapi.nets.ssdMobilenetv1.load()
・tinyFaceDetector: faceapi.nets.tinyFaceDetector.load()

await faceapi.nets.tinyFaceDetector.load("models/");

◎ 顔検出の実行
顔検出の実行は、以下の引数でfaceapi.detectAllFaces()を使います。
・ssdMobilenetv1: faceapi.SsdMobilenetv1Options()
・tinyFaceDetector: faceapi.TinyFaceDetectorOptions()

const detections = await faceapi.detectAllFaces(img, new faceapi.TinyFaceDetectorOptions())

◎ 結果の出力
結果の出力は、次のとおりです。

0: dd {_imageDims: Vp, _score: 0.9959318041801453, _classScore: 0.9959318041801453, _className: "", _box: ad}
1: dd {_imageDims: Vp, _score: 0.982027530670166, _classScore: 0.982027530670166, _className: "", _box: ad}
2: dd {_imageDims: Vp, _score: 0.9756534695625305, _classScore: 0.9756534695625305, _className: "", _box: ad}
3: dd {_imageDims: Vp, _score: 0.9497638940811157, _classScore: 0.9497638940811157, _className: "", _box: ad}

_boxにはバウンディングボックスの位置とサイズが含まれています。

_box: ad {_x: 545.497253537178, _y: 198.83009835072627, _width: 134.53352451324463, _height: 148.01298348435208}

3. 顔ランドマーク検出

顔ランドマーク検出のコードは、次のとおりです。
顔検出の結果に対して、顔ランドマーク検出を行っています。

<!-- face-api.js -->
<script src="js/face-api.min.js"></script>

<!-- テストに使用する画像 -->
<img id="img" src="face.jpg"></img>

<script>
  // 画像の取得
  const img = document.getElementById('img')

  const app = async () => {
    // モデルの読み込み
    await faceapi.nets.tinyFaceDetector.load("models/");
    await faceapi.nets.faceLandmark68Net.load("models/");

    // 顔ランドマーク検出の実行
    const detectionsWithLandmarks = await faceapi.detectAllFaces(img,
        new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks()

    // 結果の出力
    console.log(detectionsWithLandmarks);
  }
  app()
</script>

◎ モデルの読み込み
顔ランドマーク検出のモデルの読み込みは、以下のメソッドを使います。
・faceLandmark68Net: faceapi.nets.faceLandmark68Net.load()

◎ 顔ランドマーク検出の実行
顔検出のメソッドの後にwithFaceLandmarks()を指定します。

◎ 結果の出力
結果の出力は、次のとおりです。

0: {detection: dd, landmarks: Td, unshiftedLandmarks: Td, alignedRect: dd}
1: {detection: dd, landmarks: Td, unshiftedLandmarks: Td, alignedRect: dd}
2: {detection: dd, landmarks: Td, unshiftedLandmarks: Td, alignedRect: dd}
3: {detection: dd, landmarks: Td, unshiftedLandmarks: Td, alignedRect: dd}

landmarksには顔ランドマークの68ポイントの情報が含まれています。

landmarks: Td
  _positions: Array(68)
    0: od {_x: 76.95784227922559, _y: 196.56321563416563}
    1: od {_x: 74.85605263710022, _y: 217.74829753333174}
       :
    66: od {_x: 149.0186665058136, _y: 296.99664123946275}
    67: od {_x: 141.08693608641624, _y: 294.7601939051732}

4. 顔の表情の分類

顔の表情の分類のコードは、次のとおりです。
顔検出の結果に対して、顔の表情の分類を行っています。

<!-- face-api.js -->
<script src="js/face-api.min.js"></script>

<!-- テストに使用する画像 -->
<img id="img" src="face.jpg"></img>

<script>
  // 画像の取得
  const img = document.getElementById('img')

  const app = async () => {
    // モデルの読み込み
    await faceapi.nets.tinyFaceDetector.load("models/");
    await faceapi.nets.faceExpressionNet.load("models/");

    // 顔の表情の分類
    const detectionsWithExpressions = await faceapi.detectAllFaces(img,
        new faceapi.TinyFaceDetectorOptions()).withFaceExpressions()

    // 結果の出力
    console.log(detectionsWithExpressions);
  }
  app()
</script>

◎ モデルの読み込み
顔の表情の分類のモデルの読み込みは、以下のメソッドを使います。
・faceExpressionNet: nets.faceExpressionNet.load()

◎ 顔の表情の分類の実行
顔検出のメソッドの後にwithFaceExpressions()を指定します。

◎ 結果の出力
結果の出力は、次のとおりです。

0: {detection: dd, expressions: tm}
1: {detection: dd, expressions: tm}
2: {detection: dd, expressions: tm}
3: {detection: dd, expressions: tm}

expressionsには顔の表情の分類が含まれています。

・neutral: ニュートラル
・happy: 喜び
・sad: 悲しみ
・angry: 怒り
・fearful: 恐れ
・disgusted: うんざり
・surprised: 驚き

expressions: tm
  angry: 0.00033354622428305447
  disgusted: 0.025459259748458862
  fearful: 0.00001721922126307618
  happy: 0.23955923318862915
  neutral: 0.46917790174484253
  sad: 0.2652508020401001
  surprised: 0.00020209986541885883

5. 利用可能なタスク構成

利用可能なタスク構成は、次のとおりです。

// 複数の顔検出
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()

// 単一の顔検出
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()

OpenAI Gym / Baselines 深層学習・強化学習 人工知能プログラミング 実践入門