How to use the VGG16 neural network and MobileNet with TensorFlow.js



Photo by Artem Sapegin on Unsplash

In this article, we will build a deep neural network that can recognize images with a high accuracy on the Client side using JavaScript & TensorFlow.js. I’ll explain the techniques used throughout the process as we go along.We will be using VGG16 and MobileNet for the sake of the demo.

If you need a quick refresher on TensorFlow.js, read this article.

Below is a screenshot of what the final web app will look like:

Final Web App

To start off, we will create a folder (VGG16_Keras_To_TensorflowJS) with two sub folders: localserver and static. The localserver folder shall contain all the server NodeJS code, and the static folder will have all the CSS, HTML, and JavaScript code.

Screenshot Showing the Folder structure

Note : you can name the folders and file whatever you like.

Server Configuration

We will manually create a package.json file with the below code:

{
"name": "tensorflowjs",
"version": "1.0.0",
"dependencies": {
"express": "latest"
}}

The package.json file keeps track of all the 3rd party packages which we will use in this project. After saving the package.json file, we will open the command line and in it we will navigate to the localserver folder. Then we will execute the following:

npm install
Command Line for MacOS

After doing so, NPM will execute and ensure that all the required packages mentioned in package.json are installed and are ready to use. You will observe a node_modules folder in the localserver folder.

We will create a server.js file with the below code:

server.js contains the NodeJS code which allows the local server to be hosted which will run our WebApp.

Client Configuration

Next we will create a predict_with_tfjs.html. Below is the code:

Once the HTML code is done, we will create a JavaScript file and call it predict.js. Below is the code:

Model Configuration

Once the client and server side code is complete, we now need a DL/ML model to predict the images.We export the trained model (VGG16 and Mobile net) from Keras to TensorFlow.js. Save the output in folders called VGG and Mobile net, respectively, inside the static folder.

ScreenShot for Python

Defining the Classes

We will keep imagenet_classes.js inside the static folder. This file contains a list of all the ImageNet classes. You can Download this file from here.

Testing the Code

After all the setup is done, we will open up the command line and navigate to the localserver folder and execute:

node server.js

We should see the below output:

After the successful implementation of server side code, we can now go to the browser and open http://localhost:8080/predict_with_tfjs.html.
If the client side code is bug free, the application will start. Then you can select a different model (VGG16 and mobile Net) from the selection box and do the prediction.

GitHub Repository for the project:

You can watch the complete code explanation and implementation in the below video:

Source : ADL # Video no 1
Source : ADL # Video no 2

My Next Post will Cover Financial Time Series analysis using Tensorflow.js…Stay Tuned.

Best of Luck ! 👍


If you liked my article, please click the 👏 below And follow me on Medium & :

If you have any questions, please let me know in a comment below or Twitter. Subscribe to my YouTube Channel For More Tech videos : ADL .

Source: Deep Learning on Medium