document.write(`
<div style="background: url('/uploads/waghmaj2/starbg.PNG') center / cover no-repeat;
margin:0;
padding:0;
display:flex;
flex-direction:column;
width: 100vw;
height:100vh;
justify-content: center;
align-items: center;
">
<style>
.image-container {
width: 48%;
border-radius: 15px;
overflow: hidden;
box-shadow: rgb(38, 57, 77) 0 20px 30px -10px;
}
.image-container img {
width: 100%;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A.I. Image Generator</title>
</head>
<body>
<header style="color: rgb(255, 255, 255); height: 150px; display: flex; align-items: center; width: 100%; justify-content: center; ">
<h1> A.I. Image Generator</h1>
</header>
<section class="images-section" style="
width:100%;
max-width:600px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
">
</section>
<section class="bottom-section" style="width: 100%; display: flex; justify-content: center; height: 150px; ">
<div class="input-container" style="width: 100%; max-width: 600px; position: relative; ">
<input placeholder="Please give me 10-12 seconds to answer." style="width: 100%; border: none; font-size: 20px; padding: 10px; border-radius: 5px; box-shadow: rgb(38, 57, 77) 0 20px 30px -10px; box-sizing: border-box; "/>
<div id="submit-icon" style="color:black ;font-size: 60px; position: absolute; top: 60px; right: 270px;cursor:pointer;text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;">➢</div>
</div>
</section>
</body>
</html>
</div>
`);
const API_KEY = "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"
const submitIcon = document.querySelector("#submit-icon")
const inputElement = document.querySelector("input")
const imageSection = document.querySelector(".images-section")
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("https://api.openai.com/v1/images/generations",options)
const data = await response.json()
data?.data.forEach(imageObject =>{
const imageContainer = document.createElement("div")
imageContainer.classList.add("image-container")
const imageElement = document.createElement('img')
imageElement.setAttribute("src", imageObject.url)
imageContainer.append(imageElement)
imageSection.append(imageContainer)
})
}catch(error){
console.error(error)
}
}
submitIcon.addEventListener('click',getImages)