Save 37% off PRO during our Black Friday Sale! »

DevFest - Machine Learning on the Web

C57af1a97254c871ece1cee87979a222?s=47 Galuh Sahid
November 30, 2019
Technology
2
210

DevFest - Machine Learning on the Web

DevFest SG 2019
GitHub: https://github.com/galuhsahid/ml-on-the-web

C57af1a97254c871ece1cee87979a222?s=128

Galuh Sahid

November 30, 2019
Tweet

More Decks by Galuh Sahid

See All by Galuh Sahid
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
3
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
0
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
81
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
97
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
1
200
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
170
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
160
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
150
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
66

Other Decks in Technology

See All in Technology
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
5
2.3k
50bc42471d197d0dbef7171f2ef85bb6?s=48 comucal
PRO
0
460
5ad40ebf0de566a519067153e6e85a41?s=48 nkajihara
0
140
C422cc033079e005fd1aa1b845b099da?s=48 meow_noisy
0
410
D8d463da5ab4a99265ffc1d12e76cbc9?s=48 sagara
0
200
73c9d1065e0075a9da6e404e08fe77fb?s=48 siroitori0413
0
150
11ab209b6dcacad4e5aa841af533a937?s=48 katahiro12345
0
110
C65a5dd24a6781ffc618377347a0c48a?s=48 asahi_k2
0
280
3716cf98e52588e91ba25e54b3f61255?s=48 tamagawaconan
2
190
D0f5daa7cc3a26140c06ea29e5e235cc?s=48 noriyukitakei
0
890
3933b943fb70400bbc26f3cb78d8204c?s=48 sakiengineer
2
920
60d4494f2321b322b050ea78acb7b0b1?s=48 matyuda
1
110

Featured

See All Featured
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
47k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
298
39k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
88
5.4k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
211
7.3k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
19k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
55k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
18
2.5k
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
22
10k
282d599b414022eba5096510f675b6e2?s=48 chrislema
232
16k
Ba530e786553390f3fb271848485681c?s=48 3n
169
23k

Transcript

  1. None

  2. Machine Learning on the Web DevFest SG - November 30,

    2019

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

  4. Machine learning gives computers the ability to learn without being

    explicitly programmed. - Arthur Samuel (1959)

  5. Computer Rules Output Data

  6. Computer Data Output Rules Computer Rules Output Data

  7. Ingredients of machine learning

  8. 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

  9. Data: Voice

  10. Data: Text

  11. Features

  12. Features

  13. Features

  14. Mathematical representation of a real life process. Model 2000*number of

    floors + … + 5000*number of rooms = house price

  15. 2000*number of floors + … + 5000*number of rooms =

    house price Model error = $5400

  16. 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

  17. 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

  18. Machine learning on the web?

  19. Machine learning on the web? “A WebGL accelerated JavaScript library

    for training and deploying ML models.”

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

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

  22. Augmented Reality Speech Recognition Accessibility Education Conversational AI

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

    client

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

    client Server: !Nicely integrates with existing node.js stack

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

    client Server: !Nicely integrates with existing node.js stack

  26. How come?

  27. None

  28. Machine learning on the web? A machine learning library for

    JavaScript built on top of TensorFlow.js

  29. Machine learning on the web? A machine learning library for

    JavaScript built on top of TensorFlow.js

  30. Running pre-trained models

  31. Image classification app

  32. Input: file upload

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

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

  35. Image classification with MobileNet MobileNet Prediction: Bicycle (0.7845)

  36. None
  37. None
  38. None

  39. https://teachablemachine.withgoogle.com/

  40. https://teachablemachine.withgoogle.com/

  41. https://teachablemachine.withgoogle.com/

  42. None
  43. None

  44. Input: webcam

  45. None
  46. None

  47. MobileNet

  48. MobileNet DarkNet

  49. Retraining existing models

  50. New data MobileNet Prediction: ? Prediction: ?

  51. Should we train from scratch? 14 million images

  52. Transfer learning MobileNet trained on a new task Prediction: Angklung

    (0.873)

  53. Rock Paper Scissors

  54. Rock Paper Scissors: Demo

  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None

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

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

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

  65. Transfer learning Credit: MathWorks

  66. None
  67. None
  68. None
  69. None
  70. None

  71. Scroll with Your Voice

  72. Scroll with Your Voice: Demo

  73. Sound Classification: Data

  74. Sound Classification: Model

  75. Sound Classification: Model CNN Prediction: Up (0.86)

  76. None
  77. None
  78. None

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

  80. Building new models from scratch

  81. index.html <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/ tf.min.js"></script> </head> <body> <div id="output_field"></div>

    </body> … Credit: Laurence Moroney

  82. index.html … <script> async function learnLinear(){ const model = tf.sequential();

    model.add(tf.layers.dense({units: 1, inputShape: [1]})); } learnLinear(); </script> Credit: Laurence Moroney

  83. index.html … <script> async function learnLinear(){ const model = tf.sequential();

    model.add(tf.layers.dense({units: 1, inputShape: [1]})); model.compile({ loss: 'meanSquaredError', optimizer: 'sgd' }); } learnLinear(); </script> Credit: Laurence Moroney

  84. index.html … <script> 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(); </script> Credit: Laurence Moroney

  85. index.html … <script> 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(); </script> Credit: Laurence Moroney y=2x-1

  86. index.html … <script> 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

  87. 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(); </script> </html> Credit: Laurence Moroney y=2x-1 2(10)-1 = 19
  88. None

  89. 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

  90. Thank you!