Slide 1

Slide 1 text

Deep Learning at the Edge with TensorFlow.js Bradley Holt Program Manager, Developer Advocacy Center for Open-Source Data and AI Technologies @BradleyHolt DOC ID / Month XX, 2018 / © 2018 IBM Corporation

Slide 2

Slide 2 text

Is AI overhyped?

Slide 3

Slide 3 text

Yes

Slide 4

Slide 4 text

Thank you for coming to my talk

Slide 5

Slide 5 text

General AI Metal Skull With Terminator Eye by L.C. Nøttaasen, on Flickr (CC BY-SA 2.0).

Slide 6

Slide 6 text

Broad AI -[ electrIc b88Gal88 ]- by JD Hancock, on Flickr (CC BY 2.0).

Slide 7

Slide 7 text

Narrow AI Danbo on the Lookout by IQRemix, on Flickr (CC BY-SA 2.0).

Slide 8

Slide 8 text

Deep Learning http://codait.org/

Slide 9

Slide 9 text

Demo: Veremin, A Video Theremin Based on PoseNet https://veremin.mybluemix.net/

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Try Veremin Yourself https://veremin.mybluemix.net/

Slide 12

Slide 12 text

Demo: Object Identification and Image Segmentation https://github.com/CODAIT/magicat

Slide 13

Slide 13 text

https://github.com/CODAIT/magicat

Slide 14

Slide 14 text

Install magicat $ npm install -g magicat + [email protected] added 255 packages from 209 contributors in 11.798s

Slide 15

Slide 15 text

23895621638_535be71dee_k.jpg 37038669284_899d7784a9_k.jpg 37489697170_31d05aa027_k.jpg 37699459356_24fd526a5e_k.jpg 37699976806_5ce694be36_k.jpg Animal photos by Susanne Nilsson, on Flickr (CC BY-SA 2.0).

Slide 16

Slide 16 text

Scan Directory with magicat $ magicat . Scanning directory '/Users/bradleydholt/tfjs-demos/magicat'... The image '23895621638_535be71dee_k.jpg' contains the following segments: background, cat. The image '37038669284_899d7784a9_k.jpg' contains the following segments: background, sheep. The image '37489697170_31d05aa027_k.jpg' contains the following segments: background, sheep. The image '37699459356_24fd526a5e_k.jpg' contains the following segments: background, cat. The image '37699976806_5ce694be36_k.jpg' contains the following segments: background, horse.

Slide 17

Slide 17 text

background, cat background, sheep background, sheep background, cat background, horse Animal photos by Susanne Nilsson, on Flickr (CC BY-SA 2.0).

Slide 18

Slide 18 text

Save Image Segment with magicat $ magicat 37699976806_5ce694be36_k.jpg --save horse The image '37699976806_5ce694be36_k.jpg' contains the following segments: background, horse. saved 37699976806_5ce694be36_k-horse.png Animal photos by Susanne Nilsson, on Flickr (CC BY-SA 2.0).

Slide 19

Slide 19 text

Demo: Object Identification and Image Segmentation with the Magic Cropping Tool https://developer.ibm.com/patterns/max-image-segmenter-magic-cropping-tool-web-app/

Slide 20

Slide 20 text

https://developer.ibm.com/patterns/max-image-segmenter-magic-cropping-tool-web-app/

Slide 21

Slide 21 text

https://medium.com/ibm-watson-data-lab/taking-selfies-and-more-to-the-next-level-with-open-source-deep-learning-models-de9ac8da4480

Slide 22

Slide 22 text

Deep Learning Use Cases https://ibm.biz/max-developers

Slide 23

Slide 23 text

Software Programming Untitled by Marcin Wichary, on Flickr (CC BY 2.0).

Slide 24

Slide 24 text

0101100100101100000110101101 0101001001100000110101101011 0110010010101010011101001011 0101010011100101010101010000 1010101011100000011010101010 1001000110000011010011010101 0010001011010101011101000101 Software Program Business Logic

Slide 25

Slide 25 text

0101100100101100000110101101 0101001001100000110101101011 0110010010101010011101001011 0101010011100101010101010000 1010101011100000011010101010 1001000110000011010011010101 0010001011010101011101000101 Software Program Input Program Execution Output

