🛑 Build an AI Image Generator in JavaScript! (Super simple!) | OpenAI API DALL-E ChatGPT

Sponsor: Discount code ANIA50 for 50% off for 6 months at APILayer (bit.ly/apilayer50)
Build an AI Image Generator in React with Image Variations! • 🛑 1h to code AI Image ...
Found this hard? Learn the fundamentals of JavaScript here: www.codewithania.com
🚀 Sign up to www.codewithania.com to receive access for the final code.
____
⭐ Check out my IDE here and get 1 month free: jb.gg/get_webstorm
⭐ New to code and none of this is making sense? Watch my '12hr+ KZbin Coding Bootcamp' in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It's on my channel and its 100% free.
⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here (I get no commission from this link, but am in a partnership): bit.ly/tabnine-top-tool
⭐ You can get a blockchain domain with my affiliate link here: bit.ly/get-a-crypto-domain
⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : www.buymeacoffee.com/aniakubow
⭐ Sign up for weekly coding tips from my newsletter partnership: bit.ly/JS-tips
You can also find me on:
Twitter: / ania_kubow
Instagram: / aniakubow

[@rawahapool]

I always understand what you explain, you are a great instructor / Professor / Teacher / explainer

[@calebprenger3928]

you people really need to name these videos differently. You aren't actually building an ai image generator, you are building an interface for an existing generator.

[@OfficiallyArtificiallyInformed]

quite a long title... im sure most of us get it

[@TheBorninmotion]

thank you for this great tutorial ! Keep up with ai api tutorials !

[@Robert723]

Thanks for the video! Amazing work!

[@marcinzale]

Another great video Ania! 👌

[@uchennachukwuba]

Hello, could you please do a tutorial on JS data structures and algorithms. I really enjoy watching your videos

[@cabezonga9562]

Thanks Ania, great video!

[@projectcodemastery9243]

Hi Ania, Can you please build a similar project from start to finish, including how to publish the project online, as a standalone website. You are the best! Thank you for all the work that you do!

[@oscars4739]

i made a chatbot using the model davinci, whenever you push your App to github, you need to hide the 'openai api key', otherwise openai cancels yours, so you would need to create a backend folder and a frontend folder, and maybe deploy it in a full stack deployment place like Render or AWS, i tried it and it s a big pain in the ass, but it is ok, it s the process of learning what matters

[@systemsless]

​@@oscars4739the chatbot is what generates the images?

[@Curiousgoogler]

Thank you nice tutorial and informative.

[@sansparamore8401]

Great! Building mine now 💪

[@valenciawalker6498]

very interesting will try this one out.

[@stanleyedore3038]

Thank you for all your videos

[@juansebastianaguiaryaima2691]

Hi Ania I am a really fan of your work! Thank you for taking the time and make this type of videos, by any chance do you know why the code is throwing a "billing hard limit has been reached" however its my first time trying the dall-e api and I also check the playground and I have credits still

[@IT-AEA]

Hi Ania. Everybody is told about AI - but in the near future, we can be captured this AI. Have a nice day Ania✌✌✌✌✌✌✌

[@jdubhman]

Great one, some of that code starts to make sense. Thank you!

[@jdubhman]

btw, I thought u may have type vw in both height and width of the svg

[@assignmentonbiologytopic9512]

More JavaScript projects plzzzzzzzz appuu 💯

[@giorgimtsituri7826]

I'm learning a lot from your videos. thanks

[@rishikagoyal8043]

It was fun doing this. Awesome 😍

[@CuccoCodes]

Thanks for letting us follow along again. Great practice. Great way to keep the brain fresh in the morning. I type slow and look at the keys, so the way you explain the code and what to write really helps. Thanks! This was fun!

[@amiigzz-6509]

i swear i love Ur & Ur Videos too

[@mortezafarhangpanah256]

Thanks

[@BMikel]

Hi. Is this something similar to Midjourney? I want to generate high res images

[@beinyourguard]

amazing!!

[@alanmenezes4210]

very good content

[@alphablender]

I fiound the perfect emoji for your channel : 🤩. 🥰

[@itsme-gc7dx]

Is some way to change background of your image using ai in javascript ?

[@vikasmenghani2477]

