{"id":18005736,"url":"https://github.com/andre-dietrich/tensorflowjs_tutorial","last_synced_at":"2026-05-17T17:11:30.299Z","repository":{"id":86328221,"uuid":"157213885","full_name":"andre-dietrich/TensorFlowJS_tutorial","owner":"andre-dietrich","description":"A translation of the official TensorFlowJS - Tutorials into LiaScript","archived":false,"fork":false,"pushed_at":"2019-11-23T22:17:28.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T10:47:16.476Z","etag":null,"topics":["javascript","liascript","tensorflow","tensorflow-tutorials"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/andre-dietrich/TensorFlowJS_tutorial/master/README.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andre-dietrich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-12T12:57:39.000Z","updated_at":"2019-11-23T22:17:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"a4c637cc-d21b-4840-a099-a5fbf15bde96","html_url":"https://github.com/andre-dietrich/TensorFlowJS_tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andre-dietrich/TensorFlowJS_tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andre-dietrich%2FTensorFlowJS_tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andre-dietrich%2FTensorFlowJS_tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andre-dietrich%2FTensorFlowJS_tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andre-dietrich%2FTensorFlowJS_tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andre-dietrich","download_url":"https://codeload.github.com/andre-dietrich/TensorFlowJS_tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andre-dietrich%2FTensorFlowJS_tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273997210,"owners_count":25204499,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","liascript","tensorflow","tensorflow-tutorials"],"created_at":"2024-10-30T00:21:22.184Z","updated_at":"2026-05-17T17:11:25.278Z","avatar_url":"https://github.com/andre-dietrich.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nauthor:   André Dietrich\n\nemail:    andre.dietrich@ovgu.de\n\nversion:  0.0.3\n\nlanguage: en\n\nnarrator: US English Female\n\nlogo:     https://upload.wikimedia.org/wikipedia/commons/d/d3/TorontoMusicGarden10-TensorFlow.jpg\n\ncomment:  Official TensorFlow tutorial ported to LiaScript.\n\nscript:   https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js\n\n\nimport:  https://raw.githubusercontent.com/liaScript/tensorflowjs_template/master/README.md\n\n--\u003e\n\n# TensorFlow.js\n\nThis is a translation of the official TensorFlowJS tutorials from\nhttps://js.tensorflow.org/tutorials/ into LiaScript (not ready yet).\n\nYou can try out this interactive Tutorial at:\n\nhttps://liascript.github.io/course/?https://raw.githubusercontent.com/andre-dietrich/TensorFlowJS_tutorial/master/README.md\n\nor clone it from:\n\nhttps://github.com/andre-dietrich/TensorFlowJS_tutorial\n\nand start to create your own tutorial...\n\n## Core Concepts\n\n__TensorFlow.js__ is an open source WebGL-accelerated JavaScript library for\nmachine intelligence. It brings highly performant machine learning building\nblocks to your fingertips, allowing you to train neural networks in a browser or\nrun pre-trained models in inference mode. See\n[Getting Started](https://js.tensorflow.org/index.html#getting-started)\nfor a guide on installing/configuring TensorFlow.js.\n\nTensorFlow.js provides low-level building blocks for machine learning as well as\na high-level, Keras-inspired API for constructing neural networks. Let's take a\nlook at some of the core components of the library.\n\n\n### Tensors\n\nThe central unit of data in TensorFlow.js is the tensor: a set of numerical\nvalues shaped into an array of one or more dimensions. A\n[`Tensor`](https://js.tensorflow.org/api/latest/index.html#class:Tensor) instance\nhas a `shape` attribute that defines the array shape (i.e., how many values are\nin each dimension of the array).\n\nThe primary `Tensor` constructor is the\n[`tf.tensor`](https://js.tensorflow.org/api/latest/index.html#tensor)\nfunction:\n\n``` javascript\n// 2x3 Tensor\nconst shape = [2, 3]; // 2 rows, 3 columns\nconst a = tf.tensor([1.0, 2.0, 3.0, 10.0, 20.0, 30.0], shape);\na.print(); // print Tensor values\n\n// The shape can also be inferred:\nconst b = tf.tensor([[1.0, 2.0, 3.0], [10.0, 20.0, 30.0]]);\nb.print(); // print Tensor values\n```\n``` @output\nTensor\n    [[1 , 2 , 3 ],\n     [10, 20, 30]]\nTensor\n    [[1 , 2 , 3 ],\n     [10, 20, 30]]\n```\n@TF.eval\n\n\nHowever, for constructing low-rank tensors, we recommend using the following\nfunctions to enhance code readability:\n[`tf.scalar`](https://js.tensorflow.org/api/latest/index.html#scalar),\n[`tf.tensor1d`](https://js.tensorflow.org/api/latest/index.html#tensor1d),\n[`tf.tensor2d`](https://js.tensorflow.org/api/latest/index.html#tensor2d),\n[`tf.tensor3d`](https://js.tensorflow.org/api/latest/index.html#tensor3d) and\n[`tf.tensor4d`](https://js.tensorflow.org/api/latest/index.html#tensor4d).\n\nThe following example creates an identical tensor to the one above using\n`tf.tensor2d`:\n\n``` javascript\nconst c = tf.tensor2d([[1.0, 2.0, 3.0], [10.0, 20.0, 30.0]]);\nc.print();\n```\n``` @output\nTensor\n    [[1 , 2 , 3 ],\n     [10, 20, 30]]\n```\n@TF.eval\n\nTensorFlow.js also provides convenience functions for creating tensors with all\nvalues set to 0\n([`tf.zeros`](https://js.tensorflow.org/api/latest/index.html#zeros)) or all\nvalues set to 1\n([`tf.ones`](https://js.tensorflow.org/api/latest/index.html#ones)):\n\n``` javascript\n// 3x5 Tensor with all values set to 0\nconst zeros = tf.zeros([3, 5]);\nzeros.print();\n```\n``` @output\nTensor\n    [[0, 0, 0, 0, 0],\n     [0, 0, 0, 0, 0],\n     [0, 0, 0, 0, 0]]\n```\n@TF.eval\n\nIn TensorFlow.js, tensors are immutable; once created, you cannot change their\nvalues. Instead you perform operations on them that generate new tensors.\n\n\n### Variables\n\n[`Variable`s](https://js.tensorflow.org/api/latest/index.html#class:Variable)\nare initialized with a tensor of values. Unlike `Tensor`s, however, their values\nare mutable. You can `assign` a new tensor to an existing variable using the\nassign method:\n\n```javascript\nconst initialValues = tf.zeros([5]);\nconst biases = tf.variable(initialValues); // initialize biases\nbiases.print();                            // output: [0, 0, 0, 0, 0]\n\nconst updatedValues = tf.tensor1d([0, 1, 0, 1, 0]);\nbiases.assign(updatedValues); // update values of biases\nbiases.print();               // output: [0, 1, 0, 1, 0]\n```\n@TF.eval\n\nVariables are primarily used to store and then update values during model\ntraining.\n\n\n### Operations (Ops)\n\nWhile tensors allow you to store data, operations (ops) allow you to manipulate\nthat data. TensorFlow.js provides a wide variety of ops suitable for linear\nalgebra and machine learning that can be performed on tensors. Because tensors\nare immutable, these ops do not change their values; instead, ops return new\ntensors.\n\nAvailable ops include unary ops such as\n[`square`](https://js.tensorflow.org/api/latest/index.html#square):\n\n```javascript\nconst d = tf.tensor2d([[1.0, 2.0], [3.0, 4.0]]);\nconst d_squared = d.square();\nd_squared.print();\n// Output: [[1, 4 ],\n//          [9, 16]]\n```\n@TF.eval\n\nAnd binary ops such as\n[`add`](https://js.tensorflow.org/api/latest/index.html#add),\n[`sub`](https://js.tensorflow.org/api/latest/index.html#sub), and\n[`mul`](https://js.tensorflow.org/api/latest/index.html#mull):\n\n```javascript\nconst e = tf.tensor2d([[1.0, 2.0], [3.0, 4.0]]);\nconst f = tf.tensor2d([[5.0, 6.0], [7.0, 8.0]]);\n\nconst e_plus_f = e.add(f);\ne_plus_f.print();\n// Output: [[6 , 8 ],\n//          [10, 12]]\n```\n@TF.eval\n\nTensorFlow.js has a chainable API; you can call ops on the result of ops:\n\n```javascript\nconst e = tf.tensor2d([[1.0, 2.0], [3.0, 4.0]]);\nconst f = tf.tensor2d([[5.0, 6.0], [7.0, 8.0]]);\n\nconst sq_sum = e.add(f).square();\nsq_sum.print();\n// Output: [[36 , 64 ],\n//          [100, 144]]\n```\n@TF.eval\n\nAll operations are also exposed as functions in the main namespace, so you could\nalso do the following:\n\n```javascript\nconst e = tf.tensor2d([[1.0, 2.0], [3.0, 4.0]]);\nconst f = tf.tensor2d([[5.0, 6.0], [7.0, 8.0]]);\n\nconst sq_sum = tf.square(tf.add(e, f));\nsq_sum.print();\n```\n@TF.eval\n\n### Models and Layers\n\nConceptually, a model is a function that given some input will produce some\ndesired output.\n\nIn TensorFlow.js there are _two ways_ to create models. You can\n_use ops directly_ to represent the work the model does. For example:\n\n```javascript\n// Define function\nfunction predict(input) {\n  // y = a * x ^ 2 + b * x + c\n  // More on tf.tidy in the next section\n  return tf.tidy(() =\u003e {\n    const x = tf.scalar(input);\n\n    const ax2 = a.mul(x.square());\n    const bx = b.mul(x);\n    const y = ax2.add(bx).add(c);\n\n    return y;\n  });\n}\n\n// Define constants: y = 2x^2 + 4x + 8\nconst a = tf.scalar(2);\nconst b = tf.scalar(4);\nconst c = tf.scalar(8);\n\n// Predict output for input of 2\nconst result = predict(2);\nresult.print() // Output: 24\n```\n@TF.eval\n\nYou can also use the high-level API\n[`tf.model`](https://js.tensorflow.org/api/latest/index.html#model) to construct\na model out of _layers_, which are a popular abstraction in deep learning. The\nfollowing code constructs a\n[`tf.sequential`](https://js.tensorflow.org/api/latest/index.html#sequential)\nmodel:\n\n```javascript\nconst model = tf.sequential();\nmodel.add(\n  tf.layers.simpleRNN({\n    units: 20,\n    recurrentInitializer: 'GlorotNormal',\n    inputShape: [80, 4]\n  })\n);\n\nconst optimizer = tf.train.sgd(LEARNING_RATE);\nmodel.compile({optimizer, loss: 'categoricalCrossentropy'});\nmodel.fit({x: data, y: labels});\n```\n\nThere are many different types of layers available in TensorFlow.js. A few\nexamples include\n[`tf.layers.simpleRNN`](https://js.tensorflow.org/api/latest/index.html#layers.simpleRNN),\n[`tf.layers.gru`](https://js.tensorflow.org/api/latest/index.html#layers.gru),\nand\n[`tf.layers.lstm`](https://js.tensorflow.org/api/latest/index.html#layers.lstm).\n\n### Memory Management: `dispose` and `tf.tidy`\n\nBecause TensorFlow.js uses the GPU to accelerate math operations, it's necessary\nto manage GPU memory when working with tensors and variables.\n\nTensorFlow.js provide two functions to help with this: `dispose` and\n[`tf.tidy`](https://js.tensorflow.org/api/latest/index.html#tidy).\n\n#### `dispose`\n\nYou can call dispose on a tensor or variable to purge it and free up its GPU\nmemory:\n\n```javascript\nconst x = tf.tensor2d([[0.0, 2.0], [4.0, 6.0]]);\nconst x_squared = x.square();\n\nx.dispose();\nx_squared.dispose();\n\nx.print()         // will create an Error (Tensor is disposed)\nx_squared.print() // ...\n```\n@TF.eval\n\n#### `tf.tidy`\n\nUsing `dispose` can be cumbersome when doing a lot of tensor operations.\nTensorFlow.js provides another function, `tf.tidy`, that plays a similar role to\nregular scopes in JavaScript, but for GPU-backed tensors.\n\n`tf.tidy` executes a function and purges any intermediate tensors created,\nfreeing up their GPU memory. It does not purge the return value of the inner\nfunction.\n\n```javascript\n// tf.tidy takes a function to tidy up after\nconst average = tf.tidy(() =\u003e {\n  // tf.tidy will clean up all the GPU memory used by tensors inside\n  // this function, other than the tensor that is returned.\n  //\n  // Even in a short sequence of operations like the one below, a number\n  // of intermediate tensors get created. So it is a good practice to\n  // put your math ops in a tidy!\n  const y = tf.tensor1d([1.0, 2.0, 3.0, 4.0]);\n  const z = tf.ones([4]);\n\n  return y.sub(z).square().mean();\n});\n\naverage.print() // Output: 3.5\n```\n@TF.eval\n\nUsing `tf.tidy` will help prevent memory leaks in your application. It can also\nbe used to more carefully control when memory is reclaimed.\n\n__Two important notes__\n\n* The function passed to `tf.tidy` should be synchronous and also not return a\n  Promise. We suggest keeping code that updates the UI or makes remote requests\n  outside of `tf.tidy`.\n* `tf.tidy` _will not_ clean up variables. Variables typically last through the\n  entire lifecycle of a machine learning model, so TensorFlow.js doesn't clean\n  them up even if they are created in a `tidy`; however, you can call `dispose`\n  on them manually.\n\n### Additional Resources\n\nSee the\n[TensorFlow.js API reference](https://js.tensorflow.org/api/latest/index.html)\nfor comprehensive documentation of the library.\n\nFor a more in-depth look at machine learning fundamentals, see the following\nresources:\n\n* [Machine Learning Crash Course](https://developers.google.com/machine-learning/crash-course)\n  (Note: this course's exercises use TensorFlow's\n  [Python API](https://www.tensorflow.org/api_docs/python/).\n  However, the core machine learning concepts it teaches can be applied in\n  equivalent fashion using TensorFlow.js.)\n* [Machine Learning Glossary](https://developers.google.com/machine-learning/glossary)\n\n\n## Training First Steps: Fitting a Curve to Synthetic Data\n\nIn this tutorial, we'll use TensorFlow.js to fit a curve to a synthetic dataset.\nGiven some data generated using a polynomial function with some noise added,\nwe'll train a model to discover the coefficients used to generate the data.\n\n__Prerequisites__\n\nThis tutorial assumes familiarity with the fundamental building blocks of\nTensorFlow.js introduced in [Core Concepts](#2): tensors, variables, and ops. We\nrecommend completing Core Concepts before doing this tutorial.\n\n__Running the Code__\n\nTODO\n\n### Input Data\n\nOur synthetic data set is composed of x- and y-coordinates that look as follows\nwhen plotted on a Cartesian plane:\n\n\n```javascript data.js\nwindow.generateData = function (numPoints, coeff, sigma = 0.04) {\n  return tf.tidy(() =\u003e {\n    const [a, b, c, d] = [\n      tf.scalar(coeff.a), tf.scalar(coeff.b),\n      tf.scalar(coeff.c), tf.scalar(coeff.d)];\n\n    const xs = tf.randomUniform([numPoints], -1, 1);\n\n    // Generate polynomial data\n    const three = tf.scalar(3, 'int32');\n    const ys = a.mul(xs.pow(three))\n      .add(b.mul(xs.square()))\n      .add(c.mul(xs))\n      .add(d)\n      // Add random noise to the generated data\n      // to make the problem a bit more interesting\n      .add(tf.randomNormal([numPoints], 0, sigma));\n\n    // Normalize the y values to the range 0 to 1.\n    const ymin = ys.min();\n    const ymax = ys.max();\n    const yrange = ymax.sub(ymin);\n    const ysNormalized = ys.sub(ymin).div(yrange);\n\n    return {\n      xs,\n      ys: ysNormalized\n    };\n  })\n}\nconsole.log(\"global function 'generateData' generated!\")\n```\n@TF.eval\n\n\nThis data was generated using a cubic function of the format\n$y = ax3 + bx2 + cx + d$.\n\nOur task is to learn the coefficients of this function: the values of $a$, $b$,\n$c$, and $d$ that best fit the data. Let's take a look at how we might learn\nthose values using TensorFlow.js operations.\n\n\n```javascript index.js\nconst trueCoefficients = {a: -.8, b: -.2, c: .9, d: .5};\nwindow.trainingData = generateData(100, trueCoefficients);\n\nplotData(trainingData.xs, trainingData.ys);\n```\n``` javascript -ui.js\nasync function plotData(xs, ys) {\n\tconst xvals = await xs.data();\n  const yvals = await ys.data();\n\n  let main = document.getElementById('main');\n  main.hidden = false;\n\n  let chart = echarts.init(main);\n\n  let values = Array.from(yvals).map((y, i) =\u003e {\n     return [xvals[i], yvals[i]];\n  });\n\n  let c = trueCoefficients;\n\n  let option = {\n    title : {\n      text: 'Original Data (Synthetic)',\n      subtext: 'True coefficients: a='+c.a+\", b=\"+c.b+\", c=\"+c.c+\", d=\"+c.d\n    },\n    toolbox: {\n      show : true,\n      feature : {\n        mark : {show: true},\n        dataZoom : {show: true},\n        dataView : {show: true, readOnly: false},\n        restore : {show: true},\n        saveAsImage : {show: true}\n      }\n    },\n    xAxis : [{\n      type : 'value',\n      scale: true,\n      axisLabel : { formatter: '{value}' }\n    }],\n    yAxis : [{\n      type : 'value',\n      scale: true,\n      axisLabel : { formatter: '{value}'}\n    }],\n    series : [{\n      name: 'data',\n      type: 'scatter',\n      data: values,\n    }]\n  };\n\n  // use configuration item and data specified to show chart\n  chart.setOption(option);\n\n  window.addEventListener('resize', chart.resize);\n}\n```\n@TF.eval2\n\n\n\u003cdiv id=\"main\" class=\"persistent\" style=\"position: relative; width:100%; height:400px;\" hidden=\"true\"\u003e\u003c/div\u003e\n\n\n\n\n### Step 1: Set up Variables\n\nFirst, let's create some variables to hold our current best estimate of these\nvalues at each step of model training. To start, we'll assign each of these\nvariables a random number:\n\n```javascript\nconst a = tf.variable(tf.scalar(Math.random()));\nconst b = tf.variable(tf.scalar(Math.random()));\nconst c = tf.variable(tf.scalar(Math.random()));\nconst d = tf.variable(tf.scalar(Math.random()));\n\na.print(); b.print(); c.print(); d.print();\n\nwindow.startVariables = [a, b, c, d];\n```\n@TF.eval\n\n### Step 2: Build a Model\n\nWe can represent our polynomial function $y = ax3 + bx2 + cx + d$ in\nTensorFlow.js by chaining a series of mathematical operations: addition (`add`),\nmultiplication (`mul`), and exponentiation (`pow` and `square`).\n\nThe following code constructs a predict function that takes `x` as input and\nreturns `y`:\n\n\n\n``` javascript predict.js\nfunction predict(x) {\n  let [a, b, c, d] = startVariables;\n  // y = a * x ^ 3 + b * x ^ 2 + c * x + d\n  return tf.tidy(() =\u003e {\n    return a.mul(x.pow(tf.scalar(3))) // a * x^3\n      .add(b.mul(x.square())) // + b * x ^ 2\n      .add(c.mul(x)) // + c * x\n      .add(d); // + d\n  });\n}\n\nconst prediction = predict(trainingData.xs);\nplotData(trainingData.xs, trainingData.ys, prediction);\n```\n``` javascript -ui.js\nasync function plotData(xs, ys, ts) {\n\n\tconst xvals = await xs.data();\n  const yvals = await ys.data();\n  const tvals = await ts.data();\n\n  let main = document.getElementById('main2');\n  main.hidden = false;\n\n  let chart = echarts.init(main);\n\n  let predictions = Array.from(yvals).map((y, i) =\u003e {\n     return [xvals[i], tvals[i]];\n  }).sort((a,b) =\u003e {\n    return (a[0] \u003c b[0] ? 1 : -1)\n  });\n\n  let values = Array.from(yvals).map((y, i) =\u003e {\n     return [xvals[i], yvals[i]];\n  });\n\n  let [a, b, c, d] = startVariables;\n\n  a = await a.data();\n  b = await b.data();\n  c = await c.data();\n  d = await d.data();\n\n  let option = {\n    title : {\n      text: 'Fit courve with random coefficients (before trainig)',\n      subtext: \"Random coefficient: a=\"+a+\", b=\"+b+\", c=\"+c+\", d=\"+d\n    },\n    legend: {\n        data: ['fuck', 'fuckking']\n    },\n    toolbox: {\n      show : true,\n      feature : {\n        mark : {show: true},\n        dataZoom : {show: true},\n        dataView : {show: true, readOnly: false},\n        restore : {show: true},\n        saveAsImage : {show: true}\n      }\n    },\n    xAxis : [{\n      type : 'value',\n      scale: true,\n      axisLabel : { formatter: '{value}' }\n    }],\n    yAxis : [{\n      type : 'value',\n      scale: true,\n      axisLabel : { formatter: '{value}'}\n    }],\n    series : [\n      {name: 'trainig data', type: 'scatter', data: values },\n      {name: 'prediction', type: 'line', data: predictions }\n    ]\n  };\n\n  chart.setOption(option);\n//  window.addEventListener('resize', chart.resize);\n}\n```\n@TF.eval2\n\n\u003cdiv id=\"main2\" class=\"persistent\" style=\"position: relative; width:100%; height:400px;\" hidden=\"true\"\u003e\u003c/div\u003e\n\nLet's go ahead and plot our polynomial function using the random values for $a$,\n$b$, $c$, and $d$ that we set in Step 1. Our plot will likely look something\nlike this:\n\n\nBecause we started with random values, our function is likely a very poor fit\nfor the data set. The model has yet to learn better values for the coefficients.\n\n### Step 3: Train the Model\n\nOur final step is to train the model to learn good values for the coefficients.\nTo train our model, we need to define three things:\n\n* A _loss function_, which measures how well a given polynomial fits the data.\n  The lower the loss value, the better the polynomial fits the data.\n* An _optimizer_, which implements an algorithm for revising our coefficient\n  values based on the output of the loss function. The optimizer's goal is to\n  minimize the output value of the loss function.\n* A _training loop_, which will iteratively run the optimizer to minimize loss.\n\n\n#### Define the Loss Function\n\nFor this tutorial, we'll use\n[mean squared error (MSE)](https://developers.google.com/machine-learning/crash-course/glossary/#MSE)\nas our loss function. MSE is calculated by squaring the difference between the\nactual $y$ value and the predicted $y$ value for each $x$ value in our data set,\nand then taking the mean of all the resulting terms.\n\nWe can define a MSE loss function in TensorFlow.js as follows:\n\n``` javascript\nfunction loss(predictions, labels) {\n  // Subtract our labels (actual values) from predictions, square the results,\n  // and take the mean.\n  const meanSquareError = predictions.sub(labels).square().mean();\n  return meanSquareError;\n}\n```\n\n#### Define the Optimizer\n\nFor our optimizer, we'll use\n[Stochastic Gradient Descent](https://developers.google.com/machine-learning/crash-course/glossary#SGD)\n(SGD). SGD works by\ntaking the\n[gradient](https://developers.google.com/machine-learning/crash-course/glossary#gradient)\nof a random point in our data set and using its value to\ninform whether to increase or decrease the value of our model coefficients.\n\nTensorFlow.js provides a convenience function for performing SGD, so that you\ndon't have to worry about performing all these mathematical operations yourself.\n[`tf.train.sgd`](https://js.tensorflow.org/api/latest/index.html#train.sgd)\ntakes as input a desired _learning rate_, and returns an `SGDOptimizer` object,\nwhich can be invoked to optimize the value of the loss function.\n\nThe learning rate controls how big the model's adjustments will be when\nimproving its predictions. A low learning rate will make the learning process\nrun more slowly (more training iterations needed to learn good coefficients),\nwhile a high learning rate will speed up learning but might result in the model\noscillating around the right values, always overcorrecting.\n\nThe following code constructs an SGD optimizer with a learning rate of 0.5:\n\n``` javascript\nconst learningRate = 0.5;\nconst optimizer = tf.train.sgd(learningRate);\n```\n\n#### Define the Training Loop\n\nNow that we've defined our loss function and optimizer, we can build a training\nloop, which iteratively performs SGD to refine our model's coefficients to\nminimize loss (MSE). Here's what our loop looks like:\n\n``` javascript\nfunction train(xs, ys, numIterations = 75) {\n\n  const learningRate = 0.5;\n  const optimizer = tf.train.sgd(learningRate);\n\n  for (let iter = 0; iter \u003c numIterations; iter++) {\n    optimizer.minimize(() =\u003e {\n      const predsYs = predict(xs);\n      return loss(predsYs, ys);\n    });\n  }\n}\n```\n\nLet's take a closer look at the code, step by step. First, we define our\ntraining function to take the _x_ and _y_ values of our dataset, as well as a\nspecified number of iterations, as input:\n\n``` javascript\nfunction train(xs, ys, numIterations) {\n...\n}\n```\n\nNext, we define the learning rate and SGD optimizer as discussed in the previous\nsection:\n\n``` javascript\nconst learningRate = 0.5;\nconst optimizer = tf.train.sgd(learningRate);\n```\n\nFinally, we set up a `for` loop that runs `numIterations` training iterations.\nIn each iteration, we invoke\n[`minimize`](https://js.tensorflow.org/api/latest/index.html#class:train.Optimizer)\non the optimizer, which is where the magic happens:\n\n``` javascript\nfor (let iter = 0; iter \u003c numIterations; iter++) {\n  optimizer.minimize(() =\u003e {\n    const predsYs = predict(xs);\n    return loss(predsYs, ys);\n  });\n}\n```\n\n`minimize` takes a function that does two things:\n\n1. It predicts y values (`predYs`) for all the _x_ values using the `predict`\n   model function we defined earlier in Step 2.\n2. It returns the mean squared error loss for those predictions using the loss\n   function we defined earlier in __Define the Loss Function__.\n\n`minimize` then automatically adjusts any `Variable`s used by this function\n(here, the coefficients `a`, `b`, `c`, and `d`) in order to minimize the return\nvalue (our loss).\n\nAfter running our training loop, `a`, `b`, `c`, and `d` will contain the\ncoefficient values learned by the model after 75 iterations of SGD.\n\n### See the Results!\n\nOnce the program finishes running, we can take the final values of our variables\n`a`, `b`, `c`, and `d`, and use them to plot a curve:\n\n```javascript\n// Step 1. Set up variables, these are the things we want the model\n// to learn in order to do prediction accurately. We will initialize\n// them with random values.\nconst a = tf.variable(tf.scalar(Math.random()));\nconst b = tf.variable(tf.scalar(Math.random()));\nconst c = tf.variable(tf.scalar(Math.random()));\nconst d = tf.variable(tf.scalar(Math.random()));\n\n\n// Step 2. Create an optimizer, we will use this later. You can play\n// with some of these values to see how the model performs.\nconst numIterations = 75;\nconst learningRate = 0.5;\nconst optimizer = tf.train.sgd(learningRate);\n\n// Step 3. Write our training process functions.\nfunction predict(x) {\n  // y = a * x ^ 3 + b * x ^ 2 + c * x + d\n  return tf.tidy(() =\u003e {\n    return a.mul(x.pow(tf.scalar(3, 'int32')))\n      .add(b.mul(x.square()))\n      .add(c.mul(x))\n      .add(d);\n  });\n}\n\nfunction loss(prediction, labels) {\n  // Having a good error function is key for training a machine learning model\n  const error = prediction.sub(labels).square().mean();\n  return error;\n}\n\nasync function train(xs, ys, numIterations) {\n  for (let iter = 0; iter \u003c numIterations; iter++) {\n    optimizer.minimize(() =\u003e {\n      // Feed the examples into the model\n      const pred = predict(xs);\n      return loss(pred, ys);\n    });\n\n    // Use tf.nextFrame to not block the browser.\n    await tf.nextFrame();\n  }\n}\n\nconst trueCoefficients = {a: -.8, b: -.2, c: .9, d: .5};\n//const trainingData = generateData(100, trueCoefficients);\n\ntrainingData.print();\n\n// Plot original data\n//  renderCoefficients('#data .coeff', trueCoefficients);\n//  await plotData('#data .plot', trainingData.xs, trainingData.ys)\n\n\nconst predictionsBefore = predict(trainingData.xs);\n\n// Train the model!\nawait train(trainingData.xs, trainingData.ys, numIterations);\n\n\nconst predictionsAfter = predict(trainingData.xs);\n\npredictionsBefore.dispose();\npredictionsAfter.dispose();\n```\n@TF.eval\n\n\nThe result is much better than the curve we originally plotted using random\nvalues for the coefficient.\n\n### Additional Resources\n\n* See [Core Concepts in TensorFlow.js](#2) for an introduction to the core\n  building blocks in TensorFlow.js: tensors, variables, and ops.\n* See\n  [Descending into ML](https://developers.google.com/machine-learning/crash-course/descending-into-ml/)\n  in\n  [Machine Learning](https://developers.google.com/machine-learning/crash-course/)\n  Crash Course for a more in-depth introduction to machine learning loss\n* See\n  [Reducing  Loss](https://developers.google.com/machine-learning/crash-course/reducing-loss/)\n  in\n  [Machine Learning Crash   Course](https://developers.google.com/machine-learning/crash-course/)\n  for a deeper dive into gradient descent and SGD.\n\n## Training on Images\n\nIn this tutorial, we'll build a TensorFlow.js model to classify handwritten\ndigits with a convolutional neural network. First, we'll train the classifier by\nhaving it “look” at thousands of handwritten digit images and their labels. Then\nwe'll evaluate the classifier's accuracy using test data that the model has\nnever seen.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandre-dietrich%2Ftensorflowjs_tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandre-dietrich%2Ftensorflowjs_tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandre-dietrich%2Ftensorflowjs_tutorial/lists"}