The Power of ChatGPT and Froala: A Match Made in Writing Heaven

What if you had the power of a reliable, built-in co-writer in your HTML editor whenever you were writing? And I’m not talking about the human kind of co-writer. What I’m talking about is a ChatGPT instance within a WYSIWYG (what you see is what you get) HTML editor. That means that using a single editor, users can tap into ChatGPT to generate content with just a button click.

You’ve probably heard of the terms “ChatGPT” and “WYSIWYG editor,” especially if you’ve recently searched the internet for tech news. In this article, I’ll tell you about these topics and discuss the ethics of using ChatGPT. Furthermore, I’ll show you how you can integrate ChatGPT into an easy HTML editor.

Before we dive further into the hows, let’s first have a refresher on what ChatGPT and WYSIWYG editors are.

What is ChatGPT?

ChatGPT is an artificial intelligence (AI) language model that people can interact with conversationally. It’s capable of answering questions, recognizing mistakes, including its own, and declining inappropriate requests.

ChatGPT came from OpenAI, a company that works on AI that can potentially help people. They trained ChatGPT using reinforcement learning from human feedback (RLHF). This is a process where human trainers simulate conversations as both AI and users.

Now, I’m not an expert on creating AI, so I went ahead and asked ChatGPT how it works. Here’s a summary of the conversation we had, along with an image of our actual conversation:

• ChatGPT uses machine learning algorithms to analyze and process data, which it then uses to generate responses
• ChatGPT preprocesses any inputted text into a format that it can understand better. It then breaks down the text into smaller components known as tokens
• ChatGPT then tries to come up with a meaning for the input text by analyzing the tokens from the previous step
• The model samples several predefined model outputs and compares them with each other or a newly generated response
• ChatGPT returns the best ranking generated response to the user

It’s important to know how ChatGPT works, but what’s more important is the responsibility that we have when using it. Like it says in the image above, ChatGPT cannot always generate the correct or appropriate responses. Furthermore, the content that it generates can sometimes contain potentially plagiarized phrases. So, is it really okay to use ChatGPT? What should we use it for? Is there a way to use it responsibly? Let’s answer these questions in the following section.

The ethics of using ChatGPT

Let’s admit it: AI, despite its usefulness and coolness, is scary. After all, people can use it to plagiarize content. For example, people can ask ChatGPT a question and paste the answer while claiming it as original work. Furthermore, irresponsible writers can fail to fact-check the generated content. This could result in spreading incorrect or confusing information. If people fully and irresponsibly depend on these tools, they will end up creating bland, repetitive, or inaccurate content.

If that’s the case, then why should we still learn ChatGPT? Let’s go back to the goal of OpenAI: using AI to benefit humanity. ChatGPT, when used correctly, greatly helps individuals and organizations alike create content easily.

Is it okay to use ChatGPT?

The answer depends on what you’ll use ChatGPT for and whether the institution to which you belong allows it. For example, it’s best to categorize using ChatGPT for schoolwork as something that’s not okay. That’s because critical thinking is a necessary foundation and skill for people. Using AI to do all the work for them could prevent students from developing this essential skill.

What should we use ChatGPT for?

• Overcoming writer’s/coder’s block
• Planning the contents of a copy
• Reducing the time it takes to produce content

How do we use ChatGPT responsibly?

• Fact-check the generated content. Because ChatGPT can’t guarantee the correctness of the content that it generates, you should always fact-check it.
• Understand the generated content. Instead of just copying and pasting ChatGPT’s response, you should read and understand it. Then, try to summarize or explain it in your own words. If you don’t, you can potentially plagiarize some existing content or spread misinformation without even knowing.
• Double check for plagiarism. Speaking of plagiarism, you should always aim to reduce or eliminate it, especially if you use ChatGPT for content. If in doubt, cite your sources or attach a link to the source.
• Think of it as a guide, not a direct solution. ChatGPT isn’t the answer to everything, so we shouldn’t just copy and paste away. It’s better to let it guide us in creating authentic, high-quality content quickly.

There’s much more to think about when it comes to the ethics of using ChatGPT and similar software. But for now, it’s enough to keep what we’ve discussed so far in mind. Now that we’ve talked about ChatGPT, it’s time to look at WYSIWYG HTML editors.

