Skip to content

Update C1_W4_Assignment.js #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sulisindriyani wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Update C1_W4_Assignment.js #56

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a1f0f76
Update C1_W4_Assignment.js
Nov 11, 2024
8879c7e
Update C1_W4_Assignment.js
Nov 11, 2024
a4c9c34
Update C1_W4_Assignment.js
Nov 11, 2024
519731c
Update C1_W4_Assignment.js
Nov 12, 2024
910c99c
Update C1_W4_Assignment.js
Nov 12, 2024
40c1c3f
Update C1_W4_Assignment.js
Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 91 additions & 108 deletions C1_Browser-based-TF-JS/W4/assignment/C1_W4_Assignment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,87 +2,81 @@ 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});
}

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: [

// YOUR CODE HERE

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.batchNormalization(),
tf.layers.dropout({rate: 0.3}), // Dropout 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


// Compile the model using the categoricalCrossentropy loss, and
// the optimizer you defined above.
model.compile(// YOUR CODE HERE);

let loss = 0;
model.fit(dataset.xs, dataset.ys, {
epochs: 10,


const optimizer = tf.train.adam(0.0001);

model.compile({
optimizer: optimizer,
loss: 'categoricalCrossentropy',
metrics: ['accuracy']
});

let loss = 0;
await model.fit(dataset.xs, dataset.ys, {
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)}`);
}
});
}
});
}

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.

// YOUR CODE HERE


}
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() {
Expand All @@ -94,64 +88,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.

// YOUR CODE HERE


}
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();
init();