Goalist Developers Blog

Scan documents using OpenCV python

こんにちは、 ゴーリストのビベックです。 Hello World! This is Vivek from Goalist.

In this blog post, let's play around OpenCV library and write our own python script to scan documents like receipts, business cards, pages of book etc.


For those who are not aware of OpenCV, let's quickly answer a few questions about this library

What is OpenCV?
OpenCV (Open Source Computer Vision) is a library of programming functions mainly aimed at real-time computer vision. The library is cross-platform and free for use under the open-source BSD license. OpenCV supports the deep learning frameworks TensorFlow, PyTorch, and Caffe.

What OpenCV can do?
1. Read and Write Images
2. Detection of faces and its features
3. Detection of shapes like Circle, rectangle etc in an image
4. Text recognition in images
5. Modifying image quality and colors
6. Developing Augmented reality apps
and much more.....

Which Languages does OpenCV support?
1. C++
2. Python
3. Java
4. Matlab/Octave
5. C
6. There are wrappers in other languages like Javascript, C#, Perl, Haskell, and Ruby to encourage adoption by a wider audience.

The initial version of OpenCV was released in June 2000, that does mean; (at the time of writing this post) it's almost 19 years this library is in use.

Some papers also highlight the fact that OpenCV was built to provide a common infrastructure for computer vision applications and to accelerate the use of machine perception in commercial products.

So let's get started and let's see what we can build with it...

Step 1: Setting up the environement

We will be using Python 3 for our project, so, ensure that you have Python version 3 as your development environment.
You may refer the following link to set up Python on your machine.


Step 2: Gather required packages

We will be needing following packages in our project
1) Pre-built OpenCV packages for Python

2) For Array computation

3) For applying filters to image (image processing)

4) Utility package for image manupulation

Step 3: Let's make it work

Import the installed packages into your python script

import cv2 # opencv-python
import numpy as np
from skimage.filters import threshold_local # scikit-image
import imutils

Read the image to be scanned into your script by using OpenCV's imread() function.

We are going to perform edge detection on the input image hence in order to increase accuracy in edge detection phase we may want to resize the image. So, compute the ratio of the old height to the new height and resize() it using imutils

Also keep the cloned copy of original_image for later use

# read the input image
image = cv2.imread("test_image.jpg")

# clone the original image
original_image = image.copy()

# resize using ratio (old height to the new height)
ratio = image.shape[0] / 500.0
image = imutils.resize(image, height=500)

Generally paper (edges, at least) is white so you may have better luck by going to a different color space like YUV which better separates luminosity. (Read more about this here YUV - Wikipedia )
In order to change the color space of the input image use OpenCV's cvtColor() function.
From YUV image let's get rid of chrominance {color} (UV) components and only use luma {black-and-white} (Y) component for further proccesing.

#  change the color space to YUV
image_yuv = cv2.cvtColor(image, cv2.COLOR_BGR2YUV)

# grap only the Y component
image_y = np.zeros(image_yuv.shape[0:2], np.uint8)
image_y[:, :] = image_yuv[:, :, 0]


The text on the paper is another problem while detecting edges so let's use blurring effect GaussianBlur(), to remove these high-frequency noises (hopefully to some extent)

# blur the image to reduce high frequency noises
image_blurred = cv2.GaussianBlur(image_y, (3, 3), 0)

It's time to detect edges in our input image.
Use Canny() function to detect edges. You may have to tweak threshold parameters of this function in order to get the desired output.

# find edges in the image
edges = cv2.Canny(image_blurred, 50, 200, apertureSize=3)


Now that we have detected edges in our input image let's find contours around the edges and draw it on the original image

# find contours
contours, hierarchy = cv2.findContours(edges, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)

# draw all contours on the original image
cv2.drawContours(image, contours, -1, (0, 255, 0), 1)
# !! Attention !! Do not draw contours on the image at this point
# I have drawn all the contours just to show below image


Now that we should have a bunch of contours with us, it's time to find the right ones.
For each contour cnt, first, find the Convex Hull (Convex hull - Wikipedia), then use approaxPolyDP to simplify the contour as much as possible.

# to collect all the detected polygons
polygons = []

