Introduction and the first request setup

0:00 Hey there free code campers and welcome to this interactive course where you are going to build mind-blowing AI-powered applications with features that didn't seem possible even just a few months ago. We'll be starting with the very basics so you don't need any previous knowledge of the OpenAI API. In fact, the only prerequisites for this course are basic vanilla JavaScript and some curiosity. Now the special thing about this course is that it's project-based and it comes with a ton of challenges and that means you're going to have your hands on the keyboard, writing code, and tackling challenges throughout.

0:51 And if you're wondering how you can get your hands on the project code, don't worry, we've got you covered. In the interactive version of this course over on Scrimba, you can pause the video, edit the code, and run the projects right there in your browser. Or if you prefer, you can download the code from those scrims and run the projects locally. The link is right down there in the description. Oh, one last thing before we start.

1:16 If you enjoyed this course, please hit that thumbs up right here on YouTube. That will be much appreciated. And if you'd like to get in touch, reach out to me on Twitter. I am @tpchant. OK, let's get started. Welcome to building AI apps with chat GPT, DALL-E, and GPT-4. I am super excited to bring you this course on the technology everybody is talking about. We are going to study how to use the OpenAI API. We'll be using various OpenAI models, including the latest GPT-4 model.

1:44 We'll be looking at prompt engineering. We'll be building chat bots. And we'll be fine tuning a model on our own data. And along the way, of course, there will be lots more and plenty of challenges. Now, I need to say a quick word about GPT-4. We'll be using the GPT-4 API in the second project in this course. Now, at present, there is a waiting list to get your hands on the API. No doubt in the near future, the waitlist will go and the API will be available to everybody.

2:08 But for now, while the waitlist exists, why not click on this screenshot, which will take you through to the signup page and you can join the waiting list there if it still exists. OK, so what are we going to build? We'll start off by exploiting the power of OpenAI to be creative and generate human-standard words and images to build this cool movie pitch app, which turns a one-sentence idea into a full movie outline. Then we'll use the GPT-4 model to create an Ask Me Anything chat bot called Know It All.

2:57 And we'll use a Google Firebase database so the user can persist the conversation they have with the chat bot and pick it up at a later date after refreshing the browser. Lastly, we're going to stay with the chat bot concept. But under the hood, everything will be different. We will enter the world of fine-tuning. This is where we upload our own dataset and we create a chat bot that can answer specific questions from our own data.

3:21 This skill is really essential if you want to use a chat bot for a specific purpose, such as to handle customer service issues with your company. And with this project, we'll also learn a really neat skill for whenever you're working with APIs with secret keys. We'll look at deploying the site with Netlify with the API key hidden so you can share your project without fear of the API key being compromised. This solves the really big problem that we have when we're using APIs with secret keys in front-end projects.

3:50 Now, there are not too many prerequisites for this course. We're going to be working in vanilla JavaScript and I'll assume you have a reasonable knowledge of it. Now, the JavaScript in this isn't very complicated for the most part. As long as you understand the basics of a fetch request, you'll be absolutely fine. And if you're rusty on fetch requests, don't worry at all. We'll actually go through it all step by step and I don't think you'll have a problem.

4:16 Apart from that, we'll be focusing fully on the AI and working through it stage by stage. Who am I? My name is Tom Chant and I'll be your tutor for this course. You can find me on Twitter. My handle is at tpchant and it's always good to hear how you got on with the course. Now, before you get started, why don't you head over to Scrimba's Discord server and go to the Today I Will channel and let the community know that you're starting this course.

4:40 Studying is more fun and more productive when it's done together. So, why not interact with fellow students on the Discord community, encourage each other and help each other along. And then, without further ado, let's jump straight in to the first project. In 2006, Terry Rocio and Bill Marcille sold the rights to the Denzel Washington film Deja Vu for a record-breaking $5 million and it went on to gross more than $180 million worldwide. Have you ever dreamed of making it big in the movies, coming up with that one idea that will make you rich beyond your wildest dreams?

5:26 Well, the most important thing is to be aware of your wildest dreams. Well, the most successful projects start with one single idea, but once you've had that idea, you need to work with it, brainstorm around it, spend hour upon hour working late into the night to forge it into something marketable. Or do you? What if you could take one simple idea, just a single sentence, and let the power of OpenAI's large language model do the rest of the work for you?

