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
Hi, I’m Riza
Agenda
• Why we should learn about Machine Learning
• What Machine Learning is
• Types Machine Learning
• How to use Machi...
Why we Should learn
Machine Learning?
Make A Leap
Start with what we
already familiar with
Approachable
Quick Recap
✓ Make a career leap
✓ Start with what we familiar with
✓ Machine learning is more approachable
What is Machine
Learning
Subset of AI
What is A.I.
The science (and art) of making
computers do things that require
intelligence when done by humans.
Brief history
13th century - Ramon Lull created logical machines
16th century - da Vinci designed walking animal
17th cent...
Brief history
50s-70s - AI terms come out at Dartmouth Workshop (1956)

- Newell, Simon: Created general problem solver

-...
Machine Learning
Is a field of computer
science that uses statistical
techniques to give computer
systems the ability to le...
https://twitter.com/xaprb/status/930674776317849600?lang=en
Machine Learning
Machine Learning
• Find the pattern
• Predict from the pattern
• Learn from new pattern
Use cases of
Machine Learning
• Image recognition
• Search engine and spam filter
• Autonomous vehicle
• Medical diagnosis
...
Quick Recap
✓ Machine learning is subset of AI

✓ Is techniques to make computer learn

✓ Machine learning is all about pa...
• Supervised
Learning
• Unsupervised
Learning
• Reinforce
Learning
How The

Machine Learned?
• Supervised Learning
• Unsup...
Supervised Learning Learning from known patterns.
Supervised Learning
Regression
Types
Classification
House price
Square footage
Color
Size
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	...
Regression
Other Examples
• Predicting age of a person

• Predicting weather 

• Predicting stock price
ClassificaHon
Example
Diameter Weight Color Fruit
14 300 Orange 🍊

25 600 Red 🍎
27 680 Green
 🍎
17 350 Lime 🍊
Predict Type ...
ClassificaHon
Other Examples
• OCR

• Email spam filter
Unsupervised 

Learning
Learning from unknown patterns.
Unsupervised 

Learning
Clustering
Association
Clustering
Example
Recommendation System
Customers who bought this item also bought
Clustering
Other Examples
• Market segmentation

• Social network analysis

• Suggested Content

• Targeted advertisement
Reinforce Learning
Machine that can observe the
environment, select and perform
actions, and get rewards in return or
pena...
Reinforce Learning
Professional DOTA Player vs OpenAI
Quick Recap
✓ Supervised is learning from known pattern
✓ Unsupervised is learning from unknown pattern
✓ Reinforce is lea...
How To Use Machine Learning
in Web Development
OpHons
> Machine Learning as a Service - MLaaS
> Build Your Own
MLaaS
Machine Learning as a Service
An array of services that provide machine learning
tools as part of cloud computing se...
MLaaS
+ Easy

+ API-driven

+ Risk-free

+ Pay as you go
Machine Learning as a Service
- Pricey in a long term

- Owned an...
MLaaS
Providers
MLaaS
Machine Learning as a Service
• Rekognition — Image recognition
• Polly — Text to speech

• Lex — Conversational cha...
MLaaS
Machine Learning as a Service
• Dialogflow — Natural Language Conversation

• Vision API — Image content analysis

• ...
MLaaS
Machine Learning as a Service
• Cognitive Toolkit — deep learning toolkit
• LUIS.ai — build natural language into ap...
MLaaS
Machine Learning as a Service
• Watson Machine Learning — Create, train, and deploy models
MLaaS
Others
Let’s build
something with
MLaaS
https://github.com/rizafahmi/rekog-express
HotDog or Not HotDog
The Code
1 const AWS = require('aws-sdk');
2 require('dotenv').config();
3
4 const recognize = async ...
HotDog or Not HotDog
The Code
1 const AWS = require('aws-sdk');
2 require('dotenv').config();
HotDog or Not HotDog
The Code
6 const s3Object = await uploadImage('rekog-techinasia', image);
HotDog or Not HotDog
The Code
8 const rekog = new AWS.Rekognition();
9 const params = {
10 Image: {
11 S3Object: {
12 Buck...
HotDog or Not HotDog
The Code
19 rekog.detectLabels(params, (err, data) => {
20 if (err) {
21 console.error(err);
22 rejec...
Quick Recap
✓ Getting started easy, risk free with MLaaS
✓ Almost all cloud platform provides ML solutions
✓ As easy as us...
Build Your Own 

Machine Learning
Powerful package for scientific computing
Data analysis tools
Machine learning framework
Neural network library
brain.js
Li...
Build Something With 

Machine Learning and Tensorflowjs
Planning
Housing Prediction App
Housing Prediction App
https://github.com/rizafahmi/simple-predict-tfjs-vanilla
Building A...
Planning
✓ Create model in the browser
✓ Provide some data
✓ Training in the browser
✓ Make prediction in the browser
Hous...
Create model
1 import * as tf from "@tensorflow/tfjs";
2
3 // Define a model for linear regression.
4 const model = tf.seq...
Provide some data
7 // Prepare the model for training: Specify the loss and the optimizer.
8 model.compile({ loss: "meanSq...
Training the model
18 // Train the model using the data provided
19 model.fit(xs, ys).then(() => {
20 const form = documen...
Make PredicHon
18 // Train the model using the data provided
19 model.fit(xs, ys).then(() => {
20 const form = document.ge...
Planning
Object Detection App
Object Detection App
Planning
✓ Create download the model

✓ Provide some data

✓ Training in the browser
✓ Make prediction
The Code
1 import * as tf from '@tensorflow/tfjs';
2 import yolo, { downloadModel } from 'tfjs-yolo-tiny';
3
4 model = awa...
Import Libraries
1 import * as tf from '@tensorflow/tfjs';
2 import yolo, { downloadModel } from 'tfjs-yolo-tiny';
Object ...
The Model 4 model = await downloadModel();
Object Detection App
Get Image from
Webcam
5 await webcam.setup();
6 const inputImage = webcam.capture();
Object Detection App
Predict The Object
7 const boxes = await yolo(inputImage, model);
8
9 boxes.forEach(box => {
10 const {
11 top, left, bott...
Demo
Object Detection App
Object Detection App
Roadmap To Learn
Machine Learning
Roadmap
Learn Python — Learn Python The Hard Way, DataCamp
Machine Learning Guide Podcast — ocdevel.com/mlg
Practical Mach...
And I’m done!
github.com/rizafahmi
slideshare.net/rizafahmi
riza@hack7v8.com
ceritanyadeveloper.com
Upcoming SlideShare
Loading in …5
×

Machine Learning for Web Developers

389 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

×