Welcome to the world of machine learning! In this blog, we will explore how to use the ML Classifier, a powerful engine designed for quickly training image classification models directly in your browser. By the end of this guide, you’ll be capable of training and saving your own image classification models with ease!

Getting Started with ML Classifier

To start harnessing the power of ML Classifier, you first need to install the package. You can do this using either Yarn or NPM. Here’s how:

yarn add ml-classifier

npm install ml-classifier

Quick Start

Let’s dive right into coding. Start by instantiating a new ML Classifier:

import MLClassifier from 'ml-classifier';
const mlClassifier = new MLClassifier();

Next, you’ll want to train the model using your image data. Think of training a model as teaching a pet. Just as you guide your pet to learn tricks, you guide the model to recognize patterns in images. Here’s how you can do it:

await mlClassifier.train(imageData, {
    onTrainBegin: () => console.log('Training begins'),
    onBatchEnd: (batch, logs) => console.log('Loss is: ' + logs.loss.toFixed(5)),
});

Once you’re satisfied with the model’s performance, save it effortlessly with just a command:

mlClassifier.save();

Using the Saved Model

When saved, your model will generate two important files: a weights file and a model topology file. These files are akin to a scorecard and a rulebook for playing a game. You’ll combine them into a single JSON file. Here’s what you need to do:

{
    weightsManifest: 'ml-classifier-class1-class2.weights.bin',
    modelTopology: {
        ...
    }
}

Image Preparation and Model Predictions

To get accurate predictions, ensure your images are preprocessed correctly. This is like fitting a puzzle piece: each image must fit the dimensions that the pretrained model expects, for instance, 1x224x224x3 for the Mobilenet model. Here are critical steps:

• Transform images into the right dimensions.
• Create a matching pretrained model.
• Feed your images through the pretrained model to activate them.
• Obtain predictions and take the arg max for the final result.

Here’s a practical example of how to load and predict an image:

const loadImage = (src) => new Promise((resolve, reject) => {
    const image = new Image();
    image.src = src;
    image.crossOrigin = 'Anonymous';
    image.onload = () => resolve(image);
    image.onerror = (err) => reject(err);
});

// Load the model then classify an image.
const pretrainedModelURL = 'https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json';
tf.loadModel(pretrainedModelURL).then(model => {
    const layer = model.getLayer('conv_pw_13_relu');
    return tf.model({
        inputs: [model.inputs[0]],
        outputs: layer.output,
    });
}).then(pretrainedModel => {
    return tf.loadModel(model.json).then(model => {
        return loadImage('path/to/your/image.png').then(loadedImage => {
            const image = tf.reshape(tf.fromPixels(loadedImage), [1, 224, 224, 3]);
            const pretrainedModelPrediction = pretrainedModel.predict(image);
            const modelPrediction = model.predict(pretrainedModelPrediction);
            const prediction = modelPrediction.as1D().argMax().dataSync()[0];
            console.log(prediction);
        });
    });
}).catch(err => {
    console.error('Error:', err);
});

Troubleshooting Tips

If you encounter issues while utilizing the ML Classifier, here are a few troubleshooting tips:

• Make sure your images are in the correct format and dimensions.
• Double-check that the model is properly loaded before running predictions.
• Ensure that any errors in the console are addressed, as they often point to the root of the problem.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Additional Resources

For a more in-depth walkthrough of the code and to see real-world applications, check out the article on Image Classification in the Browser with Javascript.

Also, you can experiment with the interactive demo to see the power of the ML classifier in action!

Happy coding!