How to Build an AI NFT Generator - OpenAI DALL-E and Engine

what we're going to be building is an AI nft generator we're going to be using open AI to generate these images using doll and we're going to be using engine by Third web to Mint these nfts of the images that are generated for us so this is my application here we have a simple connect screen here so I'm going to connect my metamask wallet here and you can see here we have uh our image generator which we have no image generat we have a little prompt here and then we have a button to generate and mint the image and here is some collection of images that I have already generated and Minted as nfts and if we come to the contract here you can see that these are all the nfts here that have been minted which are the same nfts as these ones right over here and how it works is you would put in a prompt to generate an image so this can be anything so let's just say um a Robot Turtle in the ocean with neon lights I don't know something random and what we'll do here is we will generate an mint and what this will do is first generate the image using open ai's Dolly and once the image has been generated we should see the image appear here there we go and once the image is generated you'll see it is minting so it mints the nft using engine you can see the nft has minted successfully and that is the nft that was generated for us and then minted using third web's engine and then we can generate another nft here if we want to but if we come back to our contract here you can see here that this is the newest image that was generated for us which is the image that we generated right over here again we can generate another one if we want to and then down here at the bottom you'll see that the image gets added to our uh already generated collection of nfts hey everyone Shan Wata here back with another video and in today's tutorial video we're going to be building our very own AI nft generator we'll be building this using open ai's Dolly to generate the AI image and then we'll be using third web's engine to go ahead and mint those images generated as nfts an overview of what we're going to be going over in this video we'll first deploy ourselves our nft smart contract which we are going to Mint our nfts to then we'll build out our front end application where we'll Implement open ai's Dolly image generator to generate some images and then we'll use engine which is an HTTP server which allows us to call onchain transactions and we use these two things hand in hand to generate AI images and mint them as nfts so all of that being said let's jump on the computer here and let's first deploy out our nft smart contract so here on my computer I am connected to third web's dashboard I'm going to come over to the contracts tab here and I'm going to hit deploy a contract now we're going to deploy ourselves an ERC 721 smart contract here and I'm going to come down into the nft section and the contract that I'm going to select to deploy is going to be the nft collection here and with the nft collection selected I'm going to hit deploy now and we're going to name this contract so I'm going to call this AI nft generator uh we can add a symbol if we want to a description image to the contract you can fill out all the contract metadata here how you want and you can fill out the remainder of the contract parameters here as well down at the bottom here under Network and chain you're going to select the drop down menu here and we support any evm compatible blockchain with third web so you can choose any main net test you can search the network name search the chain ID and select the network that you want to deploy to for this tutorial here I'm going to just choose the sepolia test net here switch my network here you can see I selected sepolia and then I'm going to select deploy now this will then open up a transaction window here and this is to deploy our contract so we're just going to have to pay for the gas to do that then we'll get another popup here for a signature request uh we'll go down here sign this this is to add it to our third web dashboard and once this adds to our third bed dashboard you'll be able to view your contract dashboard itself and we'll take a quick look through that before continuing on so there you go it has been successfully deployed this is our AI nft generator right now we don't have any nfts or anything minted to it and that's all we need to do with this contract for now we are going to have to come back and get the contract address when we start building out our app and once we set up engine and everything we'll have to come back in here and set up the permissions for this smart contract well with that contract being deployed we can now build out our frontend application so the next thing we're going to do is start building out our front end app here I'm going to come over to my terminal and in my terminal I'm going to create a new next project here so I'm going to uh run MPX create next app and we're just going to call this AI nft generator and I'm going to say yes to typescript no to es lint no to tellwin Yes To Source directory and yes to app router you can of course configure your next project how you want to once that's created here let's just clear this let's change into our project here so AI nft generator and we're going to install a few things the first thing we're going to install is third web's connect SDK and you can do this by running mpm install third web we support yarn pmpm and Bun as well so whatever you're using you can go ahead and install third web I'm just going to use yarn here and run yarn add third web once that is installed we also need to install open AI so you can go ahead and install open AI as well I'm going to be running yarn at open aai and once that is done we are going to then open this up in our code editor and in our code editor we just need to set up our third web SDK first so in the source folder uh in the app folder within that I'm going to create a new file and I'm going to call this file client. TS and we're going to create our third web client here using our third web API key so I'm going to create a variable here and we're going to call this variable our client ID and we are going to store this client ID in ourv file so we're going to say process. EnV do uh next public client ID and then we're going to create that EMV file for our environment variable here I'm coming back to my file directory I'm going to create a new file I'm going to say EnV and I am going to then get the next public client ID variable and we're going to get our client ID from our third web API key so to get your third web API key here you can come back to the third web dashboard you're going to go under the settings tab and in the settings tab here you have your API Keys you can create an API key if you don't already have one if you want to watch a more detailed video on creating API Keys we'll link that down in the description below you can check that out I already have an API key here created so I'm just going to copy my client ID come back here to mymv file and paste my client ID in there now we can create our client here with third web so I'm going to export this variable here called client and we are going to use the create third web client here we'll make sure we import that in from third web and for creating our client we need to provide it then with our client ID which will be our client ID variable here uh we'll just make sure that this is as a string and there you go we now have created our client that we can use throughout our web 3 application here next thing we need to do is we have to wrap our application with something called the third web provider to make sure that our project here works with the connect SDK so coming back to my files here I'm going to come over to the layout. TSX page and all we're going to do is wrap the children here with the third web provider so I'm just going to come here and say third web oops third web provider and we are going to make sure that the children here are wrapped within the third web provider we'll then make sure that we import our third web provider so say import third web Provider from third web SL react and we'll save that again making sure that our children are wrapped there and then we can run this locally on our device here so I'm just going to run yarn Dev and we're going to run this project here and we're going to see make sure everything is working properly this should load the next JS template here starter project that it comes with so give it a second there you go you can see it loads the nextjs template here and now we can start building out our application so the first thing we want to do is just build out our application here let's take a look at our demo so we take a look at our demo here the first thing we want to do is build out a way for us to connect our wallet or for a user to connect a wallet to our application here so I'm going to come back here to my code editor we're going to come over to the page. TSX file and in here I'm going to select all this templated code here from nextjs and we're going to remove that and replace it with some empty divs here remove those Imports and we're going to just create our application here so I'm just going to give this a H1 header here call this our AI nft generator and then I'm going to give this some styling in here just to Center our text and what I'm going to do here is then create a way to create a way for a user to connect their wallet to our app now we have a couple components here that you can use you can either use the connect button or you can use the connect embed connect button is going to be a button UI component that when you click it will then open up a connect Modo the connect embed is just going to displ display you the connect model itself so we're going to use the connect embed here and right here all we need to do is provide our connect embed with the client that we created in our client. TS file so once we have that added we come back to our app here you can see we have our title AI nft generator and we have our connect embed which is this connect model right over here we can connect with our inapp wallet which is social login email or phone number or we can select a web 3 wallet here and we now Support over 350 50 web3 wallets you can just search the name and search the wallet that you're looking to connect right in there so now we have a way to connect our wallet to the application uh and we need a wallet connected because again we need to be able to send the nft somewhere so next let's create the actual application that we can start generating our nfts so coming to back to my code editor I'm going to come into my file directory I'm going create a new folder here I'm going to call this components and and in the components folder I am going to create a new file here and I am going to call this our AI generator. TSX and in here we're going to create our AI generator component and the first thing we want to display in this component uh once someone is connected with a wallet is a way to disconnect their wallet or view the information of their wallet and we can show them this by showing them our connect button now now it's not going to show them the actual button to connect to an application it'll just show them the connected state of this button and again we just need to provide this with our client here from our client. TS file and then we can add some styling here to our div so if we come back to our app here and now let's connect the wallet to our application once we're connected you'll see you don't see the Modo anymore and what we should see is our connect button but we forgot to add this component here to our page. TSX file so we're going to add our AI generator component here save that come back and then we should see a connected button here we can come here disconnect our wallet it brings us back to the main login screen here but you can see that we still see the connect button down here now we only want to see the Modo here and once we're connected with the connect embed we should only see the button here so technically we should only display this button if there is a wallet connected and we can actually check that so in our AIG generator. TSX we're going to create a variable here called account and we're going to use the use active account hook here and what this is going to do is retrieve the information of the connected wallet or account that we have connected to our application and if we don't have anything it just returns us back undefined so we can say here if there is an account then we should return our app here so we'll just take uh this right here and then paste that in right over here and there you go only if we have an account or wallet connected should we display that connect button so now coming back here to our application uh looks like um only works in a client component we forgot to come back to our AI generator and we need to tag this at the top with something called use client there we go so let that reload there you go so when we're connected we see our connect button when we disconnect we only see the connect embed model here no connect button down here anymore once we're connected though we'll see our connect button so now we have a way for a user to connect a wallet or sign in and then disconnect and sign out as well so now that we have that again we need that because we need to know what wallet we want to send the nft to we can now create our actual application here now we're just going to create and build the actual generator itself first uh so this little area here where we can see our image our prompt area and a button right down here so coming back to our demo app and then coming back to our code editor we're going to build that out first right here I'm going to add some State variables and make sure we import use State here and these variables are going to be for our input Fields when generating the image uh one right here is for our image prompt the other one here is for our generated image so once an image is generated this is where we're going to store generated image and then some State variables here for saying if we are generating or if we are minting the nft that way we can prompt certain text and we can set the generated images and everything accordingly so the image prompt and the generated image are going to start off both as default in blank strings and the is generating and is minting state is going to be a default of false here so we're going to come down here and below our connect button but we're going to create a div and in this div we're going to say if there is a generated image so if there is a image generated then we're going to show that generated image and if there is no image generated then we're going to show that empty box um where it's going to say hey generate an image so we're just going to give this div here some styling of margins and if there is an image generated we're going to use a component here from third web called the media Ren render and this is going to be able to render out uh an image for us whether we have it as an ipfs hash or if we just need to render out an image in our application and what we need to do is provide it here with a client which we can provide it with our client from our client. TS file uh the source here is going to be our generated image so once we generate the image we set it as our generated image variable which is this one right here and that's what we're going to display uh once we have a generated image and then we'll just give this here some styling of width height and a border radius now if we don't have an image generated uh that's where we're just going to show our empty div here with some text inside and this text depending if we are generating an image or not so we'll say is generating we'll show generating and if not we'll say enter prompt to generate an image so that is what the text is going to say on our empty State and then we'll just give this some styling here and then we'll give the div some styling here to make it uh like a box that displays so we should see this here because there's no image generated so we come back to our application here you should see here we have our div here that says enter a prompt to generate image just a dashed box of our div here now we need to add in our form here that we can fill out the prompt of the image that we want to generate and then a button there that we're going to use to generate and mint our nft so coming back here below this div here we're going to create another div and this div is going to be for our form that we're going to fill out to again generate the image so in the form here we're going to say if we are not if we don't have a generated image or if there is an nft minting we're going to display our form uh but if there isn't generated image and our nft is not minting then we will display our button to reset the prompt and everything so in here we're going to create uh our form and mint button in here we're going to have a button that resets the image generation so right here in the first section we're going to create our form to generate our image here so we're going to give this uh div here some styling and first thing we're going to do is create an input field here for us to enter the text for our image that we want to generate the placeholder here will just say enter a prompt the value here is going to be our image prompt and then on change we set the image prompt to the value of our input here and then we give the input some styling and then below that we are going to have a button and that button is going to have different text so if we are is generating it is going to say that we are generating the image so we'll say uh generating if we are is minting we'll have the minting state and then if not it'll just say generate uh and mint nft right so we save that we come back here you can see we have our prompt area where we're going to put in our prompt for open AI Dolly to generate our image and then we have a button here that we are going to click to generate our image so coming back here we are going to say on our button here type is going to be our submit it's going to take our form and then we're going to submit the prompt here that we have the button is disabled if we are generating or minting or if there is no image prompt we only want to generate the image if we have an image prompt itself and then we have some styling for our button right over here so come right here you can see we now can generate M we just have our prompt right in here and down here this is where once the image is generated and everything we are just going to display a button here that says uh generate another nft and all this button is going to do here is we'll say on click and what this will do is just set generated image back to a blank string and it will then set everything back to this input field and button up here again we can just give that the same styling here and there we go so if we take a look at our app again we have our prompt field our button once we click that and generate our image we'll get be prompted another button here that shows us so if we actually come back here um to our code editor and I'll say if there say if there uh is a generated image so we'll just come back here you can see here it says generate another nft and then when we click that it will reset the prompt to not having a prompt and we can then enter our prompt in to generate another nft we'll say back here we'll just say not generated there we go all right and if we take a look at our demo app here the next thing we want to do below that is display our nfts that have been already generated to our collection so let's do that uh we'll come back here to our code editor and we're going to create a new component here so in here we'll call our create a new component create a new file and we'll call this our nft collection TSX and in our nft collection here we're going to have a type of our nft collection props and all this is going to have is our nfts which is an array of nfts here and we can import that type from third web we're then going to export our nft collection component and we're going to create that right here so I'm going to have some styling here for this div and in there we're going to just give it a header here that says AI Generations below that we'll give it a div give that some styling and what we'll do is then take the nfts the array of nfts that we have and we're going to map through them so all those nfts that we have we're going to map through and for each nft that we get we're going to display a div here which is going to be the nft so we'll say here uh we have our key which is going to be the ft. and then we're going to give that div some styling and all we're going to display is just an image of the nft and again we can use the media renderer component from third web uh and this will take the ipfs hash of the nft image and display it for us so we just need to set the client here to the client from our client. TS file and set the source here to the nf. metadata. image and then we can give some styling here to that image here and that's all we're going to do here is for our component provide it the array of nfts that it needs to display so coming back to our AI generator. TSX we're going to add in our nft collection here and again we're going to have to provide it with the nfts that we are going to then get so to get our nfts we first need to get our contract and the information and the nfts from that contract so coming over to our file directory here we're going to create a new folder we're going to call it UTS and in the UTS folder I'm going to create a contracts. TS file we're going to create a component here called our nft collection contract address and that is going to equal our contract address so let's come over here and get our nft contract address of our AI nft generator we'll copy that come in here paste that in now let's get our contract here so we're going to export a variable here called contract and we're going to use the get Contract here from third web and we're going to provide it a few things we're going to provide it the client here which is going to be our client from our client. TS file and this is going to be the chain or the chain ID that we deployed our nft to or smart contract 2 and in here I'm going to import a predefined chain already from third web if it's not a predefined chain you can use the defined chain and provide the chain ID to get your chain but since theola here is the chain that we used and it is a predefined chain here uh we can just import this from third web SL chains and then we can use sepolia here as our chain and finally we need to provide it the address which is going to be our nft collection address right up here so that is going to be the contract variable that we can use here and then that will allow us to start interacting with this contract cont or the nft contract that we deployed earlier so coming back to the AI generator. TSX file I come all the way up here we're going to now get the information from the contract to display our nfts and we're going to use the use read contract Hook from third web and that's going to return us back some data which we'll just call nfts and we'll also have uh the ability to refetch this data which we are going to use uh once an image is generated we want to be able to refresh that data of owned nfts again we'll be using the use read contract cook here and we're going to be using something called an extension here and this extension is called get nfts and this extension we can import here from third web and we'll import it from third web SL extensions slash and this is for erc721 here and get nfts is just going to get all the nft uh data and information of the minted nfts on the smart contract so here we just need to provide it the contract that it's getting this information for which is the contract from our contract. TS file so there we go we now have nfts so now when we come down here to our nfts uh we can now just give it and provide it our nfts here and we'll save that and then we'll come back to our nft collection and what we're going to want to make sure is that uh we have nfts and that nfts do length is greater than zero and if it's not greater than zero we're going to want to just say no nfts yet and then our nft collection if it is possi undefined we'll just say there and then now if we come back to our application we'll refresh this and there you go you can see we have our prompt we have our AI Generations here and it says no nft yet because again we haven't minted any nfts to our collection so we have the UI and everything here kind of built out already now let's add the functionality the first functionality that we're going to add is just generating the image using open AI Dolly once we have the image generation set we'll then Implement engine to Mint the nft so we're just going to do the AI image generation here first and to do that we're going to come back to our code editor here we're going to come here and and in the source folder we're going to in the app folder we're going to create a new folder call that API and in that API folder we're going to create a new folder we'll call this our generate and in that generate folder we'll create a new file here called our route. TS and in here we're going to be able to generate our image using open ai's Dolly image generator so first thing we're going to have to do is create our open AI instance here and this is going going to create a new open AI we can then import this open AI here from open Ai and what we're going to have to provide open AI here is our API key so we're going to say API key and we're going to store this in our environment variable so we'll say process. EMV and we're going to call this our open AI API key you're going to have to create yourself an open AI API key so coming to uh open AI you'll create an account you'll go to your dashboard you'll come down to API Keys here um you may have to make sure that you have a balance in your account uh to pay for the generations you'll create a new secret key here and then you'll get your API key there that you can then use to generate the images using open AI Dolly so I'm going to take mine here and what we're going to do from there is add this open AI API key to your EMV file and you're going to put in your API key right there so I'm going to do that now and then come back to our route. TS file here all right so I added in my open AI API key to my environment variable now let's create our image generation here so we're going to export an async function here and this is going to be a post function that takes our request and this is going to be of type next request here and what we're going to do here is use open AI to generate and return us our image so what we're going to do is we're going to take in our image prompt and this is going to be from our request body here so we'll say request. Json here and we'll say if there is no image prompt then we'll just return a status of 400 saying hey please provide an image prompt then once we know we have our image prompt we'll run a try catch here in the catch we'll just say uh we'll console error our error just in case and then we'll return a new response here that says error that we failed to generate image and it'll give us a status of 500 so that's if the image generation there fails but in the try here what we're going to do here is create a variable here for our response and this is going to await open AI do images. generate and again we're we're going to be generating an image using Dolly so we're going to specify our model here and the model we are going to specify is going to be Dolly I'm going to say Dolly 3 uh you can use Dolly version 2 if you want to uh The Prompt for our image prompt is going to be the image prompt that we got from our request body here uh the number of images we want generated is going to be one and then the size here now if you are using Dolly 3 the minimum size that you can generate is a 1024 x 1024 so I'm going to use that image size right there and that is going to generate the image for us now we're going to say here if there is no response. data we'll just throw an error saying that we failed to generate the image and then finally uh we'll return a new response here which will be json.stringify and what we're going to return back here is is the uh data which is going to be our response.data and then we'll also here say uh status 200 uh if it does return us back our image data so again this is really simple our image generation here that we're going to get from open AI again we get our instance of open AI here we take our image prompt from our request uh we then use open AI to generate that image again we're using Dolly 3 in this tutorial and then we'll get back that data and with that data we'll then be able to display the image in our application so that's what we're going to do next here we're going to come back to our AI generator. TSX and we're going to create that function there to generate our image and display our image in our app so I'm going to create a function here we're going to say uh this function is going to be our handle generate and mint but we're only going to implement the mint right now now and it's going to be a async function and listening to our form event here and we'll say uh e do prevent default here and what we're going to first do is set generating image oh sorry set and the first thing we're going to do here is set is generating image to true or set is generating to true and we'll run our TR catch here in the catch here we'll just console error our error but in our try here we're going to get our response and what we're going to do here is await and fetch our generate API so we're going to say SL API SL generate and we're going to provide this our method which is going to be a post method here we're then going to supply our headers which is content type application Json and then the body here is going to be our json. stringify and we're going to give it our image prompt so whatever we have within our image prompt here we're going to provide that in our API request to generate the image and use that prompt to generate the image with Dolly we're going to then check if uh our response is not okay we'll throw an error saying that we failed to generate the image next what we're going to do is take that generated image and upload it to ipfs and when we upload that image to ipfs we'll then be able to use that ipfs hash to then mint the nft using engine we'll also take that ipfs hash and use that to display the image within our app now we are going to have to turn the image generated from open aai into a file and then upload to ipfs and the only reason being is the URL link that open AI gives you when you generate an image does have an expiration date on it so we don't want to use that URL because in time that URL won't exist and then that image won show on your nft so what we'll do here is once we get back our response and it's okay we'll get back a variable we'll call that data and this is going to await our responsejson we'll then create an image blob from that data so we'll just say image blob here and we're going to await and then this is going to take our data that we got from our response the first indexed item within that data and get the image URL and then it's going to just turn that image URL into a image blob here and then we're going to turn that image blob into a file so we're going to create a new file provid it the image blob we're going to create that file as an image.png of Type image PNG here now we can then upload that file to ipfs and with third webs connect SDK we can actually upload this really easy uh we'll just create a new variable here we'll call this our image URI and all we're going to do is await and we're going to use the upload here from third web and we can import upload here so we'll say import upload from third web SL storage and for upload here we just need to provide it here with our client which is going to be our client again from client. TS and then we provide it an array of the files that we want to upload and the array is just going to have our file our image file right over here and in return this is going to give us our ipfs hash our image URI uh and then we can use that image URI one to Mint the nft and then two we can display it now in our app so we can now set the generated image here to our image URI and because we're using third we's media renderer we can take that ipfs hash of the image URI and display it in our application and finally from here we'll just say uh set is generating to false so we're not going to work on the minting part just yet we'll just test out our image generation right over here so coming back to my app let's test this out so we'll just say uh here turtle on the beach uh we'll hit generate and mint and I didn't and I didn't add my function here to my button so we're going to take this handle generate and mint here and then coming down here to our form we're going to say here on submit uh we are going to have this handle our generate and mint and what make sure that on our button here uh we have of type submit so it runs our onsubmit here on the form so we'll save that come back to our app here uh and then we'll test this out here so we'll say here turtle on the beach we'll generate our image you can see here it is generating once it generates it should show our image right in here so we'll say generating it should then again upload to ipfs and then we'll get that image back here once it's done and there you go you can see our image generation works with open AI Dolly we have our image here of a turtle on the beach and now our button and prompt disappears and you can see here it says generate another nft we can generate one it resets this and then we can then generate another nft here so we know that works we can generate our image we can upload it to ipfs which means we can now use that ipfs or that image URI to now create an nft now we're going to be using third web's engine to create these nfts for us this is going to take care of the gas and everything um and we're going to go over how to use engine to do this so first thing we need to do is create our request to Mint the nft using engine so coming back to my files here under the API folder I'm going to create a another folder here and we're going to call this mint and in the mint folder we're going to create a new file and call this route. TS and we're going to create our post request to engine to again mint the nft now to use engine here we're going to set up some variable and we're going to set this up in our environment variables we're going to set up the engine URL our secret key for engine or our access token and then we need a back-end wallet and our chain ID that this is going to be interacting with so let's create our variable here so let's create our function here so we're going to export an async uh function which is going to be a post here and again we're going to have a request of type uh next reest Quest and in here we're going to first check to make sure that we have all of our environment variables that we need if not we'll return a status of 500 here and then we'll just then we're going to get uh the variables here from our request body and this is going to be our nft image and the address that we need to send this to so the nft image is going to be the image URI that we get from our up uploaded AI generated image and then the address is going to be the address of the connected wallet so we're going to say await this is going to equal and await our request. Json and then here we're going to run a try catch and in the catch here we'll just same as last time we'll just console log our error and return a next response of an error message saying fail to Mint nft with a status of 500 and then in the try here this is where we're going to make our request to engine and get back our response here so we're going to say const here uh response is going to equal and we're going to await and we're going to say fetch and we're going to get our endpoint here to engine and mint our nft so I'm going to go over engine really quick here we're going to come back to our third web dashboard we're going to go to the engine tab right here now if you don't have engine or you don't know what engine is we have a video link down in the description below that you can watch we'll show you how to run your own instance of engine which is an HTTP server that's going to allow you to make API requests for onchain transactions and you can run this locally completely for free if you want to try it out and test it if you do want to get a live instance of engine you can create an instance here uh we do have a cloud hosted engine that you can use uh it is $99 per month this this is going to give you a completely managed instance of engine so you always get the updated version of engine everything will be managed for you or you can choose to host your own instance of engine if you choose to do so so you don't have to go through third web here we just make it really quick and easy for you to get one up and running but you can feel free to of course create your own as well but once you have it here in engine there are going to be a few things that we need uh the first is we're going to look at the end points here that we can call we're going to go to the Explorer and we are going to use an ERC 721 and we're going to look for the Post request here for a mint 2 so right over here this is our endpoint um we're going to provide it the chain the contract address say that it's a ERC 721 and then we are going to Mint two so this is the endpoint here that we need to call and then you can see here in the body we just need to provide it the receiver and then the metadata of the nft including the PFS hash that the image is stored at so coming back to the code editor here we're going to get that endpoint here so again we're going to take our engine URL SL contract SL chain ID then we're going to get our nft contract address so if we come back to our contracts here we're going to make sure that we export our nft collection contract address come back here make sure we import that/ erc721 SL mint 2 then we say hey our method is going to be of type post we're going to have our headers here which is going to include the content type which is going to be application Json we have our authorization which is going to be the bearer and then our third third web secret key and then finally we need to add the backend wallet here for our engine which is going to be our backend wallet address and what that backend is is in our engine if we go to overview here we have our backend wallets and our backend wallets are going to be the wallets that we're making the call to Engine 2 and this wallet this backend wallet is the one that is going to execute the transaction on chain for us so the user on the front end is not going to have to pay any gas or anything everything's going to be taken care of and executed using this backend wallet so you can see here this is my backend wallet now we do need to deposit some funds in here because again this wallet needs to be the one to execute the transaction so I can copy that backend wallet you can create a new backend wallet if you don't already have one and we're going to just send some funds over to this backend wallet here so we're just going to paste in that wallet address and say 0 point I'll just say two here and we'll hit next and then we'll confirm that and send some funds on over to the backend wallet so it can execute those onchain transactions and mint the nft for our user there we go confirmed so there you go now I have Point 2 e within this backend wallet here and that is what we are setting up here so we're specifying what backend wallet is going to be executing and then we have our body here and in the body we need to provide it a few things the first thing is going to be the receiver and again the receiver is going to be the address that we get in our request body and then we need to provide it the metadata of the nft that it is minting so we need to provide the metadata which is going to be the name here uh the name will say will be our Ai nft and then the description of our nft we just say an AI uh nft generated by Ai and then the image of our nft is going to be our nft image that we again get from our request body up here and that is going to make our call to engine to then mint the nft and we can just say if the response is not okay we can just throw the error saying that we failed to Mint the nft and then finally here we're going to return a new next response and we'll return a json. string ofi with a message here that just says nft was minted successfully again that's going to be our post request here to Mint the nft using third webs engine now we're going to have to set up the environment variables for engine to work we need the engine URL which is going to be the URL of your instance of engine so if you are deploying the this and running it locally it'll just be the Local Host that you have it deployed to uh the third web secret key is going to be your engine access token so over here your access token you can create an access token and that is your access token to allow the API to access your engine and then you again you have your backend wallet so you need to copy that backend wallet address and then we need to provide it the chain ID of the chain that you deployed your smart contract to so I'm going to set up these variables here in my environment variable my EMV file and then we'll come right back right so I have my environment variable set up for engine now let's implement the minting of the nft into our function that we created earlier so coming back to the AI generator. TSX file let's add to our handle generate and mint function here and after we uh have generated the image and uploaded it and got the image URI and set that as our image we set the is generating here to false we'll then set is minting to true and what we'll do here is we'll create our mint response which we are then going to await and fetch our SL API SL mint method is going to be post headers is going to be content type application sljs our body here is we're going to provide it with the image and the wallet address so the nft image here is is going to be our image URI that we just generated right up here the address is going to be our account. address and again this is getting it from the account variable that we got from using the use active account hook here and once we get back our response we'll check hey if the Mint response is not okay we'll say we failed to Mint and then finally down here we'll just say alert that the nft mint was successful after the catch here we'll say finally uh we'll make sure that we set is minting to false and that we set is generating to false as well and we'll refetch the information of the nft from our nft collection we'll also set the image prompt to uh blank string here too so we reset all of our state variables here and then we refetch the data of our nft collection that we were getting here so that it updates and populates the nfts and and there you go we now have the ability to generate the image and mint it all using open ai's Dolly and third web's engine now one thing before we start generating images here is we need to set up our contract so coming back to our AI nft generator contract or the contract that you deployed we're going to come over to the permissions tab here and under the permission tab we need to give permission to the mentor and Creator by default it is the wallet address that you deploy the contract with but we also need to give the ability to Mint and create new nfts to our engine's backend wallet so coming to our engine here we want to come to the backend wallet that we have the funds and everything for we want to copy that wallet address and we want to come over to our permissions of our smart contract and add that wallet address in hit add and then we'll come down here and update our permissions you don't update that permissions uh your backend wallet's not going to be able to nft and then you're going to run into an error so you want to make sure that backend wallet has the permission to Mint and create new nfts to that smart contract cool once that is done we are now set to test this out so right over here let's restart this let's come back to our main screen here we have our nft our AI nft generator we can connect any wallet here that we want let's just connect our metamask wallet we have an empty image here we have our prompt so so let's then again say turtle on the beach and we'll say generate and mint so again it should generate us this image using open ai's Dolly should then display us the image once the image is generated upload that to ipfs then make the call to engine to then mint an nft using that image URI that we just got from uploading the AI generated image so there we go we can see our image is generated it is minting and then we go we got mint uh nft minted successful if we hit okay you can see it says generate another nft we can take a look at our contract here so we have our AI at nft generator contract if we come to our nfts here we'll give it a moment for it to upload uh maybe just need a little refresh here there we go we have our token id1 so the same image that we just generated right over here we have our Ai nft and our AI generated nft so we can come back to our app here uh you can see we have our AI generated AI Generations down here which is that one nft that we created uh we can do this again so maybe this time we want to say uh robot eating sushi uh we can generate and mint it's going to generate uh once that generation comes we'll togg on over to our engine here so you can see the minting so once that generates so there you go is generated if we come here you'll see our mint coming through in a little bit there you go aoia queued up that's the call that it made to engine it's now engine is now sending this transaction getting it mined minting the nft for us and there you go it's been mined and minted so coming back here we'll come back to our collection and then we have our second image which is that image that was just generated for us right over here so back over here we got our alert saying nft is minted successfully and then we can just generate another image and our prompt gets reset over then down here at the bottom we get our image uh that gets added to our image generations and there you go we built ourselves an AI nft image generator where we'll be able to use open ai's Dolly 3 to generate AI images and then once the image is generated we then make the call using third web's engine to create an onchain transaction to Mint that image as an nft and send it to the connected user's wallet address so again I hope you folks enjoyed this video if you did give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on more tutorial videos just like this if you need any help or support we'll drop a link down in the description below where you can open up a support ticket and our support team will be happy to help you out and answer any of the questions you have but again I hope you folks enjoyed this video and until next time see you and

Channel: thirdweb

Views: 862

Keywords:

Id: 3OqSMxyABOs

Length: 51min 57sec (3117 seconds)

Published: Fri May 10 2024