Hey there,
I’ve created a simple model on teachablemachine. Could you please tell me how I can now loop this model so that I can upload a catalog of images into it and, at the exit, get a file for a spreadsheet where the results for each image will be.
Thank you!
Hi @Yan_Mednis
Since you have it on a TFJS format, I think you might be able to do the loop using Javascript.
Do you want to just upload this batch of images from the catalogue or is it a service you are building?
for the output, I’d focus on generating a CSV with the data and then import it on Sheets, might be easier than using the Sheets api (if you don’t know that yet)
@Jason might have some much better insights than mine on this.
If you look at the example code that Teachable Machine provides it shows you how to call the model classification function. You simply would call this many times (remember each time to wait for the previous classification to complete else you may overload the machine). In case you didnt see it, after you trained a model with Teachable Machine there is an “export model” button at the top right of the screen. Click that, download the model files and host them on your web server, and then check the sample HTML + JS code for how to use your downloaded model (remember to change the path to where you hosted the model files):
<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@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
// the link to your model provided by Teachable Machine export panel
const URL = "./my_model/";
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>