fetchSynopsis

[00:00] OK, so we've got the one sentence idea from the user. Now let's make it into a professional synopsis for our movie. So I'm going to come down here and set up a function called fetchSynopsis. And of course, this will be an async function. Now eventually, when the app's finished,

[00:19] we'll be displaying the synopsis to our user in this container, which will pop up when the finished movie pitch is ready to display. And the synopsis will actually be right down here at the bottom. Now if we have a look over in the HTML, this is the section here, which is actually going to contain all of the output.

[00:39] And it's this paragraph down here, output text, which will contain the synopsis. So at the moment, this whole container is hidden by default. But if we go over to index.css and we just uncomment that one line there, now that container has appeared at the bottom.

[00:57] So in this new function that I've set up, fetchSynopsis, what I'm going to do is take control of this paragraph that we've got right here with the ID of output text. And then we'll be able to display our synopsis right there just to check it's working. So inside the fetchSynopsis function,

[01:15] we want to say document.getElementByID. And the ID is output-text. And we'll set the inner text to whatever text we get back from the API. And we can just borrow that line of code right there.

[01:33] Because in every case, the text that we get back from OpenAI comes in an object. And it is always actually in the same place. Now I'm going to call fetchSynopsis from right here inside this event listener. And I'll put it right underneath where we get the first reply to our initial idea.

[01:51] And I'll pass in the user input because that will also be needed to get the synopsis. And of course, let's take that in as a parameter right here. And again, I'll just call it outline. OK, now it's time for a big challenge for you. And I'm just going to paste it right in here.

[02:10] So I want you to set up an API call with model, prompt, and maxTokens properties. The prompt should ask for a synopsis for a movie based on the outline supplied by the user, which, of course, we're bringing in with this parameter outline. And just remember, when writing prompts,

[02:27] try to be specific, descriptive, and as detailed as possible about the desired outcome. Try to avoid fluffy and imprecise descriptions. So don't use phrases like sort of or roughly. Now we said before that we can control the length of the output with good prompt design.

[02:45] Now you could experiment here with asking for a particular word count. Say, give me a synopsis of 150 words. But I just want to warn you that that's likely to be quite imprecise. So don't be frustrated if the length of the text you get is not what you want. We will be dealing with that shortly. OK, there is quite a lot to do here.

[03:05] But you've got all of the skills you need to do this. So pause now and get it sorted. OK, so hopefully you managed to get a really good synopsis. Let's have a look together. Inside here, I am going to set up a const called response. And then we'll await an OpenAI createCompletion.

[03:29] And we need to pass that an object with our model prompt and maxTokens. So the model is TextDaVinci003. I'll put my prompt in backticks so we can use the outline. And I'm just going to say generate

[03:45] an engaging, professional, and marketable movie synopsis based on the following idea. And lastly, we need maxTokens. Because remember, maxTokens will actually default to 16. And we don't really need that comment there anymore. So I will say maxTokens. And I'm going to go for something pretty big

[04:06] because I don't want our text to get cut off. So I'll say 700. And we can always reduce that later. OK, let's hit Save and give it a try. So for my idea, I'm going with this. A madman develops a machine to control all humans.

[04:25] And only intelligent animals can save the human race. Although, would they really want to? Anyway, let's give that a try and see what we get. So we're going to get our first message from the API. Again, we've got this pretty long response. And we're waiting now for the synopsis. And I'm just going to scroll down

[04:45] because it's just going to appear right here inside this box. OK, and there we are. We get our synopsis. And the results we get back are fine. Now, I'm just going to copy and paste them. Because actually, you'll probably find that if you pause, you won't be able to scroll the mini browser.

[05:00] So let me just paste them right here inside this file. Now, the first thing that we can say is that that is pretty impressive. We've got a long body of text, very much as if it was written by a human. So pretty happy with that. And although it's long, it does finish naturally. I don't think it's actually been cut short

[05:20] by having too few tokens. I think 700 is plenty. But I do wonder if it's as good as it could be. Now, our prompt instruction that I've written here is fairly good. But it's actually quite hard to describe what exactly you want a longer passage of text to be like in detail. And as we've talked about several times,

[05:40] it's also quite hard to control the length. This is arguably quite long. Now, I've just counted the words here. And it comes in at just over 160. That's actually not bad. But we can't really rely on that. Also, I can't help feeling that the story it's laid out is just a little bit woolly. It would be nicer if it was just a little bit tighter,

[05:59] a little bit more concise. If we're going to grab the movie studio's attention, we need it to be really sharp. So what I want to look at next is how we can help OpenAI understand more about what we want. So far, we've been giving OpenAI these simple one-line instructions.

[06:18] What I want to try next is to include one or more examples actually inside the prompt to give OpenAI a push in the right direction so it's going to give us more of what we want. So let's take a look at that next.