Generate a Few-Shot Prompt

[00:00:00]
>> Sabrina Goldfarb: So, if we are talking about few-shot prompting when it comes to code generation, it's going to be the same sort of thing as we saw with one-shot prompting, right? We gave a really nice example. We said this is how we would implement a feature. This is exactly the considerations we would go in to. And so now we're going to do the same thing, but we're going to see this with few-shot prompting. And again, I'm just going to mention one more time, to link back to the workshop information.

[00:00:28]
If you want to just copy and paste it straight in, I will start to type it in, and then I'll copy in the rest, and we'll go over the prompt. So, for my few-shot example, and I really love few-shot prompting because I'm able to get done larger and more complex tasks in one prompt than I could if I was trying to utilize any of the former prompting techniques that we talked about, right? Because now I'm giving it a bunch of examples, so now it's okay to kind of increase the complexity and increase your ask from the model as well.

[00:01:05]
So, I need you to create a prompt, and someone in chat had asked about using LLMs to create prompts, and here we're going to be using an LLM to create a prompt for us as well, right, for implementing a new feature. Here are examples of effective feature implementation prompts. So these are what my few shots are going to be. They are going to be feature implementation prompts, right? So again, we're not even asking our model to write the code for us yet.

[00:01:49]
We're again trying to do the planning of this more complex feature. So, let me get the rest of my prompt in here. Okay, let's take a look at the rest of this prompt. Example one, save and delete functionality prompt, right? This is something that we had built earlier. So in theory, we could have just copied and pasted this exact prompt, but I wanted these to all be together. So, create a save and delete system for a Prompt Library application with the following requirements technical specifications, a save button that persists prompts to local storage, a delete button with a confirmation dialogue before removal, visual feedback on success save, green check mark animation, trash icon with hover effect for delete action, and auto save indicator when changes are detected.

[00:02:40]
And then provide the complete HTML CSS and JavaScript with semantic HTML, CSS animations, JavaScript for proper event delegation, and local storage integration with JSON serialization. And then I give it a data structure as well, right? So now I'm showing all of the types of examples I can use within my few-shot prompt. I also say include error handling for local storage quota exceeded and implement a recently deleted temporary storage.

[00:03:09]
Then I give it another example in the exact same format, star rating component prompts, something else that we put in already. Build a 5-star rating system for rating prompt effectiveness with these specifications, and I give it the core requirements interactive 5-star display, half-star precision, show average rating and total number of ratings, updates immediately without page refresh and allows users to change their ratings, right?

[00:03:35]
And then again, I give it the implementation details SVG stars for crisp display, gold fill for rated, gray outline for unrated, smooth hover animations, and a display format. Deliver production ready code including HTML, CSS and JavaScript with any comments explaining calculation methods. And again, I show it the data model to support. But we can see, right, that this prompt is very long. It's very difficult.

[00:04:02]
This is just providing 2 shots. Imagine if I was trying to provide 8 shots, right? This takes a significant amount of human engineering to not only write out but to get right. So, your task based on the examples above, create a detailed prompt for building a notes section feature where users can add, edit, save and delete notes for each prompt in the library. The prompt should follow the pattern shown in the examples, a clear feature description, specific technical requirements, implementation details, and expected deliverables, and a data structure and integration notes.

[00:04:39]
Keep it as simple as possible to create a working notes section with only the features mentioned in your task. We saw, right, when we talked to Claude that sometimes these models like to add. So at the end, I usually try to make sure I prompt it just to let's keep it within the scope. So let's see what GPT-4o does with this, and I'll bring it up so folks can see the task. Okay, here's a concise production ready implementation prompt modeled after your examples, focused only on a basic per prompt note section.

[00:05:18]
Add, edit, save, and delete without extra features. Feature, per prompt notes section. Build a notes feature for a Prompt Library application that lets users add, edit, save, and delete plain text notes associated with individual prompts. The core goals. Each prompt can have 0 or more notes. Users can create a new note, users can edit an existing note. Users can save changes that are persisted to local storage like everything else.

[00:05:47]
Users can delete a note with a simple confirmation. Keep the UX minimal, fast, and keyboard accessible. We have technical specifications we asked for, so storage and data, like using local storage, and calling it prompt notes, loading notes on page load. We have a notes UI. Each prompt card section displays an existing notes list with the most recent first and then add note button. New note entry gives us a text area with save and cancel buttons, editing transforms a note's display into an editable text area, and then you can delete.

[00:06:24]
And then the HTML structure, the CSS requirements, the JavaScript behavior, the accessibility, the error handling, the performance, right? This gives us the opportunity to go through and fine tune anything we want to before we actually utilize this prompt in production, to ensure that we're getting what we want. If we see there's a problem with our structure, if we see there's a problem with the logic, or if we see that we added or left out something important, we can change that before any code is actually implemented.

[00:06:54]
End of prompt. Let me know if you'd like a version that also supports search tagging or cross tab synchronization. Well, I don't want any of that, but I do want to actually implement this feature. So now we're just going to, again, go back to the beginning, go back to that standard prompt and say, implement this feature with no additional features. And see, my standard prompt doesn't have to be anything fancy, doesn't have to be like the best grammatically at English that I ever had, right?

[00:07:34]
It just has to say, we've discussed this. I know what you're about to build. Now go, right? And so now we're going to see what gets built from our GPT-4o using that prompt. Next optional, okay, if you want later, pagination, cross tab, sync, we're going to accept everything because remember, we can always undo it if it didn't work out. So let's see if anything changed and what happened. I'm going to delete this old one because I want to have a fresh start.

[00:08:08]
So it's sample prompt, and we're going to say this was a few-shot prompt example just to have an option. Okay, and now we can see we have a note section. We can press add, we can press save. Oh, note content cannot be empty. We still see that we have our card. It says sample prompt. This was a few-shot prompt example. We can still rate it 4 stars, 5 stars, 3 stars, whatever it may be, but now we can add a note.

[00:08:37]
So, this used few-shot prompting to create this section, and we can press save and make sure it saves. Great. So, now we can see that we have a note section. So, if I wanted to delete this and instead say few-shot prompt, and then I have my few-shot prompt copied. And I want to save some of it, put this in here. I'm only saving some of it, but now we can see we have just our few-shot prompt save and we could say few-shot prompting worked well with GPT-4o, right?

[00:09:14]
So now I'm able to kind of give myself that context of what model I used, how well it worked, was it easy? Was it simple? Did I have to adjust anything? And now we can see that we have a notes section where we can add as many notes as we want, edit and delete them. So if we press edit, add a period in there, save it. Okay, great. And it even shows that it was edited. Great.