diff --git a/index.html b/index.html new file mode 100644 index 0000000..2376b46 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + + + Day #48 - Ai Image Generator | AsmrProg + + + + +
+

AI Image Generator

+

Write any descriptive and appropriate statements in the text box to recieve the four most accurately AI generated images of your liking!!!

+
+ + +
+ +
+
Generating...
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e8176e9 --- /dev/null +++ b/script.js @@ -0,0 +1,78 @@ +const apiKey = "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"; + +const maxImages = 4; +let imgNumSelected = null; + +function getRandNum(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +function stopGenerateButton() { + document.getElementById("generate").disabled = true; +} + +function allowGenerateButton() { + document.getElementById("generate").disabled = false; +} + +function clearImgGrid() { + const imageGrid = document.getElementById("image-grid"); + imageGrid.innerHTML = ""; +} + +async function genImgs(input) { + stopGenerateButton(); + clearImgGrid(); + + const loading = document.getElementById("loading"); + loading.style.display = "block"; + + const imageUrls = []; + + for (let i = 0; i < maxImages; i++) { + const randomNumber = getRandNum(1, 10000); + const prompt = `${input} ${randomNumber}`; + const response = await fetch( + "https://api-inference.huggingface.co/models/prompthero/openjourney", + { + method: "POST", + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${apiKey}`, + }, + body: JSON.stringify({ inputs: prompt }), + } + ); + + if (!response.ok) { + alert("Failed to generate image!"); + } + + const blob = await response.blob(); + const imgUrl = URL.createObjectURL(blob); + imageUrls.push(imgUrl); + + const img = document.createElement("img"); + img.src = imgUrl; + img.alt = `art-${i + 1}`; + img.onclick = () => downloadImage(imgUrl, i); + document.getElementById("image-grid").appendChild(img); + } + + loading.style.display = "none"; + allowGenerateButton(); + + imgNumSelected = null; +} + +document.getElementById("generate").addEventListener('click', () => { + const input = document.getElementById("user-prompt").value; + genImgs(input); +}); + +function downloadImage(imgUrl, imageNumber) { + const link = document.createElement("a"); + link.href = imgUrl; + link.download = `image-${imageNumber + 1}.jpg`; + link.click(); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..dc1c2fe --- /dev/null +++ b/style.css @@ -0,0 +1,149 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} + +body{ + background: #221f2f; + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +.container{ + position: relative; + width: 40rem; + color: #fff; + background: rgba(0, 0, 0, 0.44); + padding: 20px 30px; + border-radius: 16px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(7.4px); + -webkit-backdrop-filter: blur(7.4px); + border: 1px solid rgba(0, 0, 0, 0.1); +} + +.container::before{ + content: ""; + position: absolute; + background-color: #ed2ff0; + width: 120px; + height: 120px; + filter: blur(140px); + left: -20%; + top: 10%; + z-index: -1000; +} + +.container::after{ + content: ""; + position: absolute; + background-color: #675afe; + width: 120px; + height: 120px; + filter: blur(140px); + right: -20%; + bottom: -10%; + z-index: -1000; +} + +h1{ + font-size: 28px; + font-weight: 600; + margin-bottom: 15px; + text-align: center; +} + +p{ + font-size: 14px; + color: #ccc; + line-height: 1.4rem; + text-align: justify; +} + +.gen-form{ + margin-top: 20px; + display: flex; + gap: 10px; + width: 100%; +} + +input{ + width: 80%; + border-radius: 5px; + outline: none; + border: none; + padding: 0 15px; + background-color: transparent; + color: #fff; + border: 1px solid #999; + transition: all 0.3s ease; +} + +input:hover, input:focus{ + border-color: #675afe; +} + +button{ + width: 20%; + height: 36px; + color: #fff; + border: 1px solid #ccc; + background: #20232c; + cursor: pointer; + border-radius: 5px; + font-size: 0.9rem; + transition: all 0.3s ease; +} + +button:hover{ + background: #675afe; + border-color: transparent; +} + +#loading{ + display: none; + font-size: 18px; + margin: 10px 0; +} + +button:disabled, button[disabled]{ + border: 1px solid #999; + background-color: #ccc; + color: #666; + cursor: auto; +} + +.result{ + margin-top: 10px; + width: 100%; + padding: 10px 0 0; + display: flex; + flex-direction: column; + align-items: center; +} + +#image-grid{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + margin-bottom: 10px; + max-width: 80%; +} + +#image-grid img{ + max-width: 100%; + border-radius: 10px; + cursor: pointer; + border: 2px solid transparent; + transition: all 0.3s ease; +} + +#image-grid img:hover{ + border-color: #675afe; +} \ No newline at end of file