Learn to use powerful machine learning technology in 5 minutes

Image classification using machine learning is easier than you thought. Ml5.js makes machine learning accessible and easy to learn. Using the ml5.js library, getting your first machine learning program up and running is fast and only requires a few lines of code.

Our project is going to use ml5.js, p5.js, and an npm package called live-server.

Setup your project:

• Create a folder to contain your project.
• Create two files inside of the folder. A sketch.js file and an index.html file.

index.html:

• Inside of your index.html file, we create a basic HTML skeleton
• We then put the CDN link to ml5.js and p5.js in the header. This will allow us to use both of those libraries in our sketch.js program.
• Now, we put the file path to our sketch.js file in the body.

sketch.js:

• We start the sketch by creating a setup function. The setup function is from p5.js and will automatically run when the browser window loads.
• At the top of the sketch declare two variables: model and image. We will assign them values in the setup function.
• Inside the setup function, assign our image variable to a new image using the createImg function from p5. This is the image that we will tell ml5.js to classify.
• Now we can download an image of an object or animal (the algorithm doesn’t work with people) that you want to use and place it in your project folder.
• Next, we assign the model variable to a new ml5 imageClassifier object with the first parameter set to the model we want the image classifier to use. In this case, we are using MobileNet. The second parameter is a callback that runs after our model has loaded. We will write this callback function next. For now, give it a name.

• Now we create the callback function. I named mine modelReady.
• In modelReady we will console log a message saying that the model has loaded.
• We will also call model.classify with parameters of our image and a callback. This tells ml5 to compare the image to the model and find patterns that match. The results of this comparison are then sent to the callback function gotResults.

• We can now create the got results function. Since ml5 uses error first callbacks the error is the first parameter of our function and the results of the comparison are the second parameter.
• Inside gotResults, we use an if statement to check for an error. If an error is encountered, it is logged to the console. If no error is present then we log the results to the console and use p5’s createP function to create a paragraph tag on the page with the first item of our results as its value.

• Your sketch.js file should now look like this:

Testing:

• Now that our project is finished we need to run our project using live-server.
• To install live-server open your terminal and type: “node”

• If you get an error instead of a welcome message then you need to install node.js. You can do that here: https://nodejs.org/en/. Download the LTS version, run it, and follow the prompts to install.
• Once node.js is installed, install the live-server npm package by running: “npm install -g live-server” in the terminal.
• Now that live server is installed you can run your project by navigating to your project folder and running: “live-terminal.”
• When the model loads, “Model is ready” should be logged to the console and some text should appear below the image with the image’s results.

Once you have the program working try and improve it by adding image upload functionality or some CSS to make it look better.