Create Dynamic Image Generation Prompts for the OpenAI SDK in Next.js API Endpoints

Colby Fayock
InstructorColby Fayock
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

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.

https://nextjs.org/docs/api-routes/introduction

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.

egghead
egghead
~ 3 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today