How to Get Started with ml5.js?

Last Updated : 01 Aug, 2024

ml5.js is designed to make machine learning accessible to everyone, including artists, educators, and students. Built on top of TensorFlow.js, ml5.js abstracts the complexities of machine learning and offers a simple, high-level API. This enables developers to easily incorporate machine learning models into their web applications without needing deep expertise in the underlying algorithms. This article will cover the basics of ml5.js, including installation, different approaches to using the library, detailed syntax explanations, and practical examples with expected outputs.

Installation of ml56.js

Getting started with ml5.js is straightforward. You can include ml5.js in your project either through a CDN or by using npm.

Including ml5.js via CDN

To include ml5.js via a CDN, simply add the following script tag to your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ml5/0.6.0/ml5.min.js"></script>

Installing ml5.js via npm

If you prefer to use a module bundler like Webpack or Parcel, you can install ml5.js via npm:

npm install ml5

Additionally, since ml5.js relies on TensorFlow.js, you need to install it as well:

npm install @tensorflow/tfjs

Image Classification

Image classification involves identifying objects or features within an image. ml5.js provides a simple interface to use pre-trained models like MobileNet for this purpose.

let classifier;

function setup() {
  classifier = ml5.imageClassifier('MobileNet', modelReady);
}

function modelReady() {
  classifier.classify(image, gotResult);
}

function gotResult(error, results) {
  if (error) {
    console.error(error);
  } else {
    console.log(results);
  }
}

Pose Estimation

Pose estimation detects human body parts and their positions within an image or video stream. ml5.js uses the PoseNet model for this task.

let poseNet;

function setup() {
  poseNet = ml5.poseNet(video, modelReady);
  poseNet.on('pose', gotPoses);
}

function modelReady() {
  console.log('Model Loaded!');
}

function gotPoses(poses) {
  console.log(poses);
}

Text Generation

Text generation involves creating new text based on the patterns learned from a given dataset. ml5.js provides access to pre-trained models for text generation.

let rnn;

function setup() {
  rnn = ml5.charRNN('models/shakespeare/', modelReady);
}

function modelReady() {
  rnn.generate({ seed: 'To be or not to be', length: 50, temperature: 0.5 }, gotData);
}

function gotData(err, result) {
  console.log(result);
}

Style Transfer

Style transfer allows you to apply the artistic style of one image to another. ml5.js provides an easy interface for this using pre-trained models.

let styleTransfer;

function setup() {
  styleTransfer = ml5.styleTransfer('models/wave', video, modelReady);
}

function modelReady() {
  styleTransfer.transfer(gotResult);
}

function gotResult(err, result) {
  image(result.image, 0, 0);
}

Example: Image Classification

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>ml5.js imageClassifier Example</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
    <script src=
"https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <script>
        // Initialize the Image Classifier method 
      // with MobileNet. A callback needs to be passed.
        let classifier;

        // A variable to hold the image we want to classify
        let img;

        // Variables for displaying the results on the canvas
        let label = "";
        let confidence = "";

        function preload() {
            // Using a CORS proxy to load the model
            const proxyUrl = 
'https://cors-anywhere.herokuapp.com/';
            const modelUrl = 
'https://tfhub.dev/google/imagenet/mobilenet_v2_100_224/classification/2';
            classifier = ml5.imageClassifier(proxyUrl + modelUrl);
            img = loadImage(
"https://media.geeksforgeeks.org/wp-content/uploads/20240724195728/gfgLogo.jpeg");
        }

        function setup() {
            createCanvas(400, 400);
            image(img, 0, 0, width, height);
            classifier.classify(img, gotResult);
        }

        // Callback function for when classification has finished
        function gotResult(error, results) {
            if (error) {
                console.error(error);
                return;
            }

            // The results are in an array ordered by confidence
            console.log(results);

            // Display the results on the canvas
            fill(255);
            stroke(0);
            textSize(18);
            label = "Label: " + results[0].label;
            confidence = "Confidence: " + nf(results[0].confidence, 0, 2);
            text(label, 10, 360);
            text(confidence, 10, 380);
        }
    </script>
</body>

</html>

Output:

Conclusion

ml5.js is a powerful and user-friendly library that makes integrating machine learning into web applications straightforward. Whether you're working on image classification, pose estimation, text generation, or style transfer, ml5.js provides the tools you need to bring machine learning capabilities to your projects with minimal effort. By following the installation steps and examples provided in this article, you can quickly get started and explore the vast possibilities of machine learning in the browse.