# loop over the contours
for cnt in contours:
    # find the convex hull
    hull = cv2.convexHull(cnt)
    # compute the approx polygon and put it into polygons
    polygons.append(cv2.approxPolyDP(hull, 0.01 * cv2.arcLength(hull, True), False))

Sort the detected polygons in the descending order of contour area so that we will get a polygon with the largest areas found inside the image

# sort polygons in desc order of contour area
sortedPoly = sorted(polygons, key=cv2.contourArea, reverse=True)

# draw points of the intersection of only the largest polyogon with red color
cv2.drawContours(image, sortedPoly[0], -1, (0, 0, 255), 5)


We now check if the largest detected polygon has four points.
If the polygon has four points congratulations we have detected four corners of the document in the image.

It's time to crop the image and transform the perspective of the image with respect to these four points

# get the contours of the largest polygon in the image
simplified_cnt = sortedPoly[0]

# check if the polygon has four point
if len(simplified_cnt) == 4:
    # trasform the prospective of original image
    cropped_image = four_point_transform(original_image, simplified_cnt.reshape(4, 2) * ratio)

Refer the following to get to know about four_point_transform() function in detail.

Finally binarize the image to have scanned version of the cropped image

# Binarize the cropped image
gray_image = cv2.cvtColor(cropped_image, cv2.COLOR_BGR2GRAY)
T = threshold_local(gray_image, 11, offset=10, method="gaussian")
binarized_image = (gray_image > T).astype("uint8") * 255

# Show images
cv2.imshow("Original", original_image)
cv2.imshow("Scanned", binarized_image)
cv2.imshow("Cropped", cropped_image)


🎉There we go... we just managed to scan a document from a raw image with the help of OpenCV.

That's all for this post see you soon with one of such next time; until then,
Happy Learning :)


チナパです! 早速ですが、A few useful things to know about machine learning - Pedro Domingos


f の続きをしたいと思います!以前、この論文にまとめられてる分類器の3つの部分(表現、評価、改善)について書きましたので、気になる方はこちらで読んでみてください!




















Round 1:いくつかのフィーチャを使って、学習させます。 結果:テストしたら40%なので、もっかい!

Round 2:フィーチャをちょっと改善して、新しいのを作成し、学習させます。 結果:テストしたら41%なので、もっかい!

Round 3:モデルをちょっと変換して、フィーチャも編集して、学習させます。 結果:テストしたら50%なのでよし、がもっかい!


Round 21:何回も何回もモデルとフィーチャーを編集して、学習させました。 結果:テストしたら93%なのでやった!90%以上だし、すごい!















学習して→クロスバリデーションデータで評価しましょう。 何度も編集しても、このクロスバリデーションに対しての評価が高くなっていっても、まだ一度も利用されてないテストデータが残ってます。














Business Card Reader : Part 2 : Frontend (Ionic App)

Hello World! My name is Vivek Amilkanthawar
In the last blog post, we had written cloud function for our Business Card Reader app to do the heavy lifting of text recognition and storing the result into database by using Firebase, Google Cloud Vision API and Google Natural Language API.

We had broken down the entire process into the following steps.
1) User uploads an image to Firebase storage via @angular/fire in Ionic.
2) The upload triggers a storage cloud function.
3) The cloud function sends the image to the Cloud Vision API
4) Result of image analysis is then sent to Cloud Language API and the final results are saved in Firestore.
5) The final result is then updated in realtime in the Ionic UI.

Out of these, step #2, step #3 and step #4 are explained in last blog post
If you have missed the last post, you can find it here...


In this blog post, we'll be working on the frontend to create an Ionic app for iOS and Android (step #1 and step #5)

The final app will look something like on iOS platform


So let's get started

Step 1: Create and initialize an Ionic project

Let’s generate a new Ionic app using the blank template. I have named my app as meishi (めいし) it means 'business card' in Japanese.

ionic start meishi blank
cd meishi

Making sure you are in the Ionic root director then generate a new page with the following command

ionic g page vision

We'll use the VisionPage as our Ionic root page inside the app.component.ts

import { VisionPage } from '../pages/vision/vision';
  templateUrl: 'app.html'
