Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • CreatiCode
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

CreatiCode Scratch Forum

  1. CreatiCode Forum
  2. Knowledge Base
  3. Tutorials
  4. ChatGPT AI: Chat with Einstein (Difficulty: 3)

ChatGPT AI: Chat with Einstein (Difficulty: 3)

Scheduled Pinned Locked Moved Tutorials
3 Posts 3 Posters 45.9k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • CreatiCodeI Offline
    CreatiCodeI Offline
    CreatiCode
    wrote on last edited by admin
    #1

    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.”

     
    h8.gif

     
     

    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

    df55704b-bc91-4b2d-9110-987bc537c6fa-image.png

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

    h9.gif

     
    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:

    d2ba0115-91e3-4c9e-bb93-3f1008be7a41-image.png

     
     

    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.

     
    97da84a9-1d44-45d6-a782-3fdd44b8d3b2-image.png

     

    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:

     
    hello.gif

     
    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.

     
    67b57551-5678-4741-8bc9-328e838efd77-image.png

     
    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:

    h3.gif

     
     

    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:

     
    95d087aa-9688-427c-a7f4-87edd6675b36-image.png

     
    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:
     
    0999cc64-af99-4fcb-b9d2-35682b7fb8d2-image.png

     
    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:

    h4.gif

     
     

    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
     
    03a3899d-32c3-457b-9f34-e7c91f8c70f5-image.png

     
    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:

    h5.gif

     
     

    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”.

    a205fdf7-4074-49bc-80bd-6b89503953d5-image.png

     
    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:

     
    1a57a6e1-536d-4dba-8897-27e45d35f7da-image.png

     
     

    Step 9 - Test Run

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

    h8.gif

     
    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:
      Einstein.png
    T 1 Reply Last reply
    0
    • CreatiCodeI CreatiCode pinned this topic on
    • CreatiCodeI CreatiCode unpinned this topic on
    • CreatiCodeI CreatiCode pinned this topic on
    • G Offline
      G Offline
      Bennett Garritson
      wrote on last edited by
      #2
      This post is deleted!
      1 Reply Last reply
      0
      • CreatiCodeI 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.”

         
        h8.gif

         
         

        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

        df55704b-bc91-4b2d-9110-987bc537c6fa-image.png

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

        h9.gif

         
        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:

        d2ba0115-91e3-4c9e-bb93-3f1008be7a41-image.png

         
         

        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.

         
        97da84a9-1d44-45d6-a782-3fdd44b8d3b2-image.png

         

        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:

         
        hello.gif

         
        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.

         
        67b57551-5678-4741-8bc9-328e838efd77-image.png

         
        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:

        h3.gif

         
         

        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:

         
        95d087aa-9688-427c-a7f4-87edd6675b36-image.png

         
        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:
         
        0999cc64-af99-4fcb-b9d2-35682b7fb8d2-image.png

         
        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:

        h4.gif

         
         

        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
         
        03a3899d-32c3-457b-9f34-e7c91f8c70f5-image.png

         
        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:

        h5.gif

         
         

        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”.

        a205fdf7-4074-49bc-80bd-6b89503953d5-image.png

         
        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:

         
        1a57a6e1-536d-4dba-8897-27e45d35f7da-image.png

         
         

        Step 9 - Test Run

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

        h8.gif

         
        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:
          Einstein.png
        T Offline
        T Offline
        Salvatore Nicholson
        wrote on last edited by
        #3

        This is sooooooooooo cool!!

        1 Reply Last reply
        -1

        Hello! It looks like you're interested in this conversation, but you don't have an account yet.

        Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

        With your input, this post could be even better 💗

        Register Login
        Reply
        • Reply as topic
        Log in to reply
        • Oldest to Newest
        • Newest to Oldest
        • Most Votes


        • Login

        • Don't have an account? Register

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • CreatiCode