「p5.js」に加えて，「ml5.js」を使うことで，簡易的に機械学習をするプログラムを作成します。幅広いユーザーが機械学習を親しみやすく触れるられるように作られたライブラリですTensorFlow.js がベースになっています。また，p5jsからの影響を受けて制作されています。

このページでは、以下の方法について説明します。

  1. 事前に学習されたml5.jsの画像分類モデルを読み込む
  2. 画像のオブジェクトを識別するために、モデル用に画像を読み込む
  3. モデルから結果を取得し、キャンバスに表示してください

ml5 - A friendly machine learning library for the web.

0. 準備

4枚の画像を呈示するプログラムをダウンロードして開いてください。

完成版の「study.json」ファイル

以下のファイルを右クリックでダウンロードしてください。このファイルをBuilderで読み込めば，完成した状態の実験プログラムを確認することが出来ます。

左側のメニューのフロッピーアイコンの▼をクリック→ Open で以下のファイルを指定

p5js-image-demo2.json.zip

1. 「ml5.js」を使用する

以下のチュートリアルを参考に，「ml5.js」を使う環境を整えます。

Reference | ml5 - A friendly machine learning library for the web.

以下のコードをHTMLタブの<head>に入れてください。

<script src="[<https://unpkg.com/ml5@1/dist/ml5.min.js>](<https://unpkg.com/ml5@1/dist/ml5.min.js>)"></script>