最近、以下の記事を書いたり、X のポストにあるようなお試しをした「face-api.js」と、機械学習系のライブラリ「ml5.js」に関する内容です。
- 最近書いた記事
上記の記事を書いたり、その後に face-api.js と p5.js を組み合わせてみたりというのをやった後に見つけた情報があり、それを記事にしてみます。
今回の内容
上で掲載した 1つ目の記事で、「ml5.js の FaceApi は face-api.js の一部の機能のみを使える API」と書いていました。
公式のライブラリだとそうなのですが、これについて、表情認識などに対応したものがあるという情報を以下で見かけました。
●p5js:xx.faceapi [Design Workshop]
https://ws.tetsuakibaba.jp/doku.php?id=p5js:xx.faceapi
●Quick guide to FaceApi Machine learning model for web - ML5.js - DEV Community
https://dev.to/seek4samurai/quick-guide-to-faceapi-machine-learning-model-for-web-ml5js-9mo
この、表情認識などに対応したバージョンの ml5.js について情報を見ていこうと思います。
表情認識などに対応したバージョンの ml5.js
上の情報源となった記事で、表情認識などに対応したバージョンの ml5.js について書かれているところを、いくつかピックアップしてみます。
表情認識などに対応した ml5.js についての記述
ライブラリでのオプションの設定
読みこむライブラリやサンプル
読みこむべきライブラリ・サンプルについて、以下に記載してみます。
読みこむライブラリ
<script src="https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js"></script>
サンプル
●p5.js Web Editor | face-api all points
https://editor.p5js.org/ima_ml/sketches/fCsz7tb6w
// ml5 Face Detection Model
let faceapi;
let detections = [];
// Video
let video;
function setup() {
createCanvas(360, 270);
// Creat the video and start face tracking
video = createCapture(VIDEO);
video.size(width, height);
// Only need landmarks for this example
const faceOptions = { withLandmarks: true, withExpressions: false, withDescriptors: false };
faceapi = ml5.faceApi(video, faceOptions, faceReady);
}
// Start detecting faces
function faceReady() {
faceapi.detect(gotFaces);
}
// Got faces
function gotFaces(error, result) {
if (error) {
console.log(error);
return;
}
detections = result;
faceapi.detect(gotFaces);
}
// Draw everything
function draw() {
background(0);
// Just look at the first face and draw all the points
if (detections.length > 0) {
let points = detections[0].landmarks.positions;
for (let i = 0; i < points.length; i++) {
stroke(161, 95, 251);
strokeWeight(4);
point(points[i]._x, points[i]._y);
}
}
}
このサンプルは、顔のランドマークを検出して、検出したランドマークを使った描画を行うもののようです。
サンプルを実行すると、以下の結果を得られます。
サンプルで表情認識を試す
表情認識を試してみます。
サンプルの以下の部分の withExpressions: false を withExpressions: true に変更します。
const faceOptions = { withLandmarks: true, withExpressions: false, withDescriptors: false };
さらに、 if (detections.length > 0) {} という部分の中で、detections をコンソールに出力してみます。そうすると、以下の結果が得られているのが確認できました。
余談
今回のライブラリが使われた講義かは分からないですが、上記のライブラリの名称で検索をしている際に見かけた、気になったリポジトリをメモしてみます。
●ml5js/Intro-ML-Arts-IMA-F21: Introduction to Machine Learning for the Arts, IMA, Tisch School of the Arts, New York University, Fall 2021
https://github.com/ml5js/Intro-ML-Arts-IMA-F21