Build An AI Image Generator With OpenAI & Node.js

Подписаться 2,3 млн

Просмотров 160 тыс.

50% 1

In this project, we will use OpenAI and the DALL-E model to create a web app that will generate images from scratch based on the entered text.
💻 Code:
github.com/bradtraversy/nodej...
📄OpenAI Docs:
beta.openai.com/
⭐ All Courses:
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
2:00 - Setup & Install Dependencies
3:33 - Express Server & ENV Variables
6:03 - Route & Controller
9:58 - OpenAI Library Request/Response
15:17 - Request Body Data
19:34 - Frontend Setup
24:00 - Form Event Listener
26:38 - GenerateImageRequest() Function
31:45 - Display Image in DOM
33:20 - Using The App & Outro

Наука

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

5 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 339

@hamzajirah4856 Год назад

Brad's approach is unique because he doesn't assume that his students know everything, hence, he adopts a "from start to finish" approach which makes it easier for everyone including beginners to code along with him. Thanks for being the reason that I still find coding fun despite working in a different field now.

@TraversyMedia Год назад

It has always been tough to judge where to start. I prefer to build from scratch and try and explain everything even if a lot of the viewers already know it. There are always people that don't

@ahmad-murery Год назад

@@TraversyMedia For me, I know it but still enjoy it when it explained by you Brad!

@MambaDev Год назад

Ya'll, I'm a full stack web developer.. I need a gig 🙏🙏🙏

@gametroll6311 Год назад

@@TraversyMedia I wouldn't have it any other way, don't change a thing. Your style and method is 100% perfect, and where you start off is always perfect as well. Even your pace is spot on where I find most others are either too slow and I end up falling asleep half way through or they're too fast that I have to replay and pause every 10 seconds throughout the video. But you, sir....Everything is perfect and spot on in every video you have done.

@goobertoots Год назад

@@TraversyMedia thank you for doing that

@admireexcellence5652 Год назад

i love everything about Brad. he made me love programming when i almost gave up. He is my hero

@jonathanwalumbe9572 Год назад

Brad you are God sent. I can't thank you enough man. You've had a huge contribution in my career as a dev. I really appreciate your willingness to share what you know. Thank you again!

@romulororizz Год назад

I’ve said before and I’ll say it now. You sir, you’re are a blessing to this world! Thanks!!

@alikisang827 Год назад

You said you're going off for a while. I think programming is in your blood 😂. Much love from Kenya Developers brother. You're amazing 💓☺️

@TraversyMedia Год назад

Haha, I know I did but I was sucked into the OpenAI stuff, so I figured I would just make a video 😊

@alikisang827 Год назад

@@TraversyMedia Amazing job bro. I'm now a Full Stack Developer courtesy of you☺️. I should sent you A 🐐 Goat if you don't mind.

@kathleenmccarthy6347 Год назад

So glad he came out of retirement!

@amchris8353 Год назад

Also from Kenya 😂 🇰🇪

@zinsoutech6225 Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-j3HiS_0U4sg.html Artificial intelligence.why IS it useful

@ianduhamelhayes1328 Год назад

Brad is a king! i learned programming from scratch with you like a principal font of information! thanks a lot for everything!!!

@heguer87 Год назад

What a cool project! Amazing technology we can work with! Thanks Brad!!

@NOCDIB Год назад

Congratulations on 2 million subs, Brad. I've been following you since around 400K subs and it's great to see the profound effect that you have had on web dev education.

@joel9909 Год назад

Hey bossssss, I saw this on your IG and was waiting patiently!! THank you. I've literally fallen off the coding wagon, just seems I'm not getting anywhere, I'm dedicating next year as the last chance i'd give myself to become that programmer I've always wanted to be, Wish me the best !!

@MarkusEicher70 Год назад

Hello Brad. Thank you for this introduction to OpenAI. As always, your content is very helpful and I'm happy to have your channel as a constant source of inspiration and learning. Be blessed and till the next time.

@universecode1101 Год назад

As soon as I saw the tweet on Twitter, I had to see the video. Great topic, OpenAI is very interesting ✅ Thank you for sharing Brad 😊

