This video lesson covers topics related to enhancing web development skills. It discusses the importance of brands in secure application code, creating dynamic button variants using Tailwind CSS, refining movie synopses with OpenAI, and optimizing prompts for better responses. It concludes with an overview of the app's architecture.
[00:00] Okay, so we have this synopsis fetch request, and perhaps we can tighten up the synopsis we get back and improve it by adding an example or two with a few-shot approach. Now, when you do this, you're welcome to use your own examples. In fact, I would encourage you to do that. If you're going to be working with OpenAI,
[00:18] then it's important to practice creating prompts. However, I have put an example synopsis up here in synopsis.md, which you can use if you'd like to when you complete this challenge. So your challenge is to refactor this prompt to use one or more examples,
[00:37] just like we did in the previous scrim. And remember to separate out the instruction from the example with either the triple hash or the triple inverted comma. Check back if you need to remind yourself of the syntax, and I'll see you back here in just a moment. Okay, hopefully you managed to do that just fine. So I'm going to come in here
[00:57] and we're going to rework this prompt, and I'm going to replace this with the following. Generate an engaging, professional, and marketable movie synopsis based on an outline. Now I'll come down onto a new line. I'm going to add my hashtag separator,
[01:14] and then I'll add my example. And my example is going to be a movie. Then I'll add my example. And my example needs an outline and a synopsis. And I'm going to use the examples I prepared earlier. This is the outline. And then we'll also take the synopsis. And I've made sure that this example synopsis
[01:36] is the kind of thing that I want to get back from OpenAI. Now, underneath that, we'll add another separator, and then it's outline. And this is where we need to bring in the user-generated outline. And then the synopsis, which of course we can leave blank.
[01:55] Okay, let's hit save. And I'm just going to pop over to the CSS, and I'll just uncomment this one one more time so we'll see the synopsis appear here. And let's put in a one-sentence idea. So I've gone for a madman develops a machine to control all humans,
[02:14] and only intelligent animals can save the human race. There we're getting our long initial response. And then down here, let's just wait for the synopsis. And there it is. Okay, the first thing I want to do is check the word count. And the good news is,
[02:33] it's almost exactly the same length as this example. There's less than 10 words in it. Now also, and this is subjective, but if you read through it, I think this is a pretty good synopsis. To me, it seems tight. It packs a lot of detail in, there's not too much fluff. So I'm pretty happy with that.
[02:53] And again, as always with open AI, it's really hard to make a comparison. But I think adding that example to the prompt has made a big difference. Now, of course, the synopsis makes this prompt quite big. And if we were to add several examples, we could end up burning tokens here unnecessarily.
[03:11] So if we were going to take this to production, maybe we would run a bunch of tests with multiple synopses and then reduce the number to the minimum needed. Now, before we move on, I have got one more challenge for you. And I'm just going to come up here and paste it in.
[03:29] Okay, so the initial response that we get back when we first put our one line concept into the text area is pretty long. It doesn't actually break the layout, but it does just stretch things a bit too much. And I think it's all a bit unnecessary. What I prefer is to see something like this.
[03:47] So we've got a good personalized response, but it's just not that long. There's just enough there to make it clear that open AI has understood our request and is giving us a conversational response, which references the one line input from the user. So here's a challenge for you.
[04:06] I want you to refactor this prompt to use examples of an outline and an enthusiastic response. Be sure to keep the length of your examples reasonably short, say 20 words or so. So we just don't want it to be massive like this one. Now, again, it's great if you can work on this on your own,
[04:23] but I have put a file up here called outline.md, and that has got some examples in it that you can use, but do write your own if you're able. Okay, pause now, get this challenge sorted, and I'll see you back here in just a minute. Okay, hopefully you got that working just fine. So I'm going to come in here
[04:48] and I'm just going to change up this initial instruction. I'm saying generate a short message to enthusiastically say an outline sounds interesting and that you need some minutes to think about it. Now, I'm not going to instruct it to mention something from the outline like we did before, mention one aspect of the sentence. What I want to do instead
[05:07] is show it how to do that with examples. So let's come in here and put the separator. And now I'm going to go over to outline.md, and I'm going to bring in the examples that I've got right here. So I've got three examples, and each one has got an outline and a message.
[05:25] So let's just label them clearly. And I'm going to separate each example with a separator. Okay, now let's come down onto a new line, we'll add another separator, and then we'll say outline and message. And of course, message will leave blank because that is what OpenAI is going to do for us. And outline will just be the outline
[05:49] that we've got coming in here as a parameter. Okay, let's hit save. And I'm going to use the same example as I used before. And let's see what we get. But before we do that, let's actually just get rid of the output box that was at the bottom. And also just momentarily,
[06:07] I'm going to comment out this fetch synopsis function. So the app will only go so far as to call this function. I'll need to add my outline again, and let's hit go. Okay, there we're getting a much shorter response. Wow, that's incredible.
[06:25] A madman and his machine, I'm feeling inspired already. Let me take a few moments to ponder it. So a much shorter completion, just like our examples, but still clearly referring to the outline I put in. Okay, now the app is working much more smoothly. But before we move on, there's just one little thing I want to tidy up.
[06:45] We've got a global variable up here, and actually we're only using it right here. So my bad for declaring it globally. I'm just going to move it down here inside that function. And I think that is better practice and a little bit neater. Now, next up in our app, we need to create an iconic title for our movie.
[07:05] But I think this would be a good moment for me to say a quick word about the architecture of this app. So let's just take literally a couple of minutes to talk about that.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!