Artificial intelligence into a react application

As you might have heard recently in the news or read over the internet, AI is growing at a fast pace, allowing for tasks that could have only been imagined in science fiction in the eighties to become a reality. AI is present in self-driving cars, OCR and translations on the fly through the smartphone camera, image generation from text, support chat bots, weather and climate prediction, face/person detection and even sentiment detection on text.

AI, or Artificial Intelligence, is the ability of a software to do tasks that are usually done by humans because they require human intelligence and discernment. By building this intelligence into software, it can mimic human cognitive activity. This intelligence is known as a model, a program that has been trained on a set of data to recognize certain types of patterns. There are currently many public models available for use and implementation in software.

In this post, the goal is to make practical use of AI in a React application. Therefore, we will not continue reviewing IA fundamentals, so feel free to google that before continuing with the article.

As React runs on the browser, we will need to make use of a particular library that allows for the use of AI models directly on the browser through an API. The most popular one is Tensorflow, which is a robust engine that supports building, training, and usage of AI models.

The model which will be using to build our Sentiment Analysis component is the Convolution Neural Network (CNN) model, it has been trained with a set of 25.000 movie reviews from IMDB dataset so it will properly label positive or negative sentiment on the text we pass to it.

Let’s start then by creating a react application from scratch, for that we run the following command on a new terminal.

npx create-react-app sentiment-analysis

Then let’s navigate to the new project and start up the react application

‍

cd sentiment-analysis && npm start

We will see the following screen on the browser

‍

‍

‍

‍

Let’s edit the main screen UI at src/App.js to display a few sentences which denote some kind of sentiment or situation.

‍

‍

Now that we have something to work over, let’s shut down the server and install the tensorflow js library with

npm install @tensorflow/tfjs 

‍

Then let’s build a basic component called SentimentalText which will receive a line of text and will be able to do Sentiment Analysis over it and append an emoji at the end which will vary depending on the detected sentiment from the text.Create the following file src/SentimentalText.js with the following content.

‍

‍

As we can see here we have a React component which will load tensorflow and both the model and its metadata at mount, there is also a function called padSequences which will format the text so we are able to use it against the model and finally a function called getSentimentScore which calculates the score using tensorflow, the model and the input text with its proper transformation. As the returned score from the model is a value between 0 a 1 and up to 16 decimals, we adjust the output to the range we want, in our case we will detect and use 3 ranges, being the lowest the sad state, the intermediate the neutral state and the highest the happy state.

‍

Now let’s use this component with the sentences with had on the main screen as follows

‍

‍

Here we replace the text with the component we build and pass the text as a property to each respective item. When running the example again with
‍

npm star

‍

You will see that each sentence now has an emoji at the end expressing the sentiment the model detected

‍

‍

With this example we can see how easily it is to use AI and implement Sentiment Analysis nowadays in a React application by using in this case Tensorflow, keep in mind that this is a simple exercise and there is still a lot to improve in terms of how we built the component and how do we consume and use models in a javascript environment on the client side but this is just to gave you a glimpse of what’s coming in the future.

Source code of this example can be found at

https://github.com/ReyRod/sentiment-analysis-example

‍

‍