CODEWITHSUNDEEP
javascripthtmltensorflowdata-scienceteachable-machine
yellesh
yellesh

Reputation: 1

Load Teachable Machine Model in HTML and JavaScript Code

I created a teachable machine audio project and uploaded it and used url in html code that is also provided by teachable machine and when I run in the browser it is working. But now I want to use downloaded model instead of uploaded url: what I tried: in place of const URL = "https://teachablemachine.withgoogle.com/models/7cEccJReh/"; I used

  1. const URL = "./"; Error: Uncaught (in promise) Error: Unsupported URL scheme in metadata URL: ./metadata.json. Supported schemes are: http://, https://, and (node.js-only) file://
  2. const URL = "file://";
  3. const URL = "file:///"; Error: Uncaught (in promise) ReferenceError: require is not defined

My project files: index.html, metadata.json, model.json, weights.bin are all in same folder.

here is my code

<div>Teachable Machine Audio Model</div>
<button type="button" onclick="init()">Start</button>
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]/dist/speech-commands.min.js"></script>

<script type="text/javascript">
    // more documentation available at
    // https://github.com/tensorflow/tfjs-models/tree/master/speech-commands

    // the link to your model provided by Teachable Machine export panel
    // const URL = "https://teachablemachine.withgoogle.com/models/7cEccJReh/";
    const URL = "file:///"

    async function createModel() {
        const checkpointURL = URL + "model.json"; // model topology
        const metadataURL = URL + "metadata.json"; // model metadata

        const recognizer = speechCommands.create(
            "BROWSER_FFT", // fourier transform type, not useful to change
            undefined, // speech commands vocabulary feature, not useful for your models
            checkpointURL,
            metadataURL);

        // check that model and metadata are loaded via HTTPS requests.
        await recognizer.ensureModelLoaded();

        return recognizer;
    }

    async function init() {
        const recognizer = await createModel();
        const classLabels = recognizer.wordLabels(); // get class labels
        const labelContainer = document.getElementById("label-container");
        for (let i = 0; i < classLabels.length; i++) {
            labelContainer.appendChild(document.createElement("div"));
        }

        // listen() takes two arguments:
        // 1. A callback function that is invoked anytime a word is recognized.
        // 2. A configuration object with adjustable fields
        recognizer.listen(result => {
            const scores = result.scores; // probability of prediction for each class
            // render the probability scores per class
            for (let i = 0; i < classLabels.length; i++) {
                const classPrediction = classLabels[i] + ": " + result.scores[i].toFixed(2);
                labelContainer.childNodes[i].innerHTML = classPrediction;
            }
        }, {
            includeSpectrogram: true, // in case listen should return result.spectrogram
            probabilityThreshold: 0.75,
            invokeCallbackOnNoiseAndUnknown: true,
            overlapFactor: 0.50 // probably want between 0.5 and 0.75. More info in README
        });

        // Stop the recognition in 5 seconds.
        // setTimeout(() => recognizer.stopListening(), 5000);
    }
</script>

Upvotes: 0

Views: 1457

Answers (1)

yellesh
yellesh

Reputation: 1

if you want to use your downloaded model in your computer instead of uploaded model url from teachable machine, I found the following method.

  1. download the model (zip), and extract it. by default the folder name is tm-my-audio-model. open that folder with vs code, and click on go live option in bottom right corner of vs code (if not found you have to install live server extension), now copy the server url and paste in index.html file.
  2. copy the JavaScript code from teachable machine website( that I also mentioned in my question). name it as index.html(you can put any name)
  3. it is better if you put index.html file in the tm-my-audio-model folder (so you need not to give audio permission every time when you click on start button to record audio)

Upvotes: 0

Related Questions