Aside: Few Shot Approach II
Learn how to create dynamic button variants using Tailwind CSS in this web development course. Currently, the buttons are hardcoded with repeated Tailwind classes, making them difficult to maintain. In this section, you'll discover how to generate the appropriate Tailwind classes for different button variants, such as Impact, Size, and Shape.
You'll explore techniques and patterns to work around the limitations of Tailwind's just-in-time engine. The course emphasizes consistency in examples and provides clear instructions to ensure a smooth learning experience. Get ready for the first challenge and enhance your skills in creating flexible and customizable buttons.
[00:00] Okay, so here's your challenge. Add a second example here. Be sure to make it similar in design to the first. Now, I've put that because we don't want to confuse the AI. The examples that we give should be in a similar format and they should be consistent, else we're just creating confusion.
[00:18] Now, I've also put here, remember to use separators. So that is these three triple hashtags and you can use them in exactly the same way to separate out your example from the request to create. Now, one thing I want you to remember here is that the law of diminishing returns applies.
[00:35] Adding more and more examples will not guarantee better results. You might see great results or you might not. Also, before you do this challenge, I just want to say that I'm aware that some people following this course might be at a disadvantage here because English is not their first language or perhaps language is just something they struggle with.
[00:54] So I've added a file up here called product.md and that has got an example that you can use. So you can copy the text and just stick to practicing the layout and the syntax of the prompt. Okay, pause now, get this challenge sorted and I'll see you back here in just a minute. Okay, hopefully you got that working.
[01:16] So I'm just going to come in here and I'm going to copy all of the text that I've got right here and let's just put our second example underneath the first. First thing that I want to do is separate out the examples. So we'll borrow these hashtags. Now, I'm just going to take the product name and that will be Solar Swim.
[01:35] Product description, it's this crazy swimming costume with solar cells to charge your phone while you're on the beach or what have you. And we've got the target market which is, of course, young adults who spend their money on anything. Finally, we've got the advertising copy and that is approximately the same length
[01:53] and style as the advertising copy we've got right here. So that should do the trick. Let's just remove that space and we'll hit save. Let's give it a go and I'll hit generate copy. And okay, again, that has been pretty successful. The word count is coming in at just under 50 words.
[02:12] Well, our examples were 54 words and 53 words respectively. So that is pretty good. And also, I think we're getting pretty decent copy. Now, it can be really, really hard to judge because OpenAI is not going to give you the same completion for the same prompt each time.
[02:29] So it's really hard to judge when you refactor a prompt exactly how much difference is made. But I think two examples is a pretty good amount for this few-shot approach and it's definitely had a beneficial effect on this app. So what we need to do now is go back to the function that generates our synopsis
[02:47] and see if the few-shot approach will improve it. When you're ready for that, let's move on.