Downloaded 55 times
![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] }));](https://image.slidesharecdn.com/mlforwebdevs-180704032751/85/Machine-Learning-for-Web-Developers-55-320.jpg)
![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](https://image.slidesharecdn.com/mlforwebdevs-180704032751/85/Machine-Learning-for-Web-Developers-56-320.jpg)
![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 });](https://image.slidesharecdn.com/mlforwebdevs-180704032751/85/Machine-Learning-for-Web-Developers-57-320.jpg)
![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 });](https://image.slidesharecdn.com/mlforwebdevs-180704032751/85/Machine-Learning-for-Web-Developers-58-320.jpg)
![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] }));](https://image.slidesharecdn.com/mlforwebdevs-180704032751/75/Machine-Learning-for-Web-Developers-55-2048.jpg)
![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](https://image.slidesharecdn.com/mlforwebdevs-180704032751/75/Machine-Learning-for-Web-Developers-56-2048.jpg)
![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 });](https://image.slidesharecdn.com/mlforwebdevs-180704032751/75/Machine-Learning-for-Web-Developers-57-2048.jpg)
![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 });](https://image.slidesharecdn.com/mlforwebdevs-180704032751/75/Machine-Learning-for-Web-Developers-58-2048.jpg)
Uploaded byRiza Fahmi
Machine Learning for Web Developers
The document presents an overview of machine learning for web developers, covering its definitions, types, and applications. It details how machine learning can be integrated into web development using Machine Learning as a Service (MLaaS) and provides code examples for practical implementations like housing price prediction and object detection. Additionally, it outlines a roadmap for learning machine learning and offers resources such as online courses and platforms for further exploration.
More Related Content
Similar to Machine Learning for Web Developers
Machine Learning for Web Developers
- 1. Machine Learning For WebDevelopers
- 2.
- 3. Agenda • Why weshould 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 Shouldlearn Machine Learning?
- 5.
- 6. Start with whatwe already familiar with
- 7.
- 8. Quick Recap ✓ Makea career leap ✓ Start with what we familiar with ✓ Machine learning is more approachable
- 9.
- 10.
- 11. What is A.I. Thescience (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 afield of computer science that uses statistical techniques to give computer systems the ability to learn.
- 15.
- 16. Machine Learning • Findthe pattern • Predict from the pattern • Learn from new pattern
- 17. Use cases of MachineLearning • Image recognition • Search engine and spam filter • Autonomous vehicle • Medical diagnosis • Playing Games
- 18. Quick Recap ✓ Machinelearning 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 Learningfrom known patterns.
- 21. Supervised Learning Regression Types Classification House price Squarefootage Color Size
- 22. Building Area LandArea 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 • Predictingage of a person • Predicting weather • Predicting stock price
- 24. ClassificaHon Example Diameter Weight ColorFruit 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 fromunknown patterns.
- 27.
- 28. Clustering Example Recommendation System Customers whobought this item also bought
- 29. Clustering Other Examples • Marketsegmentation • Social network analysis • Suggested Content • Targeted advertisement
- 30. Reinforce Learning Machine thatcan observe the environment, select and perform actions, and get rewards in return or penalties in the form of negative reward.
- 31. Reinforce Learning Professional DOTAPlayer vs OpenAI
- 32. Quick Recap ✓ Supervisedis learning from known pattern ✓ Unsupervised is learning from unknown pattern ✓ Reinforce is learning with reward and punishment
- 33. How To UseMachine Learning in Web Development
- 34. OpHons > Machine Learningas a Service - MLaaS > Build Your Own
- 35. MLaaS Machine Learning asa 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.
- 38. MLaaS Machine Learning asa Service • Rekognition — Image recognition • Polly — Text to speech • Lex — Conversational chatbot platform • Sagemaker — Managed machine learning service
- 39. MLaaS Machine Learning asa Service • Dialogflow — Natural Language Conversation • Vision API — Image content analysis • Translation API — Natural Language Processing • Cloud Machine Learning Family
- 40. MLaaS Machine Learning asa Service • Cognitive Toolkit — deep learning toolkit • LUIS.ai — build natural language into apps • Azure Machine Learning — predictive analytics service
- 41. MLaaS Machine Learning asa Service • Watson Machine Learning — Create, train, and deploy models
- 42.
- 43.
- 44. HotDog or NotHotDog 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 NotHotDog The Code 1 const AWS = require('aws-sdk'); 2 require('dotenv').config();
- 46. HotDog or NotHotDog The Code 6 const s3Object = await uploadImage('rekog-techinasia', image);
- 47. HotDog or NotHotDog 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 NotHotDog 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 ✓ Gettingstarted 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 forscientific 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 HousingPrediction 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 modelin 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 ObjectDetection App
- 60. Planning ✓ Create downloadthe 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 4model = await downloadModel(); Object Detection App
- 64. Get Image from Webcam 5await webcam.setup(); 6 const inputImage = webcam.capture(); Object Detection App
- 65. Predict The Object 7const 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 ObjectDetection App
- 67. Roadmap To Learn MachineLearning
- 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.