TensorFlow.js – Building the UI for neural network web app



Now that we have Express set up to host a web app for us, let’s start building one! In this video, we’re going to begin building our first client-side neural network application using TensorFlow.js.

With this app, a user will select an image, submit it to the model, and get a prediction. We won’t be restricted to choosing only cat and dog images this time though because we won’t be using fine-tuned models this time.

We’ll be using original pre-trained models (VGG16 and MobileNet) that were trained on ImageNet, so we’ll have a much wider variety of images we can choose from. Once we submit our selected image to the model, the app will give us back the top five predictions for that image from the ImageNet classes.

imagenet_classes.js:
https://github.com/tensorflow/tfjs-examples/blob/master/mobilenet/imagenet_classes.js

?? DEEPLIZARD COMMUNITY RESOURCES ??

? OUR VLOG:
? https://www.youtube.com/channel/UC9cBIteC3u7Ee6bzeOcl_Og

? Check out the blog post and other resources for this video:
? https://deeplizard.com/learn/video/vCPLK8I3-I0

? DOWNLOAD ACCESS TO CODE FILES
? Available for members of the deeplizard hivemind:
? https://www.patreon.com/posts/27743395

? Support collective intelligence, join the deeplizard hivemind:
? https://deeplizard.com/hivemind

? Support collective intelligence, create a quiz question for this video:
? https://deeplizard.com/create-quiz-question

? Boost collective intelligence by sharing this video on social media!

❤️? Special thanks to the following polymaths of the deeplizard hivemind:
yasser
Prash

? Follow deeplizard:
Our vlog: https://www.youtube.com/channel/UC9cBIteC3u7Ee6bzeOcl_Og
Twitter: https://twitter.com/deeplizard
Facebook: https://www.facebook.com/Deeplizard-145413762948316
Patreon: https://www.patreon.com/deeplizard
YouTube: https://www.youtube.com/deeplizard
Instagram: https://www.instagram.com/deeplizard/

? Other deeplizard courses:
Reinforcement Learning – https://deeplizard.com/learn/playlist/PLZbbT5o_s2xoWNVdDudn51XM8lOuZ_Njv
NN Programming – https://deeplizard.com/learn/playlist/PLZbbT5o_s2xrfNyHZsM6ufI0iZENK9xgG
DL Fundamentals – https://deeplizard.com/learn/playlist/PLZbbT5o_s2xq7LwI2y8_QtvuXZedL6tQU
Keras – https://deeplizard.com/learn/playlist/PLZbbT5o_s2xrwRnXk_yCPtnqqo4_u2YGL
TensorFlow.js – https://deeplizard.com/learn/playlist/PLZbbT5o_s2xr83l8w44N_g3pygvajLrJ-
Data Science – https://deeplizard.com/learn/playlist/PLZbbT5o_s2xrth-Cqs_R9-
Trading – https://deeplizard.com/learn/playlist/PLZbbT5o_s2xr17PqeytCKiCD-TJj89rII

? Check out products deeplizard recommends on Amazon:
? https://www.amazon.com/shop/deeplizard

? Get a FREE 30-day Audible trial and 2 FREE audio books using deeplizard’s link:
? https://amzn.to/2yoqWRn

? deeplizard uses music by Kevin MacLeod
? https://www.youtube.com/channel/UCSZXFhRIx6b0dFX3xS8L1yQ
? http://incompetech.com/

❤️ Please use the knowledge gained from deeplizard content for good, not evil.

12 thoughts on “TensorFlow.js – Building the UI for neural network web app”

  1. Tensorflow.js playlist:
    https://www.youtube.com/playlist?list=PLZbbT5o_s2xr83l8w44N_g3pygvajLrJ-
    Machine Learning / Deep Learning Tutorials for Programmers playlist:
    https://www.youtube.com/playlist?list=PLZbbT5o_s2xq7LwI2y8_QtvuXZedL6tQU
    Keras Machine Learning / Deep Learning Tutorial playlist:
    https://www.youtube.com/playlist?list=PLZbbT5o_s2xrwRnXk_yCPtnqqo4_u2YGL
    Data Science for Programming Beginners playlist:
    https://www.youtube.com/playlist?list=PLZbbT5o_s2xo_SRS9wn9OSs_kzA9Jfz8k

    Reply
  2. Unfortunately, my question has only been left unanswered 🙂 Do you mind replying? Many thanks.

    Reply
  3. Awesome post. I followed your tutorials and created a web app for my problem. It works perfectly fine with my standalone models. However, when I try creating an ensemble model (averaging the predictions of two models), save it as a single .h5 file and import the same for prediction, I could see in the terminal that the model weights are loaded but the web app does not respond. Is it because of the averaging happening in the prediction layer? Do we have any issues loading an ensemble model here? Kindly clarify.

    Reply
  4. Node.js, Express.js, Tensorflow.js and Keras, these are my latest passions of interests and this whole series is blowing my mind!! Didn't realize how easy it is to convert a Keras model into a tensorflow.js model. WOW!! Thanks for these videos!

    Reply
  5. Thanks for the great video. For some reason, tf.loadModel is not fetching the model JSON file. I get the following error:
    tfjs@0.11.7:2 GET http://10.0.0.14:81/tfjs-models/VGG16/model.json net::ERR_CONNECTION_REFUSED
    Uncaught (in promise) TypeError: Failed to fetch
    Any idea what could be wrong here? Would appreciate your help

    Reply
  6. please share the source code link please don't say it is mention in the description please give me through the comment

    Reply
  7. You have the perfect tutorials for me, thanks a lot. Btw, have you found a way to load the models into the browser from local storage? Or do you host the models on a http/https server where you later load them from into the browser? I have only made it work by doing it this way.

    Reply

Leave a Comment