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:
Note : you can name the folders and file whatever you like.
We will manually create a package.json file with the below code:
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:
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.
Next we will create a predict_with_tfjs.html. Below is the code:
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:
We 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:
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 ! 👍
Source: Deep Learning on Medium