The Future of Machine Learning and JavaScript

A presentation at You Gotta Love Front End in April 2019 in Nahsholim, Israel by Asim Hussain

Slide 1

The Future of Machine Learning & JavaScript YGLF 2019 @jawache

Slide 2

Asim Hussain @jawache codecraft.tv microsoft.com

Slide 3

https://aka.ms/jawache-cda @jawache

Slide 4

https://www.palinternship.com/ @jawache

Slide 5

@jawache

Slide 6

This is @EleanorHaproff’s slide Machine Learning Asim Web Development

Slide 7

Slide 8

@jawache

Slide 9

TheMojifier™ @jawache

Slide 10

Slide 11

themojifier.com @jawache

Slide 12

Slide 13

How to Calculate Emotion? @jawache

Slide 14

(1) Detect Facial Features @jawache

Slide 15

https://towardsdatascience.com/facial-keypoints-detection-deep-learning-737547f73515

Slide 16

(2) Use a Neural Network @jawache

Slide 17

Axon Neural Networks Dendrites Body Axons @jawache

Slide 18

Neural Networks 23 -0 .5 Activation Function 8.6 1 1 . 2 @jawache

Slide 19

Neural Networks 23 x -0.5 = -11.5 } 8.6 x 2.1 = 18.06 7.01 !-> activation(…) !-> 1 @jawache

Slide 20

Neural Networks 1 Output 0 0 Input @jawache

Slide 21

Neural Networks 4 1.1 4.2 0.3 12 3 93 @jawache

Slide 22

Neural Networks 4 1.1 4.2 0.3 12 8 3 - 8 = -5 93 @jawache

Slide 23

Neural Networks 4 1.1 4.2 0.3 12 8 3 - 8 = -5 93 @jawache

Slide 24

Neural Networks 4 0.1 9.2 0.2 12 8 8 93 @jawache

Slide 25

https://azure.microsoft.com/services/cognitive-services/face/ @jawache

Slide 26

https:!//<region>.api.cognitive.microsoft.com/face/v1.0/detect { “url”: “<path-to-image>” } @jawache

Slide 27

@jawache

Slide 28

Summary @jawache

Slide 29

Summary • Neural Networks are incredibly powerful • Conceptually, they are simple to understand @jawache

Slide 30

TensorFlow, MobileNet & I’m fine @jawache

Slide 31

@jawache

Slide 32

@jawache

Slide 33

@jawache

Slide 34

TensorFlow.js @jawache

Slide 35

TensorFlow.js Train models Load pre-trained models @jawache

Slide 36

MobileNet https://github.com/tensorflow/tfjs-models @jawache

Slide 37

https://azure.microsoft.com/services/cognitive-services/computer-vision/ @jawache

Slide 38

https://codepen.io/sdras/full/jawPGa/ @jawache

Slide 39

https://twitter.com/ollee/status/930303340516216832 @jawache

Slide 40

https://twitter.com/FrontendNE/status/930120267992616960 @jawache

Slide 41

https://twitter.com/chrispiecom/status/930407801402347520 @jawache

Slide 42

Summary @jawache

Slide 43

Summary • TensorFlow.js doesn’t have any dependancies • MobileNet is a simple way to analyse images • Azure Computer Vision API ❤ @jawache

Slide 44

Image2Image @jawache

Slide 45

DEMO https://zaidalyafeai.github.io/pix2pix/cats.html @jawache

Slide 46

❌ ✅ Generator Discriminator @jawache

Slide 47

✅ ❌ Generator Discriminator @jawache

Slide 48

✅ ✅ Generator Discriminator @jawache

Slide 49

@jawache

Slide 50

@jawache

Slide 51

@jawache

Slide 52

https://github.com/NVIDIA/vid2vid @jawache

Slide 53

https://github.com/NVIDIA/vid2vid @jawache

Slide 54

https://github.com/NVIDIA/vid2vid @jawache

Slide 55

https://github.com/hanzhanggit/StackGAN @jawache

Slide 56

Summary @jawache

Slide 57

Summary • GANs learn to generate new images • They take a lot of compute to train • But the generator model can be run in the browser @jawache

Slide 58

aka.ms/mojifier @jawache

Slide 59

Asim Hussain @jawache codecraft.tv microsoft.com