Adding Your API Key

[00:00:00]
>> So the first thing that we need to do, if you look at our code, In the public folder, we do have a gpt.js file. That file has a very basic fetch system. So it's just a fetch call that will make an HTTP request and within for example chat app.js we have an OPENAI_KEY.

[00:00:30]
So let's start talking about that, so what's the key? If you have ever played with web services with third party web services, you probably know what the key is. Don't worry about the security if you know what the key is. I have already deleted these keys and I'm going to delete all the keys that you will see on the screen right now because what's the problem with the key?

[00:00:48]
The key is actually your authorization token. The key is, anyone with that key can actually charge your credit card for using OpenAI. Where can you can you get those keys? Well, after you have your account at OpenAI. And at this point you should have already, your personnel account at OpenAI, you go to platform.openai.com.

[00:01:19]
And there is a section for API keys. There you will see all the API keys that you have already created, and this is important. You cannot see the key, the keys that you have, you can see the name of the key, a part of the key and when you have created and last use it.

[00:01:39]
Let me show you what that means. I can create a new secret key now. I can say this is the Frontend Masters Workshop. Create secret key, and that's the key. I must copy and save the key right now, if I close this window, I will just never have access to that key anymore.

[00:02:04]
I can still delete that in the future. So I will copy that key and paste that key here. Let's make sure that we don't have a piece from a previous key. So that key that you see in the screen is actually pointing to my account. Anyone with that key, again, because it is important, anyone with that key will use your account and it will be charged to your credit card, so you should save that really, really, in a safe way.

[00:02:36]
Now, you know the importance of that key. So you need to safely stored that key. Anyway, I mean, a JavaScript file that is pointing from an HTML file, that is not safe. So that's why typically, we're not going to make calls in the front end to the OpenAI API.

[00:02:58]
We can, and we're going to do the first example as with this, just with the front end, but that's not a good idea. It's really not a good idea. So that means that you will always need a server, at least to make some kind of a proxy between your front end and the open AI server.

[00:03:18]
So once you have the key, by the way, remember that here you can say done, and then your key is there. In the future, if you know that someone has stolen your key, well, you can just go and delete that. And by the way, you can just refresh and see if someone is using it.

[00:03:34]
And if it says never it's still unused, so we are safe. So anyway, you go and revoke the key. In fact, if OpenAI, I think somewhere it says that if OpenAI thinks that your key appeared somewhere. So it's a public it's in a GitHub repo, they will delete the key, it will remove the key.

[00:03:56]
And once the key is removed It's not going to work, and it's not going to charge anyone. Okay, so once you have the key, we're ready to make queries. But before doing that, the place where you will leave the most initially is the playground, it's a nice thing.

[00:04:14]
If we wanna live in a playground, it's not so bad. So the playground is where we can test, we can try our prompts on how they look like. Before actually, copy and paste in that prompt within our app. The playground has different models and different modes, and the mode that we want because remember that we are not going to use all the models that are available in OpenAI, here you can see you have DaVinci, GRI, Barbash, Adda.

[00:04:48]
There are different models for different things. We're going to use Chat GBT, and that model is not in this mode, it's actually in the chat mode. So the first step is to go to the chat mode. And now we can pick the model, GPT 3.5 or GPT 4, the expensive one.

[00:05:06]
And now that you are here, you can see three sections, System, User, and Add Message. This is kind of a chat GPT interface that looks better. In fact, if you're paying for just GPT+, you have a trick. Maybe you can stop paying those $15 US per month, and just pay for the API and use the Playground.

[00:05:31]
Because it has the same functionality, and you can use GPT 4 without the cap that you have on GPT+. And you have even more things to try. We'll talk about this temperature and all that stuff. So for example, here you can express, who is the system. We can define a role for GPT.

[00:05:59]
So you can say, okay, you are, let's say, a professor explaining web development. You are funny, and you are always looking for explaining things. So you are defining the role as if it's an actor or an actress, I don't know the gender of GPT. And then I can enter a message here.

[00:06:30]
What is a message? This is the user, so this is us, humans, human user. So I can say, hello, how are you? Okay, and I can submit. This is like ChatGPT. Hello, I'm Jessica Beer Burrum so I don't have feelings blah, blah, blah, blah, blah. So I think that's probably the funny part, right?

[00:06:53]
Anyway, so and I can add more messages. And of course, I can have the full conversation that you're used to on ChatGPT but in this case, it's being charged by the token, okay? It's charged by the token not by month. One of the things that we can set up here we have a couple of settings.

[00:07:17]
For example maximum length, in this case, we can say, for example, you know what, I only want, the minimum is four tokens. So I want your answer in four tokens. Remember, a token is roughly like four characters in English. So if I say, I don't know, what's your name?

[00:07:37]
Submit the answer. I mean language, that's all, okay? Because we are stopping that answer. Of course, you can say, well, it's not useful because I was expecting like something that fits there. Well, I need to be precise with what I'm asking. So what's your name? Answer in just one or two words, okay?

[00:08:00]
So I can actually say that. Oops, sorry about the message here. Maybe that will probably work better. I'm an OpenAI, so that's better. Because I was clear about my intentions, and that's key. Anyway, so that's length, typically, four is, but you can see the maximum is 2,048 on GPT 3.5.

[00:08:26]
If we move to GPT 4, we can actually get more, but not in the playground. We can get 4,000 or 8,000, but not in the playground because I don't know why. But from JavaScript, you don't have that limitation. Let's say there are more properties here such as this.

[00:08:45]
Dappy frequency penalty, you have an explanation here, typically changing that is really fine graded. The most important thing here is temperature. That's the most important part, really important, why? The temperature is a value between 0 and 1. Do you remember that we mentioned that Chat GPT works like the prediction of the keyword.

[00:09:14]
So it predicts the next word. So if you say again, hello, how are, the most common possible next word is you. If we say 0, the model will always pick the most probable next word, so it will be you. So we are making the model predictable, just by setting temperature as 0.

[00:09:40]
When you are saying 1, we are like making more random selections. So it's not going to take always the most probable also maybe the one that comes after, or after, or after, or after. And that's how you make the model more imaginative, more fancy, that can say anything, can hallucinate more.

[00:10:05]
Because when it's speaking the words, it's not always speaking the most probable word. But typically, as developers, unless you are creating stories for kids, jokes, or things like that, as app developers, we prefer predictable answers. So if I am asking one question, I typically prefer the same answer always, right?

[00:10:29]
So most of the time, as developers, we probably want the temperature to be 0 or close to 0. Again, unless you are writing emails or social posts, where, yeah, you want more imagination in the answer. Make sense? So typically, that's something that you will touch.