index.html

<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
<p id="label-2"></p>
<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">

   // the link to your model 
   const URL = "./tm-my-image-model/";
let model, webcam, labelContainer, maxPredictions;


   async function init() {
       const modelURL = URL + "model.json";
       const metadataURL = URL + "metadata.json";

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

       const flip = true; 
       webcam = new tmImage.Webcam(200, 200, flip);
       await webcam.setup(); 
       await webcam.play();
       window.requestAnimationFrame(loop);

       // append elements to the DOM
       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);
           labelContainer.childNodes[i].innerHTML = classPrediction;
          
           container2 = document.getElementById("label-2");
           if (prediction[i].className == "touch") {
	if (prediction[i].probability > 0.3) {
		container2.innerHTML = "keep your hand off your face";
	} else {
		container2.innerHTML = "you're safe";
	}
       }
   }
}
</script>