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..24cc2fb0 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 @@ -1,61 +1,70 @@ import {FMnistData} from './fashion-data.js'; + var canvas, ctx, saveButton, clearButton; var pos = {x:0, y:0}; var rawImage; var model; function getModel() { - - // In the space below create a convolutional neural network that can classify the - // images of articles of clothing in the Fashion MNIST dataset. Your convolutional - // neural network should only use the following layers: conv2d, maxPooling2d, - // flatten, and dense. Since the Fashion MNIST has 10 classes, your output layer - // should have 10 units and a softmax activation function. You are free to use as - // many layers, filters, and neurons as you like. - // HINT: Take a look at the MNIST example. model = tf.sequential(); - // YOUR CODE HERE - - - // Compile the model using the categoricalCrossentropy loss, - // the tf.train.adam() optimizer, and `acc` for your metrics. - model.compile(// YOUR CODE HERE); - + model.add(tf.layers.conv2d({ + inputShape: [28, 28, 1], + kernelSize: 3, + filters: 16, + activation: 'relu' + })); + + model.add(tf.layers.maxPooling2d({ + poolSize: [2, 2] + })); + + model.add(tf.layers.conv2d({ + kernelSize: 3, + filters: 32, + activation: 'relu' + })); + + model.add(tf.layers.flatten()); + + model.add(tf.layers.dense({ + units: 128, + activation: 'relu' + })); + + model.add(tf.layers.dense({ + units: 10, + activation: 'softmax' + })); + + model.compile({ + loss: 'categoricalCrossentropy', + optimizer: tf.train.adam(), + metrics: ['acc'] + }); + return model; } async function train(model, data) { - - // Set the following metrics for the callback: 'loss', 'val_loss', 'acc', 'val_acc'. - const metrics = // YOUR CODE HERE - - - // 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 - - - // Use tfvis.show.fitCallbacks() to setup the callbacks. - // Use the container and metrics defined above as the parameters. - const fitCallbacks = // YOUR CODE HERE - + const metrics = ['loss', 'val_loss', 'acc', 'val_acc']; + const container = document.getElementById('training'); + const fitCallbacks = tfvis.show.fitCallbacks(container, metrics); + const BATCH_SIZE = 512; const TRAIN_DATA_SIZE = 6000; const TEST_DATA_SIZE = 1000; - - // 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 - - // 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 [trainXs, trainYs] = tf.tidy(() => { + const batch = data.nextTrainBatch(TRAIN_DATA_SIZE); + return [batch.xs.reshape([TRAIN_DATA_SIZE, 28, 28, 1]), batch.labels]; + }); + + const [testXs, testYs] = tf.tidy(() => { + const batch = data.nextTestBatch(TEST_DATA_SIZE); + return [batch.xs.reshape([TEST_DATA_SIZE, 28, 28, 1]), batch.labels]; + }); - return model.fit(trainXs, trainYs, { batchSize: BATCH_SIZE, validationData: [testXs, testYs], @@ -100,7 +109,6 @@ function save() { "Dress", "Coat", "Sandal", "Shirt", "Sneaker", "Bag", "Ankle boot"]; - alert(classNames[pIndex]); } @@ -132,6 +140,3 @@ async function run() { } document.addEventListener('DOMContentLoaded', run); - - -