Scribd
Upload
43 views3 pages

Teachable Machine Image Model Setup

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
43 views3 pages

Teachable Machine Image Model Setup

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

<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="[Link]
@latest/dist/[Link]"></script>
<script
src="[Link]
e/image@latest/dist/teachablemachine-
[Link]"></script>
<script type="text/javascript">
// More API functions here:
//
[Link]
ine-community/tree/master/libraries/image

// the link to your model provided by


Teachable Machine export panel
const URL =
"[Link]
4BW-FpK/";

let model, webcam, labelContainer,


maxPredictions;

// Load the image model and setup the webcam


async function init() {
const modelURL = URL + "[Link]";
const metadataURL = URL + "[Link]";

// load the model and metadata


// Refer to [Link]() 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 ([Link])
model = await [Link](modelURL,
metadataURL);
maxPredictions = [Link]();
// Convenience function to setup a webcam
const flip = true; // whether to flip the
webcam
webcam = new [Link](200, 200,
flip); // width, height, flip
await [Link](); // request access to
the webcam
await [Link]();
[Link](loop);

// append elements to the DOM


[Link]("webcam-
container").appendChild([Link]);
labelContainer =
[Link]("label-container");
for (let i = 0; i < maxPredictions; i++) {
// and class labels

[Link]([Link](
"div"));
}
}

async function loop() {


[Link](); // update the webcam
frame
await predict();
[Link](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
[Link]([Link]);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " +
prediction[i].[Link](2);
[Link][i].innerHTML
= classPrediction;
}
}
</script>

You might also like