Davide Andreazzini

Using tensorflow-models/mobilenet for image recognition

May 12, 2019

Here is a simple tutorial on how to use the mobilenet model released by google with tensorflow-js.

This tutorial requires node v >10 and the parcel bundler.
To install node use nvm https://github.com/nvm-sh/nvm
and to install parcel just run npm -i g parcel-bundler

step 1

create a project dir

mkdir mobilenet &&
cd mobilenet &&
npm init &&
npm i -s @tensorflow/tfjs @tensorflow-models/mobilenet

step 2

create an index.html file with the following content

<html>
<head>
<title>Mobilenet test</title>
</head>
<body>
    <pre id="console"></pre>
    <video autoplay playsinline muted id="webcam" width="224" height="224"></video>
    <script src="main.js"></script>
</body>

</html>

step 3

create a 'main.js' file with the following content

import * as tf from "@tensorflow/tfjs"
import * as mobilenet from "@tensorflow-models/mobilenet"

const webcamElement = document.getElementById('webcam');

// this function just load the webcam and set the source
// of the webcamElement as the camera stream
function setupWebcam() {
    return new Promise((resolve, reject) => {
        const navigatorAny = navigator;
        navigator.getUserMedia = navigator.getUserMedia ||
            navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||
            navigatorAny.msGetUserMedia;
        if (navigator.getUserMedia) {
            navigator.getUserMedia({ video: true },
                stream => {
                    webcamElement.srcObject = stream;
                    webcamElement.addEventListener('loadeddata', () => resolve(), false);
                },
                error => reject());
        } else {
            reject();
        }
    });
}

var net
// Load the model.
mobilenet
    .load()
    .then(mnet => {
        // model is loaded
        net = mnet
        console.log('Sucessfully loaded model');
        // setup the webcam
        return setupWebcam();
    }).then(() => {
        // run classification every second
        setInterval(() => {
            net.classify(webcamElement)
                .then(result => {
                    // write out the result JSON in the pre elem with id console
                    document.getElementById("console").innerText = JSON.stringify(result, "", "\t")
                })
        }, 1000)

    })

step 4

start serving the page using parcel

parcel index.html

step 5

navigate to http://localost:1234 to view the result ...
mobilenet will be activated on the output of your webcam so try to show different objects to see the result.

Bonus

here is a working version of the code, make sure to have your webcam enabled.

In the next article I will show how to use the tensorflow-js c





                

                  
Tags

                  
    
                  

                

            

          

        

          
        

          

            

              
                  

              
            

            

              

                davide
              

              
    
              

            

          

        

          

            

              
        
    
            

          

            

              

                
Recommended for you