├── images ├── bg.jpg ├── download.svg └── loader.svg ├── index.html ├── script.js └── style.css /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Singh-Prince-Rinku/AI-Image-Generator-JavaScript/4da623dc1c414b2d3cae6eb7ced3078675d88c7a/images/bg.jpg -------------------------------------------------------------------------------- /images/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/loader.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AI Image Generator 7 | 8 | 9 | 10 | 11 |
12 |
13 |

AI Image Generator Tool

14 |

15 | Convert your text into an image within a second using this AI Image 16 | Generator tool. 17 |

18 |
19 | 25 |
26 | 32 | 33 |
34 |
35 |
36 |
37 |
38 |
39 | image 43 |
44 |
45 | image 49 |
50 |
51 | image 55 |
56 |
57 | image 61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const generateForm = document.querySelector(".generate-form"); 2 | const generateBtn = generateForm.querySelector(".generate-btn"); 3 | const imageGallery = document.querySelector(".image-gallery"); 4 | 5 | const OPENAI_API_KEY = "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"; 6 | let isImageGenerating = false; 7 | 8 | const updateImageCard = (imgDataArray) => { 9 | imgDataArray.forEach((imgObject, index) => { 10 | const imgCard = imageGallery.querySelectorAll(".img-card")[index]; 11 | const imgElement = imgCard.querySelector("img"); 12 | const downloadBtn = imgCard.querySelector(".download-btn"); 13 | const aiGeneratedImage = `data:image/jpeg;base64,${imgObject.b64_json}`; 14 | imgElement.src = aiGeneratedImage; 15 | imgElement.onload = () => { 16 | imgCard.classList.remove("loading"); 17 | downloadBtn.setAttribute("href", aiGeneratedImage); 18 | downloadBtn.setAttribute("download", `${new Date().getTime()}.jpg`); 19 | } 20 | }); 21 | } 22 | 23 | const generateAiImages = async (userPrompt, userImgQuantity) => { 24 | try { 25 | const response = await fetch("https://api.openai.com/v1/images/generations", { 26 | method: "POST", 27 | headers: { 28 | "Content-Type": "application/json", 29 | "Authorization": `Bearer ${OPENAI_API_KEY}`, 30 | }, 31 | body: JSON.stringify({ 32 | prompt: userPrompt, 33 | n: userImgQuantity, 34 | size: "512x512", 35 | response_format: "b64_json" 36 | }), 37 | }); 38 | if(!response.ok) throw new Error("Failed to generate AI images. Make sure your API key is valid."); 39 | 40 | const { data } = await response.json(); 41 | updateImageCard([...data]); 42 | } catch (error) { 43 | alert(error.message); 44 | } finally { 45 | generateBtn.removeAttribute("disabled"); 46 | generateBtn.innerText = "Generate"; 47 | isImageGenerating = false; 48 | } 49 | } 50 | 51 | const handleImageGeneration = (e) => { 52 | e.preventDefault(); 53 | if(isImageGenerating) return; 54 | const userPrompt = e.srcElement[0].value; 55 | const userImgQuantity = parseInt(e.srcElement[1].value); 56 | generateBtn.setAttribute("disabled", true); 57 | generateBtn.innerText = "Generating"; 58 | isImageGenerating = true; 59 | const imgCardMarkup = Array.from({ length: userImgQuantity }, () => 60 | `
61 | AI generated image 62 | 63 | download icon 64 | 65 |
` 66 | ).join(""); 67 | 68 | imageGallery.innerHTML = imgCardMarkup; 69 | generateAiImages(userPrompt, userImgQuantity); 70 | } 71 | 72 | generateForm.addEventListener("submit", handleImageGeneration); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Importing Google font - Poppins */ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: "Poppins", sans-serif; 9 | } 10 | 11 | .image-generator { 12 | height: 40vh; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | position: relative; 17 | background: url("images/bg.jpg"); 18 | background-size: cover; 19 | background-position: center; 20 | } 21 | 22 | .image-generator::before { 23 | content: ""; 24 | position: absolute; 25 | left: 0; 26 | top: 0; 27 | width: 100%; 28 | height: 100%; 29 | opacity: 0.5; 30 | background: #121212; 31 | } 32 | 33 | .image-generator .content { 34 | position: relative; 35 | color: #fff; 36 | padding: 0 15px; 37 | max-width: 760px; 38 | text-align: center; 39 | } 40 | 41 | .image-generator h1 { 42 | font-size: 2.5rem; 43 | font-weight: 700; 44 | } 45 | 46 | .image-generator p { 47 | margin-top: 10px; 48 | font-size: 1.35rem; 49 | } 50 | 51 | .image-generator .generate-form { 52 | height: 56px; 53 | padding: 6px; 54 | display: flex; 55 | margin-bottom: 15px; 56 | background: #fff; 57 | align-items: center; 58 | border-radius: 30px; 59 | margin-top: 45px; 60 | justify-content: space-between; 61 | } 62 | 63 | .generate-form .prompt-input { 64 | width: 100%; 65 | height: 100%; 66 | outline: none; 67 | padding: 0 17px; 68 | border: none; 69 | background: none; 70 | font-size: 1rem; 71 | border-radius: 30px; 72 | } 73 | 74 | .generate-form .controls { 75 | display: flex; 76 | height: 100%; 77 | gap: 15px; 78 | } 79 | 80 | .generate-form .img-quantity { 81 | outline: none; 82 | border: none; 83 | height: 44px; 84 | background: none; 85 | font-size: 1rem; 86 | } 87 | 88 | .generate-form .generate-btn { 89 | font-size: 1rem; 90 | outline: none; 91 | border: none; 92 | font-weight: 500; 93 | color: #fff; 94 | cursor: pointer; 95 | height: 100%; 96 | padding: 0 25px; 97 | border-radius: 30px; 98 | background: #4949E7; 99 | } 100 | 101 | .generate-form .generate-btn[disabled] { 102 | opacity: 0.6; 103 | pointer-events: none; 104 | } 105 | 106 | .generate-form button:hover { 107 | background: #1d1de2; 108 | } 109 | 110 | .image-gallery { 111 | display: flex; 112 | gap: 15px; 113 | padding: 0 15px; 114 | flex-wrap: wrap; 115 | justify-content: center; 116 | margin: 50px auto; 117 | max-width: 1250px; 118 | } 119 | 120 | .image-gallery .img-card { 121 | display: flex; 122 | position: relative; 123 | align-items: center; 124 | justify-content: center; 125 | background: #f2f2f2; 126 | border-radius: 4px; 127 | overflow: hidden; 128 | aspect-ratio: 1 / 1; 129 | width: 285px; 130 | } 131 | 132 | .image-gallery .img-card img { 133 | height: 100%; 134 | width: 100%; 135 | object-fit: cover; 136 | } 137 | 138 | .image-gallery .img-card.loading img { 139 | width: 80px; 140 | height: 80px; 141 | } 142 | 143 | .image-gallery .img-card .download-btn { 144 | bottom: 15px; 145 | right: 15px; 146 | height: 36px; 147 | width: 36px; 148 | display: flex; 149 | align-items: center; 150 | justify-content: center; 151 | text-decoration: none; 152 | background: #fff; 153 | border-radius: 50%; 154 | position: absolute; 155 | opacity: 0; 156 | pointer-events: none; 157 | transition: 0.2s ease; 158 | } 159 | 160 | .image-gallery .img-card .download-btn img { 161 | width: 14px; 162 | height: 14px; 163 | } 164 | 165 | .image-gallery .img-card:not(.loading):hover .download-btn { 166 | opacity: 1; 167 | pointer-events: auto; 168 | } 169 | 170 | @media screen and (max-width: 760px) { 171 | .image-generator { 172 | height: 45vh; 173 | padding-top: 30px; 174 | align-items: flex-start; 175 | } 176 | 177 | .image-generator h1 { 178 | font-size: 1.8rem; 179 | } 180 | 181 | .image-generator p { 182 | font-size: 1rem; 183 | } 184 | 185 | .image-generator .generate-form { 186 | margin-top: 30px; 187 | height: 52px; 188 | display: block; 189 | } 190 | 191 | .generate-form .controls { 192 | height: 40px; 193 | margin-top: 15px; 194 | justify-content: end; 195 | align-items: center; 196 | } 197 | 198 | .generate-form .generate-btn[disabled] { 199 | opacity: 1; 200 | } 201 | 202 | .generate-form .img-quantity { 203 | color: #fff; 204 | } 205 | 206 | .generate-form .img-quantity option { 207 | color: #000; 208 | } 209 | 210 | .image-gallery { 211 | margin-top: 20px; 212 | } 213 | 214 | .image-gallery .img-card:not(.loading) .download-btn { 215 | opacity: 1; 216 | pointer-events: auto; 217 | } 218 | } 219 | 220 | @media screen and (max-width: 500px) { 221 | .image-gallery .img-card { 222 | width: 100%; 223 | } 224 | } --------------------------------------------------------------------------------