Cage Against the Machine

Machine Learning & React Native

Cage Against the Machine
AUDIO TEST

React Native + Machine Learning

Awesome React Native Dev
Getting AWS Certified
Executive Editor of the Official
React Native Newsletter

Thanks for that intro Frank!

Nic AKA Frank von Hoven

@GANTLABORDE

CTS of Infinite Red
React Native Core Contributor
Machine Learning Enthusiast

Gant Laborde

Your Friend

@GANTLABORDE

THE FUNDAMENTALS OF REACT NATIVE

bit.ly/2ROxdlQ

Slides
and Code Available

Enjoy!

Machine Learning?

WHY

@GANTLABORDE

?

Machine Learning?

WHY

@GANTLABORDE

WRITE ONCE, USE ANYWHERE!

React Native?

WHY

@GANTLABORDE

"Learn once, write anywhere"

Machine Learning?

WHY

@GANTLABORDE

"Write once, train for anywhere"

Machine Learning?

WHY

@GANTLABORDE

React Native

+

Machine Learning

Machine Learning?

WHY

@GANTLABORDE

What does it do?

Machine Learning

@GANTLABORDE

?

What does it do?

Machine Learning

@GANTLABORDE

Region Detection
Style Transfer

What does it do?

Machine Learning

@GANTLABORDE

😂

What does it do?

Machine Learning

@GANTLABORDE

What does it do?

Machine Learning

@GANTLABORDE

What does it do?

Machine Learning

@GANTLABORDE

What does it do?

Machine Learning

@GANTLABORDE

What does it do?

Machine Learning

"Machine Learning does things a human can do;

trained with a lot of time and a lot of examples."

What

Machine Learning

@GANTLABORDE

Should

it do?

What should it do?

Machine Learning

@GANTLABORDE

What should it do?

Machine Learning

@GANTLABORDE

What should it do?

Machine Learning

@GANTLABORDE

Applications

Machine Learning

@GANTLABORDE

Fraudulent Transactions

Recommendations

Best Price!?

Playing Games

Translate

Drive

How long is that line?

Write Music

AND MORE

What is it?

Machine Learning

@GANTLABORDE

What is it?

Machine Learning

@GANTLABORDE

Model

===

function()

Model

function()

What is it?

Machine Learning

@GANTLABORDE

DATA

IN

DATA

OUT

DATA

IN

DATA

OUT

@GANTLABORDE

From Where?

Machine Learning

3

PLACES

@GANTLABORDE

Download Existing Models

From Where?

Machine Learning

#1

@GANTLABORDE

Train a

Model

From Where?

Machine Learning

#2

@GANTLABORDE

Modify an Existing

Model

From Where?

Machine Learning

#3

React Native

MACHINE LEARNING &

@GANTLABORDE

Silicon Valley show
it was real!
it was React Native

Not Hotdog

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Tensorflow (Lite/JS)
BrainJS (aka Brain)
Core ML

Options
Today

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

No training on device

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

MACHINE LEARNING & REACT NATIVE

@GANTLABORDE

Tensorflow
Tensorflow.JS
Tensorflow Lite

Tensorflow

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Tensorflow

React Native

@GANTLABORDE

Works with mobile (kinda)
- Large model files
- Slow on mobile devices
Existing support
- Out of date examples
- react-native-tensorflow

Tensorflow Lite

React Native

@GANTLABORDE

Optimized for Mobile
- GPU optimized
Existing support
- react-native-tensorflow-lite
- Image recognition only
- Android only

Tensorflow Lite

React Native

@GANTLABORDE

Executive Summary:

Decent but limited. It's a nice start, and with proper backing, it could become a Machine Learning standard library.

DEMO

Tensorflow JS

React Native

@GANTLABORDE

Optimized for Dynamic
- Can be trained in JS
- Supports most TF functions
Existing support
- ...

Tensorflow JS

React Native

@GANTLABORDE

Executive Summary:

Currently depends on the DOM. React Native support has been announced on the roadmap, but not officially scheduled for release.

Tensorflow (Lite/JS)

React Native

@GANTLABORDE

Learn More:

Free course on GitHub by Magnus Erik Hvass Pedersen

https://github.com/Hvass-Labs/TensorFlow-Tutorials

GitHub Photo

MACHINE LEARNING & REACT NATIVE

@GANTLABORDE

Brain JS

React Native

@GANTLABORDE

Pure JavaScript
- The model is a JSON file!
- Easy to modify
Existing support
- GPU support almost there
- No Conv2D layers yet

Brain JS

React Native

@GANTLABORDE

Executive Summary:

Your ALL-JS solution. Optimized and synced between GPU and CPU for indepth training. GPU is around the corner, and conv is too, in Brain 2.0

DEMO

Brain JS

React Native

@GANTLABORDE

Learn More:

Free course by core-contributor

https://scrimba.com/playlist/pVZJQfg

Robert Plummer

MACHINE LEARNING & REACT NATIVE

@GANTLABORDE

Core ML

React Native

@GANTLABORDE

iOS Specific Models
- Optimized for iOS devices
- Has many APIs available
Existing support
- react-native-coreml-image
- react-native-coreml

Core ML

React Native

@GANTLABORDE

react-native-coreml-image

requires lots of setup
syntax is clean

  <View style={styles.container}>
      <CoreMLImage modelFile="HotDogOrNotHotDog" 
        onClassification={(evt) => this.onClassification(evt)}>
          <View style={styles.container}>
            <Text style={styles.info}>{classification}</Text>
          </View>
      </CoreMLImage>
  </View>