OpenAI With JavaScript (GPT-3 and DALL-E in Node.js)

hey welcome to my channel do you want to use JavaScript to create an artificial intelligence web app where a user could just say hey paint me a picture of a Calico playing the guitar or create an image of a Basset Hound riding a skateboard or write me a hundred word essay on why mayonnaise is disgusting well congrats you found the right video in this video we're going to learn how to use GPT Dolly and open AI to create an artificial intelligence powered web app without further Ado let's get started okay so to get started we need to have node.js installed on our computer now yes obviously you can use openai with different languages like on their official documentation the first language they list is python however if you scroll down just a little bit you see the very next language they list is node.js Javascript and node is what I'm most familiar with so that's what I'm going to use cool so in order to use node just visit the official node website nodejs.org go ahead and install the L LTS version cool once you've got that installed I'm just going to create a brand new folder on my desktop it's completely empty you can name it anything I named it simple example cool let's open up that folder in vs code okay so in this new empty folder I'm going to say npm init Dash y that's going to create sort of an empty grocery list of the different packages that we need and now we're ready to install the open AI package so you would just say npm install open ai go ahead and press enter cool so that downloads all the files we need now we just want to create a file where we actually create a script right where we actually program something so I'm going to create a new file you can name it anything but I'll name it you know for example like index.js cool now in this file we don't need to reinvent the wheel uh the official documentation already has code that we can borrow so from the official openai website from their documentation home page there are more specific guides about you know text completion or image generation but I like to get started by just clicking on libraries and then right where we were just a minute ago where it says node.js Library here's a bit of snippet code you can just copy and paste to get started so I'm just going to select you know these lines of code copy that paste it into our file cool so we've already installed the open AI package so we're good to go there we do however need to add our API key I can't give you a key it needs to be your secret key so let me show you how you could get your own key go to the official open AI website and click on the API Link in the top navigation and then just sign up for a free account as of this recording I didn't even need to enter a credit card or any kind of payment however did ask me you know what am I going to be using this account for I haven't tested all the options but I know that if you click I'm exploring personal use it's going to let you go through just fine for absolutely no cost to you cool so just go ahead and get signed up with your account then actually log into your dashboard on the openai website okay and then go ahead and click on you know this little icon or Avatar or the first letter of your name from that menu that appears just click on this view API Keys link cool so you can see I've already created one key you won't have any Keys listed here yet just go ahead and click the button that says create new secret key cool now it's going to give you this long string of text here's the deal you need to save that somewhere on your computer maybe just create a text file on your desktop or you can just you know save it in the vs code file but the point is open AI is never going to show you this full value again so it's you know for your own security it's up to you to keep track of this value but with that brand new value in your clipboard just go back into vs code and here's what you're going to do where it says API key colon you know you're just going to replace that so it says you know colon quotes and then just paste in whatever was in your clipboard right here okay now what do we do next well unfortunately this example JavaScript code that we borrowed from the official documentation is not going to work right away let me explain why in JavaScript you can only use the await keyword right here if you're within an asynchronous function so the documentation is sort of assuming that you're aware of that right so here's what we need to do down at the very very bottom of this file let's just say async function and you can give it any name you want like unicorn or pizza why don't we name it just like start or go or something generic so function parentheses curly brackets leave the body of the function empty for now but then right after the function definition just you know call or execute the function cool now the idea is that inside the body of this async function let's just move this code because then the await syntax will actually work if it lives in an async function so I'm just going to grab this code just the const response equals code this block of code just move that or cut and paste it to live inside this new function beautiful cool now here's the fun part let's give the AI a way more interesting or fun prompt than just you know say this is a test I'm going to say like write a 90 word essay on why mayonnaise it helps if you spell it correctly I think that's right is disgusting cool and then for Max tokens I believe it's not a one-to-one relationship but I believe it's somewhere in the ballpark that like one word is one token or I don't know maybe it's not that exact ratio but I'm just going to bump this up a little bit the idea is that if you were going to expose this to a public website you wouldn't want you know just strangers to be able to abuse your API and you know rack up a lot of tokens and essentially use up your quota really quickly but since we're just testing this privately it's not a big deal let's give ourselves some space to work with right that way you could say like write a 500 word essay so on and so forth cool now we're just forgetting one thing and that is to actually like Echo out or print onto the screen or the console you know the response that the AI is going to give back to us so here's what we're going to do right after this block of code but still in the body of our start function you know so essentially just right below the await line let's just say you know console.log and then we just want to log out the text that the AI generates now this is actually going to return to us a giant object with you know a ton and ton of different properties and it can be a lot to scroll through and dig through so in order to know the exact property that you would dig down to actually get the string of text you're looking for I like to go to the official npm documentation for the open AI package if you scroll down to their first little bit of example code on their example code you can see the last line of code it gives you the exact you know you dig into the object called data and then you dig into the object called choices and it's the first array in that and then you look for the text property so I would actually just borrow that entire final console.logline and then I would just you know use that here only ours is not named completion you know ours is named response so just change that to response right so response.data.choices the first item in the array.txt awesome let's go ahead and save this and test it out so you just open up your console and you're just going to say node and then whatever you named your file so like I named my file index.js technically you don't even need the dot JS so just you know node and then the file name press enter whoops I had a make believe or incorrect API key value so off camera I just input my real actual API key so let me try that one more time just node index with the API key in place you know sometimes your request might take you know three seconds or five or six seven seconds let's give it a minute beautiful let me expand that so you see mayonnaise is a condiment just a 90 word essay on why mayonnaise is gross cool so the idea is you can give it any prompt you want you could say like list you know 10 random cities in the United States and then just run that prompt again so node index give it a few seconds let's see what it gives us cool but you could give it some really fun prompts like write a song in the style of you know singer ABC or write a poem in the style of you know author XYZ there's a billion videos on the internet and tutorials about how to create really fun text prompts that's not the point of this video this video is just to get you up and running within the JavaScript or node environment so from here the sky is the limit go do your own research beautiful however before we bring this video to a close you might be thinking hey this is cool for testing node locally on my personal computer but like what if I wanted to host a web application you know publicly up on the web you know where I could give the link to my friends and family well there's a million ways to do that but I would probably argue that the simplest easiest way to do that would be to use next JS and then host it for free on the versel service you really don't need to understand anything about devops or hosting or server security they're going to handle everything for you and it's totally free and believe it or not I am not affiliated with versel or next JS I just think it's an amazing technology so this is not a video about next JS there's already a million tutorials on next.js but here's what I want to do I've already created this GitHub repository you'll find a link to this in the description or in the pinned comment but it's just an example of a next JS website and literally the only thing you would need to do if you clone this code all you need to do is go into the dot EnV file and literally just where it says open AI equals you would just place your open AI key right here it doesn't need quotes around it it's literally just equal sign and then your key that's the only change you need to make and then your example will be up and running now really quick off camera let me get this example of these files up and running locally let me show you how it works cool so I just cloned or copied that code from GitHub here it is on my desktop and I have it open in vs code I'm just going to open up the terminal say npm install that's going to download all the packages that we need and now before we start up our local server all you need to do is go into the dot EnV file and where it says you know open AI equals get rid of this value but you do not need quotes so just directly include your real API key right here and then go ahead and save and close this file cool so with your API key in place we're ready to start up our server so in the command line you would just say npm run Dev go ahead and press enter and now just go to your browser in a new tab visit localhost colon 3000 and that's it so for example for text completion right give any instruction you could say like write a haiku about JavaScript go ahead and press enter should be pretty quick you get the idea in addition to text completion I've also set up a page so down here on the navigation you can click art and this is pretty cool so what do you want a happy painting of like we could say a lake with a tiger and frog in it go ahead and press enter should take you know maybe 10 seconds at the absolute maximum and there you have it let me try another one like uh Golden Gate Bridge with a red panda on it give it a few seconds let's see AI generated this painting I like that so let me show you how this is working or why this is cool so if you dig into your code anything that's in the pages folder well let me be more specific these top level files like index that's the home page and then art that's the the painting page these files contain code that's going to be used for both server side and client-side react so this is just the user interface right like the H1 you know the input field the button that you click on the you know the navigation down here however and here's the really cool part in the API folder in the pages folder these files they're only going to run server side in a secure trusted private environment in other words the general public is going to see these files like the home page and the art page the general public is never going to see what lives in these files its server side and what's cool is we're not managing a server these are just Cloud functions or serverless functions that's why yes we included a EnV file but I mean it would be a horrible practice but technically you could include your API key right here directly instead of being even using an environment variable that would be a bad practice but technically speaking you would not be leaking it to the public this code is truly server side now just to have a little bit of fun if you go into the file it's called get painting I'll show you how I'm creating that image so it's really similar to the create text completion only for the prompt I'm giving it a bit of a hint so I'm saying a wet on wet oil painting of blank whatever the user types in by Bob Ross so that's gonna you know influence the prompt it's going to look a certain way right so this is why like if you say uh a Snowy Mountain in a forest or you know whatever it's gonna look like a wet on wet oil painting by Bob Ross so just like with the text prompts with the image prompts the possibilities are Limitless this is not a tutorial about coming up with the you know the absolute most interesting or coolest possible prompts but the idea is from here the sky is the limit for you go create something cool right come up with your own fun idea for a prompt you know you're just inputting the user's value here so on and so forth and then anyways just to bring It full circle so the example of you know art.js this is the client-side JavaScript it's just going to make an asynchronous fetch request to our API endpoint right and the get painting corresponds to this file and these are running server side so you're not leaking your API key to the public beautiful now from here you're probably thinking well this is cool how could I host this application actually up on the web instead of just you know localhost well very simple right now in a new tab just go ahead and sign up for a completely free versell account you can host next JS applications just about anywhere but versel makes it as easy as humanly possible so once you have your totally free versal account all you would need to do is push everything that we just included here up to a GitHub repo now just a tip make your GitHub repo that you're going to create of these files make it private instead of public because I have not told the git ignore file to ignore.env right so you don't want to publicly post your private key up on GitHub for the whole world to see normally in the real world you would never include your dot EnV file in your GitHub repo you would just actually go on to your hosting provider and add environment variables directly on the server environment but to make this example you know as easy as possible to just copy from my GitHub and push up I've done it this way so as long as you make your repo private you'll be okay then back in your versel dashboard just look for the new button to create like a new project so you can see I'm just at Slash new for the address and then we're just going to import from git so you can see I have a repo on my GitHub it's a private repo I named it test for YouTube it's literally just the same exact files that we have here in vs code that we copied for my GitHub right but create your own private GitHub on your GitHub account connect you know give your versel account permission to connect to your GitHub account and then you can just import from this file all of the default options are beautiful it knows that it's a next JS project so it's going to create those serverless you know server-side functions for us just go ahead and click deploy and that's really it from here it probably will take I would say less than like 25 seconds so it's building I'll check back in with you once it's finished awesome so you can see it just finished and then you just click this link open in a new tab beautiful and obviously yours is going to have a different address but the point is you can share their address whatever yours is with your friends family the entire world so let me give it a quick test what color is the sky on a clear and sunny day one one thousand two one thousand three cool usually a bright vivid blue we can click on art let's say you know a purple elephant in a swimming pool give it a few seconds let's see what it gives us it's working it's working beautiful close enough so you can share your link with your friends and family awesome that is going to bring this video to a close if you enjoyed this video you might enjoy my full premium courses over on udemy in the description for this video you'll find a link to this page on my website with heavily discounted coupons to join all of my udemy courses at the lowest possible price so I've got a course about react we've got a course about you know JavaScript both client-side and server side WordPress development databases laravel so on and so forth cool with these coupons you can usually Join one of my courses for the price of maybe like two trips to a cafe anyways thank you so much for watching until the very end of this video I hope you feel like you learned something and stay tuned for more web development tutorials take care [Music]

Channel: LearnWebCode

Views: 12,876

Keywords:

Id: RA0C_Hh9g8Q

Length: 17min 59sec (1079 seconds)

Published: Mon Feb 06 2023