Scribd
Upload
15 views1 page

K234101317 Teachable Machine

This document loads an image classification model from Teachable Machine and sets up a webcam to perform live predictions. It loads the model and metadata files, initializes the webcam, appends the webcam video and label elements to the DOM, then enters a prediction loop to continuously classify the webcam frames and update the label probabilities. Each frame is passed through the model to predict the classes and probabilities, which are then displayed next to the webcam video.

Uploaded by

Như Ý
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views1 page

K234101317 Teachable Machine

This document loads an image classification model from Teachable Machine and sets up a webcam to perform live predictions. It loads the model and metadata files, initializes the webcam, appends the webcam video and label elements to the DOM, then enters a prediction loop to continuously classify the webcam frames and update the label probabilities. Each frame is passed through the model to predict the classes and probabilities, which are then displayed next to the webcam video.

Uploaded by

Như Ý
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

// 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/8TeY-6kjR//";

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);
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(); // 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);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}</script>

You might also like