Create image variations with dall-e using react

[ilinca18]

i have been trying to create image variations using react but i get the following error

api.js:471 Uncaught (in promise) TypeError: localVarFormParams.getHeaders is not a function

my code, which i wrote in the app.jsx file is

import { Configuration, OpenAIApi } from “openai”;
import React, { useEffect, useState } from “react”;
import “./App.css”;
const imageUrl = “https://w7.pngwing.com/pngs/915/345/png-transparent-multicolored-balloons-illustration-balloon-balloon-free-balloons-easter-egg-desktop-wallpaper-party-thumbnail.png”;

function App() {

const configuration = new Configuration({
    apiKey: import.meta.env.VITE_Open_AI_Key,
});

const openai = new OpenAIApi(configuration);

const generateImage = async () => {
    const response = await openai.createImageVariation({
        image: imageUrl,
        n: 2,
        size: "1024x1024",
    });

    console.log(response.data.data[0].url);
};

return (
    <div>
        <button onClick={generateImage}>generate an image</button>
    </div>
);

}

export default App;

Any help would be much appreciated. Thanks!

[ruby_coder]

@ilinca18

api.js:471 Uncaught (in promise) TypeError: localVarFormParams.getHeaders is not a function

Hi @ilinca18

Did you debug based on the error message above, especially the part which states:

localVarFormParams.getHeaders is not a function

[ilinca18]

i must say that i am very new to coding, let alone react. unfortunately, i don’t really understand your question, but i think the problem has something to do with the fact that the openai only accepts urls or 64-encoded images.however i don’t know how to import images in react from a folder and transform them in b64. i have however read this code snippet, which was posted in another discussion

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

i am trying to do something similar, but without the create image from a prompt part, instead i would like to upload an image from my computer. would that be possible? if you have any further suggestions, i would be very thankful!

[RonaldGRuckus]

For obvious reasons you wouldn’t want to make these types of HTTP requests from a clientside script such as ReactJS.

I don’t believe it’s the current issue, but you may run into this.
Regarding your question, it’s possible that the API key isn’t being registered correctly? It looks like the error you pasted is coming from the OpenAI library (based on the line 471 indication)

But, you should still consider reading this first, and then decide to make the HTTP request using a back-end server such as node.js

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

If you’re new to programming, I’d recommend honestly just copying and pasting your code, and the error to GPT-4, it will probably do a fantastic job of debugging for you.

[ruby_coder]

@RonaldGRuckus

For obvious reasons you wouldn’t want to make these types of HTTP requests from a clientside script such as ReactJS.

It is normal to make these types of API calls in client-side code like React.

There is “no obvious” or “any” reason for a full stack web developer to not use OpenAI API calls in client side JS code.

See Also:

Create Your Own OpenAI Powered Chatbot in React within 30 minutes.

react-openai-api

Build Your Own Next.js and React App with the OpenAI API: A Beginner’s Guide

react-openai-api examples - CodeSandbox

Build Your ChatGPT AI App in React use OpenAI Api | MERN tutorial | Machine Learning

[RonaldGRuckus]

These are very cool examples. Unless people are willing to share their API keys these wouldn’t not be deployable…

[ilinca18]

RonaldGRuckus
Thank you. I have tried chat-gpt but without success. i am trying to make this for a website. I understand that probably you need much more knowledge of react in order to solve this problem. however i was curious if anyone has any suggestions, as I have tried to solve it for some time now and googled it a lot

[RonaldGRuckus]

ReactJS is wonderful. You would want an actual server though. NodeJS is great. Works well with ReactJS and is Javascript as well. There’s plenty of options

For your own personal use there’s definitely nothing wrong with just using ReactJS though

[ilinca18]

ok, the question still remains. if you have any suggestions, as to how i could import an image from folder, in order to use it in the createImageVariation function, i would be very grateful

[RonaldGRuckus]

The tutorials posted here would work great. Although if you have no experience with coding I’d say that using Python would be your best bet.

[ruby_coder]

@ilinca18

I have tried chat-gpt but without success

Yes, because ChatGPT pre-trained models (all of them) have zero knowledge of anything past mid 2021 and is full of deprecated OpenAI libs and code which provide nothing but errors to everyone who tries to write OpenAI API code using ChatGPT.

@ilinca18

I understand that probably you need much more knowledge of react in order to solve this problem. however i was curious if anyone has any suggestions,

You can do it, but is is difficult to write code in frameworks like React and VueJS if you @ilinca18 do not have a lot of prior Javascript coding experience.

@ilinca18

however i was curious if anyone has any suggestions,

Yes, have you first written “Hello World” in React?

Hello World – React

@ilinca18

as I have tried to solve it for some time now and googled it a lot

I found many tutorials on how to build chatbots using ReactJS. A few of which I posted in my earlier post, but if you have no prior ReactJS confiding experience, please spend time and work a few “hello world” tutorials first to get a basic feel for ReactJS before diving into making external API calls.

Then when you are comfortable with Hello World ReactJS, then try some simple API call like getting lorem ipsum text from an API, or maybe a joke generating API. There are many less complex APIs to start with. Get one of those to work first, then move on to your OpenAI project.

Hope this helps.

Appendix.

gpt-4 had as cutoff date of mid 2021, which I confirmed again just now:

It is nonsense for anyone to suggest that gpt-4 can debug OpenAI API code in 2023 because the OpenAI LLM models are full of old, depreciated OpenAI API calls and params. Because of this, these models will just “make up” code (generate for the sake of answering the question), which is blah, blah, nonsense. You @ilinca18 will waste a lot of time if you try to use generative AI with cutoff dates in mid 2021 to write code with APIs and libs which have seen major upgrades since 2021.

[ilinca18]

ok, thank you. I have looked upon the links you sent me, but all are about how to build chatgpt ai using react. my question is how to import an image from folder, in order for the dall-e to view it.

[ruby_coder]

@ilinca18

react. my question is how to import an image from folder, in order for the dall-e to view it

Then this is a basic Javascript question and not really an OpenAI API question.

Right, @ilinca18 ?

See, for example:

How to load images from folder by using javascript

See also…

Load local images in React.js

Google will help you … as all I did was google for you @ilinca18

[engr.safdarwasim]

I am facing similar issue. I am using JavaScript to develop a browser based application. This is big issue because there are so many node.js libraries that you cannot use. However, if you project requires HTTP requests from a client side, what you can do?