Day 16 ml5.js

跑范例环节...这次是 ml5.js，本来想直接学TensorFlow.js 的，
但途中得知ml5.js 比 TensorFlow.js 更容易使用，於是改学ml5.js。

ml5.js 构建在 TensorFlow.js 之上，可透过更简洁的 API 在浏览器跑机器学习。
以下范例来源於
https://learn.ml5js.org/#/tutorials/hello-ml5

|_ /hello-ml5
  |_ ?/images
    |_ ? bird.png
  |_ ?index.html
  |_ ?sketch.js

index.html
范例在这里汇入了 ml5.js 和 p5.js， ml5.js 使机器学习函式库，而 p5.js 是绘图函式库。


<html>

<head>
  <meta charset="UTF-8">
  <title>Image classification using MobileNet and p5.js</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>

<body>
  <h1>Image classification using MobileNet and p5.js</h1>
  <script src="sketch.js"></script>
</body>

</html>

sketch.js

preload 是 p5 的预载入function，在这里读取 ml5 的图片分类模型以及需要分类的图片。
setup 也是p5 的 function，在载入完毕後建立一个画布并分类图片，分类结束後执行 gotResult，将分类结果写在後面。

// Initialize the Image Classifier method with MobileNet. A callback needs to be passed.
let classifier;

// A variable to hold the image we want to classify
let img;

function preload() {
  classifier = ml5.imageClassifier('MobileNet');
  img = loadImage('images/bird.png');
}

function setup() {
  createCanvas(400, 400);
  classifier.classify(img, gotResult);
  image(img, 0, 0);
}

// A function to run when we get any errors and the results
function gotResult(error, results) {
  // Display error in the console
  if (error) {
    console.error(error);
  } else {
    // The results are in an array ordered by confidence.
    console.log(results);
    createDiv(`Label: ${results[0].label}`);
    createDiv(`Confidence: ${nf(results[0].confidence, 0, 2)}`);
  }
}

参考资料
https://learn.ml5js.org/#/tutorials/hello-ml5

<<: Kotlin Android 第26天，从 0 到 ML - TensorFlow Lite -手写数字辨识

>>: Day 26 权限宝石：IAM User 建立与使用(下)