From baf0acc89256bea9a4a3bdf299d2fb7c282356d7 Mon Sep 17 00:00:00 2001
From: anisaanada-ML <m182b4kx0565@bangkit.academy>
Date: Thu, 21 Nov 2024 01:01:55 +0700
Subject: [PATCH] Update C1_W2_Assignment.js

---
 .../W2/assignment/C1_W2_Assignment.js         | 48 +++++++++++++++----
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/C1_Browser-based-TF-JS/W2/assignment/C1_W2_Assignment.js b/C1_Browser-based-TF-JS/W2/assignment/C1_W2_Assignment.js
index 8c7d1557..506e9771 100755
--- a/C1_Browser-based-TF-JS/W2/assignment/C1_W2_Assignment.js
+++ b/C1_Browser-based-TF-JS/W2/assignment/C1_W2_Assignment.js
@@ -15,12 +15,31 @@ function getModel() {
     // HINT: Take a look at the MNIST example.
     model = tf.sequential();
     
-    // YOUR CODE HERE
+    model.add(tf.layers.conv2d({
+        inputShape: [28, 28, 1],
+        filters: 32,
+        kernelSize: 3,
+        activation: 'relu'
+    }));
+    model.add(tf.layers.maxPooling2d({ poolSize: 2 }));
+    model.add(tf.layers.conv2d({
+        filters: 64,
+        kernelSize: 3,
+        activation: 'relu'
+    }));
+    model.add(tf.layers.maxPooling2d({ poolSize: 2 }));
+    model.add(tf.layers.flatten());
+    model.add(tf.layers.dense({ units: 128, activation: 'relu' }));
+    model.add(tf.layers.dense({ units: 10, activation: 'softmax' }));
     
     
     // Compile the model using the categoricalCrossentropy loss,
     // the tf.train.adam() optimizer, and `acc` for your metrics.
-    model.compile(// YOUR CODE HERE);
+    model.compile({
+        optimizer: tf.train.adam(),
+        loss: 'categoricalCrossentropy',
+        metrics: ['accuracy']
+    });
     
     return model;
 }
@@ -28,17 +47,17 @@ function getModel() {
 async function train(model, data) {
         
     // Set the following metrics for the callback: 'loss', 'val_loss', 'acc', 'val_acc'.
-    const metrics = // YOUR CODE HERE    
+    const metrics = ['loss', 'val_loss', 'acc', 'val_acc'];
 
         
     // Create the container for the callback. Set the name to 'Model Training' and 
     // use a height of 1000px for the styles. 
-    const container = // YOUR CODE HERE   
+    const container = { name: 'Model Training', styles: { height: '1000px' } };
     
     
     // Use tfvis.show.fitCallbacks() to setup the callbacks. 
     // Use the container and metrics defined above as the parameters.
-    const fitCallbacks = // YOUR CODE HERE
+    const fitCallbacks = tfvis.show.fitCallbacks(container, metrics);
     
     const BATCH_SIZE = 512;
     const TRAIN_DATA_SIZE = 6000;
@@ -47,13 +66,25 @@ async function train(model, data) {
     // Get the training batches and resize them. Remember to put your code
     // inside a tf.tidy() clause to clean up all the intermediate tensors.
     // HINT: Take a look at the MNIST example.
-    const [trainXs, trainYs] = // YOUR CODE HERE
+    const [trainXs, trainYs] = tf.tidy(() => {
+        const d = data.nextTrainBatch(TRAIN_DATA_SIZE);
+        return [
+            d.xs.reshape([TRAIN_DATA_SIZE, 28, 28, 1]),
+            d.labels
+        ];
+    });
 
     
     // Get the testing batches and resize them. Remember to put your code
     // inside a tf.tidy() clause to clean up all the intermediate tensors.
     // HINT: Take a look at the MNIST example.
-    const [testXs, testYs] = // YOUR CODE HERE
+    const [testXs, testYs] = tf.tidy(() => {
+        const d = data.nextTestBatch(TEST_DATA_SIZE);
+        return [
+            d.xs.reshape([TEST_DATA_SIZE, 28, 28, 1]),
+            d.labels
+        ];
+    });
 
     
     return model.fit(trainXs, trainYs, {
@@ -132,6 +163,3 @@ async function run() {
 }
 
 document.addEventListener('DOMContentLoaded', run);
-
-
-