Scribd
Upload
13 views3 pages

ML.html

The document outlines the implementation of a Teachable Machine image model using TensorFlow.js. It includes a button to start the webcam, loads a pre-trained model, and continuously predicts and displays class labels based on the webcam feed. The code provides a structured approach to integrating machine learning capabilities into a web application using JavaScript.

Uploaded by

vidkk24411e
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
13 views3 pages

ML.html

The document outlines the implementation of a Teachable Machine image model using TensorFlow.js. It includes a button to start the webcam, loads a pre-trained model, and continuously predicts and displays class labels based on the webcam feed. The code provides a structured approach to integrating machine learning capabilities into a web application using JavaScript.

Uploaded by

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

<div>Teachable Machine Image Model</div>

<button type="button"
onclick="init()">Start</button>
<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/@teachablemachin
e/image@latest/dist/teachablemachine-
image.min.js"></script>
<script type="text/javascript">
// More API functions here:
//
https://github.com/googlecreativelab/teachablemach
ine-community/tree/master/libraries/image

// the link to your model provided by


Teachable Machine export panel
const URL =
"https://teachablemachine.withgoogle.com/models/XS
4BW-FpK/";

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