ChatGPT and Flutter

📅 2023.03.20 - đŸ‘€ BorbĂ©ly Viktor

ChatGPT logo

In this article, I will deal with the popular AI technology of recent months, OpenAI ChatGPT. Specifically, how it can be connected to a mobile application. What can we use it for?

What is ChatGPT?

ChatGPT is a chatbot launched by OpenAI in November 2022. It builds on OpenAI’s GPT-3.5 large language model (LLM) family and has been fine-tuned with both federated and reinforced learning techniques.

Last week, the ChatGPT-4 version was released, which took its knowledge to astronomical heights.

ChatGPT and Flutter

It occurred to me to marry ChatGPT intelligence with Flutter framework flexibility and create apps that could be useful for users.

Just think of the turbocharged Duolingo Max, which brings amazing new solutions.

If not in this depth, I also started experimenting with a simple solution. I was curious what it takes? I designed a Flutter mobile app where the chat text can be reviewed before sending to see how offensive / rude it is. This often helps in situations where the two parties have emotionally overheated communication.

Setting up ChatGPT

This is the simplest part. All we have to do is register on https://chat.openai.com/auth/login with a Google or Microsoft account.

Then navigate to https://platform.openai.com/account/api-keys and create an API key by clicking the Create new secret key button. Note down the code seen here somewhere, because we only see it once. We will use this later. If we didn’t write it down, we can create a new one anytime.

Need a good product that uses ChatGPT

My idea was to create my own API (endpoint) that uses the text-davinci-003 from the ChatGPT Instruction models. You can read about different model types here. I chose from the so-called Completion because it can be given instructions.

The goal was to receive a short, maximum 300-character text (prompt), and


”Determine how aggressive it is for the other party! Rate this between 0.0 and 1.0, where 0.0 is not aggressive and 1.0 is very aggressive.”

The above model descriptions show example codes that we can use in, for example, a Python script (or Curl call). I also started this way. In about 5 minutes, I tested that with those settings it could already determine the aggressiveness level of the received text quite well.

The MVP was there, I just had to put it together!

Flutter and Firebase love each other

Since I had previously used Google Firebase service, I quickly created an endpoint in it.

For this, I used Firebase Cloud Functions. I created a new project in Firebase, enabled Cloud Function, and could already write my endpoint in TypeScript (TS).


 export const toneAnalysis = functions.runWith({ secrets: , timeoutSeconds: 30, }).https.onRequest(async (request, response) => { 
 const configuration = new Configuration({ organization: organization.value(), apiKey: openAiApiKey.value(), }); const openai = new OpenAIApi(configuration); 
 const openAPIResponse = await openai.createCompletion({ model: ‘text-davinci-003’, prompt: myPrompt, max_tokens: 5, temperature: 0.5, n: 1, top_p: 1.0, stop: “None”, frequency_penalty: 0.5, presence_penalty: 0.0 }); 
 
 const output = openAPIResponse.data; 


Here I needed the own openAiApiKey, organization keys marked in bold in the above code, which we copied from the ChatGPT interface.

ChatGPT test

For simplicity, I now test in a command-line version with a cUrl call. The essence is in the data section:

Request

curl --location 'https://us-central1-my-apis-567693.cloudfunctions.net/toneAnalysis' \
--header 'Authorization: Bearer o62fvWkiAYkDkGUCzJJe' \

--header 'Content-Type: application/json' \

--data '{
    "query": "Szeretlek DrĂĄgĂĄm! Nagyon boldoggĂĄ tettĂ©l a mĂșlt hĂ©ten talĂĄlkozĂĄsunk alkalmĂĄval. Nagyon vĂĄrom az Ășjabb talĂĄlkozĂĄst! :)" 
}'

Endpoint response

{
	"version": "1.0",
	"input": "Szeretlek DrĂĄgĂĄm! Nagyon boldoggĂĄ tettĂ©l a mĂșlt hĂ©ten talĂĄlkozĂĄsunk alkalmĂĄval. Nagyon vĂĄrom az Ășjabb talĂĄlkozĂĄst! :)",
	"aggressive": 0
}

In the response, the aggressive value is now 0. Try it to see what it gives for what!

The Flutter package

Then things moved on, the next step came up that it could be useful in a mobile app. For example, I create a component that is connected to an input field. It can be downloaded on Pub.dev under the name tone_detector.

When I press the Send button, before that it calls the previous endpoint and I get an evaluation. This can be text or a bar meter look. From here, only imagination sets the limit. But it can also suggest a milder version of what you want to say.

Tone detector widget The Tone Detector meter scale

It was particularly good that I overcame language difficulties imperceptibly. I could write in Hungarian or English, and it evaluated just as well!

Summary

Playing with ChatGPT for a few days, it can already be said that it is on a very good path to transform our everyday lives. Surely many are afraid of AI, but at least as many have been waiting for it.

If you liked my writing, read the others too. ChatGPT is still a very new area, but it’s worth dealing with it. I showed through a very simple example what it is capable of. However, the possibilities are unlimited, you just need to know how to ask well. This is where the great opportunity lies. AI will not think instead of us for a very long time, but together with us.

Contact me with confidence if you would like to implement your idea / product. I can help with it.