export class MyApp {
  rootPage:any = VisionPage;
  // ...skipped

Add @angular/fire and firebase dependencies to our Ionic project for communicating with firebase.

npm install @angular/fire firebase --save

Add @ionic-native/camera to use native camera to capture buisness card image for processing.

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

At this point, let's register AngularFire and the native camera plugin in the app.module.ts
(add your own Firebase project credentials in firebaseConfig)

import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {SplashScreen} from '@ionic-native/splash-screen';
import {StatusBar} from '@ionic-native/status-bar';

import {MyApp} from './app.component';
import {HomePage} from '../pages/home/home';
import {VisionPage} from '../pages/vision/vision';

import {AngularFireModule} from '@angular/fire';
import {AngularFirestoreModule} from '@angular/fire/firestore';
import {AngularFireStorageModule} from '@angular/fire/storage';

import {Camera} from '@ionic-native/camera';

const firebaseConfig = {
  apiKey: 'xxxxxx',
  authDomain: 'xxxxxx.firebaseapp.com',
  databaseURL: 'https://xxxxxx.firebaseio.com',
  projectId: 'xxxxxx',
  storageBucket: 'xxxx.appspot.com',
  messagingSenderId: 'xxxxxx',

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
export class AppModule {

Step 2: Let's make it work

There is so much going on in the VisionPage component, let's break it down and see it step by step.

1) User clicks "Capture Image" button which triggerscaptureAndUpload()to bring up the device camera.

2) Camera returns the image as a Base64 string. I have reduced the quality of the image in order to reduce processing time. For me, even with 50% of the image quality, Google Vision API is doing well.

3) We generate an ID that is used for both the image filename and the Firestore document ID.

4) We then listen to this location in Firestore.

5) An upload task is created to transfer the file to storage.

6) We wait for the cloud function (refer my last post) to update Firestore.

7) Once the data is received from Firestore we use helper methods extractEmail() and extractContact() to extract email and contact information from the received string.

8) And it's done!!

import {Component} from '@angular/core';
import {IonicPage, Loading, LoadingController} from 'ionic-angular';

import {Observable} from 'rxjs/Observable';
import {filter, tap} from 'rxjs/operators';

import {AngularFireStorage, AngularFireUploadTask} from 'angularfire2/storage';
import {AngularFirestore} from 'angularfire2/firestore';

import {Camera, CameraOptions} from '@ionic-native/camera';

  selector: 'page-vision',
  templateUrl: 'vision.html',
export class VisionPage {

  // Upload task
  task: AngularFireUploadTask;

  // Firestore data
  result$: Observable<any>;

  loading: Loading;
  image: string;

