How to Make Your Visual HTML WYSIWYG Editor Smarter with Image Sentiment Analysis
Every image has a story to tell, which means that emotion matters in each image upload. For example, let’s say that some moviegoers will have to choose between two horror films. It’s highly likely for them to choose the film with a poster that exhibits more fear and uneasiness. This is where image sentiment analysis comes in. It unlocks emotional context within visuals to help creators and decision-makers optimize their content for maximum impact. When combined with a visual HTML WYSIWYG editor, it allows end users to easily upload images and receive feedback about the emotions in their images instantly. In this tutorial, I’ll show you how to add image sentiment analysis features in your HTML WYSWIG editor to determine emotion in images.
Key Takeaways
- Image sentiment is an advanced feature that suits portrait-centric applications
- Easily implement image sentiment analysis with an intelligent visual editor
- Scan images from uploads or external sources
- Chain image sentiment analysis together with other Filestack tasks
- Some use cases for image sentiment detection include marketing, entertainment, social media, and more
What is Image Sentiment?
Image sentiment is a process that uses machine learning and algorithms like neural networks and deep learning to evaluate an image’s conveyed emotions. For instance, when a user uploads a photo of a person, image sentiment detection can determine whether the person is happy, calm, angry, and so on. This process is useful across different fields, such as marketing, user studies, content creation, entertainment, and more. In all these examples, image sentiment analysis can enhance engagement strategies, helping organizations convey their message better and give their audience what they need. Now that we know a bit about image sentiment, let’s explore how we can implement it in a WYSIWYG editor.
How to Analyze Image Sentiment Using a Visual HTML WYSIWYG Editor
To start off, we’ll need to create and initialize our Froala editor. Afterwards, we’ll use Filestack’s Image Sentiment API to evaluate any uploaded images. In our setup, Filestack is natively integrated into Froala Editor (v4.3.0 and up). Once we get both the editor and image sentiment detector running, we’ll display the results of the API call in our editor.
Initialize the Visual HTML WYSIWYG Editor
In your HTML file, add the code:
<head>
<!-- Add your other CSS here -->
<!-- Froala and Filestack stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />
</head>
<body>
<!-- Your other elements go here -->
<div id="froala-editor"></div>
<!-- Your other elements go here -->
<!-- Froala and Filestack JS -->
<script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
<script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
<script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
<!-- Your other JS files go here -->
<script src="js/index.js"></script>
</body>
The HTML, along with your other elements, styles, and JS, should contain the Froala and Filestack dependencies. Furthermore, this is where you’ll create the element in which you’ll initialize the editor. When you’re done, navigate to your JS file or script and include the following:
new FroalaEditor('#froala-editor',{
filestackOptions: {
filestackAPI: 'YourFilestackAPIKey',
uploadToFilestackOnly: true,
pickerOptions: {
accept: ['image/*'],
fromSources: ['local_file_system']
}
},
toolbarButtons: {
'moreRich': {
'buttons': ['openFilePickerImageOnly', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],
'buttonsVisible': 3
},
'moreText': {
'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']
},
'moreParagraph': {
'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
},
'moreMisc': {
'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
'align': 'right',
'buttonsVisible': 2
}
},
events: {
'filestack.uploadedToFilestack': function (response) {
// when a file is uploaded, begin the image sentiment detection process
performAnalysis(response.filesUploaded[0].handle, this);
},
'filestack.uploadFailedToFilestack': function (response) {
console.log(response);
},
},
heightMin: 500,
heightMax: 1000
});
This script initializes Froala Editor into the element that we created earlier. We also declare some Froala options along with some Filestack options. In the Filestack options, we specify that we want to upload images of any type from the local file system to Filestack. On the other hand, in our Froala options, we also specify our buttons, editor size, and two callback functions. The first event deals with a successful image upload, while the other deals with possible upload failure. Whenever the user successfully uploads an image, we’re calling a function called “performAnalysis,” which takes the uploaded image’s file handle and the editor instance as its parameters. This function is where we’ll use Filestack’s image sentiment features to evaluate the emotions.
Call the Image Sentiment Analysis API
In your JS file, append the code below:
async function performAnalysis(fileHandle, editorInstance) {
// use the generated policy and signature from your Filestack dashboard
const policy = 'YourGeneratedPolicy';
const signature = 'YourGeneratedSignature';
const imageSentimentURL = `https://cdn.filestackcontent.com/security=p:${policy},s:${signature}/image_sentiment/${fileHandle}`;
// fetch results from the Image Sentiment API, then insert the result into the editor
try {
const result = await scanImage(imageSentimentURL);
// format the emotions (for display)
const emotions = formatEmotions(result.emotions);
editorInstance.html.insert(`<p>Image Sentiment Analysis:</p><ul>${emotions}</ul>`);
console.log("Image sentiment result inserted into the editor:", result);
} catch (error) {
console.error("Error during sentiment analysis:", error);
}
}
// function that makes the API call
async function scanImage(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to fetch image sentiment results.");
}
const data = await response.json();
return data;
}
Notice how we have two functions, performAnalysis and scanImage. The first one is responsible for generating the URL that we’ll be using for the API call. Once it does that, it then passes the constructed URL to the second asynchronous function, which calls the API call and returns the result back to the first function. Afterwards, we insert the result of the fetch call back into the editor. But to do that, we need another function for turning the raw results into an easy-to-read list.
Format and Display the Results in the Editor
In the same script, add the following function:
// function for formatting the JSON object of emotions into an HTML list
function formatEmotions(emotions) {
if (!emotions.hasOwnProperty('HAPPY')) return '<li>No sentiment detected.</li>';
return Object.entries(emotions)
.map(([emotion, value]) => `<li>${emotion}: ${(value).toFixed(2)}%</li>`)
.join('');
}
This function first checks if the JSON result (emotions) has empty values. If it doesn’t, it returns that no sentiment was detected in the image. Otherwise, it returns a list that contains the keys (emotions) and values (in percentage and rounded up to two decimal points). After this, you now have a working image sentiment analysis feature in your application. But we’re not quite done yet. Let’s run the application and check the results. Here I uploaded an image of a person who appears to be confused.
After uploading the image, Filestack determined that the person in the image displays 99.27% confusion, which checks out. After checking the console, here’s what I saw:
This is the unformatted version of the result. Now, let’s try uploading a picture of a person smiling:
Filestack’s Image Sentiment Detection feature correctly determined that the overall sentiment of the image is 100% happy. But what if the image has no person at all? Let’s try uploading a picture of a landscape:
Here, we can see that the image has no sentiment or emotions since it doesn’t contain a portrait of anybody. Now, you’re free to experiment with Filestack’s image sentiment features. Note that you can also do other things with it. For instance, you can use it in your Filestack Workflows with other tasks, use it on images with external URLs, and use it with storage aliases.
Wrapping up: Enhance Your Visual HTML WYSIWYG Editor with Image Sentiment Features
By integrating image sentiment analysis into your visual HTML WYSIWYG editor, you add a layer of intelligence and user engagement to your content-centric apps. This feature not only streamlines workflows for developers but also provides meaningful insights into visually conveyed emotions and helps you connect more with your users. So, take advantage of this powerful combination to create smarter tools that cater to a wide variety of creative needs.
Get your Filestack API here for free.
No comment yet, add your voice below!