Anyone getting the same error?

[Jyotishmoy12]

project-threejs-ai-dalle-backend.onrender.com/api/v1/dalle:1 Failed to load resource: the server responded with a status of 500 () data:image/png;base…:1 Failed to load resource: net::ERR_INVALIDURL index-a04e7605.js:3485 Error: Could not load data:image/png;base64,undefined: undefined) at index-a04e7605.js:3489:22964 at HTMLImageElement.u (index-a04e7605.js:3455:187116) Oy @ index-a04e7605.js:3485 index-a04e7605.js:40 Error: Could not load data:image/png;base64,undefined: undefined) at index-a04e7605.js:3489:22964 at HTMLImageElement.u (index-a04e7605.js:3455:187116) R @ index-a04e7605.js:40 index-a04e7605.js:40 Uncaught Error: Could not load data:image/png;base64,undefined: undefined) at index-a04e7605.js:3489:22964 at HTMLImageElement.u (index-a04e7605.js:3455:187116) index-a04e7605.js:3455 THREE.WebGLRenderer: Context Lost.

[adnan-samir]

Ig its beacaue of the key , your open ai account is expired , try making a new acc with diff email, no and generate a new key and apply it , it'll work fine .

[Nuellity]

it is actually not generating the base64 format of the image that is why you see "undefined" here "data:image/png;base64,undefined: undefined)". Check your openai api account if you have enough credit to make an api request, else add a payment method to your account. Alternatively you can try Tryleap ai api .

This is my post request with tryleap api :

"import express from "express"; import axios from "axios"; import * as dotenv from "dotenv"; import { Leap } from "@leap-ai/sdk";

dotenv.config();

const router = express.Router();

const leap = new Leap(process.env.LEAP_API_KEY);

const negativePrompt = "(deformed iris, deformed pupils, semi-realistic, cgi, 3d, render, sketch, cartoon, drawing, anime:1.4), text, close up, cropped, out of frame, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck";

router.get("/", (req, res) => { res.status(200).json({ message: "Hello from DALL.E ROUTES" }); });

router.post("/", async (req, res) => { const { prompt } = req.body; try { const { data } = await leap.generate.generateImage({ prompt, negativePrompt, numberOfImages: 1, width: 1024, height: 1024, steps: 50, modelId: "37d42ae9-5f5f-4399-b60b-014d35e762a5", strenght: 1, seed: 957231946, }); const image = data.images[0]?.uri; const imageResponse = await axios.get(image, { responseType: "arraybuffer", }); const base64Image = Buffer.from(imageResponse.data).toString("base64"); const base64JSON = { b64json: base64Image };

res.status(200).json(base64JSON);

} catch (error) { console.error(error); res.status(500).json({ message: "Something went wrong" }); } });

export default router; "

[FredDaFed]

---

IF API KEY IS NOT EXPIRED & You still have CREDIT -

yet you still get the 500 HTTP ERROR STATUS...

---

For what its worth, here is a solution written on my behalf having this issue. https://github.com/adrianhajdin/project_threejs_ai/issues/16#issuecomment-1695590779

In summation, if using openAI version ^4 instead of ^3 - createImage() method will break the site. In the package.json file in the server directory, if you are using openAI ^4.0.0, the method changes to images.generate() in the dalle.routes.js file.

CONSIDER(openAI 3 to 4) the migration guide => https://github.com/openai/openai-node/discussions/217

[Jyotishmoy12]

Hey everyone I have tried everything but it's still showing the same error.. Plsss helpppp.....