🛑 Build an AI Image Generator in JavaScript! (Super simple!) | OpenAI API DALL-E ChatGPT

hey everyone and welcome to this video in which I'm going to show you how to use the Dali model from the open AI API so essentially what we're going to be doing is building an image generator kind of like Dolly that's going to take a text prompt and then it's going to generate four images for US based on that text prompt so super basic super simple we're gonna be building this in JavaScript HTML and CSS so essentially this is a beginner video for those wanting to learn how to build their own things using the open AI API that powers tools such as darling before we get started using openai API I want to quickly show you API layer a Marketplace of curated apis here you can find other apis incorporate into the app we are building so for example if you want to crop images smartly I would simply find an API to do it for me let's go to the images section and let's incorporate the smart image cropping API to our projects that we are building if we want we can test it out in the playground so just go ahead and paste in a URL from the internet put in an aspect ratio and run the code and there we go how cool is that now this is a sponsored feature so if you're looking for weird and wonderful or fully trusted apis to create cool and unique projects with API layer is a great place to look with anything from the Spotify API to social media apis to food you can even list your own API if you wish please click on the description link below if you're looking for fully trusted apis to create cool and unique projects with you don't need to give your credit card up front and there is a free plan so just have a play around just like I did if you want use a larger paid plan there is a special discount code for you in the description below so what are we waiting for of course this is a front-end project so please don't go and publish this code with the API key that we will be using onto GitHub or share or anything like that because if you do someone can take your API key and steal your credits or you know if you have a credit card attached they could potentially rack up loads and loads on your credit card bill so please keep that API key safe this is just for demo purposes if you want to learn how to build out a more secure project we will be doing that in another video where I build a front end and a back end to keep our API Keys safe so let's do it please do have the fundamentals of JavaScript down but if you don't please do carry along anyway I'm just filling your gaps of knowledge later on after you finish this video okay so let's do it we're going to build this cool AI generator in JavaScript HTML and CSS so this is what it's going to look like and then we can write a prompt and generate four images from it and it's going to have this cool background too so I'm going to show you how to do that as well so first off let's just start a new project I'm using web store so I'm simply going to click here and let's call this Java Script AI image generator just like so and create so that has created a directory for me in a directory called webstone projects and now I could just create a new file I'm going to call it index.html and then I'm just going to create another file an app.js file and now I'm just going to create a final file it's going to be Styles CSS just like so so there we go there's our three files all in the same folder and now let's link them up so here are some boilerplate code for you I'm just going to go ahead and call this AI image generate door just like so okay and now in the body oh well that's where all my code is going to go but I'm also going to link up the app to this file thanks for script type this will be at the bottom so after all our other elements get uh red then we go to the script tag and I'm just going to link up the app.js file that's going to read our JavaScript so the script is going to read our JavaScript from this file nurses also linked up the style sheet so I'm going to use the link tag for this uh it's a self-closing tag we'll do row style sheet and as the href we're also going to put the path to our Styles CSS file which is just that as we don't need to go any folders or anything like that it's in the same location as this index HTML file so great that is looking good now the background I'm just going to show people how to do this as a lot of people are properly curious I'm just going to go to app hypey.app so that's all I'm doing and now we can generate our own way which is pretty cool so I chose a layered wave and then all I did was kind of you know play around with this or you can just choose your own like that or you can change the balance the wave count the complexity which will be like oh the contrast the overlap and just so much more there's so much to do and then just download the SVG and once that is done you can open it up and then you inspect the page like so and then I'm just going to copy the whole element okay so that SVG right there so that's all I have done okay and now if we go back here I'm just going to in the body paste it so it is very long and that's what it looks like let's just open this up in our browser so I can go ahead and click here if I want if I am using webstorm or if you are not you can't just copy the path copy the absolute path and then paste it in like so so both things are okay to do great now let's get rid of the little like water around it and make this stretch right so let's do it so actually on here well I am going to do is the width and the Heights I'm just gonna go with using the width and height from here and then as the width here I'm just going to go 100 viewport width and then this is going to be 100 viewport height we could have picked this out and done in the CSS file so that is totally fine too and on here I'm going to grab the body and just get rid of any default uh padding and margin just like so so then it should look like that so that is much better now so there we go that's how you would use it so that is how I like it at the moment I'm actually just going to take the one I previously generated because I think I prefer it but that is how you will get your one once you're happy with it once you've played around with it I don't play around with this one that much and I just thought the other one looked cooler so I'm just going to replace mine with the previous one that I made okay and great like I said it's super long so yeah I mean not much difference but I just think like that looks better okay and now as the background I'm just going to make it the same color as this last color right here so let's find out what that is in fact I'm just going to inspect this so the color for this is that and now I'm just going to assign that to the body as well just so that in case you know someone kind of zooms out like I did then it just looks much better I prefer that a lot more okay let's carry it on so what is the next thing that we're going to do well we're going to add some elements in here so I'm just going to make sure I format that correctly I'm going to next add a header and that header well I'm just going to put the H1 element of Ania AI image generator of course you can replace this with whatever title you would like and then after the header I'm going to have one section and this is going to hold all my images so I'm going to give it the class name of images section and then let's have another section this one's going to have the class of input container just like so and I'm actually going to put in the input here okay and then a div and I'm going to overlap this div later on which is why I put them both in an input container and let's give this to the ID of submit icon just like so and I'm just going to put some text symbol in here if you would like to use it you can get it at this URL it's just this little arrow that looks like this so you can get it from here if you would wish okay so at the moment uh input and our title are showing up here that's because we need stuff and use display Flex to Center everything in here in a much nicer way so let's do it so we are done with this for now we are not going to put in any images because we're going to use JavaScript in order to do that for us so let's carry on now we are going to essentially on the body well I just want to make sure that everything is stacked on top of each other so I'm going to initialize flexbox so that I can use flex Direction column okay without this I won't be able to use this next I'm just going to set the width and the height of the browser so view width is going to be a hundred percent of the viewport width and the height is going to be 100 of the viewport height okay and that means I can now use justify content Center and align items Center okay to Center everything to the very center of my browser again I need to assign a width and a height in order for these two work properly so now everything should be in the center just like so okay and we want to disclude the SVG from this so I'm just going to grab the SVG and I'm going to essentially just give it a position absolute top zero left zero okay and I'm just going to make sure that it's always behind everything so I'll just give it a zendix minus one or minus 10 to be sure why not okay great so now that is in the center amazing the other thing I want to do is just uh maybe in the header this time I just want to make sure that all font in the header is going to be white so let's go with color let's go to RGB 255 255-255. so that we got so that is something that I have done great let's also assign a height so I'm just going to hard code a height of 150 and I'm going to Center everything in it by initializing Flex books again and now I'm just going to align items Center so this time it's going to center it on the opposite axis so from top to bottom so at the moment it will look wonderful so this is looking great now what other things that I want to do what I'd quite like to space out all the child elements of the body so excluding the SVG that would be the header and the two sections and I would like them to the spacing to be even between them so I'm going to use justify content space between so on the body I'm going to change this to be space between so they are spaced out like so wonderful this is looking great the other thing I'm going to do is just change the font family on the whole body itself and let's go with a true butchett Ms and as a backup I'm going to have Sans serif so just one backup so that will just change the text to be a little bit more uh like this next let's style up so the images container maybe let's leave that for now let's do the input container next okay so let's do it in fact I think the input container let's wrap it in another wrapper so in fact let's make a section and I'm going to give this the class of bottom section just so that we can uh Center this whole input container inside of it so maybe let's change this to be able instead okay so there we go so now if we look in here the three child elements are the header the section and this section as well so let's pick out the bottom section of course we are discounting the SVG as we've positioned that separately to the rest so here I'm just going to minimize that I'm just going to grab the element with the class name of bottom section and I'm just going to make sure that the width of it is a hundred percent of the parent element and let's also use display Flex initialize flexbox so that we can then use justify content Center to Center everything from left to right and I'm also going to assign this a height of 150 pixels so there we go there's our bottom section and there's our header again header bottom section wonderful let's work on signing the child at the bottom section next which is the input container so again I'm just going to grab the input container by the class name so the whole element that has the class name with Inver container and I'm just going to make sure that the width is a hundred percent but I'm also going to give it a Max width so that it stops at 650 pixels if we wanted to okay I'm also going to give a position of a relative this is because I want to position the child inside of it relative to the parent by using position absolute on it so what I mean is well if we grow up the item with the class of submit icon and I give it a position of absolute and I actually fix it so let's go ahead and fix it to the parent so the input container Top by 10 pixels and right 30 pixels where do you think it will go well here's the parent it will go 10 pixels from the top of that blue square and 30 pixels from the right of it so there essentially okay great now let's also style the input itself so let's grab the input and I'm also going to give it a width of a hundred percent so just like so maybe let's change this to be a bit smaller so 600 pixels I'm also going to give this a border of none as I don't want to border I'm going to make sure that the font size in here is 20 pixels so quite uh large maybe or larger let's Pat It Out by 10 pixels I'm also going to add a radius foreign to smooth off the edges and that's going to be of five pixels and I'm going to add some box Shadow because why not I'm going to RGB uh let's go with this kind of dark color so 38 57 77 0 on the x-axis 20 pixels on the y-axis 30 pixels blur and minus 10 pixels right okay and at the moment it will look like this however I want it to be on the inside rather than it spilling over the parent so for example I'm just going to show you there's our bottom section right the input container which holds the input they're spilling over the bottom section so I'm going to use box sizing border box stop that from happening okay so now it is in the parent and looks like this so much better let's also make sure that the headers width is also 100 percent so that it takes up the whole space and now we can also Center that title so let's do justify content Center okay and wonderful so this is looking great let's get to hooking this up with JavaScript next so let's do it so all I'm going to do is in here I'm going to show you how to get your API key so we're going to need to go to open AI so just make sure to go to open Ai and click on API reference I've already got it up here and now under here I'm just going to view my API keys now I can create a new key show so all I'm going to do is create a new key like this and that will get created for me okay great and you're just going to copy it and keep it safe okay you don't want anyone stealing this because they could use all your free credits or rack up money on your credit card if you have a credit card attached to this and you could of course delete them if you think yours is compromised or you just don't want them anymore so make sure to do that I'm just going to save it here so const API key like so make sure it's your string and I'm just going to remind you to not put this on her GitHub okay do not deploy this API key or up load onto GitHub okay this is just for personal use because of the issues that I said before so there's our API key we've got it now let's get to using it so what I'm gonna do is well first off I want to essentially get an image if I write something in the input and click on this button right so let's pick out this button by the ID because we're going to attach an event listener to it so I'm going to use document query selector I'm going to look for anything with the i t of submit icon just like so and let's save it as submit uh icon so that we can work with it in our JavaScript now so I'm going to get that and I'm going to use add event listener so listen Apple clicks and if we click on it I want to get images okay so now let's define the function get images so cons to get images I'm just using a function expression you can write function if you want and what we're going to do is try something and catch the errors if it doesn't work ever and we'll just consult erroring the error so that's all I'm going to do so if we click on the submit icon so if we click on it that's the event we're going to call this function at the moment it's not doing much because you know we need to write this code so what we're going to do is make a request okay we'll go is make requests to the Dali model and that is to API references and then we're going to find images okay so this is what we need it's a post request to this URL so let's grab this URL and now I'm going to use the fetch API keyword to fetch from this URL I'm gonna have to pass through some options in which we Define the method which is going to be post as we just saw so const options method is going to be a post method and next we're going to also have to pause through some headers right because we're going to have to pass through that API key and we're going to do so so we're going to write authorization make sure to spell that correctly authorization and then we're going to do back ticks as we're going to use the word Bearer but it also passes through that API keys so to pass through code or variables we use the dollar and these two uh curly braces and then we're going to pause through the API key so that will come out because Bearer and this string with the space next we're also going to have to define the content type because we're working with Json so content type and then we're going to do application okay so that's what we have done and then we're gonna have to have the 14 so the body well I'm just going to pass through an object and it's going to have a few things it's going to have the prompt itself so the string that we want to send to the AI so like generate a cat or something so we're going to put that here next we're going to have n which is going to be the number of images we want I'm going to put four and then we're going to have to have the size and the size of this is going to be well there's three we can choose from if you look here here are the options Only The Prompt is required right so the make us a cat these are optional but I divide n as four because I want four images and the size we can choose from these three I'm just going to choose the biggest you can have all these others but you know as a default we are going to be returning the URL to the image and I don't really care about the user being shown for that so great so let's put in this size as that is the options we need and I'm going to have to wrap this through Json stringify okay so there's a method called Json stringify and then we're going to pass through this whole object through it so that it kind of justifies this for us so there we go now the prompt of course I can write some text but that's not very fun I want to get the value from this uh input right so let's go ahead and do that there's only one input so I'm just going to pick it up by the element itself document query selector and I'm going to look for an input okay and let's save this as input element just like so so now I can grab that input element and whenever we click on it let's hope there's something there right because input element and we're going to get its value okay so when we click on the little arrow we hopefully have something in the element otherwise you know you're just sending an empty string and then we're also sending through the amount of images you want and the size of those images so great so those are the options so we're passing through the URL and the options as a second parameter fetch is an async function so we need to use the awake keyword for this range or wait for it to come back and as we're using the await keyword in here this also needs to be amazing function so if you want to know more information on that I do have some async await tutorials on my channel so once that comes back we're going to save this whatever comes back to us under the const response okay so we're getting the response and once we get that response we're going to get the Jason from it but oh this is also an async method we're gonna have to await it so we're going to await that Json and save the return under data for now let's just console log data so there we go let's check it out so all I'm going to do is back on here let's go pictures of blue cats in the rain click it's gonna have a console log as well okay so that is done and we get four URLs this is great and if I get one of these URLs and put them in here we get a picture of a blue cat in the rain it's so sad wonderful so this works I'm also going to just add a cursor to this so on the actual submit icon I'm going to add cursor pointer just so it's obvious that we can click on it so that that should show up wonderful so now let's get to using these URLs and mapping them onto images here so let's do it so I think once we get that data right so if data exists we're going to get the data from it because if we was looking here I'm just going to click on this again a blue cat okay and let's wait for that to do its thing we want to just see what returns back to us so we can work with it this is data we then need to go into dot data right to get this whole array so that's why I've gone data dot data if data exists we're going to go into data and get that whole array and for each item in that array what should we call each item we can call it wherever we want I'm going to call an image object as that's essentially kind of what it is right it's a a object that holds just the URL so for each of those I'm going to actually create an element so I'm going to use document create element and I'm going to create a div that's right that's what I've done and let's say this as image container because each of my images I'm going to put in a container so that we can kind of crop it out if it's too big so now let's grab that in which container and I'm going to give it the class list add and I'm going to create a class that is called image container okay so that's what I'm going to do and once we have that image container we're actually going to put a another element a a image element inside of it so let's create it document create element image and let's call this image element and now let's grab the image element and I'm going to use set attributes so JavaScript method is called set attribute to set the source and then whatever the image object URL is okay so I'm getting the URL and I'm essentially getting the image object and adding Source equals the image URL and now I'm going to get that image container and I'm going to append so I'm going to put in that image element into it okay and once that is done I'm actually just going to pick out the whole image section by its class name so let's do that I'm going to do so up here const image section equals document query selector and I'm going to look for something with the class of image section so then I'm going to grab that image section and I'm going to append that image container I just stuck the image into okay so let's have a look at what this looks like before continuing right so maybe let's get rid of this console log now go in here and a orange hot dog it's a way for that to do its thing and great so obviously we haven't styled it at all I'm just going to show you what happened so this image is section which at the beginning had nothing in it now has four elements inside of it it has a div we created a div for every item in that array right we created the div and we gave it the class list out of image containers we added the class of image container to it next we also created an image element and we added the attribute so set attribute of source and a URL that we are mapping over so that's what we did and then we put that image element in the element with the closet image container and then we put that image container inside the image section so we did all that with JavaScript which is pretty cool so now we have our four images and let's just style this up so what I'm going to do is perhaps grab the let's grab the images section so let's go ahead and grab that and I'm just going to say that the width of this whole section is going to be 100 but also I'm going to set a Max width and it's going to be 600 pixels so just like our input and now I'm going to use display Flex to initialize flexbox and I want everything to wrap over each other so I'm going to use flex wrap graph in order for it to do that and then I'm just going to space out everything evenly with space between and also just pair this out by 10 pixels okay great and finally I'm just going to do a few more things so I'm going to grab the image container so the thing that holds our image and I'm just going to give it a width of 40 of the parent so the image section so each one's only 40 I'm going to round off the edges with border radius let's round off by 15 pixels uh let's hide any overflow so if it's a square the image is a square that is inside of it I want to hide off those edges and let's just give a box Shadow I'm going to go with RGB 38 57 77 as the color and then zero x axis 20 pixels y-axis 30 pixels blur and minus 10 pixels and finally I'm going to save any image please inside of the image container and let's just give it a width of a hundred percent okay great maybe let's change this to be 48 I think 40 is maybe too small and let's test it out and just make sure that you know you are using the same quote marks everywhere just before sharing this with anyone before you don't need them here so let's get rid of those so we can do that just cleaning this up a little bit and this should be small so let's just change that also and then just make sure that if you're using hex and RGB just try to make sure that it's the same uh approach you use each time so great that is looking so much better I'm just going to change these out to just to make everything a bit more consistent rather than just me speed coding this through for you okay Let's test it out what should we do let's do a rainbow ice cream foreign so I hope you've had fun building this image generator of course this is just for demo purposes we are going to be building the same thing but with other functionalities we're going to be building a daily clone that will do this but also allow us to upload existing images for variation and reacts with a node.js backend as well as using the open AI node.js library next

Channel: Code with Ania Kubów

Views: 67,177

Keywords:

Id: l3TLQuwr4G0

Length: 33min 2sec (1982 seconds)

Published: Wed Apr 26 2023