Using image URL in images/edits request

Screenshot_1

image

i’m not even getting a useful error message anymore

Can you cast while calling a function?

I would set it up like one of the two examples above…

Also, you’re not setting image.name so it’s certain it’s a PNG… might be the problem?

more of the same. here’s all my code in one spot.


Screenshot_3

Can you upload the image and mask you’re using?

Are they 24bit or 32bit PNGs?

Is the normal generation endpoint working for you?

ETA: Might also try casting and setting up the images within the function?

1 Like

Can you also give us the console.log output for the response object (remove any sensitive info first)

If that is what is in the second image you posted, then response is undefined at the time the log is being called

1 Like

generation works. i’m using a function to save the generation response as a PNG, then using that as my edits image. i’m not sure if it’s 24b or 32b, but i’ll dig into it.

i do have some console logs in my code, but it seems they aren’t even triggering. i’m getting some massive block of data from the API, and the second image is what i can gather as the relevant part of it. i think it’s returning undefined because something is wrong with my request. hopefully it’s the bits thing.

I’m betting that might be something to do with it?

What are you using to save the PNG?

i’m using the npm library ‘image-downloader’

image

I’m starting to think maybe it’s not saving the PNG correctly…or rather, not saving in a form DALLE2 can use…

Can you upload the image and mask you’re using?

Might also try to return it as base64 rather than url…

Can you give us an example of what you get for the url variable?

Is it a url, or is it a string starting with “data:image/gif;base64,R0l” etc…

If it is undefined, can you also get the value for response.data[0][“url”]
Note: this only has one reference to data

I have some ideas - but the answer will help go in the right direction

Finally, can you also give the line where you define the download object in your final bit of code

https://oaidalleapiprodscus.blob.core.windows.net/private/org-iXQ5jPan1aYIFVj3pQgfwLh5/user-gGYciXCncqKJKkTnlOPE8Vpb/img-RA5juSiEiSrYwzvw3VmOz7PL.png?st=2023-01-12T00%3A40%3A55Z&se=2023-01-12T02%3A40%3A55Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-01-11T23%3A39%3A44Z&ske=2023-01-12T23%3A39%3A44Z&sks=b&skv=2021-08-06&sig=zhtFqp3gdVZWWBFSOqvXDDYQNBYlfjuk56sfhViwNeE%3D

this is a URL returned by my request to image generations. i’ve tried many different ways of converting both URL and b64 data to a valid PNG, but i had no idea what exactly constitutes such a thing. so i eventually ended up on the npm package ‘image-installer’, which is where the download object is from.

import * as download from 'image-downloader'

as for using b64 @PaulBellow, i’m just not certain how exactly to convert it to a valid PNG. i’ve tried several methods but haven’t landed on the right way. i knew absolutely nothing about images before this project, so it’s tough for me to identify where the issues are coming from

i tried logging the url response from edits, but it doesn’t even trigger the log. the call fails and logs a huge object that i’m not familiar with

image

OK, so you are getting the image url back (excellent)

It is a url, so we need to download the url and save it locally as a PNG file (At least that will get you able to move forward)

You need to use the variable “url” instead of “image” (Assuming the output you gave me above was from the url variable)

I also assume the path …/…/images can be accessed by your code when it is running. Try removing the …/…/images prefix if this doesn’t work.


const download = require(‘image-downloader’);

options = {
url: url,
dest: ‘…/…/images/cover.png’,
};

download.image(options)
.then(({ filename }) => {
console.log(‘Saved to’, filename);
})
.catch((err) => console.error(err));

1 Like

image i’ll try tweaking the path

I didnt see your final message before I replied

Try url = response.data[0][“url”]

Also wrap it all in a try/catch block and see if you are getting an exception

well, this is working fine. i have the image saved locally after running it. i forgot to mention that

1 Like

I’ll message you directly to avoid filling up the chat. We can post the final answer here

1 Like

Yeah, images can be tricky. Hoping you get it sorted.

me and @raymonddavey are almost positive there’s an issue on open AI’s end. either the endpoint is broken, or something vital is missing from the docs. we tinkered and tinkered last night, but nothing worked in the end. hopefully we hear something from the devs about it before too long

1 Like

You can specify the response_format as ‘b64_json’ to get the generated image returned as base64 data

  const response = await openai.createImage({
    prompt: prompt,
    n: 1,
    size: "256x256",
    response_format: "b64_json",
  });

  const base64 = response.data.data[0].b64_json;

This base64 data can then be used to create a buffer which can be passed into the API request

  const buffer = Buffer.from(base64, "base64");
  // Set a `name` that ends with .png so that the API knows it's a PNG image
  buffer.name = "image.png";

  const response = await openai.createImageVariation(buffer, 1, "256x256", "b64_json");

  base64Data = response.data.data[0].b64_json;

Full code to create a new image and a variation of the generated image:

  const response = await openai.createImage({
    prompt: "digital artwork of a robotic lion wearing a crown",
    n: 1,
    size: "256x256",
    response_format: "b64_json",
  });

const image = response.data.data[0].b64_json;

// This is the Buffer object that contains the generated image base64
const buffer = Buffer.from(image, "base64");
// Set a `name` that ends with .png so that the API knows it's a PNG image
buffer.name = "image.png";

const response = await openai.createImageVariation(buffer, 1, "256x256", "b64_json");

const variation = response.data.data[0].b64_json;

Hope this helps :slight_smile:

3 Likes