React + Tensorflow.js , a cool recipe for AI powered applications

#webdev #ai #tensorflow #react

You don't have to be an AI/ML engineer or a Data scientist or to subscribe to a cloud AI service to build cool, AI powered applications! All you need is a laptop, a text editor and an internet connection 😉

Intro:

If I had a dime for every time I hear "Artificial Intelligence", "Machine Learning" or "Deep Learning" (or their two letters' abbreviations) while reading a tech article, watching an instructional video on YouTube or an ad for a new baby formula, I'd be a billionaire 💵💵

Strangely enough, AI isn't a new thing! It is dated back to the 1950's! But to put it plain and simple, the math was there, the theory was there too but the computational power and the amount of data didn't help back then to feed this hungry beast. And just lately, the hardware and data volumes caught up and just like that, AI is a big thing and became more accessible than ever!

But what is AI actually? Simply put, it's a "math problem"! That's it! AI tries to find the most "general" mathematical formula to solve a specific problem (Artificial Narrow Intelligence) and in doing so and depending on the used algorithm, this formula will include a lot of parameters (sometimes called weights) and the algorithm will perform tons of mathematical operations (model training) to find the optimized values for those parameters.

What is Tensorflow:

Tensorflow is Google's "end-to-end machine learning platform". It's a framework to manage the whole lifecycle of a Machine Learning (and AI) project, from data preparation to production deployment. Remember the math stuff we talked about in the last section? Tensorflow manages that in addition to a lot of other stuff. Its core API is written for Python and you have to know your math just a little bit in order to play with it. It's more for deep learning models (neural networks) and has a lot of already implemented "layers" for you to use in your network. You can prepare data (images included with the option of image augmentation for small data sets ... yay! 😃), experiment with different model architectures, tune the model's hyperparameters (a fancy name for model configs), train, validate and test your models and monitor your models in production. It's a great framework, but it is not an easy one to learn, especially if you don't like math that much!

What's React:

If you don't know it already, React is a JavaScript ~~framework~~, sorry a "library" 🤷‍♂️ for LEGO-like frontend development. Basically, it lets you cook your functionality and structure in modular "components" that you can put together like LEGOs and build a great UI. You must at least know the basics of HTML, CSS and JS to be able to work with it. Once you do, it's somewhat easy to learn. I'm not a frontend/web developer and I've picked it up in one day from Mozilla's tutorial in its official website (this one)

Enter: Tensorflow.js

As I mentioned earlier, Tensorflow is used to create models which are usually deployed as a separate service and communicate with apps through APIs over the network. But Google has other Tensorflow flavors, more specifically a JavaScript one, Tensorflow.js which can run on Node.js or directly in the browser! Yes, you read it right, you can deploy models to your users' browsers without the need of a backend model service! So what Google had in mind, is that you should use the core Python API to create your model then you "convert" this model to the JS format to be "JavaScript-Ready"! (read about it from here)

But what if you don't like math or ... Python (don't look at me, I love Python 😍!), how can you create your model with Tensorflow then? The good news is that you can use AI models in your apps without even installing Tensorflow Python API! Google has created, trained and published state-of-the-art AI/ML models that covers a wide variety of AI applications that can be used directly with Tensorflow.js without the need to create or train them (tensorflow models)

Real-time Moderator app:

I think you are beginning to connect the dots by now 😉

What we will do is to build a small proof-of-concept (POC) by writing a simple react app and hook up a pre-trained tensorflow.js model, The text toxicity model to "moderate" the user's text input and show a notification of what's wrong with it, a text toxicity meter if you will...

The Frontend - React.JS:

First, we will create a new directory for our app, install React and create a react app all that with the help of the "create-react-app" npx script.

# Create a new react app with npx (node.js must be installed first)
npx create-react-app ai-moderator

After executing the script, we will get the following project structure.

For a sanity check, you can start the npm local developement server to see our React app running

cd ai-moderator
npm start

You will get the following app on port 3000 for your localhost

Congratulations! 🎉🎊 You are now a frontend developer, even if you don't want to be one 😁

The src directory in our project will be our main focus. And since we are not going to write a full blown React frontend project, we will get rid of most of its contents and only keep:

App.css
App.js
index.css
index.js

Although the scope of this article isn't about how to create React apps but I feel a React crash course is in order. App.js is our entry file to our project which is imported in index.js which in turn is "imported" in the public/index.html file (yes! a long-ish chain!). index.css acts as the master CSS file for the project and App.css is applied on the App.js and the below components. For organizational purposes, some like to create a components directory in the src directory to organize the Components they write. Each component may have its own css file. The final src structure will look like this

Next, we will create our components. Nothing too crazy, just a text component and a notifications component. Each one will have its own css file in the src/components directory. (you can check out the code at this repo)
Eventually, our frontend will look like something like this

Hooking up the Tensorflow.js toxicity model:

The next part is relatively simple:

We will install the model package.
Import it into our app.
Load it if not loaded using React's useEffect.
Predict text in real-time!

To install the toxicity model, just type:

npm install @tensorflow/tfjs @tensorflow-models/toxicity

To import it, type the following in our App.js:

import * as toxicityClassifier from '@tensorflow-models/toxicity';

(No need to import the tfjs package)

Using Tensorflow.js model is an async operation that deals with JS's promises. So, we will use the keyword async often. Also, we will use useEffect to load the model only once if it isn't loaded already to ensure smooth operations (the model is downloaded when it's loaded). Think of useEffect as a mechanism to execute some code outside of the React rendering space.

useEffect(() => {
    async function loadModel() {
      // "threshold" The the confidence interval for the classier.
      // Higher values = the model is more confident about its prediction.
      const threshold = 0.6;
      const toxicityModel = await toxicityClassifier.load(threshold);
      setModel(toxicityModel);
    }
    if (model === null) {
      // Only load the model if its current value is null
      loadModel();
    }
  }, [textToxicity, model]); // Watch the values for those and execute when changed.

From there, our prediction function is a breeze...

const predictToxicity = async (event) => {
    const predictions = await model.classify([event.target.value]);
    setTextToxicity(
      // Sets the "textToxicity" array
      // to the predictions after some filtering and mapping.
      // (console.log) the predictions to see
      // from where this came from.
      predictions
        .filter((item) => item.results[0].match === true)
        .map((item) => item.label)
    );
  };

The model's predictions produce the following output:

console.log(predictions);
    /*
    prints:
    {
      "label": "identity_attack",
      "results": [{
        "probabilities": [0.9659664034843445, 0.03403361141681671],
        "match": false
      }]
    },
    {
      "label": "insult",
      "results": [{
        "probabilities": [0.08124706149101257, 0.9187529683113098],
        "match": true
      }]
    },
    ...
     */