ML5でかんたん機械学習体験
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ファイルを用意して、下記コードを記述します。
<!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"としています)
モデルのロードが完了すると、第二引数のコールバックが実行されます。
ml5.imageClassifier(モデル, コールバック);
第一引数のモデルには、次のものを指定する事が出来ます。(自分で用意したモデルを使う事も可能です)
| モデル | |
|---|---|
| MobileNet | https://arxiv.org/abs/1704.04861 |
| Darknet | https://pjreddie.com/darknet/ |
| DoodleNet | https://github.com/yining1023/doodleNet |
分類器の準備が出来たら、いよいよ画像を使って判別を行う事が出来ます。
次の処理を見れば一目瞭然ですねw
classifier.classify(画像データ, (エラー, 結果) => {
// ここでエラー/結果を取得します
});
全体の処理は、次の様になります。
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