Slide 26

Slide 26 text

Deep Learning

Slide 27

Slide 27 text

Input Layer Hidden Layers Output Layer

Slide 28

Slide 28 text

Labeled Training Data Backpropagation Animal photos by Susanne Nilsson, on Flickr (CC BY-SA 2.0). Output Errors Cat ❌ Not Cat ❌ Cat ❌ Cat Cat

Slide 29

Slide 29 text

Input Neural Network Inferencing Output Cat Animal photos by Susanne Nilsson, on Flickr (CC BY-SA 2.0).

Slide 30

Slide 30 text

Neural Network Inferencing Output Not Cat Input Animal photos by Susanne Nilsson, on Flickr (CC BY-SA 2.0).

Slide 31

Slide 31 text

Machine Learning Libraries The Leeds Library by Michael D Beckwith, on Flickr (CC0 1.0).

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Demo: Minimal Train and Predict with TensorFlow.js https://github.com/bradley-holt/tfjs-demos

Slide 35

Slide 35 text

Training Data (y = 2x - 1) x y -1 -3 0 -1 1 1 2 3 3 5 4 7 https://github.com/bradley-holt/tfjs-demos

Slide 36

Slide 36 text

Prepare the Model for Training // Create a sequential model const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); // Prepare the model for training model.compile({loss: 'meanSquaredError', optimizer: 'sgd'}); https://github.com/bradley-holt/tfjs-demos

Slide 37

Slide 37 text

Train the Model // Create synthetic training data (y = 2x - 1) const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]); const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]); // Train the model await model.fit(xs, ys, {epochs: 250}); https://github.com/bradley-holt/tfjs-demos

Slide 38

Slide 38 text

Predict Outputs on Training Inputs // Predict outputs for training inputs const trainingInputs = [-1, 0, 1, 2, 3, 4]; const trainingOutputs = trainingInputs.map(input => model.predict(tf.tensor2d([input], [1, 1])) ); https://github.com/bradley-holt/tfjs-demos

Slide 39

Slide 39 text

Sample Prediction Results on Training Data x y inferenced y calculated -1 -2.8576648235321045 -3 0 -0.892378032207489 -1 1 1.072908639907837 1 2 3.0381953716278076 3 3 5.003482341766357 5 4 6.968769073486328 7 https://github.com/bradley-holt/tfjs-demos

Slide 40

Slide 40 text

Predict Outputs on Test Inputs // Predict outputs for a set of test inputs const testInputs = [3, 14, 25, 43, 56, 72]; const testOutputs = testInputs.map(input => model.predict(tf.tensor2d([input], [1, 1])) ); https://github.com/bradley-holt/tfjs-demos

Slide 41

Slide 41 text

Sample Prediction Results on Test Data x y inferenced y calculated 3 5.003482341766357 5 14 26.62163734436035 27 25 48.23978805541992 49 43 83.61495208740234 85 56 109.16368103027344 111 72 140.60826110839844 143 https://github.com/bradley-holt/tfjs-demos

Slide 42

Slide 42 text

Applying Deep Learning Data Science Expertise Computing Resources High-Quality Training Data Model Deployment Time Model Integration Inferencing Code And more…

Slide 43

Slide 43 text

Model Asset Exchange (MAX) Classify Generate Recognize https://developer.ibm.com/exchanges/models/

Slide 44

Slide 44 text

Choose deployable model Deep Learning asset on MAX Deploy Swagger specification Inference endpoint Metadata endpoint Microservice Input pre-processing, model execution, and output post-processing Deploy model Use model https://developer.ibm.com/exchanges/models/

Slide 45

Slide 45 text

Deep Learning at the Edge Global Network by fdecomite, on Flickr (CC BY 2.0).

Slide 46

Slide 46 text

Device Deep Learning Model Data Cloud Results Results Network

Slide 47

Slide 47 text

Device Deep Learning Model Data Results

Slide 48

Slide 48 text

The Cloud STOP Doggy Driver by Eric Sonstroem, on Flickr (CC BY 2.0).

Slide 49

Slide 49 text

