Tensorflow JS: Linear Regression with Webpack and ES6 Classes

• Read original article here

Tensorflow JS: Linear Regression with Webpack and ES6 Classes
AI in the browser [1 of 2] Creating a Tensorflow JS model in a Webpack environment
Jul 13, 2019 · 13 min read
This article acts as an introduction to using Tensorflow JS in the browser, by adopting ES6 class syntax within a Webpack environment. The accompanying demo for the project discussed can be found on Github here .
Before structuring a linear regression prediction model with @tensorflow/tfjs and the accompanying graphing solution, @tensorflow/tfjs-vis , we will set up a bare-bones Webpack environment specifically for building Tensorflow JS solutions, that will lend support to the latest features of Javascript while providing polyfills for the final build of the app.
We will refer and expand upon the two-dimensional linear regression tutorial hosted on the Tensorflow JS tutorials section, refactor the code to coincide with modern development standards, and expand on some of the concepts mentioned for a clearer understanding of how Tensorflow JS works and its capabilities.
Prelude: AI is now in the browser, with Tensorflow JS
Tensorflow models in the browser have never been more capable, with Tensorflow JS and the accompanying Javascript ecosystem of tools to aid in the development of predictive solutions. The online demos are already quite impressive, in conjunction with the open source models readily available to test-drive what Tensorflow JS is capable of, from predicting a human posture to sentiment of textual content.
With Tensorflow’s primary implementation being in Python, it may be a tough ask for Javascript developers to onboard another programming language and environment into their workflow, on top of learning the concepts required for developing machine learning solutions. This paradigm changes with Tensorflow JS, with the package allowing Javascript developers to get their hands dirty within the set of tools and syntax they’re familiar with, leaving the concepts and terminology of ML as the main barrier to entry.
How capable is Tensorflow JS now?
Tensorflow JS utilises WebGL to process models, the code of which is wrapped with APIs you will be readily familiar with, mostly with the tf.
()
syntax. Some methods are promise based, whereas some are synchronous. Some utilise callback functions as arguments, and objects are heavily used to pass configurations into a model. In any case, the API is an up-to-date implementation that is inline with the latest features of Javascript.
Because WebGL has no garbage collection, a common design pattern with Tensorflow JS is to wrap Tensorflow APIs with tf.tidy() , a utility that cleans up any tensors defined in that block after its execution. We also have the option to return needed data from tidy() blocks. On top of this, tf.dispose() can be used to clean up an object containing tensors too.
Tensor: Multi-dimensional array of numbers
A Tensor is just a matrix of numbers represented as a multi-dimensional array.
Tensors, holding these matrices of numbers, are passed through a prediction model, of which Tensorflow JS provide high level APIs for defining and training. Nevertheless, the term Tensor is used heavily throughout the API and documentation, and should not be confused with some fancy type of data — they are just sets of data as multi-dimensional arrays, that are transformed as they are passed (or flow) through a model, hence the name Tensorflow.
Now, before setting up our Webpack environment and implementing our model, let’s briefly go over the solution and what is required.
Solution Briefing
Implementing a model with Tensorflow JS follows the same design pattern as the Python counterpart that we will be implementing as a class, called VehicleEfficiency. We will be predicting the mpg (miles per gallon) of vehicles based on their horsepower.
This type of model has a one-to-one mapping. In other words, we wish to feed one piece of data into a model — horsepower, that will then output one other piece of data — mpg.
In order to do this, we firstly need to define and train a model with a reliable (and optimally large and diverse) data set. Once the model is trained, we can then pass new horsepower data into it, in order to generate a predictive output — mpg.
The execution process resembles the following stages:
// execution of a tensorflow JS prediction solutionget data -> define model -> format data for model -> train model -> make predictions
With this high level conceptual understanding, it already becomes clear how our VehicleEfficiency class can be structured to house these functionalities:
// models/VehicleEfficiency.jsclass VehicleEfficiency { // class properties to handle configuration of model // configure the instantiated object within constructor
constructor(config) {
} // a method that retrieves the raw data we need to train the model
async getData() {} // a method for defining the layers of the model and model type itself
createModel() {} // a method to format data into tensors
dataToTensors() {} // a method to train the model
async train() {} // a method to make predictions
predict(inputData) {} // an initialiser method that creates and trains the model, ready for predictions
async init() {
}
}
Note that a couple of functions here are asynchronous, with the async keyword. This is because they will hold promise based functions, both from the Tensorflow JS API and vanilla Javascript. Using await in our main execution function allows us to halt execution until these methods complete. We will break down each of these functions throughout this talk.
VehicleEfficiency will be instantiated within a run() function in our Webpack entry point file, index.js. The next section will document how to set up a dedicated Webpack environment for bundling our app.
This is by no means a comprehensive Webpack tutorial, but will demonstrate the process of installation and configuring Webpack, along with the concepts of plugins to support Javascript features such as classes, class properties and polyfills.
Alternatives to Webpack for Tensorflow JS
Alternatives to a bare-bones Webpack setup include adopting a Javascript framework such as React, with Create React App ; doing so will only require the installation of @tensorflow packages the app will use, that can be imported into your classes and/or components.
Tensorflow JS documentation has opted for the