    private storage: AngularFireStorage,
    private afs: AngularFirestore,
    private camera: Camera,
    private loadingCtrl: LoadingController) {

    this.loading = this.loadingCtrl.create({
      content: 'Running AI vision analysis...',

  startUpload(file: string) {

    // Show loader

    // const timestamp = new Date().getTime().toString();
    const docId = this.afs.createId();

    const path = `${docId}.jpg`;

    // Make a reference to the future location of the firestore document
    const photoRef = this.afs.collection('photos').doc(docId);

    // Firestore observable
    this.result$ = photoRef.valueChanges().pipe(
      filter(data => !!data),
      tap(_ => this.loading.dismiss()),

    // The main task
    this.image = 'data:image/jpg;base64,' + file;
    this.task = this.storage.ref(path).putString(this.image, 'data_url');

  // Gets the pic from the native camera then starts the upload
  async captureAndUpload() {
    const options: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,

    const base64 = await this.camera.getPicture(options);


  extractEmail(str: string) {
    const emailRegex = /(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
    const {matches, cleanedText} = this.removeByRegex(str, emailRegex);
    return matches;

  extractContact(str: string) {
    const contactRegex = /(?:(\+?\d{1,3}) )?(?:([\(]?\d+[\)]?)[ -])?(\d{1,5}[\- ]?\d{1,5})/;
    const {matches, cleanedText} = this.removeByRegex(str, contactRegex);
    return matches;

  removeByRegex(str, regex) {
    const matches = [];
    const cleanedText = str.split('\n').filter(line => {
      const hits = line.match(regex);
      if (hits != null) {
        return false;
      return true;
    return {matches, cleanedText};


Step 3: Display your result

Let's create a basic UI using ionic components

  Generated template for the VisionPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.



<ion-content padding>

    <ion-col col-12 text-center>

      <button ion-button icon-start (tap)="captureAndUpload()">
        <ion-icon name="camera"></ion-icon>
        Capture Image


    <ion-col col-12>
      <img width="100%" height="auto" [src]="image">

    <ion-col *ngIf="result$ | async as result">

        <span class="title">名前: </span><br>
        <span class="title">Email:</span><br>
        <span *ngFor="let email of extractEmail(result.text)">{{email}}<br></span>
        <span class="title">電話番号:</span><br>
        <span *ngFor="let phone of extractContact(result.text)">{{phone}}<br></span>
        <span class="title">組織:</span><br>
        <span class="title">住所:</span><br>

      <h4><span class="title">認識されたテキスト</span></h4>




Step 4: Generate an app into platform of your choice

Finally, let's generate an application into iOS or Android
Run the following command to create a build of the app for iOS

 ionic cordova build ios

In a similar way to generate android app, run the following command

 ionic cordova build an Android

Open the app on an emulator or on an actual device and test it yourself

Congrats!! we just create a Business Card Reader app powered with Machine Learning :)

That's it for this post see you soon with one of such next time; until then,
Happy Learning :)


チナパです! ちょっと久しぶりに機械学習に本格できるようになりましたので、大好きなところから始め、論文を読んでました。 そこで、皆さんにもシェアしたいのがありましてーーーここ!

A few useful things to know about machine learning - Pedro Domingos https://homes.cs.washington.edu/~pedrod/papers/cacm12.pdf


分類系の機械学習(分類器? 難しい日本語だな。クラシファイアの種類です!)に集中していますが、とりあえず始めましょう。




「機械学習 = Deep Learning = Neural Network」と思う方(昔の私)もいるかもしれないが、実際はこんな感じです。


分類器(クラシファイア君)を作るためには、コンピュータが理解できる言語で作られた何らかの形を選択する必要があります。これはクラシファイア君の「表現」と言われます。 ニューラルネットワークはもしかして一番有名な表現かもしれません、つまり








ナイブベイズ K-最近傍法 (kNN) SVM などなど。





場合によって「正答率」のが一番直感かもしれませんが ここ で書いたように、正答率は全てではありません。悪人判定しようとしながら、「99.99%の人は悪人でないから、とりあえず「悪人ではない」と言えば99.99%正解じゃん!」という無意味なプログラムを釣りたくはないでしょう。

Fバリュー(Precision and recall)についても書いたことがありますが、それ以外にも評価のやり方がたくさんあります。


クラス分類ではなく、連続分布からのバリューを予想とするときは二乗誤差(Squared error)なども使えます。



Deep Learning でよく使われてるのが最急降下法(Gradient Descent)です。偏微分を使って、現在の状況に比べて、少しだけの変更でどう「評価」改善できるかを計算するアルゴリズムです。


上記のGradient Descent(最急降下法)の他にも改善のやり方があります。

Greedy SearchとBeam Searchでもあります。(辞書にも出てこないですけど!欲深い検索ではありません!)最急降下法と違って、こちらの二つはいくつかの有限な選択肢をよりよく組み合わせようとする方法です。







Business Card Reader : Part 1 : Backend (Cloud Functions)

Hello World! My name is Vivek Amilkanthawar
In this and the subsequent blog posts, we'll be creating a Business Card Reader as an iOS App with the help of Ionic, Firebase, Google Cloud Vision API and Google Natural Language API

The final app will look something like this


Okay so let's get started...
The entire process can be broken down into the following steps.
1) User uploads an image to Firebase storage via @angular/fire in Ionic.
2) The upload triggers a storage cloud function.
3) The cloud function sends the image to the Cloud Vision API
4) Result of image analysis is then sent to Cloud Language API and the final results are saved in Firestore.
5) The final result is then updated in realtime in the Ionic UI.

Let's finish up the important stuff first... the backend. In this blog post we'll be writing Cloud Function to do this job... (step #2, step #3 and step #4 of the above process)

The job of the cloud function that we are about to write can be visualized as below: f:id:vivek081166:20190121151148p:plain

Whenever the new image is uploaded to the storage, our cloud function will get triggered and the function will call Google Machine Learning APIs to perform Vision analysis on the uploaded image. Once the image analysis is over the recognized text is then passed to Language API to separate meaningful information.

Step 1: Set up Firebase CLI

Install Firebase CLI via npm using following command

npm install firebase-functions@latest firebase-admin@latest --save
npm install -g firebase-tools

Step 2: Initialize Firebase SDK for Cloud Functions

To initialize your project:
1) Run firebase login to log in via the browser and authenticate the firebase tool.
2) Go to your Firebase project directory.
3) Run firebase init functions
4) When asked for the language of choice/support chose Typescript

After these commands complete successfully, your project structure should look like this:

 +- .firebaserc    # Hidden file that helps you quickly switch between
 |                 # projects with `firebase use`
 +- firebase.json  # Describes properties for your project
 +- functions/     # Directory containing all your functions code
      +- tslint.json  # Optional file containing rules for TypeScript linting.
      +- tsconfig.json  # file containing configuration for TypeScript.
      +- package.json  # npm package file describing your Cloud Functions code
      +- node_modules/ # directory where your dependencies (declared in package.json) are installed
      +- src/
          +- index.ts      # main source file for your Cloud Functions code

Step 3: Write your code

All you have to edit is the index.ts file

1) Get all your imports correct, we need
@google-cloud/vision for vision analysis
@google-cloud/language for language analysis
firebase-admin for authentication and initialization of app
firebase-functions to get hold on the trigger when a new image file is updated to storage bucket on firebase

2)onFinalize method is triggered when the uploading of the image is completed. The URL of a newly uploaded Image File can be captured here.

3) Pass the image URL to visionClient to perform text detection on the image

