Day16 TensorFlow.js 即時影像辨識分類

第 11 屆 iThome 鐵人賽

DAY 17

自我挑戰組

Tensorflow.js初學筆記系列第 17 篇

11th鐵人賽

qu4qu426com123

2019-10-03 22:52:09

2518 瀏覽

分享至

根據昨天的KNN配上MobileNet
今天加上讓他可以即時新增影像與分類
在之後只要是擷取到的影像
都會進行辨識回傳分類

首先要讓及時獲得影像的方式
是透過WebCam來取得影像，目前必須在筆電上使用
而且筆電要有攝影機

試過用PhoneGap，花了半個小時處理，編出來的APK被手機拒絕，因為APK版本太舊
試過用Visual Studio的Condova編，從架環境到編花了2個小時，編出來的無法安裝
試過架成網站用手機連，Chrome會以隱私為由拒絕
FireFox沒有隱私問題但會not allowed by platform
花了很久時間在跨平台超級不爽
尤其是前兩個
之後再想辦法解決

廢話不多說，直接看程式碼就懂了

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>mobilenet</title>
    <!-- TensorFlow.js Core -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js">
    </script>
    <!-- TensorFlow.js mobilenet model -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet">
    </script>
    <!-- Load KNN Classifier -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier">
    </script>
</head>

<body>
    <p id="result">Target:</p>
    <video autoplay playsinline muted id="webcam" width="224" height="224"></video>
    <div>
        <button id="sample_btn">Add Sample of</button><input type="text" id="sample_class">
        <ul id="sample_list">
        </ul>
    </div>
    <button id="clear_sample_btn">Clear All Sample</button>
    <script>
        async function app() {
            const knn = knnClassifier.create();
            const mobilenet_model = await mobilenet.load();
            const webcamElement = document.getElementById('webcam');

            let samplelist = {};
            let addSample = function () {
                let sample_class = document.getElementById('sample_class').value;
                if (sample_class === "") return;
                if (samplelist[sample_class] === undefined) {
                    let new_sample = document.createElement("li");
                    new_sample.innerHTML = sample_class;
                    document.getElementById("sample_list").appendChild(new_sample);
                    samplelist[sample_class]=sample_class;
                }
                const embedding = mobilenet_model.infer(webcamElement, true);
                knn.addExample(embedding, sample_class);
            }
            let clearSample=function(){
                for (const key in samplelist) {
                    knn.clearClass(key);
                }
                document.getElementById('result').innerHTML = "Target:" ;
                let list=document.getElementById("sample_list");
                while(list.firstElementChild!==null){
                    list.removeChild(list.firstElementChild);
                }
                samplelist={};
            }

            let showResult = async function () {
                if (knn.getNumClasses() > 0) {
                    const embedding = mobilenet_model.infer(webcamElement, true);
                    const result = await knn.predictClass(embedding);
                    document.getElementById('result').innerHTML = "Target:" + result.label;
                    console.log(result.label);
                }
                await tf.nextFrame();
                setTimeout(function () {
                    showResult();
                }, 300);
            }
            let setupWebcam = function () {
                return new Promise((resolve, reject) => {
                    const navigatorAny = navigator;
                    navigator.getUserMedia = navigator.getUserMedia ||
                        navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||
                        navigatorAny.msGetUserMedia;
                    if (navigator.getUserMedia) {
                        navigator.getUserMedia({
                                video: true
                            },
                            (stream) => {
                                webcamElement.srcObject = stream;
                                webcamElement.addEventListener('loadeddata', () => resolve(),
                                    false);
                            },
                            (err) => reject(err));
                    } else {
                        reject("getUserMedia failed");
                    }
                });
            }

            document.getElementById("sample_btn").addEventListener('click', addSample);
            document.getElementById("clear_sample_btn").addEventListener('click', clearSample);
            setupWebcam().then(
                () => {
                    showResult();
                },
                (err) => {
                    console.log(err);
                }
            )
        }
        app();
    </script>
</body>

</html>