2d:null 2e:["$","title",null,{"children":"Deep Learning Tutorial with deeplearn.js | Minsuk Kahng | Observable"}] 33:T489,trainingCost = { // Feed training data into the model const trainingInput = splittedDataset.training.map(instance => dl.Array1D.new(instance.input)); const trainingLabel = splittedDataset.training.map(instance => { const arrayLabel = dl.Array1D.zeros([labels.length]); arrayLabel.set(1, instance.label); return arrayLabel; }); const shuffledInputProviderBuilder = new dl.InCPUMemoryShuffledInputProviderBuilder([trainingInput, trainingLabel]); const [inputProvider, labelProvider] = shuffledInputProviderBuilder.getInputProviders(); const feedEntries = [ {tensor: model.inputTensor, data: inputProvider}, {tensor: model.labelTensor, data: labelProvider} ]; // Optimizer. const optimizer = new dl.SGDOptimizer(learningRate); // Training. while (isTraining && trainingSessionInfo.batchCounter < maxBatchCounter) { const cost = session.train( model.costTensor, feedEntries, batchSize, optimizer, dl.CostReduction.MEAN); trainingSessionInfo.costList.push(cost.get()); trainingSessionInfo.batchCounter++; yield trainingSessionInfo.costList; } yield trainingSessionInfo.costList; }34:T855,inferenceResults = { restartInference; const confusion = new Array(labels.length * labels.length).fill(undefined).map((v, i) => { return {trueLabel: labels[Math.floor(i / labels.length)], predictedLabel: labels[i % labels.length], count: 0}; }); let total = 0; let correct = 0; const results = splittedDataset.test.map((instance, i) => { return {trueLabel: instance.label, predictedLabel: undefined, correct: false}; }); while (isTraining) { for (let i = 0; i < splittedDataset.test.length; ++i) { const instance = splittedDataset.test[i]; const feedEntry = [{tensor: model.inputTensor, data: inferenceData[i]}]; const output = session.eval(model.outputTensor, feedEntry); const predictionScores = output.getValues(); const predictedLabel = predictionScores.indexOf(Math.max.apply(Math, predictionScores)); if (results[i].predictedLabel == undefined) { // For first iteration. total++; if (instance.label == predictedLabel) correct++; results[i].correct = instance.label == predictedLabel; confusion[instance.label * labels.length + predictedLabel].count++; results[i].predictedLabel = predictedLabel; } else if (results[i].predictedLabel != predictedLabel) { // Update results if changed. const newCorrect = instance.label == predictedLabel ? true : false; if (results[i].correct == false && newCorrect == true) { correct++; } else if (results[i].correct == true && newCorrect == false) { correct--; } results[i].correct = newCorrect; if (results[i].predictedLabel != undefined) { confusion[instance.label * labels.length + results[i].predictedLabel].count--; } confusion[instance.label * labels.length + predictedLabel].count++; results[i].predictedLabel = predictedLabel; } yield {total: total, correct: correct, accuracy: `${(correct / total * 100.0).toFixed(2)}%`, confusionMatrix: confusion}; } } yield {total: total, correct: correct, confusionMatrix: confusion}; }35:[] 31:{"id":"0452eed5750ffb63","slug":"deep-learning-tutorial-with-deeplearn-js","title":"Deep Learning Tutorial with deeplearn.js","thumbnail":"b8519aaa261050b06a50eac3790d8d67a59e7946c1c72ba64961275773642d80","access_level":"public","create_time":"$D2018-02-01T20:50:53.361Z","update_time":"$D2018-02-18T01:55:53.438Z","view_time":null,"first_public_time":"$D2018-02-04T07:49:19.373Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"a048c967d800fa25","login":"minsukkahng","name":"Minsuk Kahng","avatar_url":"https://avatars-next.observableusercontent.com/bb32e759f15d8273b7a2cd709fd380d16e4e289e4b96b8d67ee645ed705d4082","tier":"starter_2024"},"version":795,"publish_version":795,"role":null,"authored":false,"authors":[{"type":"individual","id":"d70355efbb678a19","login":"minsukkahng","name":"Minsuk Kahng","avatar_url":"https://avatars-next.observableusercontent.com/bb32e759f15d8273b7a2cd709fd380d16e4e289e4b96b8d67ee645ed705d4082","tier":null}],"members":[{"type":"individual","id":"d70355efbb678a19","login":"minsukkahng","name":"Minsuk Kahng","avatar_url":"https://avatars-next.observableusercontent.com/bb32e759f15d8273b7a2cd709fd380d16e4e289e4b96b8d67ee645ed705d4082","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":26,"collection":null,"type":"notebook","body":{"title":"Deep Learning Tutorial with deeplearn.js","cells":[{"id":0,"value":"md`# Deep Learning Tutorial with deeplearn.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"md`*Building and running deep learning models on your browser using Observable and deeplearn.js*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"md`With Observable, you can interactively play with your JavaScript code. Recently, several JavaScript-based machine learning libraries have been released, which means you can build and run machine learning, or even deep learning, models on this notebook without servers. Here, I create an example tutorial for students to learn machine learning by showing the process of building a simple neural net model for the Iris data using [deeplearn.js](https://deeplearnjs.org).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"md`## Importing Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"md`We'll be using deeplearn.js, D3, and Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"dl = require(\"https://unpkg.com/deeplearn@0.4.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`## Loading Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`The first step is to obtain a dataset. This tutorial will be using the Iris dataset, one of the well-known public machine learning datasets. The primary machine learning task for this dataset is to classify flowers into one of the three classes using their numerical features.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"md`Load a CSV file.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"dataset = d3.csv(\"https://gist.githubusercontent.com/minsukkahng/ad6376bbaf563ff83f2e41b4f9d5ffaf/raw/be3fb8ef5ad37efc0853e469ec1b726ad0707837/iris.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"md`It consists of 150 instances and 5 columns: four for features and one for label. I assumed that the last column is for labels, named *label*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"features = dataset.columns.slice(0, dataset.columns.length - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"labels = dataset.map(row => row.label).filter((v, i, a) => a.indexOf(v) === i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`## Exploring Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"md`Before building machine learning models, explore the dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`First of all, I want to learn the distribution of feature values by each class. Using Vega-Lite, I create a strip plot (it's like 1-D scatterplot, where each vertical bar represents a data point). You can choose another feature from the dropdown box below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"viewof selectedFeature = DOM.select(features)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"vegalite({\n data: {values: dataset},\n mark: \"tick\",\n encoding: {\n x: {field: selectedFeature, type: \"quantitative\"},\n y: {field: \"label\", type: \"nominal\"},\n color: {field: \"label\", type: \"nominal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`Next, I create a scatterplot for a feature pair. You can choose two features using the dropdown boxes below to see their correlation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"viewof selectedFeatureX = DOM.select(features)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"viewof selectedFeatureY = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"vegalite({\n data: {values: dataset},\n mark: \"point\",\n encoding: {\n x: {field: selectedFeatureX, type: \"quantitative\"},\n y: {field: selectedFeatureY, type: \"quantitative\"},\n color: {field: \"label\", type: \"nominal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`## Spliting Training and Test Set`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`In supervised machine learning, a dataset is splitted into training and test sets. You can determine a ratio between the training and test sets using the slider below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"viewof kFold = slider({min: 2, max: 10, value: 5, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"splittedDataset = {\n const instances = dataset.map((instance, i) => {\n return {\n input: features.map(feature => +instance[feature]),\n label: labels.indexOf(instance.label)\n }\n })\n const random = [...Array(instances.length).keys()].sort(() => Math.random() - .5);\n const trainingData = instances.filter((d, i) => random[i] % kFold != 0);\n const testData = instances.filter((d, i) => random[i] % kFold == 0);\n return {training: trainingData, test: testData};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`## Building a Model`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"md`It's time to build a model. Using deeplearn.js, we'll create a simple neural network model with one hidden layer. You can specify the number of neurons for the hidden layer using the following slider.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof numNeuronsInHiddenLayer = slider({min: 2, max: 20, value: 15, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"md`A model can be created by specifying a computation graph, similar to how people specify a data flow graph in TensorFlow.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"model = {\n const g = new dl.Graph();\n let node;\n\n const inputTensor = g.placeholder('input', [features.length]);\n const labelTensor = g.placeholder('label', [labels.length]);\n\n const weight0 = g.variable('weight', dl.Array2D.randNormal([numNeuronsInHiddenLayer, features.length]));\n const bias0 = g.variable('bias', dl.Array1D.randNormal([numNeuronsInHiddenLayer]));\n node = g.matmul(weight0, inputTensor);\n node = g.add(node, bias0);\n node = g.sigmoid(node);\n\n const weight1 = g.variable('weight', dl.Array2D.randNormal([labels.length, numNeuronsInHiddenLayer]));\n const bias1 = g.variable('bias', dl.Array1D.randNormal([labels.length]));\n node = g.matmul(weight1, node);\n node = g.add(node, bias1);\n node = g.sigmoid(node);\n\n const outputTensor = g.softmax(node);\n const costTensor = g.softmaxCrossEntropyCost(node, labelTensor);\n \n return {\n graph: g, \n inputTensor: inputTensor, labelTensor: labelTensor, outputTensor: outputTensor, costTensor: costTensor\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"session = new dl.Session(model.graph, dl.ENV.math)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`## Training`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"md`Now, we have the data and model. Before we start training the model, we can specify a few more hyperparameters.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"md`### Specify Hyperparameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof batchSize = slider({min: 2, max: 200, value: 100, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof learningRate = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof maxBatchCounter = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"md`### Start Training`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"md`Everything is ready. You can start training by clicking the button below. The value of the *isTraining* variable right below the button will change from *false* to *true*. You can pause the training process by clicking the button again.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"viewof playButton = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"isTraining = {\n playButton;\n return !(this == undefined ? true : this);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"md`### Run Training`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"md`The following variable is just for storing results.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"trainingSessionInfo = {\n session;\n resetButton;\n return {batchCounter: 0, costList: []};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"md`The following block actually runs training. For every iteration, training cost (a.k.a. loss) is returned (appended to array) and shown on the plot below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"md`Ideally, the cost value will be decreased over time.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"vegalite({\n data: {values: trainingCost.map((v,i) => ({\"batchCounter\": i, \"cost\": v}))},\n mark: \"line\",\n encoding: {\n x: {field: \"batchCounter\", type: \"quantitative\"},\n y: {field: \"cost\", type: \"quantitative\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"md`If you are not satisfied with your results, you may want to reset your model and change some hyperparameters.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"viewof resetButton = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`## Testing (a.k.a. Inference)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`Given your trained model, you can perform inference using your test set data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"inferenceData = splittedDataset.test.map(instance => dl.Array1D.new(instance.input))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"md`You may have noticed that the inference process has already started when the training process has started. The code below keeps testing the test set while training is performed and updating results. Don't worry if you don't get what this means. Just click the following button to perform testing.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"viewof restartInference = {\n var button = DOM.input(\"button\")\n button.value = \"Restart Inference\"\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"md`### Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"md`Here're results with an accuracy value and a confusion matrix!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"vegalite({\n data: {values: inferenceResults.confusionMatrix},\n mark: \"circle\",\n encoding: {\n x: {field: \"trueLabel\", type: \"nominal\"},\n y: {field: \"predictedLabel\", type: \"nominal\"},\n size: {field: \"count\", type: \"quantitative\"},\n color: {field: \"trueLabel\", type: \"nominal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"md`If the accuracy is lower than expected (it's possible to get 90% or higher), try with different hyperparameters. You can reset the trained model by clicking the *Reset Training* button above and train a new model.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"md`This is the end of the tutorial.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"