Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Machine Learning for Web Developers

298 views

Published on

This session will be delivered in Bahasa. Riza will talk about how to starting implement machine learning with JavaScript. He will introduce some tools and terminology that can be used for implementing machine learning.

This talk is for TechInAsia Product Development Conference in Jakarta, Indonesia. Held at 2018-07-04.

Published in: Technology
  • Be the first to comment

Machine Learning for Web Developers

  1. 1. Machine Learning For Web Developers
  2. 2. Hi, I’m Riza
  3. 3. Agenda • Why we should learn about Machine Learning • What Machine Learning is • Types Machine Learning • How to use Machine Learning in Web Development • How to build our own Machine Learning • Roadmap to learn Machine Learning
  4. 4. Why we Should learn Machine Learning?
  5. 5. Make A Leap
  6. 6. Start with what we already familiar with
  7. 7. Approachable
  8. 8. Quick Recap ✓ Make a career leap ✓ Start with what we familiar with ✓ Machine learning is more approachable
  9. 9. What is Machine Learning
  10. 10. Subset of AI
  11. 11. What is A.I. The science (and art) of making computers do things that require intelligence when done by humans.
  12. 12. Brief history 13th century - Ramon Lull created logical machines 16th century - da Vinci designed walking animal 17th century - Leibniz, Hobbes, Descartes explored possibility to make systematic rational system 1700-1800 - Thomas Bayes created probability of events
 - George Boole created logical reasoning 1832 - Babbage, Ada Lovelace designed 
 Analytical Engine 1936 - Alan Turing design a programmable computer 1946 - von Neumann created Universal Computing Machine Ancient History of AI
  13. 13. Brief history 50s-70s - AI terms come out at Dartmouth Workshop (1956)
 - Newell, Simon: Created general problem solver
 - Slefridge: Computer Vision
 - Natural Language Processor
 - Stanford Research Institute: Shakey the robot
 - Feigenbaum: Expert system 1973 - Lighthill report: 
 Artificial Intelligence: A General Survey 1973-90s - AI Winter AI Winter & AI Explosion 90s - AI Comeback with practical apps 2006 - Geoffrey Hinton: Optimised back propagation 2014 - DeepMind acquired by Google
  14. 14. Machine Learning Is a field of computer science that uses statistical techniques to give computer systems the ability to learn.
  15. 15. https://twitter.com/xaprb/status/930674776317849600?lang=en Machine Learning
  16. 16. Machine Learning • Find the pattern • Predict from the pattern • Learn from new pattern
  17. 17. Use cases of Machine Learning • Image recognition • Search engine and spam filter • Autonomous vehicle • Medical diagnosis • Playing Games
  18. 18. Quick Recap ✓ Machine learning is subset of AI ✓ Is techniques to make computer learn ✓ Machine learning is all about patterns ✓ Become more mainstream
  19. 19. • Supervised Learning • Unsupervised Learning • Reinforce Learning How The
 Machine Learned? • Supervised Learning • Unsupervised Learning • Reinforce Learning
  20. 20. Supervised Learning Learning from known patterns.
  21. 21. Supervised Learning Regression Types Classification House price Square footage Color Size
  22. 22. Building Area Land Area Price of the house 70 79 IDR 738.967.000 70 81 IDR 742.371.000 70 83 IDR 750.984.000 70 85 IDR 759.598.000 70 86 IDR 763.905.000 70 84 IDR 755.291.000 Regression Example Predict House in BSD Input Output What is the house price if building area is 107 and land area is 128?
  23. 23. Regression Other Examples • Predicting age of a person • Predicting weather • Predicting stock price
  24. 24. ClassificaHon Example Diameter Weight Color Fruit 14 300 Orange 🍊 25 600 Red 🍎 27 680 Green 🍎 17 350 Lime 🍊 Predict Type of Fruits Input Output What is the fruit if diameter is 22, weight is 500 and the color is plume?
  25. 25. ClassificaHon Other Examples • OCR • Email spam filter
  26. 26. Unsupervised 
 Learning Learning from unknown patterns.
  27. 27. Unsupervised 
 Learning Clustering Association
  28. 28. Clustering Example Recommendation System Customers who bought this item also bought
  29. 29. Clustering Other Examples • Market segmentation • Social network analysis • Suggested Content • Targeted advertisement
  30. 30. Reinforce Learning Machine that can observe the environment, select and perform actions, and get rewards in return or penalties in the form of negative reward.
  31. 31. Reinforce Learning Professional DOTA Player vs OpenAI
  32. 32. Quick Recap ✓ Supervised is learning from known pattern ✓ Unsupervised is learning from unknown pattern ✓ Reinforce is learning with reward and punishment
  33. 33. How To Use Machine Learning in Web Development
  34. 34. OpHons > Machine Learning as a Service - MLaaS > Build Your Own
  35. 35. MLaaS Machine Learning as a Service An array of services that provide machine learning tools as part of cloud computing services. It helps clients benefit from machine learning without the cognate cost, time and risk of establishing an inhouse internal machine learning team.
  36. 36. MLaaS + Easy + API-driven + Risk-free + Pay as you go Machine Learning as a Service - Pricey in a long term - Owned and trained by the vendor - Hard to customise - Locked-in to the vendor Pros Cons
  37. 37. MLaaS Providers
  38. 38. MLaaS Machine Learning as a Service • Rekognition — Image recognition • Polly — Text to speech • Lex — Conversational chatbot platform • Sagemaker — Managed machine learning service
  39. 39. MLaaS Machine Learning as a Service • Dialogflow — Natural Language Conversation • Vision API — Image content analysis • Translation API — Natural Language Processing • Cloud Machine Learning Family
  40. 40. MLaaS Machine Learning as a Service • Cognitive Toolkit — deep learning toolkit • LUIS.ai — build natural language into apps • Azure Machine Learning — predictive analytics service
  41. 41. MLaaS Machine Learning as a Service • Watson Machine Learning — Create, train, and deploy models
  42. 42. MLaaS Others
  43. 43. Let’s build something with MLaaS https://github.com/rizafahmi/rekog-express
  44. 44. HotDog or Not HotDog The Code 1 const AWS = require('aws-sdk'); 2 require('dotenv').config(); 3 4 const recognize = async (image) => { 5 AWS.config.loadFromPath('./.secret.json'); 6 const s3Object = await uploadImage('rekog-techinasia', image); 7 return new Promise((resolve, reject) => { 8 const rekog = new AWS.Rekognition(); 9 const params = { 10 Image: { 11 S3Object: { 12 Bucket: 'rekog-techinasia', 13 Name: image.name, 14 }, 15 }, 16 MaxLabels: 24, 17 MinConfidence: 60, 18 }; 19 rekog.detectLabels(params, (err, data) => { 20 if (err) { 21 console.error(err); 22 reject(err); 23 } else { 24 const labels = data.Labels.map(l => l.Name); 25 console.log(`${image.name}: ${labels.join(', ')}`); 26 resolve({ s3Object, labels }); 27 } 28 }); 29 }); 30 };
  45. 45. HotDog or Not HotDog The Code 1 const AWS = require('aws-sdk'); 2 require('dotenv').config();
  46. 46. HotDog or Not HotDog The Code 6 const s3Object = await uploadImage('rekog-techinasia', image);
  47. 47. HotDog or Not HotDog The Code 8 const rekog = new AWS.Rekognition(); 9 const params = { 10 Image: { 11 S3Object: { 12 Bucket: 'rekog-techinasia', 13 Name: image.name, 14 }, 15 }, 16 MaxLabels: 24, 17 MinConfidence: 60, 18 };
  48. 48. HotDog or Not HotDog The Code 19 rekog.detectLabels(params, (err, data) => { 20 if (err) { 21 console.error(err); 22 reject(err); 23 } else { 24 const labels = data.Labels.map(l => l.Name); 25 console.log(`${image.name}: ${labels.join(', ')}`); 26 resolve({ s3Object, labels }); 27 } 28 }); 29 }); 30 };
  49. 49. Quick Recap ✓ Getting started easy, risk free with MLaaS ✓ Almost all cloud platform provides ML solutions ✓ As easy as using API ✓ Choose wisely, customer lock-in
  50. 50. Build Your Own 
 Machine Learning
  51. 51. Powerful package for scientific computing Data analysis tools Machine learning framework Neural network library brain.js Libraries Frameworks/
  52. 52. Build Something With 
 Machine Learning and Tensorflowjs
  53. 53. Planning Housing Prediction App Housing Prediction App https://github.com/rizafahmi/simple-predict-tfjs-vanilla Building Area Land Area Price of the house 70 79 IDR 738.967.000 70 81 IDR 742.371.000 70 83 IDR 750.984.000 70 85 IDR 759.598.000 70 86 IDR 763.905.000 70 84 IDR 755.291.000
  54. 54. Planning ✓ Create model in the browser ✓ Provide some data ✓ Training in the browser ✓ Make prediction in the browser Housing Prediction App
  55. 55. Create model 1 import * as tf from "@tensorflow/tfjs"; 2 3 // Define a model for linear regression. 4 const model = tf.sequential(); 5 model.add(tf.layers.dense({ units: 1, inputShape: [1] }));
  56. 56. Provide some data 7 // Prepare the model for training: Specify the loss and the optimizer. 8 model.compile({ loss: "meanSquaredError", optimizer: "sgd" }); 9 10 // Provide some housing data 11 const xs = tf.tensor1d([ 12 7.9, 8.1, 8.3, 8.5, 8.6, 8.4 13 ]); 14 const ys = tf.tensor1d([ 15 738967, 742371, 750984, 759598, 763905, 755291 16 ]); Building Area Land Area Price of the house 70 79 IDR 738.967.000 70 81 IDR 742.371.000 70 83 IDR 750.984.000 70 85 IDR 759.598.000 70 86 IDR 763.905.000 70 84 IDR 755.291.000
  57. 57. Training the model 18 // Train the model using the data provided 19 model.fit(xs, ys).then(() => { 20 const form = document.getElementById("myform"); 21 const inputText = document.getElementById("inputText"); 22 const predictPlaceholder = document.getElementById("predict"); 23 24 form.addEventListener("submit", e => { 25 e.preventDefault(); 26 // Use the model to predict or to inference 27 const output = model.predict( 28 tf.tensor2d([parseFloat(inputText.value) / 10], [1, 1]) 29 ); 30 predictPlaceholder.innerHTML = Array.from(output.dataSync())[0]; 31 }); 32 });
  58. 58. Make PredicHon 18 // Train the model using the data provided 19 model.fit(xs, ys).then(() => { 20 const form = document.getElementById("myform"); 21 const inputText = document.getElementById("inputText"); 22 const predictPlaceholder = document.getElementById("predict"); 23 24 form.addEventListener("submit", e => { 25 e.preventDefault(); 26 // Use the model to predict or to inference 27 const output = model.predict( 28 tf.tensor2d( 29 [parseFloat(inputText.value) / 10], [1, 1] 30 )); 31 predictPlaceholder.innerHTML = Array.from(output.dataSync())[0]; 32 }); 33 });
  59. 59. Planning Object Detection App Object Detection App
  60. 60. Planning ✓ Create download the model ✓ Provide some data ✓ Training in the browser ✓ Make prediction
  61. 61. The Code 1 import * as tf from '@tensorflow/tfjs'; 2 import yolo, { downloadModel } from 'tfjs-yolo-tiny'; 3 4 model = await downloadModel(); 5 await webcam.setup(); 6 const inputImage = webcam.capture(); 7 const boxes = await yolo(inputImage, model); 8 9 boxes.forEach(box => { 10 const { 11 top, left, bottom, right, classProb, className, 12 } = box; 13 14 drawRect(left, top, right-left, bottom-top, 15 `${className} Confidence: ${Math.round(classProb * 100)}%`) 16 }); 17 18 await tf.nextFrame(); Object Detection App
  62. 62. Import Libraries 1 import * as tf from '@tensorflow/tfjs'; 2 import yolo, { downloadModel } from 'tfjs-yolo-tiny'; Object Detection App
  63. 63. The Model 4 model = await downloadModel(); Object Detection App
  64. 64. Get Image from Webcam 5 await webcam.setup(); 6 const inputImage = webcam.capture(); Object Detection App
  65. 65. Predict The Object 7 const boxes = await yolo(inputImage, model); 8 9 boxes.forEach(box => { 10 const { 11 top, left, bottom, right, classProb, className, 12 } = box; 13 14 drawRect(left, top, right-left, bottom-top, 15 `${className} 16 Confidence: 17 ${Math.round(classProb * 100)}%`) 18 }); 19 20 await tf.nextFrame(); Object Detection App
  66. 66. Demo Object Detection App Object Detection App
  67. 67. Roadmap To Learn Machine Learning
  68. 68. Roadmap Learn Python — Learn Python The Hard Way, DataCamp Machine Learning Guide Podcast — ocdevel.com/mlg Practical Machine Learning Course — fast.ai Andrew Ng’s Machine Learning Course — coursera Big data repositories & competition — kaggle Action plan for you
  69. 69. And I’m done! github.com/rizafahmi slideshare.net/rizafahmi riza@hack7v8.com ceritanyadeveloper.com

×