Day 16 ml5.js

2021 iThome 鐵人賽

DAY 16

AI & Data

機器學習與前端網頁系列第 16 篇

13th鐵人賽

johnting

團隊Weeeeeeeeeeeeeeeeeee

2021-10-01 03:16:49

1529 瀏覽

分享至

跑範例環節...這次是 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