Displaying the Image and Finishing off the UX

[00:00] Okay so it's time to get this image into place. We've generated a good prompt so now I'm going to set up a new function called fetchImageURL and of course that needs to be an async function. Now to fetch the URL it's going to need a prompt and we generated the prompt and we've got it back

[00:18] in this response right here. So it's going to take in a parameter and I'm just going to call that parameter image prompt. Now if we have a look at the HTML we can see that down here inside the output section we've got this div and it's got the class of outputImageContainer and the id of

[00:37] outputImageContainer. Well that is of course where we're going to render the image so let's come back to our function and I'm just going to add one line of code right here. Now the source of that image is actually going to be the URL that we get back from this fetch request to the API.

[00:57] So I'm actually going to leave that empty for now because that is going to form part of your challenge. But before we get on to that challenge there's just a couple more bits to do. I want to call this function from inside this fetchImagePrompt function so I'll do that right

[01:13] here and we need to pass in our image prompt. Well we've got that right here so let's just take that and paste it in there and I'm just going to delete this console.log. Now the other thing that I'm going to do is just comment this line of code once again so that is just the display none on the

[01:31] output container so we'll be able to see the image right there. Okay now bear with me while I paste in your challenge. So this is your challenge use the image prompt to generate an image. The image

[01:43] should be 512 by 512 pixels in size. We only want one image and we want to get a URL back from OpenAI. Think about what properties you need to put in the object that you're going to pass to OpenAI. Now one word of warning if you find a lot of garbled text in your images you could specifically

[02:03] request an image with no text and what I'm talking about is this. Sometimes OpenAI gives you images which have got this garbled meaningless text and this image has also got a really dodgy white border so there's literally nothing to like about it. So you could just try adding to your prompt a sentence

[02:21] which says I don't want any text in the image. Okay pause now if you need to flip back to the screen before last to refresh your memory go for it get this challenge sorted and I'll see you back

[02:31] here in just a minute. Okay hopefully you managed to do that just fine so I'm going to come in here

[02:42] and I'll set up my response and we're going to await OpenAI.createImage and we know we need to pass it an object and the first thing we'll put in that object is a prompt and the prompt is going to be this image prompt parameter we've got here but I do want to add a

[03:01] sentence to try and avoid this garbled text on the image so I'm actually going to put this in curly braces we'll have the dollar sign and we'll wrap it in backticks and I'm just going to add there should be no text in this image. Okay next I'm going to add an end property and we don't really

[03:21] need to do that again just a reminder for you we only want one image and that is what we'll get by default. Now for the image size we wanted 512 by 512 and the response format will default to URL

[03:35] anyway but let's just write it out and all we need to do now then is deal with what we get back and we're going to put it right here inside the source for this image and in fact I'm just going to delete this challenge text so we've got a little bit more space. So the image element is

[03:51] already inside backticks so I can come in here with the dollar sign and the curly braces and it will be response.data.data and I'll just close the mini browser because this is getting kind of long and we actually want the element at position zero and from the object stored there we

[04:09] want the URL. Now when you tried that it should have worked perfectly as I said before I can't use this format in the scrimber recorder because the image will have disappeared by the time you actually get to watch this so I'm going to make a couple of changes here. I'm going to change this

[04:25] to b64 underscore json and I'm also going to go for a slightly smaller image because actually the encoded images are quite big it's a little bit overwhelming for the mini browser which can actually crash sometimes if you give it too much data so I'm just going to go for the 256.

[04:42] A little bit more to do I just need to tell the browser that this image is coming in a data format and I also need to update this it won't be a URL property it will be b64 underscore json. Okay let's hit save and let's put a one sentence outline right here and it's one we've seen before

[05:02] it's the time traveler going back to the 80s and falling in love. Let's hit send. Okay and we have our image now the first thing to mention is this is a little bit small because I've gone for a smaller image size so I'm just going to make a little tweak to the CSS. I'm going to come in here

[05:22] where we've got the output image container and we're looking for an image within that container and I'm just going to change max width to width. Okay so everything is working we've got a title we've got an image we've got some stars and we've got a synopsis so I think what we need to do now

[05:41] is put that to display none and we just need to make a few little updates to the UX. Now if you'll recall what we want to happen at the end is that we get this view pitch button which will then

[05:55] display whatever OpenAI has given us so what I'm going to do is come down here into this function and we're going to add some more logic right here and the first bit of logic is just going to take this container that we've got here which is currently holding the text area where we write

[06:13] and then this loading SVG and it's just going to replace it with this pink button so let's go ahead and put that right in here. Now the next thing we need to do is actually wire up this button

[06:28] so I'm going to set up an event listener right here and what we'll do then is we'll set the setup container to display none so that's the entirety of this section right here so that is this entire white container you see in the mini browser so let's take control of that container

[06:49] and then we'll access its style and display and we'll set that to none. Next we want to take the output container which is this one right here and that is the one which is set to display none by

[07:02] default in the CSS and we want that set to display flex. Now while we're here I think we should actually quickly update the message that we get from the movie boss at the very end. He should make some outrageous claim about his own ability and ask for some money so we've already selected

[07:21] the movie boss text so let's set the inner text of that to the following. He's going to say this idea is so good I'm jealous it's going to make you rich for sure remember I want 10%. Okay now for

[07:36] the moment of truth let's see the whole thing in action. I'm going to say a pizza delivery rider infiltrates an organized crime group. Let's hit save and cross our fingers so we get the first

[07:50] message. We get the personalized response now we've got the view pitch button and we're getting an error I've made a really silly mistake you can probably see what it is just pause now and debug that. Okay so you probably noticed I've actually forgotten to put the inverted commas around these

[08:10] two. Let's try that again. There's the first message and here is the view pitch button and there we are we have got our image we have got pizza delivery man the Loire Vitale story. Okay that sounds pretty

[08:27] classy it's John Travolta and Uma Thurman that's a pretty good mix if you like Quentin Tarantino films and let's check out the synopsis and actually that synopsis is pretty cool I would go and see that movie. Okay so everything is working so let's just take one more scrim to recap what we've done

[08:46] with this project and where you can go from here.