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

Machine Learning on the Web

C57af1a97254c871ece1cee87979a222?s=47 Galuh Sahid
September 28, 2019
Programming
2
280

Machine Learning on the Web

Slide deck for the talk "Machine Learning on the Web" at JSDay ID

GitHub repository: https://github.com/galuhsahid/ml-on-the-web

C57af1a97254c871ece1cee87979a222?s=128

Galuh Sahid

September 28, 2019
Tweet

More Decks by Galuh Sahid

See All by Galuh Sahid
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
8
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
2
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
96
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
100
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
1
210
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
180
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
170
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
170
C57af1a97254c871ece1cee87979a222?s=48 galuhsahid
0
68

Other Decks in Programming

See All in Programming
04df7340898eac3a0536d3b47c55501c?s=48 hirotokirimaru
1
180
84931a5617d844ecfda982721de3a9e9?s=48 grace2riku
0
190
49ae3cdb8b1a20b56aac93648f202238?s=48 futabato
0
880
Ae763d151aeee101b40ae10cc13ebe63?s=48 maroon1st
0
400
E8fae2ce31d2d3700bca68c464862bad?s=48 paru871
0
130
E35f18d9e5584b48a7cf5550f905522f?s=48 zntfdr
2
360
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
190
922f51d458d6ffee8578b9d3ab0a52b6?s=48 ug
1
190
406a99778248522c9acfe1f95b217a55?s=48 kotakawase
0
560
4a0e3afe85259f2973dbc9386b6a4bb3?s=48 ikumatadokoro
2
280
F247cc71d9e0bba9f60709c3ae48dd80?s=48 decoch
2
120
B546a9b97d993392e4b22b74b99b91fe?s=48 javiergs
PRO
0
130

Featured

See All Featured
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.3k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
61k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
30
5.4k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
130
20k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
82
4.5k
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
194
9.1k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
56
3.6k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
333
37k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
336
17k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
45
2.3k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
122
16k

