Build An AI Image Generation Website in HTML CSS and JavaScript | Like Midjourney and DALL-E
HTML-код
- Опубликовано: 16 май 2024
- In this video, I've shown how to build an AI-powered Image Generation Website in HTML, CSS, and JavaScript. On this website, users enter their prompt and select a number of AI-generated images they want to be created. They can also download their images by clicking on the download button. This website is similar to MidJourney and DALL-E and works on all devices.
Download Images only of this AI Image Generator Website
www.codingnepalweb.com/custom...
Hire me on Fiverr
www.fiverr.com/prakashahi
Follow me on Instagram
/ coding.np
Visit my website for helpful coding projects with source code
www.codingnepalweb.com
Timestamps:
0:00 AI Image Generator Demo
2:00 Starting with HTML & CSS
17:09 Getting Into JavaScript
17:43 Creating Loading Cards
21:18 Generating AI Images using API
28:50 Downloading Image on Button Clicks
#html #css #javascript #ai #openai #dalle #aiimagegenerator
Music Credit:
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
LAKEY INSPIRED - Chill Day
• LAKEY INSPIRED - Chill...
Miss You - LiQWYD
• Miss You - LiQWYD (No ...
After Rain - Zackross
• After Rain - Zackross ...
Thank you so much for making this available on RUclips. You provide top-notch quality here. I'm a big fan of your videos.
Thank you soo much for this amazing video 😍
It is an amazing work bro ✌😍
I always watch your tutorials
instead of making a top blacklayer and making it adjust you can use filter: brightness(0.8) its works best
Excellent.
OMG It 's what I've been looking for :)
Happy to hear that :)
Really nice tutorial! thanks. to anyone having troubles with this project, add "model : 'dall-e-3'" and 'n:1' and google the sizes of dall-e-3 and choose your ideal. Then you will get an error, the "bill" error, which means you have to pay the API, otherwise you can't access it. Still it's amazing to know how to build an AI project with javascript.
I'm getting access limit error can you please guide me?
@@meghashah269 did your error resolved
Thanks for doing this, love your work! I'm having a similar issue as others have shared with the API key I generated not working. From what I can gather, you have to subscribe to an OpenAI pricing plan in order to generate an API key as the free one is designated as a test key. Are you able to confirm if this is correct? Much appreciated!
Instead of converting the response as a json we can directly make the response as a url and convert it into blob
Sir, please could you explain how querySelector of download Btn still works (after generate AI images) after you although you already remove the download button from the initial showcase images (the main one from HTML) ?
Or it is take it from imgCardMarkup ?
because when you're generating images you generate const imgCardMarkup where the dwnload button is still present
Oh it would be fun if you created your own actual AI modal just use an transformer with few billion or million images labeled easy as it sounds with libbs like tensor flow training is easy creating server and we got it
Perfect job🎉🎉🎉 thanks 😊😊😊
Thank you too!
Thank you very much, but I have a question: how can I run dall.e3 in this same project
wow amazing 🥰😍🤩
Thank you!!
COOL 😍😍BUT WHEN WILL YOU UPLOAD THE SOURCE CODE ON YOUR WEBSITE ?
Here is the source code link: www.codingnepalweb.com/ai-image-generator-website-html-javascript/
Amazing
Thanks
hey codingnepal tou can post payment method strip steb by step? how i can install npx init in Visual code idk
First
First 🥇
Please pin because it is going to viral 😊
Thank you so much 🥰❣️❣️❣️
You are so welcome
Failed to generate AI images. make sure your API key is valid
This is appearing even after i replace my API key 😢
Please create a professional video editing app
This nice working perfectly and I want be like ai quiz generator website plz create the video for this website 🙏🏻
How can this work if all users get a message about an incorrect api key when they click the generation button?
it is showing 400 bad request error on usage of API now what to do
Status Code 400 () Bad request error show please explain about it ?
same error
i followed the tutorial but my code is not working "{
"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've been stuck here since this morning, I can't move forward. Could I have a solution?
yes got the same error! please tell if you have solved this😓
use the word headers instead of header
Did you manage to fix it?
Yeah I have got the same error
Do you have this code? pls give me! Thanks bro very much!
tnx for the code - I can't make it working localy and on web serwer - I'v put my openai key, uploaded all files but always get error:" ..invalid key" - should I put anything on the serwer? How get it for visitors on my website?
I have the same error
can you make same project using hugging face
how to solve unexpected token error?
sir they are asking for api key
could someone borrow me a api key? i'm not getting it work
its paid
Sir why don't u explain what code use why u use ?
{
"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 help me with this error m not able to solve this error
yes i am also stuck at this . please tell if you have solved this problem
@@sauravsharma5999 anyone solved the error ?
Anyone fix it?
We have to pay for apikey then only we can access
{
"error": {
"code": "billing_hard_limit_reached",
"message": "Billing hard limit has been reached",
"param": null,
"type": "invalid_request_error"
}
}
help me fix
We have to pay for apikey
I added my api key, still not working.
Did you have limit in api key
Hate it , Project is not working properly. I got stuck and give 2 days still issue not resolve. Not satisfied of this project code
It works perfectly if you follow the steps properly. If you need source code, here it is: Here is the source code link: www.codingnepalweb.com/ai-image-generator-website-html-javascript/
no its not ı am taking this error "{
"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"
}
}" and my code is "const generateForm = document.querySelector(".generate-form");
const imageGallery = document.querySelector(".image-gallery");
const OPENAI_API_KEY = "my_key";
const updateImageCard = (imgDataArray) => {
imgDataArray.forEach((imgObject, index) => {
const imgCard = imageGallery.querySelectorAll(".img-card")[index];
const imgElement = imgCard.querySelector("img");
const aiGeneratedImg = `data:image/jpeg;base64,${imgObject.b64_json}`;
imgElement.src = aiGeneratedImg;
imgElement.onload = () => {
imgCard.classList.remove("loading");
}
});
}
const generateAiImages = async (userPrompt, userImageQuantity) => {
try{
const response = await fetch("api.openai.com/v1/images/generations",{
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${OPENAI_API_KEY}`,
},
body: JSON.stringify({
prompt: userPrompt,
n: parseInt(userImageQuantity),
size: "512x512",
response_format: "b64_json"
})
});
if(!response.ok) throw new Error("Failed to generate images! Please try again.");
const { data } = await response.json();
updateImageCard([...data]);
} catch(error){
alert(error.message);
}
}
const handleFormSubmission = (e) => {
e.preventDefault();
const userPrompt = e.srcElement[0].value;
const userImageQuantity = e.srcElement[1].value;
const imgCardMarkup = Array.from({length: userImageQuantity}, () =>
`
`
).join("");
imageGallery.innerHTML = imgCardMarkup;
generateAiImages(userPrompt, userImageQuantity);
}
generateForm.addEventListener("submit", handleFormSubmission);
"@@CodingNepal
Did u find the solution? Pleade help me
{
"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"
}
}
anyone her solved this error?
use the word headers instead of header
Did you manage to fix it?
can you tell where to change this@@ascodes3461
Have yo managed to fix it?
"Authorization": `Bearer ${OPENAI_API_KEY}` not working
use the word headers instead of header
@@ascodes3461bro this is not a solution
PLease help we are getting error of API KEY i have done all correct can you check once!!
issue resolved??
did anyone got solution to this error {
"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"
}
}
Open ai has credit that you can use while in trial period. That means that your key is probably expired because your trial period has ended. You can pay credits to use it, but it may not be worth it since a lot of people are complaining the theres a problem with the system that checks the usage, and their keys often appear to consume the credit at an unrealisstic pace.
have you resolved this issue??
ı followed thhe tutorial but my code is not working "{
"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"
}
}" can somone help me please?
Please double-check your API call to ensure that the request method is set to POST.
@@CodingNepal type is POST
Same error coming in my project..can you please test your code@@CodingNepal
"{
"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"
}
}"@@CodingNepal
Did you manage to fix it?@@chandan_mishra18
hi
Failed to generate AI images. Make sure your API key is valid. i am getting this issue
Have you got the result ??
Dealing with same problem
I think we have to pay for apikey I have same issue
Is your problem solved?
Bcz you have not placed your openai API in script.js or either it's API got paid now days
im getting "bad request" error whenever i try to generate images. i havent found a fix yet if anyone has the same problem and found the solution please let me know
did you find any fix ?
Need valid key 🗝️
Who has this code, pls tell me! Thanks very much!
Bii
Bio
@@TOONSSTATION what is that?
@@dudududu2147 check the description of this video it has the source code
@@TOONSSTATION i checked it pls,
need help
The api is paid😢
Have a problem with FETCH!!!
error 400
"message": "Additional properties are not allowed ('promt' was unexpected)"
"type": "invalid_request_error"
i got the same error
spelling of prompt
Undoable. at 18:31 nothing works errror 404 and i verified all the fucking code
fake it