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

Поделиться
HTML-код
  • Опубликовано: 24 ноя 2024

Комментарии •

  • @calebprenger3928
    @calebprenger3928 Год назад +117

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

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

    • @IG7799-c4u
      @IG7799-c4u 3 месяца назад

      @@OfficiallyArtificiallyInformed "🛑 Build an AI Image Generator 'Interface' in JavaScript! (Super simple!) | OpenAI API DALL-E ChatGPT"
      It's one extra word. 😅

    • @lionelwonka1389
      @lionelwonka1389 3 месяца назад

      I think u should at least had a simple iq to understand the title of the video

  • @rawahapool
    @rawahapool Год назад +12

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

  • @projectcodemastery9243
    @projectcodemastery9243 Год назад +8

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

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

      ​@@oscars4739the chatbot is what generates the images?

  • @vikasmenghani2477
    @vikasmenghani2477 Год назад +8

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

    • @ItsThePirate
      @ItsThePirate 10 месяцев назад +1

      Check if you have credit

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

    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!

  • @dosware4554
    @dosware4554 9 месяцев назад +3

    can i get the source code

  • @uchennachukwuba
    @uchennachukwuba Год назад +4

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

  • @TheBorninmotion
    @TheBorninmotion Год назад +1

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

  • @assignmentonbiologytopic9512
    @assignmentonbiologytopic9512 Год назад +1

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

  • @dagalo
    @dagalo Год назад +4

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

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

  • @affiliateme7414
    @affiliateme7414 Год назад

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

  • @marcinzale
    @marcinzale Год назад

    Another great video Ania! 👌

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

    I am in love with her eyes!

  • @Curiousgoogler
    @Curiousgoogler Год назад +1

    Thank you nice tutorial and informative.

  • @mdsarowarhosen4545
    @mdsarowarhosen4545 Год назад +2

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

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

  • @cabezonga9562
    @cabezonga9562 Год назад

    Thanks Ania, great video!

  • @valenciawalker6498
    @valenciawalker6498 Год назад

    very interesting will try this one out.

  • @stanleyedore3038
    @stanleyedore3038 Год назад

    Thank you for all your videos

  • @giorgimtsituri7826
    @giorgimtsituri7826 Год назад +1

    I'm learning a lot from your videos. thanks

  • @sansparamore8401
    @sansparamore8401 Год назад

    Great! Building mine now 💪

  • @rishikagoyal8043
    @rishikagoyal8043 Год назад +1

    It was fun doing this. Awesome 😍

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

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

  • @Robert723
    @Robert723 Год назад

    Thanks for the video! Amazing work!

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

    i swear i love Ur & Ur Videos too

  • @VamshiJanapati
    @VamshiJanapati 4 месяца назад +1

    Unable to fetch the api

  • @Yash-zc6ep
    @Yash-zc6ep Год назад +3

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

      not work with chatGPT 3.5

    • @aniakubow
      @aniakubow  7 месяцев назад +2

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

  • @alphablender
    @alphablender Год назад

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

  • @Leoanduri
    @Leoanduri 4 месяца назад

    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.

  • @IG7799-c4u
    @IG7799-c4u 3 месяца назад

    Hello, for some reason the SVG doesn't fit to the page properly so I have a scrollbar to see the rest of it. Not sure how to fix this.

  • @juansebastianaguiaryaima2691
    @juansebastianaguiaryaima2691 Год назад +8

    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

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

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

  • @chrisder1814
    @chrisder1814 3 месяца назад

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

  • @wildfuture.network
    @wildfuture.network Год назад +2

    Great video but fixing your sound would really help ;)

  • @mortezafarhangpanah256
    @mortezafarhangpanah256 Год назад

    Thanks

  • @vatsyyhere
    @vatsyyhere Год назад +2

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

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

      same i have chaged fetch method but still getting that errror

    • @aniakubow
      @aniakubow  7 месяцев назад +1

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

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

    very good content

  • @assignmentonbiologytopic9512
    @assignmentonbiologytopic9512 Год назад

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

  • @deepakraghav
    @deepakraghav Год назад

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

  • @indasandalscat
    @indasandalscat Год назад +3

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

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

    Do we need ChatGpt 4 for that

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

    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.

  • @AkshatGandhi-v1v
    @AkshatGandhi-v1v Год назад

    could you make a crome extension with open ai apis
    please

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

    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?

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

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

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

    Wish me luck 🍀

  • @Mouazbrai
    @Mouazbrai Год назад +2

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

  • @georgecalistruofficial
    @georgecalistruofficial 4 месяца назад

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

      Huh? These videos are free

  • @Uncaught_in_promise
    @Uncaught_in_promise Год назад

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

  • @Eternity001
    @Eternity001 Год назад

    hi Ania , love you to :)

  • @beinyourguard
    @beinyourguard Год назад

    amazing!!

  • @swfh3542
    @swfh3542 Год назад

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

  • @piotrgolacki8700
    @piotrgolacki8700 Год назад +2

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

  • @domain6518
    @domain6518 Год назад +1

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

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

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

  • @alfialhuzwirisyam4850
    @alfialhuzwirisyam4850 Год назад +1

    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]

  • @punamthakre9663
    @punamthakre9663 Месяц назад +1

    Image is not generated

  • @rishabhdhawad
    @rishabhdhawad 9 месяцев назад +1

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

  • @xaphanlluofficial3432
    @xaphanlluofficial3432 Год назад +1

    Amazing, but i've 409 on your 21 line

    • @Konathegod
      @Konathegod Год назад

      same, figured it ou yet?

  • @OfBar
    @OfBar Год назад

    It is good

  • @jarsahbeyan1648
    @jarsahbeyan1648 Год назад

    I love this channel, you are smart and beautiful

  • @MehrabEvanC94
    @MehrabEvanC94 Год назад +3

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

      Same error

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

    • @kr_sunny_suman
      @kr_sunny_suman Год назад

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

  • @himanshubarapatre1335
    @himanshubarapatre1335 Год назад

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

  • @matteofrancese1014
    @matteofrancese1014 Год назад

    Sei bellissima!!! 😄

  • @frasio
    @frasio Год назад

    Cool

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

    I can't generate images please help me .

    • @AmeenVp-r3n
      @AmeenVp-r3n 5 месяцев назад

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

  • @scammersscammer459
    @scammersscammer459 Год назад

    @10:37 23.07.08

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

    This code doesnt working

    • @aniakubow
      @aniakubow  5 месяцев назад +1

      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

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

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

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

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

  • @8bulletballers385
    @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
      @austinhood6939 Год назад +1

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

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

  • @asadbeknabijonov-m9r
    @asadbeknabijonov-m9r Год назад

    wow!! you so beautiful to be programmer

  • @disrael2101
    @disrael2101 Год назад +2

    source code??

  • @diego6strings
    @diego6strings Год назад +2

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

  • @curiosityoftheunknown
    @curiosityoftheunknown Год назад +1

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

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

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

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

    u look bautifull ;)

  • @Popochy123
    @Popochy123 Год назад

    JavaScript is frreee?

  • @Z4NJUN
    @Z4NJUN Год назад

    😀

  • @parvgugnani7
    @parvgugnani7 Год назад +1

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

  • @justkaz7104
    @justkaz7104 Год назад

    225

  • @just_man209
    @just_man209 Год назад

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

  • @rickmonarch4552
    @rickmonarch4552 Год назад +1

    Didn't know avril lavigne could code 😂😂😂

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

    its not working, just
    wastage of time

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

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

  • @MichaelLuciano-c9z
    @MichaelLuciano-c9z Год назад

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

  • @solaris2015
    @solaris2015 Год назад +1

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

    • @patspoutnik
      @patspoutnik Год назад

      spoko xD

    • @solaris2015
      @solaris2015 Год назад +1

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

  • @bunta69
    @bunta69 Год назад

    thank you mommy i love your lips so much

  • @solaris2015
    @solaris2015 Год назад

    Witam Glonojada

  • @TahaUlIslam-ej5kr
    @TahaUlIslam-ej5kr 6 месяцев назад

    source code?