Edge Device Inferencing* A large model with large input or output requires a slow and unreliable network API call July 13, 2018 / © 2018 IBM Corporation Large Model *Assumes limited edge device capabilities Fast Inferencing A network API request with small input and output can achieve fast, but unreliable, inferencing A small model run locally can achieve fast and reliable inferencing with large input and output Large Input/Output

Slide 50

Slide 50 text

Converting a Pre-Trained Model to TensorFlow.js Portage by ThreeIfByBike, on Flickr (CC BY-SA 2.0).

Slide 51

Slide 51 text

https://medium.com/ibm-watson-data-lab/bring-machine-learning-to-the-browser-with-tensorflow-js-part-i-16924457291c

Slide 52

Slide 52 text

https://developer.ibm.com/exchanges/models/all/max-image-segmenter/

Slide 53

Slide 53 text

Downloading Model Files deeplabv3_mnv2_pascal_trainval_2018_01_29.tar.gz http://max-assets.s3-api.us-geo.objectstorage.softlayer.net/deeplab/deeplabv3_mnv2_pascal_trainval_2018_01_29.tar.gz

Slide 54

Slide 54 text

Extracting Model Files $ tar xzf deeplabv3_mnv2_pascal_trainval_2018_01_29.tar.gz $ ls -lh deeplabv3_mnv2_pascal_trainval 8.4M frozen_inference_graph.pb 16M model.ckpt-30000.data-00000-of-00001 18K 2018 model.ckpt-30000.index

Slide 55

Slide 55 text

TensorFlow Model Formats Frozen Graphs: Encapsulates model data in a single file Checkpoints: Allows for resuming of training SavedModel: TensorFlow’s Universal serialization format HDF5: Used by Keras to store model data

Slide 56

Slide 56 text

Exploring the Model https://github.com/lutzroeder/Netron

Slide 57

Slide 57 text

Model Input and Output

Slide 58

Slide 58 text

Model Input and Output

Slide 59

Slide 59 text

Model Input and Output

Slide 60

Slide 60 text

Model Input and Output

Slide 61

Slide 61 text

Model Input and Output

Slide 62

Slide 62 text

Installing the TensorFlow.js Converter $ pip install tensorflowjs

Slide 63

Slide 63 text

Converting the Model $ tensorflowjs_converter \ --input_format=tf_frozen_model \ --output_node_names='SemanticPredictions' \ frozen_inference_graph.pb \ model $ ls -lh model 4.0M group1-shard1of3 4.0M group1-shard2of3 27K group1-shard3of3 63K tensorflowjs_model.pb 16K weights_manifest.json

Slide 64

Slide 64 text

Image Segmenter Demo App https://github.com/vabarbosa/tfjs-sandbox

Slide 65

Slide 65 text

Including the TensorFlow.js Library

Slide 66

Slide 66 text

Loading the Model in TensorFlow.js const MODEL_URL = '/model/tensorflowjs_model.pb' const WEIGHTS_URL = '/model/weights_manifest.json' const model = await tf.loadFrozenModel(MODEL_URL, WEIGHTS_URL)

Slide 67

Slide 67 text

Pre-Processing Model Input // create a tensor from an image const imageTensor = tf.fromPixels(imageElement) // insert a dimension into the tensor's shape const preprocessedInput = imageTensor.expandDims()

Slide 68

Slide 68 text

Running Predictions with the Model // generates output prediction const prediction = model.predict(preprocessedInput)

Slide 69

Slide 69 text

Post-Processing Model Output // get image width, height from output const imageWidth = prediction.shape[2] const imageHeight = prediction.shape[1] // create a regular array from the model's output prediction (tensor) const segMap = Array.from(prediction.dataSync()) // create a new array with the corresponding segmentation colors const segMapColor = segMap.map(seg => colorMap[seg])

Slide 70

Slide 70 text

Image Segmenter Demo App https://github.com/vabarbosa/tfjs-sandbox

Slide 71

Slide 71 text

brain.js ONNX.js https://github.com/BrainJS/brain.js | https://github.com/Microsoft/onnxjs Other JavaScript ML Libraries

Slide 72

Slide 72 text

