拿 ml5 來練習 Markdown 語法 (一)

ml5 markdown

chenjerfong 2020-10-27 22:55:09 ‧ 1649 瀏覽

介紹

首先介紹什麼是 ml5，
ml5 是基於 TensorFlow.js 在瀏覽器中提供友善的機械學習使用介面。(https://github.com/ml5js/ml5-library)

備料

接著備料，

新增一資料夾，名稱 hello-ml5。
使用 VS Code 打開此資料夾，在 hello-ml5 裡新增一檔案，檔名 index.html。
確認 VS Code 有安裝 Live Server 擴充。
在 index.html 輸入以下程式碼。

<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/0.9.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
</head>

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

</html>

在 hello-ml5 裡新增一檔案，檔名 sketch.js，並在 sketch.js 輸入以下程式碼。

// 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/dog.jpg');
}

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