1.
Machine Learning For
Web Developers

2.
Hi, I’m Riza

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.
Why we Should learn
Machine Learning?

5.
Make A Leap

6.
Start with what we
already familiar with

7.
Approachable

8.
Quick Recap
✓ Make a career leap
✓ Start with what we familiar with
✓ Machine learning is more approachable

9.
What is Machine
Learning

10.
Subset of AI

11.
What is A.I.
The science (and art) of making
computers do things that require
intelligence when done by humans.

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.
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.
Machine Learning
Is a field of computer
science that uses statistical
techniques to give computer
systems the ability to learn.

15.
https://twitter.com/xaprb/status/930674776317849600?lang=en
Machine Learning

16.
Machine Learning
• Find the pattern
• Predict from the pattern
• Learn from new pattern

17.
Use cases of
Machine Learning
• Image recognition
• Search engine and spam filter
• Autonomous vehicle
• Medical diagnosis
• Playing Games

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.
• Supervised
Learning
• Unsupervised
Learning
• Reinforce
Learning
How The
Machine Learned?
• Supervised Learning
• Unsupervised Learning
• Reinforce Learning

20.
Supervised Learning Learning from known patterns.

21.
Supervised Learning
Regression
Types
Classification
House price
Square footage
Color
Size

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.
Regression
Other Examples
• Predicting age of a person
• Predicting weather
• Predicting stock price

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.
ClassificaHon
Other Examples
• OCR
• Email spam filter

26.
Unsupervised
Learning
Learning from unknown patterns.

27.
Unsupervised
Learning
Clustering
Association

28.
Clustering
Example
Recommendation System
Customers who bought this item also bought

29.
Clustering
Other Examples
• Market segmentation
• Social network analysis
• Suggested Content
• Targeted advertisement

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.
Reinforce Learning
Professional DOTA Player vs OpenAI

32.
Quick Recap
✓ Supervised is learning from known pattern
✓ Unsupervised is learning from unknown pattern
✓ Reinforce is learning with reward and punishment

33.
How To Use Machine Learning
in Web Development

34.
OpHons
> Machine Learning as a Service - MLaaS
> Build Your Own

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.
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.
MLaaS
Providers

38.
MLaaS
Machine Learning as a Service
• Rekognition — Image recognition
• Polly — Text to speech
• Lex — Conversational chatbot platform
• Sagemaker — Managed machine learning service

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.
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.
MLaaS
Machine Learning as a Service
• Watson Machine Learning — Create, train, and deploy models

42.
MLaaS
Others

43.
Let’s build
something with
MLaaS
https://github.com/rizafahmi/rekog-express

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.
HotDog or Not HotDog
The Code
1 const AWS = require('aws-sdk');
2 require('dotenv').config();

46.
HotDog or Not HotDog
The Code
6 const s3Object = await uploadImage('rekog-techinasia', image);

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.
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.
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.
Build Your Own
Machine Learning

51.
Powerful package for scientific computing
Data analysis tools
Machine learning framework
Neural network library
brain.js
Libraries Frameworks/

52.
Build Something With
Machine Learning and Tensorflowjs

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.
Planning
✓ Create model in the browser
✓ Provide some data
✓ Training in the browser
✓ Make prediction in the browser
Housing Prediction App

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.
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.
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.
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.
Planning
Object Detection App
Object Detection App

60.
Planning
✓ Create download the model
✓ Provide some data
✓ Training in the browser
✓ Make prediction

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.
Import Libraries
1 import * as tf from '@tensorflow/tfjs';
2 import yolo, { downloadModel } from 'tfjs-yolo-tiny';
Object Detection App

63.
The Model 4 model = await downloadModel();
Object Detection App

64.
Get Image from
Webcam
5 await webcam.setup();
6 const inputImage = webcam.capture();
Object Detection App

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.
Demo
Object Detection App
Object Detection App

67.
Roadmap To Learn
Machine Learning

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.
And I’m done!
github.com/rizafahmi
slideshare.net/rizafahmi
riza@hack7v8.com
ceritanyadeveloper.com