ml5.js の FaceApi で face-api.js の表情認識などの対応が組み込まれたものがあった

最近、以下の記事を書いたり、X　のポストにあるようなお試しをした「face-api.js」と、機械学習系のライブラリ「ml5.js」に関する内容です。

- 最近書いた記事
   - [ml5.js の FaceApi（face-api.js の一部の機能を使える API）で扱える仕組み・モデルに関するメモ - Qiita](https://qiita.com/youtoy/items/932c1868b032e3a4dfa8)
   - [face-api.js の「Face Expression Recognition（表情認識）」の公式デモ・利用可能なモデルの情報などを見てみた：ml5.js の FaceApi では使えない仕組みの部分 - Qiita](https://qiita.com/youtoy/items/85882d5df5b88d827424)

https://twitter.com/youtoy/status/1787366192837267799

上記の記事を書いたり、その後に face-api.js と p5.js を組み合わせてみたりというのをやった後に見つけた情報があり、それを記事にしてみます。

## 今回の内容
上で掲載した　1つ目の記事で、「ml5.js の FaceApi は face-api.js の一部の機能のみを使える API」と書いていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2da2aaf9-69e0-80a3-eaaa-56af61437399.png)

公式のライブラリだとそうなのですが、これについて、表情認識などに対応したものがあるという情報を以下で見かけました。

●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 についての記述
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/88ce99c3-95be-8726-6dab-ee55fe17447c.png)

#### ライブラリでのオプションの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/91f6a809-6bbf-5be7-71d4-98a53f6d86a3.png)

### 読みこむライブラリやサンプル
読みこむべきライブラリ・サンプルについて、以下に記載してみます。

#### 読みこむライブラリ
```html
  <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

```javascript

// 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);
    }
  }

}
```

このサンプルは、顔のランドマークを検出して、検出したランドマークを使った描画を行うもののようです。

サンプルを実行すると、以下の結果を得られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4876a3a0-ab6e-28b6-1f57-29ef0b0893f2.png)

#### サンプルで表情認識を試す
表情認識を試してみます。

サンプルの以下の部分の `withExpressions: false` を `withExpressions: true` に変更します。

```javascript
  const faceOptions = { withLandmarks: true, withExpressions: false, withDescriptors: false };
```

さらに、 `if (detections.length > 0) {}` という部分の中で、detections をコンソールに出力してみます。そうすると、以下の結果が得られているのが確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ce6566ea-a919-8f11-8b6a-117da1702910.png)

## 余談
今回のライブラリが使われた講義かは分からないですが、上記のライブラリの名称で検索をしている際に見かけた、気になったリポジトリをメモしてみます。

●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