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

Подписаться 419 тыс.

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

50% 1

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+ RU-vid 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

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

25 апр 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@rawahapool Год назад

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

@TheBorninmotion Год назад

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

@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 11 месяцев назад

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

@marcinzale Год назад

Another great video Ania! 👌

@cabezonga9562 Год назад

Thanks Ania, great video!

@Robert723 Год назад

Thanks for the video! Amazing work!

@uchennachukwuba Год назад

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

@Curiousgoogler Год назад

Thank you nice tutorial and informative.

@vikasmenghani2477 Год назад

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

@ItsThePirate 6 месяцев назад

Check if you have credit

@sansparamore8401 Год назад

Great! Building mine now 💪

@valenciawalker6498 Год назад

very interesting will try this one out.

@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 10 месяцев назад

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 8 месяцев назад

@@oscars4739the chatbot is what generates the images?

@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

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

@stanleyedore3038 Год назад

Thank you for all your videos

@BMikel Год назад

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

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

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?

@dosware4554 6 месяцев назад

can i get the source code

@assignmentonbiologytopic9512 Год назад

More JavaScript projects plzzzzzzzz appuu 💯

@itsme-gc7dx Год назад

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

@amiigzz-6509 7 месяцев назад

i swear i love Ur & Ur Videos too

@beinyourguard Год назад

amazing!!

@CuccoCodes 5 месяцев назад

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!

@rishikagoyal8043 Год назад

It was fun doing this. Awesome 😍

@giorgimtsituri7826 Год назад

I'm learning a lot from your videos. thanks

@mortezafarhangpanah256 Год назад

Thanks

@franzgriffle6063 2 месяца назад

Is there a way to take your own art and images to be the basis for your own “ai” model? My goal is to take my collections of work and and art style and create a generative ai to create things using that style.

@mdsarowarhosen4545 Год назад

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

@swapnil6792 2 месяца назад

I am in love with her eyes!

@Leoanduri 16 дней назад

Amazing, exept my code editor is glitch and I can't do anything, it just says error: billing hard limit reached. Can you explain how to fix this? Amazing video.

@piotrgolacki8700 Год назад

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

@maciejolejnik6706 Год назад

Bardzo dobry pomysł też jestem ciekaw?

@alanmenezes4210 5 месяцев назад

very good content

@deepakraghav 8 месяцев назад

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

@alphablender Год назад

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

@indasandalscat Год назад

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

@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 11 месяцев назад

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

@chrisder1814 6 дней назад

hello I wanted to ask you a question regarding APIs and AI image editing software

@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 6 месяцев назад

not work with chatGPT 3.5

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

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

@antoniotorres4325 6 месяцев назад

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

@hypesarath824 5 месяцев назад

Do we need ChatGpt 4 for that

@VamshiJanapati 27 дней назад

Unable to fetch the api

@swfh3542 Год назад

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

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

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

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

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. 3 месяца назад

Maybe cuz you gay?

@domain6518 Год назад

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

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

Yes

@Eternity001 Год назад

hi Ania , love you to :)

@user-rj4jj7nd8s Год назад

It is good

@user-bn5jc3mw5y 7 месяцев назад

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

@himanshubarapatre1335 8 месяцев назад

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

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

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

@johncarter145 7 месяцев назад

same i have chaged fetch method but still getting that errror

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

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

@user-qn6gj6tx2o Год назад

could you make a crome extension with open ai apis please

@frasio Год назад

Cool

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

@assignmentonbiologytopic9512 Год назад

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

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

Wish me luck 🍀

@Mouazbrai Год назад

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

@jarsahbeyan1648 Год назад

I love this channel, you are smart and beautiful

@matteofrancese1014 Год назад

Sei bellissima!!! 😄

@kunwardeepsingh127 2 месяца назад

i am getting error of billing hard limit reached, is this api paid?

@aniakubow 2 месяца назад

Yes that is correct - I believe now there is no free version of OpenAI if I am not mistaken.

@xaphanlluofficial3432 Год назад

Amazing, but i've 409 on your 21 line

@Konathegod Год назад

same, figured it ou yet?

@kamalmichael 7 месяцев назад

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

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

I can't generate images please help me .

@user-eq3qn9hm3e Месяц назад

its maybe because its not free now u should upgrade the plan

@georgecalistruofficial 27 дней назад

@Code with Ania Kubow - Yea, right.... amazing expensive lessons : 500 USD/Euro. Cool. Lets see if a dump people buy and you be rich. Oh my God, 500 ! What is you choose 5,000 USD/Euro?

@aniakubow 27 дней назад

Huh? These videos are free

@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 7 месяцев назад

Same error

@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 Год назад

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

@Z4NJUN Год назад

😀

@TheGameBoss999_Minecraft 2 месяца назад

This code doesnt working

@aniakubow 2 месяца назад

You might have to revert to the older version of OpenAI that we install in the dependencies. Check the package.json file to check if yours is the same. OpenAI has changed a lot since

@user-qr7qx9fc4j Год назад

wow!! you so beautiful to be programmer

@mrbeats4065 6 месяцев назад

u look bautifull ;)

@rishabhdhawad 5 месяцев назад

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

@digital.frenchy Год назад

Great video but fixing your sound would really help ;)

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

JavaScript is frreee?

@scammersscammer459 Год назад

@10:37 23.07.08

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

@TahaUlIslam-ej5kr 3 месяца назад

source code?

@harshitachaudhary1418 Месяц назад

Provide me also

@disrael2101 Год назад

source code??

@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

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

@just_man209 Год назад

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

@bunta69 Год назад

thank you mommy i love your lips so much

@rickmonarch4552 Год назад

Didn't know avril lavigne could code 😂😂😂

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

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

its not working, just wastage of time

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

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.