Advanced ChatGPT Guide - How to build your own Chat GPT Site

this video is an advanced chat GPT guide as well as a manual on how to use open ai's API platform I created a video for the basics which you can find just up here because this video is more of the advanced topics I'll just begin with what they are and how this video will be structured it'll be done in three parts the first will be the advanced prompt engineering that we'll be doing with chat gbt this is how to get the kinds of prompts and outputs that you want not just the mundane examples where people are just chatting to it the second part of the video will be jumping into the playground and really taking a closer look at the different types of models that openai provides all of them work a little bit different and it's really important to know the difference and finally we'll build an application this application will be an API running on node.js using JavaScript it's going to be able to query the open AI API layer and it's going to create prompts and pull out outputs that we want quick pause I'm gonna sponsor myself in this video I've put together a template that's already ready to go if for example you're looking to create a project using openai and even create an idea behind it and even sell it as a SAS because I've created a template built on top of react and node.js with the apis ready with authentication automatic calculations of token usage and all of this is ready to go for you guys to use and I'll be transparent on the pricing this took me over a hundred hours which means that if I was Billing at 20 an hour then it'd be over two thousand dollars but I'm putting it up for 500 it means that you get to save yourself 100 hours or more depending on how long this would take you and hopefully it gets you up and running nice and quick so without further Ado let's begin this video prompt engineering is the very first thing that I want to talk about and probably the most important whenever working with any type of AI this part that you'll learn right here will be applied to most AIS that you use so whether it's going to be image generation or text-based generation or even chat GPT understanding these principles will be applied throughout so what is prompt engineering it's essentially querying an AI in the most effective manner to get the desirable outcome now this seems pretty self-explanatory but when working with something like a chat AI we might commonly just ask it to do things the way we would normally ask a person unfortunately an AI Works a little bit different so while most of the time you'll still get an answer you can get a more desirable answer if you structure your prompt quite effectively the first prompt I've created here says on average Joe asks 35 questions to chat GPT per hour how many questions does he ask in a standard workday chat GPD provides a pretty standard answer here of 280. that seems reasonable but this isn't very useful here we can begin to see prompt Engineering in action because we're going to take a look at my second example here I'm going to ask the same question but I'm going to follow up with show the answer as a math formula inside of a code snippet the answer is essentially the same is 280 but now we get some working Happening Here we have a variable here called questions per hour a workday length and the query that creates it and finally it prints it out of course we can go even further than that we can create this as a code snippet using JavaScript specifically as you can see I'm engineering the prompts here to be more and more specific depending on the outputs that I want this is prompt Engineering in a casual sense it means that sometimes you have to redefine what you're asking to get the optimal output in this case my optimal output was having this structured as a JavaScript query or even better than that as a function I can give you lots and lots of examples like this but realistically you do have to play around because every single use case will be a little bit different the goal here is to continuously create better and better prompts until you get that desired outcome and don't simply assume that maybe the AI cannot generate it of course this is a more advanced video on chat GPT as well as prompt Engineering in general and in order to better understand all these Concepts it's beneficial to log into the openai website and head over to its main dashboard here here you have this page called examples and under examples you're going to get lots and lots of different ways that you can utilize the AI to complete different tasks what's useful here is that openai has gone in and actually engineered some of the best prompts as well as responses that chat GPT or any of the other models can produce so going through all of these understanding how they work as well as testing them out yourself will be a perfect way to learn prompt engineering I'm not going to go through all of them I'll just go through one or two to give you a better idea of prompt Engineering in general and this should give you a broader view of how to structure your own prompts the first example here is one of the best for prompt engineering it's called questions and answers and there's a few things happening here I'm going to open this up in the playground which we'll be looking at shortly but it should be a prime example of how you can start engineering prompts even inside of chat GPT we're going to be doing a number of things here the very first is this section just over here this is saying that I am a highly intelligent question answering bot it's priming chat GPT or in this case the model text DaVinci zero zero three as to what it's doing it's going to ask questions and answer truthfully with responses of unknown if it doesn't know what it's doing but there's more to this there's a few examples that we're going to provide it as to how we want it to answer the first says what is the life expectancy of someone in the United States rather than just saying 78 years we're primary to give a more lengthy and human answer of the human life expectancy in the United States is 78 years this means that in future example responses from the AI we're going to get more lengthy answers and this is sort of how we're priming these prompts the more examples that you provide chat GPT or the more examples you provide any AI the more it writes in tune with that same language here I'm going to ask the model how many years it's been since the US have sounded it's going to say 244 years since the US was founded unfortunately this actually might even be incorrect because of the fact that the AI model is out of date but this gives you an answer that basically is very similar to the Past examples this is an example of how we're priming the AI to provide us answers that we want rather than a long description or an essay we're asking it for short very specific questions with short very specific answers let me go back to the examples over here and this time I'm going to go to another one that I kind of like called the airport code extractor this one has a lot less examples because it's much simpler to create it simply extracts the airport codes from this text now this is the context we're providing to the AI as to what we wanted to do then we have a working example we've got the text which is I want to fly from Los Angeles to Miami and the airport codes which are well I suppose LAX and Mia then we've got our second example here which we can immediately submit and we get the results we want from the examples we had previously let's see how this would look inside of chatgpt I'm going to remove this and copy this into a brand new session or a brand new chat here I'm going to paste it in and let's see what the response is back here we should essentially get the same sort of results but because chat GPT is primed slightly different to always have answers more like a chat bot it isn't exactly the same but it more or less is but hopefully this gives you an idea of how chat GPD is technically just like that playground interface that we've been just utilizing now these are also kind of basic examples if we want a more advanced example let's take a look at this SQL translate one if I open this up in the playground we're going to see very similar context to what we saw previously the context here being this is a postgres SQL table with their properties then it follows on with that actual table and the specific properties and then finally we have a query the query is to list the names of the Departments which are employed by more than 10 employees and it preps a select query here for that this is now quite easy from that context for the open AI well I believe this model is called code davinci-002 it's more specific for code to provide this code example and I suppose this is where we start moving away from prompt engineering to having a look at the different models that openai provides us to engineer different types of outputs because so far chat GPT is only just one model but there are a lot lot more before we get into that if you want more information about prompt engineering if this still wasn't enough there's an entire section here under documentation guides and introductions where you'll get to learn about how to do prompt design for basic things like show and tell or providing data if you want to do things like classification or for example generating text or even doing conversations or transforming different bits of information it really depends on what your use case is but there's a lot of information that is worthwhile for for you to read and go through here we're going to take a look at models now this is the second part of this video which I think is very important to understand because when you're going to be using open Ai and any of its features you're going to be utilizing different types of models chat GPT is technically one type of model one specific type made for the general public and because of that it's also Limited in a way because it's been pre-designed to be very safe very simple and it might not have the best outputs that you want this is why understanding the different types of models that open AI provides is the beneficial way to create the types of outputs that you want depending on what you're building so what is a model it's essentially the AI and how it's being trained very similar to how we Prime the AI to information we want in the prompts so our models Prime to the way that an AI works gpt3 is what most of the models are based on but there are are four main different ones which are worth knowing there's Da Vinci Curie the bug and Adder they all have different prices attached as well and complete different tasks let's take a look at our very first and most powerful one which is Da Vinci Da Vinci can do complex intent cause effect summarization and much more it's the one that most things are based on probably chat GPT as well it's able to create very good blogging and outlines and lots lots more that especially do with creativity the next one is Curie it costs a little less than DaVinci and is a little bit simpler it still does things like land weeks translation classification segmentation as well as summarization but it will need more training data to be able to perform the same sort of functions as DaVinci does next we have Ada and the bug Adam is the simplest and cheapest one to use it does very simple things like parsing text classification address correction and keywords it basically does these tasks very quickly but it needs a lot more training to be able to perform at the same accuracy level as models above it the bug is a more or less in between between Curie and Adda but it does things like classification as well there are the Codex models now for the Codex models we have code DaVinci 002 and code crushman001 both of these work a little bit different crushman is slightly more capable than Da Vinci and it's slightly faster too but it's very simple in this task where DaVinci is more of a language model that also can do code so you can ask it more vanilla questions like you would in chat GPT and finally we have here one called the content filter and this might be something you've stumbled across when you've generated a prompt on chat GPT that might have been malicious or harmful in a way and suddenly it gets blocked this is because it's gone through the content filter model and it's been deemed unsafe and therefore that information gets blocked away as I mentioned before there is a pricing attached to all of these models you might have seen it before if you go to open AI pricing and have a look at the image as well as language models here you can see adap bug Curie and DaVinci and their pricing attached per token per a thousand code tokens to be specific a thousand tokens is about 750 words so one paragraph is maybe say 35 tokens and a token is approximately four characters or 0.75 of a word it's essentially how the model has been trained but it's a complex thing if you want to learn more about tokens and pricing in general let me know in the comments below there is also this tool here that tells you exactly how many tokens you've used and what that looks like from the AI model now we know know a little bit more about the different types of models we know about the different types of costs what does this look like in a practical sense what do these models actually output in comparison to each other let's take a look in the playground before we move into the coding segment of this video let me start off with a pretty simple example I'm going to select the SQL translate which we looked at earlier this currently uses the code DaVinci model 2. if we select to finish the statement off it gives us a very good piece of code but this is because it's primed to do so if we were to open up our text adda001 model and ask for the same thing the response would look very different it would not even be able to fill out the full response like we had previously and here you can see that it hasn't done a very good job this is where we might need to give Ada a few training examples of what we want to do but ARA isn't the best model for this kind of work if we actually go back to our examples and try try another one such as Curie it might be closer to being able to create such an output but again it's kind of still far away from it doesn't really understand what it's looking for so it can only extrapolate with limited information this is where models such as even text DaVinci would do a much better job well it's not a say model for programming it does have a lot more to based on because DaVinci is a more expensive model trained on larger sets of data and this is what I mean by these models essentially producing different types of outputs of course DaVinci will always provide the best type of outputs but for example code crushman here might also produce a very good output for this type of query and as you can see it did so very quickly too there's one other important thing to take a note at when working with a lot of these models and it's the temperature I would say this is one of the most important characteristics to play around with I'm going to show a case how it works in different ways but temperature is essentially the randomness that the AI outputs based on its models we have a zero being that it is very strict with the information whereas a one is meaning that it is very creative and open to suggestions this is interesting because we'll take a look at how this works in principle here we're using text DaVinci with a temperature of zero and we want to fix the grammar of the sentence so it's a very simple structured thing that we don't need any creativity for we simply are fixing the text whereas for example something like summarization of a second grader's uh well description here of Jupiter this needs it to be a little bit more creative so it's on about a 0.7 on the scale here one of the limitations to chat GPT is that the temperature is probably locked into what the actual model is set to whereas if you're building your own model or even if you're for example using one of the models here you can Define the temperature depending on the prompts and outputs that you want it gives you a lot more fine control there are of course a few other variables that you can utilize here and if you want to investigate and learn all of them let me know because I might do another video on them but this can get very complex very quickly I want to create an advanced course but not an expert one maybe that's an entire different video there is one final thing that I want to let you guys know about models and it's the fact that these are not just the only ones you can actually fine tune your own model this is complex and I could do a whole video on this but it essentially means that that you're training a model to perform the functions exactly how you want it ends up being a little bit cheaper because you're preempting that model to work how you want there is a whole guide onto how you can do this which I won't get into right now but I'll link in the description below so far we've taken a look at prompt engineering how to create prompts that provide chat GPT or gpd3 or any of the other models with the context of what they're doing examples of how to do a thing and then produce the outputs that we want we've had a look at the different types of models because they all work a little bit different with DaVinci obviously being the best now it's time to jump into the technical part where we interact with the models from open AI through its API layer and create our own API to start interacting with I suppose our own customers let's begin you're gonna need a few things to get this project up and running the very first will be a copy of node.js of the latest stable version I think think I'm running 18.12.1 at this time the next thing we're going to use is create react app so with create react app this is going to basically be the front end for our website we're going to pull this in and then finally we'll be using Express for the back end finally you'll need to have a instance of openai signed in and you'll need to be able to identify and utilize your API key we'll get into that shortly but after you've logged into openai you'll want to head over to the documentation and then over to the API reference guide here there'll be more information if at any point you get stuck the first thing I'm going to do is open up vs code now and I'm going to run npx create react app and I'm going to create an app called the I suppose chat GPT API SAS seems like a pretty good enough name I'm going to select yes to proceed and this will kick off the front end which we're going to use but I'm going to make this also the back end and it's gonna work in a dual sort of nature to make life easier I'm just going to open the folder here and browse straight into it it's a pretty standard package and I should be able to just run npm start and we'll get an instance of create react app here it is running quite well the next thing I want to do is create a web server and this is going to be in a file called index.js and it'll be the backend server where the API requests happen I'm going to use GitHub copilot to write this but I'll also explain what's happening in the background I'm going to use a Express server which will handle API requests coming in and respond back with a Json object it will use body parser as well as pores so we'll start off with a const require it's going to require Express we're going to also require body parser we're going to also require cores which I forgot to install we'll Define app equals Express we'll Define the port then what we'll do is add body parser.json to the app we'll also add cores which will install shortly after that we'll Define our first route which will be a simple hello world which I'll Define just over here and I think we could just listen to it to test it out now so let me finish this off now all we have to do is actually run it so here inside of console I'm going to run node index.js we are missing cores so let me actually install that npm install cores dash dash save and with that let's just run node.index.js it's running on Port 3000 we can click it and we've got our hello world request there perfect now let's head over to SRC and head over to app and let's delete everything in there we're going to use GitHub copilot to create our react component here what I'm going to do is say create a react component that inputs a text area message and then performs a fetch request to local post 3001 get back a response as a data Dot message and displays that message in a box below now that's pretty descriptive let's see if it can do that so we're going to preempt it here with import it'll import reactive we've used State it'll create the function for app and this might take a little bit because it's a bit of a larger but here it's created one if we look closely so let me actually close off the menu here we've got message set message response set response we're calling a fetch request here on a handle submit as a post and we're applying here a Json object we're stringifying that with the message here we're then also passing and saving that response just over here here we have a text area which we're setting the message and we're doing a submit and here we're grabbing that response from that form so I think that's all good I'm going to hit save on that the only thing I feel like I'm missing here is an export default app which I think it might have forgotten and I think it's yeah the rest looks good here heading back to index.js we probably want to change the port to 3001. we want to change this response here to send over a message saying maybe something like hello world and you want to change the get request to a post request hit save on that we're going to probably have to relaunch it now because we've made changes so I'm just going to run index.js over here and now we should be able to refresh the browser type in anything in this box submit and we get a Hello World from the web server now our front end and our backend are working and connected now comes the fun part we're going to import well open Ai and gpd3 and its models and start using them I'm going to head over to the website to start off with and we're gonna head over to the introduction for the API and scroll down here to importing it I'm going to import it into our node.js index.js file here at the very top and this is using an import statement which we can't technically use because I haven't set the types for that so I'm gonna just do const and we're going to do configuration actually we'll do something like open AI is equal to require open AI Library so I think that's okay now here I'll decom well I'll do some decomposition and I'm going to pull out configuration and open AI API from open Ai and I'm going to pull these through const so that's pretty standard then I can delete the import statement and we can move on to the next part now we've got a few other things happening over here for the configuration we've got the organization ID as well as the open AI key then we're setting this under the variable here open Ai and we're doing a response to pull in the engines which I'm going to skip for the time being but we need this API key which I recommend under a process environmental key but for the time being I'm just going to jump into my account head over to API Keys create a brand new one and copy and later delete this one but for the time being I'm just gonna plug this guy in so that you guys can see this working in action with that all configured and defined we should be able to start using it now let me just make sure that I can run node index.js without it crashing which we can then let's head back to the documentation go to completions and copy over this completion of our response this completion can go inside of our API request that we generated here as a post uh I placed it in here so it's doing a response a weight open AI create completion using DaVinci model 003 with a prompt say this is a test Max token 7 temperature 0. I've changed this to an async function because we've got an await here and once we have this await I want to well console log out the response so let's actually console.log that run up node index.js jump back to our react app just submit anything go back to vs code and here's our response if you take a close look at the response we have our data which also comes with choices and those choices I I believe where we have most of our content so what I'm going to do is I'm going to console out now response dot data so it can be a bit more specific we're going to reboot our web server and do another submission now when we have a look we get one main choice here and this Choice says well essentially index 0 on choices has a text prompt that says this is a test indeed and this means that this has worked but there's a few things now we can start to begin to do this means that our response here if we do get one so let's do if data or if respond to data then we go if say respond data choices then we can do a response here and this response will be the data text so let's plug all of this in here under array 0 and we'll pass in text hit save on that and what this has effectively done now is that when openai comes back with information from its response or passing this to the front end let's refresh this so I'm going to rerun the web server I have added one extra indentation here which I shouldn't have let me remove that and rerun it have I have I added one to many or one to few interesting interesting uh let me just redo this one more time if response dot dot zero dot text then we can respond with wow GitHub co-pilot just wrote all of that for me I'm going to hit save on that uh do in node indexed that is listening and then we can go to our web server uh refresh type something in and what has happened this is a test uh this is indeed a test so now our back end is querying open Ai and it's passing that data to the front end all we have to do now is create prompts in here which should be the easiest part because we're already passing those across so let's actually jump back in here we can now do say const message equals rec.body that message I think was what we're passing here let's make sure we're actually doing a fetch request for asking a body and that body has the message that message is just over here and I'm going to pass this straight into the prompt uh here it is and ideally we get a response of say 10 tokens let's hit save on that now let's refresh the web server and finally let's go in here to refresh and go is this chat GPT question mark and then we should get a response and that response is no this is not chat GPT then what is this model and the model here I think will be a linear regression model funny enough we are now interacting with the DaVinci model directly through this web interface this is the basics of creating an interaction on a front end on a back end of your own server that then talks to open AI now that we've got this running we can begin to do the fun stuff anyway everything up to now might seem complicated or easy depending on how much programming knowledge you have but now that we've got these Basics up and running we can start really playing around with cha gpt's models DaVinci Ada the bug and Curie and we can have a look at how we can create custom prompts inside of say JavaScript and complete different types of tasks very similar to what we're doing in the playground let's begin we'll start by having a look at how to do some prompt engineering straight in here but it's going to be invisible for the user here we're going to say pretend you are Steve Jobs answer with motivational content examples oh actually we don't even need examples I think let's do now uh Steve how can I help you today question mark person I want some in motivation Steve you are amazing you can create any type of business so we've engineered a simple prompt here now person we're gonna do a full stop and we're gonna finish the message off just over here this is going to be our defined prompt here we're asking open ai's model to pretend to be Steve Jobs we were telling it what to do we're giving it an example of what Steve would say and what a person would say and then what Steve would say again the next message in this example is what the person will ask now we'll get a response back from Steve so here I'm going to select a save on this we're going to restart our web server then in the app here we're going to change this we're going to call this application just over here a Steve Jobs app uh maybe Steve Jobs chat app uh then in here where we have our text area we can put in something like ask Steve anything hit enter so that's our react app also updated so here it is our Steve Jobs chat app ask Steve anything Steve how do I get the motivation to start a business submit and here we should get a response back believe in your ideas or believe in yourself and your ideas there's a few things that's happening here that you might have noticed the first is a question mark has appeared this is because we don't have a question mark at the end of our prompt so chat GPT has sort of filled that out with us for us as well as put in Steven here so what we really need to do is update the prompt a little bit to give better answers so the first thing we're going to do is jump back in here and instead of just finishing on person we're going to break the line over here we're going to finish with a question mark just in case and then we're going to pass in Steve and this will be the end of our prompt that way as soon as we get a response it's immediately what Steve's saying and not starting off at this question mark the next thing we're going to do is jump into the app over here here where it says response I'm going to actually pass this response in just over here and pass in a question mark actually I'll do an and sign because if the response exists then it'll print this div then in here I'll pass in Steve I'll pass in the response which is just over here I even might bold this section and hit save let's restart our web server and our react app which I accidentally just did and over here we're going to run this up again so ask Steve Jobs anything uh should I go fishing today I'll hit submit and here we go fishing can be a great way to relax and clear now this looks much better we've got a bold Steve answering the answer straight away but it feels like he stopped Midway this is where we can jump back in and there is a limit to how many tokens you're using as a response you want to create this limit so you're not overdoing it and using too much credit so I'm going to increase this limit to just 100 at this point in time just so that we get a nice large answers there may be limits depending on what you're trying to do but this is just an example so should I go fishing let's try that again this time our response is much larger it says fishing can be a great way to relax and enjoy nature but if you want to create something that is long lasting in fact blah blah blah anyway now we're getting somewhere we're creating a Steve Jobs chat up this is sort of how Chad GPT Works in a way there's predefined examples predefined structure as to how it should answer but it is limited to that knowing what you do now you should be able to create an application that can pretty much do anything let's create another example of that you are a console terminal answer as if you are receiving commands from a user and receiving should be spelled correctly then I think we'll just do this without any examples we could do better examples I suppose but I think that should be enough so let's hit save on that restart our server and then I'm gonna jump back in here refresh type in LS submit it should list out the folders in our pretend directory so listing directory content readme index.html style.css Crypt so it's sort of just made that then I could do something like a cat readme.md hit submit on that and it'll probably just make something up read me this is a sample readme file usage but this sort of gives you an idea of how we've tricked open AI into thinking it's an operating system and that is receiving commands from a user and trying to extrapolate what sort of outputs should be generated based on those commands I hope this was Advanced enough otherwise maybe I have to do an expert video I also have this template that is predefined and ready to go for you guys you can play around with it have lots of fun create your own business even and if you do let me know in the comments below otherwise I hope you guys enjoyed this video if you did don't forget to like And subscribe it really helps the channel out if you want more open AI content and if you have ideas around that let me know as well see you in the next one

Channel: Adrian Twarog

Views: 533,087

Keywords: advanced chatgpt, chatgpt, chatgpt tutorial, openai, ai, chat gpt, chatgpt guide, guide chatgpt, advanced tutorial chatgpt, tutorial openai, openai tutorial, openai api tutorial, openai chatbot gpt, gpt 3, gpt3, open ai, chatgpt advanced guide, website, coding, js, chatbot, javascript, api, chatgpt api, chat gpt api, chat gpt examples

Id: bB7xkRsEq-g

Length: 37min 9sec (2229 seconds)

Published: Wed Dec 21 2022