SlideShare a Scribd company logo
1 of 69
Download to read offline
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 Machine Learning in Web Development
• How to build our own Machine Learning
• Roadmap to learn Machine Learning
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 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
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
Machine Learning
Is a field of computer
science that uses statistical
techniques to give computer
systems the ability to learn.
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
• Playing Games
Quick Recap
✓ Machine learning is subset of AI

✓ Is techniques to make computer learn

✓ Machine learning is all about patterns

✓ Become more mainstream
• Supervised
Learning
• Unsupervised
Learning
• Reinforce
Learning
How The

Machine Learned?
• Supervised Learning
• Unsupervised Learning
• Reinforce Learning
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	 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?
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 of Fruits
Input Output
What is the fruit if diameter is 22, weight is
500 and the color is plume?
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
penalties in the form of negative reward.
Reinforce Learning
Professional DOTA Player vs OpenAI
Quick Recap
✓ Supervised is learning from known pattern
✓ Unsupervised is learning from unknown pattern
✓ Reinforce is learning with reward and punishment
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 services. It helps
clients benefit from machine learning without the
cognate cost, time and risk of establishing an
inhouse internal machine learning team.
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
MLaaS
Providers
MLaaS
Machine Learning as a Service
• Rekognition — Image recognition
• Polly — Text to speech

• Lex — Conversational chatbot platform

• Sagemaker — Managed machine learning service
MLaaS
Machine Learning as a Service
• Dialogflow — Natural Language Conversation

• Vision API — Image content analysis

• Translation API — Natural Language Processing
• Cloud Machine Learning Family
MLaaS
Machine Learning as a Service
• Cognitive Toolkit — deep learning toolkit
• LUIS.ai — build natural language into apps

• Azure Machine Learning — predictive analytics service
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 (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 };
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 Bucket: 'rekog-techinasia',
13 Name: image.name,
14 },
15 },
16 MaxLabels: 24,
17 MinConfidence: 60,
18 };
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 };
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
Build Your Own 

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

Machine Learning and Tensorflowjs
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
Planning
✓ Create model in the browser
✓ Provide some data
✓ Training in the browser
✓ Make prediction in the browser
Housing Prediction App
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] }));
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
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 });
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 });
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 = 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
Import Libraries
1 import * as tf from '@tensorflow/tfjs';
2 import yolo, { downloadModel } from 'tfjs-yolo-tiny';
Object Detection App
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, 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
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 Machine Learning Course — fast.ai
Andrew Ng’s Machine Learning Course — coursera
Big data repositories & competition — kaggle
Action plan for you
And I’m done!
github.com/rizafahmi
slideshare.net/rizafahmi
riza@hack7v8.com
ceritanyadeveloper.com

More Related Content

What's hot

Understand How Node.js and Core Features Works
Understand How Node.js and Core Features WorksUnderstand How Node.js and Core Features Works
Understand How Node.js and Core Features WorksHengki Sihombing
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.jsRob O'Doherty
 
Build your own RasPiTV with Node.js & Socket.io
Build your own RasPiTV with Node.js & Socket.ioBuild your own RasPiTV with Node.js & Socket.io
Build your own RasPiTV with Node.js & Socket.ioDonald Derek Haddad
 
Complete MVC on NodeJS
Complete MVC on NodeJSComplete MVC on NodeJS
Complete MVC on NodeJSHüseyin BABAL
 
V8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパーV8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパーTaketoshi 青野健利
 
Something about node basics
Something about node basicsSomething about node basics
Something about node basicsPhilipp Fehre
 
REST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentREST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentHyunghun Cho
 
Introduction to node.js by jiban
Introduction to node.js by jibanIntroduction to node.js by jiban
Introduction to node.js by jibanJibanananda Sana
 
遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016Caesar Chi
 
PyWPS at COST WPS Workshop
PyWPS at COST WPS WorkshopPyWPS at COST WPS Workshop
PyWPS at COST WPS WorkshopJachym Cepicky
 
Modern UI Development With Node.js
Modern UI Development With Node.jsModern UI Development With Node.js
Modern UI Development With Node.jsRyan Anklam
 
Baking in the cloud with packer and puppet
Baking in the cloud with packer and puppetBaking in the cloud with packer and puppet
Baking in the cloud with packer and puppetAlan Parkinson
 

What's hot (20)

Understand How Node.js and Core Features Works
Understand How Node.js and Core Features WorksUnderstand How Node.js and Core Features Works
Understand How Node.js and Core Features Works
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Build your own RasPiTV with Node.js & Socket.io
Build your own RasPiTV with Node.js & Socket.ioBuild your own RasPiTV with Node.js & Socket.io
Build your own RasPiTV with Node.js & Socket.io
 
Node
NodeNode
Node
 
Getting started with node.js
Getting started with node.jsGetting started with node.js
Getting started with node.js
 
Complete MVC on NodeJS
Complete MVC on NodeJSComplete MVC on NodeJS
Complete MVC on NodeJS
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Nodejs presentation
Nodejs presentationNodejs presentation
Nodejs presentation
 
V8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパーV8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパー
 
Something about node basics
Something about node basicsSomething about node basics
Something about node basics
 
Node azure
Node azureNode azure
Node azure
 
非同期javascriptの過去と未来
非同期javascriptの過去と未来非同期javascriptの過去と未来
非同期javascriptの過去と未来
 
REST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentREST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side Development
 
Introduction to node.js by jiban
Introduction to node.js by jibanIntroduction to node.js by jiban
Introduction to node.js by jiban
 
遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016
 
PyWPS at COST WPS Workshop
PyWPS at COST WPS WorkshopPyWPS at COST WPS Workshop
PyWPS at COST WPS Workshop
 
Modern UI Development With Node.js
Modern UI Development With Node.jsModern UI Development With Node.js
Modern UI Development With Node.js
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
 
Baking in the cloud with packer and puppet
Baking in the cloud with packer and puppetBaking in the cloud with packer and puppet
Baking in the cloud with packer and puppet
 
Nodejs
NodejsNodejs
Nodejs
 

Similar to Machine Learning For Web Developers

Understanding cloud costs with analytics
Understanding cloud costs with analyticsUnderstanding cloud costs with analytics
Understanding cloud costs with analyticsRightScale
 
Data Mining Open Ap Is
Data Mining Open Ap IsData Mining Open Ap Is
Data Mining Open Ap Isoscon2007
 
Technical Exposure for IT Blue Prints
Technical Exposure for IT Blue PrintsTechnical Exposure for IT Blue Prints
Technical Exposure for IT Blue PrintsMuhammad Suleman
 
Intro to node and mongodb 1
Intro to node and mongodb   1Intro to node and mongodb   1
Intro to node and mongodb 1Mohammad Qureshi
 
Artificial Intelligence (ML - DL)
Artificial Intelligence (ML - DL)Artificial Intelligence (ML - DL)
Artificial Intelligence (ML - DL)ShehryarSH1
 
First Hive Meetup London 2012-07-10 - Tomas Cervenka - VisualDNA
First Hive Meetup London 2012-07-10 - Tomas Cervenka - VisualDNAFirst Hive Meetup London 2012-07-10 - Tomas Cervenka - VisualDNA
First Hive Meetup London 2012-07-10 - Tomas Cervenka - VisualDNATomas Cervenka
 
Design patterns
Design patternsDesign patterns
Design patternsnisheesh
 
End-to-end Big Data Projects with Python - StampedeCon Big Data Conference 2017
End-to-end Big Data Projects with Python - StampedeCon Big Data Conference 2017End-to-end Big Data Projects with Python - StampedeCon Big Data Conference 2017
End-to-end Big Data Projects with Python - StampedeCon Big Data Conference 2017StampedeCon
 
AI with Azure Machine Learning
AI with Azure Machine LearningAI with Azure Machine Learning
AI with Azure Machine LearningGeert Baeke
 
Scalding big ADta
Scalding big ADtaScalding big ADta
Scalding big ADtab0ris_1
 
