index.html

<div>Minion/Goblins</div>
<button type="button" onclick="init()">Start</button>
<div id="webcam-container"></div>
<div id="debug-container"></div>
<img id="card-image"></img>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">

    class ValueMonitor {
        value = null;
        lastChangeAt = 0;
        
        update(newValue) {
            if (this.value != newValue) {
                this.value = newValue;
                this.lastChangeAt = new Date().getTime();
                return true;
            }
            
            return false;
        }
        
        hasValue() {
            return this.value != null;
        }
        
        age() {
            return new Date().getTime() - this.lastChangeAt;
        }
        
        status() {;
            console.log("hasValue: " + this.hasValue() + " age: " + this.age());
        }
    }

    class Model {
        _baseUrl = "";
        _model = null;
        _value = new ValueMonitor();

        constructor(baseUrl) {
            this._baseUrl = baseUrl;
        }

        async load() {
            const modelUrl = this._baseUrl + "model.json";
            const metadataUrl = this._baseUrl + "metadata.json";
            this._model = await tmImage.load(modelUrl, metadataUrl);
        }

        async predict(canvas, threshold) {
            const prediction = await this._model.predict(canvas);

            for (let i = 0; i < prediction.length; i++) {
                if (prediction[i].probability >= threshold) {
                    this._value.update(prediction[i].className);
                    return prediction[i];
                }
            }
            
            this._value.update(null);
            return null;
        }

        value() {
            return this._value.value;
        }

        age() {
            return this._value.age();
        }

        hasValue() {
            return this._value.hasValue();
        }
    }

    let webcam, isInit;
    let debugContainer, cardImage;

    let categoriesModel = new Model("./models/categories/");
    let models = {
        "minion": new Model("./models/minion/"),
        "goblin": new Model("./models/goblin/"),
    };

    // Load the image model and setup the webcam
    async function init() {

        if (isInit) {
            return;
        }

        isInit = true;

        await categoriesModel.load();

        for (const prop in models) {
            await models[prop].load();
        }

        webcam = new tmImage.Webcam(200, 200, false);
        await webcam.setup({ facingMode: "environment" })
        
        await webcam.play();
        window.requestAnimationFrame(loop);

        // append elements to the DOM
        document.getElementById("webcam-container").appendChild(webcam.canvas);

        debugContainer = document.getElementById("debug-container");
        cardImage = document.getElementById("card-image");
    }

    async function loop() {
        webcam.update(); // update the webcam frame
        await predict();
        window.requestAnimationFrame(loop);
    }

    async function predict() {
        let category, card;

        let model = categoriesModel;
        let bestPrediction = await model.predict(webcam.canvas, 0.75);

        if (bestPrediction != null && models[bestPrediction.className] != null) {
            category = bestPrediction.className;

            model = models[bestPrediction.className];
            bestPrediction = await model.predict(webcam.canvas, 0.75);

            if (bestPrediction != null) {
                card = bestPrediction.className;
            }
        }

        if (!model.hasValue()) {
            debugContainer.innerText = "?"
                + "\n" + model.age();
            return;
        }

        debugContainer.innerText = model.value()
            + "\n" + model.age()
            + "\n" + bestPrediction.probability.toFixed(2);

        if (card != null && model.age() > 1000) {
            cardImage.src = "./images/" + card + ".jpg";
        }
    }   
</script>