Build An AI Image Generator App In React Using OpenAI - Like DALL-E Image Generation App
Вставка
- Опубліковано 7 лют 2025
- Build your own version of AI Image Generator app in React JS. This AI image generator is built using OpenAI API. Here you can learn about how to create an AI image generation tool like DALL-E or Midjourney.
What is AI Image Generator app?
An AI technology that is used to generate new images by learning patterns from existing data is known as an AI image generator app.
#OpenAI #AIApplications #GreatStack
#Reactjs #ReactProjects
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this tutorial we are going to create an AI application that create images using AI technology. We will create this AI image generator app using React JS And OpenAI api. You can build this app with Free Trail API Credit of OpenAI. This AI image generator will generate the image as per the image description that we type in the input box.
Download the assets:
👉 drive.google.c...
React Introduction tutorial:
👉 • What Is React (React J...
JavaScript complete tutorials for beginners:
👉 • What Is JavaScript | I...
JavaScript Projects for beginners:
👉 • How To Make Weather Ap...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
----------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ UA-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
making this project right now thankss sirr
All the best
Dude does it works for you ?
@@redbaby-i3w noo.....is it working??????
@@cliftonlobo8485 not working properly
This video will get viral, because of AI
From where did you get the documentation of fetching the API like the way you used. Because the OpenAI API documentation is a little bit different.
Have you got the Solution to it bro?
Bro if you got solution for this please reply me with that, i also want to know .
Thank you Sir for this react project. I'm very interested for your react project playlist. Please create more project using react. Thank you very much for this website.👌👌👌👌👌👌
Thank you so much GreatStack you really save us who is having trouble learning programming you make it easy to understand i learn a lot from you, More blessings to come and have a great life
Thanks ryujin, Glad you liked our work, Please check this another awesome react project to make chatGPT clone: ua-cam.com/video/EzkWAviyYgg/v-deo.html
Can you share me jsx code please
I need assistance please, mine keep throwing an error
“cannot read properties of undefined (reading ‘0’)”
How do I resolve it please
@@devtechz are you sure because this same problem occurred with me please reply me as soon as possible bcoz during whole video there is not any discussion of debit card related
Yeah same
did you know the answer to that error? I have the same
@@lucasmiranda6990 guess we need to add our debit card before it work
same problem
Great tutorial! I'm curious, have you tried experimenting with any other AI models, or is OpenAI the preferred choice for this type of image generation?
Plz tell me one thing what is the pricing and net cost associated with this api for per search after creating the api
19:40 'billing_hard_limit_reached', message: 'Billing hard limit has been reached' getting this plz help
same here, Would someone please help?
You pay money for api
Great project sir..
Thanks Sankar, Glad you like this AI image generator React Project
Can you please share me jsx code...my one is showing an error uncaught runtime error
This is amazing.
Thanks for this.
Glad you like it!
We have to start payment plan in billing overview and we have to provide a card details also for that mean we have to pay for using API please answer Bro
it will deduct around $5 for card verification and then it will refund $5 immediately.
After card verification, you will see free credit in uses page, In my new account I got free credit limit of $5, When I will use more than $5 then only it will charge.
You can always remove the payment method after practicing this project.
@@GreatStackDev Great, ThankYou for such information🙂
Superb project sir
Thanks syed, glad you liked this react projects to build AI image generator
Very good explain and very good project sir
Sir, It is showing error 400 Bad Request-Billing Hard Limit Reached in the console. What we have to do
do you have added the card details in payment section?
@@PrajjvalMishra-x1yso without adding payment details we can't fetch right?
your free credits limit has been finished . You have to pay now to avail service.
I have to make this kind of project for my school, also learning React at the same. Any idea if there is any tutorial where I can make a working project without any payments?
Welcome back 🎉🎉
does this required a database or not??
hey! is there a limit to how many requests you can make with the image generation api for free? or is it unlimited?
do you have answer maybe?
@@rollingstone6696 no there is no limit. Haven't got any issues till now
19:40 'billing_hard_limit_reached', message: 'Billing hard limit has been reached' getting this plz help
would someone please help?
Same
@@riya_1723 hey did you get the solution facing same issues...
How can I add the loading / buffering sign when the image is loading in React ? Can you please help ?
i cant see the API url in 17:10 ! why ? nice project btw!!
In that code snippet box, there is a "copy" button in top right, and there is one drop down menu also. Select "curl" from that drop down menu.
Please help, throwing error - cannot read properties of undefined reading 0.
Sir please give Api key for Start my project. It could not start using my Api after creating account in OpenAI😊
Hi Vishal, If I give my API key to everyone then my Free uses limit will exhausted, after exceeding the free limit, it will deduct charges from my card.
Sir cannot read properties of undefined (reading 0) error
Same!
can you share shared code
the openAi api is not respoding in 2024
I want this to be an actual application that people can download of the playstore and the apple app store, how do i convert this project into that
Do I have to pay in openAi ?? do I have to enter my payment details ?? pls help
yes
api link is not loading. Can you help me with that? {
"error": {
"code": null,
"message": "Not allowed to GET on /v1/images/generations. (HINT: Perhaps you meant to use a different HTTP method?)",
"param": null,
"type": "invalid_request_error"
}
} this is displayed
1
Reply
Use POST in place of GET
im having a problem with the api is this still valid until now
Amazing but can we save umages in our library
Heads up: IF YOU DON'T HAVE FREE CREDITS OR PAY THE APP WON'T WORK FOR YOU
How much to pay to app?
How much the amount to pay
For first time I have to pay to this app?
Saved my time thanks🙏
@@dikshagarg345actually first time you will get some free credits to use after some searches it will finish then it will ask you to pay
"error": {
"code": "billing_hard_limit_reached",
"message": "Billing hard limit has been reached",
"param": null,
"type": "invalid_request_error"
}
}
( sir how can resolve this issue)
same error show up to my pc
i think the url has not work
same@@rythmwithringtone1323
in this tutorial at time 16:53 you can see the free trial usage, please check your free trial usage
Cannot read properties unefined (reading `0^)
This is the error in last of this project and image url is not in console . Plz help!
api link is not loading. Can you help me with that? {
"error": {
"code": null,
"message": "Not allowed to GET on /v1/images/generations. (HINT: Perhaps you meant to use a different HTTP method?)",
"param": null,
"type": "invalid_request_error"
}
} this is displayed
Same with me
You cant go through GET you need POST because you need with request to pass api key and maybe prompt too
my node.js is not creating the npx and can't resolve npx problem
you should follow this beginner tutorial to install node js and react: ua-cam.com/video/r5kO-E6NI14/v-deo.html
thank you
I would like to acquire this project along with its source code, and I am willing to pay for it."
Love from Pakistan
thank you so much, Glad you liked this tutorial, Please check this another awesome react project to make chatGPT clone: ua-cam.com/video/EzkWAviyYgg/v-deo.html
@GreatStack bro please provide me code ..i want to crosscheak...i follow your every step in this video but my img is not generating
how did u manage?
Hey, I tried all of this and got a problem in the end, I get an image that is totally different from what I entered. You think you can help me out?
Me too. Did you find out what the problem was?
@@nimixu9115 make sure you are using ` and not ' for the prompt:`${inputRef.current.value}`,
bro did someone got the proper output as per the video i am facing issues in APi key could someone help me out in this
same is it fixed??????
do you have to put credit card information into the openai account? because i get error,
error: Object { code: "billing_hard_limit_reached", message: "Billing hard limit has been reached", type: "invalid_request_error", … }
i got the same error, have you found the solution yet?
@@ambuyat69free trial expired, u have to subscribe
@@ambuyat69remember don't put it in production as the video also says you have to create an .env and put the api key there to keep it safe and recall it
@@RuntimeRanger thanks for the reminder, and also I just figured it out you need to put in your credit card information there in order for it to work
sir im not getting any objects in the console can you please help now
Did you solve it?
I don't know what to do. "message": "Billing hard limit has been reached"
in this tutorial at time 16:53 you can see the free trial usage, please check your free trial usage
Sir the npx create-react-app is not installing
it requires node js installed on your PC. Please checkout this beginners tutorial to create first react app: ua-cam.com/video/r5kO-E6NI14/v-deo.html
Sir, can you make videos on how to design website layout for beginners
Hi yash, I already have lot of tutorial for beginners to make website layouts. Please check here: ua-cam.com/video/GAZVvpjxYQY/v-deo.html&pp=iAQB
it's not working i don't know why it says that it have the issue with api-key i cross-checked it so many times still not working
can anyone help
API link is not loading
{
"error": {
"code": null,
"message": "Not allowed to GET on /v1/images/generations. (HINT: Perhaps you meant to use a different HTTP method?)",
"param": null,
"type": "invalid_request_error"
}
}
Have you got the solution?
Good evening sir 🙏
How to create same for multilingual??
400 bad request , can anyone help me
Hello , I have tried this app but at the end , image which is generating it's irrelevant from entered input ...could anyone please help me ??
did you find a solution because its the same for me
assets are not completed. can you provide complete assets.
Only one image in assets you can download it any site move to assets
What is VS theme??
I am using brackets theme in my VS code
Can we make it using Javascript only
JavaScript doesn't require extra tools however, using React to create user Interfaces is a rather smart choice over plain JavaScript.
You can use JavaScript but it may take longer, your code may become redundant in some ways especially when some of us are beginners. React simplifies this process for us thanks to Meta.
Image and search doesn't show in web page it's blank
Coze you have error host on chrome inspect in and check error in console
@@abhiii369 how to check
OpenAi api is not giving free credits anymore. stopped the project by half :(
15:53
how can I add debit card in chatgpt
in this tutorial at time 16:44 you can see the button "start payment plan" click on that button and setup the payment method to get free usage limit for API
bro explain billing part also and give brief explanation this not the way you record tutorial for project you should explain all the things properly
Why it's not responsive for mobile devices
sir is there any free api ???
It is asking for a $5 initial credit?
hm true..
is there any free alternative ?
Why are you using div everywhere???????
lmfao only read Divs know
i am getting uncaught runtime errors
Did u solve
How to minimize the picture,the picture was so big
Set it size dynamically or through css
Api is not working 😢
Source Code?
@GreatStackDev hey can you provide source code for this project
It shows dataarray is undefined
this api is asking for the payment can i get free api?
while billing. It shows Your card has been declined. idk why?
same .. is there any free alternative
Not finding url link in openai
Hey i can help you
can anyone send source code of it I facing errors
Hi! I took a break from youtube for about 5 months as I was busy spending time in nature.
By the way, is it you Avinash? Sounds like you but a little different.
Also, I typed Easy Tutorials but GreatStack showed up. Did you rebrand your channel.
I'm curious. Please let me know. Thank you.
Avinash be like: Ayein
Bhaiya ek pagination pr video bana do next prev aur 1234 wala pagination
is this Api free? or we have to integrate our credentials
$5 api uses free for 3 months, you will get free limit after verifying the payment method.
Wow, nice video
thank you. Glad you liked this AI project in React JS
very helpful brother
code: "billing_hard_limit_reached"
message: "Billing hard limit has been reached"
param: null
type: "invalid_request_error"
it says error, how can i resolve this
i have face this same issue .how resolve this
You can pay or it
Sir its showing uncaught runtime error please help
check your API uses page on open AI website, if it is $0, then you need to verify the payment method to get free api limit
Thanks, Best project in react. I will make it and send it to you on your instagram
Thanks Abhinav, Also share this tutorial link with your friends.
Can one share source code
I getting errors
I also getting an error
Hello Avinash Bhai
anyone have source of it
16:34
Sir the open api is not working
check "uses" page on website. It will display available free uses limit. If it is 0$ then you need to verify the payment method to get free uses limit.
nice bro pls face reveal
you can find me on Instagram: instagram.com/iamavinashkr
cannot work api
How to download the images generated of AI sir.....
Make a presale crypto website
check this tutorial to make crypto website: ua-cam.com/video/nidmDGwJ-Jw/v-deo.html
unable to create react app
Please follow this beginners tutorial to create react app: ua-cam.com/video/r5kO-E6NI14/v-deo.html
nice video ! where i can get the source code?
Hi I'll pay u too build me one
You can write us on instagram: instagram.com/greatstackdev
first
thanks, keep supporting
Bro what is your name in github
17:46
sir im not getting any objects in the console can you please help now
Sir can't read properties of undefined (reading 0) error
Can anyone explain this?
Same issue can anyone explain please