MACHINE LEARNING
OLEH : Fatan Kasyidi & Ridwan Ilyas
Modul 10 RNN Sketch Prediction, Word2Vec, Image Classification With
Speech Recognition
Program 1
Buat folder dengan nama rnn_sketch di manapun pada window explorer, dianjurkan untuk
menyimpannya di htdocs. Kemudian tulis script di bawah ini dengan membuat 2 file.
index.html
<html>
<head>
<meta charset="UTF-8" >
<title>SketchRNN</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"
></script>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"
type="text/javascript"></script>
</head>
<body>
<h1>SketchRNN</h1>
<p id="status">Loading Model...</p>
<p><button id="clear">Clear</button></p>
<script src="sketch.js"></script>
</body>
</html>
sketch.js
// The SketchRNN model
let model;
let previous_pen = 'down';
let x, y;
let strokePath;
let seedStrokes = [];
// Storing a reference to the canvas
let canvas;
function setup() {
canvas = createCanvas(640, 480);
canvas.hide();
background(220);
1
MACHINE LEARNING
OLEH : Fatan Kasyidi & Ridwan Ilyas
model = ml5.sketchRNN('duck', modelReady);
let button = select('#clear');
button.mousePressed(clearDrawing);
}
function modelReady() {
canvas.show();
canvas.mouseReleased(startSketchRNN);
select('#status').html('model ready - sketchRNN will begin after you draw
with the mouse');
}
function clearDrawing() {
background(220);
seedStrokes = [];
model.reset();
}
function startSketchRNN() {
x = mouseX;
y = mouseY;
model.generate(seedStrokes, gotStroke);
}
function draw() {
if (mouseIsPressed) {
// Draw line
stroke(0);
strokeWeight(3.0);
line(pmouseX, pmouseY, mouseX, mouseY);
let userStroke = {
dx: mouseX - pmouseX,
dy: mouseY - pmouseY,
pen: 'down'
};
\ seedStrokes.push(userStroke);
}
if (strokePath) {
if (previous_pen == 'down') {
stroke(0);
strokeWeight(3.0);
line(x, y, x + strokePath.dx, y + strokePath.dy);
}
x += strokePath.dx;
y += strokePath.dy;
previous_pen = strokePath.pen;
if (strokePath.pen !== 'end') {
strokePath = null;
model.generate(gotStroke);
}
}
2
MACHINE LEARNING
OLEH : Fatan Kasyidi & Ridwan Ilyas
function gotStroke(err, s) {
strokePath = s;
}
Apa yang terjadi setelah program dijalankan?
Cobalah ganti parameter duck pada model = ml5.sketchRNN('duck', modelReady);
dengan daftar nama-nama di bawah ini?
'elephant', 'helicopter', 'palm_tree',
elephantpig', 'kangaroo', 'parrot',
'eye', 'key', 'passport',
'face', 'lantern', 'peas',
'fan', 'lighthouse', 'penguin',
'fire_hydrant', 'lion', 'pig',
'firetruck', 'lionsheep', 'pigsheep',
'flamingo', 'lobster', 'pineapple',
'flower', 'map', 'pool',
'floweryoga', 'mermaid', 'postcard',
'frog', 'monapassport', 'power_outlet',
'frogsofa', 'monkey', 'rabbit',
'garden', 'mosquito', 'rabbitturtle',
'hand', 'octopus', 'radio',
'hedgeberry', 'owl',
'hedgehog', 'paintbrush',
Tampilkan hasil sketch dari SELURUH daftar nama objek yang tertera di atas.
Program 2
Buat folder dengan nama word2vec di manapun pada window explorer, dianjurkan untuk
menyimpannya di htdocs. Kemudian tulis script di bawah ini dengan membuat 2 file.
index.html
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Word2Vec example with p5.js. Using a pre-trained model on common
English words.</title>
3
MACHINE LEARNING
OLEH : Fatan Kasyidi & Ridwan Ilyas
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"
></script>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"
type="text/javascript"></script>
<style></style>
</head>
<body>
<h1>Word2Vec example with p5.js. Using a pre-trained model on common
English words.</h1>
<p id='status'>Loading Model...</p>
<div>
<div class="row">
<p>
<input type="text" value="rainbow" id="nearword" />
<button id="submit" class="btn btn-primary">is nearest to
...</button>
</p>
<p id="results"></p>
</div>
<div class="row">
<p>
Between
<input type="text" value="rainbow" id="between1" />
and
<input type="text" value="kitten" id="between2" />
<button id="submit2" class="btn btn-primary">is ...</button>
</p>
<p id="results2"></p>
</div>
<div class="row">
<p>
<input type="text" value="pizza" id="isto1" /> is to
<input type="text" value="humans" id="isto2" /> as
<input type="text" value="fish" id="isto3" />
<button id="submit3" class="btn btn-primary">is to ...</button>
</p>
<p id="results3"></p>
</div>
</div>
<script src="sketch.js"></script>
</body>
</html>
4
MACHINE LEARNING
OLEH : Fatan Kasyidi & Ridwan Ilyas
sketch.js
let word2Vec;
function modelLoaded() {
select('#status').html('Model Loaded');
}
function setup() {
noLoop();
noCanvas();
word2Vec = ml5.word2vec('data/wordvecs10000.json', modelLoaded);
let nearWordInput = select('#nearword');
let nearButton = select('#submit');
let nearResults = select('#results');
let betweenWordInput1 = select("#between1");
let betweenWordInput2 = select("#between2");
let betweenButton = select("#submit2");
let betweenResults = select("#results2");
let addInput1 = select("#isto1");
let addInput2 = select("#isto2");
let addInput3 = select("#isto3");
let addButton = select("#submit3");
let addResults = select("#results3");
nearButton.mousePressed(() => {
let word = nearWordInput.value();
word2Vec.nearest(word, (err, result) => {
let output = '';
if (result) {
for (let i = 0; i < result.length; i++) {
output += result[i].word + '<br/>';
}
} else {
output = 'No word vector found';
}
nearResults.html(output);
});
});
betweenButton.mousePressed(() => {
let word1 = betweenWordInput1.value();
let word2 = betweenWordInput2.value();
word2Vec.average([word1, word2], 4, (err, average) => {
betweenResults.html(average[0].word);
})
});
addButton.mousePressed(() => {
5
MACHINE LEARNING
OLEH : Fatan Kasyidi & Ridwan Ilyas
let is1 = addInput1.value();
let to1 = addInput2.value();
let is2 = addInput3.value();
word2Vec.subtract([to1, is1])
.then(difference => word2Vec.add([is2, difference[0].word]))
.then(result => addResults.html(result[0].word))
});
}
Gunakan data di bawah ini untuk melengkapi program kedua. Simpan dalam folder data.
Apa yang dihasilkan dari program kedua ini? Jelaskan apa kaitannya dengan cosine similarity pada
program ini?
Program 3
Buat folder dengan nama image_classification di manapun pada window explorer, dianjurkan untuk
menyimpannya di htdocs. Kemudian tulis script di bawah ini dengan membuat 2 file.
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Webcam Image Classification using MobileNet and p5.js</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"
></script>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"
type="text/javascript"></script>
</head>
<body>
<h1>Webcam Image Classification using MobileNet and p5.js</h1>
<script src="sketch.js"></script>
</body>
6
MACHINE LEARNING
OLEH : Fatan Kasyidi & Ridwan Ilyas
</html>
sketch.js
let classifier;
let video;
let resultsP;
function setup() {
noCanvas();
video = createCapture(VIDEO);
classifier = ml5.imageClassifier('MobileNet', video, modelReady);
resultsP = createP('Loading model and video...');
}
function modelReady() {
console.log('Model Ready');
classifyVideo();
}
function classifyVideo() {
classifier.classify(gotResult);
}
function gotResult(err, results) {
resultsP.html(results[0].label + ' ' + nf(results[0].confidence, 0, 2));
classifyVideo();
}
Dari program tersebut, gunakanlah benda yang ada disekitar anda untuk dikenali, jumlah benda yang
harus dikenali sebanyak 8 benda, sertakan bukti screenshot bahwa benda yang diklasifikasikan dapat
dikenali.
Semuanya disusun dalam satu dokumen laporan akhir atau modul 10 yang dikumpulkan paling lambat
pada tanggal 18 Mei 2019 pukul 22.00 WIB ke email asisten praktikum.
