Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Machine Learning on the Web DevFest SG - November 30, 2019

Slide 3

Slide 3 text

Hi! I’m Galuh Twitter: @galuhsahid https://galuh.me

Slide 4

Slide 4 text

Machine learning gives computers the ability to learn without being explicitly programmed. - Arthur Samuel (1959)

Slide 5

Slide 5 text

Computer Rules Output Data

Slide 6

Slide 6 text

Computer Data Output Rules Computer Rules Output Data

Slide 7

Slide 7 text

Ingredients of machine learning

Slide 8

Slide 8 text

Data: Pictures https://www.rainforest-alliance.org/sites/default/files/styles/750w_585h/public/2016-09/three-toed-sloth.jpg?itok=uWF-NdZZ https://www.thoughtco.com/thmb/DpVtY--UXVOtG68m9LhMY7be2w0=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/happy-red-panda-171399380-5b574325c9e77c005b690b41.jpg

Slide 9

Slide 9 text

Data: Voice

Slide 10

Slide 10 text

Data: Text

Slide 11

Slide 11 text

Features

Slide 12

Slide 12 text

Features

Slide 13

Slide 13 text

Features

Slide 14

Slide 14 text

Mathematical representation of a real life process. Model 2000*number of floors + … + 5000*number of rooms = house price

Slide 15

Slide 15 text

2000*number of floors + … + 5000*number of rooms = house price Model error = $5400

Slide 16

Slide 16 text

2000*number of floors + … + 5000*number of rooms = house price Model error = $5400 3000*number of floors + … + 5000*number of rooms = house price error = $4000

Slide 17

Slide 17 text

2000*number of floors + … + 5000*number of rooms = house price Model error = $5400 3000*number of floors + … + 5000*number of rooms = house price error = $4000 3000*number of floors + … + 2000*number of rooms = house price error = $2500

Slide 18

Slide 18 text

Machine learning on the web?

Slide 19

Slide 19 text

Machine learning on the web? “A WebGL accelerated JavaScript library for training and deploying ML models.”

Slide 20

Slide 20 text

Why TensorFlow.js? Browser: !Without installation

Slide 21

Slide 21 text

Why TensorFlow.js? Browser: !Without installation !Interactive

Slide 22

Slide 22 text

Augmented Reality Speech Recognition Accessibility Education Conversational AI

Slide 23

Slide 23 text

Why TensorFlow.js? Browser: !Without installation !Interactive !Data stays in the client

Slide 24

Slide 24 text

Why TensorFlow.js? Browser: !Without installation !Interactive !Data stays in the client Server: !Nicely integrates with existing node.js stack

Slide 25

Slide 25 text

Why TensorFlow.js? Browser: !Without installation !Interactive !Data stays in the client Server: !Nicely integrates with existing node.js stack

Slide 26

Slide 26 text

How come?

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Machine learning on the web? A machine learning library for JavaScript built on top of TensorFlow.js

Slide 29

Slide 29 text

Machine learning on the web? A machine learning library for JavaScript built on top of TensorFlow.js

Slide 30

Slide 30 text

Running pre-trained models

Slide 31

Slide 31 text

Image classification app

Slide 32

Slide 32 text

Input: file upload

Slide 33

Slide 33 text

MobileNet Mobile-first computer vision model Small, low-latency, low-power

Slide 34

Slide 34 text

MobileNet Mobile-first computer vision model Small, low-latency, low-power

Slide 35

Slide 35 text

Image classification with MobileNet MobileNet Prediction: Bicycle (0.7845)

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

https://teachablemachine.withgoogle.com/

Slide 40

Slide 40 text

https://teachablemachine.withgoogle.com/

Slide 41

Slide 41 text

https://teachablemachine.withgoogle.com/

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Input: webcam

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

MobileNet

Slide 48

Slide 48 text

MobileNet DarkNet

Slide 49

Slide 49 text

Retraining existing models

Slide 50

Slide 50 text

New data MobileNet Prediction: ? Prediction: ?

Slide 51

Slide 51 text

Should we train from scratch? 14 million images

Slide 52

Slide 52 text

Transfer learning MobileNet trained on a new task Prediction: Angklung (0.873)

Slide 53

Slide 53 text

Rock Paper Scissors

Slide 54

Slide 54 text

Rock Paper Scissors: Demo

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Transfer learning MobileNet Bicycle (0.373) Cup (0.232) Vacuum (0.121)

Slide 63

Slide 63 text

Transfer learning MobileNet Bicycle (0.373) Cup (0.232) Vacuum (0.121) x

Slide 64

Slide 64 text

Transfer learning MobileNet Rock (0.923) Paper (0.422) Scissors (0.231)

Slide 65

Slide 65 text

Transfer learning Credit: MathWorks

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Scroll with Your Voice

Slide 72

Slide 72 text

Scroll with Your Voice: Demo

Slide 73

Slide 73 text

Sound Classification: Data

Slide 74

Slide 74 text

Sound Classification: Model

Slide 75

Slide 75 text

Sound Classification: Model CNN Prediction: Up (0.86)

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

… and many more https://ml5js.org/reference/

Slide 80

Slide 80 text

Building new models from scratch

Slide 81

Slide 81 text

index.html
… Credit: Laurence Moroney

Slide 82

Slide 82 text

index.html … async function learnLinear(){ const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); } learnLinear(); Credit: Laurence Moroney

Slide 83

Slide 83 text

index.html … async function learnLinear(){ const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' }); } learnLinear(); Credit: Laurence Moroney

Slide 84

Slide 84 text

index.html … async function learnLinear(){ const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' }); const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]); const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]); } learnLinear(); Credit: Laurence Moroney

Slide 85

Slide 85 text

index.html … async function learnLinear(){ const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' }); const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]); const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]); } learnLinear(); Credit: Laurence Moroney y=2x-1

Slide 86

Slide 86 text

index.html … async function learnLinear(){ const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' }); const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]); const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]); await model.fit(xs, ys, { epochs: 500 }); } learnLinear(); Credit: Laurence Moroney

Slide 87

Slide 87 text

index.html … model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' }); const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]); const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]); document.getElementById("output_field").innerText = model.predict( tf.tensor2d([10], [1, 1]) ); } learnLinear(); Credit: Laurence Moroney y=2x-1 2(10)-1 = 19

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

What’s next? ! A Beginner’s Guide to Machine Learning in JavaScript by Daniel Shiffman ! Magenta.js - music & art with machine learning ! Coursera: Machine Learning by Andrew Ng ! Machine learning + hardware ! ml5.js source code ! Bias in machine learning - book reference: Weapons of Math Destruction oleh Cathy O’Neil

Slide 90

Slide 90 text

Thank you!