OpenAI Tutorial #5 - Adding a Frontend

Key Takeaways

all right then so now we've built our backend API which sends requests to open AI to get some AI generated content so it grabs that and then it sends that back as a response to the clients now I want to make a front-end web page to hit this API and do something with those responses like show them in a browser so the first thing we need to do is make a public folder for all the public files accessible to the browser including our HTML file and any other assets that we might need like a style sheet or images so let's create that first of all and in order to tell Express that this should be a public folder available to the browser we need to use a little bit of middleware so underneath where we use the Json middleware we can say app.use to use some more middleware and then this time we're going to say express.static and invoke that function to say that we want to make use of a static folder which is in our case going to be the public folder so we say to express look this is the folder public that is going to be accessible to the browser okay so now we'll be able to access any of the files inside this folder at the root of the application so just localhost Port 4000 forward slash and then the name of whatever file we want from inside here all right cool so now we've set that up let's add some HTML and CSS to this public folder okay so I'm going to add a few things to this folder first of all an index.html file and then I'm going to add a styles.css file I'm also going to add in an image I'm just going to copy this across you can get this from my repo it's just the YouTube logo and then after that we also want an index .js file because we will be using a bit of JavaScript to send those post requests to the back end all right so inside index.html I'm going to do Doc and right here we'll say YouTube meta generator and then we also in the head want to link to the style sheet so link and the href is going to be forward slash Styles dot CSS at the bottom of the body we'll do a script tag and the source of that is going to be equal to forward slash index .js all right so oops that needs to go inside quotations like so okay then so now we have those four files let's flesh out the HTML and the CSS now then instead of me writing out a whole bunch of HTML which is what you're not here to learn I'm just copying this from my repo I will quickly walk through it though this is just to save a little bit of time so you don't have to watch me type all this out so we have a nav at the top with the image of that YouTube logo inside it then we have an H1 it says YouTube video data generator then we have a container which surrounds everything else then we have a form at the top for the metadata so we give it a class of metaform title and then a label for the input span to say video title and then the input itself and then a button to submit the form that says generate metadata so that's the first form then down here we have two divs one for the description and one for the tags this is when we get a response back from open Ai and then therefore back from our API on the back end when we get that we're going to Output the description we get back right here and the tags that we get right here okay so that's the first form and that's going to be sending a post request eventually to forward slash open AI forward slash meta to get the metadata now the second form is for the image so we give that a class of image form a title then a label span for the label which is describe the image the input itself where we describe the image and then a button to submit the form to generate the thumbnail so again that's the form for sending a post request this time to forward slash open AI forward slash image I think it was and then when we get a response back from our Express app with that image URL we're going to update this image URL right here this image source now at the minute this is just a placeholder image which is a gray block but that will get dynamically updated via our JavaScript when we get a response so that's pretty much it for the HTML and now we can go to the CSS again I'm just going to copy all of this from my repo over here so if you're free to grab that I'm going to copy and paste right here so we have the ball uh the body with a few basic Styles then P tags again a few basic Styles the container with a Max width to hold everything in the middle then we have the nav at the top just with some basic Styles display Flex so the image and the texting next to each other um the image in and out if we give a Max width of 70 pixels the forms themselves the background of red and the color of the text is white inside so it's the line Center a bit of padding strip out the margin at the bottom every element inside the form that's what this asterisk is we say display block and the margin is 10 pixels top and bottom also left and right now where we output the description eventually the tags and the thumbnail we give that a background of white a bit of padding bit of margin and a border which is dashed as well the thumbnail we say text align Center so the image will sit in the center for the inputs background of Gray strip out the Border a bit of padding border radius width and margin uh the buttons again some basic styles to color it give it a border radius or the bottom or the left we're making it into like a chunky button that's what these things do right here but a padding a cursor display block position relative top zero uh when it's active so when we press it the Border bottom width is two pixels and the top is three pixels so this is a little effect we're applying right here using the top and the Border width and stuff to make it look like we're pressing a button into the page we'll see that in a second but again I mean this stuff is not really important the HTML and the CSS is secondary I just wanted to build a front end which didn't look absolutely tripe so um yeah don't worry about the CSS then for the image inside the thumbnail div we say Max width is 100 alright so now we want to preview this in a browser open this up and cancel out of this process I've just realized I've completely missed about this but never mind anyway node app again so now we can view this in a browser at Port 4000. all right so this is what it looks like in a browser not too shabby it doesn't look amazing but not tripe so we have a form at the top right here this is for the video metadata so we're going to type in our description or rather our video title right here then we generate the metadata and it's going to Output the response here and here and then down here we describe the image generated thumbnail and output it right here and this is the placeholder image to begin with so that's going to get updated so this is how it looks now we need to implement the functionality because at the minute if we do this it's just going to refresh the page we don't have any JavaScript sending a post request so let's do that now all right then so remember inside the HTML we link to the index.js file and that's where we're going to be sending the post requests and we're going to do that when these forms right here have been submitted and then we're going to Output the responses in these different divs right here so we need basically to grab these different elements from the Dom the forms and where we're outputting them and then we need to handle the submission with these forms right here and then we need to inject content into these divs right now to speed things up I've already grabbed the forms using query selector so the metaform and the image form using these classes and then the output elements where we're going to Output the data we get back we have as well description tags and thumbnails and that's the P tag inside description p-tag inside tags and then the image tag inside the thumbnail div all right so I've also added event listeners to both of the forms the metaform and the image form right here so when we submit that we find an asynchronous function and pass in the event object now it needs to be asynchronous because we're sending asynchronous request we're going to be using the await keyword and inside the functions to begin with we say e dot prevent default and that prevents the default action of the form being submitted which is to refresh the page so we're not going to be doing that so we'll start with this one and we want to send a post request to our API and send along the value that a user has typed into this input field right here okay so let's do that first okay so we can say const response is equal to a weight then we're going to use the fetch API and we're going to fetch from forward slash open API so this is going to be localhost Port 4000 forward slash open API forward slash I think it was meta wasn't it for the metadata all right so we're sending a post request meaning we have to say inside the second argument which is an object that the method is going to be post like so okay so after that we want some headers to say the content type so we say content hyphen type and that is going to be application forward slash Json like so and then after the headers we can say the body so the data that we're sending along with this and we need to send a Json string so we say json.stringify and then we pass in the object which has the title property now the title is going to be from The Meta form so that's this element that we grabbed right here and then we can say dot and then the name of the input so if we go back to the HTML we see the name is title so we can say dot title so dot title and then get the value of that by saying dot value so we're sending in the value of that input form as the title property right here which is what is expected if we go to the open AI controller up here we expect a title property on the body and that's what we're sending right here a title property Okay cool so that's the um the fetch request the post request so now down here we can get the response so const data is equal to a weight response dot Json and involt that to pass it into an object that we can work with we can log that data to the console if you want as well we can see it console.log data but also I want to update the description and also the tags div so we have those two Fields right here that P tag and this P tag sure I'm going to say description dot text contents is equal to the data we get back which is this thing right here then it's dot description because remember we have the description property on it if we go to the open AI controller go down here we have a description property and a tags property so we want the description property and then on that there is a Content property so we're getting the content of that response okay so the other thing we need to do is set the tags so tags.txt contents is equal to data dot tags this time Dot content all right cool so we've done that now we want to do the same thing for the image down here so let me copy all this and paste it in because it's going to be pretty similar so then this time it's going to be two forward slash image and then it's still going to be a post request Json and this time it's the image form and then dot prompt that is the name of I think this thing right here yes it is prompt and then dot value and that's also going to be a prompt property that we expect and then what else do we need to do so we have the response we have the data we console log the data okay so all we need to do is update the image so we can say thumbnail which remember is this thing right here so that's the image tag then we can set the attribute and we want to set the source attribute and it's going to be the data and then we send back I think a URL property on it yep we do so data dot URL so we're updating the source with the URL that we get back all right cool so fingers crossed this should all work all right then so let's give this a whirl and I'm going to say right here python crash course I'm gonna send this request and while that's working I'm going to come down here and describe the image and I will say python in a space suit floating through space all right generate the thumbnail let's scroll up okay so now we have the description back which is cool and then down here we have the different tags as well which is good so let's go down here and wait for the image now oh it's done so there we go there's a python I think in a spacesuit floating through space awesome so there we have it we have now completed this little money project where we're interacting with openai to generate some content both in text format and in image format so my friends hopefully now you've got a better grasp of how open AI works and how we can Leverage The Power of AI into our own applications let me know what you think about it and if you'd want to see any more kind of AI related content in the future some of my friends I really really hope you enjoyed this series and you learned something along the way if you did please please please don't forget to share subscribe and like that really means a lot and if you want to access all of my YouTube courses without adverts also get access to premium courses and Early Access courses as well you can do at netninja.dev you can sign up for net Ninja Pro which is just nine dollars a month and also half price for the first month with this promo code right here and for that like I said you get access to every course without adverts without YouTube adverts you also get access to exclusive course it is not found anywhere else you get access to my premium courses on udemy and also Early Access to all of my YouTube courses as well so the link to this page to sign up is going to be down below again I really hope you enjoyed this series and I'm going to see you in the very next one foreign [Music]