Why the Browser and Machine Learning are a perfect match

MCubed, London, October 2018

Oliver Zeigermann / @DJCordhose



Wait, but why?

Python is predominant in the area of Machine Learning

  • Has a large and mature set of libs
  • Is reasonably fast
  • Uses bindings to C/C++ or Fortran for speed and reuse

(I) Educate

Everyone can be educated, they just need a browser and internet

Concepts are much easier to grok when you can play around with them

Experiment to explore how machine learning works

Built using deeplearn.js (predecessor of tensorflow.js)


Tensorflow Playground

Where it all started - Playing with Neural Networks without any installation


Generating Celebreties - From Keras to tensorflow.js

Trained for two weeks on a single high-end GPU on CelebA-HQ data set (images of celebreties)


(II) Develop

Most obvious reason: JavaScript is the language you are most comfortable with

You just happen to develop for the browser

You are intrigued by how JavaScript development works

Combination with interactive visualizations and other browser features (like audio and video)

Core Concepts

It's all about asynchronous matrix operations

    const a = tf.tensor1d([1, 2, 3]);
    const b = tf.scalar(2);
    // a is not modified, result is a new tensor
    const result = a.add(b);

    const data = await result.data(); 
    console.log(data); // Float32Array([3, 4, 5]

Minimal Example

High Level Layer API

If you have ever seen Keras, you will feel right at home

    const model = tf.sequential();

    model.add(tf.layers.dense({units: 10}));

      inputShape: [28, 28, 1],
      kernelSize: 5,
      filters: 8,
      activation: 'relu'

(III) Deploy

JavaScript might be the only language around

because all you have is a browser

  • you on your mobile phone
  • AI in browser based game
  • use any GPU

Scenario: Train using beefey machine using raw TensorFlow, deploy to browser

Using the fully trained modell in JavaScript

    const model = await tf.loadModel('model.json');

    // max speed, age, thousand kilometers per year
    const example = tf.tensor([[150, 45, 10]]);
    const prediction = model.predict(example);

    const value = await prediction.data();
    // softmax 
    // # 0: red
    // # 1: green
    // # 2: yellow        
    // [0.0937359631061554, 
    //  0.7274655699729919, 
    //  0.17879831790924072]


(IV) Apps powered by AI

AI-powered browser apps using ready made models

Wrapping Up

tensorflow.js browser apps

  • can make use of any GPU (not only CUDA)
  • have highest reach due to zero installation
  • can be easily integrated into existing Web Apps
  • allow for best visualization
  • are ideal for interactive learning

Why the Browser and Machine Learning are a perfect match, MCubed 2018
Oliver Zeigermann / @DJCordhose