Machine learning is a fundamental technology in the modern world. Computers can learn to recognize images, create artwork, and even write their own code, all with minimal human intervention.

But how does machine learning work and how can you use it yourself?

What Is Machine Learning?

Machine learning is a relatively simple concept. Computer systems can learn and adapt by analyzing existing data patterns from pools of information. This is usually done without explicit instructions from humans.

A good example comes in the form of virtual assistant tools. Siri, Cortana, and Google Assistant all make extensive use of machine learning to understand human speech. This starts with a pool of existing audio recordings, but these tools can also learn from the interactions they have with you. This enables them to improve on their own.

What Is ml5.js?

Most machine learning algorithms and tools use R or Python for their code, but ml5.js is different. Acting as an interface for Google's Tensorflow.js library, ml5.js is an open-source project that puts machine learning into the hands of JavaScript developers.

You can start using ml5.js for your own web application by including a single external script in your HTML.

Getting Started With Machine Learning: The Learning Process

Training a machine learning algorithm takes time. Computers learn far faster than humans, but they also learn in different ways. Thankfully, though, ml5.js comes with a selection of pre-trained models so that you can skip this step.

Learning how machine learning algorithms train is a great way to better understand tools like this.

Build an Image-Classifying Tool in JavaScript

image classifier detecting a tiger

ml5.js makes it easy to create an image-classifying tool to run on your website. The HTML page in this example contains a file input field to select an image. Uploaded images display inside a prepared HTML element to enable ml5.js to scan and identify them.

Step 1: Include the ml5.js Library

This project requires two libraries to work: ml5.js and p5.js. ml5.js is the machine learning library, while p5.js makes it possible to work with images properly. You need two lines of HTML to add these libraries:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

Step 2: Create Some HTML Elements

Next, it's time to create some HTML elements. The most important is a div with an ID and class labeled imageResult that will store the final result:

        <h1>MakeUseOf Image Classifier</h1>
 
<h2>Click "Choose File" to Add an Image</h2>
 
<div class="imageResult" id="imageResult"></div>

Following this, add a file input element to collect the image for the program to classify.

        <div class="imageInput">
    <input type="file"
      oninput="uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">
</div>

The input listens for an oninput event and executes two statements in response, separated by a semi-colon. The first creates an object URL for the image, which lets you work with the data without having to upload it to a server. The second calls a startImageScan() function that you will create in the next step.

Finally, add an img element to display the image the user has uploaded:

        <img class="uploadedImage" id="uploadedImage" />
    

Step 3: Create an Image-Scanning JS Function

Now that you have some HTML, it's time to add some JS to the mix. Start by adding a const variable to store the imageResult element you created in the last step.

        const element = document.getElementById("imageResult");
    

Next, add a function called startImageScan() and, inside it, initialize the ml5.js image classifier using MobileNet.

Follow this with the classifier.classify command. Pass it a reference to the uploadedImage element you added earlier, along with a callback function to process the result.

        function startImageScan() {
    // Create a variable to initialize the ml5.js image classifier with MobileNet
    const classifier = ml5.imageClassifier('MobileNet');
    classifier.classify(document.getElementById("uploadedImage"), imageScanResult);
    element.innerHTML = "...";
}

Step 4: Create a Result Display Function

You also need a function to display the results of the image classification you performed. This function contains a simple if statement to check for any errors.

        function imageScanResult(error, results) {
    if (error) {
        element.innerHTML = error;
    } else {
        let num = results[0].confidence * 100;
        element.innerHTML = results[0].label + "
Confidence: " + num.toFixed(0) + "%";
    }
}

Step 5: Put It All Together

Finally, it's time to put all this code together. It's important to be mindful of the <body>, <script>, and <style> tags to make sure that your code works.

        <!DOCTYPE html>
<html>

<head>
    <!-- Include the p5.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
 
    <!-- Include the ml5.js library -->
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
    <style>
    /* Set styles for HTML elements */
    h1, h2 {font-family: arial; text-align: center;}
    .imageInput {width: 100%; text-align: center;}
    .imageResult {font-family: arial; width: 100%; text-align: center; text-transform: uppercase;}
    .uploadedImage {width: 50%; height: auto; margin-left: 25%;}
    </style>
</head>

<body>
<h1>MakeUseOf Image Classifier</h1>
 
<h2>Click "Choose File" to Add an Image</h2>
 
<!-- Container for image classification result -->
<div class="imageResult" id="imageResult"></div>
 
<div class="imageInput">
    <input type="file"
      oninput="uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">
</div>
 
<!-- Container for the uploaded image -->
<img class="uploadedImage" id="uploadedImage" />
 
<script>
// Create a variable containing the result container
const element = document.getElementById("imageResult");
 
function startImageScan() {
    // Create a variable to initialize the ml5.js image classifier with MobileNet
    const classifier = ml5.imageClassifier('MobileNet');
 
    // Scan the uploaded image
    classifier.classify(document.getElementById("uploadedImage"), imageScanResult);
    element.innerHTML = "...";
}
 
// Check for errors and display the results if there aren't any
function imageScanResult(error, results) {
    if (error) {
        element.innerHTML = error;
    } else {
        let num = results[0].confidence * 100;
        element.innerHTML = results[0].label + "
Confidence: " + num.toFixed(0) + "%";
    }
}
</script>

</body>

</html>

Now you can test your script with some images! ml5.js is great at classifying images of animals, like this cricket.

image classifier detecting a cricket

Unfortunately, the library can struggle when it comes to images with greater complexity. A lot of mobile devices come with this sort of technology built-in to work with the device's camera. Image classification is less than perfect on iPhones and Android phones, with a reputation for inaccuracies. But, this is something that will only improve with time, making it worth using the latest version of ml5.js for your project.

Machine Learning: The Future of Computing

As you can see, working with machine learning tools in JavaScript is easier than you might expect. This type of technology is likely to be the future of computing, with ideas like strong AI relying on it to work.