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

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

@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

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

3

PLACES

@GANTLABORDE

Download Existing  Models

From Where?

Machine Learning

#1

#1

@GANTLABORDE

Train a

Model

From Where?

Machine Learning

#2

#2

@GANTLABORDE

Modify an Existing

Model

From Where?

Machine Learning

#3

#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

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

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

@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

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!

Cage Against the Machine

Keep in touch:

https://infinite.red/

http://gantlaborde.com/

@GantLaborde Twitter

Cage Against the Machine

By Infinite Red

Cage Against the Machine

React Native and Machine Learning - January 2019 at React Native Amazon

  • 5,274