Build an Online Sentiment Analysis Tool with ml5.js and React in 10 Minutes
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-appStep 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)
To see a live implementation, visit: https://5fb5f7ade73ced65c15ebb9d--nifty-mestorf-ed06ab.netlify.app/
Thanks for reading!
Looking to add a custom domain to your app? Check out: