Build Recipe Creator App using Flutter and OpenAI | Recipe App built using AI | Flutter App Design

foreign [Music] and today's session we will look into how to build a recipe creator app with the help of flutter and open a and what we have here is a simple example of the same we have a basic set of UA layouts containing the input field or the text form field technically and an elevator button called the create recipe right at the bottom and how this app work is basically you need to list out all the ingredients what you have for the recipe say for example if you have oil if you have rice or Masala you just need to list out all the ingredients and you can also make use of this add icon to keep on adding ingredients to the list once you have listed on all the ingredients what you have currently you can make use of this create recipe button and upon clicking this it will create a recipe out of the list of ingredients what you have given as the input to the a model so the pre-trained a model is capable enough to create a recipe instantly based upon the ingredients what we have listed down let me also show you a live example of how it works so say for example let me list down basic ingredients as an example let me make use of rice masala chicken oil and Bottles all right so I have listed on a basic set of ingredients what I have and let me click this great recipe button and let's see how this a model is able to create a recipe out of it and as you can see here based upon the ingredients what I have listed down it is providing us that we will be able to create the Masala chicken fried rice out of these ingredients and it is also listed down the instructions to create the same so totally that's provided us with nine steps of instructions for creating this Masala chicken fried rice all right when we try it out with another simple example let me list down bread butter milk and jam let's see how this a model is able to create a recipe from this list yeah so this a model is suggesting us to create a toast with jam and it has also provided the ingredients what which is needed for creating this recipe and also the instructions for preparing the same right so this is basically how this app is going to work right you can also make use of this close icon buttons to remove any items in the list you don't want to add so this is basically how this recipe creator app is going to work hope you got a broader idea of what we are about to discuss in this video with this idea and without any further delay let's directly dive into the video and get started basically before getting into the video if you are new to this channel I recommend you to go check our previous video of how to integrate flat wrap and chat GPT because in this previous video we have discussed about how to make use of open a APS in after a trap and in this video also we will be trying to use the same kind of technique to get the job done and that's the reason I suggest you to go check the previous video only then you will get a continuous idea of how to make yourself open a apis in a federal and in this video to keep it simple we have a basic set of UI layers and we make the same HTTP API call request to get the job done all right starting with the main data Fair what we have here is a generated routes we have made research generated routes for navigation and here inside the generated route the initial route points to the home page as you can see the installer badly points the home page and here the home page is nothing but a stateful widget class so basically we have empty scaffold now let's start building up the uis first let's try to create few basic variables including the text form field the focus node and the input tag list so this contains the list of all ingredients what we enter in the text form field and finally the response which is the data with the a model has provided us as a response and since you're making use of text editing controller let's try to install them they need State and also we will try to dispose them in the disposed state starting with the scaffold inside the safe area let's make use of the column widget wherein first child is going to be a Simple Text widget followed by a few spacing we try to build up the text form field as well as the add icon button so here in the text form field with the basic set of decoration here and see the on field submitted callback we will try to add the ingredients in the list following the text form field let's try to build up the icon button and we try to do the same here inside the on press event try to add the item in the list and also we will try to turn the focus back to the text form field itself followed by the text form field let's try to render the ingredients for the user as type for that lesson make use of the wrap widget and inside which we have the chip widget which is available in fitter SDK so with the help of which we will be able to listen to all the ingredients which the user types over here in the text form field say for example if I type water it will just get listed down here in the form of Chip widget and in order to add the delete button please make use of the on delete and whenever you click this delete button we will try to remove them from the list and followed by which we try to make use of the Single Cell scroll view to render the response data was the a modulus provided as a result of the API call for that we make use of the expanded widget and try to wrap them into the single charge scroll View and finally at the bottom we try to have an primary button which is nothing but the elevator button technically and inside the button function you try to call the ask a method by passing the input text which is nothing but the list of all ingredients what the user has listed down so this is basically the entire set of UA what we have now let's try to Define this ask a model wherein we try to make a API call directly to the open AAP and this ask a method is written down separately inside this home page repo file and inside this ask a method let's make use of the post method and call the same API which is nothing but the completion API which we already discussed in the previous video as well we just need to alter The Prompt in such a way to get the desired set of output followed by the API URL we need to pass the headers and finally inside the body we make use of the diamond C3 model just the same what we already discussed in previous video and the prompt is nothing but the list of all ingredients which the user has typed over here in the input field and in order to create a recipe out of this ingredients you just need to add this text in your prompt before the ingredients so with this prompt the a model will understand that it needs to create a recipe out of this listed ingredients followed by the prompt you can configure the a model with by the max token temperature so on and so forth and finally we need to return the response as a result of the API call so this is all about making APA call and we try to call this ask a method upon the on-prec event of this create sap button so with this we can be setting up the UI and the logic let's restart the app and see how it works let me give egg oil and water just keep it simple if I click this create recipe button it is able to create a recipe out of this three ingredients alone it just suggests me to create a fried egg out of these ingredients so this is basically how can build a recipe creator app out of flutter and open a apis so you just need to alter The Prompt in such a way to get the decade kind of output from the open a APA all right hope you find this video insightful if you do so consider subscribing and I'll see you again in the next one oh [Music]

Channel: vijaycreations

Views: 13

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: CyhTZQt8vVQ

Length: 7min 39sec (459 seconds)

Published: Sun Jun 25 2023