First Look: ChatGPT API for Web Developers

Using the Image API

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 "Using the Image API" 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 implements the Images API to create and display an image corresponding to the generated recipe. The ingredients and recipe sample must be stringified within the prompt for proper functionality.

Preview
Close

Transcript from the "Using the Image API" Lesson

[00:00:00]
>> And then we need the image side, and this is using the DALI API, the Image Creation API. So let's go to the documentation, the API reference, and we're going to look for images. Here we can just take the example on Node.js. We already have all the declaration we just need to copy this something like that.

[00:00:32]
You can see it's a response a waiting for a cute baby see other bonobo first the size. We can make it smaller because we don't need it that big. And then what we need is to get the prompt that we are sending from the app. So similar to what we have done before, we are going to get, let's see first What's going on here?

[00:01:02]
So we're going to say, the body, From the request, the body, the prompt, it's actually body dot prompt. And we can send in one. If you look at the API Let's go back here. The n is the number of images to generate. I don't want two, I want one.

[00:01:26]
Because we are not going to see them manually. So let's cross our fingers and send the image directly to the user. And finally, what we're going to receive is not actually the image. So it's not the image bytes. We're going to receive the URL. So we're going to respond back to the client, back to the front-end, a JSON with the URL Taking from their response.

[00:01:55]
But their response is the data, the data subzero dot URL, how do I know that? It should be in the sample. Somewhere more down. Because that's how you get into the URL, like that. So you get the data. I think that should be good. Okay. So the only difference that we are changing.

[00:02:27]
The function name that behind the scenes, what's going on here is that it's changing the endpoint and the arguments and that's all. So the library is just changing the endpoint and making a normal HTTP request. Well before testing this, we need to solve to box that we have first.

[00:02:48]
In our prompt we are passing the list of ingredients but that's actually an object because it's JSON. So because this is a string, we should stringify the list of ingredients. And also it's not request.ingredients, it's body.ingredients. And also we need to do something similar, stringify the recipe because the recipe is also an object.

[00:03:17]
So I'm going to stringify the recipe sample and now we are ready to test this. So back in our Cooking Masters application, I will type a list of ingredients that I have just as chicken, avocado. Bread, butter and eggs and I will get a recipe with AI. And now, our AI Chef is working.

[00:03:48]
This will take some seconds because actually it's going to GPT first to get the recipe and after that, It's going to get robbed the image from Dali. And finally, we have a beautiful chicken avocado sandwich that has its own image. And you can see it's part of the same data structure.

[00:04:09]
So it's actually the UI. It's getting the right name. Type ingredients, the amount of minutes that it takes I can get in. And I can see the ingredients and I can start cooking my chicken avocado sandwich in four steps. And I can go one by one. So we actually got and a structure data that was embeddable by the artificial intelligence based on user input.

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