The technology industry is all about AI and what it can do right now. Part of that is due to ChatGPT, a chat app that leverages OpenAI’s generative pre-trained model. This allows you to draft documentation, answer questions about topics, and even write code.
In this tutorial, we’ll start by building a simple trivia app called Wizz using ChatGPT. Instead of using a custom backend service, use the OpenAI API as your app’s business logic provider. Along the way, you’ll learn:
- The basics of what ChatGPT is.
- Understand the features of the GPT language model.
- Leverage language models using best practices.
- Integrate features like ChatGPT into your Flutter app.
- How to deal with unexpected responses from your model.
Dive into the exciting world of AI!
Start
Click to download the starter project. Material download Buttons at the top or bottom of this tutorial. Next, open your starter project in VS Code. You can also use Android Studio, but you will need to adapt the steps below to suit your needs.
You must use the latest version of Flutter 3.10.1 or higher. Please run the following command to get the latest dependencies for your project. flutter pub get From the terminal or directly from the VS Code prompt.
Looking at the code, you can see that the starter project already provides the UI for the trivia app. Here is an overview of the code structure:
- prompt.darts: This file contains three prompts that are sent to the model.
- data.darts: A layer that interacts with OpenAI’s API.
- domain.dart: Define various business logic models for Wizz, such as questions and hints.
- page: All screens are under this folder.
- widget: Contains some parts of the UI.
Build and run the project. A screen will appear asking for the player’s name, as shown below.
Note: If an error is displayed Error (Xcode): Sandbox is out of sync with Podfile.lock. Run “pod install” or update your CocoaPods installation. – Use the following terminal command to fix it cd ios && pod install && cd ..
Please enter your name in the input field and press Let’s with up To start a new game.
Trivia games are incomplete because the game screen is just a placeholder. Throughout the tutorial we will be adding to the core functionality of Wizz.
Understand ChatGPT features
One of the most famous AI-powered apps is ChatGPT. Simply put, ChatGPT is an AI system created and trained by OpenAI to understand and generate human language.
The last three letters of the name stand for Generative Pre-Trained Transformers. GPT refers to a broader family of language models based on specific architectures. These models are trained on large amounts of data to generate human-like content such as text, images, and even music.
GPT-based models are typically useful for building applications that allow you to:
- I will write the documents.
- I will answer the question.
- Analyze the text.
- Create an interactive chatbot.
- Translate different languages.
- Generate code.
- Resolve bugs within code blocks.
- There are many others.
ChatGPT is a specific implementation of the GPT model. OpenAI built it to conduct chat-based human conversations. When integrating ChatGPT into your app, it’s essential to understand the differences between ChatGPT and the underlying GPT model.
The main differences between ChatGPT and GPT are in their intended use and design considerations. OpenAI designed ChatGPT to interact with users. GPT models rely on prompts to generate responses. These prompts set the tone and provide context for the text being generated. In contrast, ChatGPT is optimized for interaction for back-and-forth conversations.
In general, you can think of ChatGPT as the app and GPT as the brains behind the app.
OpenAI has launched an API that allows developers to add GPT-based functionality to their apps and create new apps based on the functionality of their models. This helps retrain the model and improve the quality of the text output produced.
Now that you’ve learned these basic concepts about AI and language models, it’s time to add GPT-based features to Wizz, a trivia game that only wizards (pun intended) can win.
Obtaining the OpenAI API key
To add AI to your app, use OpenAI’s API. For this you need an account. You can create a new one or use your own.
Note: If you already have an account and want to use it for this tutorial, please note that your credits may have already expired. In that case, you’ll need to create a new account or add your billing information and upgrade to a paid account.
To create a new account, open a web browser and select Use the[Usethesign up button in the top right corner or use Login Already have an account?
To create an account, you will need the following information:
- password
- first name
- Last name
- date of birth
- Work phone number – required to verify information
Once you have created an account, please log in. You should see something similar to the following:
Then click on your profile again in the top right corner of the screen. You should see a pop-up menu similar to the one below.
Then select View API key.Then press Create a new private key. Select a name for the key (optional) and Create a private key. This will create a private key.
Be sure to copy the key to a safe location. You’ll never be able to see it again. You will need to add this key to your project later.
It is wonderful. Your account has been created and you can now access OpenAI’s API platform. This is one small step for your app, but one giant leap for your development skills.
Learn best practices for GPT models
Now that you’ve taken the first steps toward implementing AI in your app, let’s discuss best practices when working with GPT models via the API or the ChatGPT app.
GPT models do a great job of trying to understand user intent, but they don’t always work as expected because they can’t read the user’s mind (yet!).
This is where best practices regarding prompts come in handy. This will help you get better results from your language model.
Here are some strategies that may improve your results when using GPT models. Each sample also has an example that you can try out in OpenAI’s Playground.
Ask questions in the game and give hints to the players.
When asking questions, add some humor to your questions in the form of fun facts.
When you’re telling a fun fact, you need to make it interesting by adding puns.
These scenarios are good examples of how splitting a model into stages can make it easier to create a model. For example, when generating trivia questions, you may want your model to perform certain steps. Here’s a guide to use when asking your model new trivia questions:
To resolve this, follow these steps:
– Start by randomly selecting one topic from history, art, entertainment, sports, science, or geography.
– Then generate questions based on the selected topic.
To resolve this, follow these steps:
– First, analyze the question to determine the correct answer.
– Next, generate hints to make the answer easier. Be careful not to make your hints too obvious.
Don’t decide on a hint until you can answer the question yourself.
-
Use personas to give context: In some cases, the answer you get may not be what you were hoping for, in terms of domain or technical depth. In such cases, we recommend defining personas to get the answers you’re looking for. For example, here’s the persona I use to make sure the model knows the expected response style:
You’re the knowledgeable and entertaining host of a trivia game called Wiz.
-
Provide step-by-step guides to complete tasks: Some tasks can be so complex that the model is difficult to understand.
Your job is to generate new trivia questions for your players.
-
Provide example output: If you want the model to copy a certain style or follow a certain format when it responds. Next, it would be good to give an example. You can also specify an example response voice or tone, or a JSON template to follow. For example, when interacting with a model via the API, you typically need to end the prompt with an example of the JSON you expect the response to contain, like this:
The output is just unformatted JSON, follow the template below.
“action”: “player_hint”, “hint”: “” -
Give GPT time to find its own solution: In some cases, you can get better results if you tell the model to reason first before giving you the answer. This is a common scenario when validating answers from problem statements provided by other users. A good use case for Wizz is when asking for hints, to avoid obvious hints, first let the model understand the question before giving the hint.
Your task is to give hints to the players without giving answers.
You’re the knowledgeable and entertaining host of a trivia game called Wiz.
Your job is to generate new trivia questions for your players.
The output is just unformatted JSON, follow the template below.
“action”: “player_hint”, “hint”: “
Your task is to give hints to the players without giving answers.
These are some tactics you can use to improve your results, but you can use many more depending on your scenario. For more information, see the OpenAI best practices documentation. You can use OpenAI’s Playground to test your prompts and play around with your model. This is a great way to test prompts before integrating them into your app’s code.