Implementation of AI in JS using Tensorflow.js

From https://javascriptweekly.com/link/57596/a956973cda

Thank you very much Seth Juarez for this article.

This is not an article about math, nor is it an article about evil sentient artificial intelligence that will eventually kill us all (I don’t subscribe to that kind of article). Dear readers, the purpose of this article is to take you where no one else has gone before, and that is to talk about the software engineering process and what AI and JS look like today. Every time we try to build software, we ask a million questions and write code to solve the problem (including all the boundary cases). Consider the case where your task is to write a function that is given a two-dimensional array of integers and asks you to return the number that looks most similar.

Specifically, you’re writing a function that recognizes numbers, and the resulting array looks something like this (in which case you should return 5).

We had to write crappy code to do this — we knew it was too loose, and once we put it into production, we felt we needed to refactor (or do something about it).

You and I will find our code riddled with if and for loops, but we must use them to create the necessary programs.

For such tasks, however, the best option is machine learning, a subfield of artificial intelligence. The advantage of machine learning is that we don’t need to consider a series of steps in order to solve a problem, but rather give the machine learning algorithm some correct examples, as shown below. It will give you the correct steps.

process

Although the main purpose of this paper is not to study how to realize these algorithms, but in the actual software program, it is very important to understand the basic process and main output of its application (this paper takes JS as an example). Data scientists often use the following steps:

  1. Defining the problem (identifying numbers);
  2. Given data (MNIST data set);
  3. Create optimal models (abstractions of actual functionality);
  4. The model USES

As developers, our work falls somewhere between step 3 and Step 4.

model

Typically, these models are created in Python using a machine learning framework. This process takes a long time and relies on large amounts of data. It’s very easy to get bored and frustrated. However, once the tedious and frustrating parts are done, there is an actual file output to represent the model. You should think of it as an asset to your project. In the case of TensorFlow, the output is usually a protobuf file.

TensorFlow.js

I’d like to remind you that I don’t consider myself a JS expert, so please let me know if I’m wrong or have a better solution. The focus of this section is to show you how to use models in JavaScript applications. We’ll use Tensorflow.js, which is billed as a framework for training and deploying machine learning models, and we’ll focus on the deployment part, Most models are typically created by data scientists using the full-strength TensorFlow Python package. I admit that, in some cases, migrating learning on the client side sounds like a lot of fun.

The process of creating a model and converting it to tensorflow.js is fairly simple (I won’t cover it here, but it’s a fun exercise and you should definitely do it if you have the chance), see (github.com/sethjuarez/…)

Now, let’s start with a practical example:

In this case, I decided to use vue.js. Because I have some framework experience and already have a (component)[Codepen.io/getFlourish…] Most of the canvas painting is done.

code

When working with a real model, there are two important parts:

  1. Load model
  2. Invocation model

Let’s look at them in turn:

Load module

Creating a VUE component looks like a good idea because I can load the model once for the entire component and keep it in memory.

    mounted: async function() {... other things... // load model const MODEL ='model/tensorflowjs_model.pb';
        const WEIGHTS = 'model/weights_manifest.json';
        this.model = await tf.loadFrozenModel(MODEL, WEIGHTS);
    }
Copy the code

I think I could have chosen another hook in the Vue lifecycle, but Mounted looks good for now. Once this.Model is mounted, the model will be used whenever the Predict button is clicked. (Another interesting observation is that the model is also used to predict when the mouse is up).

Call modules

Now let’s look at an example of how we call the model:

    predict: async function() {
            const digit = this.getDigit();
            const d = tf.tensor1d(digit).reshape([1, digit.length]);
            this.probabilities = await this.model.execute({'x': d}).reshape([10]).data(); this.prediction = this.probabilities.indexOf(Math.max(... this.probabilities)); }Copy the code

The getDigit() method takes a hand-drawn image and does two things:

  1. Zoom out to a 28 by 28 image
  2. Gets an array of numeric types and enters it into the model

The key call is this.model.execute(…). . This is where we actually pass the array and make the model work. The output of the model is a 10-length array containing the probabilities of each number. In other words, a zero in the array index is the probability that it thinks the number is zero (and so on).

thinking

While this article doesn’t go into the details of how to create this application, its purpose is to give you an idea of how to use the machine learning model in modern JavaScript using Tensorflow.js.

To learn more about tensorflow.js, go to [github.com/frontend9/f…]

To learn more, go to github Repository [github.com/sethjuarez/…]