機械学習用ライブラリ「ml5.js」の新しいサイトの動線を少し確認してみる【2024年10月上旬時点】

ブラウザ上で JavaScript を用いた機械学習を行う際、ライブラリの選択肢の 1つである「ml5.js」に関する記事です。

●ml5.js | Friendly Machine Learning for the Web
　https://ml5js.org/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/837b166e-fc90-1e28-1670-d9721520dd85.png)

ml5.js のサイトがリニューアルされていたのですが、その新サイトの動線に関する情報を書いてみた、という内容です。

## ml5.js の新バージョンなど
今年 ml5.js のサイトが新しくなったり、また、大きな変更を伴うライブラリのバージョンアップの情報が出ています。

以下は、[公式の X のアカウントでのサイトリニューアルのポスト](https://x.com/ml5js/status/1805409261876376042)で、新バージョンの話も書いてあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fac37231-7974-00cc-b14a-c13744b0994a.png)

また以下の公式のポストでは、CDN からライブラリを読みこんでいる場合での、そのライブラリを旧バージョンから新バージョンに切り替えるための話が書かれています。

https://x.com/ml5js/status/1809991472974016873

### 旧バージョンのサイトへの動線
現状、[新サイトを開いて進む](https://docs.ml5js.org/#/)と、右下のほうに、旧バージョンのサイトへの動線が表示されるようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8bef319d-a5a5-8fb3-9ada-8fc7676ef50c.png)

以下が旧バージョンのサイトです。
この旧バージョンのサイトには、新バージョンのサイトへの動線も用意されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/39d6e21f-44cc-2ef8-c7a9-0c87bbd6f04d.png)

### 新旧バージョンのそれぞれで扱えるモデル
新バージョンになってから、旧バージョンで扱えていたモデルの一部は、使えなくなっています。

それについて、[FAQ のページ](https://docs.ml5js.org/#/welcome/FAQ)を見ていくと、「Can I still access the older releases of the ml5.js, website and documentation?」という項目で触れられています。

具体的な箇所は、以下のとおりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b65e4ecd-c119-ef04-5c2d-cf6615ff4006.png)

テキストにしたものは以下です。
新バージョンで使えるものとして書いてある項目の中にも、スターテタスがいくつかあるようです。

例えば、「現在は新バージョン対応前で当面は旧バージョンを利用する」となっているものや、「既に利用できて、機能がアップデートされているもの」、「旧バージョンと同じ機能を提供しているもの」などがあるようです。

- 新バージョンでも使えるもの
   - FeatureExtractor - coming back soon! (use 0.12.2 for now)
   - ObjectDetection - coming back soon! (use 0.12.2 for now)
   - PoseNet - Updated! (now BodyPose)
   - BodyPix - Updated! (now BodySegmentation)
   - HandPose - Updated! Still HandPose!
   - FaceMesh - Updated! Still FaceMesh!
   - FaceApi - Deprecated, use FaceMesh instead!
   - UNet - Deprecated, use BodySegmentation instead!
   - Image Classification - the same!
   - Sound Classification - the same!
   - Sentiment Analysis - the same!
   - Neural Network – mostly the same, updates for neuroevolution!
- 新バージョンでは使えないもの
   - KNNClassifer - coming soon?
   - kmeans - coming soon?
   - StyleTransfer
   - pix2pix
   - CVAE
   - DCGan
   - SketchRNN
   - PitchDetection
   - CharRNN
   - Word2Vec

「coming soon?」となっているものは、新バージョンに移行するか検討中、といった感じでしょうか。

### 新バージョンを簡単に体験する
あとは、新バージョンのサンプルを簡単に体験できる部分を紹介してみます。

[トップページから次に進んだページ](https://docs.ml5js.org/#/)の左メニューで、試しに「HandPose」を選んでみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/71f28031-209e-d620-4cbf-12789f495c48.png)

https://docs.ml5js.org/#/reference/handpose

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/43280dc5-6e93-c95b-04ff-5f67e8ced5e3.png)

そして、ページを下へ進んでいくと、「Quick Start」という部分と、その下に再生ボタンが表示されたところがあります。

試す場合、この再生ボタンを押して、その後に表示されるカメラ利用の許可を承諾する操作をすれば OK です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2e8d8e80-6df5-c846-e636-34e5ef727279.png)

その後にカメラに手をかざすと、両手の特定の箇所を検出し、そこに緑色の点が描画されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/61db0c96-94ca-399b-0b33-de4c5b7b5fa2.png)

#### コードを確認する
そして、実装内容を確認したい場合、それを簡単に行うことができます。

以下の「Open in p5.js Web Editor」と書かれた部分を選んでみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a9d16198-35b2-4c8a-6ba5-e808e26fa089.png)

そうすることで、先ほど体験したデモのソースを確認することができます。

●p5.js Web Editor | handPose-keypoints
　https://editor.p5js.org/ml5/sketches/QGH3dwJ1A

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5ef32352-c03c-deff-ea6e-c52eca60e3af.png)

なお、この p5.js Web Editor でも、処理を実行してデモを体験することができます。

他にも、左メニューの「ml5 Models」という項目の下に、色々なモデルが記載されています。これらの中にも、上記と同様に簡単に試せるものがあるので、ページを開いてみて「Quick Start」の部分をぜひ見てみてください。

例えば「BodyPose」や「FaceMesh」は、上記の「HandPose」と同様に、カメラ入力を使ったリアルタイムなデモを体験できます。