Image Source We will build a deep neural network that can recognize images with an high accuracy on the Client side using & TensorFlow.js while explaining the techniques used throughout the process. JavaScript Read the below article to get a fresher on TensorFlow.js :- _And learn how you can run ML/DL models directly in the browser_medium.freecodecamp.org Get to know TensorFlow.js in 7 minutes 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 & folder shall contain all the server code and static will have all the CSS , HTML & JS code. localserver static. localserver NodeJS Screenshot Showing the Folder structure Note : you can name the folders and file as per your choice. Configuration**:** Server We will manually create a file with the below code :- package.json { "name": "tensorflowjs", "version": "1.0.0", "dependencies": { "express": "latest" }} file keep a note of all the 3rd party packages which we will use in this project.After saving the file, We will open the command line & in the Command line , we will navigate to the folder and will execute :- package.json package.json localserver npm install Command Line for MacOS Doing so, NPM will execute and ensure that all the required packages mentioned in are installed and are ready to use.You will observer a folder in the package.json node_modules localserver Folder. We will create a file with the below Code :- server.js contains the NodeJS code which allows a local server to be hosted on which our WebApp runs. server.js Client Configuration : Next we will create a .Below is the Code for the same:- predict_with_tfjs.html predict_with_tfjs.html Once the HTML code is done, We will create JavaScript file and call it .Below is the code :- predict.js 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 inside the folder.This file contain a list of all the ImageNet Classes. imagenet_classes.js static 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 folder execute : localserver 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 .If the Client side code is bug free, The Application would start and the model will start loading up Automatically. http://localhost:8080/predict_with_tfjs.html Once the Model Loads up … You can do the . Prediction My Next Post will Cover using Tensorflow.js… . Financial Time Series analysis Stay Tuned GitHub Repository for the project :- _GitHub is where people build software. More than 28 million people use GitHub to discover, fork, and contribute to over…_github.com ADLsourceCode/TensorflowJS You can watch the complete code explanation and implementation in the below video:- Source : ADL Best of Luck ! 👍 .If you have any questions, please let me know in a comment below or . Subscribe to my YouTube Channel For More Tech videos : . Thanks For Reading Twitter ADL