A miało być tak... bez wycieków
A miało być tak... bez wyciekówA miało być tak... bez wycieków
A miało być tak... bez wyciekówKonrad Kokosa
 
MongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDB
MongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDBMongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDB
MongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDBMongoDB
 
Julien Simon "Scaling ML from 0 to millions of users"
Julien Simon "Scaling ML from 0 to millions of users"Julien Simon "Scaling ML from 0 to millions of users"
Julien Simon "Scaling ML from 0 to millions of users"Fwdays
 
AI @ Microsoft, How we do it and how you can too!
AI @ Microsoft, How we do it and how you can too!AI @ Microsoft, How we do it and how you can too!
AI @ Microsoft, How we do it and how you can too!Microsoft Tech Community
 
Designing Artificial Intelligence
Designing Artificial IntelligenceDesigning Artificial Intelligence
Designing Artificial IntelligenceDavid Chou
 
Michael Allen's AWS user group talk ""Developers, Start Your Engines - Hands ...
Michael Allen's AWS user group talk ""Developers, Start Your Engines - Hands ...Michael Allen's AWS user group talk ""Developers, Start Your Engines - Hands ...
Michael Allen's AWS user group talk ""Developers, Start Your Engines - Hands ...AWS Chicago
 
Big data week presentation
Big data week presentationBig data week presentation
Big data week presentationJoseph Adler
 
Tutorial: Building Your First App with MongoDB Stitch
Tutorial: Building Your First App with MongoDB StitchTutorial: Building Your First App with MongoDB Stitch
Tutorial: Building Your First App with MongoDB StitchMongoDB
 
Leverage the power of machine learning on windows
Leverage the power of machine learning on windowsLeverage the power of machine learning on windows
Leverage the power of machine learning on windowsJosé António Silva
 
Azure machine learning service
Azure machine learning serviceAzure machine learning service
Azure machine learning serviceRuth Yakubu
 

Similar to Machine Learning For Web Developers (20)

Understanding cloud costs with analytics
Understanding cloud costs with analyticsUnderstanding cloud costs with analytics
Understanding cloud costs with analytics
 
Data Mining Open Ap Is
Data Mining Open Ap IsData Mining Open Ap Is
Data Mining Open Ap Is
 
Technical Exposure for IT Blue Prints
Technical Exposure for IT Blue PrintsTechnical Exposure for IT Blue Prints
Technical Exposure for IT Blue Prints
 
Intro to node and mongodb 1
Intro to node and mongodb   1Intro to node and mongodb   1
Intro to node and mongodb 1
 
Artificial Intelligence (ML - DL)
Artificial Intelligence (ML - DL)Artificial Intelligence (ML - DL)
Artificial Intelligence (ML - DL)
 
First Hive Meetup London 2012-07-10 - Tomas Cervenka - VisualDNA
First Hive Meetup London 2012-07-10 - Tomas Cervenka - VisualDNAFirst Hive Meetup London 2012-07-10 - Tomas Cervenka - VisualDNA
First Hive Meetup London 2012-07-10 - Tomas Cervenka - VisualDNA
 
Design patterns
Design patternsDesign patterns
Design patterns
 
End-to-end Big Data Projects with Python - StampedeCon Big Data Conference 2017
End-to-end Big Data Projects with Python - StampedeCon Big Data Conference 2017End-to-end Big Data Projects with Python - StampedeCon Big Data Conference 2017
End-to-end Big Data Projects with Python - StampedeCon Big Data Conference 2017
 
AI with Azure Machine Learning
AI with Azure Machine LearningAI with Azure Machine Learning
AI with Azure Machine Learning
 
Scalding big ADta
Scalding big ADtaScalding big ADta
Scalding big ADta
 
A miało być tak... bez wycieków
A miało być tak... bez wyciekówA miało być tak... bez wycieków
A miało być tak... bez wycieków
 
MongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDB
MongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDBMongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDB
MongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDB
 
Julien Simon "Scaling ML from 0 to millions of users"
Julien Simon "Scaling ML from 0 to millions of users"Julien Simon "Scaling ML from 0 to millions of users"
Julien Simon "Scaling ML from 0 to millions of users"
 
