How to use the VGG16 neural network and MobileNet with TensorFlow.js
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:
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.
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
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.
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.jsWe 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:
My Next Post will Cover Financial Time Series analysis using Tensorflow.js…Stay Tuned.
Best of Luck ! 👍