5:52 What used to be science fiction is now science fact. This is movie pitch, and on the outside, it is so simple. We put a one-sentence idea for a movie in here, we click send, and that is all we have to do. We sit back and we wait for maybe 10 seconds or 15 seconds, and then what we get back when OpenAI has done its thing is the makings of a great movie. We get some artwork for the cover, a great title, and a list of stars, and most importantly of all, we get the synopsis that brings the idea to life, and all of this is brought to us by the power of OpenAI.

6:18 Now, to get this app working, we have got some work to do. So what will we be studying? Well, we will be using the OpenAI API. We'll be working with models and understanding what tokens are. We'll learn about crafting prompts and how to tweak those prompts to get results and how we can use examples to train the model. We'll be looking at extracting information from texts and also generating images just with words, and by the end of all that, we'll have a great foundation in how to use OpenAI in front-end projects.

7:10 Now, I want to give you a warning. As we build this project, the API key for OpenAI will be sat there on the front end, and that means it's visible. Anybody could go in through DevTools to the Network tab and they could steal your API key. Now, while you're developing locally, that is fine, but don't share your project with an API key or publish it to GitHub without ignoring the API key because that will compromise the API key.

7:33 Now, later in this course, but not in this project, we're going to look at how we can deploy our apps with the API key safely stored on a server where no one else can see it. But in the meantime, just be mindful of what you're doing with your API key. OK, so when you're ready, let's jump into the code and check out the HTML and CSS that I've got waiting for you. So let's have a look at the code that we've already got, and then we'll get straight on to the AI.

7:57 So here in index.html, there's nothing particularly strange or unusual going on. I've bought 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 movie pitch logo 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.

8:43 So this is where we collect the user's idea 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 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.

9:06 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 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.

9:29 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 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.

9:57 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 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.

10:24 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. 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.

10:49 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. 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 open AI API from within our app.

11:14 That's how we'll get our hands on these powers. So let's come on to that next. Next, let's get our hands on an open AI API key. And that means signing up. So why don't you head over to the open AI homepage? And this slide is actually a clickable link. So if you just click on this screenshot, it will take you straight there. Now, when you're there, just pause for a moment to check out some of these really beautiful images that they've created with their Dali image generation model.

12:01 And we will be looking at image generation later in this course. Now, once you've feasted your eyes on the pictures, head over to where it says API. And from there, you'll need to go to sign up. And then you can choose your sign up method, and you'll need to confirm with a phone number. Now, once you're in from the dashboard, you can click your avatar up here and select View API Keys. Now, they only show you the API key once when it's first generated.

12:25 After that, it will be obscured like this. So be sure to copy and paste it somewhere safe as soon as you get it. But if you lose it, don't worry. From here, you can actually delete it and get a new one. And like all API keys, be sure to keep it secret. In this project we're building, you will see my API key. But rest assured that by the time this recording goes public, I will have deleted it.

12:49 OK, so that's the API key. Now, while we're here, let's just say a quick word about credit. If we click on Usage here, it will take us through to a page where we can see how much credit we've got remaining. Now, at the time of recording, when you sign up, you get some free credit to play with. I got $18 of credit, which was valid for three months. And it actually looks like I'm nearly through that.

13:13 But I have been a heavy user. So you'll probably find that the free credit you get will get you a very long way. Now, when that credit has expired or been used up, it is a pay as you go model. Check the website for the latest info on that. OK, now let's take our API key and build our first request. When you're ready for that, let's move on. Now we've got our API key, we can start using the API.

13:38 But before we can make our first fetch request, we need an API endpoint. Let's head back to the OpenAI website and click through to the docs. And this slide is a clickable link, of course, and it will take you straight there. Now, the OpenAI docs are pretty comprehensive. And right here on the first page, it tells us that the completions endpoint is at the center of our API. OK, that sounds interesting, the completions endpoint. We're going to check it out.

14:01 But before we do that, you might well be asking, what is a completion? And completion is a word used a lot in OpenAI. So let's say you want some information, like you want to know who the first person to walk on the moon was. Let's send that question to OpenAI via the API, and it will think about it and send back a completion. And that completion is, of course, Neil Armstrong. So in the world of OpenAI, a completion is a response from the API that fulfills your request.

