teachable-machine--web/index.html at master · web-n/teachable-machine--web · 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
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html>
<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
</head>
<body>
  <h1>WEB</h1>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <h2>WEB</h2>
  <p>The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in August 1991.
  </p>


  <div style="visibility: hidden; position: absolute;" 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">
      // More API functions here:
      // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image

      // the link to your model provided by Teachable Machine export panel
      const URL = "https://teachablemachine.withgoogle.com/models/xxyHsRppn/";

      let model, webcam, labelContainer, maxPredictions;

      // Load the image model and setup the webcam
      async function init() {
          const modelURL = URL + "model.json";
          const metadataURL = URL + "metadata.json";

          // load the model and metadata
          // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
          // or files from your local hard drive
          // Note: the pose library adds "tmImage" object to your window (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);

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

      }

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

      // run the webcam image through the image model
      async function predict() {
          // predict can take in an image, video or canvas html element
          const prediction = await model.predict(webcam.canvas);
          if(prediction[0].probability > 0.5){
              document.querySelector('body').style.backgroundColor = 'white';
              document.querySelector('body').style.color = 'black';
          } else {
              document.querySelector('body').style.backgroundColor = 'black';
              document.querySelector('body').style.color = 'white';
          }
      }
      init();
  </script>


</body>
</html>