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

DevFest - Machine Learning on the Web

Avatar for Galuh Sahid Galuh Sahid
November 30, 2019
Technology
2
320

DevFest - Machine Learning on the Web

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

Galuh Sahid

November 30, 2019
Tweet

More Decks by Galuh Sahid

See All by Galuh Sahid
CLIP Indonesian
Avatar for Galuh Sahid galuhsahid
0
200
Introduction to NLP
Avatar for Galuh Sahid galuhsahid
0
100
Implementation of AI & ML Technology in Indonesia’s Industry
Avatar for Galuh Sahid galuhsahid
0
250
BERT for Text Classification with Keras/TensorFlow 2
Avatar for Galuh Sahid galuhsahid
0
200
Introduction to Machine Learning (Nusantech Webinar)
Avatar for Galuh Sahid galuhsahid
1
540
Introduction to Machine Learning (UX Indonesia Meetup)
Avatar for Galuh Sahid galuhsahid
0
490
A Whirlwind Tour of Machine Learning with TensorFlow
Avatar for Galuh Sahid galuhsahid
0
430
First Steps Towards Your First Machine Learning Project
Avatar for Galuh Sahid galuhsahid
0
470
Call for Proposals 101
Avatar for Galuh Sahid galuhsahid
0
150

Other Decks in Technology

See All in Technology
Welcome to the LLM Club
Avatar for Koichi ITO koic
0
170
Witchcraft for Memory
Avatar for pocke pocke
1
300
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
Avatar for Spatial AI Network spatial_ai_network
0
110
登壇ネタの見つけ方 / How to find talk topics
Avatar for pinkumohikan pinkumohikan
4
390
Wasm元年
Avatar for asuka askua
0
140
Navigation3でViewModelにデータを渡す方法
Avatar for mikan mikanichinose
0
220
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
Avatar for opelab opelab
9
1.1k
OpenHands🤲にContributeしてみた
Avatar for kotauchisunsun kotauchisunsun
1
430
PHPでWebブラウザのレンダリングエンジンを実装する
Avatar for ディップ株式会社 dip_tech
PRO
0
200
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
2
210

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
370
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
277
23k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
234
140k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k

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!