Machine learning: TensorFlow with Angular

2 min readOct 13, 2018

With TensorFlow JS, running machine learning programs entirely client-side in the browser is easy.

I came across tutorial on angularfirebase.com explaining about how to build ML model and integrate in browser using Angular.
Ref: https://angularfirebase.com/lessons/tensorflow-js-quick-start/

Here is an attempt to simplify how to integrate machine learning model in Angular application.

Demo: https://dhormale.github.io/angular-tensorFlow-integration/

There are tons of successful Python-based models that you can load into the browser and start running predictions with minimal code.

Below code imports an MNIST ConvNet trained in Keras Python, then makes predictions with TensorFlow.js on Angular application

Step 1: Install tensorflow js

$ npm install @tensorflow/tfjs -- save

Step 2: Add ML model in assets folder

How to generate ML model files:
TensorFlow.js has a Python CLI tool that converts an h5 model saved in Keras to a set files that can be used on the web.
To convert such file to TF.js Layers format, run the following command.

$ pip install tensorflowjs$ tensorflowjs_converter --input_format keras \
                       keras/cnn.h5 \
                       src/assets

Step 3: Load model on init

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

Step 4: Add canvas to capture image. Add predict event to it.

<div class="wrapper">
   <canvas drawable (newImage)="predict($event)"></canvas>
</div>

Step 5: On predict event convert canvas to image and TensorFlow model will predict number from image.

predict(imageData: ImageData) {
   const pred = await tf.tidy(() => {      // Convert the canvas pixels to
      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());
   }
});
}

Complete source code is at: https://github.com/dhormale/angular-tensorFlow-integration

Ref:

Digit Recognizer data: https://www.kaggle.com/c/digit-recognizer

Machine Learning Crash Course with TensorFlow APIs:
https://developers.google.com/machine-learning/crash-course/

If you found this tutorial useful, hit that clap button :)

Machine learning: TensorFlow with Angular

Written by Dhormale