Building Angular Application using Tenserflow AI

Nowadays the trend of building a web application is by adopting the AI Algorithm.  Decision making is possible for users through the guidance of AI.

Nowadays  AI  chat-bots has made user experience and engagement of conversation to a whole new level  

by making the Response more engaging and responsive by adapting the user conversation

So how we are going to implement Artificial intelligence with angular? Because there are literally too many ways to achieve this.

We can call a service 

1. We can either use the created AI models upload it on the server and can be used by making HTTP requests in our Angular services so we can use the benefits of the AI  
2. Or we can buy the services from AWS or Azure pre-trained models and can be included in the Angular application. But there are Some issues which can cause on the server-side
3. The server will cause a lot of lots of cost for each call which can cause a lot of lots of money either you have built  the AI model from AWS or your own model from your own server

Obviously, data is being sent back and forth to the server so there must be a latency problem and can cause some security problem as well.

WebGL

Google Chrome and firefox are some modern customizable browsers, which allow you to change many settings. WebGL   (Web Graphics Library) is One of the options that you can choose to enable.  WebGL is a JavaScript API that supports you to provide 3D and 2D processor inside your browser.

So to avoid all the issues we use a web ML/AI which cuts down all the issues and so to achieve this We use a framework called TenserFlow.js

Artificial intelligence using TensorFlow.js

TensorFlow literally work on the web browser using javascript as a language to eliminate all the extra difficulties and issues cause while using custom or purchased.

AI model we can create or use a pre-designed model in our browser.TensorFlow is one of the most powerful AI frameworks.  
 

How to Use Angular with TenserFlow.js

First, we need an application to work on the web. Simply, I will be handling the Angular CLI to create an application

Step 1 - Create an Angular Cli Application

npm install -g @angular/cli
ng new tensorflowApp

Step 2 - Connect or Install Tensorflow.js

cd tensorflowApp
npm install @tensorflow/tfjs --save

Step 3 - Exercise a Fundamental TensorFlow.js Linear Model

In the subsequent section, we  will discuss how to create, train, and get predictions with TensorFlow.js. this model is a  linear regression  that takes a 1-D  value as its input and attempts to fit a straight line to the dataset.

 After the model is trained, we will allow the user to fill a form input that will make a new prediction when the value changes.

Step 3 - Import TensorFlow.js

Here we will be writing all the code in app.component.ts. Notice how we are calling the train() function when the component is completely initialized.

import { Component, OnInit } from '@angular/core';
import * as tf from '@tensorflow/tfjs';

@Component({...})
export class AppComponent implements OnInit {

  linearModel: tf.Sequential;
  prediction: any;

  ngOnInit() {
    this.train();
  }


  async train() {
    // todo
  }

  predict(val) {
    // todo
  }

Step 4 - Build a Machine Learning Model 

ML  models are trained by iterating over batches of samples and step by step optimizing the predictions. Most networks use some variety of slope relationship as an optimizer - we're using Stochastic Gradient Descent (SGD) to reduce the Mean Squared Error (MSE). This is a remarkably complicated region.

async train(): Promise<any> {
      // Define a model for linear regression.
    this.linearModel = tf.sequential();
    this.linearModel.add(tf.layers.dense({units: 1, inputShape: [1]}));

    // Prepare and trained the model: Focusing on the loss and optimizer.
    this.linearModel.compile({loss: 'meanSquaredError', optimizer: 'sgd'});


    // Training data, completely random stuff
    const xs = tf.tensor1d([3.2, 4.4, 5.5]);
    const ys = tf.tensor1d([1.6, 2.7, 3.5]);


    // Train
    await this.linearModel.fit(xs, ys)

    console.log('model trained!')
  }

Now, what is tensor you may ask? All we can assume that`Tensor === Array`. It's really just an abstraction of a multi-dimensional array for doing mathematical in TensorFlow.js.

Step 5 - Now Predict with the Model  

Now that our model is trained to perform the task, we can supply it different values to make predictions. TensorFlow operates in the context of a session, so we require to call  data sync  on the Tensor value to extract the data out into something usable in JavaScript.

predict(val: number) {
  const output = this.linearModel.predict(tf.tensor2d([val], [1, 1])) as any;
  this.prediction = Array.from(output.dataSync())[0]
}

Now we can run this method as an event handler when the form input changes.

TensorFlow says {{ prediction }}

<input type="number" (change)="predict($event.target.value)">

How to use Pre-Trained Python Keras Models 

Training an AI model can be remarkably CPU and memory intensive - that is why most Ai models are trained on High-performance GPU  that can scatter billions of mathematical matrix multiplication processes efficiently.

Luckily, we can use pre-trained models to bypass this step completely (that's where we use Tensorflow.js). This means we can skip straight to the main part which is - making predictions. You can find models for a sorts of different applications on Kaggle kernel.

In the actions underneath, we will transform a Keras-based Convolutional Neural Network into a model that predicts the state of a handwritten digit from the traditional MNIST dataset
 

Step 6 - Transform a Keras Model to TensorFlow.js

TensorFlow.js holds a Python CLI tool that transforms a model stored in Keras to set files that can be handled on the web. Install it by running:

pip install tensorflowjs

At this point, you will need to have a Keras model saved on your local system as shown below. run the command below to generate the model.

tensorflowjs_converter --input_format keras \
                       keras/cnn.h5 \
                       src/assets

Currently, we are saving the output in the assets folder of the Angular app, but it can also read by URL, which means you can upload the model on cloud storage bucket as well.

Step 7 - Load the Model 

Now we will load our model as shown below

 async loadModel() {
    this.model = await tf.loadModel('/assets/model.json');
  }

Step 8 - Make Predictions from Image Data 

Now that our model is loaded successfully, now it is expecting a 4-D image data in a shape of [any, 28, 28, 1]  Or in simple words think about it is just as an array of images with a single colour.

We run our predictions inside of tf.tidy. to clean up the intermediate memory allocated to the tensors.for the memory leaks.

TensorFlow.js gives us a fromPixels helper which is a builtin functionality to convert an image data of HTML object into a Tensor. You can also use HTMLImageElement or even a video. what it does is Under the hood it turns the pixels into a 3D matrix of numbers.

async predict(imageData: ImageData) {

    await tf.tidy(() => {

      // Convert the canvas pixels to a Tensor of the matching shape of image
      let img = tf.fromPixels(imageData, 1);
      img = img.reshape([1, 28, 28, 1]);
      img = tf.cast(img, 'float32');

      // Make and format the predications
      const output = this.model.predict(img) as any;

      // Save predictions on the component
      this.predictions = Array.from(output.dataSync()); 
    });

  }

The result of this method is 10 values array that add up to a total of 1, which is a prediction function known as softmax. We can use the index with the highest probability as the prediction for the digit.

Given the prediction below,are the model interprets the image drawn on the canvas is a value of 2 with 93% confidence.
 

[0.02, 0.003, 0.93, ...]