4) visionResults is a plain text string containing all the words/characters recognized during image analysis

5) Pass this result to language API to get meaning full information from the text.
Language API categorizes the text into different entities. Out of various entities let's filter only the requiredEntities which are person name, location/address, and organization.
(Phone number and Email can be extracted by using regex, we will do this at the front end)

6) Finally, save the result into Firestore Database

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import * as vision from '@google-cloud/vision'; // Cloud Vision API
import * as language from '@google-cloud/language'; // Cloud Natural Language API
import * as _ from 'lodash';


const visionClient = new vision.ImageAnnotatorClient();
const languageClient = new language.LanguageServiceClient();

let text; // recognized text
const requiredEntities = {ORGANIZATION: '', PERSON: '', LOCATION: ''};

// Dedicated bucket for cloud function invocation
const bucketName = 'meishi-13f87.appspot.com';

export const imageTagger = functions.storage.
    onFinalize(async (object, context) => {

      /** Get the file URL of newly uploaded Image File **/
      // File data
      const filePath = object.name;

      // Location of saved file in bucket
      const imageUri = `gs://${bucketName}/${filePath}`;

      /** Perform vision and language analysis **/
      try {

        // Await the cloud vision response
        const visionResults = await visionClient.textDetection(imageUri);

        const annotation = visionResults[0].textAnnotations[0];
        text = annotation ? annotation.description : '';

        // pass the recognized text to Natural Language API
        const languageResults = await languageClient.analyzeEntities({
          document: {
            content: text,
            type: 'PLAIN_TEXT',

        // Go through detected entities
        const {entities} = languageResults[0];

        _.each(entities, entity => {
          const {type} = entity;
          if (_.has(requiredEntities, type)) {
            requiredEntities[type] += ` ${entity.name}`;

      } catch (err) {
        // Throw an error

      /** Save the result into Firestore **/
          // Firestore docID === file name
      const docId = filePath.split('.jpg')[0];
      const docRef = admin.firestore().collection('photos').doc(docId);
      return docRef.set({text, requiredEntities});


Step 4: Deploy your function

Run this command to deploy your functions:

firebase deploy --only functions

Storage f:id:vivek081166:20190121173201p:plain Database f:id:vivek081166:20190121172904p:plain

That's it.. with this our backend is pretty much ready.
Let's work on front-end side in the upcoming blog post till then
Happy Learning :)




Using pre-trained Machine Learning (ML) Models in the browser with TensorFlow.js & Angular

Greetings for the day! My name is Vivek.

In this blog post, let's see how to use your pre-trained Machine Learning (ML) model directly in the browser using Tensorflow.js and Angular


The following section of this blog is interactive, so you can try to draw a number between 0 ~ 9 and see the predicted output in the browser⤵︎
Go ahead and try it yourself, draw a number inside this blue box↓

Amazzing isn't it? Let's learn how to do this step by step

#Step 1) Convert your Keras model to load into TensorFlow.js

TensorFlow for Javascript has a Python CLI tool that converts an h5 model saved in Keras to a set of files that can be used on the web.
To install it, run the following command

pip install tensorflowjs

At this point, you will need to have a Keras model saved on your local system.

Suppose you have your Keras Model save at the following location
and suppose you want to generate output at the following location
In that case your command to convert model will look something like this

tensorflowjs_converter --input_format keras \
                       input_path/file_name.h5 \

In my case, the model is located in keras/cnn.h5 and I would like to keep my converted model at src/assets directory so I shall run the following command

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

Input and Output directories should look similar to this
f:id:vivek081166:20181228151743p:plain Output

#Step 2) Load the converted model into your Angular component

To load the model, you need TensorFlow.js library in your Angular application
Install it using Node Package Manager

npm install @tensorflow/tfjs --save

Here is how to load the model into your component

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
export class AppComponent implements OnInit {

  model: tf.Model;

  ngOnInit() {

  // Load pre-trained KERAS model
  async loadModel() {
    this.model = await tf.loadModel('./assets/model.json');


#Step 3) Make predictions using live drawn image data in the browser

Now that our model is loaded, it is expecting 4-dimensional image data in a shape of
[any, 28, 28, 1]
[batchsize, width pixels, height pixels, color channels]

Just trying to avoid memory leaks and to clean up the intermediate memory allocated to the tensors we run our predictions inside of tf.tidy() ( TensorFlow.js)

TensorFlow.js gives us a fromPixels (TensorFlow.js) helper to convert an ImageData HTML object into a Tensor.
So the complete code looks like this ↓

import {Component, OnInit} from '@angular/core';

import * as tf from '@tensorflow/tfjs';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
export class AppComponent implements OnInit {

  model: tf.Model;
  predictions: any;
  ngOnInit() {

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

  // Do predictions
  async predict(imageData: ImageData) {

    const pred = await tf.tidy(() => {

      // Convert the canvas pixels to 
      let img = tf.fromPixels(imageData, 1);
      // @ts-ignore
      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());



And component HTML looks like this

<div class="container">

  <!--Input Section-->
  <div class="column justify-content-center">
    <div class="col-sm">
      <h5>Draw a number here </h5>
      <div class="wrapper">
        <canvas drawable (newImage)="predict($event)"></canvas>
      <button class="btn btn-sm btn-warning" (click)="canvas.clear()">Erase</button>

    <!--Prediction Section-->
    <div class="col-sm predict">
      <h5>TensorFlow Prediction</h5>
      <chart [data]="predictions"></chart>


There we go... we just used Machine Learning in the browser.

Learn more about using TensorFlow.js here youtu.be

To learn more about the methods used in the tutorial refer to this js.tensorflow.org

That's all for now, see you next time with some more TensorFlow stuff... till then
Happy Learning !!

AWS Amplify Console でAngularアプリをデプロイす!

AWS re:Invent 2018 で発表ほやほやの新サービス、AWS Amplify Console を早速試してみました。



  • 静的サイトのホスティング、HTTPS化
  • SPAフレームワーク(React, Angular, Vue)のビルド
  • 静的サイト生成フレームワーク(Jekyll, Hugo, Gatsby)のビルド
  • リポジトリの更新をトリガーにビルド&デプロイ
  • OAuthによる閲覧制限
  • Route53でカスタムドメイン指定




  1. リポジトリを用意
  2. ビルド設定の作成
  3. デプロイ実行


1. リポジトリを用意



Organization Access 以下のリポジトリを利用するときはgrant申請する必要があります




2. ビルド設定の作成



3. デプロイ実行



amplifyapp.com ドメイン上にビルド成果物がホストされました。