Build ChatGPT mobile app using Flutter and OpenAI | Easily Integrate chatGPT with Flutter and OpenAI

foreign [Music] video and today's session we will look into how to integrate charge GPT in a flutter app if you find this video exciting hit the Subscribe button only then you can follow me along with my flutter Journey so in order to access any of the open AI services like the chat a models or speech to text or image processing so on and so forth the open AI has provided the developers with the AP access therefore with the help of this APA endpoints we'll be able to make the HTTP calls with a relevant request and the pre-trained model is capable of responding us back with the relevant data in the form of jsons so in this video we'll look into one such API called the completion API which will help us build this chat a model locally in our shutter app hope you got a broad idea of what and how to integrate chat jpd and Alpha trap therefore with this idea let's directly dive into the video and get started first things first let's head over to openai.com and you need to create or sign up to open AI only then you will be provided with the secret key which will be used for making API calls after doing so here under the developers let's head over to the dock and if you scroll down you will see a bunch of open AI services including the generate s which is the basic chat a model followed by speech to text image generation etc for this video Let's click this GPT and as you scroll down here you will notice that the open AI has provided us with two different endpoints in order to access the latest model which is the gpt4 or gpt3 which is the new year model as of 2023 you need to make use of this AP endpoint or else if you are okay with the word Model S of 2020 to 2022 including the diamond C3 or Diamond C2 extra you can make use of the second AP endpoint for this video we will make use of the second AP endpoint which uses the Daven C3 model now let's head over to the APA references here and if you scroll down under making request section you will notice a basic syntax of how to make the API calls okay this is going to be the API which is the completion AP in order to integrate age at modules and you need to pass in the content type as well as the authorization which contains the secret key so this is something which you need to pass in the headers and the request parameter might differ for each of these AP endpoints if you are using only completions API we can make use of models and prompt basically it is the query which we ask to the a model so this is basically the Syntax for making APA request and if you scroll all the way down you will see that this is going to be the API which we are about to use in this video which is the completions API and it is going to be the post request here the first parameter is going to the model where they have used the Avant C3 model so the prompt is nothing but as said earlier it is going to be the query trying to send and few of the parameters which we can play around enough to get fine tune response back from the AI so here we have a entire set of request parameters which we can send including the prompt Max tokens temperature top probability match Etc okay you can just play around with these values in order to get a more precise and relevant data and on the left side you will also see that they have provided with a few description of each and every parameter so you can literally see what this prompt actually stands for and what is um the max token indicates Etc and as you scroll down here they have provided with the sample response data what we might get while making the API call here we have the basic ID object model and Choi is going to be a list so this text parameter inside the choices is basically the response which we get back from the AI model so the prompt what we have sent the a has deployed us with this data so we need to Loop over this prompt and text here in the UI in order to create the a chat model so this is basically how things are going to work hope you got a better idea now let's turn our Focus to the coding part and start implementing this in our Federal app now let's first head over to the perspect and here in the perspect we have added two dependencies one is the flutter dot EnV which is used for creating the dot EnV file and here is where we need to provide the open a secret key which we get as a result of creating an account in open AI okay so make sure you generate your secret key and place it over here in the dot EnV file and the next package is going to be the HTTP which is basically used for making APA calls and here in the perspect in order to access any data which is placed in the dot EnV file we need to add them here in the assets so make sure you do so now let's head over to the main.file here in the mainta dot well we need to make use of the dot env.load method inside the main method in order to access the data from the dot EnV files here the my app the home binds to home page here the home page is nothing but a stateful widget class now let's try to build up the UI first here inside the class let's define the variables the first is going to be the text editing controller following which we create a local variable called the response text which is instantly initialized with the empty text so this response text will be updated with the data which we get from the A model following which we create a model instance which is named as response model so which is basically used for serializing the Json values which we get as a result of the response following which we create a initi state in order to initialize the text writing controller and we also make use of the disposed state to dispose the controller otherwise there might be Memory leaks here starting with the scaffold let's provide the background color let's build a basic app bar here in the body we will make use of two widgets alone one is the prompt Builder which is basically going to display the data which the air has provided us with the response and the second widget is going to be the text form field Builder okay let's start by building up the text form field Builder widget so this text form feel better is nothing but a stateless widget class with the basic set of alignments you make use of the text form field widget available in Fetter so we provide with basic stylings here so which is actually not in case to expand here in this tutorial so you can design your text form field as of your choice forever the text form field we create an icon button okay now let's try building up the prompt Builder The Prompt Builder is once again is going to be a stateless Vijay class since these are going to hold only the basic UI components with the basic alignment we try to build the text which is nothing but a simple text widget wherein we have specified that inside the container with the defined height and here in the text form field Builder whenever the icon button is being pressed we call this completion function this completion function is as follows and here inside this completion function is where we make use of the HTTP API call first whenever the button is pressed we try to replace the response text with the loading message and we make use of the post method when we pass the API URL which is nothing but the completions API following which we need to provide the headers and here inside the authorization you need to provide the token which is nothing but the secret key which we have generated as a result of signing up with open a so make sure you add the secret key inside the dot EnV file and with the help of this syntax you will be able to access that value present in the dot EnV file finally after providing the API URL and headers the last thing is going to be the body parameter so we make use of the Json encode method herein we pass a list of body parameters including the model here the model we have defined as the diamond C3 model followed by the model we provide the prompt so the prompt is nothing but the query data which we get from the text editing controller so whatever the user types here in the text form field is added as a prompt over to the body followed by which we will provide few other parameters like the max token temperature and probability now after making the API call we need to update the state only then swap the data what a model has provided us with therefore we make the set State inside which we serialize the Json data which we get as a result of the response the data which we need is actually present inside the choices list as we have already discussed earlier and this text is going to hold the response data for the prompt what we have entered so with this we complete integrating the ah chat model locally enough return now let's press this app and try running it so now shutter app is running the way it is expected so our a model is now able to respond us back with the relevant data so this is basically how we can integrate chat GPT in your flat wrap locally and let me know what questions or queries you would ask to this chat GPT mention them in the comments below hope you guys found this tutorial useful if you do so consider subscribing and I will see you again in the next video [Music] thank you

Channel: vijaycreations

Views: 6,596

Keywords: flutter, flutter and chatgpt integration, chatGPT, chatGPT integration in flutter, chat GPT mobile app, chatGPT mobile app, build chatGPT, chatGPT app, chatGPT app in flutter, flutter app development, machine learning with flutter, flutter AI, chatGPT tutorials, chatGPT integration, chatGPT mobile app development, chatGPT app development, chatGPT api, chatGPT in flutter, flutter and ChatGPT, flutter and chatGPT, how to add chatGPT in flutter, how to create chatGPTs in Flutter?

Id: KppkPbmwsLI

Length: 9min 4sec (544 seconds)

Published: Fri Jun 16 2023