A Developer's Guide to Integrating ChatGPT and DALL-E APIs in Your Flutter App ๐
Open AI recently released ChatGPT and DALL-E which are AI-powered tools helping you to boost your productivity and do work efficiently without any hassle. They are natural language processing technology that enables the automation of chat conversations and generating images based on the prompts the user provides.
ChatGPT API helps developers to integrate ChatGPT features into their projects which can be either chat-based or voice assistant ie - using your commands as input and the API will generate a response based on that command.
DALL-E API is used for image generation based on user prompts
Pre-requisites before integration
Create an account on Open AI by going to their documentation page
Generate your API Key which will be used to make an API call to the ChatGPT API and DALL-E API by clicking on Create new secret key
- Make sure to store the API Key somewhere like the .env file as you will only be able to see it on the website only once.
Integrate APIs in your Flutter Project
Create a dart file which will contain all the functions regarding the API calls to
ChatGPT and DALL-E and name it for example openai_service.dart
We are gonna use the HTTP package for the API call but you can also use the dart_openai package for the API calls(dart_openai)
Now we are gonna use chat API(chat completions) which supports two open AI models: GPT-4 and GPT-3.5-turbo
Now as we are also using DALL-E API together we need some way to distinguish whether the user is asking to generate an image or not for that we will be using an async function named as isArtPrompt() and use Chat completions for it.
This function returns a yes or no based on which API call is made either to ChatGPT API or DALL-E API.
Future<String> isArtPrompt(String prompt) async { try { final res = await http.post( Uri.parse("https://api.openai.com/v1/chat/completions"), headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer $OpenAIApiKey' }, body: jsonEncode({ 'model': "gpt-3.5-turbo", 'messages': [ { "role": "user", "content": "Does this message want to generate an AI picture, image, art or anything similar? $prompt . Simply answer with a yes or no." //this content asks chatGPT and retrieves answer in yes or no } ], })); print(res.body); if (res.statusCode == 200) { String content = jsonDecode(res.body)['choices'][0]['message']["content"]; content = content.trim(); //trimming all space from output switch (content) { case 'yes': case 'Yes': case 'Yes.': case 'yes.': final res = await dallEAPI(prompt); // dalle api call if yes return res; default: final res = await chatGPTAPI(prompt); // ChatGPT api call if no return res; } } return "An internal error!!"; } catch (e) { return e.toString(); } }
Now the functions chatGPT API and DALL-E are as follows
final List<Map<String, String>> messages = []; // Chat Completetion API call Future<String> chatGPTAPI(String prompt) async { messages.add({'role': 'user', 'content': prompt}); try { final res = await http.post( Uri.parse("https://api.openai.com/v1/chat/completions"), headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer $OpenAIApiKey' }, body: jsonEncode({ 'model': "gpt-3.5-turbo", 'messages': messages, })); print(res.body); if (res.statusCode == 200) { String content = jsonDecode(res.body)['choices'][0]['message']["content"]; content = content.trim(); messages.add({'role': 'assistant', 'content': content}); return content; } return "An internal error!!"; } catch (e) { return e.toString(); } } // image generation API call Future<String> dallEAPI(String prompt) async { messages.add({'role': 'user', 'content': prompt}); try { final res = await http.post( Uri.parse("https://api.openai.com/v1/images/generations"), headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer $OpenAIApiKey' }, body: jsonEncode({ 'prompt': prompt, 'n': 1, // number of images to be generated })); print(res.body); if (res.statusCode == 200) { String imgUrl = jsonDecode(res.body)['data'][0]['url']; imgUrl = imgUrl.trim(); messages.add({'role': 'assistant', 'content': imgUrl}); return imgUrl; } return "An internal error!!"; } catch (e) { return e.toString(); } }
Thats it !! Now you can use the isArtPrompt() function and pass it your desired prompt, the function will call either of the APIs and give a response which you can use in your Flutter app to showcase the user.
You can check out my Voice assistant Flutter App using ChatGPT API and DALL-E API for text response and image generation based on user prompts(Voice Assistant App).
Make sure to follow me and subscribe to this blog for more tech blogs like this on daily basis, P.S. - your support is much appreciated!!!