2c:null 2d:["$","title",null,{"children":"My TensorFlowJS Playground | \"Ta\" Virot C. | Observable"}] 32:[] 30:{"id":"7701e8f1a40e6b17","slug":"my-tensorflowjs-playground","title":"My TensorFlowJS Playground","thumbnail":"c973af05df01e61139a1ac00262be2c77ed865d47b1d2b0a5caa3d3a7d69c8c7","access_level":"public","create_time":"$D2018-04-15T07:07:10.457Z","update_time":"$D2018-05-09T22:43:44.895Z","view_time":null,"first_public_time":"$D2018-04-16T04:52:01.251Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"05fe87ce00c24684","login":"tvirot","name":"\"Ta\" Virot C.","avatar_url":"https://avatars-next.observableusercontent.com/a2b53d057ac064ea2a178f61376d79ebffd11284cadbef50588e520a74a730b2","tier":"starter_2024"},"version":542,"publish_version":542,"role":null,"authored":false,"authors":[{"type":"individual","id":"679d00b8a8620131","login":"tvirot","name":"\"Ta\" Virot C.","avatar_url":"https://avatars-next.observableusercontent.com/a2b53d057ac064ea2a178f61376d79ebffd11284cadbef50588e520a74a730b2","tier":null}],"members":[{"type":"individual","id":"679d00b8a8620131","login":"tvirot","name":"\"Ta\" Virot C.","avatar_url":"https://avatars-next.observableusercontent.com/a2b53d057ac064ea2a178f61376d79ebffd11284cadbef50588e520a74a730b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"My TensorFlowJS Playground","cells":[{"id":528,"value":"md`## My TensorFlowJS Playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"tf = require('@tensorflow/tfjs')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"tex`y = ax^3 + bx^2 + cx + d + \\mathcal{N}(0, \\sigma^2)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof coeff = {\n const form = html``;\n form.value = [form.a, form.b, form.c, form.d].map(i => i.valueAsNumber);\n [form.a, form.b, form.c, form.d].forEach((d, i) => {\n d.oninput = () => form.value[i] = d.valueAsNumber;\n });\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof sd = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`\na = ${coeff[0]}, \nb = ${coeff[1]}, \nc = ${coeff[2]}, \nd = ${coeff[3]}, \nsd = ${sd}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"viewof trigger = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"inputData = {\n const data = tf.tidy(() => {\n const numPoints = 200;\n const [a, b, c, d] = coeff.map(i => tf.scalar(i)); // a = tf.scalar(coeff[0]), and so on\n\n const x = tf.randomUniform([numPoints], -1, 1);\n const y = a.mul(x.pow(tf.scalar(3)))\n .add(b.mul(x.square()))\n .add(c.mul(x))\n .add(d)\n .add(tf.randomNormal([numPoints], 0, sd));\n\n return {x, y}; \n });\n yield data;\n \n // This cell is re-evaluated and creates new tensors as we interact with the sliders to adjust parameters.\n // We need to manually dispose them to avoid memory leak. \n // See: https://beta.observablehq.com/@nsthorat/clean-up-deeplearn-js-tensor-generator-cells\n try {\n yield invalidation;\n } finally {\n data.x.dispose();\n data.y.dispose();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"plot(inputData.x, inputData.y, null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"// Loss: Mean Squared Error (MSE)\nfunction loss(predictions, labels) {\n return tf.tidy(() => predictions.sub(labels).square().mean());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"cubicPredictions = {\n const predictions = tf.tidy(() => {\n // Model parameters: \n const a = tf.variable(tf.zeros([1]));\n const b = tf.variable(tf.zeros([1]));\n const c = tf.variable(tf.zeros([1]));\n const d = tf.variable(tf.zeros([1]));\n\n // Model: f(x) = a * x^3 + b * x^2 + c * x + d\n const f = (x) => \n a.mul(x.pow(tf.scalar(3)))\n .add(b.mul(x.square()))\n .add(c.mul(x))\n .add(d);\n\n // Optimizer: Stochastic Gradient Descent (SGD)\n const optimizer = tf.train.sgd(0.8);\n let mse = null;\n\n // Training Loop\n for (let i = 0; i < numIterations; i++) {\n optimizer.minimize(() => loss(f(inputData.x), inputData.y)); \n }\n\n const predTensor = f(inputData.x); \n \n // tf.tidy() will not clean up variables\n [a, b, c, d].forEach(x => { \n x.dispose(); \n });\n\n return predTensor; \n });\n yield predictions; \n \n try {\n yield invalidation;\n } finally {\n predictions.dispose();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"viewof numIterations = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`${numIterations} iterations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"cubicLoss = {\n const mseTensor = loss(cubicPredictions, inputData.y);\n const mse = mseTensor.dataSync()[0];\n mseTensor.dispose();\n return md`Mean Squared Error: ${mse}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"plot(inputData.x, inputData.y, cubicPredictions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"dnnPredictions = {\n const dnn = tf.sequential({\n name: 'dnn',\n layers: [\n tf.layers.dense({units: 10, inputShape: [1], activation: 'tanh'}),\n tf.layers.dense({units: 5, activation: 'tanh'}),\n tf.layers.dense({units: 5, activation: 'tanh'}),\n tf.layers.dense({units: 1, activation: 'tanh'})\n ]\n });\n dnn.compile({loss: 'meanSquaredError', optimizer: 'Adam'});\n \n const history = await dnn.fit(inputData.x, inputData.y);\n \n const predictions = tf.tidy(() => \n dnn.predict(inputData.x.expandDims(1))\n );\n yield predictions;\n \n try {\n yield invalidation;\n } finally {\n predictions.dispose();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"dnnLoss = {\n const mseTensor = tf.tidy(() => loss(tf.tensor(dnnPredictions.dataSync()), inputData.y));\n const mse = mseTensor.dataSync()[0];\n mseTensor.dispose();\n return md`Mean Squared Error: ${mse}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"plot(inputData.x, inputData.y, dnnPredictions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"WTF = {\n let totalCubic = 0; \n let totalDNN = 0; \n const cubic = cubicPredictions.dataSync(); \n const dnn = dnnPredictions.dataSync();\n const y = inputData.y.dataSync(); \n for(let i=0; i<200; i++) {\n totalCubic += Math.pow(cubic[i] - y[i], 2);\n totalDNN += Math.pow(dnn[i] - y[i], 2);\n }\n return {cubic: totalCubic / 200.0, dnn: totalDNN / 200.0}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"dnnLossV1 = {\n const mseTensor = tf.tidy(() => loss(tf.tensor(dnnPredictions.dataSync()), inputData.y));\n const mse = mseTensor.dataSync()[0];\n mseTensor.dispose();\n return md`Mean Squared Error: ${mse}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"dnnLossV2 = {\n const mseTensor = tf.tidy(() => loss(dnnPredictions, inputData.y));\n const mse = mseTensor.dataSync()[0];\n mseTensor.dispose();\n return md`Mean Squared Error: ${mse}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"dnnLossV3 = {\n const mseTensor = tf.tidy(() => loss(tf.tensor(dnnPredictions.dataSync()), tf.tensor(inputData.y.dataSync())));\n const mse = mseTensor.dataSync()[0];\n mseTensor.dispose();\n return md`Mean Squared Error: ${mse}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"numTensors = tf.memory().numTensors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"vegalite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"plot = async (xTensor, yTensor, predTensor) => {\n const x = await xTensor.data();\n const y = await yTensor.data(); \n const pred = predTensor ? await predTensor.data() : null; \n \n const values = [...x].map((xVal, i) => { // Spread operator: [...x] = Array.from(x)\n return predTensor ? \n {\"x\": xVal, \"y\": y[i], \"pred\": pred[i]} :\n {\"x\": xVal, \"y\": y[i]};\n });\n \n return vegalite({\n width: 400,\n height: 300,\n \"data\": { values },\n \"layer\": [{\n \"mark\": \"circle\",\n \"encoding\": {\n \"x\": {\"field\": \"x\", \"type\": \"quantitative\"},\n \"y\": {\"field\": \"y\", \"type\": \"quantitative\"}\n }\n }, {\n \"mark\": \"line\",\n \"encoding\": {\n \"x\": {\"field\": \"x\", \"type\": \"quantitative\"},\n \"y\": {\"field\": \"pred\", \"type\": \"quantitative\"} \n }\n }],\n \"config\": {\n \"circle\": {\"color\": \"#1E4865\", \"size\": 50, \"opacity\": 0.6},\n \"line\": {\"color\": \"#F1AD46\", \"strokeWidth\": 4, \"opacity\": 0.6}\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"