30:[] 2e:{"title":"Linear Regression","cells":[{"id":0,"value":"md`# Linear Regression`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`\n### Dataset\nnote that we deliberately use small float number in js.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof m = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 20,\n title: \"Cardinal Number of Data Set\",\n description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"viewof coeff = slider({\n min: 0,\n max: 0.1,\n precision: 5,\n value: 0.05,\n title: \"Coeff\",\n description: \"multinomial coefficient k of y = kx + b\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"viewof intercept = slider({\n min: 0,\n max: 1,\n precision: 5,\n value: 0.5,\n title: \"Intercept\",\n description: \"intercept b of y = kx + b\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"viewof shuffle = slider({\n min: 0,\n max: 1,\n precision: 5,\n value: 0.05,\n title: \"Shuffle\",\n description: \"shuffle = b * shuffle% of y = kx + b\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`\n### Training\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"viewof learningRate = slider({\n min: 0,\n max: 0.1,\n step: 0.001,\n precision: 3,\n value: 0.005,\n title: \"Learning Rate\",\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"viewof epoch = slider({\n min: 0,\n max: 1000,\n step: 40,\n value: 200,\n title: \"Epoch\",\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"trainButton = {\n const button = html``;\n button.onclick = async () => {\n button.disabled = true;\n\n await onStartTraining();\n\n button.disabled = false;\n };\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"{\n Plotly.newPlot(\n 'sizePlot',\n [\n {\n x: trainData.sizeMB,\n y: trainData.timeSec,\n mode: 'markers',\n type: 'scatter'\n }\n ],\n {\n width: width / 2,\n xaxis: {\n title: 'Size (MB)'\n },\n yaxis: {\n title: 'Time (Second)'\n },\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n\n Plotly.newPlot(\n 'timePlot',\n [\n {\n x: trainData.timeSec,\n y: trainData.sizeMB,\n mode: 'markers',\n type: 'scatter'\n }\n ],\n {\n width: width / 2,\n xaxis: {\n title: 'Time (Second)'\n },\n yaxis: {\n title: 'Size (MB)'\n },\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n\n return '';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`\n## Functions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"randomFromInterval = (min, max) => {\n return Math.random() * (max - min + 1) + min;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"RandomGen = {\n const gen = m => {\n const Data = {\n sizeMB: [],\n timeSec: []\n };\n for (let i = 0; i < m; i++) {\n Data.sizeMB.push(randomFromInterval(0, 10));\n Data.timeSec.push(randomFromInterval(0, 1));\n }\n return Data;\n };\n\n return gen;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"LinearGen = {\n const lineargen = m => {\n const Data = {\n sizeMB: [],\n timeSec: []\n };\n console.log(coeff, intercept);\n for (let i = 0; i < m; i++) {\n let x = randomFromInterval(0, 10);\n Data.sizeMB.push(x);\n Data.timeSec.push(\n coeff * x + intercept + randomFromInterval(0, shuffle * intercept)\n );\n console.log(x, coeff * x + intercept);\n }\n\n return Data;\n };\n\n return lineargen;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"trainData = LinearGen(m)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"loss = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"updateLossPlot = {\n Plotly.newPlot(\n 'lossPlot',\n [\n {\n x: [0, 1],\n y: [1, 1]\n }\n ],\n {\n width: width / 2 - 2,\n xaxis: {\n title: 'Epoch'\n },\n yaxis: {\n title: 'Loss'\n },\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n\n return ({ loss }) => {\n const skip = 2;\n const x = [];\n const y = [];\n for (let i = 0; i < loss.length; i = i + skip) {\n x.push(i);\n y.push(loss[i]);\n }\n\n Plotly.react(\n 'lossPlot',\n [\n {\n x: x,\n y: y,\n type: 'line'\n }\n ],\n {\n width: width / 2 - 2,\n xaxis: {\n title: 'Epoch'\n },\n yaxis: {\n title: 'Loss'\n },\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"updateWatchPlot = {\n Plotly.newPlot(\n 'watchPlot',\n [\n {\n x: trainData.sizeMB,\n y: trainData.timeSec,\n mode: 'markers',\n type: 'scatter'\n }\n ],\n {\n width: width / 2 - 2,\n xaxis: {\n title: 'Size (MB)'\n },\n yaxis: {\n title: 'Time (Second)'\n },\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n\n return ({ k, b }) => {\n Plotly.react(\n 'watchPlot',\n [\n {\n x: trainData.sizeMB,\n y: trainData.timeSec,\n mode: 'markers',\n type: 'scatter'\n },\n {\n x: [0, 10],\n y: [b, 10 * k + b],\n type: 'line'\n }\n ],\n {\n width: width / 2 - 2,\n xaxis: {\n title: 'Size (MB)'\n },\n yaxis: {\n title: 'Time (Second)'\n },\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"training = async ({ callback }) => {\n const model = tfjs.sequential();\n model.add(\n tfjs.layers.dense({\n units: 1,\n inputShape: [1]\n })\n );\n\n const optimizer = tfjs.train.sgd(learningRate);\n model.compile({ optimizer: optimizer, loss: 'meanAbsoluteError' });\n await model.fit(trainTensors.sizeMB, trainTensors.timeSec, {\n epochs: epoch,\n callbacks: {\n onEpochEnd: async (epoch, logs) => {\n callback({ model, epoch, logs });\n await tfjs.nextFrame();\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"onStartTraining = async () => {\n const interval = 40;\n await training({\n callback: ({ model, epoch, logs }) => {\n loss[epoch] = logs.loss;\n\n updateLossPlot({ loss });\n const k = model.getWeights()[0].dataSync()[0];\n const b = model.getWeights()[1].dataSync()[0];\n\n if (epoch % interval === 0) {\n updateWatchPlot({ k, b });\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"trainTensors = {\n const trainTensors = {\n sizeMB: tfjs.tensor2d(trainData.sizeMB, [trainData.sizeMB.length, 1]),\n timeSec: tfjs.tensor2d(trainData.timeSec, [trainData.timeSec.length, 1])\n };\n\n return trainTensors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"md`\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"Plotly = require('plotly.js-dist')","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"tfjs = require('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}