Day 18 ml5.js-2

2021 iThome 鐵人賽

DAY 18

AI & Data

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

13th鐵人賽

johnting

團隊Weeeeeeeeeeeeeeeeeee

2021-10-03 04:15:09

1008 瀏覽

分享至

銜接 Day 16 的 ml5.js 範例，我們可以把辨識流程改成上傳圖片的形式。

之前的範例使用 F12 查看 html，可以看到它 canvas 的 id 是 defaultCanvas0。

於是可以寫一個函數去取代它的拖拉動作。

function setdropupdate() {
    var mycanvas = document.getElementById("defaultCanvas0");
    var myimage = new Image();
    var ctx = mycanvas.getContext("2d");
    var fileReader = new FileReader();

    mycanvas.ondragover = function (e) {
        e.preventDefault();
    }
    mycanvas.ondrop = function (e) {
        e.preventDefault();
        let f = e.dataTransfer.files[0];
        fileReader.readAsDataURL(f);
    }
    fileReader.onload = function () {
        myimage.src = fileReader.result;
    }
    myimage.onload = function () {
        ctx.drawImage(myimage, 0, 0, 400, 400);

        classifier.classify(myimage, gotResult);
    };
}

將修改拖拉事件的函式放在 createCanvas 後面，
因為呈現的 Canvas 是 createCanvas 後才製造出來的。

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

    setdropupdate()
}

顯示資訊方面，在 index 中加入 <div id="log"></div> 做為輸出

<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>
  <div id="log"></div>
</body>

</html>

修改 gotResult 的回應，改為將輸出寫在 div log 中。

// 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)}`);
        document.getElementById("log").innerText = `Label: ${results[0].label}\n` + `Confidence: ${nf(results[0].confidence, 0, 2)}`;
    }
}

https://i.imgur.com/2wEzytl.mp4