OpenAI’s ChatGPT is artificial intelligence (AI) chatbot can be used to generate human-like responses based on text input. Pre-trained generative transformer (GPT) Large-Scale Language Model. OpenAI released his ChatGPT in December 2022, and in two months it surpassed 100 million monthly active users, making it the fastest growing consumer application in history. Many people use his ChatGPT for interactive education, mock interviews, language translation, automated customer service, etc.
ChatGPT is Application programming interface (API) Services. This means it can be integrated into Android applications. ChatGPT allows you to create Android applications to correct input grammar, for example.
In this tutorial you will learn how to build chatting bot, a chatbot Android application based on ChatGPT. You can choose from the application: Persona For chatbots such as travel guides.
In this process you will learn:
- Design chat messages.
- Create a typing animation.
- Integrate the ChatGPT OpenAI API service.
- Understand parameters for API calls.
Note: This article assumes that you have experience using Kotlin and Jetpack Compose on Android. To understand Kotlin, read this Getting Started with Kotlin for Android tutorial and the book Kotlin Apprentice. To learn about Android development, see the book Android Apprentice. Finally, to understand Jetpack Compose, you can start with his Jetpack Compose tutorial.
Now it’s time to talk!
Start
Click to download the starter project. Material download Buttons at the top or bottom of the tutorial.Open Android Studio Electric Eel Or import and open the starter project later.
Browse the project’s files to understand the codebase. There are two main folders below. com.kodeco.android.chattybot folder: Ui folder and model folder.
There are 6 files below Ui folder.of settings.kt The file is a configuration screen and is a form for entering the OpenAI API key.of tabscreen.kt The file is a container for the chat screen, personascreen.kt File allows users to choose a ChatGPT persona, such as a travel guide. Create the user interface (UI) for the chat message box. AI message.kt, usermessage.kt and ChattingScreen.kt File.
of model A directory contains multiple files. The first file is persona.ktsave the persona text. personascreen.kt. constant.kt Save project constants. ChatModel.kt Contains a data model for exchanging messages with the OpenAI API server. Retrofit library. OpenAIService.kt An interface for calling the OpenAI API server, chatretriever.kt receive messages from ChattingScreen.kt and connect to the server using Retrofit library.
Open starter project
Build and run the starter project. The following screen will appear.
The app displays three tabs. chat, Persona and setting.of chat Tabs are selected by default. This tab screen has a text field with buttons at the bottom, similar to a chat window. This tab displays a message box from the user and a reply box from the API service.
click Persona tab. You will be presented with four persona choices. A persona is a way to characterize a chatbot’s responses. A travel guide presents responses differently than, say, a motivational coach. When you click on one of them, the border of the box turns cyan to indicate that this is the chatbot’s persona.
Can you see the “Tokyo travel guide” persona? This sounds like an adventure waiting to happen! :-]
The last tab is setting tab, where you can enter your OpenAI key.
Creating a chat message list
Add some messages to the chat screen to simulate a chatbot. Here we will create his UI similar to popular chat applications such as WhatsApp, Telegram and Facebook Messenger. A chat window UI typically consists of a list of messages, a text field to enter the message, and a button to send the message. A text field and button have already been created. The container for the list of chat messages is ChattingScreen.kt File.look for the line // TODO: Create dialog boxesis in the sky Box.
For each user message, box It does not take up the entire horizontal space, but is placed to the right of the container.Then add sentence among box.of sentence Displays the message that the user types in ChatGPT. To indicate that this message is from you, add an icon to the right of the message.
Add the following code below the line // TODO: Create dialog boxes:
val content = "Hello, AI!"
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End,
verticalAlignment = Alignment.Bottom
)
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(0.8f)
.heightIn(120.dp)
.background(Color.LightGray, RoundedCornerShape(16.dp))
)
Text(
text = content,
modifier = Modifier
.align(Alignment.Center)
.padding(8.dp)
)
Icon(
imageVector = Icons.Default.Person,
contentDescription = "User Icon"
)
After building and running the project, you will see the following screen.
It looks nice too! Chat message boxes are now correctly right-aligned.of Row Occupies the entire width, Box It only occupies 80% of the width, as shown in . .fillMaxWidth(0.8f) qualifier. The only problem is that the chat message box is at the top of the input screen instead of at the bottom. TextField. If you’ve ever used a chat application, you’re probably familiar with message boxes popping up from the bottom, but more on that later.
View chat responses
At this point you need to refactor your code. remove the code, usermessage.kt File. Open. usermessage.kt Open the file and add the following code below that line // TODO: Create the user dialog box:
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End,
verticalAlignment = Alignment.Bottom
)
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(0.8f)
.heightIn(120.dp)
.background(Color.LightGray, RoundedCornerShape(16.dp))
)
Text(
text = content,
modifier = Modifier
.align(Alignment.Center)
.padding(8.dp)
)
Icon(
imageVector = Icons.Default.Person,
contentDescription = "User Icon"
)
next, ChattingScreen.kt below the file line // TODO: Create dialog boxesAdd the following code to .
UserMessage("Hello, AI!")
Build and run the project again and you will see the same screen. Now let’s say you want to add a chat message from ChatGPT. This chat message box must be aligned to the left of the chat container. Make sure the boxes are different colors so users can more easily distinguish between messages.don’t forget to add Icon It’s on the left side of the message.
Open. AI message.kt Open the file and add the following code below that line // TODO: Create the AI dialog box:
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.Bottom
)
Icon(
imageVector = Icons.Default.Face,
contentDescription = "AI Icon"
)
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(0.8f)
.heightIn(120.dp)
.background(Color.DarkGray, RoundedCornerShape(16.dp))
)
Text(
text = content,
modifier = Modifier
.align(Alignment.Center)
.padding(8.dp),
color = Color.White
)
