Create Dynamic Image Generation Prompts for the OpenAI SDK in Next.js API Endpoints
The more descriptive an image prompt, the better the results will be. That includes being able to take user input to help articulate what the image should look like.
Dynamic prompts in Next.js serverless functions can help us generate images based off of application input with the OpenAI SDK. You'll learn how to configure an API Endpoint to parse a body of a POST request to grab a dynamic prompt value and use it to configure the prompt for the createImage method.
Instructor: [0:00] When using OpenAI to generate a new image using the createImage method, we can easily pass in a prompt with a static message. To make our API more flexible and more interesting, we can instead take a dynamic value and pass that in as the prompt.
[0:16] When working in a Next.js serverless function environment, we can grab the body of a request and pass that body in through the caller, in order to dynamically change that prompt value. Here, I have an example inside of my Next.js home page, or whenever I click a button, I can make a POST request to the API image end-point.
[0:34] Here, I can specify my body, where I can pass in the prompt that I want, such as a superhero that personifies a jellyfish. Then, inside of my serverless function, I can create a new constant of Body, where that's going to be equal to json.parse, where I'm going to pass in the request object, .Body, which is going to contain a string of the body that I passed for my application.
[0:59] I can even take that a step further and destructure that prompt, and pass it directly into that createImage method. Now, the only thing left to do is update how I respond, so that I can pass in what's expected as the image property, which in our case would be equal to response.data.data, where we're going to grab the first element of the array, and then finally, the URL.
[1:21] Now, if we try to actually hit the Generate button, we can see our new jellyfish superhero appear, where if we try this again so that we can actually see the network request, we can see select that image request, we can inspect what we sent, including that prompt as well as the response, which we can now see that image URL.
[1:38] This also gets more interesting when you create a field that somebody can customize what they want, or other form fields like a Select.
[1:45] If I have this handle on Generate on that form, and I use the fields from that form to grab the prompt value, I can then pass that directly in as that body and instead pass in something like, "A baby with superpowers." Once I try to generate, we can now see our superhero baby.
[2:03] While we're passing this prompt indirectly to the createImage method, this can become more interesting by configuring a prompt that set some parameters, where then we use input from the user, such as from a Select field, or given a set of options, where we can configure that prompt to dynamically change what we get, while still controlling the ultimate response we get.
[2:24] In review, in order to dynamically take a prompt and use it in the createImage method, we can accept a body, whereby grabbing that prompt value from a UI or however you're accepting parameters inside of your environment, we can use that prompt to dynamically generate a different image based on the user input that's provided.