Machine Learning in Browser using JavaScript

Bikash Sundaray
May 15, 2018 · 4 min read

First Thing First: Google has released a new JavaScript Eco-System “TensorFlowJS” (combined list of the JavaScript library) which allows developers to use Machine Learning directly in Browser without any code written in the backend. This has support for all major browser. You can use this tool to use Machine Learning on WebSites/Web Apps and NodeJS. Machine learning in Browser is not something new, but recently DeepLearningJS has been renamed to TensorFlowJS. Now Google is doing further development on TensorFlowJS to support more features in near future.

Quick Intro: TensorFlow Library is very famous for Machine Learning implementation and holding complete Eco-System to train/test model at higher scale up to Production. we can use Python, Java, C and Go Programming to use TensorFlow in our project. Now Google has released TensorFlowJS as JavaScript Implementation of Tensor Flow to solve a large scale problem in Web Browser and JavaScript.

  • Machine Learning in Browser is something new and it can solve many problems
  • Running machine learning in the browser in easy and low cost
  • Help Teachers to teach Machine Learning to Kids in the more simpler way
  • Machine Learning directly on the browser in Real-time using Android/iOS Sensors, GPS, Audio, Video, and Camera — Just using Browsers.
  • Easy to maintain and new Era in JavaScript

Introduction to TensorFlowJS

Whatever browser you are using, it is running on top of an Engine like WebKit, Chakra, GecKo. Each engine in the different browser runs with the supported library, we have a pre-built 3D library already integrated into browsers so that modern browser can take a power of the web and up-to-day standards. WebGL is library already installed/integrated into all modern browser. To test whether your browser in WebGL enabled or not, go to this link, if you see a spinning Cube then Congrats your browser is a modern browser which has support for WebGL. Click this link to test whether your browser is supported WebGL or not.

WebGL Definition (Wiki): WebGL is integrated completely into all the web standards of the browser, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible Browsers. Technically It is OpenGL ES implementation in Browser. Just to give you a higher picture, there is a list of the browser which has support WebGL and We can use TensorFlowJS in it.

What we can do with TensorFlowJS:

Let’s think about some real-world example of TensorFlowJS on Browser which can open a whole new world for developers and Companies to use AI in the browser without any coding in the backend.

  • Build AI Games in Browser like using Your Camera
  • Build Face Detection Web Apps without any Machine Learning Code in Backend
  • Get InSights from the browser, like what your customers are doing in the browser.
  • Improve advertisement for the targeted customer in NEAR REAL TIME. Which was not possible before.

Let’s discuss some technical details about TensorFlowJS:

  • You can use your Existing Python/Java/Go Model Directly in browser (There is some official tool which will convert those existing Model to TensorFlowJS compatible Model — so that it will work on Browser.)
  • You can use Camera and Audio to train your TensorFlowJS Model and use it in Real-time. This can be done both in Web and Mobile Browser. For example, you can use your Camera in Browser to detect Objects around you.
  • You have Deep Learning Algorithm already available to work on Browser. Which solves the complex problem of AI.

Let’s take an example PAC-MAN game in the browser. First, I trained machine learning with the different position of my face. So that I can control the Pac-man movement in 4 different directions. For example, if I move my face to left then Pac-man will move in the left direction, if I will move my face towards the right, then Pac-man will move in right. To do that first I will tell my machine learning about my different position of left, right, bottom and top. Then will play the game using Browser with Webcam enabled.

Pro Tips: TensorFlow is a big eco-System, very time consuming to learn. Don’t dive directly into TensorFlow otherwise, you will be lost in the middle.

Wait for some time, so that TensorFlowJS will be matured and can be usable on Production Apps

Bikash Sundaray

Written by

AI is my Passion and Innovation is my Energy. I work on ML, IoT, DevOps, Backend, Cloud, Mobile Apps, Security and Frontend

More From Medium

More from Bikash Sundaray

Top on Medium

Ed Yong
Mar 25 · 22 min read


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade