DEV Community

Cover image for How to Make Your Visual HTML WYSIWYG Editor Smarter with Image Sentiment Analysis
IderaDevTools
IderaDevTools

Posted on • Originally published at froala.com

How to Make Your Visual HTML WYSIWYG Editor Smarter with Image Sentiment Analysis

#froala #html #javascript #webdev

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 that they will 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 WYSIWYG 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 following:

First, include the Froala Editor and Filestack stylesheets inside the <head> tag. These provide the editor’s styling and the Filestack UI components:

<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>
Enter fullscreen mode Exit fullscreen mode

Next, inside the <body>, create a placeholder <div> where the Froala Editor will be initialized:

<body>
     <!-- Your other elements go here -->
     <div id="froala-editor"></div>
     <!-- Your other elements go here -->
Enter fullscreen mode Exit fullscreen mode

After that, include the required JavaScript libraries. These scripts bring in Filestack (file upload, transformations, drag-and-drop), the Froala Editor, and any other JS files you’re using in your project:

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

Finally, link to your own JavaScript file (index.js), where you’ll initialize Froala and integrate image sentiment analysis:

<!-- Your other JS files go here -->
     <script src="js/index.js"></script>
</body>​
Enter fullscreen mode Exit fullscreen mode

See the complete HTML file in this GitHub repository.

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 to initialize the editor.

Obtaining Your Filestack API Key

Before initializing the editor with Filestack, you’ll need an API key. This key authenticates your requests and enables access to Filestack services.

Here’s how to get it:

  1. Sign up for a free Filestack account at filestack.com.

  2. Log in to your dashboard and copy your default API key.

  3. For production apps, you can create separate keys for different projects or environments.

  4. Keep your API key secure. For sensitive use cases (like image sentiment), use policy and signature for additional security.

You’ll replace the placeholder ‘YourFilestackAPIKey’ in the code snippet with this key.

Initialize the Froala editor with Filestack

Once your HTML is ready, go to your index.js (or main JS file) and add the following script.

First, initialize the Froala Editor and specify the target element:

new FroalaEditor('#froala-editor',{
Enter fullscreen mode Exit fullscreen mode

This line attaches the Froala WYSIWYG editor to the <div id=”froala-editor”></div> element in your HTML.

Configure Filestack Options

Next, add Filestack integration details:

filestackOptions: {
        filestackAPI: 'YourFilestackAPIKey',
        uploadToFilestackOnly: true,
        pickerOptions: {
            accept: ['image/*'],
            fromSources: ['local_file_system']
        }
    },
Enter fullscreen mode Exit fullscreen mode

Here:

  • filestackAPI → Replace with your actual Filestack API key.

  • uploadToFilestackOnly → Ensures uploads go directly to Filestack.

  • pickerOptions → Restricts uploads to images and local file system sources.

Add Toolbar Buttons

Then, configure the editor’s toolbar:

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
        }
    },
Enter fullscreen mode Exit fullscreen mode

This block sets up different categories of buttons:Rich media tools (links, tables, emoticons, etc.)

  • Text formatting (bold, italic, colors, etc.)

  • Paragraph options (alignment, lists, spacing)

  • Miscellaneous tools (undo, redo, fullscreen, code view, etc.)

Handle Upload Events

Now, configure event listeners for uploads:

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);
        },
    },
Enter fullscreen mode Exit fullscreen mode

Here:

  • filestack.uploadedToFilestack → Triggered when an image is uploaded successfully. It calls performAnalysis() for image sentiment analysis.

  • filestack.uploadFailedToFilestack → Logs any upload errors.

Set Editor Dimensions

Finally, configure editor height limits:

heightMin: 500,
    heightMax: 1000
});
Enter fullscreen mode Exit fullscreen mode

This ensures the editor height is between 500px and 1000px, keeping the layout consistent.

In short, this script links Froala with Filestack, sets up custom toolbar options, and triggers the performAnalysis function whenever an image is uploaded. This way, every uploaded image is immediately analyzed for sentiment, and the results are displayed in the editor.

Call the Image Sentiment Analysis API

Now let’s write the logic to analyze uploaded images by calling Filestack’s Image Sentiment API.

First, we’ll create the performAnalysis function. This function constructs the secure API request URL, calls the API, and inserts the sentiment results back into the Froala editor. Append these code snippets to your JS file.

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • We pass the uploaded file’s handle and the editorInstance.

  • The policy and signature (generated in the Filestack dashboard) are required for secure API access.

  • If the API call succeeds, we format the detected emotions and insert them into the editor as a list.

Next, we need a helper function to actually make the API call:

// 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;
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • This function sends a fetch request to the constructed API URL.

  • If the response is OK, it parses the JSON result and returns it.

  • If not, it throws an error to be caught by the performAnalysis function.

This breakdown makes it clear that performAnalysis orchestrates the workflow, while scanImage handles the actual API request.

Now that we can fetch the sentiment results, the final step is to make them more readable. For this, we’ll add a helper function called formatEmotions, which turns the raw JSON into a user-friendly list that can be displayed inside the editor.

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('');
}
Enter fullscreen mode Exit fullscreen mode

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).

See the complete index.js file in this GitHub repository.

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.

Also, you can explore more in the comprehensive documentation below:

Filestack Documentation

Froala Documentation

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.

This post was originally published on the Froala blog.

Top comments (0)