🚀 Full-Stack App 💻 w/ React 💬, OpenAI, Express 🤖, Node 💾, DALLE 🧠 & GPT-3 🤖

--- type: transcript date: 2023-02-07 youtube_id: 1hNtGjBcqS4 --- # Transcript: 🚀 Full-Stack App 💻 w/ React 💬, OpenAI, Express 🤖, Node 💾, DALLE 🧠 & GPT-3 🤖 okay welcome so in this series I'm going to be showing you how you can build a full stack application leveraging the open AI API we're going to be integrating Dolly we're going to be integrating GPT um on the back end we're going to be using node.js and Express on the front end we're going to be using react and we're going to be able to do all of this in about 10 minutes time so I'll just demonstrate quickly how this works so if we search an image here an alien holding a book we see an alien holding a book and then if we go to GPT we can say what is an alien all right so this is what we're building let's dive into it okay welcome back to the next one so in this one I'm going to be showing you the environment that you need to set up and some of the things you need to install so as you see here I have a couple empty folders I have a backend folder I have a front-end folder and we're just going to be initializing some files installing a couple things and just getting going so the first thing that I'm going to do is I'm going to initialize the back end to install some packages and then once that's installed I'm going to install a couple packages so I'm going to be installing Express I'm going to be installing body parser open Ai and Dot EnV and then while that's loading I'm going to go over to the front end here and I'm just going to put in MPX create react app at latest and I'm just going to call this open AI gooey and then last in the back end I'm going to say touch dot EnV and index.js all right welcome back so in this one we're going to be going over to the openai website to get our API key and then once we have that key we're going to be heading over to our back end and plugging that in so one quick note on this is you don't need a credit card to sign up for API key access you just need to make an account so the first thing we're going to do on their website is go to the API Link at the top and then we're going to sign up if you haven't already or log in now once you've logged in you'll have this screen that you'll be greeted with and then from there we're going to click in the top or right corner we're going to click view API keys create new secret and then we're going to click copy so once you have that we're going to head over to our backend folder open that up and then we're going to open up the dot EnV file and then we're going to put in open AI API key equals and then paste in your key there okay welcome back so in this one we're going to be setting up our first interaction with the open AI API so we're going to head over to their website again and we're going to go to examples so in this one I'm just going to use summarize for a second grader and open that in the playground here and then I'm going to click view code just make sure node.js is selected and then we're going to take that bit of code and paste it over here so the first thing that we're going to do is we're going to wrap this away in a in asynchronous function here and I'm going to call it prompt a i equals async okay that's our first part and then we're also going to require a couple things here so we have open AI required already we're also going to require dot EnV and then we're going to initialize that and then finally within our function here we're just going to return the data and then we're going to prompt it here and let's just test this to make sure it's working and you can see it's working based off our prompt and the last thing we're going to do is we're just going to switch out this hard-coded text here and we're going to replace it with prompt so then we can do something like what is JavaScript let's try and log it again okay there we go all right welcome back so in this one I'm going to be showing you where to get the example code to set up Dolly we're going to be setting this up in a similar way now if we go back to the GUI on the openai website and we click the overview overview page if we click image generation and we copy this example here so similar to our prompt AI we're going to make a function and we'll call it prompt dolly and then from there will return and then similar to the example below I'm just going to make sure that this works so I'll say prompt dolly and then we'll change out prompt here and let's see our results and if we open this up and we have a picture of a white Siamese cat all right so in this one we're going to be setting up our Express server so the first thing that we're going to do is we're going to go ahead and require Express and body parser so once we have those we're going to go ahead and initialize Express and body parser and before we forget I also want to allow for Cores this is because we're going to be using this on the front end to interact with so I want to make sure that we don't forget about this um before we got in the front end section so I'm going to go ahead and just accept what it writes for me here and then finally once we have that we're going to I'll first listen for our server and on this one I'm gonna I'll do it on Port 4000. then once we have that we're going to go down here and we're going to make our endpoints and I'm just going to change this a little bit I'm going to change our endpoint to be GPT and then once we have that endpoint we're going to reach into the body and get the prompt that the user queries from the front end once we have that we'll await our asynchronous function and then finally once that resolves we'll send that over and then we'll also do the same thing for the dolly function that we have and set it up with its own endpoint and then to test these I have an extension called thunderclient in vs code it's similar to postman so just to be able to test your apis that you set up and then what we're going to do is we're just going to test it oh of course we have to remember to start our server once it started we'll go ahead and test it there we have it in the next ones we're going to be hopping over to the front end okay in this last video we're going to be finishing up our application here so in this one we're going to be writing out our jsx now within our jsx the first thing that we're going to do is we're just going to take out that example GPT div here and we're going to open up um the return statement instead so we're going to have a wrapper that just wraps around everything and we'll Center it to the middle of the screen and then instead of GPT or gpt3 anything to do with that we'll just set let's say open AI as the title so once we have that we're going to get started on our form so on our form we have our handle cement with the logic that we wrote here and within that the first thing that we're going to have is we're going to have the input of the text that the user puts in so on change so essentially with each keystroke it's going to call that hook and it's going to set that value so once we have that we're going to go down and we're going to make that select box so the select box as we see over here is the GPT or Dolly selection which will alternate between our endpoints depending on what is selected so the next thing that we're going to do is we're going to just have a button so a simple button this will submit the form and then finally what we're going to have is we're just going to have a place to Output the results so an output and it's as simple as that so if I go ahead and save this and let's go over to GPT and let's say what is Javascript we query that we can see there's things we could do to improve this we could make a little loader perhaps for when the the results are are loading but there you have it you see okay now we have a result and then what if we have Dolly let's say a photo of a car and there we have it so that's that's some boilerplate that you can take you can obviously uh you know take this and tweak it and use it however you want um so yeah hopefully you like this if you did please like And subscribe and enjoy until the next one all right welcome back so in this one I'm just going to be showing you how you can incorporate Tailwind into this project so what we're going to do is we're going to copy this first series of commands from their documentation and then we're going to exit out just for a moment on our front end uh react app and we're going to paste in those commands wait for those to install and now once they're installed we'll go down and we'll copy this next configuration that we're going to put in this Tailwind config that was just initialized go in and save that and then finally we're going to be adding these directives within our CSS file so for this we'll just go in find our index CSS within the source folder and save that now finally we're just going to run npm run start and and now we should have our Tailwind initialized to get going in the next one okay so in this one it's the second last video we're going to be setting up our logic within the component in this video and then in the next one we're going to be setting up the adjacent jsx that ties into this logic so the first thing that we're going to do is we're going to install the last library that we need and we're going to be using axios for this and we'll just make sure to require axios and the next we're going to set up three different hooks so we're going to set up one for our input of where our user puts in their input we're going to put one for our output and then last since we have a drop down to toggle between the endpoints we're going to have one for our endpoints and we're going to have a default value of GPT okay now next we're going to set up a function to handle the submission all right so once we're in here we're going to use axios to make a post request to our endpoint and our endpoint is going to be localhost 4000 in this case and instead of just input we're going to be using prompt because if we remember on the back end the the what we used as a key was prompt to handle the query so once we are done we're going to say then and then within here before we just set the output since we know we have images or text we're going to just handle that here so if it's an image render an image if it's text render it within a P tag so we'll say if response that uh dot image URL so if there's a key of image URL go ahead and set the output to be an image with a class name of let's say mt4 leveraging that Tailwind we just installed and then we'll take the rest of the suggestion here and maybe just change out the alt tag to say dolly output not the perfect alt tag but we'll use it for now and then else so if it's not a oh and I just noticed a little error here so if it's not an image URL that gets returned what we're going to do here is we're going to go down and we're going to set the output to A P tag and I'll say rest data response all right and then the last thing that we're going to do here is we're just going to handle any errors and just log them out if they if they come up okay in this last video we're going to be finishing up our application here so in this one we're going to be writing out our jsx now within our jsx the first thing that we're going to do is we're just going to take out that example GPT div here and we're going to open up um the return statement instead so we're going to have a wrapper that just wraps around everything and we'll Center it to the middle of the screen and then instead of GPT or gpt3 anything to do with that we'll just set let's say open AI as the title so once we have that we're going to get started on our form so on our form we have our handle cement with the logic that we wrote here and within that the first thing that we're going to have is we're going to have the input of the text that the user puts in so on change so essentially with each keystroke it's going to call that hook and it's going to set that value so once we have that we're going to go down and we're going to make that select box so the select box as we see over here is the GPT or Dolly selection which will alternate between our endpoints depending on what is selected so the next thing that we're going to do is we're going to just have a button so a simple button and this will submit the form and then finally what we're going to have is we're just going to have a place to Output the results so an output and it's as simple as that so if I go ahead and save this and let's go over to GPT and let's say what is Javascript foreign we query that we can see there's things we could do to improve this we could make a little loader perhaps for when the the results are are loading but there you have it you see okay now we have a result and then what if we have Dolly let's say a photo of a car and there we have it so that's that's some boilerplate that you can take you can obviously uh you know take this and tweak it and use it however you want um so yeah hopefully you like this if you did please like And subscribe and enjoy until the next one