@floramerano6293 Год назад

Thank you for explaining it from start to finish. It makes the whole concept easy to understand.

@Hacking-NASSA-with-HTML Год назад

Brad is One of the Best Teachers in a Whole World!

@dreamisover9813 Год назад

What a timely topic, thanks!

@jayantjayant3554 Год назад

Amazing project Brad. Thank you for sharing this.

@brianlobo-amaro8958 Год назад

Brad, your awesome. Hope you and the family have a great Christmas!

@nessci2355 Год назад

brad you're one of the best people on this platform. keep up the great work

@originalbinaryhustler3876 Год назад

Facts

@founder8372 Год назад

That last image really made my day and made me lol Thank you Brad for this excellent tutorial!

@LuciferHesperus Год назад

Excellent. Great depth and scratch to deploy style. Thank you.

@karsongrady Год назад

Another great one, Brad. Thanks again and Merry Christmas

@Little-bird-told-me Год назад

I can't believe after all these years and so many subs Brad is still so humble and grounded. Capricon I guess.

@FabioGiacomini 9 месяцев назад

Very well done Brad, I liked your video a lot it was full of informations.

@sefirot_ Год назад

thank you for changing my life with your tutorials.

@paulthomas1052 Год назад

Fantastic tutorial - always enjoy your content. This AI Service is pretty impressive stuff. Cheers,...

@Arabian_Abomination Год назад

Good to see you back Brad

@kazimrahman7499 Год назад

Pure Life Saver For the Modern Techies.....!! Thanks Brad...!!

@georgestatefield Год назад

Thanks for the video, nice to watch!

@dila8621 Год назад

You're a great teacher. Thank you!

@sharathchandra6756 Год назад

Love you Brad 💕❤️. #my first project 🤩

@EK-rp8jp Год назад

Super!! Looking forward to your new JS course too 🙏 🤲 😊 from 🇰🇷

@sayemalmahdi6691 Год назад

Learned something new !! Thanks Brad

@tyttoot Год назад

🍀Amazing tutorial, Thanks Brad!!!

@greenshaheen6716 Год назад

Waiting for 2023 roadmap as usual. ❤️

@TraversyMedia Год назад

Starting it very soon

@christian-schubert Год назад

Gee Brad, weren't you planning on taking some time off for yourself? Well, a cool Christmas present indeed, thanks for that! 😃👍

@mukhtarhussain8954 Год назад

sir, you just amazed us every time.

@gustavostnt Год назад

AI is the new gold rush 🚀

@evoke-app Год назад

This will likely work with a stable diffusion API as well. Would love to see one made with Evoke's stable diffusion API!

@cyeg12c Год назад

Thank you for sharing this. 👍

@paradiseofcreativity Год назад

Great content and value

@alex-suciu Год назад

very cool stuff. if only midjourney had an API like this 😁

@sonamohialdin3376 Год назад

Amazing project

@Alex-zm9ww Год назад

Great tutorial Brad. Please do more vids on Open AI

@Julesarixx__my__teleqram__ID Год назад

👆send a direct message for support and guidance .

@me_12-vw1vi Год назад

great stuff man

@zantebi Год назад

Brad , you are the king , you gave an excellent example for the hotest buzz in the indestry , amazing , made my weekend , one of your biggest fun in Israel

@anishjoshi1999 Год назад

congrats on 2 millions

@ThePasserines Год назад

9:59 classic Brad letting us know how he felt about that haha.

@sonovoxx Год назад

I'm kinda glad I no longer programme for a living, but after 3 days working with Chat GTP, I reckon it has already knocked 2 to 3 months off an electronics design project I was researching. Disruptive.

@Riccardopelle98 Год назад

Awesome man!!

@adelalawami8092 Год назад

Congratulations on the 2m , and it would be nice if you recommended an alternative besides openAi (since its not available worldwide)

@Kaola730 Год назад

The frog 🐸 images made my day

@xtnt Год назад

Brad my man with another banger :)

@inkl9483 Год назад

_Great coverage._ 👍🏼👍🏼👍🏼

@battlelolo Год назад

best teacher! thank you!

@wordstohisbrideministries5284 Год назад