What will you build with deep learning at the edge? AZ 89A by Kevin Dooley, on Flickr (CC BY 2.0).

Slide 73

Slide 73 text

Resources: Demos • Veremin: A Video Theremin Based on PoseNet https://veremin.mybluemix.net/ • Veremin—A Browser-based Video Theremin Making music visually using TensorFlow.js, PoseNet, and the Web MIDI & Web Audio APIs https://medium.com/ibm-watson-data-lab/veremin-a-browser-based-video-theremin-1548b63200c • !" magicat https://github.com/CODAIT/magicat • An Ode to the Terminal: The (Almost) Perfect Tool Bringing Deep Learning to the Terminal with Node and TensorFlow.js https://medium.com/ibm-watson-data-lab/an-ode-to-the-terminal-the-almost-perfect-tool-3f4e8435b6b1 • Deploy a deep learning-powered ‘Magic cropping tool’ Deploy a deep learning-powered 'Magic cropping tool' using pretrained open source models https://developer.ibm.com/patterns/max-image-segmenter-magic-cropping-tool-web-app/

Slide 74

Slide 74 text

Resources: Demos (cont’d) • Taking Selfies (and More) to the Next Level with Open Source Deep Learning Models Everything I’ve Learned About Machine Learning I’ve Learned From Machines. https://medium.com/ibm-watson-data-lab/taking-selfies-and-more-to-the-next-level-with-open-source-deep-learning-models-de9ac8da4480 • TensorFlow.js Demos https://github.com/bradley-holt/tfjs-demos • Bring Machine Learning to the Browser With TensorFlow.js — Parts I, II & III https://medium.com/ibm-watson-data-lab/bring-machine-learning-to-the-browser-with-tensorflow-js-part-i-16924457291c https://medium.com/ibm-watson-data-lab/bring-machine-learning-to-the-browser-with-tensorflow-js-part-ii-7555ed9a999e https://medium.com/ibm-watson-data-lab/bring-machine-learning-to-the-browser-with-tensorflow-js-part-iii-62d2b09b10a3 • TensorFlow.js Model Playground Pre-trained models converted to the TensorFlow.js web friendly format https://github.com/vabarbosa/tfjs-sandbox

Slide 75

Slide 75 text

Resources: Machine Learning • TensorFlow https://www.tensorflow.org/ • Keras https://keras.io/ • PyTorch https://pytorch.org/ • Caffe2 https://caffe2.ai/ • ONNX https://onnx.ai/ • Netron Visualizer for deep learning and machine learning models https://github.com/lutzroeder/Netron

Slide 76

Slide 76 text

Resources: Edge Machine Learning • TensorFlow.js https://js.tensorflow.org/ • TensorFlow Lite https://www.tensorflow.org/lite • ONNX.js https://github.com/Microsoft/onnxjs • brain.js ! Neural networks in JavaScript https://github.com/BrainJS/brain.js • Core ML https://developer.apple.com/machine-learning/

Slide 77

Slide 77 text

Resources: IBM Developer • Center for Open-Source Data & AI Technologies (CODAIT) http://codait.org/ • IBM Developer Model Asset Exchange (MAX) https://developer.ibm.com/exchanges/models/ • Model Asset Exchange (MAX) Code Patterns https://ibm.biz/max-developers • Image Segmenter Identify objects in an image, additionally assigning each pixel of the image to a particular object. https://developer.ibm.com/exchanges/models/all/max-image-segmenter/ • Image Segmenter Model Files http://max-assets.s3-api.us-geo.objectstorage.softlayer.net/deeplab/deeplabv3_mnv2_pascal_trainval_2018_01_29.tar.gz

Slide 78

Slide 78 text

Resources: IBM Cloud • IBM Cloud https://ibm.biz/Bd2A5f • IBM Watson Studio https://www.ibm.com/cloud/watson-studio • IBM Watson Machine Learning https://www.ibm.com/cloud/machine-learning • IBM Watson OpenScale https://www.ibm.com/cloud/watson-openscale

Slide 79

Slide 79 text

Thank you codait.org twitter.com/codait_datalab medium.com/ibm-watson-data-lab github.com/codait developer.ibm.com

Slide 80

Slide 80 text

No content