Visual HTML Editor Tip: Take Images to the Next Level with AI Enhancements
We see AI everywhere these days, but what makes it so valuable in practical applications? For one, removing the dreaded “red eye” effect from photos. Another example is automatically generating some relevant tags for an image after uploading it. These features are just a glimpse into how AI can take images to the next level. In this blog post, we’ll explore how you can easily incorporate AI enhancements like red eye removal and auto image tagging into your visual HTML editor using Froala v4.4, Filestack, and React 18. Let’s dive in!
Key Takeaways
- Images and applications greatly benefit from AI enhancements
- Red eye removal fixes the “red eye” effect from photos taken in low-light conditions
- Auto image tagging gathers descriptive tags that correspond to an image’s general features
- Froala makes implementing both red eye removal and auto image tagging much easier
- Explore more AI features like OCR and image sentiment detection with Froala and Filestack
What Are AI Enhancements?
AI enhancements refer to tools or processes that use machine learning and computer vision to analyze and improve images or other data. These features streamline processes that would normally take plenty of effort and time. This may sound daunting, but thankfully ready-made AI tools exist today. This means that now’s a great time to start incorporating these into your applications (if you haven’t already). Some examples include:
- Red eye removal: Deals with fixing the “red eye” effect caused by low-light photography (e.g., using flash in a dark setting). By removing such unwanted effects, you can delight your users by making their pictures look a lot cleaner.
- Auto image tagging: Analyzes an image and generates descriptive tags that highlight its key features. This greatly helps marketers, advertisers, eCommerce platforms, and more.
- Image SFW checking: Scans an image and determines whether it’s safe for work (SFW) or not. Perfect for community applications, social media platforms, or other user content-heavy applications.
- Image sentiment analysis: Detects emotions from images (e.g., happy, sad, frustrated, confused). This is a flexible tool for a wide range of users.
Filestack already has some APIs that help with implementing most of these enhancements. Moreover, Froala also natively comes with Filestack, making the implementation process even easier when using a WYSIWYG editor. Let’s see how we can do that in the next section.
How to Include AI Enhancements in Your Visual HTML Editor
Set up Your Visual HTML Editor
First, create a React app, and then navigate to your project’s directory. Afterwards, run the following command to install the latest version of Froala:
npm install react-froala-wysiwyg
Froala v4.4 comes with some cool updates, including support for React 18 and Angular 19. This time, we’ll use the former. Now that you have Froala in your project, create a new folder called “components” under the “src” directory. Under this new folder, create a new file called “FroalaComponent.jsx” and add the following code:
import React, { useEffect, useState } from 'react';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditorComponent from 'react-froala-wysiwyg';
import 'froala-editor/js/plugins.pkgd.min.js';
function FroalaComponent() {
const [tags, setTags] = useState([]);
const config = {
filestackOptions: {
uploadToFilestackOnly: true,
filestackAPI: 'YourFilestackAPIKey',
pickerOptions: {
accept: ["image/*"],
fromSources: ["local_file_system"],
},
},
events: {
'filestack.uploadedToFilestack': function (response) {
if(response && response.filesUploaded[0].handle){
const fileHandle = response.filesUploaded[0].handle;
// this is where we'll handle the red eye removal and image tagging AI enhancements
performEnhancements(fileHandle, this);
}
else{
console.error("Image upload failed, no URL found in response", response);
}
}
},
heightMin: 500,
width: 1000
};
useEffect(() => {
// import Filestack scripts
const filestackScript1 = document.createElement('script');
filestackScript1.src = 'https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js';
filestackScript1.async = true;
document.body.appendChild(filestackScript1);
const filestackScript2 = document.createElement('script');
filestackScript2.src = 'https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js';
filestackScript2.async = true;
document.body.appendChild(filestackScript2);
const filestackScript3 = document.createElement('script');
filestackScript3.src = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js';
filestackScript3.async = true;
document.body.appendChild(filestackScript3);
const filestackStylesheet = document.createElement('link');
filestackStylesheet.rel = 'stylesheet';
filestackStylesheet.href = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css';
document.head.appendChild(filestackStylesheet);
return () => {
document.body.removeChild(filestackScript1);
document.body.removeChild(filestackScript2);
document.body.removeChild(filestackScript3);
document.head.removeChild(filestackStylesheet);
};
}, []);
return (
<div>
<div className="editor">
<FroalaEditorComponent tag='textarea' config={config} />
</div>
<div id="image-tagging-results">
<h3>Image Tagging Analysis:</h3>
<ul>
{tags.map(([key, value], index) => (
<li key={index}>
{key}: {value}
</li>
))}
</ul>
</div>
</div>
);
}
export default FroalaComponent;
The code above deals with the editor setup, including the necessary Froala options, Filestack options and scripts, and events. On a successful upload, we’ll call the “performEnhancements” function, which takes both the uploaded file’s handle and the editor instance as parameters. But we’ll talk about this more later on. For now, note that the FroalaComponent includes both the editor and a space where we’ll load the image tags. When you’re done with the editor setup, go to the “App.js” file and replace the default code with:
import './App.css';
import FroalaComponent from './components/FroalaComponent';
function App() {
return (
<div className="App">
<FroalaComponent />
</div>
);
}
export default App;
This calls the FroalaComponent in your application. By now, you should see the editor when you run the application. And while you’re free to play around with its features, we’re not quite done yet. It’s time to add some AI enhancements into our React application.
Add Red Eye Removal
Remember the “performEnhancements” function in FroalaComponent? Let’s create it now:
async function performEnhancements(fileHandle, editorInstance) {
const redEyeURL = `https://cdn.filestackcontent.com/redeye/${fileHandle}`;
try {
editorInstance.html.insert(
`<img src="${redEyeResultURL}" alt="Enhanced Image" style="display: block; margin: 20px auto; width: 302px; height: 190.23px;" />`
);
}
catch(error) {
console.error("Error during enhancements:", error);
}
}
Red eye removal requires just the Filestack API (“redeye”) and your file handle. To start off, create the URL by appending these requirements to the Filestack CDN. We’ll call that “redEyeURL.” Next, we can insert the URL directly into the editor to display it. If you need to store this URL or use it elsewhere, you can declare it as a constant or variable. That’s it for red eye removal. Let’s move on to how you can generate image tags automatically.
Handle Auto Image Tagging
In the same file (and “performEnhancements” function), add the following code:
const policy = "YourFilestackPolicy";
const signature = "YourFilestackSignature";
const autoTagURL = `https://cdn.filestackcontent.com/security=p:${policy},s:${signature}/tags/${fileHandle}`;
const autoTagResult = await fetch(autoTagURL);
const tagData = await autoTagResult.json();
const tags = tagData?.tags?.auto;
if(tags) {
setTags(Object.entries(tags));
}
else {
console.error("No tags found in response.");
}
You can get both the policy and signature by generating them under the “Security” tab of the Filestack dashboard. You’ll need these for the auto image tagging feature. This time, instead of appending just the API keyword, add the security keywords, followed by the “tags” part and the file handle. Next, fetch a result from the auto tagging URL and convert it into JSON format. You’ll end up with an object of tags. Extract the data (key-value pairs, e.g., “face: 98, human: 99”) and set the tags into our displayable constant. All that’s left now is to run the application.
Upload an Image Using the Visual HTML Editor
In your CLI, run “npm start” to view the application. Click on the Filestack upload icon, which brings up the Filestack uploader UI. Choose an image that contains some form of red eye effect and upload it:
After clicking the upload button, you should see the new, enhanced image together with the results of the image tagging process.
From the result of the image tagging analysis, the uploaded image contains a portrait of an adult woman’s face. All the tags seem correct and accurate. Furthermore, the red eye effect from the original photo has disappeared, cleanly, I might add. And all it took to implement both AI enhancement features were a few lines of code.
Wrapping up: Enhance Your Visual HTML Editor with AI Today
Adding AI enhancements like red eye removal and automatic image tagging to your visual HTML editor isn’t just cool—it’s practical and efficient. With tools like Froala and Filestack, you can easily implement these advanced features to significantly improve the user experience in your application. And why stop there? Dive into other powerful AI features like OCR, image sentiment analysis, and SFW detection to take your app to new heights. It is, after all, a great time to include AI in our applications.
No comment yet, add your voice below!