VIDEO | How to do Sentiment Analysis with JavaScript (Vue.js)? 

VIDEO | How to do Sentiment Analysis with JavaScript (Vue.js)? 

In this 5-step tutorial brought to you by our front developer François, you’ll learn everything there is to know to get started with Sentiment Analysis using JavaScript (Vue 3 + Vite) and put it into practice with a tiny project 🚀: a chat in which only positive messages are accepted. Eden AI provides an easy and developer-friendly API that allows you to perform Sentiment Analysis.

To install Kindchat, you can access François's GitHub repository here

1. What is Sentiment Analysis? 

Also known as Opinion Mining, Sentiment Analysis is an NLP (Natural Language Processing) technique that detects positive, negative, or neutral sentiment in text. Businesses can use Sentiment Analysis to automatically understand how people are talking about a specific service or product and understand customer needs on social media, in feedback, or in support tickets instead of sorting through this data manually.

If you want to learn more about what NLP can offer, feel free to check our selection of the Best Natural Language Processing APIs. Also, if you are interesting in using Sentiment Analysis with Python, we recommand reading our tutorial How to use Sentiment Analysis API with Python

2. Getting Started with Sentiment Analysis API

Now that we’ve covered what Sentiment Analysis is and what it does, we can start building our KindChat app! Note: for the purpose of this video, everything will be done on the client side. Obviously, this kind of verification should be done on the backend in order to hide your API keys.

This is a fairly simple Vue.js application: a message-sending system in which we’ll enter a message in the form and send it, and later check if the message entered is positive so that it can be sent in this chat (triggered by the function sendMessage). Feel free to clone the GitHub repository to try Kindchat.

First and foremost, make sure to create an account on Eden AI for free. Then, you will be able to get your API key 🔑 directly from the homepage with free credits offered by Eden AI.

Next, you’ll need to copy-paste the API key from Eden AI in a tiny environment file to stock it in a variable called "VITE_API_KEY" as such:

3. Start using Sentiment Analysis API 

First, you'll need to copy the snippet code in JavaScript from Eden AI's Sentiment Analysis API and paste it directly into your function. Don’t forget to add the API key !

💡 If you look closer at the Sentiment Analysis code snippet, you’ll see that some language parameters are needed. If you’re interested in using language detection in your project, you’ll need to code it beforehand. We won’t discuss it here, though our video covers it all. 

Then, create a sentimentAnalysis function (including the language parameter obtained if you wish to use it) and fill in the provider and text parameters (the user’s message). With Eden AI, you can choose from a wide range of different engines you want that best suit your data and project. Eventually, you’ll only need to return the promise from axios.request so that you can process it in the sendMessage function.

4. Search for negative and positive sentiments

Now let’s have a look at the Sentiment Analysis API response. As indicated in our documentation, for each provider there is an "items" array containing the sentiment and the associated sentiment_rate. In the case of our application, we are only be interested in the positive sentiment. Keep in mind that some providers may return a sentiment_rate for neutral or negative sentiments.

First, you’ll need to store the sentiment analysis response asynchronously in a variable called sentimentResponse, which is an await of sentimentAnalysis, a function to which we have passed the language we obtained previously in the video as a parameter. 

Next, store the positive sentiment score obtained in the entryMessage object score attribute which is null by default. If this value is sufficient, you will add the message to the message list displayed on the interface:

Then, you can search in these items the object relevant to positive sentiment and recover the sentiment rate with a console.log. The score will be stored in the entreMessage.score :

🙌 We’re almost there ! You'll need to add the message to the list of messages if its score is higher than a certain value, and store this value in a variable called minimum_rate. What we want is for the following line of code to run only when a certain condition is verified: messageList.value.push (entrMessage.content). 

This is a perfect opportunity to use a computed property which is a method that will only be triggered when the value of reactive object changes. This computed property (called here isPositive) will return true in case the score is higher than the minimum rate, otherwise, it’ll return false. 

At this point, you can add to the sendMessage function the isPostive condition and add the message to the list of messages only if isPositive is true. If it’s not the case you’ll simply return and end the logic. The rest of the function won’t change, it simply scroll automatically down the page when a message is sent. 

5. Test the KindChat App

Congrats ! 🥳 You can now test the app. 

Now, if you write a positive message, the message appears in the chat. If you write negative comment, the message should not appear in the chat (the content of entryMessage.content is reset only when isPositive is True, so the negative message doesn’t disappear from the form). 

Last but not least, you can give visual feedback to the user indicating when his message doesn’t meet the conditions when the score is obtained. To do so, you’ll need to create a small paragraph which will appear only if isPositive is false and if the score of the entryMessage is different from null.

The output : 

Thanks to Language Detection, you can also try Sentiment Analysis with other languages. Whatever the language used, Language Detection will indicate the right language to provide to the Sentiment Analysis API which will then estimate if the message is positive or not. 

That’s it with our KindChat App! 😎 Sentiment analysis with JavaScript has never been easier! Our unique API makes Sentiment Analysis accessible to all developers. You can use multiple Sentiment Analysis APIs from different providers in addition to multiple languages in just a few lines of code. You can also check our Open Source AI APIs project on GitHub. If you want something even easier, you can use our Sentiment Analysis APIs on Make.

If you have questions regarding this tutorial, the Eden AI community can help you out on its Discord Server

6. Why choose Eden AI for your project

🔥 Eden AI simplifies the use and deployment of AI technologies by providing a unique API connected to the best AI APIs. Eden AI is the future of AI use in business and provides: 

  • Centralized and fully monitored billing on Eden AI for all AI APIs
  • Unified API for all providers: simple and standard to use, quick switch between providers, access to the specific features of each provider
  • Standardized response format: the JSON output format is the same for all suppliers thanks to Eden AI's standardization work. The response elements are also standardized thanks to Eden AI's powerful matching algorithms.
  • The best Artificial Intelligence APIs on the market: big cloud providers (Google, AWS, Microsoft, and more specialized engines)
  • Data protection: Eden AI will not store or use any data. Possibility to filter to use only GDPR engines.

Multiple AIs in one API

Related Posts

Try Eden AI for free.

You can directly start building now. If you have any questions, feel free to schedule a call with us!

Get startedContact sales