はじめに

先日face-api.jsを使ってみました。
前回の記事↓

今回はface-api.jsについてもう少し調べてみたいと思います。

face-api.jsとは？

繰り返しになりますが、face-api.jsはブラウザで顔検出（face detection：人の顔を自動的に見つける）と顔認識（face recognition：個人を識別する）ができるJavaScript APIです
機械学習用のライブラリTensorFlow.jsが利用されています
face-api.js

face-api.jsを使う準備

前回参照。
まだNode.jsは勉強中なので
今回も自分のプロジェクトにスクリプトを含める方法です。

今回試すもの

「トラニナル」はとにかく動くものを短時間で作る。という
マッチョな目標があったので読み飛ばしましたが
face-api.jsの内容をもう少し読んでいきます。

⇒読んだ結果、複数顔の検出を試しました！

Available Models

Face Detection Models

顔検出モデルについて書かれています。

SSD Mobilenet V1

画像内の各顔の位置を計算し、
各顔の確率とともにバウンディングボックスを返します。

face-api.js内で一番標準的な（？）顔検出のモデルだと思われます。
よく見かけるコードではこちらが使われていることが多いので、
私も「トラニナル」では思考停止状態でこちらを使用しました。

Tiny Face Detector

パフォーマンスの高いリアルタイムの顔検出器。
SSD Mobilenet V1顔検出器と比較して、高速・小型・リソース消費が少なく、
パフォーマンスはわずかに低下します。
モバイルデバイスやクライアントのリソースが限られているときはこちらを使用すべき。

「トラニナル」は使用者から「重い」という声を聞きました。
というか、自分でもテストして「重いなぁ」と思ったんですが
その時点で12/27だったので諦めました。
そんな問題を解決してくれそうな話がさっそく書いてあります！
これは使ってみたい。

MTCNN

MTCNN：マルチタスクカスケード畳み込みニューラルネットワーク。
（Google翻訳頼みですが合ってるのかな？）
一般に、他の顔検出器の方がパフォーマンスが優れている。

実験のためにリポジトリに入っている顔検出器のようです。
試すのはもちろんOK。

顔検出ついては上記3つについて書かれていました。

68 Point Face Landmark Detection Models

68点面顔ランドマーク検出モデル。
デフォルトのモデル（face_landmark_68_model）は350KB
小さなモデル（face_landmark_68_tiny_model）は80KB

顔ランドマーク検出の検出器にも小さいものがあることが分かりました！
これまた朗報ですね。

Face Recognition Model

顔認識のモデル。あらゆる人物の顔認識に使用できます。
ResNet-34のようなアーキテクチャが実装され、
人物の顔の特性を記述するために
任意の顔画像から顔記述子（face descriptor：128個の値を持つ特徴ベクトル）が計算されます。
2つの任意の顔の類似性は、それらの顔記述子を比較することによって
（たとえばユークリッド距離を計算することによって）決定できます。

ResNetとはニューラルネットワークのモデルのようですね。
難しいところは理解できなかったのですが
このモデルを使えば特定人物のお顔を認識出来るようです。

Face Expression Recognition Model

顔の表情認識モデル。
軽量、高速で、適度な精度を提供。
眼鏡をかけると、予測結果の精度が低下する可能性がある。

表情認識も気になりますよね～
笑顔の瞬間で撮影してくれたら面白いなぁ。

Detecting Faces

「トラニナル」で使ったのは
detectSingleFaceと言うメソッドでした。

ここも他の方法について調べる時間が無かっただけなので、
今回もう少し調べてみます。

画像内で最も信頼度の高い顔を検出する

const detection = await faceapi.detectSingleFace(input)

FaceDetection が返ってきます。

画像内のすべての顔を検出する

const detections = await faceapi.detectAllFaces(input)

Array < FaceDetection >が返ってきます。

detectAllFacesとdetectSingleFaceはデフォルトではSSD Mobilenet V1顔検出モデルを利用します。
対応するオプションオブジェクトを渡すことで、顔検出器を指定することができます。

const detections1 = await faceapi.detectAllFaces(input, new faceapi.SsdMobilenetv1Options())
const detections2 = await faceapi.detectAllFaces(input, new faceapi.TinyFaceDetectorOptions())
const detections3 = await faceapi.detectAllFaces(input, new faceapi.MtcnnOptions())

顔のランドマーク検出

「画像内で最も信頼度の高い顔を検出」し
「その顔の68点顔ランドマークを計算」

const detectionWithLandmarks = await faceapi.detectSingleFace(input).withFaceLandmarks()

「画像内のすべての顔を検出」し、
「検出された顔ごとに68点顔ランドマークを計算」

const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks()

detectSingleFaceを使うかdetectAllFacesを使うか、と言うことですね。

デフォルトのモデルではなく小さなモデルを使うには

const useTinyModel = true
const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks(useTinyModel)

と、withFaceLandmarks()の引数にtrueを与えればよさそうです。

複数顔検出をやってみる

ということで、色々試してみたくはなったのですが、
今回は「複数の顔を検出する」ことにします。

早速結果です。

やったことは
detectSingleFace → detectAllFaces
だけです！
あとは返ってきたFaceDetectionのデータが配列に入っているので
複数人分の描画を行うように書き換えました。

今回はココまで。

おわりに

用意されている顔モデルについて確認し、
複数人の顔検出・顔ランドマーク検出が出来ました。

小さいサイズのモデルも使ってみたいですし、
顔認識や表情検出も気になります。
次の機会に試してみたいと思います。