今回の内容

上で掲載した　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