OpenAI’s ChatGPT is an synthetic intelligence (AI) chatbot that may generate human-like responses based mostly on textual content enter utilizing the Generative Pre-trained Transformer (GPT) giant language mannequin. OpenAI launched ChatGPT in December 2022, and in two months, it garnered over 100 million month-to-month lively customers, making it the fastest-growing shopper software in historical past. Many individuals use ChatGPT for interactive schooling, mock interviews, language translation, automated customer support and extra.
ChatGPT is obtainable as an software programming interface (API) service, which suggests you may combine it into your Android software. With ChatGPT, you may create an Android software to appropriate your typing grammar, as an illustration.
On this tutorial, you’ll discover ways to construct Chatty Bot, a ChatGPT-based chatbot Android software. Within the software, you may select a persona in your chatbot, akin to a journey information.
In the course of the course of, you’ll be taught to:
- Design chat messages.
- Create typing animation.
- Combine the ChatGPT OpenAI API service.
- Perceive the parameters of the API name.
Notice: This text assumes you may have earlier expertise with Kotlin and Jetpack Compose in Android. To understand Kotlin, soar into this Introduction to Kotlin for Android tutorial and the e-book Kotlin Apprentice. For studying Android growth, try the e-book Android Apprentice. Lastly, to know Jetpack Compose, you can begin with Jetpack Compose by Tutorials.
And with that, it’s time to speak it up!
Getting Began
Obtain the starter undertaking by clicking the Obtain Supplies button on the prime or backside of the tutorial. Open Android Studio Electrical Eel or import and open the starter undertaking later.
Browse the undertaking’s recordsdata to familiarize your self with the codebase. There are two primary folders beneath the com.kodeco.android.chattybot folder: the ui folder and the mannequin folder.
Six recordsdata are beneath the ui folder. The Settings.kt file is the Settings display screen, a type for getting into the OpenAI API key. The TabScreen.kt file is a container for the chatting display screen, and the PersonaScreen.kt file permits customers to decide on the ChatGPT persona, akin to a journey information. You’ll create the consumer interface (UI) for the chat message containers within the AIMessage.kt, UserMessage.kt and ChattingScreen.kt recordsdata.
The mannequin listing comprises a number of recordsdata. The primary file, Persona.kt, shops the persona textual content for PersonaScreen.kt. Constants.kt shops undertaking constants. ChatModel.kt comprises the information fashions for exchanging messages between the OpenAI API server with the Retrofit library. OpenAIService.kt is the interface for calling the OpenAI API server, and ChatRetriever.kt receives messages for ChattingScreen.kt and connects to the server utilizing the Retrofit library.
Opening the Starter Mission
Construct and run the starter undertaking. You’ll see the next display screen:
The app shows three tabs: Chat, Persona and Settings. The Chat tab is chosen by default. This tab display screen has a textual content discipline with a button on the backside , like a chat window. On this tab, you’ll show message containers from the consumer and reply containers from the API service.
Click on the Persona tab. You’ll see 4 persona selections. Personas are methods of characterizing the chatbot’s responses: A journey information presents the responses otherwise than, say, a motivational coach. Should you click on considered one of them, the field border turns cyan to point that that is your chatbot persona:
Do you see the “Journey Information in Tokyo” persona? This appears like an journey ready to occur! :-]
The final tab is the Settings tab, the place you may enter your OpenAI key:
Making a Chat Messages Listing
Add some messages to the chat display screen to simulate a chatbot. Right here, you’ll create a UI resembling common chat purposes like WhatsApp, Telegram or Fb Messenger. A chatting window UI sometimes consists of an inventory of messages, a textual content discipline for typing messages and a button to ship messages. The textual content discipline and button have already been created. You’ll discover the container for the checklist of chat messages within the ChattingScreen.kt file. Search for the road // TODO: Create dialog containers, which is inside an empty Field.
For every consumer message, create a Field that doesn’t take up the whole horizontal area and is aligned to the precise facet of the container. Then, add a Textual content contained in the Field. The Textual content will show the message the consumer sorts to ChatGPT. To point that this message comes from a consumer, add an icon on the precise facet of the message.
Add the next code under the road // TODO: Create dialog containers:
val content material = "Hi there, AI!"
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Association.Finish,
verticalAlignment = Alignment.Backside
) {
Field(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(0.8f)
.heightIn(120.dp)
.background(Colour.LightGray, RoundedCornerShape(16.dp))
) {
Textual content(
textual content = content material,
modifier = Modifier
.align(Alignment.Middle)
.padding(8.dp)
)
}
Icon(
imageVector = Icons.Default.Individual,
contentDescription = "Consumer Icon"
)
}
Construct and run the undertaking, and it is best to see the next display screen:
It appears to be like good! The chat message field is accurately proper aligned. The Row takes up the total width, and the Field takes up solely 80 % of the width, as indicated by the .fillMaxWidth(0.8f) modifier. The one challenge is that the chat message field is on the prime, slightly than the underside, near the typing TextField. Should you’ve used a chat software, you’re conversant in message containers popping up from the underside, however you’ll cowl that later.
Displaying the Chat Response
For now, you’ll wish to refactor the code. Delete the code, and transfer it to the UserMessage.kt file. Open the UserMessage.kt file and add the next code under the road // TODO: Create the consumer dialog field:
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Association.Finish,
verticalAlignment = Alignment.Backside
) {
Field(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(0.8f)
.heightIn(120.dp)
.background(Colour.LightGray, RoundedCornerShape(16.dp))
) {
Textual content(
textual content = content material,
modifier = Modifier
.align(Alignment.Middle)
.padding(8.dp)
)
}
Icon(
imageVector = Icons.Default.Individual,
contentDescription = "Consumer Icon"
)
}
Then, within the ChattingScreen.kt file, under the road // TODO: Create dialog containers, add the next code:
UserMessage("Hi there, AI!")
Should you construct and run the undertaking once more, you see the identical display screen. Now, you wish to add a chat message from ChatGPT. This chat message field must be aligned to the left of the chatting container. Make sure the field shade is completely different so customers can differentiate the messages extra simply. Don’t neglect so as to add an Icon on the left of the message.
Open the AIMessage.kt file and add the next code under the road // TODO: Create the AI dialog field:
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Association.Begin,
verticalAlignment = Alignment.Backside
) {
Icon(
imageVector = Icons.Default.Face,
contentDescription = "AI Icon"
)
Field(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(0.8f)
.heightIn(120.dp)
.background(Colour.DarkGray, RoundedCornerShape(16.dp))
) {
Textual content(
textual content = content material,
modifier = Modifier
.align(Alignment.Middle)
.padding(8.dp),
shade = Colour.White
)
}
}
