Day 20 TensorFlowJS

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/[email protected]/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 了...


<<:  Day-21 RadioGroup

>>:  Day19 - 【概念篇】OAuth flows: Device Code(1)

[FGL] OPEN WINDOW WITH 画面档

前几个篇章中,若使用到客户端 (如GDC/GBC) 呈现画面时,Hello World 都只能出现...

【Day 04】- 今天来把 Module 藏起来(基於 PEB 断链,隐藏 DLL 的方法)

Agenda 资安宣言 测试环境与工具 前情提要 学习目标 技术原理与程序码 References ...

JavaScript条件控制

程序的执行基本上是循序渐进的。程序的执行未必一定是由上到下,一行一行的执行。 有时内容会因为判断,或...

[重构倒数第26天] - 你可能不需要Vuex (You might not need Vuex)

前言 该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系...

DAY3:安装 Java JDK以及Android studio之步骤

首先我们这是为了开发Android App,所以我们需要一只Android 手机,但由於自身是IOS...