Refactor to Use Dependency III - Update fetchReply

[00:00] So we're going to tidy up this function a lot. All we actually want to keep is the model and the prompt. So I'm just going to delete everything else. Now I am going to keep this line right here where we update the speech bubble, but I'm just going to comment it out for now and we'll need to make a few changes to it in a moment.

[00:18] Now I'm going to come in here and set up a const response. And now as per the code we've got in here, we can await our new instance of the OpenAI API. So remember, we've got that stored as a const right here. Next, we need to tell it to use the create completion endpoint. And then just like they've done here,

[00:41] we're going to pass in an object with our model and prompt. So let's just cut and paste that right in here. Now let's log out the response. So I'm going to hit save and it looks like we're getting an error. It says syntax error, unexpected reserved word. So here's a quick debug challenge for you.

[01:01] Can you figure out what's going wrong here? Just pause now and take a second to look at that. Okay, so hopefully you figured out that because we're using the await keyword right here, we actually need this function to be async. Okay, let's try that again and we're not getting any errors. So I'll press the button and there we are,

[01:25] we're getting our response. And if we look down in the console, we're getting the completion, excited, passionate, eager. Okay, so to get this rendered, this line of code needs to change just a little bit. Let's just bring it up here and uncomment it. So all we need to do here is take this from response.

[01:44] So it's response.data.choices and then we'll take text from whatever is at the zero index of the choices array. Let's give it a go. And there we are, it is working, excited, enthusiastic, driven. Now I'm just going to delete this console.log and you might well notice

[02:03] that we've got a lot of white space up here. And actually, if I just copy and paste something from the console, you can see that the completion starts with white space. So here's a quick JavaScript revision challenge for you. How do you remove the white space from the beginning and the end of a string? Just pause now and do that.

[02:24] Okay, so hopefully you remembered that we can do that with the trim method. So I'll chain that on the end. Let's hit save and I'll press the button one last time. And there we are. Now it is at least equally spaced out. And as I said before,

[02:44] the CSS wasn't really designed to cope with such a short completion, but soon the text that we generate is going to be much longer. Okay, we have seen various enthusiastic responses from OpenAI, but the next thing that I want to look at is making that response actually tailored

[03:02] to whatever the user puts inside this text area. So I want to get OpenAI responding to our user's input in a human manner. But before we do that, I did promise that we'd quickly look at running our code outside of the Scrimba environment. So the next scrim is optional. If you're working on this in Scrimba or if you've already set this up locally,

[03:22] you can actually skip the next scrim and move straight ahead. When you're ready, let's move on.