Day 20 TensorFlowJS

2021 iThome 鐵人賽

DAY 20

AI & Data

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

13th鐵人賽

johnting

團隊Weeeeeeeeeeeeeeeeeee

2021-10-05 04:06:29

1024 瀏覽

ml5 讀取模型還是用 tensorflowjs 的函式，那我不如直接用 tensorflowjs 就好...

tf.loadGraphModel 回傳的物件是 Promise，要使用 await 才會等待模型讀完。
我還沒學過這些同步/非同步語法，所以就直接按網路上解法套 async 上去了。

canvas設定大小為 28 x 28，省下了縮放圖片的步驟。
然後就是手動把彩色轉灰色，
ctx.getImageData().data() 拿到的一維陣列格式是 rgba 紅綠藍加透明度。
於是按照格式拿出紅綠藍相加除 3 即可。

<html>

<head>
    <meta charset="UTF-8">
    <title>Image classification using tensorflow js </title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
</head>

<body>
    <canvas id="defaultCanvas0" width="28" height="28">nocanvas</canvas>
    <div id="log"></div>
</body>

</html>

<script>
    (async () => {
        const model = await tf.loadGraphModel('./web_model/model.json');
        setdropupdate();

        // document.getElementById("defaultCanvas0").getContext("2d").getImageData(0, 0, 28, 28);
        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, 28, 28);

                let imgdata = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
                let imgarray = Array(28);
                for (x = 0; x < imgdata.width; x++) {
                    imgarray[x] = Array(28);
                    for (y = 0; y < imgdata.width; y++) {
                        let index = (x * 28 + y) * 4;
                        imgarray[x][y] = (imgdata.data[index] + imgdata.data[index+1] + imgdata.data[index+2]) / 3;
                    }
                }
                console.log(imgarray);

                const prediction = model.predict(tf.tensor([imgarray]));
                console.log(prediction);
                alert(prediction);
            };
        }
    })();

</script>

寫起來非常地不熟，而且動態語言使 vscode 不知道型別，
不知道型別就不給我列可以用的 function，得一直去查文檔才能知道 function 名稱。

該找時間學 JavaScript ES6 和 NodeJS，和 TypeScript 了...