What is a WYSIWYG HTML editor?

A WYSIWYG editor is an HTML editor that lets users easily create content and see how it’ll look once rendered. It comes with a toolbar and a space where users can write or edit HTML content.

WYSIWYG editors have rich text features (e.g., text and paragraph formatting and styling, image handling, etc.) and much more. And by that, I mean real-time collaboration, autosaving, document and inline modes, support for Markdown, accessibility, and other advanced features. These editors also usually allow users to paste content from different sources and keep its format.

What is an easy HTML editor to integrate and use?

Froala is a lightweight, elegant, and powerful WYSIWYG HTML editor that’s easy to integrate and use. It has over 100 features, a 40 ms initialization speed, and a cozy user experience. Froala is also developer-friendly with its ease of use, quick integration, and excellent documentation. These are just a few of the reasons why we’ll use this for our simple but fun experiment.

To get started, include Froala’s files into your project by NPM, download, or CDN. Afterwards, create a DOM element (for now, we’ll use a <div> with the id “froala-editor”). The last step is to initialize the editor via JavaScript. In our case, that’s

var editor = new FroalaEditor(“div#froala-editor”);

Great! We now have Froala in our project. Let’s start creating our brilliant co-writer by integrating ChatGPT.

How to integrate ChatGPT into Froala

To add ChatGPT capabilities, we’ll need to create a custom button in Froala Editor (click here for a full guide). The way we want this feature to work is as follows:

1. Type a question or a command for ChatGPT to answer.
2. Highlight this question or command.
3. Click the custom button for ChatGPT.
4. Wait for ChatGPT to replace the highlighted question with the answer.

Creating the custom button

Let’s start by creating the custom button using the code snippet below.

We have two things to note here. First, we have to define both the custom button and the icon that represents it in the toolbar. To do this, we need to use Froala’s DefineIcon and RegisterCommand methods. The former takes the icon name and the icon image as parameters. On the other hand, RegisterCommand defines a custom button, its title, and its properties. Its properties also include the function to call once the button is clicked.

The second thing is that when initializing the editor, we must include the custom button’s name in the toolbar. In our case, it’s “chatGPT”. Note that we separated it from the other buttons by placing it in another square bracket group.

After doing this, you should see the following when you run the application in a browser:

Making the OpenAI API Request

Next up, we have to replace the “Insert ChatGPT code here” part of the code with the API request. To do this, let’s follow the instructions here, but instead of a cURL, let’s use the fetch method.

The first thing you need to do is secure an OpenAI API key. After that, you can initialize a constant with your API key as its value. Then, get the highlighted text from Froala Editor by using this.selection.text(). Before you make the API call, you should prepare the data first by defining its properties:

• model refers to a particular GPT-3 model release of ChatGPT. In our case, we’ll use Davinci (or text-davinci-003), which is the most capable one at this time of writing.
• prompt refers to the user input that ChatGPT will process.
• max_tokens is responsible for setting an upper limit for the number of tokens that the API will return.
• Lastly, temperature refers to the sampling of the output. Having lower values produces more deterministic or precise results. On the other hand, higher temperature values (e.g., 0.95) tend to yield more creative, diverse, but inconsistent results. It’s up to you to choose the right value (we chose 0 here), but in summary, 
  • Lower temperature = boring but higher probability of correctness
  • Higher temperature = creative but higher probability of errors or nonsense

Once the data is ready, request a query using the fetch method. Don’t forget to provide the API key that we defined earlier! And remember to convert the JSON object into a JavaScript object since the API returns JSON as a response. Once you’re done, it’s as simple as getting the first element of the object and inserting it into Froala.

Now that we’re done with the coding part, let’s see our ChatGPT-powered Froala Editor in action.

Conclusion

So, what do you think? Having a co-writer within your own Froala editor sounds pretty awesome, right? What we accomplished in this article might be simple, but it’s a great start to making something truly amazing. With an integrated ChatGPT, your users can write articles and other content (and get rid of writer’s block) more effectively. Just make sure to not misuse, rely too much on, or abuse this wonderful and innovative tool.