Scribd
Upload
24 views2 pages

Teachable Machine JavaScript Code

Uploaded by

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

Teachable Machine JavaScript Code

Uploaded by

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

<div>Teachable Machine Image Model</div>

<input type="file" id="image-upload" accept="image/*"/>


<div id="image-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">
// the link to your model provided by Teachable Machine export panel

const MODEL_URL = "#####link#####";

let model, labelContainer, maxPredictions;

// Load the image model


async function init() {
console.log("Initializing...");
const modelURL = MODEL_URL + "model.json";
const metadataURL = MODEL_URL + "metadata.json";

try {
// load the model and metadata
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
console.log("Model loaded successfully");

// append label elements to the DOM


labelContainer = document.getElementById("label-container");
labelContainer.innerHTML = ''; // Clear previous labels
for (let i = 0; i < maxPredictions; i++) {
labelContainer.appendChild(document.createElement("div"));
}
} catch (err) {
console.error("Error during initialization:", err);
}
}

// Handle image upload and prediction


async function predict(event) {
const file = event.target.files[0];
if (!file) {
console.log("No file selected");
return;
}

const imageContainer = document.getElementById("image-container");


imageContainer.innerHTML = ""; // Clear previous images
const img = document.createElement("img");
img.src = URL.createObjectURL(file);
img.width = 200; // Set image display width
img.onload = async () => {
imageContainer.appendChild(img);
console.log("Image loaded, making prediction...");

try {
const prediction = await model.predict(img);
console.log("Prediction result:", prediction); // Logging the
prediction result
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + (prediction[i].probability
* 100).toFixed(2) + "%";
labelContainer.childNodes[i].innerHTML = classPrediction;
}
} catch (err) {
console.error("Prediction error:", err);
}
};
}

document.getElementById("image-upload").addEventListener("change", predict);

// Initialize the model


init();
</script>

You might also like