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>

Core ML

React Native

@GANTLABORDE

Ray Deck @ray_deck

Core ML

React Native

@GANTLABORDE

react-native-vision

DEMO

5GB of images => 80MB model

Core ML

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.

Core ML

React Native

@GANTLABORDE

Realtime ML!?

Maybe... just maybe

We can use this to stop Nic Cage and find the Declaration of Independence!?

@GANTLABORDE

MACHINE LEARNING & REACT NATIVE

@GANTLABORDE

REVIEW

Tensorflow (Lite/JS)
Brain JS
Core ML

Review

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Review

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Review

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Review

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

#FML

@FunMachineLearn

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Why my Girlfriend thinks I'm crazy

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

How does one make a Nic or Not model?

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

What's the hard part?

DATA

Scrape the internet for pictures of Nic Cage
Scrape the internet for pictures of Celebs
Code to remove faces of all images (faceOff)
Manually check your data for errors

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Nic or Nickelback

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

5+ Hours of This

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

🥵

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Transfer Learning!

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

🎉

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

OMG IT WORKS!?

BONUS:

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Review

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

Machine Learning & React Native is Awesome!

Review

REACT NATIVE + MACHINE LEARNING

@GANTLABORDE

"Reimagining everything inspires science."

https://inspirobot.me/

@GANTLABORDE

AMAZON10

Portland, July 11-12

@GANTLABORDE

STICKERS

I HAVE

@GANTLABORDE

INFINITE RED

THANKS

@GANTLABORDE

Thanks
AMAZON!