ChatGPT AI: Chat with Einstein (Difficulty: 3)

CreatiCode

A video version of this tutorial is available as well:

Introduction

ChatGPT is an AI model from OpenAI that can chat with us like a human being. It can answer our questions or help us carry out many tasks (e.g. translation, summarization, etc.).

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

In this tutorial, we will create a simple chat program. We will tell ChatGPT to pretend to be Albert Einstein (a famous physicist), so the user can have a chat 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

Note that you can search for the keyword “chat” to find this block in the flyout:

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:

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.

Let’s print out what the user has typed using these blocks. The “value of widget” block will represent the input of the user.

If you don’t see “chat1” in the dropdown, you just need to run the project first 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 them printed out in the Console Panel at the bottom of the 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 full control on how or when the input is added to the chat history. For example, we might want to fix the typos in the user input automatically before posting it to the chat history window.

Step 4 - Append the User Input to Chat History

Now let’s add the user’s input to the chat history, as opposed to printing it out. We can use the “append to chat” block.

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

Then the text is appended to the chat history window on top under the name “Me” on the left side with a “USER” icon. You can customize its text color and background color as well. 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.

For testing purposes, we will use a maximum length of 50 for now, so we get the response back quickly.

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 are ready to have a 2-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 simply 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 out right away, and we will get a greeting from ChatGPT first. ChatGPT will continue to pretend it is Einstein from this point on:

Step 8 - Increase Length Limit for Each Response

Currently, we are using a total length limit of 50, so if the chatbot is trying to say more than this, 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 bigger number, 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 a bit secretly. For example, we can append these words after the user input “Please use 50 words or less.”

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:

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

Creative Ideas

In this tutorial, you learned how to use the chat window widget, and how to use the ChatGPT chatbot. 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 understand the life or work of that profession.
Chat with Other Things: ChatGPT can also pretend to be an object instead of a person, such as the planet Mars, Mickey Mouse, a molecule or a dolphin, etc.
Give more details in your first prompt: The first prompt is fairly important, since it tells ChatGPT exactly who to pretend 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 to the sprite, then use it as the icon for Einstein:

Bennett Garritson

This post is deleted!

Salvatore Nicholson

This is sooooooooooo cool!!