🔴 Let’s build a DALL·E 2.0 Image Generator with REACT! (Chat GPT, Next.js 13.2, Microsoft Azure, TS)

[Music] welcome back to another build I am super excited for this one it's our biggest ever collaboration your boy has managed to partner up with the one and only Microsoft this is a Microsoft Sunny collaboration we're excited to bring you a huge Deli to image generator with chat GPT built-in all powered by Microsoft Azure Microsoft storage Bobs oh my God it's crazy it's crazy let me know what you're watching from right now let's jump into a demo When the Beat Drops I want to see everybody get excited right now if you're watching a replay you're watching it live destroy the Thumbs Up Button because I put so much damn work into this build so all I ask is you can have it for free I've even given away the source code for free guys get excited for the papa fam AI image generator enjoy I love you all check it out boom the papa Farm AI image generator a fully responsive gorgeous build like look at the state of this build I absolutely love it I'm proud of it look at this this is all made with next year's 13.2 typescript Microsoft Azure we've got two Microsoft uh Microsoft Services here we've got Microsoft Azure and we've got Microsoft storage containers we've got Dali 2 producing these beautiful images and we even have the ability for chat GPT to think of suggestions for us guys yes we are going to make chat GPT think of amazing suggestions let's try it out right now let's give it a real demo right now you can see let's create a modern abstract 4K painting of a butterfly with a vibrant color I'm going to use that suggestion right now can you go ahead and create it's creating it for us we've got this nice little pop-up we've got the ability to refresh images Watch What Happens automatically that refresh is going to trigger the image is going to get developed and just in a second Dali 2 will produce us a unique one-of-a-kind piece of art on this green it's always a nice surprise as well look at that I mean wow that's created by AI guys so this is open AIS daily 2 we're using chat GPT to power our suggestions and you can feel free to of course write whatever you want and look at that I've even made it pop the suggestion down here when you type in there so it's beautiful this application we're using CSS grid to power it all up oh it's just it's so good it's so so good and the best the icing on the cake for the first time on a stream I am giving you this code for absolutely free so you're not only going to be able to watch along for free but I'm giving you all the source code for free more on that in just a second so it's going to be one hell of a build let's go ahead and dive in and break down the tech stack and get this absolutely going energy off I can see you guys want to get into this and just start building this thing the energy is popping off right now I love and appreciate you all thank you for tuning in let's go ahead and take a look we even have lazy loading guys so this is absolutely incredible now if you want access to this code so that way you can follow along not get stuck you know kind of debug alongside me then you need to go ahead and check out the following link on the screen right now it's also the first link in the description and it's a Microsoft link so you can trust it do not worry it's AKA dot Microsoft Ms forward slash Sunny that's going to take you to this form right here all you need to do is go ahead and fill it in don't click Escape right we need to sign ups for you guys to get the emails that we want to send you over and all the free codes all the free good stuff that we're going to send you over so just fill this out it takes literally two seconds to fill this out like 10 seconds you're done right and Company if you don't have a company just pop your name in that's all you need to do and then once you've filled that out you'll reach this screen and guys look the puppet Farm made it on the Microsoft website we have zero to full stack Hero on the Microsoft website that's how big this channel is getting thank you all that's bloody amazing and incredible so we are live on the Microsoft website you guys can see here we've got the GitHub repo for this project that you can download right now right now right so you can go ahead and check that out right now you can also go ahead and check out the CLI extensions that we're going to be using today which are actually very important so we're going to go ahead and break those down you've got some technical docs and then you've got the zero to full stack hero course and this is all this is the place you want to be if you're going to go ahead and learn coding and you want to start from beginning to Landing your first job with the support of myself and the amazing Papa farm community and success coaches and everything we have to offer inside of our community okay so make sure you definitely go ahead and just sign up to the following link on the screen let me know in the comments if you've already done it head over to aka.microsoft forward slash sunny and there you go you'll be able to do it you get the code fill out the form hit submit and then you get the GitHub repo and then you can just code along with me and you can do have a bit of fun right you don't have to kind of work everything out by yourself it's fine you can have fun with me right so let's dive back into the build and let's break this down in regards to Tech so I see loads of you have already signed up we've got alexandru we already had about a thousand people on my side of things that just message back saying I'm signing up straight away so absolutely nuts this is crazy right and you guys can go ahead and feel free to play with this once we finish the stream so I'll show you how to build your own and then you can go ahead host it on your portfolio because I'm going to show you how to deploy this as well so let's break down the tech stack that we have right here okay so this build consists of the following guys we've got react right we have typescript let me go ahead and just get rid of the screen for a second we've got typescript we've also got things like next JS but we're not using just normal xgs we're using xjs 13.2 yes we're using the brand new routers inside of nextges 13.2 we're also powering up the image functionality with dally too yes guys you heard it right dally too and we are using chat GPT to go ahead and generate the suggestions so we have loads of stuff to look forward to right and we also got things like the cell we're going to be using a typescript to make sure our code is robust we've got Tailwind CSS to make it completely responsive and most importantly none of this would be possible without Microsoft right so we have Microsoft Azure and this is essentially Cloud functions right so we've got Cloud functions which are going to execute our code and they scale extremely well and you get free 200 worth of credit just for signing up so it's bloody amazing right so you've got Microsoft Azure and we're going to use it as a storage service so these two services are going to power up every thing you see here so it's absolutely an incredible Tech stack that we're covering today okay now let's dive into the back end let's see for ourselves what's running we have Microsoft Azure don't worry if this looks scary I'm gonna make it seem so easy and you're gonna be able to follow along just right next to me okay we're going to be using our functions so this will allow us to have essentially Cloud functions which run in the cloud which essentially just endpoints that we can go ahead and say generate my image go ahead and give me all the images all of that stuff happens with Microsoft Azure and it's so easy to set up and they've got such a nice integration with vs code because Microsoft own vs code so a lot of fun stuff happening today and storage account is going to be used for storing all of the images that you see inside of this build and just generally guys I'm so proud of this app right look at this it works perfectly on a phone it works perfectly on a tablet and then as you just scale up you just get this beautiful responsive design and I think this is something that you should all aim towards in regards to just impressing somebody with a build like they should look beautiful okay and I know you guys like this because I've been getting emails non-stop about the code sample that we already released earlier and it's absolutely just it's insane so if you want more Microsoft videos drop a comment down below or let me know in the comment section right now by Smashing the thumbs up button and dropping your feedback right so we're going to do tons of work with Microsoft and yeah we've got loads of stuff coming so before we get started you can go ahead and install the Azure functions core tools so you can go ahead and head over to their website I'll show you everything that you need to do but we are going to use Homebrew to install it so you can simply run this command if you've got Homebrew if you haven't just simply Google how to install the Azure function core tools it's very easy to do so right and then you can go ahead and get set up with that but it's pretty simple I'm going to show you how we do it okay and as I mentioned before if you're new to coding and you want to get a head start or if you're an experienced developer and you just want the correct mentorship and how you can level up your developer game then check us out over at properreact.com forward slash course and join us at zero to full stack hero make sure you do this is where we actually done all of this stuff before I even come on YouTube and I go ahead and deep dive into this stuff so crazy crazy stuff happening and we already hit half a million views on the chat GPT cloud and yes guys I'm covering gpt4 the minute I get access to it so huge stuff thank you for tuning in guys I see everyone in the chat let's go ahead and dive into this build so the first thing I want to do is let me go ahead and get my music dialed in and again if you want the music remember sign up to the newsletter that's why we ask you fill out all those details in the Microsoft form make sure you fill all this out right it's going to be really important for you to get all the specific emails that we're going to send out to you in the future now check this out we're going to get started off why with a template so head over to tailwindcss.com and we're going to create our first project and wow we already have our first massive donation 10 euros thank you so much loud we've got a stream about training chapter with custom businesses there business there would be nice cool dude I see you I hear you thank you for the 10 euro donation I appreciate you I've got that coming in clutch right so we're going to go ahead and start things off by running this command if your MPX does not work all you have to do is install the node tool right so you just have to go and Google node and just install node okay then you'll get MPX so that's basically node package execute all right so in this case we're going to run this and this sets up a nextges project with Tailwind CSS a starter kit right and then we're going to go ahead and sort of fast forward everything after that so we're going to open up our terminal right I like to do things inside of a nice directory you don't have to it's completely fine I put everything inside of documents builds so it's just a cleaner and then I'm going to go ahead and paste in that command now I'm not going to hit enter I'm going to change this and I'm going to give this a title we're going to call it AI image generator and in fact I didn't actually give you guys a chance to do something why don't you give me a prompt so I have an idea think of a prompt for a piece of art and I will put it inside right now and show you that it works while we run this command Okay so we're going to create the app AI image generator and we're going to go ahead and say Microsoft build okay so AI image generator with Microsoft and hit enter so this will go ahead and start our template right so our next year's starter template and it does it with nextges 13. however the code is originally set in xjs12 and I'll show you how to migrate at 213 now if you do want an in-depth breakdown of how to transition over I've done so many coaching calls in our community here at full stack hero and I've also dropped YouTube video if you're watching the replay Jay will be linking it right now somewhere around here thank you Jay amazing stuff right so with that said we've now created our AI repository so in this case we can go into that so we can say CD I'm going to say AI image and then oops and then a generator Microsoft okay and then what I want you to do is type in code Dot and if you don't have the code dot command once vs code opens I'll show you how to get that code.command so you want to go ahead and actually okay that what is that that did not do what I wanted it to do um let's close that let's double check I want to check if there's anything in there okay so we don't actually I didn't do what I wanted it to do so I'm gonna go out of that and run my command again let's do that one more time guys let's create the app and let's call it AI image generator okay let's run this again it did not seem to actually create my um my app okay so in this case I actually might need to update my no we don't have to do that create aim machine right next just interesting okay in this case we're gonna have to set up the old-fashioned way which is fine a little bit of a headache but that's okay happens I guess they've pushed a weird update then so if I go into my AI image scenario already started debugging okay yeah so that's not setting up my project so if you run into this issue it's completely fine right now it's not working please start with MPX create next app yes I will do that right now okay so we're gonna I'm gonna show you the raw way of doing it right so next.js I'm going to show you from scratch how you can go ahead and do it if we want to get started we click on getting started and then you can see it down here now we are going to go ahead and set up with the latest right and we are going to be using typescript so we're going to go ahead and copy this command create next app and here we're going to do the same thing so create next app with the typescript hit enter and it's going to go ahead and say are you okay to proceed we're going to say yes we are fine to proceed what is your project name so now I'm going to say AI generate AI image generator YouTube Right build okay I'm just gonna name it that for now would you like to use eslin yes would you like to use Source directory um did I use the source directory I believe I did not let me just double check I did not use the source directory on this one so we're going to say no we're going to use the experimental app directory in this case yes I do want to use it okay import Alias would you like to configure let's just hit enter for now that's fine and then we're going to go and this actually is pretty handy um so this will install the dependencies get everything set up okay so don't freak out sometimes things don't work like look we've just started the stream our template didn't work it was working yesterday it's fine we just figure out the next way to do it okay this happens all the time when you're coding trust me it happens to me a gazillion times a day don't freak out you're fine do CD after that's done AI image generator so image generator Dash YouTube build whatever you've called it you need to do that and then if I do a list there you go I've got stuff inside now so if I do code Dot and I start things up you should see the following there we go guys that's more like it now we've started in the correct in the correct way so I'm gonna update later it's fine now what you can see here is we have the new app directory with a bunch of things already inside right we've got some CSS modules and that kind of good stuff but we're not going to be using that so I'm going to show you how to add tail and TSS manually into your application so now what we're going to do is go back into what I previously said if you go to the install Tailwind now in this case if you did the starter project and it worked great you can go ahead and carry on if you if it didn't work for you then you have to go ahead and install the following right so in this case we are using yarn oh no we're using npm here so we're going to stick on the track of using npm and if you're using next year S10 or newer we need this so in this case I'm going to copy this command okay I'm simply going to go inside command J I'm going to make my screen a little bit bigger so you guys can see what's going on a bit easier and I'm gonna go into my terminal so output and you see we have the terminal on the left right so here let's close these there you go and now what I'm going to do is npm or install Dash d means only a developer dependency okay then we're going to go ahead and hit enter this will install all of the talents out for us okay so very simple we're going pretty fast and straightforward with it now at this point while that's installing after that what we're going to do is we're going to go ahead and do MPX Tailwind init Dash p and this will set up Tailwind config and a post CSS config file for us okay so let's go ahead and do this uh zotin says that's why I respect Sunny because he accepts Live code he's not afraid when something won't go well I honestly want to show you that I want to show you it because often what you'll find is there's just so many things which are just perfectly recorded on YouTube and coding is not like that there's always things that are out there always always things that are going wrong right and I want to show you how I get over it on a live stream which is stressful but it is what it is it's fine okay so in this case now I'm gonna go ahead and paste in the next command MPX Tailwind init p and then what this will do is it will create us our new files there you go right so now what I need you to do is go into your Tailwind config okay so once you have your Tailwind config up on the screen which is like so I now want you to go ahead and you have everything looking like this so it's pretty empty at the moment right what I want you to do is go ahead and pop in the following okay so inside of the content I need you to go ahead and add the two following lines and what this will do is it will compile anything or search for Tailwind and utility classes inside of components folder and inside of the app photos any file inside with the following extensions it will go ahead and do that for us okay so simply hit save and then you're good to go on that front now the next thing I want to do is I'm going to go ahead and just double check in my post CSS config this should be empty at the moment we don't need anything there okay now the final step that we need to go ahead and figure out is we need to have a globals CSS file so in this case I'm going to go ahead and create a folder called Styles and inside of my Styles I'm going to say globals.css right now inside of here all you want to do three simple lines to import all of the CSS base things that we're going to need Tailwind base telling component until when utilities go ahead and hit save and then you simply close it right easy as done head over to the app folder this is using next shares 13 because we see the app folder if you see a Pages folder then you're likely using an xjs12 or you could be using Nexus 13 except they just haven't migrated over to the app folder you can have actually both at the same time and shift over in an iterative manner right so in this case we're going to our app folder and firstly before we do anything further I need you to go ahead and firstly let's just double check that we've got any more settings in this case we've already done that as much as we wanted yeah you see there's also the lines over there that will tell you here we are yes it says to include Tailwind all that kind of good stuff now I'll show you a nicer way of doing this because I don't like doing it that way I like doing it this way yeah so now what I need you to do is go over to your layout right this is where things start and this is using next year as 13.2 because we have the new SEO metadata right this is incredible thank you so much a new another donation from New Zealand 5.50 goes high from New Zealand thank you for the amazing content Sunny you keep us inspired I appreciate every single one of you that's why I work so hard to get you things like the free source code for today's build so make sure you check it out Jay will drop the link in the chat right now okay thank you so much Michael says you rock sunny I appreciate you all I see you guys I see you guys okay so at this point we're going to start our application so heading over to your terminal I need you to go ahead and type in npm run Dev now I've already got an app running so I'm going to quickly cancel my app that is running on the other screen and then fact what I'm going to do before that is I'm actually going to go ahead and screenshot so that way I don't lose all of my stuff that I've got going on right here so I'm going to keep this as a reference screenshot so that way we can begin to build out the application as we need to and I won't lose that if I need it later on okay so give me two seconds I'm just going to put that over to the side so that way we have something to look at afterwards cool so now that that's done what I'm going to do is head back over to my code now what I want you to do is if you have multiple or you have a single screen create make your workspace easier right have your code in one side and just shift between the two it's a lot more efficient to do it that way now npm run Dev and what I need to do is cancel my old app there we go to cancel that npm run Dev what this will do is it will start your app on server 3000 you might get this pop-up just click allow that allows you to have typescript reading in your app and then what we're going to do is head over to our code and I'm going to refresh at 3000. well you should see now is a starter template there you go next year is 13 beautiful looking start template right so what I want to do is kind of get rid of this and make it my own Fresh Start so we're going to go ahead and where we have our layout function layout file and it's importing from globals.css first thing I'm going to do is where is globals at the highest level is here right I'm going to get rid of their globals right so I'm not my one my one's in Styles I'm going to get rid of this then I'm going to get rid of page.module.css I don't want their Styles I just want my own which is using tailwind and as you can see at the top here I'm going to get rid of everything I'm going to get rid of all of this stuff inside the page and inside of the main block I'm going to go all the way down I'm simply going to remove it all right and here I'm just going to type in something like H1 hello world all right and as you can see we've got a class name here just get rid of it right so this is you should be your page.tsx file very simple and straightforward and what you'll see is you might get an error just simply hit the refresh but the arrow is actually coming from layout.tsx right now where we're importing from globals.css instead we need to import from a level up so in this case we're going to say import from a level up and we're going to say globals oops I'm sorry Stars forward slash globals.css right simply hit save and now what we can see is we have a Hello World where our Tailwind CSS is working so I've simply zoomed in here to show you that and what we can do to test it is go to page.tsx and simply type in class name and do something like a text red 500 to test if our Tailwind CSS is working or not okay and if it goes red hey we're good right so this is a good starting point for us and we can I can see loads of people are coming in thank you for tuning in make sure you smash that Thumbs Up Button if you're watching this it helps push it to more developers out there and remember we have given away the source code for free at this link right now simply fill out the form and simply go ahead and go to the GitHub repo for this project if you want to go ahead and get the source code AS to code along with me okay now if you want all of these nice little kind of pop-ups or Auto completion options all you have to do guys is go over to your extensions and install the following and while we're all right I'm going to make you install a bunch of extensions because you need them for today right so a few things that I want you to install firstly tell ncss simply go to Tailwind CSS intellisense install this this is going to help us out it's got the intellisense autocomplete options when we're using our utility classes next thing I want you to do is type in Azure okay this is Microsoft Azure now what I want you to do is install the Azure tools I need you to then go ahead and install I've actually installed the app service it's up to you if you want to do that as your storage you're going to need okay and then you also need to go ahead and install the Azure functions and you can feel free to install the extra things like the account databases they have honestly so many it's really really cool and they even have the Azure CLI tools if you want to do everything by the CLI but I'm going to show you how we can do it through the extensions on vs code it's a really nice integration right so after those have been installed we are at our starting point right so now using our reference let's start building out our application so if we look at our application I'm going to go ahead and make this a little bit smaller so here we can see our reference image so as you can see from this reference image we can go ahead and take a look at this and we have firstly starting off with a nice sort of top section so I'm going to go ahead and start annotating this so we want to build out this section first okay so this is our header section so let's go ahead and start off with that so first thing I want you to do is go into your page and in fact we're actually going to be building this using the new layout.tsx file sort of a structure okay so the layout is where everything it can be sort of separated in terms of you can have your visual components at a higher level and then have your page contents at a lower level right so I'm going to show you how we can break all this down so at the layout level we're inside of the body what I want you to do is very simply go ahead and type in here we're going to type in the header so I like to sort of comment things out as we do it right and then we're eventually going to have something called The Prompt input right so this is going to be responsible eventually for this portion here okay oh this song's a banger I'm gonna keep this up all right so we have the prompt input afterwards so we have the header at the top and then we have the prompt input at the bottom okay and then this would be the actual page content where we render out the images so fairly straightforward we're componentizing everything right smash the Thumbs Up Button if you like me showing things more visually I'll keep on doing that right so in this case hit save and now I want to go ahead and build out my header components right so first things first I'm going to go into my app and at the package Json level I'm going to create a new folder and I'm going to call it components guys we just hit 200 likes let's keep on going and we're going to go ahead and smash a thousand likes very quickly I promise you right so components folder and inside of the components folder I'm going to create a header.tsx now with the header.tsx I'm going to type in rfce I've got a nice little Snippets tool if you don't have that little ability that I just did there all you have to do is simply go here and type in es and you should get a nice little es7 Snippets pop up you want to go ahead and install this you know it's the right one because it's 7.8 million downloads right so in this case really awesome uh tools so make sure you go ahead and install that is for to get those Snippets that I just showed you okay so go ahead and you don't need this anymore at the top and this is going to be our header so first things first I want to get this shown on the screen so we don't need that there we can go to layout and I'm going to go ahead and type in header okay and I'm simply going to go ahead and close it off and if you see what we can do is we can get add components dot header now the reason why we've got this out is because it's automatically set up aliases for us so this automatically goes to the top level now how do we do that right this was actually inside of it wasn't an xgs config it was in where did they do the a-listers I've completely forgotten it where we put it but I think it was it was a typescript config yeah it was here so in the typescript config if you want to have a shortcut to get to your top level you can actually do aliases so whenever we were at at forward slash anything right or you can have as many different ones you can have components at forward slash and so forth and this will go ahead and direct us to this level right so that way you don't have all these nested things so it's really nice actually and you can see my intellisense actually picked up on it cool so good stuff let's go ahead and see if that rendered out so on here now you can see I've got the header and hello world and again remember I am Zoomed In which is why it's big but on your screen it'll be relatively small I'm just doing that so you can see on the screen what you're seeing okay now first things first let's go into header and just a reminder for today we are going to be using Dali 2 and the chat GPT apis from open AI as soon as gpt4 gives me access I will make as many crazy builds as you want me to as long as you smash that thumbs up button and let me know how much you want that in the comments right I promise you I will work overtime to get this done okay so at this point I want to change this to header to get syntactically a bit more correct and then I'm going to go ahead and begin things off so the header first things first let's have a div and we're going to have two sides of our header right so you can see on the header we've got the left side so this left hand side and then we've got the right hand side so you can see we've got the first div on the left and the right div and the right div so this means we've got two divs and then we simply use flexbox to justify the space between them okay so let's go ahead and do that right now so inside of here we're going to have our left div and then we're going to have our right div okay very easy then inside of here we're gonna have our first div and this one's going to consist of an image and then some text so the image being this image and then we're going to have some text right so I'm going to firstly show you how we do this so I'm going to import the image from nexjs image component we're going to fill it out in just a second then underneath that I'm going to have another div and inside there I'm going to have H1 and an H2 the H1 is simply going to have the proper fam AI image generator where I span a style in okay so I'm going to go ahead and pop this in like so and this is simply going to be a H1 with the following inside it just means that it colors only the AI because I'm spanning only the utility classes around that portion now for the H2 I'm going to go ahead and just simply say powered by Dali to and chat gpta right so powered by and in fact it's even got more than Cool Tech than that so let's go ahead and include that and memes for Microsoft Azure right some Microsoft Azure as we've even got Microsoft Azure in this so there's a lot of power behind this and I'm going to go ahead and style this and say that this text should be extra small and this text should be bold right very straightforward now for this image we're going to give it a few things firstly I've made life easy for you I've actually shortened a bunch of URLs such as the open AI um logo so you can go ahead and use these for reference and remember if they do have a stop working simply replace it with a URL that works it's not very difficult right so in this case we're just going to give the old text of logo because now that's mandatory as well as a height of 30 and a width of 30 so that next GS can do its optimizations correctly on its side okay so let's go ahead and do this Lux says I.E certainly I've been following you along on all your react builds that is awesome right so that's great right now you can see we've got the images up and then you can see now if we go over here we will get an error so if I go back here and I refresh my page we will get an error because what we now need to do is white list this domain basically when we pass in images into the next.js image component what we find is that we actually need to tell it that these domains that you're pulling the images from are safe if you do not do that then what you're going to do is you're going to be optimizing all these images and an xgs don't want you to do that so they don't let you do that because somebody could easily misuse that and then you're actually using a lot of resources because images are heavy okay so in order to do this what we do is we go to next config and it's very simple right underneath the experimental feature all we simply do is type in images and then we added an object and we say domains and now instead of this URL we pop in links.publicreact.com or whatever domain you actually pop in yourself they in fact give you the hostname there so you can actually save yourself a little bit of take hit save and now what you'll find is if you open up your terminal with command J you change the next jsconfigure you have to restart your server so command Ctrl C and then we need to go ahead and run our npm run Dev again that means what we did is we changed the configuration then we restarted our server so that way you use the new configuration okay so simply uh simply put so we got loads of people tuning in this is sick love it keep smashing that thumbs up let's get to 300 likes let's keep on going guys just destroy that like button and I'll keep bringing this content for free all right so let's go I love you guys too it's so awesome so in this case now we can go back to our app hit the refresh button and we should actually see an image so let's go and see hey look at that we got the nice little image at the top so let's go ahead and lay this out in a bit of a nicer way so for that div what I want to do is actually lay it out so remember if you give a div a flexbox rule so Flex in this case first if you want to know what that translates to Simply hover over it that intellisense from that extension that we installed earlier we'll give you the CSS it translates to we're going to say space between SpaceX of two if you by the way if you give it Flex by default the children go into a line so they're in the flex row okay and then if you want to change the deflects column so in this case I say items should be centrally aligned as well so hit save and as you can see it just simply pops in and in fact what I'm going to do is because I want you to see this as I actually code it I'm gonna pop this on the side like so because I know you guys like it when I do this kind of thing right so let's go ahead and pop that in and that's a lot cleaner as well to go ahead and read so now for the right hand side what we're going to do is we're going to say we have a div and here we're going to have a link and these are going to be two links okay so the first link is going to have a join zero to full stack hero and the second one is going to have the GitHub repo okay so let's go ahead and pop those in and in fact what I will do is I'll pop this over here for reference I'm okay I can't right now so I'm being super lazy I'm gonna do something super super lazy okay because my screen oh God damn okay we can't do that that's fine I'll keep it all right so at this point we're gonna have our div and we're gonna have a link tag so you can see install and importing it from next link and then this is a uh this takes a child which is the text and the tech tier would be join zero to full stack hero remember if you want to learn how to code and you're sort of nervous in the industry or even if you're confident you can join us over at zero to full stack hero and get your coding skills up to Elite levels and land your dream jobs right so go ahead and feel free to join us so this is the link that I'm going to pop in there feel free to check it out and you can add this you can obviously if you're going to make this for your own kind of uh website you can actually have your own links right so feel free to change up however you want and you can see we've got a nice little link and then the second link afterwards is going to be for the GitHub repo which I've actually made it very easy for you to access this will take you to the uh Microsoft page where you have to fill out that form as I mentioned before and then you'll simply get access to the code so now you can see GitHub repo and join a zero to full stack error now you can see the two children are actually not stacked up properly whereas we want it to be on the form of their next to each other so we have to do is set Flex to the header and then we have to justify space between and we'll get that appropriate outcome okay so let's do do that exact thing that I just said on the build right now so let's go over to our header and we simply go ahead and say oops I'm not that definitely don't do that we're going to say class name and we're going to say flex and immediately they're going to a row that's a lot better and then we say I want to give padding of five because I don't like it touching the sides justify the space between them so use up the space between yourselves I want to make this a sticky header so that way it sticks to the top as I scroll down so it's got this nice kind of floating effect we say top is going to be a zero the background is going to be white so that way when it's floating down above over the images we can see it Z50 means it's going to be layered at the top so that way it's not kind of buried behind images as we scroll down and I'm going to give it a shadow medium to go ahead and have a nice little drop shadow effect and as you can see we get this although this side right now is not being behaving with the space okay so now what we need to do is just make it a little bit more clean in terms of its space usage so let's go over to our second div over here simply go ahead and add in the following Flex right so that way it puts it into a row then I want it to be text to be extra small as we get to a medium size screen I want the text to return to a base size okay so as you can see on a small screen because remember it's mobile first which means all of our rules are applied first then you hit these break points and you say if we hit that size screen then apply the following style okay so if I go ahead and increase this you see it gets bigger after we hit the medium breakpoint that's awesome that's exactly what we wanted Okay so we've got that down and then we want to go ahead and add in a nice little trick here what we can say we can say divide X and what this does is it adds a little line between it which is really clean right then we can say items it should be in the center and once you learn how to use flexbox correctly it just does all the hard work for you right and then what we say is text Gray of 500. I want to be and I still great on and look at that just like that beautiful looking header already built so so easy to go ahead and do that with the correct foundations right so check this out very clean somebody says the side says I don't want a job I want to build and ship well the best way to do that is get mentorship get like get into a real working environment which is why jobs are great to go ahead and learn and then you can feel free to transition those skills and do what you want to do and build the next million dollar app right do whatever you want to do that's you I'm here to teach you for absolutely free so at this point we've got the header done so when right next thing we need to do is go to our layout and we're going to start adding in the prompt input now this is probably the most crucial part of the build right so from this prompt we're going to have a few different features and it's also going to be fully responsive to move around so that way it looks nice on a phone as well and what we're going to do here is we're going to the input this is a text area box and then we're going to go ahead and click on generate and it will generate the image to come down here this is using CSS grid by the way okay I'm also going to have these two images two buttons here one of them is going to be for using chat gbt to create a new configuration and this one will be to actually use the suggestion that it goes ahead and gives us to generate the art that we see over yeah okay so very very clean stuff right so let's go ahead and build that area right now so we're going to create the prompt input right now so let's go ahead and create that right now so we can get rid of our little uh a little edit there and here I'm going to create a component called prompt input and obviously it's not created yet so it's going to error out I'm going to go into our components folder create it so prompt input dot TSX boom there we have it and then rfce to create a functional component get rid of the top and simply we're going to go to our layout and fix this by doing control spacebar import and as you can see we've imported it like so right and you can really keep things quite neat as you can see we've got that new aliasing which looks really clean and a lot of good stuff right so check this out someone's a software developer engineer one a major startup here in India thanks to Sunny that's awesome dude keep going keep doing that's awesome stuff all right so now we're inside the prompt so first thing I want to do is actually just get the UI down Okay so we've got our div and I want to have it inside of a form so firstly we say form and get rid of the action because we're not using PHP right and then we say a text area is the first thing we're going to have and we don't need all of these things right now you can set columns rows like if you want I'm not going to bother with that right now um the text here is going to be there it's going to be a self-closing component hit save and you can start to see like look we've got a text box there right it's a nice little text area cool and then I'm going to have a button saying um generate right so we're going to have a button saying generate a another button which is going to say user suggestion so this one's gonna say use suggestion Astro says let's go Papa farm and that's the energy I'm talking about dude let's go right so now again and then afterwards we're going to say new suggestion right so new suggestion and I really am curious to see what designs you guys come up with when you go ahead and build this out yourself okay let's go ahead and Chase up someone says I randomly landed here and it looks great but I can't stick around for the whole thing is this going to be live afterwards yes 100 this will be live afterwards the video will be stored and actually uploaded afterwards yes directly after okay now once that's done all we need to do is start styling it okay so we're going to give it a margin of 10 so at the top here we simply say my computer is being a little bit slow so it's going to say margin of 10. so there we go we've got a nice little margin of 10 at the top and then for the form itself I'm going to give a bunch of styling so we're going to say it's a flexbox right so you see how they all went in line and then but by default on a phone so on a smaller screen we want to be in a column so you see right now so right now imagine it's like that right so by default on a phone that's a lot easier to actually use we only want it to change to a um a row when we go on to a a larger screen so once we get to a large screen you see how it goes into a row okay so that's how we do that and then what I need to do is I'm going to say shadow is going to be medium I'm going to give it a color so you can actually give it a nice colors I think it was since version three until end and what we can do is we can say forward slash to reduce the opacity of that shadow then we give it a border as well so let's go ahead and hit save and look at that oh it's looking clean with a rounded medium and then we say on only on the large screens do we give that nice little divide X line okay so now as you can see if we go into a big screen it adds in this divide X line but on the smaller screen we don't have a divide X line so really clean okay really really clean now for the text area I'm simply going to go ahead and say that that should dominate the space so we're going to give that a rule of Flex one so because it's in a form it's a flex we can say the text area should be dominant should take up the majority of the room give it a padding of four the outline should be none okay and then round the corners out surrounded medium so at this point now you can see that it takes up the majority of the space and as you can see we're slowly getting closer and closer to our end design now for the button we're going to go ahead and say class name and for this button I'm going to do the following so this button actually want it to be grayed out if it's disabled but we haven't actually done that yet so I'm actually going to go ahead and hold the design here for that one before we do that I'm going to do the other two buttons okay so here I'm going to say the class name should be and then just to save us a little bit of time I'm going to go ahead and pop in the following right so I'm going to go ahead and pop in the following rules for this and this just gives it a padding of four background of uh Violet text white transition only on the colors as it changes color and the duration for the transition but and when it's disabled it will apply the following rules okay so just an essence of time I want to save a little bit of things you guys can feel free to pause and check that out same for this button we've got a bunch of styling for it so I'm going to go and do the exact same thing a little bit of a different color Choice here we can go ahead and pop it in and as you can see we've got our nice beautiful colors look at that already looking very clean right now for the um the generate button what I want to do is firstly that's the dominant button right so what I'm going to do here say that that is actually type submit so when we're inside of a form we have to allocate one button type of submit and for the other buttons so the other two these I'm just going to give them a type of a button so that means that it's not the submit button because what can happen sometimes if you click that button it behaves as if you're submitting it and that's not what we want right so now you can see if we hit generate it refreshes but if I hit these two buttons nothing happens that's because we've eliminated that as the submit button so with that said quick little water break we're doing amazing right now this is awesome we have huge amount of viewers watching in and tuning in almost at 300 like smash that like button if you're enjoying this check it out right scientist I'm already part of the Bob fam yes dude that is what I'm talking about okay now to make it a little bit easier to see what's happening now I want to give the text area a placeholder so here we'll see placeholder enter a prompt and the B what is up dude welcome back to the stream good to see you man so look at that it's almost there it's almost looking great right so firstly at the top of the prompt input now when we're using nexjs13 by default everything in a component and app folder is now a server component server components cannot have things like click handlers and interactive or state because they're rendered on the server which means they don't have a window to attach to right which means it doesn't make sense to have a click Handler on a server side component so what you have to do is make your components at a more granular level as a good practice make those only client components I'll show you how to do it it's very easy in this case I'm going to make the prompt input a client component so all I do is I simply go to the top and I say use client and this allows me to use things like state it allows me to use things like click handlers so I'm going to have a piece of State here I'm going to call it input so I'm going to say input is that input and then we're going to import our use state from react right now this input I'm going to map it to our text area so the value here is input I'm going to say when I type in and change something it's going to set the input to the value that I type in make sure when you type in now it's actually typing in if it's not typing in you made a mistake with that stepper I just did now I have the state captured in a piece of stay Andy B says sunny is the god I appreciate you man thank you so much dude all right so once we've got that done we can now use the input to conditionally render certain Styles so what do I mean by this well the generator button should be grayed out if you haven't typed in or it should be disabled if you haven't typed in so let's go ahead and do that right now firstly what we did is we go down to the button generally and I'm going to disable so let's go ahead and say disabled if there is no input great right and then I'm going to give it a class name so a class name and then chat GPT is being so aggressive my co-pilot and then what I'm going to do here is actually put in backticks and back ticks allow me to have string interpolation for my utility classes right so I'm gonna go ahead and type in the following I'm going to say padding of four is always applied right but if we have an input so if you've typed in then what we can do is apply the following Styles else we should apply these Styles so if it's true we have an input then apply those otherwise it will apply these so the first set of styles that we're going to apply are the following so you can just go ahead and pop in these values as well so it's going to be the certain colors and then if it's not true so after the colon then it's going to be text Gray and it's going to have a cursor of not allowed right and then before all of this either way it's going to be font board okay so now you can see look it's grayed out and I've got a cursor knot on that but the minute I type in oh that's clean that is clean right look at that you can't deny it guys this is dope all right look at that that's just beautiful the color is everything oh this is nice make it whatever colors you want but this is a nice sort of starting point okay so this is a great little uh prompt that we've generated so far now we also are going to go forward and create the input down here so we haven't added in suggestions yet until we start using chat GPT and bear in mind this will also use use SWR in this build so I'm going to show you caching tricks and how you can go ahead and generate things in a more efficient way so we have the following now is the exciting part right so now what we're going to do is actually go ahead and set up our Microsoft Azure services and our chat GPT keys and everything that we're going to need to connect to the open AI API so open AI is the company that is responsible for things like dally to the image generator and for chat GPT the sort of text model that we're going to be talking to and getting suggestions from okay so first things first let's head over to open Ai and I'll just type in developer portal whatever you want to do honestly just go through that website click in a sign up or wherever it is and then you need to log into your account okay so go past your security checks everything you need to do and then log into your correct account so at this point you just need to sign in so I'm going to sign in with Google so I'm clicking continue with Google I am logging in to my account right now so I'm going to log into my papa react um yeah my pop react account I haven't actually done it in this account yet but that's fine and then you can see you'll reach this right so now you're in the AI openai screen you just need one key and one organization key to go ahead and connect two open AI Services right so what we need to do is go to Papa found physical click on view API keys and here you have your stuff right so you're gonna go to your create new secret key and also in settings you can see your organization organization ID so also you want to copy this right so first things first copy this value and we're going to use this in our local environment file so I want you to go into your folders right close all your stuff go into package.json and then create a new file at the high level here we're going to say dot m dot local this is responsible for our environment files right so at this point what I now need you to do is type in open oops open AI organization all right so open or AI organization and this one I'm simply going to go ahead and pop in the ID that I just showed you okay now the good thing about this is that this by default is only readable on the server unless I add in next public in front of it at that point it's available for client components but at the moment it shouldn't be right it should just be sort of as secure as it can be until I need that access the next one is open AI key okay so this one now the open AI key this one you should keep very careful and secret okay because otherwise everyone can use your key and build up your account so what we're going to do is I'm going to click on create new secret key so I'm clicking on that button right now and what has happened is it's popped up and it said API key generated I'm not showing you this because you're going to find my key otherwise okay so I'm copied that key and now I click OK and as you can see I've actually copied the key and you can see it's generated a secret key right now it's hidden the value and you can actually revoke the key if you ever find this misused or anything like that so once you've copied that value head over here paste here and paste it save the file and then close it okay so I'm going to go ahead and paste it save the file it should begin with SK like secret key Dash and then a long squiggly bunch of mess and then you want to close that file now we have our environment file correctly set up so this means we've got the keys that we need in order to go ahead and do the rest of the things that we're actually going to go ahead for and set up okay so before I go ahead and carry on remember if you're getting stuck at any point here and you're feeling like you're out of your depth remember there's loads of steps that you can do to help you out and in fact as you can actually if you you're finding that you're not sure if you've set something up correctly or not then remember as I've said before you can head over and actually get the code for completely free at AKA dot Ms forward slash sunny and I'll keep coming back to this because it's completely free to do so simply head there fill out this form click on the submit don't click on skip okay we need you to fill this out and then you'll get access to this and then you can click on the GitHub repo and then you'll get access as you need to okay and that'll give you access to all of the code that we're doing today for free okay so make sure you fill out that form it does support the papa fam so I massively appreciate if you fill it out hit submit okay so we've got our API key down we've gone we go back to our application so at this point now I need to use or set up for open AI so what I need to do is actually install open AI onto the machine so I'm going to press command J head over here and right now I've got my app running right but what I can do is I can simply create another terminal or you can split terminal because I'm doing one screen I'm just going to go ahead and do it like this I'm going to say mpm I open AI okay so all you need to do is install open AI onto your machine it's very quick Done Right easy as now what I want you to do next is create a at the package.json level so I always refer to it at this level because it's a top level okay and then I'm going to go ahead and create a new file yes I just installed the open AI package so we're going to go ahead and create something called open AI dot TS and this is going to be like our setup file it's going to be following a Singleton pattern so we're going to create an instant or connection to open AI services and then we're going to repeatedly use that to go ahead and talk back and forth to open AI this is both for chat GPT and for Dali because they're both created under open AI okay that's why we only that one key to do so so first thing I need you to do is import the correct dependencies where you need the configuration and the open AI API next up we need to go ahead and create a new configuration and the first thing we need to do is go ahead and pop in the organization and API key okay so organization and we're going to use those values that we set up just now so this actually goes into our environment file so process.m dot whatever we've named it so make sure this matches up to the file that we used earlier so the dot m file okay so uh someone says coming in here to check in thank you so much I appreciate you make sure you smash the like button if you're stopping by guys the viewership is incredible we're about 10 likes away from 300 I'm telling you this video is going to Boom so I love and appreciate you all so once we've done that we now create a open AI instance like so and this will go ahead and this object can be used to basically go ahead and communicate back and forth with open AI so once that's done we simply say export default open AI now just like we've done in the past with any of our other apps right it's like we don't we usually do this with like Firebase or other things in this case we can go ahead and do the same pattern as we do as we like to do so right so that's simplified things we can figure about that now the next thing we need to do is actually create a API endpoint this API endpoint is what we're actually going to be pinging again so index.js we can actually have API endpoints the next year is 13.2 we have these new root.ts files which is awesome right super clean and you've got a seamless integration between your API endpoints and your uh your client and server component so it's all like on the same level now which is incredible and we can go ahead and get rid of the pages folder finally right so inside of the app folder we can go ahead and create inside you see we've got this API and you can see hello and root.ts and this is the new structure and as you can see it follows a very similar approach to express whereby we say get post you know all the kind of standard rest API things that we're going to go ahead and need but in this case you can see what it's done here is it's create an endpoint at forward slash API forward slash hello and it supports get request and if you don't believe me I will show you right now that that is the case so if we go to local forward slash API four slash hello you will see they actually has a working endpoint so this is a full API integration right and it works with the new um sort of syntax from nextges 13.2 so at this point now what we're going to do is create an API endpoint for it's going to make life a bit easier it's going to be used for generating suggestions okay so the suggestions are going to be for how we're going to go ahead and basically get a suggestion now what we're going to do is we're going to have an API endpoint here for getting a suggestion so I'm gonna I'm gonna click on API I'm going to create a new folder and I'm going to call it suggestion okay now inside of suggestion I'm going to create a file called root.ts okay and from our example before you can simply copy that if you want to use it as a starter template and paste it in if you want okay now I'm going to delete that old hello folder because we don't need that route okay don't get confused as well that is inside of there so API forward slash suggestion now we've got the that route as a fully functional thing okay so the next thing we're going to need to do is we're going to go ahead and set up what we need essentially to go ahead and eventually now we're going to use our API so imagine our app is going to communicate to our API and then our API is going to go ahead and make a request to an Azure function which is going to then be responsible for essentially going ahead and doing the chat GPT the open AI the dally stuff and then it returns to our API and returns to our app okay so that's essentially the flow that we're following in today's video so what I want you to do is go ahead and say the following so we're going to have a little bit of a pseudocode for now as well we're going to say const response equals and here we're going to say await fetch okay and here we're just going to say um dot dot dot for now okay so it's not going to work for now right so just ignore it and then we're going to do a comma and here we can actually add in caching rules as well right so we're going to say this is going to have a caching Rule and we're not going to be caching right now so we're going to say no store that means every single time we make the request I wanted to get a new suggestion I don't want it to use a cached previous value right guys we just passed over 300 likes let's go that is what I'm talking about keep the energy high that is amazing let's go to 400 500 000 oh my God it reminds me of the chat GPT board we blew up that build it was incredible right now once you've created our as your endpoint so this will eventually connect two I'll connect to our Microsoft Azure um function endpoint okay once it's done that we're gonna basically replace that there then we're going to go ahead and once the response comes back I'm gonna pass the data by saying context text a equals await response dot text okay so you might be like oh that's different because we're going to use blobs and text today so yeah it is a new and then eventually we're going to return the following we're going to say Json stringify text Dot Text data and then we're going to trim it as well in case it has any extra characters okay so very simple very straightforward and you can even go ahead and add in the status 200 if you want to be super explicit about it as well thank you so much to Adamo he just dropped a 10 donation I appreciate you so much thank you so much for tuning in you've been awesome man and yeah I do not take that for granted so I appreciate you thank you so much so you can see this is pretty awesome right now we have this so this means that firstly we need to connect to this okay so let's get that part done and then we're going to create our Microsoft Azure function and we're going to create the entire flow for the suggestion then we're going to repeat this entire process to get it working for the image generation part all right so we're going to move pretty we're going to move today right so at this point we're doing a very good Pace right now so we have our base template for our route so inside of our application and this also protects you against things like cores and all that kind of stuff because you're making the API request internally which then goes outbound so it's kind of a more secure way to do it okay and a lot of people saying how much does the zero cost and that kind of thing well firstly you get 200 on your first sign up which is incredible you got loads of different like kind of free credits to test things out and for the most popular services like Azure functions Azure storage which you're going to be using today the blob storage you actually get the first 12 months free so this is a prime time to go ahead and do what I'm doing download the source code for free AKA dot ms4 Sunny first link in the description and then go ahead and use the Microsoft Azure Services as much as you can in a year benefit from them put them on your resume that you can use them all that kind of stuff and then go ahead and go for it and keep up with them if you want to after a year okay so we have this looking pretty decent I'm gonna go into my component The Prompt input and at this point we are going to make that request I'm talking about previously Okay so when I create I need a suggestion now okay so that suggestion is going to come from okay so this is where we're gonna use use SWR okay so firstly let's create a little uh utility Library sort of helper folder to help us out with a few things so at the package.json level I'm going to create a lib photo okay and this is basically like you know for for any kind of helper stuff and inside of my lib folder I'm going to create a get suggestion for a fetch suggestion from chat GPT file right so this has got a function inside of it so I'm going to create a function inside fetch suggestion from chatgpt.ts okay and inside of it I'm simply going to have an arrow function and it's going to have the name of that file and it's going to go ahead and do something and then it's going to export default fetch suggestion from chat GPT right so we're kind of keeping a nice clean photo structure here now what I'm going to do here is I'm going to fetch from that URL that we just created so it's going to be forward slash API because it's already on our own host Network and then we're going to go ahead and say the for the second argument it's going to say cash no store because again I do not want to Cache these values okay so I do not want to Cache them now after that's done I want to pass the response now if you remember what we were actually doing from that route is we were Jason stringifying it so I want to pass it afterwards right so when it comes back to us I need to then go ahead and say res so I get the response and res dot jsonnet okay so res dot Json so we pass it right now with that done we actually have our um our patch statement now what we can do is typically you would have to store this in a variable and return it but you don't even need to do that if you actually know what you're doing with es6 functions so if we only have one line of code in this case this can be considered one line of code because it's one chained command we can actually get rid of the curly braces and we can get rid of this and essentially what we're doing is we're putting it inside of a parenthesis which means return okay but we don't need the parentheses and now what you can see is what we have here is a implicit return so this is implicitly returning when we call this so it's fetching it's returning a promise so you can see it's returning a promise okay so this will return these suggestions so now this will connect to our API great stuff so we've got a helper function down and now what we're going to do is create the actual functionality on this side so instead of doing it the normal you know create a piece of State have a maybe a use effect that kind of thing I'm going to be using use SWR because it's a great way to do things in the fetching and caching space so in order to get this right what I want you to do is head over to let me go ahead and just pop this over here for now head over to the following and type in use SWR now on the use SWR website you'll see react hooks for data fetching now bear in mind these need to be working on client components because they require State okay so in order to get this started we're going to click on get started and we're going to use npm we're going to install it so npm is WR okay so head over to your app command J to pull up your terminal and I need you to go ahead and do npmi SWR guys the likes are flying in all right thank you so much this is incredible this is awesome all right somebody says we need a react testing uh videos okay I got you I got you all right so we've done this now so npm I SWR and then what I want you to do is you can check this out but essentially you have this pattern where you have a fetcher which we've already created right we've already created the fetch suggestion from chat GPT Helper and then we're just going to integrate it like so and what's really good about this is you can see it gives you a few different options when you do this you basically are fetching the stuff and you're adding it to a cached value so in this case this could be whatever key you want and it caches it then it'll give you the data and also give you a loading so while it's fetching it you'll have a parameter to go ahead and check again so am I loading the data yeah was there an error you know that kind of stuff which is really really handy okay so now what I can do as I can go ahead and say const and I can say data error is loading so basically the line that we saw previously and then I can say use SWR SWR okay and then I can pop in the following so here what we have is you can have you firstly this is a key value this could be ABC it does not matter it doesn't even need to be forward slash but what we tend to do is set the key to be something like four slash API for suggestion so that way you directly know that it's the cache key value for that API call okay and then we're going to go ahead and say fetch fetch suggestion from chat GPT right now after this I want you to go ahead and first we need to import this from use SWR so we stop getting the error so let's go ahead and do that right now and then after that the third argument I need you to do is type in revalidate on Focus false if we do how if we don't do this what happens is every time we click back onto the screen after we focus out it's actually going to trigger that call again because it's like you left the screen now you've come back and I need to refresh the information so we're explicitly telling it no no you don't need to refresh the information you're good don't stress right so that's why we're actually going to go ahead and do it that way I'm just going to decrease my brightness there we go cool so at this point I think we're all enjoying this right now absolutely smashing it this is incredible quick little water break before we carry on almost at 400 likes let's go guys if you're watching a replay right now remember just drop a comment download that free source code by filling out the Microsoft form and yeah do your thing okay let's carry on so blade says can I use SWR instead of fashion date with these effect yes it's actually very good practice to do so as well so now this will go ahead and fetch here for the data and it will probably error out because um remember we are we don't actually have our Azure function up yet so it's kind of pointing to that like dot dot dot which doesn't do anything okay so at this point we are going to have the data being a chord so in this case where was it uh we're going to rename the data to suggestions so let's go here rename it to suggestion okay that's going to be a suggestion that comes back and then we've got his loading and then you can also have a few other things about for this build I don't need the error itself I just need this loading and you also get another one called um is a mutate and you get is validating he's validating is when we're actually sort of refreshing the cache this video is validating and seeing if it's expired or not a mutate is when you want to go ahead and manually call it yourself so that way it goes ahead and actually manually calls this again and it's really handy because you can do optimistic updates and things like that so I'll explain what all that is in a second as well teacher says you're doing an awesome thing to inspire from you uh to do something for this stuff so thank you dude I appreciate you man um so now at this point we've got this in so what I want you to do is uh we're actually going to go ahead and I think I think really what we should do here is create the endpoint because we're kind of at a halt because it's not going to be calling anything so right now just for context this is calling our API suggestion endpoint this then makes a request to a non-existent Microsoft Azure function endpoint which we are going to create right now okay so let's go ahead and do that so this brings us to Microsoft Azure hey all right so Microsoft Azure is a huge Suite of tools right they have everything that you can possibly think of in the tech space they have a service for it including a new open AI um uh Azure function which I'm really eager to use but you actually need to waitlist for it so I'm working with the team right now to get on that wait list so that way I can build a video to show you it right but in the meantime I created a function myself that does the exact same thing okay so I'm going to show you how we do it so first things first I need you to go ahead and create an account at azure so I've got actually a nice little link to show you so firstly if you head over to the following right now so if I show you this right here so if you head over to Azure azure.microsoft.com you'll get to this point building in the car when there's your free account now it is free to create this right so don't stress you don't need any major money or anything like that and remember you get 12 months worth of free access to the most popular 55 services or something right so if you click on this you actually get access to all of these things so so you get access to all these services so I think it's one two three four five six and they're even always free for these things as well so it's absolutely amazing right um now once that's done you actually also get 200 worth of free credit so it's a huge amount of credit to actually do the coding that we're going to do and I always get a pushback from this so all you need to do is sign up all right so sign up connect your account do all that kind of stuff so once you're done with that all right cooperate okay what's up uh so after that you're gonna sign in okay so I've already done this right and again if don't freak out if I was asking you know you need to give in your details and that kind of thing it's Microsoft it's safe right trust me I've done it myself for create an account so in this case once you have the account you'll reach this screen okay now this screen can be a little bit scary if you're not used to this so don't stress I'm going to break it down as well well what I want you to do is firstly go ahead and you can see we've got different Services the ones that we're going to be interested in is the function app the function app is going to be for cloud functions right so right now I have the test app which is the one that I just built previously to demonstrate the storage account is to store all of the images from our art gallery so everything you see there here that's being stored is going to be inside of storage accounts and they're stored as blobs right so these are all just blobs being stored on Microsoft and it's great for storing multimedia files images videos anything like that it's a really awesome way to do it okay and then we've got the Azure function which is going to handle all of our communication and remember it scales amazingly it's a Microsoft right it's going to work so one I'm going to do is I'm going to show you how we can actually set this up from our code itself right so yes I said that our code itself so what I've actually done here is simplify the steps to do all of this stuff so I'm actually just trying to find a little note that I did for this to go ahead and make it a little bit easier for you so what we do is we're basically going to go ahead and close everything here and then the package Json level I'm going to create a new folder called azure okay now inside of azure what we're going to do is you see it's an empty folder okay so I've installed the Azure function extension right so make sure you've got this function extension so as your function now once you've got this you can do really cool things such as you firstly you can see all of your stuff over here so all of your resources you can access your subscription and see all of your different things like your function your storage accounts everything all from a vs code which is actually really powerful right so I can see all of the deployed functions I can see my containers all that kind of stuff yeah and don't worry it's just because it's something new it can be a bit scary but I promise you it's really really powerful okay so at this point I want you to go ahead and do command shift p and type in Azure and type in create a function right so create function and you can see here create function app right so the first thing we want to do is create a function app in Azure so click on create function and then we need to create a name for our new function app so here what I'm going to type in and you can see it's one of three steps so I'm going to type in the following say Microsoft I'm gonna say Microsoft um AI let's just type in AI image generator AI image generator YouTube app okay and I think I'm not allowed these characters to be honest with you all right so I think I'm maybe let's just try it let's do AI image generator YouTube app okay so that makes it very easy for you guys click enter and you can see select a runtime stack so in this case you can see I used uh node.js 18 right so I'm going to be using node.js 18 but you can see they also support Python and all that good stuff as well so I'm going to go back to that previous step I'm going to type in node.js out uh this one here so I'm going to go down to node.js hit enter right then select the location for where you want to deploy it so you have lots of different locations I'm simply going to do the US for now right so as you can see it's creating a function app right so this is very simple to do so this creates the function app on the back end right and if you haven't logged in it would have prompted you to log in and so forth okay so you would have had to log in at that point if you haven't already now what it's doing is it's creating a function app for us so if inside of here what we'll find if we hit refresh shortly this will be created and as you can see we've got the Azure activity log and this will go ahead and do it for us okay so this is what I really like about this extension is that you can actually do it all from vs code which is very refreshing because you never have to leave they've done a really nice integration with all that stuff okay so um as you can see it's step five of six so it's almost done let's see if we refresh now is it there not yep okay it will be there in a second create new function app there is six out of six give it a second and it will go ahead and create the function now the function app think of it as like the house for your Cloud functions right so that one function app can have several different endpoints in once we've gone ahead and get everything set up right okay and um again if you do get stopped remember you can get the Microsoft the source code in the first link in the description and I have got all of the Azure so inside of here all of the the source code for it so if you get stuck right now you can feel free to check that out use it as reference as you're watching this video and kind of make way with things right so um really really gonna help you out so there you go we've created the function app so let's go back here and click on the refresh button so I think here let's go over here and I'm in my correct account and I'm just going to click on function app and we should see it let's go over here actually and just see maybe I'm in the wrong application on being silly let's go down to Azure and I can see function app and as you can see AI image generator app so maybe it's just not propagating here there you go okay so you just need took a second to refresh and you can see this is the one I had previously this is the new one that where we're starting everything off so if I click into it you can see I've got really a huge amount of control over this entire Cloud function and it can be scary but don't worry it's actually really awesome to have this amount of power behind it right so from here I'm going to make it easy don't worry it's actually a lot simpler than you think so we've got our function app created so I'm going to go ahead and type in command shift p and then I'm going to type in Azure create function but it's easy we've got credit function app in Azure create function all this kind of stuff so now what I want to do is go ahead and create a function itself okay so now what I do is I go to uh create function and as you can see I've got this so create new project select a folder that will function that will contain your function project so I'm going to click on browse and then what I want you to do is Click into a0 right so click into azer and simply click select right so that means we're basically putting the entire function code into Azure which is neeta I like that I prefer that okay now with that done we are going to choose our language so I'm pretty sure I did typescript yeah I did do I did JavaScript okay but you can actually do whatever you want in this case fine for now for the demo sake I'm going to do JavaScript but you can do typescript see if sharp python anything that you want so JavaScript for the essentially you think of this as your back end round you can have a separate project for this even but I'm just doing it in one place so JavaScript and we're going to use model V4 right so we're using the latest and greatest like I always been daring a bit right now how do you run your Cloud function there's loads of ways right I want a endpoint that eventually I can just call and it can be a get request post request anything like that and you've also got all these other things like timers event grids all this incredible stuff even if you have a blob storage trick which means that when I add data to my storage containers it will trigger the functions you can do lots of stuff but in this case I'm just simply going to do HTTP trigger and we need to give it a name and here what I'm going to do is I'm going to say the first one is going to be get chat GPT suggestion dot JS okay we don't need JS as well get chat GPT suggestion okay hit enter and this will go ahead and create just a new project so now if I open up my Azure you can see we've got our own git ignore we've got our node modules inside of there so essentially we've got another wrap inside okay and as you can see we've got our source code and if I click into that you can see oh this song is a banger right and as you can see we've got the uh all the code to get things up and running so you've got app.http and then it's got the um getchat GPT suggestion which is working perfect and then you can say is it a get post is it a delete put update all that kind of in this case it's just a get request we've got auth level Anonymous but this can actually be like you can have a special admin only can you know access this we're going to do Anonymous all right because Anonymous is basically we want to allow anyone who comes onto the website to just get a chat GPT suggestion right and then we can basically do all of our core clever stuff here so let's click on Save and now we've got everything looking pretty decent and uh I want to run this locally right so how do I get this up and running firstly you want to code it locally and then you want to deploy it and then you want to change your URLs and all that good stuff okay so now what I'm going to do is inside of my output over here so remember the first terminal is running my app okay the second terminal is going to CD into Azure so now I'm in my Azure photo now inside of here what I can do is but as long as I've got the Azure um functions core CLI tools and installed so these are the these are the tools that you're going to need at this point work with the Azure functions core CLI tools right so all you need to do is go down to your operating system so if your windows Mac and so forth and then simply install this I've already installed this and I've actually ran these commands right so in this case now I can run things like Azure commands in my terminal so if you don't have that or you want to make life a little bit easier you go to package.json and you can see it start okay so very simple now here you can see if we're using package lock so we're using npm so I can simply write an npm run star or npm Star even works and what this will do guys is it will say Port Samsung okay so I've actually got this running already on another app so I need to cut that up let me kill that up quickly I completely forgot that I had another app running um so I've killed that last app and let's do it again so npm run stop and as you can see Azure function core tools right and the arrow has occurred unable to resolve storage um name storage okay so we need to create a storage uh container as well so let's go over here and let's just double check our setup firstly so we actually need to set up our storage container as well which I actually forgot about um so let's go over here let's go to our function and I want to go to home and I'm going to create a new resource now in fact I think we can even do this from the uh from this side so if we type in azure storage I believe it was it's a attached storage account create blob container create storage account we're going to create a storage account okay create storage account and then here I'm going to create my storage account now here we're going to type in like AI image generator oh we can only contain those okay AI um AI let's just call the AI image lowercase letters and numbers okay so let's just call it a image oh my God image generator just make it easy Right image generator storage okay and then we're going to hit on enter and then you can see where do we want to put it East 2s is fine so this is creating a storage account for us and this will be responsible for having all of our storage for our application okay so heading over back to our application now if we go to our function app right here so you can see recent uh you can actually start playing around with a lot of this stuff and go down and you know do all your kind of things and bits Bobs um I want to go to I forgot what it was now okay so let's go back let's just wait until it's done and I'll show you how we do it there we go so let that do its thing so it's creating the final account cool then what I want to do is command shift p and I'm going to say Azure storage and then we're going to say attach storage account right so as original we don't need to attach it sorry my bad so let's try and do our deployment again so let's try and run this again I think we may be missing something very minor here but let's do it again and um I think it's because actually what I've done here so we've got this for creation let's actually get rid of this and let's go ahead and just say hello World hit save and let's run it again npm one start okay so okay okay what have I got my Azure storage let me just see one second host uh extension blah blah and we've got this in fact one thing I need to check as well that I'm using the correct version of node so here actually you want to type in MVM so you need to install something called MVM um which is your node version manager so I recommend everyone gets this even when for your production side of things or for you know whatever you're doing but MVM allows us to dynamically switch between node versioning systems so we remember we set this up with uh node version 18 so check out this documentation install it update it that kind of thing you can simply run this command and it'll work for you I'm gonna just go over here and I'm going to type in NVM LS and it will tell me what you see you see I'm on the wrong version of node I need to be on version 18. and it's per terminal as well okay so I'm going to type in MVM and if you don't have it you can just say hey install 18 and then once you've done that you say use ATM so now I'm now using you'll see in a second it will say you're using now using node version so there we go NVM LS you see now I'm using version 18. okay so let's try and do it again npm Run start and I think it might still crash out here yeah okay so it's fine I'm interested in a kind of you know put on the primary provider okay that's oh I think it's actually I think I know what I've done wrong um let me just double check something quickly so I've actually messed up here so my Azure webs job storage here so this is actually where I've done silly mistake um so I needed to do I've not got any of my settings I actually need here which is probably the problem that I'm doing so let's go back over so now we're doing a debugging I like this bit okay so we're gonna go to uh I believe it was I don't know I see a mistake previously you've exceeded your API limit no I don't think so um I've got a pretty big I've got my card on here as well so it was let's go to my home let's go ahead and just refresh I just want to see my storage accounts I did have an AI image generator storage there we go it was for the resistance it was we actually already created one yeah let's see then we've got our image generator on YouTube and then we've got functions where is it functions containers so previously in my old app it was um actually yeah I'll tell you what we're gonna do I'm actually going to check out the documentation myself because I'm a little bit confused so I've actually created it already local functions we've already done let's go ahead and do the actual um so I'm using Microsoft Azure storage container right and let's just check out get started and do it ourselves together right so a job storage there you go yeah so quick start into this um we've already done this tutorials we've already done this I just need to connect it and I've completely forgotten how I've done it so node.js let's see for ourselves right so I've kind of done the same mistake here I've already done my storage count and the dark containers all right so in my notes I actually had this quite neatly done um well I've made a silly mistake okay so let's go back to our Microsoft so here in this case we've got a storage function up which is great okay so let's just see all quickly I just want to see everything that I did last time so I have my test app I have my generator app and then previously I had the test app as well what's happened here I think the problem is that you can see I've got my storage app and then I've got my so it should have been connected to be honest with you I think there's just been a bit of a silly connection settings and yeah I know I know we have a connection string but I would have thought it would have been already connected so okay so there's a little trick you can do to pull your settings so you can go ahead and type in Azure um poor or settings sorry settings uh download remote settings app service it will download remote settings for functions let's download the remote settings for our functions and then what you'll find is you can get these ones right so at Sunny test app or AI image generator so we're going to do AI image generator and this should download some settings for us so let it do its thing oh it's because I didn't run it as well of course right so in this case that will take a second so join it override your settings yes and there you go okay so stupid mistake on my end right you actually have to pull it in okay so my mistake when I completely made a silly mistake there so it happens right so command P come on shift p you just have to click on Azure function download remote settings because otherwise what you're trying to do is you're emulating without the correct things to connect to your back end right which makes no sense so now what I'm going to do is npm run stop and we should be able to get past that little hurdle that we were on remember you should be on NVM uh your your node version 18 and then what we should see if everything's gone well we should see a this should start up there we go that's what I wanted to see right so that's the debugging I like doing on live because it's real right it's real you guys see me how I take it out and so forth okay so after all this you can go ahead and see with it's running it right now at localhost 7071 and um yeah so vishan all you needed to do was create the download the remote settings that's the mistake I made okay so um uh there we go we click on this and what we will find is what I'm going to do I'm going to simplify this and show you myself rather because it opened in a completely different screen um we're going to go over to our I have a new new um page and then we pop in you see Hello World so now you can see we've got it and it's the same thing as what we had before except it's literally running on the cloud right but this is emulating it locally so now we can develop locally and then basically do what we need to do so this is perfect this is what I wanted all right so what I'm now going to do is have my app you can close that close that we've got the app and then we've got this endpoint running over here so you can see localhost 7071. so this is great so what now I'm going to do is I have my endpoint so if we go over to my app API root okay and then here what I'm now going to do is basically pop in this so now it's going to make a request to this back end right now what you can do as well is you can say if the environment is a Dev environment do your Local Host otherwise do your production URLs for today's build for Simplicity I'm just going to replace the URLs but that is something that you would do in production you would just say if the environment is you know Dev or production then use this URL otherwise use your local Dev URL it's very easy to do that okay so we've got this down and you can see that this is my logs for running so if we were to go ahead and go full screen you can see if I was to Simply say going back to the function if I type in um hey like hello and hit save what you'll see here is it's going to restart my function over there down here so my running function if I refresh it you'll see that we see uh it should see execute function hello HTTP this is not my logs uh okay so I'll go back to my Azure let me cut this to control C I can cut that off and then go ahead and the npm Run start and I'll show you a few little tricks here so let's let that run and you can see we've got the end points if I refresh you can see it says hello and then you've got your output okay so that's great so at this point now we can start coding out that back end we made it guys we got past that little hurdle right so again it's just practice it's all that good stuff but it's very powerful which is why I really want to put emphasize behind using it so at this point we have our we remember we created that connection to open AI right so what we're going to do is we're going to use that same connection to open AI now so because we're using Azure and we're using a bit of a back-end environment we haven't got our import export statements but instead using traditional require statements so in this case this will go towards my oops we need to go to the lib open AI folder so in this case I'm going to go up a file upper file in fact I need to go up another file and in this case I'm going to go to my lib forward slash fetch suggestion from chat GPT this gives me my open AI um you know what I need to connect to chat GPT and now I'm going to go ahead and say const response so this is the magic part this is basically why I'm going to go ahead and communicate and send a prompt to Jack gbt in the form of like give me a suggestion to create a piece of art for dally so that way it generates it and I'm going to say like you know make it photo realistic 4K this way you can have some real fun right so we're going to get response equals a weight and then we're going to say open AI dot create completion okay and then I'm going to pop in Brackets like so and then here what I do is I pass in a model first right so model and here we have lots of different models right so but I'm going to use the text DaVinci text DaVinci 003 so this is the latest sort of chat GPT 3 or 3.5 string right so in this case I'm not sure which one is but once upt4 comes out I will do a video on it I promise you okay so now what we do is we go to the prompt so it's the exciting part we go to the prompt and then here I say you know what do you want your prompt to be so I've actually created a nice long prompt that you can feel free to go ahead and copy all right so we're not going to use this as a test one we're going to go and say write a random prompt for Dali to generate an image this prompt will be shown to the user including details such as the genre and what type of painting it should be options can include oil painting wall color for a realistic blah blah do not wrap the answer in quotes full stop right because sometimes it was giving me an answer back and they always have these quotes which was a bit annoying the next thing I'll say is give it a Max token so we're going to give it Max tokens of 100 right so that means it's going to return an answer of Max and like kind of 100 tokens and then the temperature is essentially how random or focused you want it to be so this has to be a number between 0 and 2. if it's like 0.2 it's likely to give you the same answer every single time if you did something like two it's a lot more random but it's also not focused so a nice balanced middle ground for me is 0.8 and that's going to give us a really nice answer okay then what I'm going to do is we go ahead and we get it back right so we get the so I'm going to log out something like a function saying now you reach the end of this thing blah blah blah and then what I'm going to say is get the response text back and I'm going to return it in the body so now wait for it guys response text comes back and this is where we at basically get the text from this is what chat GPT will return and we're just saying it's going to return one answer back so you can actually give it an N value I think it was and that will give you basically the number of times like the number of options it should return and then instead of just hello world here I'm simply going to return the response text okay so let's go ahead and rather than hello world now what we should see if it goes ahead and actually does this again so we need to kind of refresh usually when I'm not on the stream it rebuilds it so if it doesn't do that just simply cut the terminal npm Run start again okay or you can actually do function um F5 and if we do that it will attach a debug and it's pretty cool actually right so in this case cannot find the module for fetch suggestions from chat GPT that's fine that's because I've not basically Okay so my import statement is buggered so let me figure out what I've done here wrong so Source functions and then I've made a silly mistake here because in my app I have not I've done it a little bit different um so we've got Azure I'm just going to double check everything now so we've got Azure we've got our source we've got our functions we've got a getcha gbt so in this case I'm going upper level upper level so I think I've gone too far up to be honest with you I think it should have been there yeah so that makes a little bit more sense actually because it's going up level upper level and then we're in the lib folder okay so that's the npm monster and let's see if we get that now okay so um we started another issue so functions JS cannot find module fetch suggestion from chat GPT oh no okay oh my god I've done a city thing no no okay guys I'm so sorry I've done such a stupid mistake right so inside of azure all right I've gone out of my actual Azure folder which you shouldn't do right so I've completely mixed up my context here so inside of azure we're going to create a folder called lib so we're gonna have a lib inside of azure and then here we're going to have an open Ai and then open a openai.ts yeah sorry and inside of here we're gonna have the exact same thing that we did previously except for um it's going to be module exports instead of export default okay that is what you needed to do so I'm I apologize that was my mistake right now the environment variables in this uh basically remember think of azure as a separate app right so you can actually have it in a separate repo if you want but the environment variables for this are actually inside of localsettings.json so here okay so what I want you to do here is actually go ahead and add them in here instead so we're going to add in open AI organization and I'm going to add in the following so I've already got my organization key so I'm going to get it from my environment file down here so where I have environment.local I'm going to click it now and what I'm doing is I'm copying my organization key going back to my local settings and I'm pasting it in as a quote and then I'm doing the same thing for the open AI key okay so what I'm going to do here is basically have the open AI key so let's go ahead and pop it in um open our key these the environment files for um uh what's it called for Azure okay so now I'm going to go ahead and go into my environment local file on my other one so I'm going to do it just so you guys are explicitly clear I'm going to go to my environment local file at the top level click it and then I'm grabbing my secret key the sk1 and I'm going back to my local settings Json and I'm pasting it okay so I'm going to paste that in here so now I've got my secret key in there and my local settings.json so that's good right that's great now what we need to do is remember that's local okay that's locally happening but what we really needed to do now was actually make it um so firstly let's cut this let's go to chat GPT suggestion and the first yes just double check that we're actually getting from where we wanted to get now so inside of open AI um oh my God I made such a stupid mistake earlier wow that is so bad all right so here all right so here I'm gonna do dot dot forward slash lib forward slash open AI there we go all right so do not do what I just did that's very silly uh and then we hit save and now we have our environment files so we should be good to go so let's go and do npm run stock and this will go ahead and hopefully we get past this little issue we were having and there you go okay so let's give it a try now let's gonna go to that end point and we should see a prompt oh okay we got we got an error so what's the error let's have this chase the errors down until we get the correct response so we can see response failure um four two nine so I got rate limited I believe oh no I actually hit the the the quota limit on my my open AI account too many requests okay so I've basically got very limited from chat GPT okay which is fine for now what I can do is because I think our idea is okay so I'm going to swap the keys and the organization to have my other account so my Sunny Sanger account instead because I think my papa react account is it's got half a million views and half a million people are going on that I think I've leaked my key somewhere so basically what I'm doing now is I'm just swapping out my keys so I've got the other keys from My Demo which is fine I can do that so I'm changing out my openai key you don't need to do this because yours will be absolutely fine it's because I am a YouTuber and people love to use what they can try and get their hands on so I'm basically going ahead and swapping out my keys for the other Keys now so I'm basically swapping it in my local file my local settings.json file and then that's it we can go ahead and change it in just a short second so I'm almost done okay so now I've hidden everything that I needed to do and we're good okay so I've swapped down and I'm gonna close this out and let's try again so this one shouldn't get rate limited so npm run stop if it is you can just have another account and yeah check it if it does get really limited it's because people somehow got access to it I can refresh and let's see if we get yay there we go guys look at that paint a modern abstract oil painting of a tree with vibrant colors and a cloudy Sky if I hit refresh again I'll get a different suggestion create a photo realistic oil painting of a futuristic CSA with a twilight sky so you can feel free to make your prompt whatever you want and it's going to go ahead and create so that is using chat GPT to go ahead and do that now which is awesome and you can see it's returning from that API which means we can build the rest of the front end for the suggestion and then from there it's relatively quick guys there there is then we're gonna move okay so at this point now we've got the the Azure function up and running right so we're going to deploy this afterwards I'll show you how we do a deployments after but for now we go back to prompt input and this one is already making a request on our front end so make sure you don't get confused here inside of app API now we've got this API endpoint so get chat GPT suggestion and then remember from our component we are using use SWR to make a call to our own local API right so now we've this is going to go ahead and pull the data in so this will pull that suggestion in which should work so the way that we can test this is we just simply console log the the suggestion inside of our app okay and what I want you to do here is go over to your app and simply open up your inspector so open up your inspector console log and then refresh and see what we see so in this case you can see undefined I ignore this this is actually for my uh I've got extension working right now so that's fine but here that's my Dev tools react Dev tools kind of breaks a few things for some reason but here you can see that it comes back create a modern abstract thing if I refresh now we can see it will come back after a thing create a 4K abstract model uh modern oil painting awesome so it's working it's pulling in what we needed which is bloody amazing right so now I can proceed to build everything so let's go to something you are awesome and that's what I'm talking about Miami's in the house that's what I'm talking about man we got mine which is international they're actually crazy we've got the US analysis are amazing stuff all right oh God I love you guys it's honestly so cool to be coding with everyone right so now we're gonna go ahead and actually have a submit uh oh no we're going to have a um we're gonna fetch the suggestion right so we're going to show the suggestion here so when we have the placeholder what I'm gonna do is I'm gonna have a curly brackets and I'm going to say if we have the suggestion use that or use enter a prompt okay so now look create an abstract four piece look at that oh that's nice right look at that so if we refresh you'll get a different one create another Snapchat pointing oh there we go that's clean all right that's really nice okay so that's looking good and then what I can also do is I can say if it's loading right and what we're doing is we're actually going to use two different things so it's loading is validating or called a separate points is loading is called initially when the um this call is being made so this one remember that's the cat that's the key cash value you know the name the key for the caching purposes right so in this case that could be ABC for example right if it's loading from the beginning that's going to be that if we mutate or whatever it's going to validate so basically what we're going to say loading is determined by is loading or is validating if any of those are true it's going to go ahead and do it right so what we can do here is basically say for the placeholder if you're loading then we're gonna say something along the lines of so let me get rid of that sorry I'm going to say if it's loading then it'll show that or it will basically jump to suggestion or else hit enter a prompt right but here I'm going to say chat GPT is thinking of a suggestion dot dot dot okay so now look at that chat GPT is thinking of a suggestion bam hit refresh chat is thinking of a suggestion bring it back oh that's just clean all right so nice and it's communicating through our own API with Nexus 13.2 then to an Azure API which does all the hard work and that kind of you know connects to um a dally and open it open air as chat GPT okay so now we're going to implement new suggestion and use a suggestion right or a new suggestion first so firstly new suggestion is fairly easy we just need to go ahead and say call mutate mutate basically means generate a new suggestion or basically mutate means basically execute that again right so if I do attach this to the new suggestions we say on click mutate now watch this if I click it so let that do its thing load if I click new suggestion bam just like that look at that giant robotic goggles yeah last one black and white picture next one rainbow over it next one oh it's just so clean so so clean all right social life is great patient with things that was planned like in the beginning I would knock my monitor over you know what that's what it's about you have to just build resilience and just take your time and and problem solve it right I do it on live stream to help show you guys that it's a normal thing that happens to everyone okay so we've done our suggestion point now we need to do generate and use the suggestion so that actually comes forward when we do the generate image portion of the build okay but what we actually want to do is if I type in here I want the suggestion to show up underneath right so this is actually fairly cool like a nice little cool trick so underneath the form I can say if the person's already typed in so if there's input then I should generate something here and what I want to do is I want to have a P tag and I want to say suggestion and I basically want to Span in a few things so I'm just going to save a bit of time here by popping in the following so I'm basically spanning in a violet bit of text and then it says if it's loading chatty PC otherwise show suggestions so that you see this if I do this but if I get rid of it you see how it's there but the minute the user types in you still see the suggestion because that's really handy right you might not want to lose the suggestion like a visibility so that's great so that's a nice little cool trick if you want to do that so let me say italic panning on the top of two planning on the left of two and I want the font to be light so it's like super crisp right and then if I type in you see that suggestion Asana is 4K apps it's just so nice I really like it yeah so look at that awesome so now let's get on to the interesting part let's do the generation portion okay so let's actually be have the ability to generate an image and then actually go ahead and create an image with dally2 and then we're going to upload it to Microsoft Azure the the sort of blob containers so storage containers and then what that means is that we're storing our images using Microsoft storage Service uh in the form of blobs right so we're just busy storing all of our images there and then we're going to be able to pull those images down on the front end and visualize it okay and when we use use SWR we can do lots of neat little tricks to actually make this happen in a really cool manner okay so next step I want you to do is go ahead and we're going to create new endpoints and we might actually just create all the endpoints now to make our life a little bit easier so I want you to open up your API and right now we already have the API suggestion room so make sure you click on API right so you're at that level click new folder Vladimir says sunny is the best one the best teachers thank you so much man I appreciate all of the love thank you so much yeah so here we're going to say get images that's going to be one move and inside of that's going to have root.ts and then we're going to have another one so I'm going to click on API again new folder called generate image right and that's going to have a root.ts in front inside of it as well so that way we've got three different routes right and we're gonna build these out as we need to and so forth okay so they're fairly straightforward to be honest with you so inside the generate image one we're gonna go ahead and do the following so I'm gonna have the same thing that I had with suggestion right so here but now we're gonna have generate image and generate image is going to be a post request so we're not going to support get requests it's going to be a post request okay and what we're actually going to do with the post request is you have to generate something called a next response instead so for the Post request we have to import next response and we're going to change the body of this a little bit more right so firstly we have to go ahead and get the request body so when we generate an image we're going to send a prompt alongside that request so the way we get the body of the request are is we basically say a weight request.json from there an original request and then we get the prompt from it right so the if we do this it basically contains the body and then you can go ahead and get the prompt out of it okay so then what we need to do then afterwards is basically figure out the next bit so here we're going to create a request so we're going to say response equals await Fetch and this is going to be a post request now so wait fetch and this is going to be to forward slash API forward slash generate image okay and this one is going to be a post request and it's going to have content type application Json because we're sending it in the form of application Json and we're going to send the body we're going to stringify the prompt alongside it okay so basically we're sending a Rest Post request to our API mm point which is going to be Azure function and then we're sending the body in the form of a Json object and then we're telling it by setting the header saying you should expect this data in application Json format okay now once that comes back you know we're assuming that we're going to get some response back from this uh we don't actually do much with this response because we actually just the whole purpose is that we upload the image but we're going to pass the text and we're just going to say yep just carry on by saying next response Json text there and then just move forward okay so that's how we do this now we need to create the endpoint on Azure right so you can do it a few ways you can actually use the the sort of you know um what I showed you previously to actually um uh what's it called uh you can do the you can use the command shift p to create new um sort of you know functions but I'll show you an easier way right I actually find a lot easier way than doing that right you can actually just create new files and it works right so in this case we're going to create a generate image file Okay so uh generate image so we're going to go ahead and do a generate image dot JS file and inside of here we need to do a few different things so when we generate images on um uh Azure you can't just go ahead and be a random user and just say hey I want to generate an image right what you have to do is you have to there's different types of authenticating your requests to make sure that they're valid requests so that way we don't just have people just you know destroying the back end now one way of doing this oh Frank's now what is up dude so one way of doing this is we can use something called the SAS token and I believe it's called shared access um service token I think but it's SAS token and this will allow us to have a sort of a limited time access to an uh an object or a back-end service right so we're gonna be able to set this up right now and I'll show you how we can do it all um so we need to make sure that we've got a few different things installed so firstly inside of packages and you can see I don't have any much dependencies installed here I need a few dependencies first the first one I'm going to show you um actually let's just do it now let's go ahead and say and I just want to check if I actually did end up using something here but I think I used I don't think I used it in the end but I just want to double check something yes I did use that okay so in that case that's fine okay so I'm gonna go into my um I'm gonna create another terminal so I've got three terminals now one running the front end one running the back end I'm gonna CD into Azure to make sure I'm in the correct directory because that's got its own node modules and package.json and then what I want to do is npm install and I need to install a few different dependencies so the ones I need to install are if I go to my package.json it's going to be uh storage blob from Azure so as dual storage blobs npmi Azure storage blob and I'm also going to install axios and I'm also going to install openai on the back end so Azure storage blob axios and open AI so we install that now let's go ahead and add these two our dependency train you should see that this will update so we should have the new dependencies inside of it so there we go we've now got our dependencies inside we can go ahead and close that off so inside of here that's good and then what I need you to do is go into your lib folder so the lib folder we're going to create a helper here which is going to allow us to generate one of those tokens I was talking about because that's very important if we don't have the ability to generate the token then we could just set it to Anonymous access but I don't want to do that I want to make it quite a nice clean approach to this right so um inside of your localsettings.json I just want to showcase something so you have something called a account name an account key or we might have account name or Kanki I don't think I'll set up correctly yeah um I'll show you how we can get that now so the account name and account key okay I remember this one so I don't have not forgotten all right so in this case if we're going to go to our um function so where is our storage account storage accounts and then we've got two here um which one was I using so I believe the one that we need is part of the resource tube that we were using and there's this one visual YouTube hey showing okay anyway let's just go to image generator storage AI images or God's sake myself to it in there so you don't do what I do and get yourself confused but here we can check it out by saying account name is AI imager and then the key is there as well so we can use that actually to do it so I believe that is the key um yeah so that is the key so you've actually got the key here so everything up to the colon asks the equals that's the key so we have the sort of that plus blah blah blah but I'll show you from the back end how we can get it yeah so if you go into AI image generator which is my one and then you go into your where is it going Keys key access keys I believe it was here and then you've got your key here I just want to check if that is my actual key or not because I don't know if that was the one that I used so I'm just double checking something guys that is the key and that is the storage name yep so there's the key okay so what I want you to do is click on show copy this key right so that's the key that you're going to need and that key is also here right so you can then what I want to do is I'm going to make life a little bit easier and I'm going to create another a variable called account key and I'm gonna simply pop in my key so here I'm going to pop in a key value so I'm going to just pop in the Square let's do another cycle one here afterwards I can't name is going to be my account name so this one here and then we pop that in okay so now I've got the same thing hit re close and then what we can do is we've got the key in place so we head back over to Azure we head back over to our Live library at library library that means they generate SAS token dot JavaScript okay now with this we're going to go ahead and actually everyone's mad focused so we've got the token there so now with this I need to go ahead and get things set up so first I'm going to need a bunch of dependencies from uh storage right so now we're inside of our Azure lib folder we're going to need these then I'm going to need a few different things so I'm going to need the account name I'm going to need the account key and I'm gonna need the container name all right and what we can do here I believe because we can say a storage Azure storage create containers you see create blob container create storage account so I want to create a blob container so I'm going to do command shift p I just went down there create blob container and then you can see we've got all of these so the one that I'm doing is AI image generator so this middle one I'm going to hit enter then we have to give it a name so here I'm going to say images is the name of my blob container this will now create me a blob container with images name and that means I can store all of my images inside of this container and I actually have a really nice diagram to show you that visualizes this right so I want to kind of uh show you this so that way it kind of helps you guys out a little bit so this one is this will actually help you out a little bit so let me see if I can get this up so it's here right so you can see this is essentially how we visualize a container so you have your account which is basically like my account I've logged into then you've got your container so in this case we're going to have images right so this one the pictures we're going to call images then you have the blobs the blobs are all the files so this is how you essentially are going to store all of your stuff right so this is how basically we use the Microsoft uh storage service right Solano says thanks to me thanks to another YouTube I'm proud to be sitting behind a high-end sale watching incredible that's awesome man I'm proud of you thank you okay so that's actually gone ahead and I believe done that um I think that has done it create storage account we can actually check ourselves by going into Azure go into our container apps storage account sorry and then inside of storage carts you've got your AI image generator you've got your blob containers and we should see images here images there we go nice awesome so in this case it's empty right that's that's exactly what we wanted to see it's empty and then now what we can do is we can set up our access keys right so the first one is you need something called a share the key credential and I'm just going to go ahead and explain these as we pop them in so you use this instance Creator here and you pass in your account name and your account key this gives us a key credential to go ahead and log into the account then we need to go ahead and create a blob service client and this allows us to connect to that blob account and what we're doing here is we use our account name this is a special URL and it's very easy right it's just your account name Dot blobcorewindows.net and then use your key credential to access it so this is basically this object allows us to go into what we need to do and access it and do what we need right and then we're going to go ahead and create the generator the generate the SAS token so here are the async function generate SAS token and from here what I'm going to do is firstly I'm going to get the container right so here we have the blob service plan which connects to the actual Microsoft storage blob service right with our credentials then I need to connect to the images container so I say get container client container name is already images so basically this is now connected to my images container okay now what I need to do is generate some permissions so what I say is I'm going to create some permissions for my SAS token I'm going to give it write create and read access to be true okay so fairly straightforward yeah then I'm going to set an expiration date and I'm going to say it's only going to be valid this token for 30 minutes so what I do is I set a new date which is now and then I set the minutes to the current minutes plus 30 so that's 30 minutes from now and then what we do is we create a token from that okay so this token command I'm just going to go ahead and pop in and show you so this is basically we generate blob SAS right and you basically pass in some query parameters so we're based in the container name the permissions to shrink and the expiry date and then we pass in the key credentials that way it allows us to or like in a secure manner generate this SAS token then we can go ahead and say return SAS token like so and then this is going to be our utility function that's basically going to be really handy when we're trying to do any interaction with our storage container so then we export it so that way we can use this nice little handy function so all the complexity is kind of stored in here in this file we do it once it's done right so trust me it seems long but it's not and once you've done that it's actually done it's it's really not passed out and again if you do get stuck at any point remember that code can be quite granular make sure you go ahead and head over to the following URL AKA dot Ms forward slash Sunny go ahead and you'll see this form fill out your first name surname email a country and Company if you're a company if you don't have a company just put your name so either just put an A or your name it doesn't matter and then click submit don't click skip right it actually supports the Bob fam if you just click submit right I don't click skip okay actually submit that form and then you can go ahead and get the GitHub repo and once you're in that repo you can see the code such as the Azure code and then you can actually go ahead and code alongside me right so if you do get stuck at you know what did you write again what did he what did he do that I didn't do that might help you out and that's free okay so that's to help you out all I ask is that you fill out that form and submit it right that's all we ask alright so at that point now we go over to our uh generate SS tokens this is our nice handy function so now we can do our cool sort of back-end magic so we're going to create a we're going to pause from the generate image and we're going to create another function called generate SAS token.js and for now I'm actually going to just temporarily delete generate image webs that way I can actually go ahead and actually work on some stuff now I'm gonna do the following so where we basically had the previous same layout exact same layout but I'm going to do it for the generate SAS token so what I'm doing here is I'm importing the app right so from Azure functions I am now generating the SAS token I'm pulling in that helper function that we just created I am naming the new Azure function generate SAS token it's going to be a get function it's only going to allow get request to it the auth level is anonymous which means anyone can then go ahead and create a SRS token right and obviously you can you can restrict it as much as you want and so forth but that token will only be valid for 30 minutes so it's someone acts is creating these tokens that you can then access and so forth then we're going to go ahead and say oh wait Genera wait generate SAS token and then it Returns the token okay so let's see what all of this actually did right so in this case if I cut my server on the Azure um and then the npm around start or the same command yep npm one stop and then you can see now what we should find is this will hopefully not error out and it'll give us two URLs there we go we've got the first one which was for generating oh the second one generating the chat GPT suggestion and the second one for generating the SAS token so if I go over here now and I basically paste in that command what we should see is that that is a perfectly valid SAS token that's perfect you should see SV equals and then a bunch of stuff and if we refresh it we get another token and so forth that's great now we've got our SES token we can do certain things with it okay so you can use that function whenever you need it now what I'm going to do is I'm going to go into my generate image function and now we can begin to interact with the back end in the way that we need to okay so you can either make a call to your own Azure Cloud function so that's just a very handy way of having a cloud function that can do that if you if you I think we don't even actually properly use that separate endpoint but it's handy to have it if you want to do that okay but in this case I'm going to go ahead and do generate image again to generate image oops no don't do that generate image.js make sure it's a Javascript file okay and Pat peachy yes this Tech combo is crazy and I know it's crazy yeah so at this point now I'm gonna do a few in uh dependency pools right so I'm going to pull a bunch of dependencies I need so open AI axios generate SES token and then I'm gonna have the same similar constraints I had previously so I've got my blob service client because I'm going to connect to a storage service my account name and the container name okay then I'm going to do a AP app.http so HTTP request generate image is the name of the cloud function that we're going to do and then you've got the actual body of the function okay now for the methods it's only going to be a post request that we're accepting okay the auth levels are going to be anonymous and then we're going to have a Handler right so in this case you've got your async Handler we don't need the context object right now that's fine so how do I get the body of the ha the request coming in from the so imagine we send a post request to the Azure function how do I get it well we basically just do a weight request Json and we destructure it from the response that comes back because this will give us the body and then we just destructured to get the body.prompt right so this gives us the prompt back then what I'm going to do is just for debugging purposes I can do something very easily just say you know The Prompt is a prompt so showing the the sort of server side right the locks right so once you've got that done now what I'm going to do is you can I'm going to communicate to dally so the way we do this is we use the open AI instance that we previously set up and all we just do is we open AI dot create image and this will actually communicate to dally and it will go ahead and we can pass in our prompt how many images we want to create and the size of the images and then it will return us an actual image URL now you can use that image URL but I'm going to show you a bunch of different ways as to how you can I'm going to download the image URL that it gives us and basically store the actual image in storage in um in Microsoft Azure just to demonstrate how you can actually store the images or you could if you wanted just store the text URL it's completely up to you but I want to store the actual image right because imagine for whatever reason you know the open AI service went down because they're under huge demand I want to know that I've got the image on my Azure server right so we've got that so I'm going to go and say construct response equals a weight open AI I am using a typescript dude I'm only using JavaScript in Azure right now just because I didn't realize I've done the Azure section in JavaScript but yes you I'm using typescript in the next.js portion of this pod so we do dot create image and then you've got all of them look how many you've got create image you've got a variations all this kind of cool stuff as well and we've got the prompt so the first thing we're going to say is the prompt is going to be the prompt that we destructured from the post request the second one is n now n tells them like how many results do you want to if you want 10 images you can do 10 I only want one which is fine and then we can say size and now the size only has three options so we're going to do the biggest size to get the highest resolution possible from this okay and then what we can do is we can get the image back from the response now the image comes back in a bit of a nested fashion so it comes back from response.data.data and then you've got you know how many responses that came back in this case we only have n equals one so we only have one item left in there so we do get the URL of that image and then what I want to do is I want to download the image but I want to tell it that the response type that it comes back with is something known as an array buffer now an array buffer is basically a way of representing an image in like a blob fashion right so in this case it's just going to be a buffer of that comes back and it's representing your image and it's basically a PNG representation of it right so here now what we do is we say constras equals axios you can do it with a fetch but I'm Just Doing exercise I don't think fetch was supported that's right on it so you did axios.gap we do image URL and then response type is an array buffer okay now we can go and say const array buffer equals oops array buffer equals res dot data and this basically gives us back an image right so this is literally giving us back an image encoded in a blob format and then we can basically need to upload this now so in the array buffer we have the image we actually have downloaded the image and we've got a we've returned it as an array buffer so here I'll just add a little comment so it helps you out all right so we actually get the image array buffer has the image inside of it now what I need to do is connect to my blob instance but I'm going to use the token that we basically generate so you can make a call to your own API service or you can just use a utility service that we made previously made to generate them so SAS token equals a weight generator SOS token from our util so this one or you can make a request your own as your function if you want right if you end up depending on it a lot but you can do const blob service client equals and we basically what we do is we we append it on as a query param so basically you say this https let's say account name blob call windows.net and then you append it as a query param so it's SAS token is basically at the end of it so that SV equals blah blah that is where it goes ahead and gets attached to okay so the alarm from Kenya what's up dude good to see you in the house and uh I'm just curious how many are we always have fun tonight let's go guys Smash It guys let's go up against if you're watching this and you're enjoying it just hit the thumbs up button push this video to as many people as you can right so at this point blob service client is down then we're going to go ahead and get a container client so remember we've got the access to the storage we now need to get access to the container so the image container and then we generate a timestamp okay and a file name so in this case I'm going to give it a file name and a timestamp so what I've done here is I've done the current time so in the Unix sort of timestamp and then I've created a name which is basically the prompt underscore the timestamp and the reason why I've done this is because just from the file name later on I want to know and I'll be able to order it on the back end when I'm fetching the images which images came first and I can use that underscore to split the string and basically figure out the timestamp so I don't need to store unnecessary information right so once I've got the file name I basically can go ahead and get the access to I can basically so now I've gone into the Container so images then what I do is I get a blob client which basically says a block blob client so if we imagine what I showed you previously was this diagram so the first layer of access was on this let me just show you again because I think it's very important you understand this portion very clearly so at this point you see the first element of access so at the top so when we did blob service client was this one so you got access to this level then when you get the container client you get access to this level and then when you do block blob level client you can access to this level right because basically you're saying at this file name right so I hope that makes sense right so now you got the file name now once you've got that we're basically going to attempt to upload it and if something goes wrong we're going to error it out and we're going to use a try catch block to do so right so very straightforward we have a try catch Block Level plan upload the client upload data array buffer file will be uploaded successfully on the output if it's all good otherwise it will say well you made an error that was an error there all right so generate image okay now we've got uh this should be up and running at this point so now what we can do is we can go ahead and we can close our term our terminal Azure terminal re-run it and we should see a generate image request okay we should see a generate image request now what I want you to do at this point is download a app called Postman because we want to test out our API right we actually want to go ahead and send a post request not get request a post request to our endpoint so that way we can go ahead and say this is the prompt I want you to now go ahead and do what you said you'll do and upload an image to that image container Okay so so first things first I want to prepare the scene I want to make sure that you guys understand that this is actually working the way that we expect it to so we go to Containers we go over to our images and as you can see here I have no results which is good okay so now what I want to do is I've got my post record you see these ones are get you can run get request in the browser you need a client like Postman to run a post request so if I open up Postman you can see Postman is a free app it's amazing it's really good for all developers to get used to using it and while that loads a quick little water break to help us out let's go ahead and do that if you're enjoying the content remember just smash that like button okay awesome stuff oh we flew over 400 likes after I said that amazing guys get to 500 let's keep pumping that number up wow that just flew off all right so at this point if I dismiss this yeah so that's fine I'm gonna create a new one so a new request I've simply paste in the URLs to generate image and then all I did is I kind of make this a bit bigger yeah generate image let me make it a little bit bigger we change it to a post request and these are all these different options you can have post request and then what we do is we set the body right so body we're gonna do raw and uh I'm just gonna say it's Jason body there we go and then we pass in the um actual body itself so where's my example sorry I think it's um was it here I think of them so prompt and then you can do the following just say um something like uh let's just do a they give me a prompt guys give me a prompt let's just do a space man driving or a Spaceman riding a horse on Mars right so something like that click generate image and let's see what happens so you see it sends request is sending a request right now and as you can see look on the back end it says a prompt is a Spaceman riding a horse on Mars then what it's doing is it's generating the image and then one is doing it all afterwards it will say um if it was all successful say file uploaded successfully so right now this is generating through dally to API an image for us with by providing a prompt once that is done there you go guys if I upload is successfully amazing yes you can see here we should have back in the response now a um so did we return anything back from response I don't think we did much okay anyway so at that point we generate a response so let's see Microsoft Azure so let's go to our images container refresh look at that a space man riding a horse on Mars so let's open it and it says blob and we can actually go ahead and download this image so let's go ahead and download the image and see the image that we actually got I'm gonna go oh wow guys look at this oh look at that that's face man they're riding uh a horse on Mars amazing right so it actually works so that generated uh that that we created it in Azure function a post request and it works right so that used the SAS token it successfully was able to uh verify that the token was valid and then it got through so you can see the authentication method access key is what we're using right the SAS token that's damn cool all right so now you can see we've got an API that does it right so now we can go ahead and connect up the front end and continue the build so now what we want to do is basically have it so when I click on generate or I click on use suggestion use suggestions should pass this prompt to that endpoint generates to suggest whatever I've typed in here so it could be ABCDE whatever click generate and then it should go ahead and make the eggs make this call possible so let's do that right now right so heading over to my code oh my God I'm getting so mixed up with everything so let me go ahead and minimize Postman because we don't need that right now and I'll minimize our demo as well so because we don't need that let's go so at this point we are going to go to our covered up we need to go to our front end again so heading back into our components our prompt input okay so when we go ahead and click on the use suggestion or generate button this is where we need to go ahead and make the magic happen right so prompt input for new suggestion we're going to go ahead and sorry use suggestion we're going to submit a prompt right so in this case so for this one or for this one so let's do generate first so that should just be very simple we should have on click equals submit prompt okay so we're going to create a function here called submit prompt now um let me just go in oh actually what you can do is because this is the type submit button you don't even need to do that here you can actually have the form on submit because that's the submit button you can have a submit prompt right you can also do that right so very straightforward um and then oh sorry handle submit so okay so yeah so this will be handle submit yeah and now what I'm going to do is create a function above it so I'm going to say const handle submit and this one will have a so every sort of a click Handler has an event right so in this case if you don't know the type definition for it nice little trick you do a little arrow here and you hover over and you can see form event HTML form event is that so I copy that pop it in there and then I can remove my handle submit and there you go just like that import the dependency and Bam I have perfect type definitions every time right so either prevent default there we go bam and then I'm going to say await submit prompt so this one will just basically call the other function and then you can do extra stuff here if you want to I'm just making it relatively simple now submit prompt is going to be a function I'm going to create above here so it's a cons submit prompt equals um asynchronous so it's going to be an asynchronous function and this one is also going to have a parameter that we passed through and this is going to be a conditional so it's going to say use it suggestion and it's an optional so we don't need to pass it in and it's a Boolean value okay so if you pass in true it will use the suggestion that was generated if you don't pass in true it will use the input that you would actually put in okay so how do we do this now remember we're disabling the buttons as well if there is no input so it will prevent you from sort of making a mistake so first thing I want to do is create a copy of the input so I say input prompt uh input prompt equals input oops it was input and then what I do is I can clear the input because basically I want the user's um experience to basically the minute they hit generate it should just do that it should clear it right I don't want to load because then what they might do is they might click click click click click click and there's just like a bad user experience right so you want to clear it out right and you can also um console log it if you want I'm not going to do that so in this case that's good and then we can go ahead and say that the if the person has typed in so the text that we're going to send I'm just going to say I call it P so the P represents the prompt right so p is the prompt to send to API right so p is prompted in the API then here what I'm gonna say is if you passed in use suggestion then what you should do is you should say you should go ahead and use the suggestion otherwise what I want you to do is I'm going to go ahead and check um that the import prompt exists or if that doesn't exist no sorry no I'm not I'm completely messed things up so if your suggestion yes that's fine um otherwise it will be input prompt or why did I add that one in suggestion okay I think that's fine for now I think that's good yeah I don't think I need the other one oh no okay actually yeah so if it's because sometimes your input prompt might not be there so in this case okay let's leave it for now if the errors are I can figure it out so then we're going to make a request to the back end so we're going to say res this is where I make the post request to the back end we say await fetch forward slash API forward slash generate image and this is going to be a post method the headers are going to be application Json and the body is going to be stringify the prompt right so it's going to be the P right then when it comes back we're going to get the data I'm gonna get the data as uh Json and then we're just going to Simply say if there was an error you know you're gonna we'll handle this with the notifications afterwards okay um cool yeah so this should do it now what this is doing is firstly it's generating the um the image here so this one is gonna um make a call to our own apis we need to make sure that we've actually got an API endpoint for Generate image that is created which we have yeah so now this will actually be doing is that this post request firstly is not correct this needs to go to the actual um generate image backend that we've created so we need this one to go to uh localhost for now so this one here generate image that'll be no see it's not that one you want if you open up your execution so remember this one so it'll be generate image so here it'll be generate image okay so now what happens is our client makes a request a request to our API in our local API which then pings our Azure function our Azure function then does its thing and then it will come back and it should work okay so let's give this a try right now and let's just see if it works right so generate let's go over to on let me close some of these things because I've got too many things open right now so let's close this close this close this close this close it says make it very simple for you guys to follow me so I'm going to open up my prompt input there we go and um this is good so far yeah so I'm just checking something um so uh we've got this we've got the 110 Jason voila and then um okay submit prompt there we go so at this point when we do API generate image it will make a request to my backend so at this point we should be fine so I'm just going to log out here saying console log input prompt um yeah so we should be able to see it when I submit that way there's some feedback when I inspect so I can just know what's going on so here so so I'm gonna you click on draw a dinosaur in the ocean right click generate see draw a dinosaur in the ocean and then what this would have done was on the network tab this would have actually called generate an image and you can see right now it's the payload was a prompt and you can see it's pending so this is actually executing right now and you can see if we were to look up the back end you can see that it just came back successfully um so let's go down here so file up the prompt is draw a dinosaur in the ocean file uploaded successfully so let's go ahead and head over here refresh and we should have a dinosaur in the ocean so draw a dinosaur in the ocean.png amazing that's what I'm talking about guys that is so so sick I'm almost at 500 left just destroy that like button for the love of God right destroy it so now we've got that pretty good so now we've got the ability to generate images okay and what's really awesome now is that it's very easy to go ahead and where we have our use suggestion button here we just simply say on click um submit prompt uh oops submit prompt true and true would basically represent that you're using the suggestion which means it would use that suggestion output okay which is perfect so in this case now if I was to go ahead and refresh and I go ahead and click on use suggestion now so let's go ahead and do that right now so click on new suggestion what we should see is that it should say it's the prompt is a modern abstract oil painting of a tiger running through a forest so we've actually gone ahead and executed the API and then in a second we should see that file uploaded successfully we've got an error here which was unexpected oh because we're passing some Json which was on which wasn't correctly handled so I need to handle that a little bit better on the front end but for now at least the back end is still pulling in the correct thing so I'm on Snapchat oh there we go nice so the reason why we're getting this error let's dive into it so we've got res dot Json so this is uh y so if we go over to our API so let me just go into our API generate image root so here we are going and saying prompt response dot text text Data that's fine and then inside of prompt input prompt input so prompt input where we get things back data.res.json that's also fine so if the error must be in Azure so when we're pulling let's have a look at azure so when we're returning our text from our generate image function I believe that this is probably where we're making mistakes yeah it is here so we're not returning anything from generate image at the moment in azure and that's the reason why we're getting an issue yep so here we're not returning a body so I made a mistake here so we should be returning a body and here I don't really care I don't want to return the image it's too big I want to do a fetching mechanism on the front end but here we successfully upload the image that's great okay so at this point now we should not get an error because we have something to pass when it comes back okay now the final sort of Step here is generating the images then we can go ahead and do the front end for getting our nice beautiful layout done so I'm going to go ahead and firstly create a Azure function for doing so and this is going to be called get images so let's create the get images function so get images.js as your function and now what I'm going to do is do the appropriate Imports so again very similar to what we previously did and I will show you right now so very similar Imports right so we have all of the the app which we require for any and a cloud function our credentials uh the the dependencies for credentials our SAS token helper account name account key the container name which is images the credential which uses our account name and account key again you can refactor that actually into a separate file if you want to not have repeated code like this blob service client we need over here and we simply pass our account name and the credential to allow us access then we go ahead and create the actual endpoint right so in this case we say app.http get images this is going to be a get method the auth level will be anonymous and then we have our Handler now we do need the actual context here because I believe we do use it and then we have our function like so okay so this one right here is when we're messing up yeah there we go there we go yep so we got the Handler here so for the Handler now I need to basically create a container client connection so that way we've got access already to the service The Blob storage service then we want to get the images container like I've said previously once we have the images container uh Mike says what's up from your Oregon what's up what's that the Oregon sorry Oregon Oregon Oregon oh my God yeah now what we're going to do is we're going to have two things we're going to have one which is the image URLs an empty array and we're going to have a generate an sas token so we can access our back end so what I'm essentially trying to do now as I'm trying to pull all of these right so what I'm about to do is list all of the blobs in this container so each one is a blob so you see block blob right blobs are amazing at a data type for storing media files like images pictures that kind of thing right guys almost at 500 likes as well keep on destroying that like button right so at this point we're going to go ahead and basically make a request to all of these things and get those answers back and then we're basically going to generate a list from this so I'm going to have all these file names as an end result okay so let's go ahead and do that right now so first I say four I'll show you we do four a weight and then we say const blob of we're doing a nice little Loop here saying container client dot list blobs flat right so this returns an async into iterator list all the blobs under a specified account okay this will go ahead and give me all of the blobs back and we are waiting for each one so now what I do with this information is I go ahead and I basically create a URL for each image so basically see I've got the blob name and the SAS token so I can access that image if I don't have the SAS token at the end of the image it's basically going to say you don't have access or permission to view these images because you weren't permitted a SAS token right or if it was after half an hour it would have to generate another token so now what we do is we create a URL now this URL is perfect because that exact URL can be rendered on the front end as a image URL so then what we do is we say image URLs dot push and I basically want to push the URL and the name okay so I want to go ahead and push in the image URL so now at the end of it we have all lists of all the urls but we also have the name because I want to use the name on the front end for the keys okay now what I can then do is I want to sort it because basically what we'll find will happen remember I saw the file name underscore a timestamp.png PNG for the image right the extension so what we're going to now do before we return the or the list of images to the front end I'm going to basically pass those strings so what I'm going to say is the first portion of the string is the file name so I need to basically do some string manipulation and I need to go ahead and say split that string up and give me everything after the underscore okay now after the underscore I have the timestamp I then have the timestamp.png so now I say split everything based on the the dot so dot PNG and give me the first part right so then what I do is I basically have the only the timestamp from the file name then I do something called a sort function which I teach in zero to full stack hero feel free to check it out at Papa react.com and basically what you're going to do is we're going to do a simple sort function which is just going to check the first time stamp against another one and sort the entire list before we return it to the front end okay so now what I'm going to do is I'm going to go ahead and say const sorted image URLs equals image URLs so image urls.sort and basically what you have here is you have your A and B so a is going to be the first item in that list or as you iterate through will be the first element from when you're doing the comparison the second one will be the second element then the third the second cycle will be the second and third third sign could be third and four and so forth right and you'll keep swapping them into it it sorts everything so we're going to say const a name equals and basically remember what I said we're going to split based on all those different things we're going to pop right so the way to the shorthand I've done here is a nice bunch of yeah it's pretty cool right so basically what we're doing is let's imagine we had a file name called um draw a dinosaur all right so draw a giant dinosaur there so that's it let's imagine that's a time stamp right so what it's doing is it's splitting at the underscore so then I have this section and this section in an array then I'm saying pop right so pop is giving me the end result so basically giving me this so at this point after that I basically gotten rid of this bit right so up until here and then I do two strings so up until here is basically getting me this then what I do is I have start split so dot split gives me an array where this is the first element and this is the second element and shift Returns the first element of that array so then I get this so basically now after doing that like kind of you know um that that combination here you're basically going ahead and getting that from the the original uh title way so then we did the same with B name and then all we do is we return B name minus a name and it will start sorting all of those timestamp values right so basically now you're sorting all those images URLs by doing that's a lovely little es6 um uh sorting function if you didn't know how to do it okay so once you've done that we basically I'm just gonna add in something to say like that function was actually processed for this one blah blah blah and then I'm going to return something so now here I'm not going to do a simple return that we were doing before I'm going to say return but in the Json body I'm going to say image URLs are going to be the the key and I'm going to return the sorted image URLs okay there we go papicha says a topic breakdown 100 explained clearly in 04's I trusted review my current career path to get lover since I've joined proper Papito is a student in zero to full stack hero and yeah she's literally saying as is we teach you inside there and all of my students know this kind of stuff the Sorting functions you know I'm talking about in the coaching course so yeah it makes sense here right so definitely if you want to be a part of that awesome Community Check out Papa react.com right so at this point we've got our return so that's great so now I should be able to go ahead and actually access this so let's go ahead and remove that that was from previously so I'm going to close this um Azure function instance and then I'm going to go ahead into npm run stop and that's going to go ahead and hopefully if it all works give me a URL for get images there we go get images so now if I run this this is a get request so I can actually throw this in the browser and I should get all the images back there we go guys look at that that's sick I literally got these back like nice and they've even sorted it based on the order so these are all being sorted on the back end and returned to the front end so that's awesome now we've created our Azure endpoint okay so now we've got the Azure endpoint I now go to my front end and I go over to my app API get images root and you can see we don't have anything here so now what I'm going to do is I'm going to create an API endpoint here for our local side and this is fairly straightforward right so we've got the simple Syntax for an xjs 13.2 which is basically it's going to be a get request that we're supporting here we're going to go ahead and make a get the response and this is going to be on a weight patch okay and this is going to be using making a call to that endpoint that we just went ahead and retrieved which was this one right here so it's get images so over here yes so we're going to go ahead and fetch from there and then we're going to go ahead and say as the second argument we're not caching right so you can optimize this more and you know have caching rules and that but for now I'm making every request be dynamic so it's basically your service I render each time right but you can feel free to optimize as you wish right now remember I returned it back as Json body alright so what I'm going to actually do here is return it as a blob type so this will actually give me about the blob and then what I do is I return the text bag from that blob by doing blob.text and then I pass that so basically I get it back in the form of a blob so it's a lot of like you know data comes back then I pass it then I basically say constator equals Json dot pass the text data and this will give me back a list of URLs okay so then I return it back in the stringified fashion so then I basically go ahead and stringify the data and I return it back with 200 so now I can make a request to my forward slash um yeah I see you I can make a request to my forward slash um API get images and then that will go ahead and actually help me out right so now I can actually go ahead and do this from my front end so let's go to my a lot of people say yo perform I see you I see you so now what we're going to do is go to um I need to create a images component so where are we going to use that I'm going to use this inside of the so where we have our page.tsx right this is where I'm essentially going to be rendering a very simple page in itself it's going to be simply here I'm going to have the main tag and this is going to have a MX margin of zero but on a zero sorry but on the largest medium size screen it's going to have a margin of 10 so margin 10. actually to be honest I think for now we're good let's just imagine and this will render out images and I'm going to create this component now so this component is going to be inside of the components folder so here we're going to have our images dot TSX rfce bam go up here get rid of that and now here is where we do some magic right so I'm going to pull in my images folder from components and we're going to go ahead and do the following so inside of my images firstly it's going to be a client component because I'm going to have a few things like use SWR making calls here so this is going to be a used client component so it's a client component as opposed to a server side component because remember in xjs13 everything is a server side component until you make it a client component so I'm going to import the following and you can see I need a special lib helper here to fetch the images so very simply I go into my files according to app I'm sorry my lib folder where is it lib on the upper level and when we have this similar structure I'm going to do essentially the same thing but basically I'm doing it for um the uh where is it gone fetching images right so basically I'm going to create a new file here called fetchimages.ts and it simply is the same following protocol it just makes a fetch to get images we're not storing the cache or caching data and then it returns me a helper function so we do that then we go back to our images folder and then we can basically go ahead and successfully import that as needed so that is freaking out why um so let's just double check images there we go okay so now that we have our images uh folder good I've got so many files open on my screen my eyes are a bit way or crazy right now um I am going to basically make a pull to those images so we need to go ahead and basically solve the same thing with use SWR so what we do is remember you come get your you get the following from it so we say you get the data which I'm renaming as images you get the is loading stay the mutate State basically just calls this again but I'm renaming it to refresh images because that makes more sense and then we've got is validating right so in this case we've got fetch images being called and then what we're doing is we're caching it as images you can really cache this however you want though you could say if you really wanted to API for slash get images as the URL endpoint right but honestly that doesn't matter too much right but in this case let's just okay we'll do the API endpoint it doesn't make a sense that doesn't make a difference and then I'm going to have a type definition for remember we stored the images and we returned the Mac with a name and URL so I'm creating a type definition I love the chat right now yeah and then inside of the images this is where we can actually go ahead and render them so first things first I need to see if I'm getting images back so let's go ahead and render out the images and see what happens so if we get these images back guys I swear to God I'm gonna lose my mind because it works all right so you go to console and then we get images oh Let me refresh and we've got ignore that image yeah like that look at that oh my God beautiful look at that images the images are coming down so just like that we've created a next.js API okay zero function is connecting to it we're returning all that stuff it's just so powerful like so cool I mean you learn how to use stuff and I'm confident I can make any student at any level get to this level and just be able to build this stuff confidently I am so confident of that that's what we do in here at full stack hero remember if any of this kind of stuff went over your head definitely go to this URL aka.ms Forza Sunny fill in the form click submit not skip click submit and then use the GitHub repo which I've given you for free which has the code inside of it so if you get stuck you can go ahead and debug it yourself and that kind of thing okay um somebody says when I type RFC and you need the es7 Snippets extension if you want to do RFC tricks okay so there we go bam that works so now what we do is we simply have some front-end fun and we go ahead and render this out so let's go ahead and have some fun and render all this information out and I'm actually going to go ahead and bump the music up because this is where we get into our front end coding style uh so we're gonna have a little bit of fun now so first things first we have the div and then this is going to do CSS grid so we're going to have the div and then inside of here we're gonna have another div and here we're going to go ahead and do we've got the images themselves so we're going to say images dot right and we're going to say optional chaining so if it's not yet ready then it's going to go ahead and not crash by by having optional chaining so we're going to say image urls.map and then that could also be undefined and then we're going to say for every single image and each image I'm going to manually cast it to that image type image type sometimes chat um copilot is too aggressive yeah and then I'm going to do implicit return so normal parentheses brackets okay and then here we have a div right and then the div has to have a key when you're mapping through things because otherwise your your re-rendering is crap so do not do that okay so there we go uh then we've got the image Dot name is going to be the key here and inside of your div I'm going to have the image itself right so image for zash and we need to import this image from next year next image which we've already done I'll say see and then we've got the source which is going to be the image URL the alt is going to be um just image name we can do it that's fine the height is going to be 800 so I'm just going to use 800r set value the width is going to be 800. and then the class name I'm going to style my image the width should be full rounded small Corners Shadow should be of a 2XL a drop shadow should be here as well drop shadow large and I want to do a minus Z index of 10 because I want to layer this nice overhaul effect after it's on it right so hit save and what you'll find now is I get a big error okay now this is happening because what remember we're using the next image component and when we use the next image component we need to whitelist the domain that the images are coming from and the reason why I left it to this point is because it I'll show you a little shortcut it actually helps us out so it says you need to add the hostname this right here to your next config so it just saves you a bit of hassle you just literally copy that go back over to your next config and simply add it to your list of white listed domains right so edit bam over there boom right and then because you change your next config you're gonna have to restart your server on the next side right not yours your side you have to restart on the next side so and there we go if we reset that boom and then we go ahead and do our thing and there you go and now we should see images wait for it do we see images wait for it oh oh there we go look at that look at that we've got dinosaurs Tigers let's just oh it's so beautiful I love it all right it's so cool when you see the the stuff that you're trying to do work it's just amazing right now you see it's huge this is not ideal right so I'm going to show you how we can basically perfectly optimize that and get in the right way that we want and we're gonna do this where the magic of a CSS grid okay so Uruguay in the house what's up dude good stuff guys we're almost at 500 likes just destroy that lag button for me please helps share the channel and help share these videos to more developers because just imagine if you're learning something let's try and get this out to as many developers as possible all you have to do is just hit that thumbs up button right so here we're gonna say it should be a grid and then a gap of four should be present right so a gap of four and then basically on a small mobile device you should always be gone that comes one and then what we do is we Step Up The Grid columns as we get to a bigger size so grid columns two uh on a medium size a large screen grid columns a three yeah and then on a extra large screen grid columns four and so forth right so grid columns four and then I think I finished yeah I finished off on a 2XL oops oh God 2XL and this is going to be grid Columns of five there we go yeah and then I'm going to say padding X of zero and on the medium screens of padding X of 10. why it's helping X of 10. so on the mobile view there's no padding and then on the bigger screen it gets bigger so now we hit save and look at this wait for it wait for oh my God look at that oh so beautiful look at that oh it's just lovely when it works that's just silky smooth look at that it works perfect yeah and now what we can do is I actually want the first image to take up like a block over here so I wanted to take up two rows and two columns the first image only and CSS grid is so good at that because we can actually use like you know span too or that kind of logic to get that down so now what I can do is I can say for the div here where we have the key that's because often we can have the class name and I can have some string interpolation here so I can go and do Square curly brackets back ticks and this is going to be relative because we're gonna have a little trick going on in a second I'm going to have a um cursor help when you hover over it yeah that makes sense because I'm gonna do something cool and then I'm gonna have this uh some JavaScript now here what I'm going to say I'm gonna say is the index so basically here where we get this back if we get the second argument about which is actually a number and this tells you like is it the first item second item third item so it starts from zero one two so forth so if I equals zero I know it's the first element okay and if the first element is there then I'm going to say the first element should span two columns and still two rows okay and then I want to have some logic when I basically scroll over it so I want to have like a hover and all that kind of thing so basically what I'll do is I'm going to add that hover stuff here before and then there you go so now what we've done here is uh that's looks horrible one second I'm completely broken something um let's just go ahead and fix this quickly let's get rid of that let's get rid of relative cursor I think it's because I've got this and I need to figure something out one thing okay so SD relative there we go so now yeah so there you go firstly get rid of the relative for now I have an idea I'll show you something here so firstly that works yeah so that looks very nice on like it looks proper like an art gallery now yeah and then what we're going to do is after that is done is after this then we're gonna add in Hover scale and and that kind of stuff right so now you can see if I hover over it see we get this nice little effect right and same here and same on a small screen right now here it doesn't work correctly because of the medium screen right or the small screen and I'll show you how we can fix that in just a second so um oh this should only take place sorry on a medium screen and above yeah it doesn't make sense to span rows on on screens like that so there you go that's why yeah so that's why I was working and then we do make it relative I'll show you a little trick so because this div is now relative yeah um so someone says what's the name of this song right now this is called Everything instrumental version by Tilden Park right so there you go so there you go that now let's fix that issue and then what we're going to do is when I hover over it I want to have this nice little effect so I want to create a white div that hovers uh when I hover over it just suddenly appears right and the way that I do that is I have a div next to it all right but firstly the parent container has to be uh White right so so it has to be relative so in this case I say div and I've got a P tag and that P tag will have the text of the image right so basically what I'm going to do is I'm going to have a string here I'm going to strip the PNG and the timestamp out of it okay so someone said what should I type in input company I'm a little confused oh so you just literally type in N A if you don't have a company if you don't have a company just type in not applicable it's fine I'll just put your name it's fine yeah on the Microsoft form okay now for the P tag I'm gonna say text should beeps last name we're gonna say text should be in the center font should be light and the text should be large and padding of five and then for the div on the outside I'm going to say that this one is this is where that real kind of trick comes in right so as you can see now it's got the writing on the top but I want this to be absolutely positioned over it with a white background and it's an opacity only comes through when you hover over it so what we do is we because we're relative the parent contains relative we can do absolute positioning within that div so we can absolute Flex justify Center items should be centrally aligned and I'm going to say the width should be for the height should be four the background should be white the opacity by default is zero and then when you hover over it the opacity becomes eighty percent right and then I want to do a transition on the opacity so you get this nice little effect and then we're going to say the duration is 200 milliseconds and a z index of 10 so that way it's layered above the image right because the image is -10 we're going to say this one is positive tens that way a nice layer so now look you get a layering effect where it's sitting perfectly on top of the image and just like that oh my goodness it's like it's so clean that when you get this down like it's just icing on the cake all right so look at that looks so so clean and then now you get all this kind of coolness right now the thing is right so if we've got this working well but firstly when I actually come to this page it doesn't tell me anything right it doesn't tell me when it's loaded and so forth so firstly I want to increase I'm going to update this URL UI so that way it does tell me some stuff right and the first thing I want to do is I'm going to say if it's loading then I'm going to add in a P tag which simply says um uh loading okay so I'm going to Simply add in get rid of this and I'll show you how we do it so we simply say oh based on the is loading from the above we set a P tag and just says loading AI generated on I've simply done an animate posts on it and sent it the text and now if I refresh load in the AI generated images until it's ready and then boom it pops in right so beautiful works really nicely works well yeah so the next step is I want to have a button on the bottom right which will refresh the images right so in that case if I added a new image it will refresh and I can actually go ahead and check what happened so I'm going to add in a button here saying refresh images but the way I check this is I basically say if it's not loading yeah so if you're not already loading and it's invalidating then you can say it's refreshing otherwise it would just say refreshing images right so now this button here simply if we click it it doesn't do anything but what we want to do is simply just call refreshing images so all it's going to do is fetch the images again when you click it and that causes it is validating to become true but it is loading you don't want it to come up when you first are loading the images because it doesn't make sense so you basically disable it for that so the text shows and it is validating is triggered when you refresh so when you call this it's validating get scored okay so here we say on click and then I'm going to say refresh images right but I'll show you a little trick now so if you just did refresh images what you're gonna find is it's just going to get rid of everything so if I do this that refresh images it doesn't like it's not it's not an optimistic update right so I know it looks like it's working but it's a bit it's a bit sketchy right what you do is you pass in the old images and you get like a nice optimistic update and that means that it doesn't kind of get rid of everything because what can happen sometimes is this stuff just like disappears and comes back so I'm gonna do a nice optimistic update and then they'll use the images when we're refreshing it and then it will replace them once it comes back with a response right so that's pretty cool and then for this button I want to have it floating down here so for the styles for that I'm going to show you in a shorthand how we can do it I basically just done some absolute positioning or fixed positioning sorry so I'm just going to paste it in and it's layered at z20 to save a bit of time so fixed bottom right bottom 10 bottom right background 490 opacity so you can see through it a bit takes white bit of padding rounding corn honors when I hover the background changes a little bit darker Focus outline none Focus ring so when you click it you can see something and the fun boat and z20 says on top of all the other tiles now you can see look that's lovely look at that really really nice and when I click it refreshing and then refresh images comes back when it's done yeah so that works pretty nice and what we can actually see here to prove this is working if I go to this and I go down here you can see if I click refresh images you see how it's calling it every time I do it so it's actually making that request to our backend which works right so really really nice um so now let's try and do it so can you try if there's new images and you generally instead of getting all the images try adding on your last generated image yes you can do that you can do that and that's actually probably a more efficient way and what you would do is you would make the last image return the only problem is is let's say loads of people coming onto your site you're only going to add in your last image right so that's why I've gone with the generic overall pull in the images approached but that is a very good question I like the thinking behind it harsh Patel thank you so much for the 10 donation it says thanks for what you do I appreciate you brother thank you so much for that so at this point we're looking pretty damn good right so this is looking good but we have a problem so let's imagine if I go ahead and create a black and white oil painting of a child playing in a park so let's use the suggestion which means that I'm creating a modern black and white open of a child playing in the park now when this comes back this will not update right so I'll show you so look this will not update so let's go ahead and wait for this to come back so once it says file uploaded successfully it won't come back and I'll show you what how we're going to address this problem and this is because this image component is not connected to this uh image input prompt right so I'm going to show you how we can correct this now using use swi in a very very nice caching efficient strategy right so let's wait until that uploads so that should be done in a second sometimes it has a little delay maybe it takes longer to paint that picture or whatever it's doing I'm not sure but it's yeah it's it's doing it on the back end um we could always try and Trigger another one I always find if I do yeah there you go file uploaded successfully and you can see it's not here right it's not here and we're not revalidating on Focus so it's not going to refresh so if I click refresh images now you can see it then pulls it in okay so the refreshing of the images actually pulled in wow that's amazing right that's crazy so they pulled it in okay so now what I need to do is I need to make it so when it finishes this prompt it's going to Simply basically refresh this fetch images but how do we do this if we're in a separate file all right so we don't have something like Redux here we don't have any of this stuff so how the hell do you do that Sonny well it's actually a lot easier than you think we've used SWR so provided that your caching key is the same so in this case the caching key being API images or whatever you decide to call this if this is images providing that this is the same right so if I change the damages I'll show you we can then go into the other components of the prompt input and actually pull in what we need for the ability to do what we need instead I'll show you so let's go into prompt input and then inside of the prompt input now what we can do is we can say const and we can just simply pull in the mutate function and we're going to Simply call this one uh update images or you could call it refresh images really doesn't matter use SWR yeah and what we're going to do here is we're going to go ahead and say remember the key was images that we decided the fetching function was fetch images which we're going to need to import from our library and then we're going to go ahead and say revalidate on Focus false okay so now I've got access to this and what happens here which is amazing is inside of submit prompt right after we upload the picture we can cause a refresh to occur by simply pulling in the additional pictures now after all that is said and done simply put what it will do is it will cause a refresh to occur so I'm going to paint a spiral galaxy in 4K resolution use suggestion so now it's going to call uh make that request so I've actually generated that's a prompt is a modern abstract painting and I'm not going to do anything and you're gonna see it now pop in with that image after that's done we then have notifications to add and uh and then I think we're in the clear to deploy so you see that look it did it it literally did it by itself and that's incredible that means that you have a beautiful decoupled code which is clean good programming practices you're not passing you know your set of functions from one place to another and then something can break now all you're doing is you're relying on the caching key which you should be probably putting in a constant file somewhere else so that way you don't mess this all up but then with that you get the we get exactly what you want which is incredible yeah so at this point now this is looking amazing so let's now add in the ability to Let's firstly test it ourselves with um let's just say a um a red balloon on a white background let's say generate and you see like a red balloon on a white background so while that's coming back we can go ahead and test out um the next thing so we now we're now going to add in react hot toast notifications so that way the user knows what's happening on the front end otherwise right now you're kind of waiting like do they work or did it not work and look wait for it look at that oh this is so clean a red blue and a white background clean right so at this point that's pretty cool smash the Thumbs Up Button if you're enjoying this by the way 500 likes are so close by right I'm Gonna Keep It Coming as well so at this point now we're going to add in reactor notifications so the way we do this is It's react hot toast notifications so you simply go to the react tools notification website and we're going to add it in so I'm using npm in this instance so I'm going to grab this well I think I'm using npm so we're using yeah npm so so I'm gonna go over to my um yeah I'm gonna go up to the correct directory which is the main directory uh okay let's not do that let's just go ahead and create another one so there we go and then I'm going to go ahead and say npm I react.toast now because we can't actually the way they would tell you to install it is you have to wrap your entire app with um the toaster provider now we oh you have to put this toaster element at the highest element in your highest point in your app now you can't do that in the next year's 13 app because you're using the server-side components so the way you do it is you create a client wrapper or client provider and to do that is fairly straightforward all you've got to do is go into components create a client provider .tsx this will be a client component wrapper in some Essence then what we do is we import the toaster inside of this file so we pop it in like so and then we're going to go ahead and do the following so when we had the trick that I like to do is I go to my app I get the layout I basically copy the layout right and then I pop this in but I don't use a lot of this stuff so I get rid of all of this I don't use that obviously and then I still like this part right so what I do is I get rid of all of this and I just make this like an empty fragment a rack fragment and I pop the toaster in and now and then what you can do is you still have the children so I like to use the layout as a little shortcut for me so I don't I always forget sometimes what I actually need to do that so I get the children now and then I can basically position this so because they position bottom center and now because this accepts children what you can do is you go to a layout component and obviously by the way you can use a new metadata in an xgs 13.2 so you can actually say AI art gallery um and then the description this will change the head of the page this is really good for SEO purposes you can say generated by the pop fan let's go all right good and then um yeah we gotta represent oh yeah all right and we're gonna AI Art Gallery right so at this point we're given that as well I'm gonna go ahead and wrap my entire stuff so client provider current provider with what I was doing so I did export yep I did export it so here what I can do is I go around the entire app and I get client provider and then I just need to Simply import it into my app so I go here and I import it so I go and say the following and I can just do at there to make the Alias work and now your app should still be working it should still be fine but now you can have that ability to place it at the highest level and you don't break your server rendered component structure so if you ever need to use higher order components but you know in Nexus 13 everything is a server component by default that's how you would do it so if you ever need to have like um any kind of context provider or theme provider you can do it that way and then that would be a client-side component it doesn't mean everything underneath as a client's type of money either okay you can actually still do some clever stuff that I thought that was what I did but it didn't all right so at this point we can now add in the toaster notification which is fairly easy we just go to our prompt input so we head over to a prompt Timber and where we have submit prompt I'm going to base it all off the promise of when we are generating an image so what we do here is we say notification prompt firstly I need to import my toast from react.host so let's go up here and then I'm going to go down to submit prompt and where we have the input prompt itself I'm going to have a notification prompt okay and then I'm going to slice it to make it a shorter prompt otherwise I don't imagine I don't want this whole text to come up in the prompt you might want it but I didn't right so it's going to be either the input prompt or the suggestion okay if you have an input prompt um then it will be that otherwise it will be the suggestion or you can actually just go ahead and say if it was the to be honest it would be the P The Prompt so to actually let's do this let's do underneath here and then let's just make a notification prompt or BP yeah there you go and then you have the correct one right and then you do notification prompt slice 20 that means you could basically go up to the last one and then we create a notification so the way we do this is we say const notification equals toast.loading and this is for the ID so we can dismiss the same one afterwards we say Dali is creating the short version of your notification so it'll be like dot dot dot afterwards right and then after it's done what we can then say is here we can do the try data we can basically check the data to see if there was an error now if there was an error on the response all we can say is toast.error with the data dot error else toast.success right now what you do is you simply go ahead and we actually pass in the ID notification there so what this will do is it will replace the existing notification that we had signed here to these ones and then it'll become toasters because that's your AI generator the r has been your air has been generated so forth so let's try out now so chat GPT is thinking a thing let's do a sunset in the desert use a suggestion click it and boom look at that guys a modern abstract photo of uh Sunset and there's about afterwards because you don't want it too long right on a phone for example and now you quickly now your user's not sitting there thinking is it working or is it not working and that kind of thing and you can still go ahead and use the app right so that you can literally go ahead and say while it's doing it you can literally do something like imagine it look at that looks lovely right so people celebrating a special outdoor occasion use suggestion them say draw a iPad and then generate as well look and we can have two and they Stack Up right and uh thank you so much for the 10 donation again Adamo you're an amazing dude that's awesome Suraj from Saudi Arabia we've got Saudi in the house what's up that's amazing Middle East representing awesome to see you guys there draw an iPad uh generate a modern oil painting of a group of people or that's not an iPhone it's close right and I guess there's some sketchy apple pencil but you can see that that's lovely it works just as we expect it now how many of you are loving this build right now we actually popped over 500 likes that's incredible to see oh my God this is awesome guys I just want to get the I'm gonna get a nicer picture than that um let's see your face color yeah there we go let's just use that one so that now you've got a nice UI everything's looking beautiful and I think with that said we've actually gone ahead and done it so now what we need to do is we now need to go ahead and um I guess you can trigger Refreshments uh okay that so let me just show them that user clicking no I've already done that God like um so this is actually doing it now so you don't need to do I don't have to click refresh images what's actually happening now is we're using use SWR and every time a new image is created so for example like I'm not clicking refresh images here I click here I do this and this is your AI Johnson remember so I've got penalty for doing the same one let's try again Sunset over a lake so create an abstract onto a drawing of sunset over a lake and now a bite Bounce has been here since the start killed it thank you dude I appreciate you just smash the like button to show that support look at this look I'm not gonna hit refresh images it basically re-triggers the get images cool um and then what will happen is because it's using the same cache key it will then replace where it's being rendered so that's literally it I didn't have to do anything yeah so oh my God that's beautiful wow that's literally a piece of art you can put in your wall like honestly wow um so at this point I think we can now go ahead and look at that oh this is so nice I would say Sunny MJ you guys didn't imagine I really appreciate the pop punk I appreciate you dude so thank you for tuning in that's awesome man so at this point we are now on to deployment right so first things first we're gonna basically step this in the correct way first thing we're going to do is deploy the Azure functions then I'm going to swap the URLs out now as I mentioned you can do the little check to see if in production then use your real Dynamic production URLs and then otherwise use localhost but for today I'm just going to swap it out to be simple we're going to deploy our Azure function so that they're live enough then we're going to go ahead and deploy other cell to uh to yeah to to where it needs to be so let's go ahead and do that right now I just want to check something as well so there's a corner okay so there we go I haven't got the extension there so uh at this point now what we do is so inside of our Azure right what we have here is let me close everything first so inside of azure we have our local settings.json now inside of local settings Jason I'm not going to show it because it's got all the keys and everything there but basically what we have here is a bunch of your your your config stuff right so all of your config stuff is in local settings.json now if I go over to remember don't forget you got the access to the code here or the first link in the description so if I go over to um my Azure functions if we go back over here now to my Azure functions it's a function app what you'll find is if I go to configuration so you can just type in a settings configuration you'll see we have the environment files here the environment variables here okay and then what you'll find is like you've got your different keys and stuff like that now it's working locally because we have the file but notice how some of my things such as my sort of you know my my account key my account name that's not on the that's not here so how do I push my local settings up well it's very easy command shift p we type in Azure storage and then we type in uh settings now is it observe storage zero function sorry settings upload local settings so this one right here simply hit enter on that and then what you'll find is It'll ask you which app most likely so give it a second and then we find the app so in this case AI image generator YouTube app so we click it and now what this is doing is it's uploading my local settings Json file to the actual Azure functions so this means that when I deploy it do you see successfully uploaded so now when I deploy if I click refresh now yep we click on continue you should see those new environment variables in Azure so now you can see look open AI key open AI organization and you can see that's correct and we even have the account key and account name so this is perfect right now right so we have all the stuff that we need and now with that said so now we've basically set to the environment variables in Azure so now what we can do is we can go ahead and say command shift p Azure functions and then we can go ahead and do the following because they deploy to function app and then what this will do is this will actually deploy all of my source um URLs to a real app so in this case we can select our app hit enter and what this will do is it will you have to be careful because it will override all of the previous deployments so we're going to click on deploy that's fine and what it's doing now is it's deploying these actual URLs over to um Azure and because it's got the correct your um the correct environment variables it's working so in this case it says deploy and click here to review the output file so let's go ahead and see if we can get that why can't I see that um okay let me just see that one second let me yeah let's check the output window there we go so you can see now it's going ahead and it's starting the deployment it's doing everything it needs I added the following settings that's what happened before so if you want to find this you go to Output you click on this you see Azure functions you can see all the nice little output stuff so this is pretty handy to see so what this is doing now is you can go ahead and sunny is live in smartroom but um light is reducing dark so you have to be more focusing yeah the whole place is smart I'm not joking it's literally super clever this apartment I've made it so clever uh I'm a techie what did you expect it has to be right so in this case now syncing triggers deployment successful once it says querying triggers what you'll find is it will give us back the URL endpoints Mario's what is up dude good to see pop fan members tuning in what is that man so you see like querying says deployment complete that's what I'm talking about so now what we can see there's two ways of checking this firstly it will give us a bunch of URLs right now we're going to use those URLs in just a second so let's go ahead and see right now one second so let's pop this aside let's move this over here and what we'll see is we should see all of our triggers live and deployed so give it a second give it a second it'll take a minute all right so while that's doing that I can go over to my functions and you should see there you go look they're there they're literally here they're live yeah so the app is coming around that's fine we can do this uh and then so basically that is live so that will give us the thing and then if we click on Azure we go here to uh function app AI image generator functions you'll literally get the uh the URLs here as well and I think we can actually copy the URLs here as well so this is this is why the extensions are very good so that's not giving me either at the moment they're still reading so just give it a second it's querying okay so it takes a little bit of time sometimes it's finally there you go so we've got the different things if we right click copy function URL so if I was to click on for example get images you can see if I was to paste this in we actually get look that's a real API endpoint so if I click that look at this guys bam I actually get it that's I'm awesome that's amazing it actually works it's a real endpoint and it's working so now what I can do is go through my code where I had my um different files so in this case we've got the general image and so forth so yeah so in this case now we go to our files let's go to our uh hide this first I can go to your app API and by the time this should have replied yeah there you go so it came back eventually but you see you've got all the URLs here as well yeah the one that gets passed the HTTP trigger URLs so these are live now in this year right so now it's actually deployed so we've got the Azure URLs we go to our app endpoints and instead of these ones now I'm going to use them once so instead of that we're going to go to our Azure and then here I'm going to say generate image copy uh oops no oh god I've actually oops actually execute that um so this one I'm going to go ahead and no don't do that cancel yeah oh but that's really cool actually you can actually generate it from here I did not know that the enter request body wow so here you could do prompt Microsoft Fairplay you say draw a dinosaur in a Blue Lagoon I don't know I don't know what's up with me and dinosaurs or enter and that worked oh wow that's cool yeah so you can actually test it that way as well now you know right and then in this case we can go ahead and paste it in so that's live um obviously you can use I would recommend that you actually did Enviro like proper environment variables for URLs here and constant files but I'm just trying to show you the point right so we've got this get images oh look at the pop performance and come on let's go then we've got to get images here so here we're going to do get images the same thing copy our function URL pop it in and again I would make it so when you're in your production environment oops sorry guys when you're in your production environment you're doing your local like basically you just do a check here which is if it's in production you do local otherwise you do the main I just want to show you this it works and then the final one is chat GPT suggestions so here this song will never get older I swear to God I love it right it reminds me so much of the the papa fam and the amazing community that we built and then let's go ahead and copy this one but I'm pop it in there and then you see it so now you've got your chat GPT suggestions all that kind of stuff running off your actual endpoint so let's test the up and see if it works let's refresh yeah and you see chat GPT is still thinking of a suggestions it's still working a modern abstract painting of a house okay awesome not my my dinosaur and the Blue Lagoon came on so let's go ahead and use this suggestion and this is happening off real Azure endpoints right now so this example of row is your endpoints right now can you have custom URLs I'm pretty sure you can yes so in this case like that's happened that's actually been uh that actually fetched from a row as your endpoint and that's perfect that's working look this is all working from real Azure endpoints so the final step now guys is we need to go ahead and push to the cell right so basically before I push the vessel I want to mention if you wanted to get to this point or you're following me and maybe at some point you got a bit lost because it's gonna happen it's natural it's debugging a lot of stuff's happening then remember you can check the first link in the description and go to this URL and I stress it because guys for the first time ever we've made it free we've made it free for you guys to actually be able to download the source code and we've done this because we're in partnership with Microsoft so AKA dot Ms forward slash Sunny head over here simply fill this out and I Promise You by hitting submit you're actually really supporting the proper fam if you hit skip you're not going to get all the additional information that we want you to get right so fill in this information if you haven't got a company simply put n a doesn't make a difference it takes you like literally a minute 30 seconds to fill this out hit submit and then once you've done that you'll get this you'll get a nice email with all the resources for free then I need you to go to GitHub repo and you can get all the code for this project everything that I did today is available in that repo it's available in the public air repo as well but it's also going to be here for free and you can actually go ahead and use that you just need to submit that form okay submit that form and it's awesome so I really need you to do that and it's going to help push us to be able to do more videos just like this with Microsoft and collab and that awesome stuff without further Ado let's deploy this to the cell all right so let's go ahead and deploy this to the cell right now so heading over to the cell what we need to do is remember we've got two things now because we have over here our local environment file okay so the environment.locophile um the environment local file here we actually need to uh upload these environment variables to the cell but I'll show you a nice quick way to do it right so what I like to do is very simply go to my let's actually make this a little bit neater let's go here let's pull this over here and we have our AI remember you're going to get confused at times because one minute you might be in Azure and then this means you're at your your Azure function your as your project nested inside and then you've got to come up to do your dependency management here as well thank you Mario because I already did it amazing stuff and I'll show you a little neat trick with the house afterwards if you stick around after this deployment if you if we hit 600 likes I'll show you the smart house all right right now I'll show you on the live stream okay so at this point uh and if you're watching the replay this video is getting thousands of likes at some point it's amazing right so at this point now what we're gonna do is we're gonna go ahead and type in the cell and the cell if you haven't already installed the for sale CLI tools all you have to do is type in the cell CLI and it will have very simple instructions to install it you type in the cell if you're not logged in it will make you log in here I just say setup and deploy yes and then what scope do you want to do so I'm actually going to do it to Sunny sangha's team so I've got a pro account as well so I'm going to do a sunny tankers team it's linked to an existing project I'm going to say no for now what's your Project's name there you go in which directory is your code located it's in this one right here and also guys if you haven't already signed up to the sell then make sure you need to send that one send me foreign if you haven't already signed up to facelle I'll be sharing a link shortly and make sure you use that link because that's going to help you out a ton with getting signed up to the cell so in this case which code is your which direction is you hit enter on that setting up the project now this will upload your code now this is going to fail right I'll show you why so you firstly click enter okay that's fine this is gonna fail because we haven't uploaded our environment file uh variables yet so what I'm going to do here is I'm gonna go to my AI image generator build go here and right now I'm trying out the pro features we go to our settings go to our environment variables and you can see we don't have environment variables so the easiest way of doing this is you simply go into your environment rails I'm going to invalidate my key anyways I don't care environment copy your environment variables and then you simply go here and paste and then you click production preview development whatever one you want to do it for click save and then what you can do is go to your deployments cancel this one right oh so it's actually already finished anyway but basically and now I'm going to do is I'm going to type in the cell and this will work because now you're going to redeploy it to um production or no it's not going to put production but it's gonna oh it did do it hint as well um but it's going to redeploy this now with your environment variables now remember if you haven't already signed up to the cell then I highly recommend you check out use this link links.popperreact.com forward slash vessel so make sure you go check it out if you haven't already and you're going to get a free bunch of stuff when you do this way so if you haven't already got a pro account or you haven't got an account with the cell then definitely go check it out at lynx.puppereact.com forward slash the cell okay so that is I'm just going to add it on the screen so it's super easy for you guys to read so there's links.popperreact.com again you're supporting the pop-up Farm it helps us out a ton and it always you know it's always awesome to have you guys support us out and even same with the Microsoft link that's going to help us do more videos like this so that's why we're just honest with you we tell you that it helps us out and yeah so in this case we've got the preview link uh you can deploy to production by simply running the cell dash dash prod which is what I'm going to do here and this will deploy to production and then we can actually go ahead and see and you guys can literally use this app right now right so I'm going to show you in a second and then I want you to destroy the like button so that way we can really end this with a nice bang on the stream it's been an incredible build we've done so much in this build and uh yeah bite band says throw the URL in the chat when it's done Keen to test it you know I will dude you absolutely know I will so in this case let's see if it worked and we've got everything oh look chat GPS thinking of suggestions let's go let's work just let's go that's what I'm talking about amazing bam go check it out guys right now that is deployed that is live I'm gonna hopefully assume that chat uh Dali 2 don't go crazy withdrawing some dodgy stuff but I want to see if people are adding it in so obviously if yours if you're adding images in I need to refresh on my side because it's not a websocket connection but I'm going to check so feel free now to test that out for yourself and I want to see if images actually come in okay so I'm going to go ahead and keep on adding a few images as well so a new suggestion let's just type it in and then we should start seeing things oh someone did it like someone did it yeah that was someone else that wasn't me uh let's do it again so someone there we go look hey there we go guys look cat girl love cream I see a Skyline and 4K resolution let's go guys family of three create more than abstract oh wow that's crazy this is so cool Jay said he did one as well oh look at this oh my god oh this is so cool so what do you guys think absolutely cool right amazing stuff destroy that like button if you're enjoying this build right now look at that everyone's loving it lion wearing the crown that's what I'm talking about I I think the cat one by picture I don't know I had a feeling lion emoji and ice cream this is so cool but look at that wow look how good that that is that's incredible but yeah you guys have tried it for yourself you can see for yourself that it works that is really cool I will be invalidating the key otherwise I'm gonna exhaust all my very shortly but I hope you have enjoyed the build let's just dive through some of the tech right now to see what we actually achieved um and look at that people are coming in clutch with these videos with these pictures that it just keeps on going so cool to see and I think you guys love to see when you can actually play around with a live demo at the end of it deployed everything works as your functions all that good stuff so let's dive into what we actually did today okay let's go ahead and get a quick breakdown so that way we can really understand the benefit of today's build and if you're gonna watch it back in time later on you know what you're getting into so in today's video we covered in next year's 13.2 that is big that has roots new new awesome stuff SEO these enough it even has a way of checking Dynamic links so you make sure you're not actually linking the person to a wrong page and we have used Microsoft Azure so we use the Azure functions scalable Cloud functions you can use them wherever you like today we built a number of them and we were able to set it all up with ease using the Azure extensions incredible right really easy and not probably the best integration that I've seen for our back end in 2vs code most probably because it's Microsoft and Microsoft so really really awesome stuff we actually went ahead and used The Blob storage to go ahead and install all of the beautiful images the stuff that you're doing right now is happening and being stored through azure functions and blob storage through Microsoft Azure Services we have dally 2 producing these images which is absolutely fantastic all right look at that oh wow so many things sunny sunny [Music] look at this it's so funny yeah and um yeah so many things oh wow that's so cool someone goes make an oil canvas that says thank you sonny written on the beach it's literally tried it it's a Sony that's so funny right and then we have things like chat GPT behind the scenes dally two behind the scenes working its magic we have typescript we're deploying with the cell and yeah the list goes on and on and we used use SWR to officially update that what you're seeing on the page right so so cool that we produced a low coupled app and it's scalable it's just got millions of users tomorrow it's gonna work right it's gonna work the only thing they'll probably limit you is open AI you'd have to just add a billing thing to that because eventually you're going to hit a quota right now but otherwise this has been incredible as always guys I hope you enjoyed the build and I want to stress one more time that if you can if you want the ability uh the code for today's build firstly smash the thumbs up button and then go to this link AKA dot Ms forward Sunny Microsoft are literally checking this link to make sure that you guys have submitted it I want to show them that the pop-up Farm is here to represent and I want you guys to benefit from that free code to literally fill it out hit submit don't skip it because if you skip it you're not sub you honestly it's going to help support the pub prime a lot go to this link and yeah GitHub repo for the project you get it for free and if you do want to check out and learn more with me and code with me on a regular basis then check out zero to full stack hero the link is in that description as well and you guys can feel free to learn with us so zero to full Sakura we have our amazing course and our amazing community and yeah so Papa react.com forward slash course we're adding in new module content every single uh week every single week I'm literally shooting content I'm in coaching calls I'm doing stuff I'm working so if you want to learn and you want to elevate to some seriously awesome level check us out and whether it's your family or developers this energy all the time that's it that's what we're about I love and appreciate every single one of you with that said I'm gonna wrap up the only way that we know how to do it on this channel through the pop Vamp energy through the pop-up anthem this has been awesome guys we built such a cool app today and uh yeah I'm so proud that we all kind of stuck together and threw this out we had loads of debugging opportunities loads of things that were happening I'm gonna read your comments as we tune out Alexandria says great though thank you sonny because someone tried with Sonny's name Sonny cross Microsoft Azure yes this was our first ever Microsoft Azure collaboration with Microsoft incredible Papa fans hitting New Heights is incredible honestly Natasha says thanks a lot thank you Natasha for being awesome uh we've got Godlike Zorro gebenga thank you so much because this build was awesome and uh we have zotan bigwig thank you it's sunny and Jay you guys are absolutely welcome it's my pleasure to be able to teach you every single time we come on this stream it's and I hope to God that I'm hoping some of you become better developers and build your career or your dream career in that field right with that said this is your boy Papa react and I will see you in the next video peace [Music] foreign [Music] incredible incredible support I'll see you guys in the next one peace [Music]

Channel: Sonny Sangha

Views: 134,102

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: 0qHnVYSxZ4k

Length: 206min 3sec (12363 seconds)

Published: Fri Mar 24 2023