Looping the model from teachablemachine

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.

1 Like

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();

        // append elements to the DOM
        labelContainer = document.getElementById("label-container");
        for (let i = 0; i < maxPredictions; i++) { // and class labels

    async function loop() {
        webcam.update(); // update the webcam frame
        await predict();

    // 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;

Great thanks for helping @Jason @lgusm !