ChatGPT AI - A Story Writer (Difficulty: 3)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, you will create a story-writter project using the GPT-3 model from OpenAI.

It will allow the user to specify any topic, then generate a story based on that topic.

Step 1 - Create A New Project

Please create a new project in the CreatiCode playground. Remove “Sprite1” with the dog, as we will just need to use the “Empty1” sprite.

Please also add the “Widget” extension.

Step 2 - Add a Label, a Textbox and a Button

Next, please add 3 widgets:

A label that says “Write a story about:”
A textbox
A button that says “Go!”

Don’t worry about their positions or sizes at this point. We’ll set them up next.

Here is how to add the 3 widgets quickly:

Step 3 - Place the 3 Widgets into a Row

Next, we’ll apply a “layout row” to quickly arrange the 3 widgets on top of the stage.

The basic idea is to treat the top 15% of the stage as a “row”, then divide this row horizontally into 3 “cells”. These 3 cells will occupy 35%, 50% and 15% of the width of the row.

Here is the new block you need to add:

The new row is given the name of “r1”. It creates 3 cells of width 35%/50%/15%, then place the 3 widgets named “label1”, “textbox1” and “button1” in those 3 cells.

The margin of 2 units will leave a thin gap between the row and the stage edges. The padding of 5 units leaves some space between the 3 widgets.

Step 4 - Add Another Textbox

Now we need to add another textbox to display the story written by the GPT-3 model. Please name the new textbox “textbox2”, and makes sure it supports “multiple” lines. Again, you don’t need to worry about its position or size, since we will use another “layout row” to set its position and size next.

Here is this new block:

Step 5 - Place the Second Textbox In a New Row

Now we can define a new layout row, with only one cell in it. Then we simply make the new textbox fill in the entire cell:

Here is the new block for adding a row named “r2”, and allocating 100% of its width to “textbox2”.

[Notes: OpenAI has suggested users to use ChatGPT API instead of GPT-3 for better results, so this last step is updated to use the ChatGPT block.]

Step 6 - Generate the Story Using ChatGPT

When the user clicks the “Go!” button, we will use ChatGPT to generate a story.

To compose our request, we need to join 2 phases together: a fixed phrase “write a story in 100 words about”, and the topics from the user’s input. We can store this request in a variable like this:

To send this request to ChatGPT, we can use the following block. It will store the response from ChatGPT in another variable named “story”. This block will be in the “waiting” mode, which means it will remain active until we get the full response from ChatGPT. The length of 200 is the maximum number of “tokens” we ask for, which is about 150 words. That’s is more than enough, since we are asking for a 100-word story. The “temperature” is 0.8, and the closer it is to 1, the more creative the story.

To show the story written by GPT-3, we need to set the reported result as the value of “textbox2”:

Lastly, we should trigger the above whenever the user clicks the “Go!” button. So here is the complete solution:

Now whenever we click the “Go!” button, we would get a new story:

Creative Ideas

This tutorial has shown you how to use widgets to build a simple application, and also how to use ChatGPT model to generate new content. Here are some ideas for you to further explore:

Other Types of Content: Instead of stories, you can also use ChatGPT to write other types of content, such as jokes, poems or songs.
Beautify the Widgets: You can set the text and background styles of the widgets to make them more appealing, such as: