Read the below article to get a fresher on TensorFlow.js :-
Below is the screenshot which the Final Web App will Look like :
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.
Note : you can name the folders and file as per your choice.
We will manually create a package.json file with the below code :-
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 :-
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.
Next we will create a predict_with_tfjs.html.Below is the Code for the same:-
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.
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.
After all the setup is done, We will open up the command line and navigate to the localserver folder execute :
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 :-
You can watch the complete code explanation and implementation in the below video:-
Best of Luck ! 👍