The First AI Fetch Request
In this lesson, we explore working with event listeners and making API calls. The code example showcases an event listener that responds to button clicks, displaying a loading message and updating text on the screen.
The challenge is to make a fetch request to the OpenAI API to retrieve an enthusiastic response in five words or less. The prompt and API details are provided, and students are encouraged to write the code rather than copying and pasting. Tom also discusses the Fetch API and how to handle the response.
After successfully implementing the API call and retrieving the completion, Tom demonstrates how to display the response within a speech bubble on the screen. The CSS layout is briefly mentioned, and it is noted that future refinements will handle longer completions.
OpenAI's dependency on simpler fetch requests and introduces the concept of different models, specifically focusing on the TextDaVinci 003 model being used.
[00:00] Okay so back in our app we've got an event listener right here and it's listening out for clicks on this button and what it does is it checks to see if the user has given us any inputs, it displays a loading message and updates
[00:15] the text that we see in the speech bubble right here. Now we're not ready to work with any user inputted text yet so I'm actually just going to comment out this if and if I save that now this code should run as soon as we click this
[00:31] button and there we are we get our loader and we've updated the text that we've got in the speech bubble. So let's go ahead and make an API call to get an enthusiastic response that we can pass to our user and of course later we'll refactor this so the AI is actually responding to the specific idea that the
[00:49] user gave us but for now the response we get back from the AI is just going to be generic. So I'm going to call a function in here called fetch bot reply and then I'll come down here and I'll do the donkey work of setting up the skeleton of this function and now it's over to you here's a challenge to finish off
[01:09] this function and I'm just going to paste it right here inside the function body because that is where I want you to write code. So your challenge is this I want you to make a fetch request to the OpenAI API and I've put all of the
[01:24] details that you need up here so you'll have to put your own API key in here and this is the URL to the endpoint. Now the prompt should request an enthusiastic response in no more than five words and you know how to do that because in the previous scrim we did exactly the same thing to get a sympathetic response. For
[01:44] now you can just log out the completion to check it's working. Now before you start there are two things I want to say the first is if what you get from the completion isn't quite what you wanted or what you expected don't worry we're going to talk a lot more about using prompts and troubleshooting the issues
[02:00] that you can have. The purpose of this challenge is just to get the syntax right so we are actually getting a completion back from OpenAI. Secondly by all means go back to the previous scrims just to have a look at the syntax that we need but don't copy and paste you're going to do yourself a lot of favors by
[02:19] writing this out by hand. All of that practice just builds muscle memory and builds up your fluency. Okay pause now get this challenge sorted and I'll see you back here in just a minute. Okay so hopefully you managed to do that just fine so what we need to do then is
[02:40] come in here and set up a fetch request and we'll pass in the URL that we've got stored right here and then we'll open up the object and we know that the method is post and then we need the headers and that will be an object with two key value
[02:56] pairs the first is the content type which will be application JSON and the second will be authorization and that will be a string with the word bearer and our API key. Then we need the body and the body is going to need a model
[03:14] and a prompt so firstly we say JSON.stringify and then we pass in an object with model text DaVinci 003 and prompt and for my prompt I'm going to say sound enthusiastic in five words or less because that is what we want the
[03:33] movie boss to do we want him to sound enthusiastic. Okay let's change some Venn's so we can deal with the response so we call JSON on the response and then we'll take the data from that response and log it out. Okay let's hit save and
[03:51] to fire up this function all we need to do is hit the send button and we've got the loading SVG and if I open up the console there we are it looks like we've got our completion let's just copy and paste that into the editor and we can
[04:08] see we've got these two words right here excitedly enthusiastic so it's taken our prompt very very literally. Now the next thing that I want to do is actually get this completion to appear inside the speech bubble so I'm just going to delete this challenge text so we've got a little bit more room to work with. Now
[04:28] we've already taken control of the text in the speech bubble we've got the element stored up here in this const movie boss text so let's come down here and instead of logging something out I'm going to come on to a new line and I'll
[04:43] say movie boss dot text dot inner text and now we need to access our completion and we've got that right here so to get that we need to say data dot choices and choices holds an array and we actually want what is in the first element of the
[05:03] array at position 0 and then we want to access the text property. Okay let's hit save and again I'm just going to hit this button and there we are it says eager and excited in the speech bubble. Now we've got a little bit of a problem in that our design is kind of broken because the CSS can't really cope with
[05:22] such a short sentence or that's what it seems at the moment. Now I'm not too worried about that because this sentence is not going to stay short soon we're actually going to refactor this function and what we'll get will be a longer completion which is actually going to be relevant to the one line input that the
[05:40] user puts right here. But before we come on to that there are one or two things that I want to cover. Firstly these fetch requests are unnecessarily complex and long so instead of writing out loads of these in our app we can actually use OpenAI's dependency and that is going to save us a lot of work as we move
[06:00] forwards. But before we do that we need to talk about models because we have used TextDaVinci 003 and we haven't really got a handle on what that means yet so let's come on to that next.