Build an Online Sentiment Analysis Tool with ml5.js and React in 10 Minutes

Photo by Hybrid on Unsplash

Sentiment analysis is one of the popular applications of machine learning. We’re going to use the ml5.js library (which is a wrapper around tensorflow.js)along with React to create an online sentiment analysis tool.

First, we’ll import the ml5.js library. Then, we’ll add some UI elements to interact with ml5.js. Then, we’ll push to GitHub. Finally, we’ll host it on Netlify.

Let’s get started!

Step 1 of 5: Create A New React Project Using Create-React-App

In your terminal, type:

npx create-react-app my-sentiment-app
cd my-sentiment-app

Step 2 of 5: Import ml5.js

In the index.html file, import ml5.js:

<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

into the <head> section, and remove the extra boilerplate code:

For more information on getting started with ml5.js, visit https://learn.ml5js.org

Step 3 of 5: Add the UI Elements and Logic

In App.js create three html elements: a textArea element, a button, and an output element. Additionally, we’ll load the model and run the analyzer when the calculate button is clicked.

Step 4 of 5: Push to GitHub

Create a new repository on GitHub and push files up. (For a more detailed explanation of how to create a new repository and push files, see https://medium.com/swlh/how-to-build-and-deploy-a-react-website-with-custom-domain-in-10-minutes-17d953d2a715)

Step 5 of 5: Host on Netlify

Login to your Netlify account (or create a new one if necessary) and create a new site from git. Select your GitHub repository and click deploy site. (For a more detailed explanation of how to host on Netlify, see https://medium.com/swlh/how-to-build-and-deploy-a-react-website-with-custom-domain-in-10-minutes-17d953d2a715)

Sentiment Analyzer App

To see a live implementation, visit: https://5fb5f7ade73ced65c15ebb9d--nifty-mestorf-ed06ab.netlify.app/

Thanks for reading!

Creator of Goalsmash.net. Help others achieve their goals. Get paid.