DEV Community


Posted on • Updated on


Create a Simple Image Classifier with ml5js

In this case, I will show you how to create a simple image classifier app with p5js and ml5js.

First, what are p5js and ml5js?

I would say it's Processing for js(Actually there is processing.js).

Here at ITP, most students who don't have any experience of programming start using p5js to learn coding.

ml5js is a wrapper of tensorflowjs, so that allows us to use tensorflowjs easily, but it means that we cannot do everything with ml5js as well as tensorflowjs.

Very simple html. just load libraries.
In terms of ml5js, it has been updated recently, but I haven't updated the code, so this app needs to use v0.2.1.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src=""></script>
    <script src=""></script>
    <script src="./p5.speech.js"></script>
    <script src="" type="text/javascript"></script>
    <script src="./sketch.js"></script>
Enter fullscreen mode Exit fullscreen mode

This app is using MobileNet to classify objects.

let classifier;
let video;
let status = '';
let results = '';
const resultsNum = 5;
const voice = new p5.Speech();

function setup() {
    createCanvas(windowWidth, windowHeight);
    video = createCapture(VIDEO);
    classifier = ml5.imageClassifier('MobileNet',  video, modelReady); status = 'loading...';
function draw () {
    image(video, 0, 0, width, height);
    fill(255, 0, 0);
    text(status, 20, 30);

const modelReady = () => {
    status = 'loaded model!';
    classifier.predict(video, gotResult);

const gotResult = (err, results) => {
    if (err) {
        status = err;
    // console.log(`results: ${results}`);
    status = `class: ${results[0].className}, accuracy: ${results[0].probability.toFixed(4)} \n`;    
    classifier.predict(video, gotResult);

Enter fullscreen mode Exit fullscreen mode


Actually, this application tells you what he detects via camera.

Top comments (0)


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!