DALL-E: A Full Stack OpenAI Image Gallery App

--- type: transcript date: 2023-02-14 youtube_id: 1tmvUV4PkZ4 --- # Transcript: DALL-E: A Full Stack OpenAI Image Gallery App all right welcome so in this I'm going to be showing you how you can build a quick full stack app with Dolly what we're going to be building is on the right hand side here the tech stack is going to be just a plain vanilla HTML we're going to be using CSS JavaScript on the front end we're not going to be using any Frameworks on the back end we're going to be using node.js and we're going to be able to do this in probably less than 15 minutes so hopefully you enjoy this and without further Ado let's get into it all right so we're going to dive right into building out our front end so the first thing to note is we're going to have a index HTML and index.js and a style CSS once we have that if you want to have the same setup that I do I'm using the live server extension in vs code which will just allow me to when I save the document be able to see the changes within Chrome on the right hand side here so we're going to go into the index.html and we're going to include the bootstrap CDN for the CSS only so we're not going to need the JavaScript CDN file for this we're just going to be leveraging the bootstrap Styles and the the large reason for that is the focus on this is not going to be CSS we're just going to leverage a library to handle the styles for us now with that being said we're going to have a very small style sheet for some tiny customizations that you might want to add so in this instance we're going to have a style sheet just to change the background with a simple dark mode linear gradient now we're going to add some containers and some utility classes that are just going to wrap our app just to sort of make it structured and and look how how we head in the example there and once we have that the main pieces of our app are going to be the input and then the gallery so the input is going to be the simple text box where it says enter Dolly query and then we're going to have the submit button to submit the form and then we'll have the label that's associated with the input as you see and then once we have those we're going to just go down add the gallery that's right below the form and then finally we're going to include our JavaScript so we'll hop right over to the style CSS and like I said it's very simple what we're adding here but the files here in case you want to add some further things or tweak it as you see fit So within our index.js on the front end the first thing that we're going to do is we're going to Cache the form and gallery elements this will just make it a little bit cleaner for us to interact as we write the rest of our code so we're going to create an event listener on the form so when the form is submitted it's going to run through all this code we're going to Cache the image query within the event listener because that value is obviously going to change as you query different images we're going to prevent the default behavior of the form so we don't want the form to actually submit refresh the browser so that's why we're adding that and then we're going to clear the Dom element of any values so as you type it out if we don't add this you'd have to backspace each time so just what you'd expect when you're you're submitting this type of of thing in this type of application so next we're going to encode the URL so why we're doing this we'll see in the next portion here is we're going to be adding a spinner and within that uh place where we're adding that spinner we have a wrapper and it has a data attribute of gallery image so why we're adding that is at the end once the image gets loaded in from the server is it's going to look again to that encoded data gallery image and it's going to replace it so the next thing we're going to do is append the item so initially it's going to be a spinner and once we get a response from the server it will be the image we're going to add this container this Gallery item to the the gallery then from there we're going to make a post request and the post request is going to be to localhost 3000 we're going to set up an endpoint on the back end that's has the route of API slash prompt uh what we're going to actually send over to the server is going to be the model name which is Dolly and then it's going to be the prompt which is the user's query and then from there we're just going to take the response and convert it to Json so we'll be able to interact with it since we're using a fetch request so once we've done that we're going to head down here and I added a condition here in case you want to build on this app so once you're familiar with using the back end of the openai API you'll be able to build with their gpt3 model if you choose so I added a few conditions here and there so you'll be able to easily expand this if you so choose so if the response from the server has the type of image what we're first going to do is we're going to again encode that query and based on the encoded query is we're going to reach for that element in the Dom and then we're going to replace the response with the image URL because the data key will be an image URL and then the alt text Will Be The Prompt so where the prompts are going to make a 360 so it's going to go to the server and then come back and part of that is to use for alt text but you might also want to maybe add the title below the image potentially if you wanted that sort of look so we're going to go ahead and save that and then once we've saved that we're going to head over to our back end so I have this in another vs code workspace and another folder so just make a new empty folder and then once you've done that we're going to go ahead and npm init Dash y EP and the reason that we're doing this is because we're going to be installing a few packages so we're going to be installing Express open AI body parser and Dot EnV so go ahead and install those and the next what we're going to do is we're going to initialize a couple files so in index.js and then a DOT EnV and then since I already have those within the the directory here I'm not going to click enter but just so you have uh the same setup just go ahead and do that and then from there we're going to go over to the openai API so we're going to go up to the top right hand corner where our initial is and we're going to click view API keys and then once you've done that you're going to create a new secret and you're going to copy that over so once you've copied that over we're going to go into our DOT EnV so since I already have my API key within my DOT EnV I'm just going to show you within this.env example but you should be putting yours within the DOT entv so we're going to have [Music] um the dot EnV say open AI underscore API underscore key and then you'll paste in your key right after the equal sign make sure you don't put it in a string or or parentheses or anything like that just paste it right in and then once you've done that save the file close it up and then we're going to hop over to the index.js so the first thing that we're going to do is we're going to require our dependencies that we installed so we have openai that's how we interact with our API we have Express which we're going to be using to establish our server we have body parser which works in tandem with Express so body parser will handle the post request when it comes in and be able to get it in a format where we'll be able to parse it properly and then from there we're going to require.env so we can access our environment variable and then from there we're just going to instantiate our Express op after we instantiated it we're going to make sure to configure cores this is something that's easy to forget you know a lot of times you'll set up a application you'll set up the back end and then you realize as soon as you get to the front end that oh you have a chorus error and you need to include course so we're going to include that early on here then once we have that we're going to set up our endpoint so like I mentioned it's going to be to API slash prompt and then we're just going to log out the body so what comes in from the front end and then again this is where we could build out so there's a condition here to check if it's Dolly and then if it's Dolly we're going to take the prompt and we're going to pass the prompt within our prompt Dolly asynchronous function so in a moment we'll see what that looks like essentially if it's successful it's going to return the URL of an image as a string and then once we have that we're going to send it back within the data key we're going to specify that it's an image and then we're going to send back the prompt as well which we we saw that we are going to use for the alt text so from there we'll start our server we'll configure our open AI API and then we'll set up our asynchronous prompt Dolly function so just to break this down we have a try catch to handle any errors that could come through we're going to query it we're going to specify the size based on 256 by 256 you could also go up on this feel free to if you want I have this set just to use fewer credits within their their API that they give you and then once we have that we're just going to go ahead ahead and save it and then we're going to start our server so we see the servers running on Port and now if I go over to our front end and I write a query let's just say a cat that looks like sushi we see over here on our back end that the query came through the model The Prompt and then the image comes through so there's a cat that looks like sushi we can specify dog cat again horse hamster Etc so obviously you can make some more interesting queries from that but that's basically it so hopefully this is a boilerplate to get you started using the openai API and Dolly and and building your own application so I'm curious to see what you build and hopefully you enjoyed this so if you did please like comment subscribe and until the next one