Transcript

  1. MA HINE LEARNING ON THE WEB @galuhsahid https://galuh.me

  2. Halo! Saya Galuh. @galuhsahid https://galuh.me Data Engineer @ Gojek Mozilla

    Te h Speaker o-host pod ast KartiniTeknologi.id

  3. Pembelajaran mesin memberikan komputer kemampuan untuk belajar tanpa harus diprogram

    se ara eksplisit Arthur Samuel (1959)

  4. Data: Gambar https://www.bbc.com/news/world-asia-china-37273337 https://www.thoughtco.com/thmb/DpVtY--UXVOtG68m9LhMY7be2w0=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/happy-red-panda-171399380-5b574325c9e77c005b690b41.jpg

  5. Data: Suara ommon Voi e

  6. Data: Teks Wikipedia Berita Media Sosial

  7. Data Satu Data Indonesia

  8. Fitur

  9. Fitur fitur- fitur

  10. Fitur target

  11. Model Representasi matematis dari sebuah proses di dunia nyata

  12. Model Representasi matematis dari sebuah proses di dunia nyata 2000*jumlah

    lantai + … + 5000*jumlah kamar = harga rumah error=0.2

  13. Model Representasi matematis dari sebuah proses di dunia nyata 2000*jumlah

    lantai + … + 5000*jumlah kamar = harga rumah 3000*jumlah lantai + … + 6000*jumlah kamar = harga rumah error=0.2 error=0.1

  14. Ma hine learning dengan JavaS ript?

  15. Ma hine learning dengan JavaS ript?

  16. “A WebGL a elerated JavaS ript library for training and

    deploying ML models.” TensorFlow.js Ma hine learning dengan JavaS ript?

  17. Tanpa instalasi

  18. Tanpa instalasi Interaktif

  19. Tanpa instalasi Interaktif Data tetap ada di lient

  20. Loh, kok bisa?

  21. Loh, kok bisa?

  22. None

  23. Tensors Layers A tivation

  24. Ma hine learning dengan JavaS ript?

  25. Ma hine learning dengan JavaS ript?

  26. “Friendly ma hine learning for the web.” Ml5js Ma hine

    learning dengan JavaS ript?

  27. Menjalankan model yang sudah dilatih sebelumnya 1

  28. #1: Klasifikasi Gambar

  29. None

  30. MobileNet • Model computer vision yang bersifat mobile-first • Berukuran

    kecil, low-latency, dan low-power

  31. MobileNet

  32. Klasifikasi Gambar dengan MobileNet

  33. Klasifikasi Gambar dengan MobileNet MobileNet

  34. MobileNet Prediction: Bicycle (0.7845) Klasifikasi Gambar dengan MobileNet

  35. <html> <head> <meta charset="UTF-8"> <title>Klasifikasi Gambar dengan ml5.js</title> <script src="https://unpkg.com/ml5@0.3.1/dist/

    ml5.min.js"></script> </head> <body> … <script src="sketch.js"></script> </body> </html> index.html

  36. sket h.js let classifier; const loadModel = async (modelName) =>

    { try { classifier = await ml5.imageClassifier(modelName); } catch (e) { console.error(e); } … };

  37. sket h.js let classifier; const loadModel = async (modelName) =>

    { try { classifier = await ml5.imageClassifier(modelName); } catch (e) { console.error(e); } … }; Darknet Darknet-tiny MobileNet

  38. sket h.js const image = document.getElementById("image"); … const getPrediction =

    async (input) => { try { let results = await classifier.classify(input); return results; } catch (e) { console.error(e); } };

  39. sket h.js const image = document.getElementById(“image"); … const getPrediction =

    async (input, classifier) => { try { let results = await classifier.classify(input); return results; } catch (e) { console.error(e); } };
  40. None

  41. sket h.js const startWebcam = async () => { try

    { stream = await navigator.mediaDevices.getUserMedia( { video: true }); video.srcObject = stream; video.play(); getPrediction(video); } catch (e) { console.error(e); } };

  42. sket h.js const startWebcam = async () => { try

    { stream = await navigator.mediaDevices.getUserMedia( { video: true }); video.srcObject = stream; video.play(); getPrediction(video); } catch (e) { console.error(e); } }; MediaDevi es.getUserMedia()

  43. MobileNet

  44. Darknet MobileNet

  45. Menjalankan model yang sudah dilatih sebelumnya 1 Melatih ulang model

    yang sudah ada 2

  46. Melatih ulang model MobileNet ?

  47. Melatih dari awal? 14 juta gambar

  48. Transfer learning MobileNet yang dilatih ulang Prediction: Angklung (0.873)

  49. #2: Ro k Paper S issors

  50. None

  51. index.html <html> … <img src="images/rock.svg" alt="Rock" width="100" height="100" /><br />

    <p><span id="amountOfRockImages">0</ span> Rock Images</p> <p><button id="RockButton" class="button">Add Rock</button></p> </html>

  52. index.html <html> … <img src="images/rock.svg" alt="Rock" width="100" height="100" /><br />

    <p><span id="amountOfRockImages">0</ span> Rock Images</p> <p><button id="RockButton" class="button">Add Rock</button></p> </html>

  53. index.html <html> … <img src="images/rock.svg" alt="Rock" width="100" height="100" /><br />

    <p><span id="amountOfRockImages">0</ span> Rock Images</p> <p><button id="RockButton" class="button">Add Rock</button></p> … <button id="train" class="button">Train Model</button> </html>

  54. sket h.js let classifier; const loadModel = async () =>

    { try { featureExtractor = await ml5.featureExtractor("MobileNet"); classifier = await featureExtractor.classification(video, { numLabels: 3 }); } catch (e) { console.error(e); } };

  55. sket h.js let classifier; const loadModel = async () =>

    { try { featureExtractor = await ml5.featureExtractor("MobileNet"); classifier = await featureExtractor.classification(video, { numLabels: 3 }); } catch (e) { console.error(e); } }; Jenis model

  56. sket h.js let classifier; const loadModel = async () =>

    { try { featureExtractor = await ml5.featureExtractor("MobileNet"); classifier = await featureExtractor.classification(video, { numLabels: 3 }); } catch (e) { console.error(e); } }; Input

  57. sket h.js let classifier; const loadModel = async () =>

    { try { featureExtractor = await ml5.featureExtractor("MobileNet"); classifier = await featureExtractor.classification(video, { numLabels: 3 }); } catch (e) { console.error(e); } }; jumlah kelas

  58. sket h.js let classifier; const loadModel = async () =>

    { try { featureExtractor = ml5.featureExtractor("MobileNet"); classifier = featureExtractor.classification(video, { nu mLabels: 3 }); } catch (e) { console.error(e); } }; MobileNet Bicycle (0.373) Cup (0.232) Vacuum (0.121)

  59. sket h.js let classifier; const loadModel = async () =>

    { try { featureExtractor = ml5.featureExtractor("MobileNet"); classifier = featureExtractor.classification(video, { nu mLabels: 3 }); } catch (e) { console.error(e); } }; MobileNet Bicycle (0.373) Cup (0.232) Vacuum (0.121) x

  60. sket h.js let classifier; const loadModel = async () =>

    { try { featureExtractor = ml5.featureExtractor("MobileNet"); classifier = featureExtractor.classification(video, { nu mLabels: 3 }); } catch (e) { console.error(e); } }; MobileNet Rock (0.923) Paper (0.422) Scissors (0.231)

  61. sket h.js let classifier; const loadModel = async () =>

    { try { featureExtractor = ml5.featureExtractor("MobileNet"); classifier = featureExtractor.classification(video, { nu mLabels: 3 }); } catch (e) { console.error(e); } }; jumlah kelas https://www.mathworks.com/solutions/deep-learning/convolutional-neural-network.html

  62. sket h.js var RockButton = document.getElementById(“RockButton") … RockButton.onclick = function()

    { classifier.addImage(video, ”Rock”); amountOfRockImages.innerText = Number(amountOfRockImages.i nnerText) + 1; };

  63. sket h.js const trainModel = async () => { try

    { await classifier.train(function(lossValue) { if (lossValue) { totalLoss = lossValue; loss.innerHTML = "Loss: " + totalLoss; } else { loss.innerHTML = "Training done! Final loss: " + tot alLoss; } }); } catch(e) { console.error(e); } };

  64. sket h.js const trainModel = async () => { try

    { await classifier.train(function(lossValue) { if (lossValue) { totalLoss = lossValue; loss.innerHTML = "Loss: " + totalLoss; } else { loss.innerHTML = "Training done! Final loss: " + tot alLoss; } }); } catch(e) { console.error(e); } };

  65. sket h.js const getPlayerResult = async video => { try

    { let results = await classifier.classify(video); if (results && results[0]) { return results[0].label; } } catch (e) { console.error(err); } };

  66. sket h.js const getPlayerResult = async video => { try

    { let results = await classifier.classify(video); if (results && results[0]) { return results[0].label; } } catch (e) { console.error(err); } };
  67. None

  68. #3: S roll with Your Voi e

  69. None

  70. Klasifikasi suara: Dataset Spee h ommands Dataset Yes No Up

    Down Left Right Go Stop 0-9 Unknown word Ba kground noise

  71. Klasifikasi suara: Arsitektur Paper

  72. Klasifikasi suara NN Prediction: Up (0.86) Sound icon by Amiryshakiel

    from the Noun Project https://www.tensorflow.org/tutorials/sequences/audio_recognition

  73. sket h.js const options = { probabilityThreshold: 0.98 }; …

    const loadModel = async() => { try { classifier = await ml5.soundClassifier('SpeechCommands18 w', options); } catch (e) { console.error(e); } };

  74. sket h.js const getPrediction = async() => { try {

    await classifier.classify(scrollPage); } catch (e) { console.error(e); } };

  75. sket h.js function scrollPage(error, results) { if (results[0].label == 'down')

    { lastPosition = lastPosition + scrollBy; } else if (results[0].label == 'up') { lastPosition = lastPosition - scrollBy; } lastPosition = Math.max(0, lastPosition); window.scroll(0, lastPosition); };

  76. Selanjutnya https://ml5js.org/reference/

  77. Selanjutnya • A Beginner’s Guide to Machine Learning in JavaScript

    oleh Daniel Shiffman • Magenta.js (generating music & art) • Kursus Coursera: Machine Learning oleh Andrew Ng • Beyond the web: machine learning + hardware • Source code ml5.js • Bias & etika pembelajaran mesin • Referensi buku: Weapons of Math Destruction oleh Cathy O’Neil

  78. Terima kasih! @galuhsahid https://galuh.me