Build An AI Image Generator App In React Using OpenAI - Like DALL-E Image Generation App
HTML-код
- Опубликовано: 21 авг 2023
- 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.com/file/d/1nYpa...
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
👉 easytutorialspro.com/go/course/
----------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ 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:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
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?
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.👌👌👌👌👌👌
This is amazing.
Thanks for this.
Glad you like it!
Welcome back 🎉🎉
making this project right now thankss sirr
All the best
Dude does it works for you ?
This video will get viral, because of AI
Superb project sir
Thanks syed, glad you liked this react projects to build AI image generator
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
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: ruclips.net/video/EzkWAviyYgg/видео.html
Can you share me jsx code please
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.
Very good explain and very good project sir
very helpful brother
Bhaiya ek pagination pr video bana do next prev aur 1234 wala pagination
Wow, nice video
thank you. Glad you liked this AI project in React JS
Amazing but can we save umages in our library
thank you
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?
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🙂
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
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: ruclips.net/video/GAZVvpjxYQY/видео.html&pp=iAQB
How can I add the loading / buffering sign when the image is loading in React ? Can you please help ?
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
Love from Pakistan
thank you so much, Glad you liked this tutorial, Please check this another awesome react project to make chatGPT clone: ruclips.net/video/EzkWAviyYgg/видео.html
Good evening sir 🙏
How to create same for multilingual??
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 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.
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
does this required a database or not??
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.
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
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?
nice video ! where i can get the source code?
Hello Avinash Bhai
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: ruclips.net/video/r5kO-E6NI14/видео.html
Sir cannot read properties of undefined (reading 0) error
Same!
can you share shared code
"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
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.
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: ruclips.net/video/r5kO-E6NI14/видео.html
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
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
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.
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
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
19:40 'billing_hard_limit_reached', message: 'Billing hard limit has been reached' getting this plz help
same here, Would someone please help?
What is VS theme??
I am using brackets theme in my VS code
@GreatStackDev hey can you provide source code for this project
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}`,
while billing. It shows Your card has been declined. idk why?
same .. is there any free alternative
Why it's not responsive for mobile devices
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-xc5mx 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 can't read properties of undefined (reading 0) error
19:40 'billing_hard_limit_reached', message: 'Billing hard limit has been reached' getting this plz help
would someone please help?
Same
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
unable to create react app
Please follow this beginners tutorial to create react app: ruclips.net/video/r5kO-E6NI14/видео.html
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
Make a presale crypto website
check this tutorial to make crypto website: ruclips.net/video/nidmDGwJ-Jw/видео.html
first
thanks, keep supporting
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
It is asking for a $5 initial credit?
hm true..
is there any free alternative ?
It shows dataarray is undefined
OpenAi api is not giving free credits anymore. stopped the project by half :(
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
sir im not getting any objects in the console can you please help now
Did you solve it?
i am getting uncaught runtime errors
Did u solve
Not finding url link in openai
Hey i can help you
Source Code?
Api is not working 😢
nice bro pls face reveal
you can find me on Instagram: instagram.com/iamavinashkr
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
cannot work api
can anyone send source code of it I facing errors
anyone have source of it
400 bad request , can anyone help me
Can one share source code
I getting errors
I also getting an error
Hi I'll pay u too build me one
You can write us on instagram: instagram.com/greatstackdev
How to download the images generated of AI sir.....
Bro what is your name in github
sir im not getting any objects in the console can you please help now
i am getting uncaught runtime errors
Same bro got any solution???