The thing is, had you given GPT a precise description of what you wanted the code to do, what libraries to use, that you wanted two inputs, description and size, and a spinner to display during image generation, it could have written that JavaScript and html code FOR you

@dzhaniivanov5837 Год назад

good tutorials every time

@wisdomelue Год назад

Great video!!!

@celestinotrosso4743 Год назад

You're the one, thanks❤️

@hassaneoutouaya Год назад

Thank you so much !

@indaneeydesign165 Год назад

Thank you sir👍

@Ghaleon15 Год назад

Hey, Brad! Thank you so much for this tutorial. I Was wondering what makes MidJourney images so different in terms of quality? Couldn't find resources to understand it.

@luismeza6015 Год назад

thanks u ! amazing video!

@muhammadsami5154 Год назад

Desperately waiting for JavaScript course sir

@davidsosa5940 Год назад

Where would you deploy this? I have try render and vercel but the images wont show up

@963seeker Год назад

This was very good Brad. Would love to see more videos on ML Openai in the future. Javascript or python. Hope you will also make a udemy course covering the subjects in great depth

@ahmad-murery Год назад

That was nice and funny, Since we should remove the spinner whether there is an error or not, we can do it before checking response.ok (I think), Thanks Brad,

@MagicMan123ification Год назад

I have had no time to code for a few month and I really miss coding with Brad. And I noticed he keeps saying if you dont want to use postman thats fine. I Remember some hate on it a few moths ago with all the in code editor extensions for making request but its nice to take a brake from the editor and this is more comfortable since I probably made my first and most of my request in a development context while watching brad using postman. p p s. was hoping for more recent content but I have a lot to catch up on so guess it all works out in the end BOSTON!!

@jagadeeshkj594 Год назад

Tell me which theme you use for your vscode editor?

@elliottzelinskas1244 Год назад

Brad, this is really great. Thanks so much for taking the time to share how to make this video. I'm in the process of learning code, but am well versed with Wordpress. My question is, how do we publish the app created in this video tutorial onto the web for public users to input information to the fields? Thanks!

@sureshbhatt363 11 месяцев назад

Once tha app is created, we can deploy it on cloud servers or hosting. It works same as wodpress - you need an online space to host this application that users can access with internet.

@originalbinaryhustler3876 Год назад

Love from south London

@kevinbroin8536 3 месяца назад

Tank you made

@inspisiavideos8542 Год назад

Genius!

@Kaola730 Год назад

I love this app, I'm going to attempt to do a Django version 😂

@xJmdYT Год назад

Please help me! I coded it and it works perfectly, but when I publish it in github sites its not working

@gunbuster333SMSTI 17 дней назад

I currently have and use a steam deck as my main computer. is this something I can do on side computer even though it runs steam OS with Linux? I’m not that knowledgeable about coding and what you can do on different operating systems or have the operating system you have affects what it is that you want to do . Or is this coding that you do on a program that isn’t connected to os itself rather a stand alone program that talks with the web link? I hope that made sense!

@ashishtiwari3162 Год назад

amazing man.. 😍😍

@silverthorne12 Год назад

Hello brad, I would like to ask, as a beginner which of your udemy course should i pick first?

@fenixrelaxation3274 Год назад

Hi thanks for this video. If you don't mind could you make a video about how to do essay writer with openai in nodejs. Thanks in advance

@Yokulovescake Год назад

So far every other step has been going well but when I tried making the first request it keeps giving me an error saying I didn't put an API key(Even though I created my own key), authorization http header blablabla. Please I really need help

@brianlodeki308 Год назад

Just awesome.

@brianlodeki308 Год назад

@user-wv4lf8hj6u Yes

@iSVX1103 3 месяца назад

Hey the code you provided is able to run but when I am trying to use the website its showing, Error: That image could not be generated... And on terminal I am able to see that I am getting an error saying billing_hard_limit_reached. Please help me to resolve this.

@MrMiguelapb35 Год назад

cool Brad

@asescodes Год назад

How can i edit my own image? Like adding mask and all that using openai.

@rayankhan12 Год назад

