ChatGPT AI: An Improved Chat App (Difficulty: 3)

CreatiCode

Introduction

In the previous tutorial, you learned how to build a simple chat app using ChatGPT.

In this tutorial, you will learn a few tricks to improve that chat program.

Step 1 - Starting Project

We will use the project from the previous tutorial as the starting point. If you don’t have it, you can follow that tutorial to build one, or remix the following project:

https://play.creaticode.com/projects/1ca634e4193e2b27500be13e

Step 2 - Test for “Character Breaking”

In the current program, we have assigned a role for ChatGPT to play. However, our users can easily remove that restriction and cause ChatGPT to “break its character”.

As shown, ChatGPT will admit it is pretending to be Einstein when we challenge it:

There is nothing wrong with this response, since ChatGPT is trying to fully disclose what’s happening. However, in many applications, we want to force ChatGPT to stay in its role.

For example, suppose we are using ChatGPT to play an almighty wizard in an adventure game. It will spoil the fun if the wizard suddenly starts to admit it is an “AI language model”, right?

For another example, suppose we are using ChatGPT to quiz a student. If the student somehow makes ChatGPT break its character, it may start to give out answers.

Step 3 - Use a “System Request” to Enforce the Role

To make sure ChatGPT stays in its assigned role, we can use a “system request”. ChatGPT treats all system requests very seriously, and it will try its best to fulfill such requests.

Replace the original request block with a “system request” block, and clearly instruct ChatGPT to stay in its assigned role in all responses. In addition, there is no response from ChatGPT, so we will simply start with a message of “Hi”.

Now when we challenge ChatGPT again as a user, it will try to maintain its assigned role:

Step 4 - Enhance the System Request

Although we are using a system request to enforce the role, the solution is not perfect.

First of all, the true Einstein does not really know what is ChatGPT, so it should not say “I’m not chatgpt” or “I’m not a chatbot”.

In addition, a smart user can still easily make ChatGPT fail its task like this:

If we really want to keep our chatbot “realistic”, we need to enhance our system request to account for such user challenges. This is often called “prompt engineering”, since we are trying to find the best prompt to improve ChatGPT’s response.

For example, we can add another sentence to the end of our system request: “You have never heard of AI models or chatgpt.”. Here are the improved responses:

Step 5 - Switch to “Streaming” Mode

Currently, ChatGPT is not very fast in generating its responses. If a response is long, the user may have to wait several seconds before seeing it.

To solve this problem, most ChatGPT systems use the “streaming” mode, which displays the partial responses from ChatGPT as soon as they are generated. This will allow the user to start reading the response much earlier.

Note that in streaming mode, this request block will finish immediately, but the content of the “response” variable will be empty at this moment.

Step 6 - Repeatedly Refresh the Response

In the streaming mode, the value of the “response” variable will be automatically updated as ChatGPT generates the response. Therefore, to display the response, we need to use the following approach:

Append a simple message like “…” to the chat window, which tells the user ChatGPT is thinking.
Repeatedly update this message using the “response” variable.

Now we are getting the response in the chat window as soon as they are received:

Step 7 - Detect the End of the Response

We need to improve the repeat loop a bit. We can not use a forever loop, since it will cause the program to stuck in this loop.

To find out whether we have received the entire message from ChatGPT, we can look for the emoji of a checkmark . You can copy it here https://emojiterra.com/white-heavy-check-mark/.

Step 8 - Clean Up the Ending of the Message

After we have received the checkmark in the response, we will exit the “repeat until” loop. At this point, we will still need to update the chat message again, since “response” may contain some content not displayed yet. We should also remove the checkmark emoji.

Step 9 - Handle Chat Limit Gracefully

Currently, there is a limit on how long the chat can last. If the chat is too long, the response will contain the special phrase “CHAT LIMIT REACHED”. When that happens, this chat can no longer continue, so we need to tell the user about it. At this point, the user can not continue with the current chat, but he/she can start a new chat by clicking the green flag.

Creative Ideas

Now please try to extend this chat app more. You can try to enhance the prompt to make it more realistic using the “system request”. For example, you can try to pretend the year is 1945 and our Einstein does not know anything that happened after that year.

Elam Gobelwana

This post is deleted!

Ismael Grellier

tikoooooooooooo

Khanh

hello how are you

Mia Peterson

Wow, you must have not had phones or any of the new technology.

Salvatore Nicholson

Pretty cool yet basic. I made sonic the hedgehog w/ this tutorial!