見出し画像

やっぱりJavaScript - ml5.js で機械学習

donguri

p5.js web editorを使ってJavaScriptで機械学習(ml5.js)を試すことができます。

何はともあれ上記サイトで紹介されている

を開いて実行した結果

左下のコンソールの三角印（矢印）をクリックすると推論された結果が出ています。
この場合は

"robin, American robin, Turdus migratorius"　　・・・　コマドリ

が一番可能性が高いと出てきています。

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が使えるようになります。

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

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);
}

function preload() {
　classifier = ml5.imageClassifier("MobileNet");
}

機械学習のキモである学習モデルは"MobileNet" となっています。


このサイトでは他の学習モデル、他の方法も用意してあります。

Teachable Machineについては

Neural Networkを試すときは、
マウスジェスチャーのサンプルがわかりやすいです。マウスで線を引いた向きを判別してup,down,left,rightと判定してくれます。



この記事が気に入ったらサポートをしてみませんか？