🛑 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+ KZread 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

Пікірлер: 115

  • @TheBorninmotion
    @TheBorninmotion Жыл бұрын

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

  • @rawahapool
    @rawahapool Жыл бұрын

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

  • @uchennachukwuba
    @uchennachukwuba Жыл бұрын

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

  • @Robert723
    @Robert723 Жыл бұрын

    Thanks for the video! Amazing work!

  • @marcinzale
    @marcinzale Жыл бұрын

    Another great video Ania! 👌

  • @Curiousgoogler
    @Curiousgoogler Жыл бұрын

    Thank you nice tutorial and informative.

  • @cabezonga9562
    @cabezonga9562 Жыл бұрын

    Thanks Ania, great video!

  • @juansebastianaguiaryaima2691
    @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

  • @projectcodemastery9243
    @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

    @oscars4739

    7 ай бұрын

    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

    @systemsless

    6 ай бұрын

    ​@@oscars4739the chatbot is what generates the images?

  • @sansparamore8401
    @sansparamore8401 Жыл бұрын

    Great! Building mine now 💪

  • @jdubhman
    @jdubhman Жыл бұрын

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

  • @jdubhman

    @jdubhman

    Жыл бұрын

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

  • @valenciawalker6498
    @valenciawalker6498 Жыл бұрын

    very interesting will try this one out.

  • @stanleyedore3038
    @stanleyedore3038 Жыл бұрын

    Thank you for all your videos

  • @assignmentonbiologytopic9512
    @assignmentonbiologytopic9512 Жыл бұрын

    More JavaScript projects plzzzzzzzz appuu 💯

  • @IT-AEA
    @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✌✌✌✌✌✌✌

  • @giorgimtsituri7826
    @giorgimtsituri7826 Жыл бұрын

    I'm learning a lot from your videos. thanks

  • @calebprenger3928
    @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

    @OfficiallyArtificiallyInformed

    9 ай бұрын

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

  • @rishikagoyal8043
    @rishikagoyal804310 ай бұрын

    It was fun doing this. Awesome 😍

  • @amiigzz-6509
    @amiigzz-65095 ай бұрын

    i swear i love Ur & Ur Videos too

  • @BMikel
    @BMikel Жыл бұрын

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

  • @mortezafarhangpanah256
    @mortezafarhangpanah256 Жыл бұрын

    Thanks

  • @CuccoCodes
    @CuccoCodes3 ай бұрын

    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!

  • @itsme-gc7dx
    @itsme-gc7dx Жыл бұрын

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

  • @vikasmenghani2477
    @vikasmenghani247711 ай бұрын

    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

    @siywl_classics

    3 ай бұрын

    Check if you have credit

  • @alanmenezes4210
    @alanmenezes42102 ай бұрын

    very good content

  • @indasandalscat
    @indasandalscat Жыл бұрын

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

  • @beinyourguard
    @beinyourguard Жыл бұрын

    amazing!!

  • @deepakraghav
    @deepakraghav5 ай бұрын

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

  • @franzgriffle6063
    @franzgriffle60635 күн бұрын

    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.

  • @MariaGiuliaPessanha
    @MariaGiuliaPessanha29 күн бұрын

    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?

  • @affiliateme7414
    @affiliateme74148 ай бұрын

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

  • @alphablender
    @alphablender Жыл бұрын

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

  • @swapnil6792
    @swapnil67923 күн бұрын

    I am in love with her eyes!

  • @piotrgolacki8700
    @piotrgolacki8700 Жыл бұрын

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

  • @maciejolejnik6706

    @maciejolejnik6706

    Жыл бұрын

    Bardzo dobry pomysł też jestem ciekaw?

  • @user-bn5jc3mw5y
    @user-bn5jc3mw5y4 ай бұрын

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

  • @user-qn6gj6tx2o
    @user-qn6gj6tx2o Жыл бұрын

    could you make a crome extension with open ai apis please

  • @vatsyyhere
    @vatsyyhere8 ай бұрын

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

  • @johncarter145

    @johncarter145

    4 ай бұрын

    same i have chaged fetch method but still getting that errror

  • @aniakubow

    @aniakubow

    20 күн бұрын

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

  • @dagalo
    @dagalo11 ай бұрын

    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

    @jhonatanreivin

    8 ай бұрын

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

  • @hypesarath824
    @hypesarath8242 ай бұрын

    Do we need ChatGpt 4 for that

  • @Yash-zc6ep
    @Yash-zc6ep9 ай бұрын

    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

    @theanhcao9399

    3 ай бұрын

    not work with chatGPT 3.5

  • @aniakubow

    @aniakubow

    20 күн бұрын

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

  • @mdsarowarhosen4545
    @mdsarowarhosen454510 ай бұрын

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

  • @jsunh98
    @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

    @Suman-ze8zz

    9 ай бұрын

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

  • @alfialhuzwirisyam4850
    @alfialhuzwirisyam48508 ай бұрын

    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.

    @minecrafts-buddy123_5G.

    Ай бұрын

    Maybe cuz you gay?

  • @antoniotorres4325
    @antoniotorres43253 ай бұрын

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

  • @swfh3542
    @swfh3542 Жыл бұрын

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

  • @Eternity001
    @Eternity001 Жыл бұрын

    hi Ania , love you to :)

  • @assignmentonbiologytopic9512
    @assignmentonbiologytopic95129 ай бұрын

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

  • @user-rj4jj7nd8s
    @user-rj4jj7nd8s Жыл бұрын

    It is good

  • @domain6518
    @domain651810 ай бұрын

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

  • @pratikneupane951

    @pratikneupane951

    8 ай бұрын

    Yes

  • @matteofrancese1014
    @matteofrancese101411 ай бұрын

    Sei bellissima!!! 😄

  • @frasio
    @frasio Жыл бұрын

    Cool

  • @himanshubarapatre1335
    @himanshubarapatre13355 ай бұрын

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

  • @w2og3m
    @w2og3m22 күн бұрын

    Wish me luck 🍀

  • @omtrivedi4936
    @omtrivedi49362 ай бұрын

    I can't generate images please help me .

  • @jarsahbeyan1648
    @jarsahbeyan1648 Жыл бұрын

    I love this channel, you are smart and beautiful

  • @Mouazbrai
    @Mouazbrai Жыл бұрын

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

  • @8bulletballers385
    @8bulletballers38511 ай бұрын

    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

    @austinhood6939

    10 ай бұрын

    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

    @8bulletballers385

    10 ай бұрын

    @@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
    @TahaUlIslam-ej5kr15 күн бұрын

    source code?

  • @xaphanlluofficial3432
    @xaphanlluofficial3432 Жыл бұрын

    Amazing, but i've 409 on your 21 line

  • @Konathegod

    @Konathegod

    Жыл бұрын

    same, figured it ou yet?

  • @kamalmichael
    @kamalmichael4 ай бұрын

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

  • @kunwardeepsingh127
    @kunwardeepsingh1273 күн бұрын

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

  • @aniakubow

    @aniakubow

    3 күн бұрын

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

  • @Popochy123
    @Popochy1239 ай бұрын

    JavaScript is frreee?

  • @user-qr7qx9fc4j
    @user-qr7qx9fc4j Жыл бұрын

    wow!! you so beautiful to be programmer

  • @rishabhdhawad
    @rishabhdhawad3 ай бұрын

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

  • @MehrabEvanC94
    @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

    @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

    @kaustavgoswami7454

    4 ай бұрын

    Same error

  • @curiosityoftheunknown
    @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

    @Konathegod

    Жыл бұрын

    Same, figured it out yet?

  • @whitewolf4471

    @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

    @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

    @pritamiitismdhanbad561

    10 ай бұрын

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

  • @vishalsinghpanwar2972

    @vishalsinghpanwar2972

    9 ай бұрын

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

  • @Z4NJUN
    @Z4NJUN Жыл бұрын

    😀

  • @360VR
    @360VR Жыл бұрын

    Great video but fixing your sound would really help ;)

  • @disrael2101
    @disrael2101 Жыл бұрын

    source code??

  • @scammersscammer459
    @scammersscammer45910 ай бұрын

    @10:37 23.07.08

  • @mrbeats4065
    @mrbeats40653 ай бұрын

    u look bautifull ;)

  • @justkaz7104
    @justkaz7104 Жыл бұрын

    225

  • @diego6strings
    @diego6strings Жыл бұрын

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

  • @ManishYadav-vs7ge

    @ManishYadav-vs7ge

    11 ай бұрын

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

  • @rickmonarch4552
    @rickmonarch4552 Жыл бұрын

    Didn't know avril lavigne could code 😂😂😂

  • @bunta69
    @bunta69 Жыл бұрын

    thank you mommy i love your lips so much

  • @prateekbaluni8801
    @prateekbaluni880120 күн бұрын

    its not working, just wastage of time

  • @aniakubow

    @aniakubow

    20 күн бұрын

    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.

  • @paulmartin6908
    @paulmartin690811 ай бұрын

    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)

  • @user-yu3tk1lu6y
    @user-yu3tk1lu6y Жыл бұрын

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

  • @solaris2015
    @solaris2015 Жыл бұрын

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

  • @patspoutnik

    @patspoutnik

    Жыл бұрын

    spoko xD

  • @solaris2015

    @solaris2015

    Жыл бұрын

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

  • @Workinghard7
    @Workinghard710 ай бұрын

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

  • @just_man209
    @just_man2099 ай бұрын

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

  • @solaris2015
    @solaris2015 Жыл бұрын

    Witam Glonojada