error : {code: 'billing_hard_limit_reached', message: 'Billing hard limit has been reached', param: null, type: 'invalid_request_error'} [[Prototype]] : Object please help

[@siywl_classics]

Check if you have credit

[@affiliateme7414]

Ania has her own API key tattooed to the inside of her left bicep

[@indasandalscat]

This looks really good but Is it still possible to get free credits for DALL-E?

[@MariaGiuliaPessanha]

hey, i´m having a problem with cors cause the image it´s private, how can i download it or sent it without this problem?

[@piotrgolacki8700]

cześć Ania, czy masz też albo planujesz kursy programowania dla dzieci/nastolatków?

[@maciejolejnik6706]

Bardzo dobry pomysł też jestem ciekaw?

[@deepakraghav]

Thanks for information.. What If I have to use NSWF? OpenAI doesn't allow NSFW..

[@user-qn6gj6tx2o]

could you make a crome extension with open ai apis please

[@hypesarath824]

Do we need ChatGpt 4 for that

[@user-bn5jc3mw5y]

Thank you for this great video. Can you post the javascript code her please?

[@dagalo]

Amazing tutorial! but... I always have the error "billing hard limit has been reached" however its the first time I try to code something like this...

[@jhonatanreivin]

that's because you don't have credits in dall-e, is not free

[@Eternity001]

hi Ania , love you to :)

[@swfh3542]

U are superb.i did like to meet u....🤗

[@Yash-zc6ep]

Hey Ania,while fetching the API i am getting a 400 error and saying that billing hard limit reached.Please help me with this issue

[@theanhcao9399]

not work with chatGPT 3.5

[@AniaKubow]

It sounds like you ran out of credits on OpenAI :)

[@alfialhuzwirisyam4850]

Hi Ania i get this error after a view days generating image, the image url is expired, is it possible to store the image to database after image is generated without download the image ? AuthenticationFailed Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature. RequestId:2befb9ce-001e-004d-4ad5-d50792000000 Time:2023-08-23T15:25:04.2052170Z Signature not valid in the specified time frame: Start [Tue, 22 Aug 2023 00:39:28 GMT] - Expiry [Tue, 22 Aug 2023 02:39:28 GMT] - Current [Wed, 23 Aug 2023 15:25:04 GMT]

[@minecrafts-buddy123_5G.]

Maybe cuz you gay?

[@mdsarowarhosen4545]

Suddenly it stopped working. Before it was working perfectly. I have tried changing the api key. But it's not working yet.

[@user-rj4jj7nd8s]

It is good

[@vatsyyhere]

Getting error 400 While fetching the API. What's the solution? Do we need to buy a subscription for gpt 4?

[@johncarter145]

same i have chaged fetch method but still getting that errror

[@AniaKubow]

It sounds like you might need to buy some OpenAI credits if you used up your free ones :)

[@assignmentonbiologytopic9512]

Ania mam Please trying to start now regular series Of JavaScript Ai base please

[@jsunh98]

i finally got mine to work. thank you Ania!!. I am notice that the bottom 3px of each image is inheriting the svg background color for some reason. I saw that you also have that in your vid. Do you know what causes it? i'm very inexperienced and don't notice anything in the CSS that I would think would cause this.

[@Suman-ze8zz]

Can you please provide me the source code for reference purposes only.

[@frasio]

Cool

[@antoniotorres4325]

Thank you so much for your videos. You are awesome.

[@domain6518]

Why i am getting api error? Will I have to pay for openai api for images generation?

[@pratikneupane951]

Yes

[@jarsahbeyan1648]

I love this channel, you are smart and beautiful

[@w2og3m]

Wish me luck 🍀

[@matteofrancese1014]

Sei bellissima!!! 😄

[@xaphanlluofficial3432]

Amazing, but i've 409 on your 21 line

[@Konathegod]

same, figured it ou yet?

[@himanshubarapatre1335]

can anyone provide me with the code , i am getting many errors in my code?

[@omtrivedi4936]

I can't generate images please help me .

[@codingwb]

okey , Your explanation is great, but your choice of generation, colored ice cream, didn't work, because it represents that category

[@TahaUlIslam-ej5kr]

source code?

[@kamalmichael]

Why don't you copy and paste the whole code in the description???

[@Popochy123]

JavaScript is frreee?