AI @ Microsoft, How we do it and how you can too!
AI @ Microsoft, How we do it and how you can too!AI @ Microsoft, How we do it and how you can too!
AI @ Microsoft, How we do it and how you can too!
 
Designing Artificial Intelligence
Designing Artificial IntelligenceDesigning Artificial Intelligence
Designing Artificial Intelligence
 
Michael Allen's AWS user group talk ""Developers, Start Your Engines - Hands ...
Michael Allen's AWS user group talk ""Developers, Start Your Engines - Hands ...Michael Allen's AWS user group talk ""Developers, Start Your Engines - Hands ...
Michael Allen's AWS user group talk ""Developers, Start Your Engines - Hands ...
 
Big data week presentation
Big data week presentationBig data week presentation
Big data week presentation
 
Tutorial: Building Your First App with MongoDB Stitch
Tutorial: Building Your First App with MongoDB StitchTutorial: Building Your First App with MongoDB Stitch
Tutorial: Building Your First App with MongoDB Stitch
 
Leverage the power of machine learning on windows
Leverage the power of machine learning on windowsLeverage the power of machine learning on windows
Leverage the power of machine learning on windows
 
Azure machine learning service
Azure machine learning serviceAzure machine learning service
Azure machine learning service
 

More from Riza Fahmi

Membangun Aplikasi Web dengan Elixir dan Phoenix
Membangun Aplikasi Web dengan Elixir dan PhoenixMembangun Aplikasi Web dengan Elixir dan Phoenix
Membangun Aplikasi Web dengan Elixir dan PhoenixRiza Fahmi
 
Berbagai Pilihan Karir Developer
Berbagai Pilihan Karir DeveloperBerbagai Pilihan Karir Developer
Berbagai Pilihan Karir DeveloperRiza Fahmi
 
Web dan Progressive Web Apps di 2020
Web dan Progressive Web Apps di 2020Web dan Progressive Web Apps di 2020
Web dan Progressive Web Apps di 2020Riza Fahmi
 
Remote Working/Learning
Remote Working/LearningRemote Working/Learning
Remote Working/LearningRiza Fahmi
 
How to learn programming
How to learn programmingHow to learn programming
How to learn programmingRiza Fahmi
 
Rapid App Development with AWS Amplify
Rapid App Development with AWS AmplifyRapid App Development with AWS Amplify
Rapid App Development with AWS AmplifyRiza Fahmi
 
Menguak Misteri Module Bundler
Menguak Misteri Module BundlerMenguak Misteri Module Bundler
Menguak Misteri Module BundlerRiza Fahmi
 
Beberapa Web API Menarik
Beberapa Web API MenarikBeberapa Web API Menarik
Beberapa Web API MenarikRiza Fahmi
 
MVP development from software developer perspective
MVP development from software developer perspectiveMVP development from software developer perspective
MVP development from software developer perspectiveRiza Fahmi
 
Ekosistem JavaScript di Indonesia
Ekosistem JavaScript di IndonesiaEkosistem JavaScript di Indonesia
Ekosistem JavaScript di IndonesiaRiza Fahmi
 
Perkenalan ReasonML
Perkenalan ReasonMLPerkenalan ReasonML
Perkenalan ReasonMLRiza Fahmi
 
How I Generate Idea
How I Generate IdeaHow I Generate Idea
How I Generate IdeaRiza Fahmi
 
Strategi Presentasi Untuk Developer Workshop Slide
Strategi Presentasi Untuk Developer Workshop SlideStrategi Presentasi Untuk Developer Workshop Slide
Strategi Presentasi Untuk Developer Workshop SlideRiza Fahmi
 
Lesson Learned from Prolific Developers
Lesson Learned from Prolific DevelopersLesson Learned from Prolific Developers
Lesson Learned from Prolific DevelopersRiza Fahmi
 
Clean Code JavaScript
Clean Code JavaScriptClean Code JavaScript
Clean Code JavaScriptRiza Fahmi
 
The Future of AI
The Future of AIThe Future of AI
The Future of AIRiza Fahmi
 
