Build An AI Image Generator App In React Using OpenAI - Like DALL-E Image Generation App
Вставка
- Опубліковано 12 лис 2024
- 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
This video will get viral, because of AI
making this project right now thankss sirr
All the best
Dude does it works for you ?
@@hey-airo noo.....is it working??????
@@cliftonlobo8485 not working properly
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?
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
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
very helpful brother
Superb project sir
Thanks syed, glad you liked this react projects to build AI image generator
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
Very good explain and very good project sir
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?
This is amazing.
Thanks for this.
Glad you like it!
Welcome back 🎉🎉
How can I add the loading / buffering sign when the image is loading in React ? Can you please help ?
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.
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🙂
Cannot read properties unefined (reading `0^)
This is the error in last of this project and image url is not in console . Plz help!
Wow, nice video
thank you. Glad you liked this AI project in React JS
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
thank you
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
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?
im having a problem with the api is this still valid until now
Hello Avinash Bhai
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
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
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.
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
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
does this required a database or not??
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.
Sir cannot read properties of undefined (reading 0) error
Same!
can you share shared code
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
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
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...
Do I have to pay in openAi ?? do I have to enter my payment details ?? pls help
yes
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
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
Amazing but can we save umages in our library
OpenAi api is not giving free credits anymore. stopped the project by half :(
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
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??????
Why it's not responsive for mobile devices
assets are not completed. can you provide complete assets.
Only one image in assets you can download it any site move to assets
@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?
Good evening sir 🙏
How to create same for multilingual??
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
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
Bhaiya ek pagination pr video bana do next prev aur 1234 wala pagination
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
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.
sir im not getting any objects in the console can you please help now
Did you solve it?
400 bad request , can anyone help me
What is VS theme??
I am using brackets theme in my VS code
@GreatStackDev hey can you provide source code for this project
the openAi api is not respoding in 2024
Same here 😢
nice bro pls face reveal
you can find me on Instagram: instagram.com/iamavinashkr
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?
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.
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
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}`,
"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
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
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
15:53
How to minimize the picture,the picture was so big
Set it size dynamically or through css
It shows dataarray is undefined
Why are you using div everywhere???????
lmfao only read Divs know
this api is asking for the payment can i get free api?
Source Code?
while billing. It shows Your card has been declined. idk why?
same .. is there any free alternative
can anyone send source code of it I facing errors
nice video ! where i can get the source code?
How to download the images generated of AI sir.....
It is asking for a $5 initial credit?
hm true..
is there any free alternative ?
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
i am getting uncaught runtime errors
Did u solve
Not finding url link in openai
Hey i can help you
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
Api is not working 😢
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.
anyone have source of it
Make a presale crypto website
check this tutorial to make crypto website: ua-cam.com/video/nidmDGwJ-Jw/v-deo.html
Can one share source code
I getting errors
I also getting an error
cannot work api
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.
16:34
unable to create react app
Please follow this beginners tutorial to create react app: ua-cam.com/video/r5kO-E6NI14/v-deo.html
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
sir im not getting any objects in the console can you please help now
17:46
Sir can't read properties of undefined (reading 0) error
Can anyone explain this?
Same issue can anyone explain please
i am getting uncaught runtime errors
Same bro got any solution???