Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DevFest - Machine Learning on the Web

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

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
CLIP Indonesian
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
36
Introduction to NLP
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
10
Implementation of AI & ML Technology in Indonesia’s Industry
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
120
BERT for Text Classification with Keras/TensorFlow 2
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
110
Introduction to Machine Learning (Nusantech Webinar)
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
1
240
Introduction to Machine Learning (UX Indonesia Meetup)
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
200
A Whirlwind Tour of Machine Learning with TensorFlow
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
200
First Steps Towards Your First Machine Learning Project
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
200
Call for Proposals 101
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
70

Other Decks in Technology

See All in Technology
1人目QAエンジニアよもやま話 / QA Test Talk Vol.1
1b7098127bb4872f5fa10415d88479b7?s=48 nametake
4
210
JUnit5.7, 5.8の新機能紹介 #jjug_ccc #jjug_ccc_b / junit 5.7, 5.8 new features
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
PRO
2
390
MoT TechTalk #12 タクシーアプリ『GO』大規模トラフィックを捌く分析データ基盤の全容に迫る！
44a210d1299a727e9d601a47dfedeabf?s=48 mot_techtalk
0
190
ウォーターフォールとアジャイルと楽楽明細/Waterfall×Agile×Rakurakumeisai
83c3e0e87371c50399ac898308bdbb92?s=48 whitefox_73
1
340
What's new in Jetpack 2022
826c34bb94d4fe786230bd95c5bdc409?s=48 fornewid
1
360
RDRA + JavaによるレジャーSaaSプロダクトの要件定義と実装のシームレスな接続
050b8cdbe92809580ed71d0d0d327e36?s=48 jjebejj
PRO
2
470
Microsoft Build 2022 Recap Party!! Azure のデータ & 分析サービス 注目アップデート / microsoft-build-2022-recap-azure-data-and-analytics
22ac00b36d2057e61ee1c06f0f5dc6cb?s=48 nakazax
0
220
ひとりでも安定して 組織を変える活動を続けていくための ストレスマネジメント
D1bae34031a7675147bc658967c3a4cb?s=48 pastelinc
0
740
JDK Flight Recorder入門
484571ccba0db66b69dc11761afdd0c4?s=48 chiroito
1
470
ログ基盤をCloudWatchLogからNewRelic Logs + S3に変えたら 利便性も上がってコストも下がった話
72328eacb3f08064170cfec86b728d2a?s=48 onohiroshi1
0
150
sleepagotchi
0684ef0f8b92614508e0c323c3619462?s=48 fuwasegu
1
1.3k
ROS再入門​-はじめてのSLAM-
4b2f3a64637b51e81813accbe8a98083?s=48 miura55
0
330

Featured

See All Featured
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
Side Projects
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
450
37k
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.6k
The Web Native Designer (August 2011)
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.9k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
333
37k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.6k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
Rails Girls Zürich Keynote
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
12k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
43
8.9k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.5k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5.1k

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!