やっぱりJavaScript - ml5.js で機械学習
p5.js web editorを使ってJavaScriptで機械学習(ml5.js)を試すことができます。
何はともあれ上記サイトで紹介されている
を開いて実行した結果
左下のコンソールの三角印(矢印)をクリックすると推論された結果が出ています。
この場合は
が一番可能性が高いと出てきています。
p5.jsエディタの中身はというとindex.htmlとsketch.jsが重要です。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ml5.js imageClassifier Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
<script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
大事なところはCDNリンク。これでml5.jsが使えるようになります。
sketch.js
let classifier;
// A variable to hold the image we want to classify
let img;
// Variables for displaying the results on the canvas
let label = "";
let confidence = "";
function preload() {
classifier = ml5.imageClassifier("MobileNet");
img = loadImage("images/bird.jpg");
}
function setup() {
createCanvas(400, 400);
classifier.classify(img, gotResult);
image(img, 0, 0, width, height);
}
function gotResult(results) {
// The results are in an array ordered by confidence
console.log(results);
// Display the results on the canvas
fill(255);
stroke(0);
textSize(18);
label = "Label: " + results[0].label;
confidence = "Confidence: " + nf(results[0].confidence, 0, 2);
text(label, 10, 360);
text(confidence, 10, 380);
}
機械学習のキモである学習モデルは"MobileNet" となっています。
このサイトでは他の学習モデル、他の方法も用意してあります。
Teachable Machineについては
Neural Networkを試すときは、
マウスジェスチャーのサンプルがわかりやすいです。マウスで線を引いた向きを判別してup,down,left,rightと判定してくれます。
この記事が気に入ったらサポートをしてみませんか?