How to Integrate Tensorflow Model in Angular Application?
The code that accompanies this article can be downloaded here.
A couple of months ago we investigated parts of TensorFlow's ecosystem beyond standard library. To be more precise, we investigated TensorFlow.js and how you can build and train models in the browser and/or in the Node.js. However, we didn't cover one important topic - integration. In this article, we will try to explain what happens when you have a neural network built and trained using TensorFlow and Python, and you have to integrate it in one Angular application.
This article should emphasize how processes of building any machine learning model differ from the developing of application that utilizes this model. However, it also reveals mutual points and provides further evidence of how data scientists and software developers should work closely together if they want to create a great product. Let's describe the application we want to build.
MNIST TensorFlow/Angular Application
What we want to do is create an application in which a user can write down a number in some sort of canvas on the web page, and the application will recognize which number is written. For that purpose, we will use the MNIST data set. This dataset is 'Hello World' example in the world of Machine Learning. It contains 60000 images of handwritten digits. The images are centered and all of them are the same size - 28x28. This means that additional processing of these images should be minimal. Another cool thing about this data set is that it is available as a part TensorFlow library.
MNIST Data Set Samples
Since we are working with images, we need to use Convolutional Neural Networks for this solution. You can find more on the theory of this type of neural networks here. In a nutshell, they are using several layers to detect features on the images and then they use traditional feed-forward neural networks to classify images based on those features. Detection of the features of the image is done by convolutional layers.
These layers first detect out low-level features, like edges and curves, and after that they detect higher level features, like a face, or a hand, or in our case, hand-written digit. After that is done Convolutional Neural Networks use additional layers to remove linearity from the image, something that could cause overfitting. When linearity is removed, additional layers for compressing the image and flattening the data are used. Finally, this information is passed into a neural network, called Fully-Connected Layer in the world of Convolutional Neural Networks.
Structure of Convolutional Nerual Networks
We want to save a newly created model and use it inside of a well known JavaScript framework - Angular. As you can see, the aim of this blog post is to walk you through several technologies and more importantly through several parts of TensorFlow ecosystem. In this journey, we will use TensorFlow, TensorFlow.js, Python, TypeScript, and Angular. Sounds exciting, doesn't it?!
Prerequisites
Let’s first install all the necessities for this blog post. For building and training Neural Network we have to install Python 3, our local machine. To be more specific, in this example we are using Python 3.7. The easiest way to do that is to use Anaconda distribution. It comes with Jupyter Notebook IDE as well. The implementation is done by using TensorFlow 2.0 library. The complete guide on how to install and use Tensorflow 2.0 can be found here. Apart from that, we need to install Tensoflow.js for the Python end. Soon it will be revealed why we have to do this, but for now, make sure you have run the command:
pip install tensorflowjs
The second section of this article requires installing Node.js. Node.js provides a non-blocking event-driven system for our applications, and it is one of the fastest growing technologies at the moment. Its asynchronous mechanism gives us the ability to handle complex web scenarios more easily. Apart from that, it has its own packaging ecosystem npm. Though this ecosystem we can install other libraries that will be used in this example. The first one should be TensorFlow.js. This is how it can be done:
