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 deleted file mode 100755 index 8c7d1557..00000000 --- a/C1_Browser-based-TF-JS/W2/assignment/C1_W2_Assignment.js +++ /dev/null @@ -1,137 +0,0 @@ -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); - - 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 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 - - - return model.fit(trainXs, trainYs, { - batchSize: BATCH_SIZE, - validationData: [testXs, testYs], - epochs: 10, - shuffle: true, - callbacks: fitCallbacks - }); -} - -function setPosition(e){ - pos.x = e.clientX-100; - pos.y = e.clientY-100; -} - -function draw(e) { - if(e.buttons!=1) return; - ctx.beginPath(); - ctx.lineWidth = 24; - ctx.lineCap = 'round'; - ctx.strokeStyle = 'white'; - ctx.moveTo(pos.x, pos.y); - setPosition(e); - ctx.lineTo(pos.x, pos.y); - ctx.stroke(); - rawImage.src = canvas.toDataURL('image/png'); -} - -function erase() { - ctx.fillStyle = "black"; - ctx.fillRect(0,0,280,280); -} - -function save() { - var raw = tf.browser.fromPixels(rawImage,1); - var resized = tf.image.resizeBilinear(raw, [28,28]); - var tensor = resized.expandDims(0); - - var prediction = model.predict(tensor); - var pIndex = tf.argMax(prediction, 1).dataSync(); - - var classNames = ["T-shirt/top", "Trouser", "Pullover", - "Dress", "Coat", "Sandal", "Shirt", - "Sneaker", "Bag", "Ankle boot"]; - - - alert(classNames[pIndex]); -} - -function init() { - canvas = document.getElementById('canvas'); - rawImage = document.getElementById('canvasimg'); - ctx = canvas.getContext("2d"); - ctx.fillStyle = "black"; - ctx.fillRect(0,0,280,280); - canvas.addEventListener("mousemove", draw); - canvas.addEventListener("mousedown", setPosition); - canvas.addEventListener("mouseenter", setPosition); - saveButton = document.getElementById('sb'); - saveButton.addEventListener("click", save); - clearButton = document.getElementById('cb'); - clearButton.addEventListener("click", erase); -} - - -async function run() { - const data = new FMnistData(); - await data.load(); - const model = getModel(); - tfvis.show.modelSummary({name: 'Model Architecture'}, model); - await train(model, data); - await model.save('downloads://my_model'); - init(); - alert("Training is done, try classifying your drawings!"); -} - -document.addEventListener('DOMContentLoaded', run); - - - diff --git a/C1_Browser-based-TF-JS/W2/assignment/fashion-mnist.html b/C1_Browser-based-TF-JS/W2/assignment/fashion-mnist.html index 52f6254a..efe696d8 100755 --- a/C1_Browser-based-TF-JS/W2/assignment/fashion-mnist.html +++ b/C1_Browser-based-TF-JS/W2/assignment/fashion-mnist.html @@ -1,3 +1,4 @@ +