🔰

ML5であっさり機械学習体験

2021/08/31に公開

ml5.jsとは!?

ml5.jsは、気軽に機械学習を扱う事が出来る大人気ライブラリです。

ml5.js

ml5.jsで出来る事

ml5.jsでは、画像(映像も!!)に写っている物の種類の判別、そしてその状態の取得が出来ます。(なにこれ凄すぎ!!)

種類 出来る事
ImageClassifier 画像に写っている物を判別する
PoseNet 人間のポーズを取得する
BodyPix 人間が写っている場所を取得する
Handpose 人間の手と、その形を取得する
Facemesh 人間の表情を取得する
Face-Api 人間の顔の位置とパーツの位置を取得する
StyleTransfer 絵画等の画像を、他のスタイルに変換する
Object Detector 画像に写っている物体を判別する

今回は、"ImageClassifier"をやってみます。

プロジェクトを作る

次の様にプロジェクトを作ります。

MyProject01/
 ├ assets/ (ml5.jsで扱う画像データを格納します)
 ├ index.html (プログラムを起動するファイルです)
 ├ main.js (メインのプログラムを記述するファイルです)

今回は、私の実家にいる猫の画像を使ってみようと思います。
次の画像を、"assets"フォルダに格納してお使いください。(ご自由にお使いください)

HTMLファイルを用意する

では、作っていきましょう。
HTMLファイルを用意して、下記コードを記述します。

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
	<script src="./main.js"></script>
</head>
<body>
	<img src="./assets/sample_01.png" id="my_image"/>
</body>
</html>

ml5.jsのライブラリのロードには、CDN(Contents Deliverly Network)を使っています。
(URLから直接ダウンロードする事で、プロジェクトがコンパクトになりますね)

"img"タグには、判別したい画像を表示しておきます。

JavaScriptファイルを用意する

いよいよ、メインの処理です。

ml5.jsを読み込む事で、"ml5"を利用する事ができる様になります。

"ml5.imageClassifier関数"を実行して、分類器を作ります。
第一引数には、学習モデルの種類を指定します。(ここでは、"MobileNet"としています)
モデルのロードが完了すると、第二引数のコールバックが実行されます。

main.js
ml5.imageClassifier(モデル, コールバック);

第一引数のモデルには、次のものを指定する事が出来ます。(自分で用意したモデルを使う事も可能です)

モデル
MobileNet https://arxiv.org/abs/1704.04861
Darknet https://pjreddie.com/darknet/
DoodleNet https://github.com/yining1023/doodleNet

分類器の準備が出来たら、いよいよ画像を使って判別を行う事が出来ます。
次の処理を見れば一目瞭然ですねw

main.js
classifier.classify(画像データ, (エラー, 結果) => {
	// ここでエラー/結果を取得します
});

全体の処理は、次の様になります。

main.js
let img, classifier;

window.onload = (event)=>{
	console.log("onload!!");
	// HTMLから画像ファイルを取得します
	img = document.getElementById("my_image");
	// 分類器を作ります
	classifier = ml5.imageClassifier("MobileNet", modelReady);
}

function modelReady(){
	// 分類器を使って判別を実行します
	classifier.classify(img, (err, results) => {
		console.log(results);
	});
}

判別結果は配列として返ってきます。

判別結果
{label: "tabby, tabby cat", confidence: 0.5709246397018433}// トラ猫度:57%
{label: "Egyptian cat", confidence: 0.08458776026964188}// エジプト猫度:8%
{label: "sleeping bag", confidence: 0.06670171022415161}// 寝袋度:6%

見事に、猫と判別する事ができました。(ひょっとすると寝袋かもしれない!!)

最後に

ml5.jsを使って簡単に画像解析をやってみました。
驚くほど簡単に出来る事がわかったかと思います。
皆さんも是非遊んでみてくださいね。
ここまで読んでいただき有難うございました。

Discussion