What do I need in terms of hardware? Do I need a GPU? Or some other crazy amount of gigs in my laptop (like other tutorials say)?

@yashgupta7126 Год назад

@X85283 Год назад

All you're doing is sending a prompt to OpenAI's servers, which then return URLs to the images it has generated based on your prompt. It doesn't require any more computing power for the developer or client than any other typical website.

@wasidhossain3848 Год назад

cool tutorial

@Ojas_-qv6fp Год назад

It's giving me an error: 400 { error: { code: 'billing_hard_limit_reached', message: 'Billing hard limit has been reached', param: null, type: 'invalid_request_error' } }

@senpai_arora Год назад

samee what to do please help TT_TT

@brattiestsubset431 4 месяца назад

It’s because you’ve reached the maximum on how many images you can generate from OpenAI. You have to pay to be able to generate more images

@muhammed4267 Год назад

The generated images are not sizing as I selected, it generates in the same siza for small and medium, why is it? What can I do? anyone else got this problem?

@designtowebsite Год назад

stuck on 8:19 making the post request in postman, showing a 404 error on 'send' not sure why

@YslRon Год назад

Cannot GET /openai/generateimage works on localhost but doesnt work on deployment server? using vercel right now it doesnt work :c

@shasha6790 3 месяца назад

If you don't use react, you have to refresh the page each time. How one can fix while not using react and plain html css js website?

@subhamacharya4472 Год назад

When I send a post request then it says API key mentioned is incorrect , but I generated a key and copy pasted that in .env file. Can anyone help me with this issue?

@NehaSingh-fb8kj Год назад

Can you create a series for advanced web development also? There are many courses that you have created from beginners and for intermediate levels. But i am looking for some practices that is expected from 4-7 yrs experienced person.

@javanehtaghipour4923 9 месяцев назад

How could you add more photos and tags to the openai database?

@permurad4161 Год назад

2023 web development guide time 🙏

@caiyuhui Год назад

Is the image generated locally or remotely on an openAI server? I think the answer is the former cause an openAI module has been installed,however it brings up another question,why an api key is needed? I'm a little confused.

@X85283 Год назад

It is generated on OpenAI's servers and returned back to you. The module you are installing just lets you interface with their API.

@craiggazimbi Год назад

As always thanks for the great video Brad. unfortunately "OpenAI's services are not available in my country." as yet. Hoping to try this out soon as I move 🤣🤣. I also hope to see more AI content on your channel to Brad. Quick Question do we have to use only Python for AI and ML, Can't we use JS 😁😁

@funkahontas Год назад

I don't know if this will work but you can try using protonvpn , it's a free VPN and as I said, don't know if it will work with this but it does allow me to watch RU-vid videos not available in my country, but open AI could be different

@TraversyMedia Год назад

It depends what you are doing. If you are building ML services, I would go into Python honestly. If you are using the services to build apps such as this (obviously more in-depth), then JavaScript. If that makes sense.

@craiggazimbi Год назад

@@TraversyMedia It actually adds up thank you. You really helped me see the difference between, building an ML service and using an ML service. Thank you Brad.

@you-maximize6929 Год назад

What' s your country?

@walljacket Год назад

Can you trust openAI with your phone #. Has anyone experienced increase in spam since registering?

@moyezrabbani637 Год назад

One problem I faced while building app using openAi's API is that I can't find a way to download the image using the given response link

@sweetykumari5746 10 месяцев назад

const configuration = new Configuration({ ^ TypeError: Configuration is not a constructor [nodemon] app crashed - waiting for file changes before starting... please update this course with new changes.

@vitorvinicius2951 9 месяцев назад

Yeah, that's because the version of the openai he's using has been updated. Here's the solution: // Delete this const { Configuration, OpenAIApi } = require("openai"); const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); // Add this const OpenAI = require("openai"); const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY }); This should work. But the project has other problems, from what I could understand, currently you gotta have a paid subscription to OpenAI to be able to generate images like that :/

@shqawe Год назад

Unfortunately OpenAI not available in my country and i think many people facing same problem i wish if there is an alternative for it, or it will be a very good tutorial if you try to explain how this service work and how it recognize the picture from text.