🛑 Build an AI Image Generator in JavaScript! (Super simple!) | OpenAI API DALL-E ChatGPT
HTML-код
- Опубликовано: 25 апр 2023
- 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+ RUclips 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
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.
quite a long title... im sure most of us get it
I always understand what you explain, you are a great instructor / Professor / Teacher / explainer
thank you for this great tutorial ! Keep up with ai api tutorials !
Another great video Ania! 👌
Thanks Ania, great video!
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!
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
@@oscars4739the chatbot is what generates the images?
Thanks for the video! Amazing work!
Great! Building mine now 💪
Thank you nice tutorial and informative.
Great one, some of that code starts to make sense. Thank you!
btw, I thought u may have type vw in both height and width of the svg
Hello, could you please do a tutorial on JS data structures and algorithms. I really enjoy watching your videos
very interesting will try this one out.
Thank you for all your videos
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
Hi Ania. Everybody is told about AI - but in the near future, we can be captured this AI. Have a nice day Ania✌✌✌✌✌✌✌
It was fun doing this. Awesome 😍
I'm learning a lot from your videos. thanks
More JavaScript projects plzzzzzzzz appuu 💯
i swear i love Ur & Ur Videos too
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?
error
:
{code: 'billing_hard_limit_reached', message: 'Billing hard limit has been reached', param: null, type: 'invalid_request_error'}
[[Prototype]]
:
Object
please help
Check if you have credit
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.
Thanks
Hi. Is this something similar to Midjourney? I want to generate high res images
amazing!!
cześć Ania, czy masz też albo planujesz kursy programowania dla dzieci/nastolatków?
Bardzo dobry pomysł też jestem ciekaw?
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!
Is some way to change background of your image using ai in javascript ?
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...
that's because you don't have credits in dall-e, is not free
This looks really good but Is it still possible to get free credits for DALL-E?
I fiound the perfect emoji for your channel : 🤩. 🥰
very good content
Ania has her own API key tattooed to the inside of her left bicep
I am in love with her eyes!
Thank you so much for your videos. You are awesome.
Thanks for information.. What If I have to use NSWF? OpenAI doesn't allow NSFW..
Suddenly it stopped working.
Before it was working perfectly.
I have tried changing the api key. But it's not working yet.
Thank you for this great video. Can you post the javascript code her please?
U are superb.i did like to meet u....🤗
Do we need ChatGpt 4 for that
hi Ania , love you to :)
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
not work with chatGPT 3.5
It sounds like you ran out of credits on OpenAI :)
could you make a crome extension with open ai apis
please
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.
Can you please provide me the source code for reference purposes only.
Why i am getting api error? Will I have to pay for openai api for images generation?
Yes
It is good
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]
Maybe cuz you gay?
Ania mam Please trying to start now regular series
Of
JavaScript Ai base please
Getting error 400 While fetching the API. What's the solution? Do we need to buy a subscription for gpt 4?
same i have chaged fetch method but still getting that errror
It sounds like you might need to buy some OpenAI credits if you used up your free ones :)
Wish me luck 🍀
okey , Your explanation is great, but your choice of generation, colored ice cream, didn't work, because it represents that category
I can't generate images please help me .
Why don't you copy and paste the whole code in the description???
Amazing, but i've 409 on your 21 line
same, figured it ou yet?
I love this channel, you are smart and beautiful
Do we need to have a Chat GPT 4 paid feature to run this ?
Cool
can anyone provide me with the code , i am getting many errors in my code?
i am getting error of billing hard limit reached, is this api paid?
Yes that is correct - I believe now there is no free version of OpenAI if I am not mistaken.
Sei bellissima!!! 😄
Great video but fixing your sound would really help ;)
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"
}
}
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
Same error
source code?
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)?
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.
@@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!
wow!! you so beautiful to be programmer
This code doesnt working
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
😀
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
Same, figured it out yet?
// 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
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
@@juansebastianaguiaryaima2691 no buddy it did not work , again i am passing an object so i must seperate each key value pair with commas
@@pritamiitismdhanbad561 are you able to use api keys for free, I am getting error that you have exhausted the limit!
JavaScript is frreee?
source code??
u look bautifull ;)
225
@10:37 23.07.08
Can't help to notice how gorgeous this woman is, aside from intelligent. my god
I hope that's the reason u r watching this video
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)
thank you mommy i love your lips so much
Didn't know avril lavigne could code 😂😂😂
not trying to be rude but you for some reason always look angry but everybody is different
I think than done to generator one old woman,you are is much pretty
Box Shadow error :: solution
-input {
box-shadow: 0 20px 30px -10px rgb(38, 57, 77);
}
i got this may help you
Wczoraj Ukrainka w markecie miała taki glonojady, ze do terz mi się rzygać chce.
spoko xD
@@patspoutnik Blondynka Olejnik z tefałałenu zrobiła to inne blondyny tez musza?
its not working, just
wastage of time
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.
Witam Glonojada