| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Teachable Machine Image Model</title> |
| </head> |
| <body> |
| <div>Teachable Machine Image Model</div> |
| <div id="webcam-container"></div> |
| <div id="label-container"></div> |
| <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"> |
| const URL = "https://teachablemachine.withgoogle.com/models/ZPfAhDYCh/"; |
| |
| 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); |
| |
| document.getElementById("webcam-container").appendChild(webcam.canvas); |
| labelContainer = document.getElementById("label-container"); |
| for (let i = 0; i < maxPredictions; i++) { |
| 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; |
| } |
| } |
| |
| init(); |
| </script> |
| </body> |
| </html> |
|
|
