Build An AI Image Generator With OpenAI & Node.js

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

[@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

[@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!

[@admireexcellence5652]

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

[@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]

kzbin.info/www/bejne/oGSrmoaVZbpnqck Artificial intelligence.why IS it useful

[@romulororizz]

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

[@ianduhamelhayes1328]

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

[@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.

[@heguer87]

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

[@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.

[@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 !!

[@founder8372]

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

[@nessci2355]

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

[@originalbinaryhustler3876]

Facts

[@jayantjayant3554]

Amazing project Brad. Thank you for sharing this.

[@Hacking-NASSA-with-HTML]

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

[@LuciferHesperus]

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

[@dreamisover9813]

What a timely topic, thanks!

[@karsongrady]

Another great one, Brad. Thanks again and Merry Christmas

[@brianlobo-amaro8958]

Brad, your awesome. Hope you and the family have a great 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.

[@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,...

[@kazimrahman7499]

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

[@FabioGiacomini]

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

[@dila8621]

You're a great teacher. Thank you!

[@EK-rp8jp]

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

[@georgestatefield]

Thanks for the video, nice to watch!

[@sharathchandra6756]

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

[@tyttoot]

🍀Amazing tutorial, Thanks Brad!!!

[@Arabian_Epileptic]

Good to see you back Brad

[@sayemalmahdi6691]

Learned something new !! Thanks Brad

[@mukhtarhussain8954]

sir, you just amazed us every time.

[@Alex-zm9ww]

Great tutorial Brad. Please do more vids on Open AI

[@Julesarixx__my__teleqram__ID]

👆send a direct message for support and guidance .

[@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.

[@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. 👍

[@adelalawami8092]

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

[@christian-schubert]

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

[@sonamohialdin3376]

Amazing project

[@greenshaheen6716]

Waiting for 2023 roadmap as usual. ❤️

[@TraversyMedia]

Starting it very soon

[@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

[@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.

[@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]

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.

[@alex-suciu]

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

[@paradiseofcreativity]

Great content and value

[@davidsosa5940]

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

[@battlelolo]

best teacher! thank you!

[@silverthorne12]

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

[@meme-vw1vi]

great stuff man

[@celestinotrosso4743]

You're the one, thanks❤️

[@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,

[@dzhaniivanov5837]

good tutorials every time

[@ThePasserines]

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

[@indaneeydesign165]

Thank you sir👍

[@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!!

[@Riccardopelle98]

Awesome man!!

[@anishjoshi1999]

congrats on 2 millions

[@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

[@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

[@gustavostnt]

AI is the new gold rush 🚀

[@hassaneoutouaya]

Thank you so much !

[@xtnt]

Brad my man with another banger :)

[@jagadeeshkj594]

Tell me which theme you use for your vscode editor?

[@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

[@Kaola730]

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

[@keirantimson7893]

followed everything to the second ad still not working!

[@inkl9483]

_Great coverage._ 👍🏼👍🏼👍🏼

[@muhammadsami5154]

Desperately waiting for JavaScript course sir

[@designtowebsite]

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

[@Kaola730]

The frog 🐸 images made my day

[@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 KZbin 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?

[@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.

[@Mot1v.4cional]

Thank you from facility this content! im from argentina and all this stuff is so grate. I have a cuestion.. What happend with the limitations of credits for the user, and if that credits can i offer from this app?

[@luismeza6015]

thanks u ! amazing video!

[@YslRon]

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

[@MufasaJungle]

I keep getting ReferenceError: %API KEY is not defined (with my API key in there) any suggestions? Thanks for the amazing video!

[@Pride-zl2ew]

Hi I love your video but where is the one of you showing how to add your local workspace to developer tools so the changes you make actually will be saved on only your computer?

[@javanehtaghipour4923]

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

[@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

[@sweetykumari5746]

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]

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 :/

[@slobodanninkov2128]

Hi Brad, just a quick one! Are you planning to update this course on udemy: Modern JavaScript From The Beginning?

[@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.

[@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

[@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?

[@originalbinaryhustler3876]

Love from south London

[@iSVX1103]

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.

[@inspisiavideos8542]

Genius!

[@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?

[@asescodes]

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

[@LinfordMellony]

I've heard about this new AI image generator Bluewillow, what do you think they're using as an AI platform and what are your thoughts on that?

[@xJmdYT]

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

[@wisdomelue]

Great video!!!

[@yahyotech]

Hey Brad. Thanks for awesome videos. You did this AI Image Generator with English Language but can we do this with another languages like tajik or uzbek?

[@TraversyMedia]

I'm not 100% sure, but I think there is an option to set the language within the api

[@zippytyro]

use another API to translate it then send to the API

[@vanoperadze6160]

can you make the version that uses image variation?

[@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]

No

[@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.

[@NguyenHieu-uw2sx]

I am newbie. I would like to know I have a source of 5 images. Could we code to generate other new image based on my 5 original one?

[@kevinbroin8536]

Tank you made

[@farihanezannou2319]

Thanks for awesome videos. I'm trying to build and deploy but I'm having problems, can you help me please

[@fantasyplanet480]

Hello can you make a live streaming app like twitch tv using mern stack and key stream for every streamer to connect with obs ? Thanks