Build an AI Image Generator using FlutterFlow

hey guys today I'm going to show you how to build an app which allows a user to input a prompt and through gen AI it will generate a set of image based on the prompt so let's give a image prompt of a Sheba and Ki hanging out by the beach and the number of image you want to generate is four and we'll click generate image so here we have outputed four very cute photo that is leveraging AI to generate these images for us so let's get started so the first we need to do is quickly refer to the open AI documentation so you can find the open AI documentation by simply Googling open AI documentation and then in Click the first link and then we'll scroll down to image generation we can see here this this is the image generation endpoint that we'll be using so we can easily quickly copy this in next we'll go back to flutter flow and we'll configure the API connection so go to API CES and then we'll add create API Calles and let's just call this uh gen AI image this is going to be a post request and the API URL is what we just uh copied here we need to pass in two headers so the content type in addition to authorization which is your which contains your API key so we'll simply copy this content type add header and we'll add again the authorization Bearer and open API key in order to get your open API key you need to firstly create an account um on open AI creating an account is free of charge um and on a monthly basis you get a limited number of API calls with no cost however once you exceed the number of API CES they'll start charging you um so in order to create the API key you need to enter your billing information which I've already did and then you go to um users and then API keys here you need to generate a new API key they just let's just call this um image gen Ai and then remember this key is only generated once so just copy it save it somewhere save if you plan to use it again so let's just quickly generate this key and we'll copy it next go back to flutter flow and insert of this dollar sign open API key we just paste it here next we'll go to the body so here the body we need to specify the prompts the number of image we want to generate and the size so what we are sending to open AI is going to be a format of Json and this is what we'll send however in order for a user to input what they want to generate we need to update this uh this is the prompt that open AI will receive from the user to generate whatever image the user wants to generate in addition let just also allow the user to select the number of images they want to generate based off a dropdown in order to do this we need to create a new variable so we need two variables let's call it one is prompt and it's going to be a string with no default value and a another variable is called number it's going to be type um integer so now we can drag The Prompt into here and then number into here what we've created is we will make a post request to this API image generation core with the following Json body which contains the prompt in addition to the number of images we plan to generate so we can actually quickly test this um let's add a call add this first let's go to response and test let's call a prompt um a line eating a cake and the number we want to generate is let's say two two images we want to generate Let's test the API core voila two responses that have been generated here you can see the URL is this this is what open AI has fed back so here you go this is the image align eating cupcake easy so now we need to capture this response so let's just select the these two um URLs so what flood oflow is really good at is it has recommended Json path that represents these two URL responses so let's just press selected here so let's just call this URL images response um and we're just hit save now that we have configured the API call let's go back to our widget tree so here we want to have a page where the user is able to enter a prompt and the number of images they want to generate so first let's have a container which will store the inputs we require so of with infinity and height whatever the size will be based on the children we're going to have a text input so text input field let's call it label of B creative and write out what you want to draw and then another prompt would be a dropdown so this drop down will contain well firstly would a wrap it in a column and then we want to have drop down of how many images we want to generate let's say there's only four options one 2 3 4 number of image you want to generate let's quickly align this to the left I won't do too much formatting here because I don't want to spend too much time making it look pretty now that's done we want to Output what is generated in this area after we make the API call oh yes we also forgot a button to make the API Coe itself let's call it generate image so here when the user clicks generate image it will load and then once a responses back it will output the image in the below area in order to display the image responses let's create another container the container will be of width infinity and a height of whatever and then we want to show a grid view of images so here if there's only one image it will show one and then if there's four it for show it will show four Images so in this grid view we need to add image um let's just create an image with some padding involved 10 so let's quickly configure the API call when generate image is pressed so we can go to actions add action and search for API core and then API core is called gen image and let's call this um API result as a variable output here we will add the variables that we need so two variables are prompt and number so the prompt is going to come from our widget States text field and the number is going to come from our widget State drop down but the problem with the drop down is that it's a text field so we have to convert this to a a number so what we can quickly do is just create a custom function let's call it string to int and the input is going to be a string and and the output is going to be integer so let's call this number string and we can use cop part to to help us write the code um let's just simply write convert convert num string to integer and here copala has helped us write a code to convert this number string to actual integer so let's just save the function so here for number we will use this custom function and the input is going to be widget state drop down and we'll confirm cool now we actually don't need this conditional action here so let's just quickly delete this and then go back here now let's go back to the grid view so here we need to generate the dynamic children from the response of the API call so let's just call this images as a variable name value to be action output API result which is what we've called it and they just call Json body Json path and the Json path we've already customized previously it's going to be image responses press confirm confirm again so here you see how if it has generated you know a few Shades lighter shade which is basically going to be the dynamic images from the API core now let's select this image and here the image URL is going to be the image items and then no further response Let's test this to see if it works so let's write a prompt so an order eating an orange by sun sun umbrellas then number of image you want to generate let's just say three let's click generate image so it keeps loading and loading because it's making that API core and here we can see the images are popping up so the first one second one and the third one so we can see the result of the API call um the user can you know rewrite the prompt and generate an image again and so forth we noticed the image generated a bit slow one way to amend this is to configure the image size in your API core to to be smaller so in the body we've requested 1024 by 1024 open AI can actually generate a small image of 256 so which means uh a smaller image we can generate so we can config this to generate smaller image as well so let's test this out again so let's just say um a line eating a banana by the c number image you want to generate is three we click generate image here you can see the images generated much faster because we have reduced the image size I hope you learned how to build a flutter Flow app that allows users to give any prompt and that prompt will subsequently generate any image through AI remember to like subscribe or comment below if you want to keep seeing contents like this on flut oflow

Channel: Steven Liu

Views: 1,511

Keywords: generative AI, dall-e, mid journey, dall e, gen AI

Id: OTKUDHLwsPg

Length: 12min 26sec (746 seconds)

Published: Sat Oct 07 2023