First Look: ChatGPT API for Web Developers

Modeling Prompt Data

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
First Look: ChatGPT API for Web Developers

Check out a free preview of the full First Look: ChatGPT API for Web Developers course

The "Modeling Prompt Data" Lesson is part of the full, First Look: ChatGPT API for Web Developers course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano walks through the process of modeling prompt data for a cooking app, utilizing the prompt rules and capabilities discussed in previous lessons. This segment focuses on the section of the prompt that involves searching for a recipe and identifying ingredients.


Transcript from the "Modeling Prompt Data" Lesson

>> Now, it's time for our last live sample, and I promised you to work with an app. So I will keep my server up and running as it is right now, and I'm opening a new window, a new VS Code window. And I'm going to open another app, That is the one that you have as CookingMasters.

This app is separate just to show you that, in this case, it's going to use my web service. It can be in a different server, different domain, completely different. In fact, it doesn't contain a node.js server, so I can use, in this case, I'm going to use the plugin that I have in VS Code.

It's an extension for a web server. So I'm going to use a server on, this is Live Server. That's the one I'm using. I'm going to open a server on a different port. So now I have this app in one port, and the other up there. This app is known as Cooking Masters.

The idea of the app is to help us while we're cooking, the idea is that I wanna cook fish tacos with pickled onions, and I click here. I can see the ingredients, and I can start cooking. So I can go step by step with the cook process. While I'm cooking, I'm looking at my app, I can add timers, like that, different timers while cooking.

So that's an app, it's a web app, it's pretty simple. It's an app, all the recipes are coming from a JSON file, or it can be a database. But how to integrate this with artificial intelligence, how to integrate this with ChatGPT? Well, here we have an idea, what if I can enter here a list of ingredients that I have at home?

I have tomato or tomato, I have eggs, I have chicken, butter, bread, carrots, and I get the recipe with AI, that sounds interesting. And not just the recipe, I can ask OpenAI to grade the photo of that recipe, like that one. That's the goal, can we achieve that?

And with the same structure, so we can inject that recipe in the system and it will work as if it's a recipe coming from our own database. So all the client-side part is already there, waiting for us to finish the server part. So if we'll look here at scripts > app.js, there is a place where we can see that it's taking the ingredients from the text area and it's going to localhost 3000/api/recipe.

So we need to go to our server with OpenAI implement dot. And then after we get the recipe, it will ask for an image, and how the image works? The image work with a prompt. So probably, you have played with creating the image with AI. So you create the prompt, and this case, the prompt will be a high-quality photograph of the meal.

And the name of the recipe and the description of the recipe that was actually created by the AI, by GPT, okay? So GPT will create actually the prompt for the image creation. So what we need to do is go and create then the server. So I'm going back to the other project, and in our server, we need to work with that.

Well, first, do we need to see something new? Well, the image part, the image part is new, we haven't used that API before, but for the recipe, it's just the same thing. The only thing, the only important part is to work with the prompt, so what I need is to work with the prompt.

I need a good prompt so I can get the recipe in the format that I'm expecting. In fact, what's the format that I'm expecting? Let's look at the other recipes available in the data folder. So this is how it looks like, it's a JSON and a slug. That's for the router, the URL, a name, a type, a duration in minutes, an image, a description, the list of ingredients in this particular format.

And this steps, that is, an array with name, description, and some steps, they have a timer, because it's saying, for example, here, I wanna do something for 30 minutes and it has a timer of 30. Can we make GPT to create something like this from a list of random ingredients?

That's the challenge, okay? So I'm going to copy one of these objects because we can use that as a sample in our prompt. Okay, so I'm going to copy that just to have here somewhere. I will grade the constants for the recipe sample, okay, I will copy that.

That's okay, yeah, it's okay, I can just minimize that one, I can collapse that one, okay? So how to do that? Well, actually, it will be the same as the general thing, the only thing that we are going to work is with the content that is not body.prompt.

We are going to get from the body probably the list of ingredients. In fact, let's check if that's the case. So I'm going to app.js again, and I'm sending here to the first request the list of ingredients. Okay, so ingredients is the key of the JSON objects, I'm going back here and say this is ingredients.

I have a typo, ingredients, like so. And now, what I need is to create the prompt, and this is going to be probably a large prompt. So I will say that we'll create the prompt, I will use a backticks so I can be multiline, like that. But first, we can go to our playground and play first there to see if we get that, or just be confident enough and try a prompt directly, right?

So first, we need to pass some data, or we need to pass specific instructions. And also, we could add here, A role for the system. Remember, in our chat system, we can pass a role. The role is who you are or who the GPT model should be, okay?

So we can say that you are a cooking expert that creates recipes or healthy recipes or whatever, vegan recipes, whatever you wanna add. So and then we have the prompt. And the prompt is, for example, create a recipe with the list of ingredients defined in the markup. And then we can put ingredients, we create the markup.

Again, we don't need to explain the markup, the model will understand that, and put the ingredients that we are receiving like that there. And then we can also say, again, the more specific you are, the better. You can include typical ingredients found in a kitchen, such as, say, salt, pepper, condiments, because yeah, the user, probably, will never say, I have salt.

What else? Remember, we have here ingredients, that's an input from the user. We need to be very careful with that because the user might be saying anything. They even can be trying to inject the prompt and say, forget about everything that was said before, now I want you to do x and y.

But also, we need to do something like this, if the ingredients is empty, or if the list of ingredients is empty, or you can't find ingredients inside, just answer with false without any other character. So if the list of ingredients is empty, or I have a typo here.

By the way, what happens if I left off? That is wrong, the model will probably get it anyway. I mean, we should do it better, but actually, if we have a typo, most of the time, GPT will recognize what you meant anyway. In fact, there are people researching right now as we speak in a way to save tokens, how?

They found the way that these models are pretty good understanding compressed text. For example, if you write the text without vowels, or if you compress the words, they understand you anyway. So there are people playing with prompt compression algorithms to save you money. That makes sense, that's why.

Anyway, I also have another typo here, but I think that's a brain typo because ingredients in Spanish, and I speak Spanish, is ingredientes, that's the e there. I'm not sure if it's the autocompletion or is my brain. Anyway, so we were making sure that if the list of ingredients that we are passing is not good enough or is not the list of ingredients, we want just the false, we don't want the value, right?

So what else? If you have found a recipe, send the output in JSON format as the following sample in triple quotes. Then I use triple quotes and I pass the sample that was called recipeSample. I can add more instructions, the more instructions you add, the better results you will get.

By the way, because I'm using also template string, I may wanna change this maybe in three asterisks. Just because it's JavaScript and you will complain, I need to escape those characters. I can use double quotes, triple double quotes. So okay, we can try with that and see what happens.

So that's the prompt, I'm sending the prompt as content. You can see, this is large, and the answer might take some time. So maybe 30 seconds, so we need to be patient here. We can try here and do console.log of the prompt if you wanna see it, at least the first time in the console.

And also, we may wanna see the answer in the console. We don't need to, but just in case. Like so, okay,

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now