fetchImagePrompt

[00:00] We need an iconic image to complement our synopsis and title. These ones from Jaws and Star Wars are really, really cool. And in an ideal world, we too could have cover art that featured our star-studded cast and had the title of the film right there, blazing across the cover.

[00:17] Now, unfortunately, OpenAI is not going to generate recognizable famous faces for us. And also, it can't reliably add text to images. So what we're going to do instead is focus on illustrating aspects of the plot. We can still create some funky images,

[00:37] and the app is going to end up looking something like that. Now, we know how to get images. And what we could do quite easily is just come down here and add an input field to the app and have our users write an image prompt. But the whole point of AI is that it's labor-saving.

[00:54] So what we want to do is actually use the title and synopsis to generate an image prompt for us. And that is a key power of AI. You can use what you've generated to generate something else. So it's a kind of chain reaction. Now, we're going to use two functions to do this.

[01:12] The first function is going to generate the prompt, and the second function is going to use that prompt to generate an image. So I'm going to come down here and set up a new function called FetchImagePrompt. Now, FetchImagePrompt should take in both the title and the synopsis. And I'm going to call this function

[01:31] from the FetchTitle function that we've got right here. FetchTitle takes in the synopsis, and it gets us the title. And so what I think we'll do to keep things a bit tidy is actually set up the title on a const right here, because we're actually going to use the title twice.

[01:50] We'll use it to update the DOM. And now we'll use it when we call the FetchImagePrompt function. So we'll pass in title and synopsis. Okay, now, before we generate any images, we should actually check in the console what prompt we get back to make sure it's good. So for now, I'm just going to log out the prompt

[02:09] that this function generates. And now, of course, we need to build the AI call. And again, I'm going to do most of the heavy lifting before I set you the challenge for the prompt writing. So we're using the same model. I've left the prompt blank for now, and I've set max tokens to 100, which should be easily enough.

[02:29] And now let me paste in a challenge. Okay, so this is your challenge. I want you to write a prompt that will generate an image prompt that we can use to get the artwork for our movie idea. OpenAI has no knowledge of our characters, of course,

[02:46] so the image prompt needs descriptions, not names. What do I mean by that? Well, if we have a character in the synopsis called Katie, and maybe she's the protagonist, and our image prompt says, Katie is standing in front of a burning building, well, of course, the image API has no idea who Katie is,

[03:06] no idea what she looks like. So what we need is a description of Katie and what she's doing. So maybe how tall she is, what she's wearing, perhaps she's carrying an ax or some other weapon and is standing in front of a burning building. I've set this as quite an open challenge and deliberately so.

[03:24] I want you to do some experimentation here, but I will say that you might find it best to use examples. So I have put some examples up here in this examples.md file. But do, of course, feel free to write your own examples or go online and find some synopses

[03:42] and titles of your favorite films, and perhaps you can use them as well. Okay, pause now, get this challenge sorted, and I'll see you back here in just a moment. Okay, hopefully you managed to do that just fine. So let's come in here and start working on the prompt.

[04:02] I'm going to start off with an instruction. I'm going to say, give a short description of an image which could be used to advertise a movie based on the title and synopsis. Now I'm going to add to that, the description should be rich in visual detail, but contain no names.

[04:21] Now, this second sentence may or may not be effective. OpenAI prefers to be told what to do, not told what not to do. But I've had reasonable success with this, so I'm going to phrase it like that. Now I'm going to add some examples,

[04:38] and I actually put three examples in the examples.md file, but I'm only going to use two, I think two is enough. So first I'll use the separator, and now I'll paste in my examples. So let's just tidy that up and add any more separators that we need.

[04:54] Remember, what we want to do is separate the instruction from the examples and actually separate each example as well. And of course, the important part is to include our title, our synopsis and leave OpenAI a space to create the image prompt. Okay, now just as I was doing that,

[05:13] I realized that there was something missing. As I was doing that, I realized that up here, I've asked for a short description of an image, which could be used to advertise a movie based on title and synopsis. And then down here, I've used image description as two words, image description hyphenated and image description hyphenated.

[05:33] Now OpenAI can probably cope with that kind of typo, but it might be worth just looking out for that kind of thing and just making sure we are consistent. So I'm just going to change both of those to two words. Now I'm going to put temperature to 0.8. And I'm doing that because I found that some of my image prompts

[05:53] were just a little bit too wacky when it was left at the default one, which is the most creative setting. Now it's really hard to tell with temperature whether you're making a big difference or not sometimes. It might just have been that the ideas that OpenAI gave me at that time were just particularly strange.

[06:11] Now it can be really hard to tell sometimes if small temperature changes are making much difference. It could just be that the examples I got before happened to be particularly strange. But that said, I've tested this a few times and 0.8 seems to be about right.

[06:29] Okay, so let's hit save and we can test it and see what we get. So I'll press send and now let's open up the console because that is where our image prompt is going to appear. And there we are, a colorful image of a raccoon, elephant, alligator, and squirrel standing in the middle of a city street,

[06:47] back to back, facing menacingly towards the viewer. Around them, robotic and alien forces march in the background, weapons drawn. In the sky above, a giant robot claw looms ominously. Now I think that is a really, really nice image prompt. Now if you approach this challenge differently

[07:05] and you got different results which you're still happy with, that is absolutely fine. There is no one right answer to this. We've got an image prompt. So in the next scrim, let's go ahead and use it to generate an image. When you're ready, let's move on.