Classifying Images using TensorFlow.js & Keras

Image Source

We will build a deep neural network that can recognize images with an high accuracy on the Client side using JavaScript & TensorFlow.js while explaining the techniques used throughout the process.

Read the below article to get a fresher on TensorFlow.js :-

Get to know TensorFlow.js in 7 minutes_And learn how you can run ML/DL models directly in the browser_medium.freecodecamp.org

Below is the screenshot which the Final Web App will Look like :

Screenshot of the Web App

To Start of — We will create a folder**(VGG16_Keras_To_TensorflowJS)** with two sub folder localserver & static. localserver folder shall contain all the server NodeJS code and static will have all the CSS , HTML & JS code.

Screenshot Showing the Folder structure

Note : you can name the folders and file as per your choice.

Server Configuration**:**

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

{

"name": "tensorflowjs",

"version": "1.0.0",

"dependencies": {

"express": "latest"

}}

package.json file keep a note 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 & in the Command line , we will navigate to the localserver folder and will execute :-

npm install

Command Line for MacOS

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 observer 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 a local server to be hosted on which our WebApp runs.

Client Configuration :

Next we will create a predict_with_tfjs.html.Below is the Code for the same:-

predict_with_tfjs.html

Once the HTML code is done, We will create 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) from Keras to TensorFlow.js and save the output in folder called VGG inside the static folder.

Screenshort of Jupyter Notebook For Model Conversion

Defining the Classes

We will keep imagenet_classes.js inside the static folder.This file contain 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 execute :

node server.js

We should observer 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 would start and the model will start loading up Automatically.

Once the Model Loads up … You can do the Prediction.

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

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

Source : ADL

Best of Luck ! 👍

Thanks For Reading.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 .