ml5.jsでKNNクラスタリングしてみる。

先日の技術書展 6での購入物の中に
ml5.js と p5.js でつくる機械学習コンテンツプログラミングがあった。
連休中に取り組んだら、内容が面白かったので興味から「ml5.js」の提供する他の機能を使ってみたので、そんなメモ。

目次

やりたいこと

ml5.js」は機械学習のライブラリなので、
「学習」をしてみたかった。
人間の姿勢取得や動体検知も面白いのだけど、
興味があったのは学習することだったので、タグ付けした多数の画像を入力にして、
学習データを作る。推論することを試すことにした。

学習する、推論するだけなら、ブラウザいらないよね!

ダメだった。
ml5.js を参照しているコードを node のコマンドラインで実行したら、
window オブジェクトが無いという趣旨のエラーで解決できなかった。
悔しいが断念。

コード

コマンドライン実行ができなかったので、
学習自体もブラウザで実行することにする。

ml5.js を npm からインストールしてきたが、使いたい KNN 分類器がどうも動作できず、
Github の ml5.js の dist
の ml5.min.js と ml5.min.js.map をダウンロードして、node_modules\ml5\distの中身を差し替えておく。
(この辺は github の使い方がちゃんとしてる人は、もっと違うやり方をするんだろうか?)

ディレクトリ構成は以下の通り、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
│  package-lock.json
│ package.json
│ webpack.config.js
├─node_modules
├─public
│ │ index.html
│ │ list.json
│ │
│ └─img
│ │ test.jpg
│ │
│ ├─A
│ │ A1.jpg
│ │ 画像多数
│ │
│ └─B
│ B1.jpg
│ 画像多数

└─src
index.js

読み込みする画像と、タグ付けの内容を list.js に定義する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
{"data":[
{"path":"\/img\/A\/A1.jpg","tag":"A"},



{"path":"\/img\/B\/B23.jpg","tag":"B"}
]}```

実装コードは以下の通り、
```javascript index.js

const ml5 = require("ml5");
const axios = require("axios");

let imageEl = document.getElementById("image");
let messageEl = document.getElementById("message");
let probabilityEl = document.getElementById("probability");

let KnnClassifier;
let featureExtractor;
let datalist = [];

let setup = async () => {
console.log("[exe]", "setup");

//データを準備
datalist = await axios.get("/list.json").then(res => {
return res.data.data;
});
console.table(datalist);

//KNN分類器を作成
KnnClassifier = ml5.KNNClassifier();
featureExtractor = ml5.featureExtractor("MobileNet", culc);
};

let showresult = async results => {
console.log("[exe]", "showresult");
console.table(results);
messageEl.innerText = `[判定結果]:${results.label}`;

let text = (() => {
let keys = Object.keys(results.confidencesByLabel);
let tm = "判定確率\n";
for (let i = 0; i < keys.length; i++) {
tm += `[${keys[i]}]:${results.confidencesByLabel[keys[i]]}\n`;
}
return tm;
})();

probabilityEl.innerText = text;
};

let ch_image = function(el, path) {
console.log("[exe]", "ch_image");
el.src = "";
el.src = path;
return new Promise(resolve => {
el.onload = () => {
resolve();
};
});
};

let setlabel = async function(el, path, label) {
console.log("[exe]", "setlabel");

//画像差し替え
await ch_image(el, path);
//特徴量を取得し
const features = featureExtractor.infer(imageEl);
//knn分類機にlabelの名称で登録
KnnClassifier.addExample(features, label);
};

let culc = async () => {
console.log("[exe]", "culc");

//モデル作成
for (let i = 0; i < datalist.length; i++) {
console.log("[img]", i);
await setlabel(imageEl, datalist[i].path, datalist[i].tag);
}

//推論
await ch_image(imageEl, "./img/test.jpg");
const featuresTest1 = featureExtractor.infer(imageEl);
console.log("推測開始:");
// KNN分類器で分類を開始
KnnClassifier.classify(featuresTest1, (err, result) => {
// エラーを表示する
if (err) {
console.error(err);
}
console.log("結果");
console.log(result);
showresult(result);
});
};

(async () => {
await setup();
})();

上記を作成し、npm run devで実行する。
コンソールに表示された URL にアクセスすることで、
パラパラと画像が連続で読み出しされて最後に、推論結果を表示する。

学習対象画像とタグ付けは、動物でも何でもいいと思う。
ただ、画像のサイズはそろえたほうが精度がいいような気がした。
縮小専用。使うかjimpとか使えばいいと思う。

TensorFlow.jsで線形回帰分析だけ触って挫折した身からすると、
すごく触りやすかった。

ではでは。