[@user-qr7qx9fc4j]

wow!! you so beautiful to be programmer

[@Z4NJUN]

😀

[@rishabhdhawad]

Do we need to have a Chat GPT 4 paid feature to run this ?

[@8bulletballers385]

What’s the difference between using these fetch-API calls purely in the front end, VS. calling the API in a dedicated backend (express, axios) like in your previous image-generation project (the one right before)?

[@austinhood6939]

Fetching data on the back end is useful when dealing with API keys or other sensitive data, it is also better for search engine optimization, and most importantly the initial page load. Back end languages can also be much more performant in making these requests such as GoLang or Rust.

[@8bulletballers385]

@@austinhood6939 For the initial page-load and the SEO, wouldn't that depend on whether or not your application uses SSR or CSR? THANKS, Btw!

[@MehrabEvanC94]

The API is showing some errors please help { "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" } }

[@juansebastianaguiaryaima2691]

I used to have the same error please check that on the options json of the fetch You don't have any trailling commas , My error was that after the "size":"1024x1024", I have that finally comma that was causing the error

[@kaustavgoswami7454]

Same error

[@360VR]

Great video but fixing your sound would really help ;)

[@curiosityoftheunknown]

i need some help, mine throws an error when i click the submit icon below is the error message i am getting { "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" } } please advise

[@Konathegod]

Same, figured it out yet?

[@whitewolf4471]

// const APIs_KEY = "sk-IJQKFiDIDyrf1ObJMaf6T3BlbkFJwLetf const APIs_KEY = "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" const API_KEY = "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" const submitbtn= document.querySelector("#submit-btn") const inputElement = document.querySelector("input") const getImages= async() =>{ const options = { method:"POST", headers:{ "Authorization":`Bearer ${API_KEY}`, 'Content-Type': "application/json" }, body: JSON.stringify({ "prompt": inputElement.value, "n":4, "size": "1024x1024" }) } try { const response = await fetch('api.openai.com/v1/images/generations',options) const data = await response.json() console.log(data) } catch(error){ console.error(error) } } submitbtn.addEventListener('click',getImages) use this maybe it will work for you

[@juansebastianaguiaryaima2691]

I used to have the same error please check that on the options json of the fetch You don't have any trailling commas , My error was that after the "size":"1024x1024", I have that finally comma that was causing the error

[@pritamiitismdhanbad561]

@@juansebastianaguiaryaima2691 no buddy it did not work , again i am passing an object so i must seperate each key value pair with commas

[@vishalsinghpanwar2972]

@@pritamiitismdhanbad561 are you able to use api keys for free, I am getting error that you have exhausted the limit!

[@scammersscammer459]

@10:37 23.07.08

[@disrael2101]

source code??

[@mrbeats4065]

u look bautifull ;)

[@justkaz7104]

225

[@diego6strings]

Can't help to notice how gorgeous this woman is, aside from intelligent. my god

[@ManishYadav-vs7ge]

I hope that's the reason u r watching this video

[@prateekbaluni8801]

its not working, just wastage of time

[@AniaKubow]

I’m sorry you are having trouble. If following along is not working for you, you can get the final code if you sign up to the codewithania.com community.

[@rickmonarch4552]

Didn't know avril lavigne could code 😂😂😂

[@paulmartin6908]

am i really going to have to pay 300 bucks to get this code all in one place since you seem to have a jumpy forgetful way of writing code, or is that the idea, to get people to pay yo ass lol im jk but really can i get this freakin code, i'll buy you a coffee (i feel stupid asking you)

[@bunta69]

thank you mommy i love your lips so much

[@user-yu3tk1lu6y]

I think than done to generator one old woman,you are is much pretty

[@solaris2015]

Wczoraj Ukrainka w markecie miała taki glonojady, ze do terz mi się rzygać chce.

[@patspoutnik]

spoko xD

[@solaris2015]

@@patspoutnik Blondynka Olejnik z tefałałenu zrobiła to inne blondyny tez musza?

[@just_man209]

not trying to be rude but you for some reason always look angry but everybody is different

[@Workinghard7]

Box Shadow error :: solution -input { box-shadow: 0 20px 30px -10px rgb(38, 57, 77); } i got this may help you

[@solaris2015]

Witam Glonojada