Тёмный

Build An AI Image Generator App In React Using OpenAI - Like DALL-E Image Generation App 

GreatStack
Подписаться 1 млн
Просмотров 60 тыс.
50% 1

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:
◼️ RU-vid: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

Опубликовано:

 

21 авг 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 156   
@creatorsmafia
@creatorsmafia 9 месяцев назад
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?
@Re-public-ty1lb
@Re-public-ty1lb 8 месяцев назад
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.👌👌👌👌👌👌
@aashishdaveaashishdave5991
@aashishdaveaashishdave5991 Месяц назад
Very good explain and very good project sir
@gideonabiodun
@gideonabiodun 9 месяцев назад
This is amazing. Thanks for this.
@GreatStackDev
@GreatStackDev 9 месяцев назад
Glad you like it!
@nileshmukherjee6091
@nileshmukherjee6091 2 месяца назад
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.
@saketg07
@saketg07 9 месяцев назад
making this project right now thankss sirr
@GreatStackDev
@GreatStackDev 9 месяцев назад
All the best
@redxroomie
@redxroomie 3 месяца назад
Dude does it works for you ?
@ryujinminatozaki651
@ryujinminatozaki651 9 месяцев назад
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
@GreatStackDev
@GreatStackDev 9 месяцев назад
Thanks ryujin, Glad you liked our work, Please check this another awesome react project to make chatGPT clone: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EzkWAviyYgg.html
@nikitakhare993
@nikitakhare993 8 месяцев назад
Can you share me jsx code please
@muthukumarnarayanan5679
@muthukumarnarayanan5679 3 месяца назад
very helpful brother
@syedmaaz2374
@syedmaaz2374 9 месяцев назад
Superb project sir
@GreatStackDev
@GreatStackDev 9 месяцев назад
Thanks syed, glad you liked this react projects to build AI image generator
@dee8269
@dee8269 Месяц назад
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?
@phanitadinada5046
@phanitadinada5046 15 дней назад
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
@krish07_
@krish07_ 9 месяцев назад
This video will get viral, because of AI
@vsankar
@vsankar 9 месяцев назад
Great project sir..
@GreatStackDev
@GreatStackDev 9 месяцев назад
Thanks Sankar, Glad you like this AI image generator React Project
@nikitakhare993
@nikitakhare993 8 месяцев назад
Can you please share me jsx code...my one is showing an error uncaught runtime error
@aymenbachiri-yh2hd
@aymenbachiri-yh2hd 6 месяцев назад
thank you
@flopgeamer6118
@flopgeamer6118 9 месяцев назад
Welcome back 🎉🎉
@SZBrosOfficial
@SZBrosOfficial 9 месяцев назад
Amazing but can we save umages in our library
@manidixit4186
@manidixit4186 Месяц назад
How can I add the loading / buffering sign when the image is loading in React ? Can you please help ?
@blackcoder2510
@blackcoder2510 9 месяцев назад
Wow, nice video
@GreatStackDev
@GreatStackDev 9 месяцев назад
thank you. Glad you liked this AI project in React JS
@mittalkabir277
@mittalkabir277 7 месяцев назад
Good evening sir 🙏 How to create same for multilingual??
@user-wv5og7hw8v
@user-wv5og7hw8v 9 месяцев назад
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
@GreatStackDev
@GreatStackDev 9 месяцев назад
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.
@user-wv5og7hw8v
@user-wv5og7hw8v 9 месяцев назад
@@GreatStackDev Great, ThankYou for such information🙂
@vitorguimaa
@vitorguimaa 5 месяцев назад
nice video ! where i can get the source code?
@user-ro5rp1bp2r
@user-ro5rp1bp2r 4 месяца назад
does this required a database or not??
@mrsiryeah6024
@mrsiryeah6024 5 месяцев назад
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
@Matiast9477
@Matiast9477 7 месяцев назад
Heads up: IF YOU DON'T HAVE FREE CREDITS OR PAY THE APP WON'T WORK FOR YOU
@ashutoshjoshi7328
@ashutoshjoshi7328 2 месяца назад
How much to pay to app?
@nagesh7481
@nagesh7481 2 месяца назад
How much the amount to pay
@naziatabassum1314
@naziatabassum1314 2 месяца назад
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
@bhanubansal5588
@bhanubansal5588 7 месяцев назад
hey! is there a limit to how many requests you can make with the image generation api for free? or is it unlimited?
@rollingstone6696
@rollingstone6696 Месяц назад
do you have answer maybe?
@bhanubansal5588
@bhanubansal5588 Месяц назад
@@rollingstone6696 no there is no limit. Haven't got any issues till now
@yashbhawar5676
@yashbhawar5676 9 месяцев назад
Sir, can you make videos on how to design website layout for beginners
@GreatStackDev
@GreatStackDev 9 месяцев назад
Hi yash, I already have lot of tutorial for beginners to make website layouts. Please check here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GAZVvpjxYQY.html&pp=iAQB
@sanketsingh5555
@sanketsingh5555 9 месяцев назад
Bhaiya ek pagination pr video bana do next prev aur 1234 wala pagination
@iCeTainment
@iCeTainment 9 месяцев назад
I need assistance please, mine keep throwing an error “cannot read properties of undefined (reading ‘0’)” How do I resolve it please
@umaralam6975
@umaralam6975 9 месяцев назад
@@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
@nikitakhare993
@nikitakhare993 8 месяцев назад
Yeah same
@lucasmiranda6990
@lucasmiranda6990 8 месяцев назад
did you know the answer to that error? I have the same
@iCeTainment
@iCeTainment 8 месяцев назад
@@lucasmiranda6990 guess we need to add our debit card before it work
@tahsinzamanzilan6216
@tahsinzamanzilan6216 8 месяцев назад
same problem
@shifaurrahman-nd1xq
@shifaurrahman-nd1xq 18 дней назад
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
@anwarsk6
@anwarsk6 6 месяцев назад
Sir, It is showing error 400 Bad Request-Billing Hard Limit Reached in the console. What we have to do
@user-kg3iz4ww9m
@user-kg3iz4ww9m 4 месяца назад
do you have added the card details in payment section?
@mnithin809
@mnithin809 5 дней назад
​@@user-kg3iz4ww9mso without adding payment details we can't fetch right?
@mahekshahu4707
@mahekshahu4707 10 дней назад
@GreatStack bro please provide me code ..i want to crosscheak...i follow your every step in this video but my img is not generating
@cristianferreira3350
@cristianferreira3350 9 месяцев назад
i cant see the API url in 17:10 ! why ? nice project btw!!
@GreatStackDev
@GreatStackDev 9 месяцев назад
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.
@teenu3670
@teenu3670 6 месяцев назад
Why it's not responsive for mobile devices
@Nexadoremon
@Nexadoremon 9 месяцев назад
Hello Avinash Bhai
@redxroomie
@redxroomie 3 месяца назад
@GreatStackDev hey can you provide source code for this project
@VishalGupta-nv3ig
@VishalGupta-nv3ig 9 месяцев назад
Sir please give Api key for Start my project. It could not start using my Api after creating account in OpenAI😊
@GreatStackDev
@GreatStackDev 9 месяцев назад
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.
@arthisreecm-0137
@arthisreecm-0137 3 месяца назад
sir im not getting any objects in the console can you please help now
@weirddude6971
@weirddude6971 7 месяцев назад
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?
@nimixu9115
@nimixu9115 4 месяца назад
Me too. Did you find out what the problem was?
@bhagavathulaj1
@bhagavathulaj1 4 месяца назад
@@nimixu9115 make sure you are using ` and not ' for the prompt:`${inputRef.current.value}`,
@BlitzVirtuoso
@BlitzVirtuoso 9 месяцев назад
Love from Pakistan
@GreatStackDev
@GreatStackDev 9 месяцев назад
thank you so much, Glad you liked this tutorial, Please check this another awesome react project to make chatGPT clone: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EzkWAviyYgg.html
@lakshmivarma1875
@lakshmivarma1875 Месяц назад
OpenAi api is not giving free credits anymore. stopped the project by half :(
@rahulPramod349
@rahulPramod349 Месяц назад
19:40 'billing_hard_limit_reached', message: 'Billing hard limit has been reached' getting this plz help would someone please help?
@riya_1723
@riya_1723 28 дней назад
Same
@powerspringintlgospelcentr1170
@powerspringintlgospelcentr1170 8 месяцев назад
my node.js is not creating the npx and can't resolve npx problem
@GreatStackDev
@GreatStackDev 8 месяцев назад
you should follow this beginner tutorial to install node js and react: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-r5kO-E6NI14.html
@vaibhavbunde6119
@vaibhavbunde6119 4 месяца назад
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 ??
@sIate9
@sIate9 2 месяца назад
did you find a solution because its the same for me
@abhinavgupta1219
@abhinavgupta1219 9 месяцев назад
Thanks, Best project in react. I will make it and send it to you on your instagram
@GreatStackDev
@GreatStackDev 9 месяцев назад
Thanks Abhinav, Also share this tutorial link with your friends.
@saudshaikh2426
@saudshaikh2426 9 месяцев назад
Can we make it using Javascript only
@randomuser23493
@randomuser23493 9 месяцев назад
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.
@RuntimeRanger-xc5mx
@RuntimeRanger-xc5mx 3 месяца назад
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", … }
@ambuyat69
@ambuyat69 3 месяца назад
i got the same error, have you found the solution yet?
@RuntimeRanger-xc5mx
@RuntimeRanger-xc5mx 3 месяца назад
@@ambuyat69free trial expired, u have to subscribe
@RuntimeRanger-xc5mx
@RuntimeRanger-xc5mx 3 месяца назад
​@@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
@ambuyat69
@ambuyat69 3 месяца назад
@@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
@tenc6491
@tenc6491 7 месяцев назад
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.
@ankushroychowdhury38
@ankushroychowdhury38 6 месяцев назад
Avinash be like: Ayein
@H.CWebDeveloper
@H.CWebDeveloper 9 месяцев назад
Sir the npx create-react-app is not installing
@GreatStackDev
@GreatStackDev 9 месяцев назад
it requires node js installed on your PC. Please checkout this beginners tutorial to create first react app: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-r5kO-E6NI14.html
@TaskMask56
@TaskMask56 8 месяцев назад
Sir cannot read properties of undefined (reading 0) error
@jannah_islam
@jannah_islam 8 месяцев назад
Same!
@Short.podcast761
@Short.podcast761 3 месяца назад
can you share shared code
@AhmedRabii100
@AhmedRabii100 9 месяцев назад
What is VS theme??
@GreatStackDev
@GreatStackDev 9 месяцев назад
I am using brackets theme in my VS code
@veraVera777
@veraVera777 9 месяцев назад
I don't know what to do. "message": "Billing hard limit has been reached"
@GreatStackDev
@GreatStackDev 9 месяцев назад
in this tutorial at time 16:53 you can see the free trial usage, please check your free trial usage
@RANGANATHANJCSEUG-Batch
@RANGANATHANJCSEUG-Batch 23 дня назад
It shows dataarray is undefined
@hetpatel9503
@hetpatel9503 5 месяцев назад
Source Code?
@ankit3109
@ankit3109 9 месяцев назад
"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)
@rythmwithringtone1323
@rythmwithringtone1323 9 месяцев назад
same error show up to my pc i think the url has not work
@AbhishekGupta-zm1my
@AbhishekGupta-zm1my 9 месяцев назад
same@@rythmwithringtone1323
@GreatStackDev
@GreatStackDev 9 месяцев назад
in this tutorial at time 16:53 you can see the free trial usage, please check your free trial usage
@kumkumsingh4u
@kumkumsingh4u 3 месяца назад
can anyone send source code of it I facing errors
@amandubey4412
@amandubey4412 9 месяцев назад
is this Api free? or we have to integrate our credentials
@GreatStackDev
@GreatStackDev 8 месяцев назад
$5 api uses free for 3 months, you will get free limit after verifying the payment method.
@user-qe7wg9cr2u
@user-qe7wg9cr2u 9 месяцев назад
while billing. It shows Your card has been declined. idk why?
@harshkhanagwal1196
@harshkhanagwal1196 3 месяца назад
same .. is there any free alternative
@aniketpatil7960
@aniketpatil7960 3 месяца назад
400 bad request , can anyone help me
@Arjun-uk7zh
@Arjun-uk7zh 6 месяцев назад
It is asking for a $5 initial credit?
@harshkhanagwal1196
@harshkhanagwal1196 3 месяца назад
hm true..
@harshkhanagwal1196
@harshkhanagwal1196 3 месяца назад
is there any free alternative ?
@riya_1723
@riya_1723 28 дней назад
Api is not working 😢
@arunyadav7467
@arunyadav7467 Месяц назад
19:40 'billing_hard_limit_reached', message: 'Billing hard limit has been reached' getting this plz help
@rahulPramod349
@rahulPramod349 Месяц назад
same here, Would someone please help?
@bharathkishore487
@bharathkishore487 День назад
You pay money for api
@umaralam6975
@umaralam6975 9 месяцев назад
how can I add debit card in chatgpt
@GreatStackDev
@GreatStackDev 9 месяцев назад
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
@rifathmohamed3782
@rifathmohamed3782 5 месяцев назад
How to download the images generated of AI sir.....
@RMEAravindA
@RMEAravindA 26 дней назад
Sir can't read properties of undefined (reading 0) error
@mnithin809
@mnithin809 5 дней назад
Can anyone explain this?
@kesavareddy6315
@kesavareddy6315 2 месяца назад
Image and search doesn't show in web page it's blank
@abhiii369
@abhiii369 2 месяца назад
Coze you have error host on chrome inspect in and check error in console
@kesavareddy6315
@kesavareddy6315 2 месяца назад
@@abhiii369 how to check
@nikitakhare993
@nikitakhare993 8 месяцев назад
Sir its showing uncaught runtime error please help
@GreatStackDev
@GreatStackDev 8 месяцев назад
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
@soltsdev
@soltsdev 9 месяцев назад
Make a presale crypto website
@GreatStackDev
@GreatStackDev 9 месяцев назад
check this tutorial to make crypto website: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nidmDGwJ-Jw.html
@Gujju_girl94
@Gujju_girl94 3 месяца назад
Not finding url link in openai
@redxroomie
@redxroomie 3 месяца назад
Hey i can help you
@nipunbothra2256
@nipunbothra2256 7 месяцев назад
i am getting uncaught runtime errors
@tejass5039
@tejass5039 3 месяца назад
Did u solve
@user-ge3id7we4k
@user-ge3id7we4k 7 месяцев назад
cannot work api
@user-zw7vd7fj1q
@user-zw7vd7fj1q 2 месяца назад
nice bro pls face reveal
@GreatStackDev
@GreatStackDev 2 месяца назад
you can find me on Instagram: instagram.com/iamavinashkr
@H.CWebDeveloper
@H.CWebDeveloper 9 месяцев назад
Sir the open api is not working
@GreatStackDev
@GreatStackDev 9 месяцев назад
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.
@Short.podcast761
@Short.podcast761 3 месяца назад
Can one share source code I getting errors
@PrathameshNandanwar-gd7vc
@PrathameshNandanwar-gd7vc 3 месяца назад
I also getting an error
@kumkumsingh4u
@kumkumsingh4u 3 месяца назад
anyone have source of it
@aleska0_0
@aleska0_0 9 месяцев назад
16:34
@vemulasrividya558
@vemulasrividya558 9 месяцев назад
unable to create react app
@GreatStackDev
@GreatStackDev 9 месяцев назад
Please follow this beginners tutorial to create react app: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-r5kO-E6NI14.html
@KeyFactsInsight
@KeyFactsInsight 9 месяцев назад
Hi I'll pay u too build me one
@GreatStackDev
@GreatStackDev 9 месяцев назад
You can write us on instagram: instagram.com/greatstackdev
@oviadu
@oviadu 9 месяцев назад
first
@GreatStackDev
@GreatStackDev 9 месяцев назад
thanks, keep supporting
@GaganaRantharu-pc2jl
@GaganaRantharu-pc2jl 9 месяцев назад
@aristine_ig
@aristine_ig 9 месяцев назад
Bro what is your name in github
@rakshithbhat1873
@rakshithbhat1873 6 месяцев назад
sir im not getting any objects in the console can you please help now
@Pheonixsayshi
@Pheonixsayshi 5 месяцев назад
Did you solve it?
@user-pr2fj9jw5k
@user-pr2fj9jw5k 7 месяцев назад
i am getting uncaught runtime errors
@MASMahi
@MASMahi 3 месяца назад
Same bro got any solution???
Далее
5 New AI Tools You Should Try
9:18
Просмотров 8 тыс.
Speed Up Your React Apps With Code Splitting
16:50
Просмотров 365 тыс.
I Made 200 Python Projects...Here Are My 5 FAVORITES
11:23