The Boilerplate

[00:00] So let's have a look at the code that we've already got, and then we'll get straight on to the AI. So here in index.html, there's nothing particularly strange or unusual going on. I've brought in a couple of Google fonts. We've got Playfair and Poppins. And then down in the body, we've got a header section, which has just got the MoviePitch logo

[00:19] that you can see right here. And then underneath that, we've got a main, and that is divided up into two sections. This first section here is all about the setup, and that is everything that you can see right here. So this is where we collect the user's idea

[00:36] with this text area, and we interact with the movie boss. And you can see that we've got his speech bubble right here with this rather braggadocious statement that we've actually got hard-coded right here in the HTML. Now, the second section that we've got down here, this is dedicated to the output. This is where we'll actually display the finished product

[00:56] that the AI creates for us. Now, we can't see that section in the mini browser at the moment, because if we have a look at the CSS, it's actually set to display none. So we'll bring that into view when we're ready for it. Now, sticking with the CSS, we've got a bunch of styles in here. It's really unlikely that there's anything

[01:15] particularly new or strange, but by all means, feel free to pause and familiarize yourself with it. To be honest, we won't be referring to it that much as the course goes on. We'll just touch on it now and again as we need to. Now, over in index.js, we have already got a little bit of JavaScript.

[01:32] I've taken control of the three elements that we're actually working with already. So we've got the text area, which we've already seen down here. The setup input container, that is the container for the text area and the button. And then we've also taken control of the movie boss text, and that is what you can see right here

[01:52] inside this speech bubble. Now we've got an event listener and it's listening out for clicks on this button. And when it detects a click, it does a couple of things. Firstly, it checks if there's anything inside the text area right here. If there isn't, it does nothing. If there is, it will replace this text area

[02:11] and this button with a loading GIF. And we're just bringing that in right here from the images folder. And also it will update the speech bubble with some new text. This is actually hard-coded into the JavaScript, and that is actually the last bit of human written text that you're going to see for a while.

[02:31] From this point onwards, we'll mostly be working with AI generated text. Let's just put something in that text area and check it's working. So there's my one sentence idea for a movie. An evil genius wants to take over the world with AI and only one brave mouse can stop him. Let's hit send.

[02:49] And as soon as we do that, we get this loading SVG just to communicate to the user that something is happening. And we've updated the speech bubble. Just wait a second while my digital brain digests that. Okay, so everything is working as we want it to. And the next thing we need to do is start applying some AI to this.

[03:08] We want to actually get an AI generated response to our idea. But before we take the first step into this mystical and magical world of AI, we need to talk about some more mundane matters like how we can actually access the OpenAI API from within our app. That's how we'll get our hands on these powers.

[03:27] So let's come on to that next.