Chrome Dev Summit 2018 - Personal Take Aways
Chrome Dev Summit 2018 - Personal Take AwaysChrome Dev Summit 2018 - Personal Take Aways
Chrome Dev Summit 2018 - Personal Take AwaysRiza Fahmi
 
Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6Riza Fahmi
 
Modern Static Site with GatsbyJS
Modern Static Site with GatsbyJSModern Static Site with GatsbyJS
Modern Static Site with GatsbyJSRiza Fahmi
 
Introduction to ReasonML
Introduction to ReasonMLIntroduction to ReasonML
Introduction to ReasonMLRiza Fahmi
 

More from Riza Fahmi (20)

Membangun Aplikasi Web dengan Elixir dan Phoenix
Membangun Aplikasi Web dengan Elixir dan PhoenixMembangun Aplikasi Web dengan Elixir dan Phoenix
Membangun Aplikasi Web dengan Elixir dan Phoenix
 
Berbagai Pilihan Karir Developer
Berbagai Pilihan Karir DeveloperBerbagai Pilihan Karir Developer
Berbagai Pilihan Karir Developer
 
Web dan Progressive Web Apps di 2020
Web dan Progressive Web Apps di 2020Web dan Progressive Web Apps di 2020
Web dan Progressive Web Apps di 2020
 
Remote Working/Learning
Remote Working/LearningRemote Working/Learning
Remote Working/Learning
 
How to learn programming
How to learn programmingHow to learn programming
How to learn programming
 
Rapid App Development with AWS Amplify
Rapid App Development with AWS AmplifyRapid App Development with AWS Amplify
Rapid App Development with AWS Amplify
 
Menguak Misteri Module Bundler
Menguak Misteri Module BundlerMenguak Misteri Module Bundler
Menguak Misteri Module Bundler
 
Beberapa Web API Menarik
Beberapa Web API MenarikBeberapa Web API Menarik
Beberapa Web API Menarik
 
MVP development from software developer perspective
MVP development from software developer perspectiveMVP development from software developer perspective
MVP development from software developer perspective
 
Ekosistem JavaScript di Indonesia
Ekosistem JavaScript di IndonesiaEkosistem JavaScript di Indonesia
Ekosistem JavaScript di Indonesia
 
Perkenalan ReasonML
Perkenalan ReasonMLPerkenalan ReasonML
Perkenalan ReasonML
 
How I Generate Idea
How I Generate IdeaHow I Generate Idea
How I Generate Idea
 
Strategi Presentasi Untuk Developer Workshop Slide
Strategi Presentasi Untuk Developer Workshop SlideStrategi Presentasi Untuk Developer Workshop Slide
Strategi Presentasi Untuk Developer Workshop Slide
 
Lesson Learned from Prolific Developers
Lesson Learned from Prolific DevelopersLesson Learned from Prolific Developers
Lesson Learned from Prolific Developers
 
Clean Code JavaScript
Clean Code JavaScriptClean Code JavaScript
Clean Code JavaScript
 
The Future of AI
The Future of AIThe Future of AI
The Future of AI
 
Chrome Dev Summit 2018 - Personal Take Aways
Chrome Dev Summit 2018 - Personal Take AwaysChrome Dev Summit 2018 - Personal Take Aways
Chrome Dev Summit 2018 - Personal Take Aways
 
Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6
 
Modern Static Site with GatsbyJS
Modern Static Site with GatsbyJSModern Static Site with GatsbyJS
Modern Static Site with GatsbyJS
 
Introduction to ReasonML
Introduction to ReasonMLIntroduction to ReasonML
Introduction to ReasonML
 

Recently uploaded

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesSanjay Willie
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 

Recently uploaded (20)

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 

Machine Learning For Web Developers

  • 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?
  • 6. Start with what we already familiar with
  • 8. Quick Recap ✓ Make a career leap ✓ Start with what we familiar with ✓ Machine learning is more approachable
  • 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.
  • 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.
  • 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?
  • 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.
  • 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
  • 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
  • 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 });
  • 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
  • 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