by ADL

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

0*UM0vZhOyk06pdmVT
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:

1*v7x4TywHpUsEO8yQ4eu8xA
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.

1*_TUuwX9jKmLx8O6NmHD7bA
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
1*Mf-8wFjGxWba4k9wN_ArUw
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.

1*yhJuZPtxeGCp1xgZTtA89Q

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.

1*VUIUWALn0J5V9vRZc8yerA
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:

1*K7jbNlFYiRdnITT06kBFrg

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:

ADLsourceCode/TensorflowJS
GitHub is where people build software. More than 28 million people use GitHub to discover, fork, and contribute to over…github.com

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

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 & :

1*z8B3R6kZjTkMKPv3MnUYxg
1*-etmF1WRWkvWO6cSol7f1w
1*7DWddirTA0TDNoAL34xjag

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 .