ChatGPT AI: Chat with Einstein (Difficulty: 3)

CreatiCode

A video version of this tutorial is available as well:

Introduction

ChatGPT is an AI model developed by OpenAI that can engage in conversation with users like a human. It can answer our questions and help us carry out various tasks (e.g., translation, summarization).

Many new applications will be built around AI models like ChatGPT. Typically, the application creates a detailed request (called a “prompt”) based on user needs, sends the prompt to the AI model, and then presents the response from the AI model in a user-friendly manner.

In this tutorial, we will create a simple chat program. We will instruct ChatGPT to impersonate Albert Einstein, a famous physicist, so the user can engage in a conversation with “him.”

Step 1 - Start with An Empty Sprite

First, create a new project in the CreatiCode.com playground (click “Create” on top), and remove the sprite with the dog in it. Now we have an empty project with an empty sprite.

Note that you need to sign in first. You can create a free account using a valid email address.

Step 2 - Add the Chat Window Widget

Now let’s use the “add chat window” block from the “widget” category to add a chat window

Here is how you can find this block in the flyout by searching for the word “chat”:

With the default input parameters, the chat window will be located at the center of the stage (x=0 and y=0), with the same width and height as the stage (480 by 360). So it will occupy the entire stage.

You can customize its background and border colors.

The name of this chat window is “chat1”, which will be used to refer to it later.

It should look like this when you run the project now:

Step 3 - Handle the “Click” Event

To use the chat window, the user can type anything in the input box at the bottom and then click the green send button.

To see how it works, let’s print out what the user has typed using these blocks below. The “value of widget” block will contain the user input. Make sure you select “chat1” in the block inputs. If you don’t see “chat1” in the dropdown, simply run the project by clicking the green flag.

Note that if the user presses the “Enter” key, the “when widget clicked” block above will also be triggered.

Try to input some text, and you should see it printed out in the Console Panel at the bottom of the code editor window:

Note that the text input is cleared out from the input box, but they are not added to the chat history yet. This gives us complete control over how and when the input is added to the chat history.

Step 4 - Append the User Input to Chat History

Now, let’s add the user’s input to the chat history, rather than printing it out. We can use the “append to chat” block with the “chat1” option selected.

Here, we first retrieve the input text using the “value of widget [chat1]” block.

Then, the text is appended to the chat history window at the top, under the name “Me” on the left side, with a “USER” icon. You can also customize its text color and background color. It will look like this:

Step 5 - Send the User Input to ChatGPT and Wait

Now we will send the user input to ChatGPT and wait for its response. Note that this is a strongly moderated version of ChatGPT, which will not respond to any request that’s not appropriate for a school environment.

You will need to create a new variable to store the response from ChatGPT. You can call this variable “response”. Then you can add the ChatGPT request block to send the user input, and wait for the response to come back:

We are using the “waiting” mode, which will pause the program at this block until we get the response. The response will be stored in the “response” variable.

The temperature of 1 will make the chatbot more random and creative.

We will set the session type to “continue”, so it will remember all the chat history within the current conversation.

Step 6 - Display ChatGPT’s Response

After we receive the response from ChatGPT, we can simply append the content of the variable “response” to the chat history window:

We will use “Einstein” as the name this time, and the message will be aligned to the right with a different background color.

Now we’re ready to have a two-way chat. Since the ChatGPT chatbot doesn’t know we want it to pretend to be Einstein yet, it still responds as itself:

Step 7 - Make ChatGPT Pretend to be Einstein

To make ChatGPT pretend to be Einstein, we need to tell it to do so when we start the project. We can use the same 2 blocks to send the request and display the response. Here is the request: Pretend you are Albert Einstein and chat with me

Now we have a fully working chat! The first message will be sent to ChatGPT when the program starts, and ChatGPT’s response will be shown in the chat window before the user enters their message. ChatGPT will continue to pretend it is Einstein from this point on:

Step 8 - Increase Length Limit for Each Response

Currently, we have a total length limit of 50, so if the chatbot attempts to exceed this limit, it will be cut off. In this case, the response will end with “TOKEN LIMIT REACHED”.

There are 2 ways to solve this issue.

First, you can increase the maximum length to a larger value, such as 100 or 150.

Alternatively, you can tell ChatGPT to use fewer words. Instead of sending the user’s input directly to ChatGPT, we can modify it slightly behind the scenes. For example, we can append these words after the user input " Please use 50 words or less." In this case, ChatGPT will receive a request that contains two parts: the user’s input and our requirement for word counts.

Here is an example program showing both changes:

Step 9 - Test Run

Now the chat app is ready. Try to have a chat with it like this:

You can try the final program here:

play.creaticode.com/projects/1ca634e4193e2b27500be13e

Creative Ideas

In this tutorial, you learned how to use the chat window widgets and how to use the ChatGPT request block. Here are some ideas for you to try next:

Chat with Other People: You can easily change the first prompt to ask ChatGPT to pretend to be someone else, such as Shakespeare, Napoleon, Lincoln, or Newton. Note that the person you select needs to be well-documented on the web; otherwise, ChatGPT would not “know” much about that person.
Chat with a Professional: Instead of a specific person, we can ask ChatGPT to pretend to be a professional, such as a firefighter, a lawyer, a computer programmer, etc. This way, users can chat with it to gain an understanding of the life or work of that profession.
Chat with an Object: ChatGPT can also pretend to be an object instead of a person, such as the planet Mars, Mickey Mouse, a molecule, or a dolphin.
Give more details in your first prompt: The first prompt is fairly important, since it tells ChatGPT exactly who to pretend to be and how. You can refine it in any way you like. For example, you can specify a time period like this: “Pretend you are Einstein chatting with a student, and pretend today’s date is January 1st, 1945.”
Update Icon: You can use this image as a costume for the sprite, then use it as the icon for Einstein in the “append to chat” block:

Bennett Garritson

This post is deleted!

Salvatore Nicholson

This is sooooooooooo cool!!