https://ph03nixcoding.github.io/Chess1.html

1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width">
7  <title>replit</title>
8  <link href="style.css" rel="stylesheet" type="text/css" />
9</head>
10
11<body>
12  <div>Chess Piece Detector</div>
13  <button type="button" onclick="init()">Start</button>
14  <div id="webcam-container"></div>
15  <div id="label-container"></div>
16  

16<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>

16
17  

17<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>

17
18  

18<script type="text/javascript">
19      // More API functions here:
20      // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
21
22      // the link to your model provided by Teachable Machine export panel
23      const URL = "https://teachablemachine.withgoogle.com/models/jXqubdtOZ/";
24
25      let model, webcam, labelContainer, maxPredictions;
26
27      // Load the image model and setup the webcam
28      async function init() {
29          const modelURL = URL + "model.json";
30          const metadataURL = URL + "metadata.json";
31
32          // load the model and metadata
33          // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
34          // or files from your local hard drive
35          // Note: the pose library adds "tmImage" object to your window (window.tmImage)
36          model = await tmImage.load(modelURL, metadataURL);
37          maxPredictions = model.getTotalClasses();
38
39          // Convenience function to setup a webcam
40          const flip = true; // whether to flip the webcam
41          webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
42          await webcam.setup(); // request access to the webcam
43          await webcam.play();
44          window.requestAnimationFrame(loop);
45
46          // append elements to the DOM
47          document.getElementById("webcam-container").appendChild(webcam.canvas);
48          labelContainer = document.getElementById("label-container");
49          for (let i = 0; i < maxPredictions; i++) { // and class labels
50              labelContainer.appendChild(document.createElement("div"));
51          }
52      }
53
54      async function loop() {
55          webcam.update(); // update the webcam frame
56          await predict();
57          window.requestAnimationFrame(loop);
58      }
59
60      // run the webcam image through the image model
61      async function predict() {
62          // predict can take in an image, video or canvas html element
63          const prediction = await model.predict(webcam.canvas);
64          for (let i = 0; i < maxPredictions; i++) {
65              const classPrediction =
66                  prediction[i].className + ": " + prediction[i].probability.toFixed(2);
67              labelContainer.childNodes[i].innerHTML = classPrediction;
68          }
69      }
70  </script>

70
71
72  

72<script src="script.js"></script>

72
73</body>
74
75</html>