Teachable-Machine-webcam-dark-mode-example/index.html at main · hellojsna/Teachable-Machine-webcam-dark-mode-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
    <head>
        <title>Example | Js Na</title>
    </head>
    <body>
        <div>Dark mode toggle using webcam with Teachable Machine</div>
        <button type="button" onclick="init()">Start</button>
        <div id="webcam-container"></div>
        <div id="label-container"></div>
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
        <script type="text/javascript">
            const URL = "https://teachablemachine.withgoogle.com/models/3Mya_N6iI/";

            let model, webcam, labelContainer, maxPredictions;

            // 웹캠 시작
            async function init() {
                const modelURL = URL + "model.json";
                const metadataURL = URL + "metadata.json";

            (window.tmImage)
                model = await tmImage.load(modelURL, metadataURL);
                maxPredictions = model.getTotalClasses();

                // Convenience function to setup a webcam
                const flip = true; // whether to flip the webcam
                webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
                await webcam.setup(); // request access to the webcam
                await webcam.play();
                window.requestAnimationFrame(loop);

                // element 추가
                document.getElementById("webcam-container").appendChild(webcam.canvas);
                labelContainer = document.getElementById("label-container");
                for (let i = 0; i < maxPredictions; i++) { // and class labels
                    labelContainer.appendChild(document.createElement("div"));
                }
            }

            async function loop() {
                webcam.update(); //웹캠 업데이트
                await predict();
                window.requestAnimationFrame(loop);
            }

            async function predict() {

                const prediction = await model.predict(webcam.canvas);
                for (let i = 0; i < maxPredictions; i++) {
                    const classPrediction =
                        prediction[i].className + ": " + prediction[i].probability.toFixed(2)
                    //console.log(prediction[0].probability);
                    if (prediction[0].probability >= 0.3) {
                        labelContainer.childNodes[0].innerHTML = "LIGHT"
                        document.body.style.backgroundColor = "white";

                    } else {
                        labelContainer.childNodes[0].innerHTML = "DARK"
                        document.body.style.backgroundColor = "black";

                    }
                }
            }
        </script>
    </body>
</html>