Webブラウザ上でface-api.js/JavaScriptによる簡単な顔認識を行ってみます。
今回は、Tensor Flow上に構築されたface-api.js（https://github.com/justadudewhohacks/face-api.js）ライブラリを使用して、顔認識を簡単に行ってみます。
■PC環境
・Windows10 Pro
・Visual Studio Code 1.57.0
・git version 2.31.1.windows.1
■リポジトリのクローンを作成する
まずは、リポジトリのクローンを作成します。作成しますので、Windows10のコマンドプロンプトを起動します。
C:\Users\<ユーザー名>>git clone https://github.com/justadudewhohacks/face-api.js.git
起動後、上記のコマンドを入力し、Enterキーを押します。
Cloning into ‘face-api.js’…
remote: Enumerat ing objects: 9124, done
remote: Counting objects: 100% (11/11), done.
remote: Compressing objects: 100% (11/11), done.
remote: Total 9124 (delta 6), reused o (delta 0), pack-reused 9113
Receiving objects: 100% (9124/9124), 210.79 MiB | 4.13 MiB/s, done.
Resolving deltas: 100% (6281/6281), done.
Enterキーを押すと、クローンの作成が開始されます。しばらくすると、完了します。
■Webアプリの準備
完了後、カレントディレクトリ（作業ディレクトリ）内に「face-api.js」というフォルダが作成されていることが確認できます。
フォルダの中身を確認すると、上記のようになっています。フォルダ内に「dist」と「weights」のフォルダがありますが、今回は「dist」の「face-api.js」と、「weights」内のファイル全てを使います。
確認後、カレントディレクトリ（作業ディレクトリ）内に、今回は「test_face_api」というフォルダを作成します。
作成後、「face-api.js」というフォルダ内の「weights」のフォルダをコピーします。
コピー後、「test_face_api」というフォルダ内に「weights」のフォルダを貼り付けます。その後「weights」の名前を「models」という名前に変更します。
変更後、「face-api.js」フォルダ内の「dist」の「face-api.min.js」をコピーします。
コピー後、「test_face_api」というフォルダ内に「face-api.js」のフォルダを貼り付けます。
■顔認識をテストする簡単なWebアプリの作成
貼り付け後、顔認識をテストする簡単なWebアプリの作成を行います。コードエディタ（Visual Studio Code）を開きます。「test_face_api」フォルダ内にindex.htmlを作成します。
■index.html
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>顔認識のテスト</title>
<script defer src="face-api.min.js"></script>
<script defer src="script.js"></script>
<style>
body{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
canvas{
position: absolute;
top:0;
left: 0;
}
</style>
</head>
<body>
<input type="file" id="imageUpload">
</body>
</html>アップロードした画像で顔認識のテストを行えるようにします。次に「test_face_api」フォルダ内にscript.jsを作成します。
■script.js
const imageUpload =document.getElementById('imageUpload')
Promise.all([
faceapi.nets.faceRecognitionNet.loadFromUri('./models'),
faceapi.nets.faceLandmark68Net.loadFromUri('./models'),
faceapi.nets.ssdMobilenetv1.loadFromUri('./models')
]).then(start)
function start(){
const container = document.createElement('div')
container.style.position = 'relative'
document.body.append(container)
document.body.append('Loaded')
imageUpload.addEventListener('change', async() =>{
const image = await faceapi.bufferToImage(imageUpload.files[0])
container.append(image)
const canvas = faceapi.createCanvasFromMedia(image)
container.append(canvas)
const displaySize = { width: image.width, height:image.height}
faceapi.matchDimensions(canvas, displaySize)
const detections = await faceapi.detectAllFaces(image)
.withFaceLandmarks().withFaceDescriptors()
const resizedDetections = faceapi.resizeResults(detections,
displaySize)
resizedDetections.forEach(detection => {
const box = detection.detection.box
const drawBox = new faceapi.draw.DrawBox(box, {label: 'Face'})
drawBox.draw(canvas)
})
})
}script.js内で顔検出の実行処理などを記述します。
■実行、デバッグ
記述後、実行、デバッグを行います。今回はVisual Studio Codeの拡張機能で「Live Server」と「Debbuger for Chrome」を事前にインストールし、GoogleChromeにて実行、デバッグを行います。なお、今回使用する画像は、著作物を考慮し、フリーで高品質な画像素材が検索できるPixabay（https://pixabay.com/ja/）からダウンロードしてきた画像を使います。（商用利用可能OKの画像）。
実行、デバッグしてみると、使用した顔検出・顔認識モデルの影響か、それともそれ以外が原因か、一人の顔の認識できませんでしたが、顔としての認識はされているので、今回はこれで顔認識のテストを終了します。
コメント