14:50 OK, let's click through to the completions endpoint section in the docs. And here we get a ton of info and some code examples. And each example is given in node.js, PHP, and curl. But what I want to focus on is this. We have the completions API endpoint right here, and it tells us we can use the POST method. So now we've got that info. Let's come back to index.js, and I'm going to save it in a const called URL.

15:14 And in the next scrim, let's start writing a fetch request. Let's start this API call by laying out the bare bones of the fetch request. So we need fetch, and then we open up the brackets, and we pass in the completions endpoint, and we've got that saved here as URL. Now we need an object, and inside this object, we're going to need method, headers, and body. And if we check back with the docs, we know that the method is POST.

15:38 It tells us that right here next to the endpoint. Now the docs don't actually give us an example fetch request in JavaScript, but they do give us this curl example, and we can adapt it. So let's take a closer look. Our headers are going to need a content type of application JSON, and we'll also need an authorization of bearer with our API key. So let's go ahead and put those in. OK. Now we need a body, and this is where we get into open AI specifics.

16:26 The body for an open AI request needs a model and a prompt. So I'll come down here and add the body, and then I'm going to say JSON.stringify, and I'll pass in an object with model and prompt. Now if we look back at this screenshot, it actually gives us a model right here, text-davinci-003. So let's break the golden rule of coding and just copy a line of code that we don't actually understand. We haven't discussed what open AI models actually are or what options we have available to us yet, but what I want to do is get this example working, get the first API request actually into our app, and then we'll rewind and talk about models in more detail.

16:53 For now, just know that open AI has got various models that we can use, and today we're going to use this one called text-davinci-003. OK. So I'll put that in a string right here. OK. So we've got the model, and now we need the prompt, and we're going to talk about prompts a lot in this course. But for now, what we need to know is this. In this example that we saw in the previous scrim, we asked a question.

17:41 Who was the first person to walk on the moon? And we got the completion, Neil Armstrong. Well, the prompt is this part. Who was the first person to walk on the moon? The prompt is whatever we ask the open AI API for. Now, sometimes prompts are really, really simple just like this, and sometimes they're really very complex, as you'll see a bit later in this course. Now, they've given us an example prompt in the docs. Say this is a test, which, to be honest, is not very creative.

18:06 So instead of using that, I'm going to ask an easy but real world question for this prompt. I'm just going to say, what is the capital of Spain? And that is all we need to do for a simple prompt. We just put it in a string. OK. Now we need to change some thens. So we'll take the response, and we'll call Jason on it. And then we'll take the data from that response and log it out.

18:33 OK, let's open up the console, and I'll hit Save. And we've run into an error. It's a pretty silly one. It's just a typo on my part. But why don't you just pause now and see if you can debug that? And I'll give you a bit of a clue. Have a quick look at this slide. OK, did you spot it? I've actually put bearer colon and then the API key. I think that is causing the problem.

18:57 Let's try it one more time. And there we are. We're getting a response. So I'm just going to copy this from the console and paste it in the editor, just so we can see it a little bit more easily. And as we can see, this is an object. It's got loads of data in it. And we'll be talking more about some of the properties in this object as we go along. But for now, we just need to focus on one word, Madrid.

19:21 Because that shows us it works. OpenAI is speaking to us, and it knows all about Spain. Now, OK, knowing facts is great. But we're actually interested in emotion and creativity. So I'm actually just going to change things a little bit. Let's delete this. And I'm going to change my prompt to say something more emotional. I've said sound sympathetic in five words or less. Let's hit Save. And again, I'll just paste the response right here. And look what we've got.

19:47 I'm here for you. It's giving us sympathy. And what's really cool about that is that now the AI is speaking to us as if it were human. It's speaking with heartfelt, or at least CPU felt, emotion. And that is what we're looking for. OK, let's take what we've got here and apply it to our project. And I haven't forgotten this model that we've got here, text da Vinci 003. It's still shrouded in mystery. But I want you to get your hands on the keyboard, start getting practice, start building muscle memory before I do any more talking.

20:13 So let's move on to a challenge with this next. OK, so back in our app, we've got an event listener right