In today's era, AI, or Artificial Intelligence, has become a household term. Its presence has significantly enhanced our lives. For instance, AI plays a pivotal role in our daily routines, from analyzing photos taken on our smartphones to discerning our age and gender. On November 7, 2019, Google unveiled a remarkable tool that simplifies the creation of your AI models with ease and speed – Teachable Machine.

Explanation

Teachable Machine is a tool developed by Google to facilitate the creation of Machine Learning models. Currently, Teachable Machine offers three types of model creation: Image Project, Audio Project, and Pose Project.

Usage

In this experiment, I will employ the Image Project feature in Teachable Machine to match images. Please visit https://teachablemachine.withgoogle.com.

Samples

Before training your AI, you need to create samples or the primary objects for future matching. You can use uploaded images or utilize the webcam provided by Teachable Machine. Here, you can customize the names of Class 1 and Class 2 samples.

Training the Model

After providing a sample or primary object, you can click the 'train' button. This action allows Teachable Machine's AI to recognize the samples you created. If you have more experience with AI, you can adjust parameters like Epochs, Batch Size, and more in the Advanced dropdown menu. If not, you can proceed with Teachable Machine's default settings.

Export

Once the training process is successful, you can review the results in the Preview section. You can also use the AI model you created in your projects. Here, I will export the model to TensorFlow.js for use in JavaScript. If you plan to use it on mobile, you can export it to TensorFlow Lite.

• Export Result & Preview

• Running in JavaScript

• Sample Script

Folder Path: index.html, metadata.json, model.json, weights.bin

<div>Testing AI</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/[email protected]/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">

    let model, webcam, labelContainer, maxPredictions;

    async function init() {
        const modelURL = "./model.json";
        const metadataURL = "./metadata.json";

        model = await tmImage.load(modelURL, metadataURL);
        maxPredictions = model.getTotalClasses();

        const flip = true; 
        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(); 
        await predict();
        window.requestAnimationFrame(loop);
    }

    async function predict() {
        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>

# Author's Message

Wasn't that easy? For further explanations, feel free to visit Teachable Machine.

That's all I have for you. Hope it was useful.

Thank you! 😁