From a1f0f76d030395d6c542165f76413ae5e0d47d91 Mon Sep 17 00:00:00 2001 From: sulisindriyani Date: Mon, 11 Nov 2024 22:40:38 +0700 Subject: [PATCH 1/6] Update C1_W4_Assignment.js --- .../W4/assignment/C1_W4_Assignment.js | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js index e055f3cb..21489ec8 100755 --- a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js +++ b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js @@ -25,20 +25,25 @@ async function train() { // using ReLu activation functions where applicable. model = tf.sequential({ layers: [ - - // YOUR CODE HERE - + tf.layers.flatten({inputShape: mobilenet.outputs[0].shape.slice(1)}), // Flatten layer + tf.layers.dense({units: 128, activation: 'relu'}), // Hidden layer + tf.layers.dense({units: 64, activation: 'relu'}), // Hidden layer + tf.layers.dense({units: 5, activation: 'softmax'}) // Output layer ] }); // Set the optimizer to be tf.train.adam() with a learning rate of 0.0001. - const optimizer = // YOUR CODE HERE + const optimizer = tf.train.adam(0.0001); // Optimizer dengan learning rate 0.0001 - + // Compile the model using the categoricalCrossentropy loss, and // the optimizer you defined above. - model.compile(// YOUR CODE HERE); + model.compile( + optimizer: optimizer, + loss: 'categoricalCrossentropy', + metrics: ['accuracy'] + }); let loss = 0; model.fit(dataset.xs, dataset.ys, { @@ -74,8 +79,10 @@ function handleButton(elem){ // Add a case for lizard samples. // HINT: Look at the previous cases. - - // YOUR CODE HERE + case "4": + lizardSamples++; + document.getElementById("lizardsamples").innerText = "Lizard samples:" + lizardSamples; + break; } @@ -111,8 +118,9 @@ async function predict() { // Add a case for lizard samples. // HINT: Look at the previous cases. - - // YOUR CODE HERE + case 4: + predictionText = "I see Lizard"; + break; } @@ -154,4 +162,4 @@ async function init(){ } -init(); \ No newline at end of file +init(); From 8879c7ef5501cbdac0e6e0937c7c5e2aacca8aa0 Mon Sep 17 00:00:00 2001 From: sulisindriyani Date: Mon, 11 Nov 2024 23:12:35 +0700 Subject: [PATCH 2/6] Update C1_W4_Assignment.js --- C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js index 21489ec8..f14dffd6 100755 --- a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js +++ b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js @@ -39,7 +39,7 @@ async function train() { // Compile the model using the categoricalCrossentropy loss, and // the optimizer you defined above. - model.compile( + model.compile({ optimizer: optimizer, loss: 'categoricalCrossentropy', metrics: ['accuracy'] From a4c9c34a43151235683ab1732e1bc40cd36590ab Mon Sep 17 00:00:00 2001 From: sulisindriyani Date: Mon, 11 Nov 2024 23:24:00 +0700 Subject: [PATCH 3/6] Update C1_W4_Assignment.js From 519731c9ace9e680cb3950b89c94c65c35252d81 Mon Sep 17 00:00:00 2001 From: sulisindriyani Date: Tue, 12 Nov 2024 13:12:36 +0700 Subject: [PATCH 4/6] Update C1_W4_Assignment.js --- .../W4/assignment/C1_W4_Assignment.js | 185 ++++++++---------- 1 file changed, 77 insertions(+), 108 deletions(-) diff --git a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js index f14dffd6..bfeb1850 100755 --- a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js +++ b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js @@ -2,11 +2,11 @@ let mobilenet; let model; const webcam = new Webcam(document.getElementById('wc')); const dataset = new RPSDataset(); -var rockSamples=0, paperSamples=0, scissorsSamples=0, spockSamples=0, lizardSamples=0; +var rockSamples = 0, paperSamples = 0, scissorsSamples = 0, spockSamples = 0, lizardSamples = 0; let isPredicting = false; async function loadMobilenet() { - const mobilenet = await tf.loadLayersModel('https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_1.0_224/model.json'); + mobilenet = await tf.loadLayersModel('https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_1.0_224/model.json'); const layer = mobilenet.getLayer('conv_pw_13_relu'); return tf.model({inputs: mobilenet.inputs, outputs: layer.output}); } @@ -14,82 +14,63 @@ async function loadMobilenet() { async function train() { dataset.ys = null; dataset.encodeLabels(5); - - // In the space below create a neural network that can classify hand gestures - // corresponding to rock, paper, scissors, lizard, and spock. The first layer - // of your network should be a flatten layer that takes as input the output - // from the pre-trained MobileNet model. Since we have 5 classes, your output - // layer should have 5 units and a softmax activation function. You are free - // to use as many hidden layers and neurons as you like. - // HINT: Take a look at the Rock-Paper-Scissors example. We also suggest - // using ReLu activation functions where applicable. + model = tf.sequential({ layers: [ - tf.layers.flatten({inputShape: mobilenet.outputs[0].shape.slice(1)}), // Flatten layer - tf.layers.dense({units: 128, activation: 'relu'}), // Hidden layer - tf.layers.dense({units: 64, activation: 'relu'}), // Hidden layer - tf.layers.dense({units: 5, activation: 'softmax'}) // Output layer + tf.layers.flatten({inputShape: mobilenet.outputs[0].shape.slice(1)}), + tf.layers.dense({units: 128, activation: 'relu'}), + tf.layers.dense({units: 64, activation: 'relu'}), + tf.layers.dense({units: 5, activation: 'softmax'}) // Output layer ] }); - - - // Set the optimizer to be tf.train.adam() with a learning rate of 0.0001. - const optimizer = tf.train.adam(0.0001); // Optimizer dengan learning rate 0.0001 - - - // Compile the model using the categoricalCrossentropy loss, and - // the optimizer you defined above. + + const optimizer = tf.train.adam(0.0001); + model.compile({ - optimizer: optimizer, - loss: 'categoricalCrossentropy', - metrics: ['accuracy'] + optimizer: optimizer, + loss: 'categoricalCrossentropy', + metrics: ['accuracy'] }); - + let loss = 0; - model.fit(dataset.xs, dataset.ys, { + await model.fit(dataset.xs, dataset.ys, { epochs: 10, callbacks: { onBatchEnd: async (batch, logs) => { loss = logs.loss.toFixed(5); console.log('LOSS: ' + loss); - } } - }); + } + }); } +function handleButton(elem) { + switch (elem.id) { + case "0": + rockSamples++; + document.getElementById("rocksamples").innerText = "Rock samples:" + rockSamples; + break; + case "1": + paperSamples++; + document.getElementById("papersamples").innerText = "Paper samples:" + paperSamples; + break; + case "2": + scissorsSamples++; + document.getElementById("scissorssamples").innerText = "Scissors samples:" + scissorsSamples; + break; + case "3": + spockSamples++; + document.getElementById("spocksamples").innerText = "Spock samples:" + spockSamples; + break; + case "4": + lizardSamples++; + document.getElementById("lizardsamples").innerText = "Lizard samples:" + lizardSamples; + break; + } -function handleButton(elem){ - switch(elem.id){ - case "0": - rockSamples++; - document.getElementById("rocksamples").innerText = "Rock samples:" + rockSamples; - break; - case "1": - paperSamples++; - document.getElementById("papersamples").innerText = "Paper samples:" + paperSamples; - break; - case "2": - scissorsSamples++; - document.getElementById("scissorssamples").innerText = "Scissors samples:" + scissorsSamples; - break; - case "3": - spockSamples++; - document.getElementById("spocksamples").innerText = "Spock samples:" + spockSamples; - break; - - // Add a case for lizard samples. - // HINT: Look at the previous cases. - case "4": - lizardSamples++; - document.getElementById("lizardsamples").innerText = "Lizard samples:" + lizardSamples; - break; - - - } - label = parseInt(elem.id); - const img = webcam.capture(); - dataset.addExample(mobilenet.predict(img), label); - + const label = parseInt(elem.id); + const img = webcam.capture(); + dataset.addExample(mobilenet.predict(img), label); } async function predict() { @@ -101,65 +82,53 @@ async function predict() { return predictions.as1D().argMax(); }); const classId = (await predictedClass.data())[0]; - var predictionText = ""; - switch(classId){ - case 0: - predictionText = "I see Rock"; - break; - case 1: - predictionText = "I see Paper"; - break; - case 2: - predictionText = "I see Scissors"; - break; - case 3: - predictionText = "I see Spock"; - break; - - // Add a case for lizard samples. - // HINT: Look at the previous cases. - case 4: - predictionText = "I see Lizard"; - break; - - - } - document.getElementById("prediction").innerText = predictionText; - - + let predictionText = ""; + + switch (classId) { + case 0: + predictionText = "I see Rock"; + break; + case 1: + predictionText = "I see Paper"; + break; + case 2: + predictionText = "I see Scissors"; + break; + case 3: + predictionText = "I see Spock"; + break; + case 4: + predictionText = "I see Lizard"; + break; + } + document.getElementById("prediction").innerText = predictionText; + predictedClass.dispose(); await tf.nextFrame(); } } - -function doTraining(){ - train(); - alert("Training Done!") +function doTraining() { + train().then(() => alert("Training Done!")); } -function startPredicting(){ - isPredicting = true; - predict(); +function startPredicting() { + isPredicting = true; + predict(); } -function stopPredicting(){ - isPredicting = false; - predict(); +function stopPredicting() { + isPredicting = false; } - -function saveModel(){ - model.save('downloads://my_model'); +function saveModel() { + model.save('downloads://my_model'); } - -async function init(){ - await webcam.setup(); - mobilenet = await loadMobilenet(); - tf.tidy(() => mobilenet.predict(webcam.capture())); - +async function init() { + await webcam.setup(); + mobilenet = await loadMobilenet(); + tf.tidy(() => mobilenet.predict(webcam.capture())); } - init(); From 910c99c927c86543ef61a34f1d1c09c367ad7ff2 Mon Sep 17 00:00:00 2001 From: sulisindriyani Date: Tue, 12 Nov 2024 13:46:38 +0700 Subject: [PATCH 5/6] Update C1_W4_Assignment.js --- .../W4/assignment/C1_W4_Assignment.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js index bfeb1850..e32614a0 100755 --- a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js +++ b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js @@ -18,8 +18,12 @@ async function train() { model = tf.sequential({ layers: [ tf.layers.flatten({inputShape: mobilenet.outputs[0].shape.slice(1)}), + tf.layers.dense({units: 256, activation: 'relu'}), + tf.layers.batchNormalization(), + tf.layers.dropout({rate: 0.3}), // Dropout layer tf.layers.dense({units: 128, activation: 'relu'}), - tf.layers.dense({units: 64, activation: 'relu'}), + tf.layers.batchNormalization(), + tf.layers.dropout({rate: 0.3}), // Dropout layer tf.layers.dense({units: 5, activation: 'softmax'}) // Output layer ] }); @@ -32,13 +36,14 @@ async function train() { metrics: ['accuracy'] }); - let loss = 0; +let loss = 0; await model.fit(dataset.xs, dataset.ys, { - epochs: 10, + epochs: 20, // Meningkatkan jumlah epochs untuk pelatihan yang lebih baik + batchSize: 32, // Menambahkan batch size + validationSplit: 0.2, // Menambahkan validation split untuk generalisasi lebih baik callbacks: { - onBatchEnd: async (batch, logs) => { - loss = logs.loss.toFixed(5); - console.log('LOSS: ' + loss); + onEpochEnd: async (epoch, logs) => { + console.log(`Epoch ${epoch + 1}: loss = ${logs.loss.toFixed(5)}, accuracy = ${logs.acc.toFixed(5)}`); } } }); From 40c1c3f0e340ea3b6d8c85eb8a38ee72e01bfc39 Mon Sep 17 00:00:00 2001 From: sulisindriyani Date: Tue, 12 Nov 2024 13:47:09 +0700 Subject: [PATCH 6/6] Update C1_W4_Assignment.js --- C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js | 1 + 1 file changed, 1 insertion(+) diff --git a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js index e32614a0..3c4e8caf 100755 --- a/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js +++ b/C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js @@ -28,6 +28,7 @@ async function train() { ] }); + const optimizer = tf.train.adam(0.0001); model.compile({