// Implementation of the DALL-E AI Image Generation API
document.write ( `
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS Styles */
body {
background-color: #0066ff !important;
position: relative;
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
justify-content:center;
align-items:center;
}
svg {
position: absolute;
top: 0;
left: 0:
z-index: -10;
}
#visual {
position: absolute;
top: 0;
left: 0;
}
header,
p,
section {
position: relative;
z-index: 1;
color: white;
text-align: center; /* Align text to the center */
}
.flex-container {
display: flex;
justify-content: center; /* Center elements horizontally */
align-items: center;
flex-direction: column; /* Align elements vertically */
margin-top: 20px; /* Adjust margin as needed */
}
.bottom-section{
width: 100%;
display: flex;
justify-content: center;
height: 150px;
}
.input-container {
width: 100%;
max-width: 600px;
position: relative;
padding-top: 50px;
}
input{
width: 100%;
border: none;
font-size: 20px;
padding: 10px;
border-radius: 5px;
}
#submit-icon {
position: absolute;
top: 7px;
right: -40px;
color: white;
font-size: 20px;
cursor: pointer;
padding-top: 50px;
}
.images-section {
display: flex;
flex-wrap: wrap; /* Allow images to wrap to new line */
justify-content: center; /* Center images horizontally */
gap: 10px; /* Adjust gap between images */
max-width: 600px;
}
.image-container {
width: calc(50% - 20px);
border-radius: 15px;
overflow: hidden;
}
.image-container img {
max-width: 100%;
height:auto;
}
a.link {
color: red;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
position: relative;
}
.button-container button {
margin: 0 10px;
padding: 8px 16px;
border: none;
background-color: #4CAF50;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
cursor: pointer;
}
.button-container button:hover {
background-color: #45a049;
}
/* Hide buttons initially */
.button-container.hidden {
display: none;
}
.center-placeholder::placeholder {
/* Center the placeholder text */
text-align: center;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="visual" viewBox="0 0 900 600" version="1.1"><rect x="0" y="0" width="900px" height="100vw" fill="#001220"/><path d="M0 426L21.5 424.3C43 422.7 86 419.3 128.8 409.8C171.7 400.3 214.3 384.7 257.2 386.8C300 389 343 409 385.8 412C428.7 415 471.3 401 514.2 397C557 393 600 399 642.8 402.3C685.7 405.7 728.3 406.3 771.2 411.7C814 417 857 427 878.5 432L900 437L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#4facf7"/><path d="M0 407L21.5 411.2C43 415.3 86 423.7 128.8 430.8C171.7 438 214.3 444 257.2 449.2C300 454.3 343 458.7 385.8 454.2C428.7 449.7 471.3 436.3 514.2 426.3C557 416.3 600 409.7 642.8 405.3C685.7 401 728.3 399 771.2 410.3C814 421.7 857 446.3 878.5 458.7L900 471L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#2b9dfc"/><path d="M0 508L21.5 497.3C43 486.7 86 465.3 128.8 457.8C171.7 450.3 214.3 456.7 257.2 465.5C300 474.3 343 485.7 385.8 485.7C428.7 485.7 471.3 474.3 514.2 467.2C557 460 600 457 642.8 459C685.7 461 728.3 468 771.2 476.3C814 484.7 857 494.3 878.5 499.2L900 504L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#008cff"/><path d="M0 484L21.5 487.5C43 491 86 498 128.8 502.5C171.7 507 214.3 509 257.2 505.5C300 502 343 493 385.8 496.3C428.7 499.7 471.3 515.3 514.2 517.2C557 519 600 507 642.8 505.7C685.7 504.3 728.3 513.7 771.2 514.7C814 515.7 857 508.3 878.5 504.7L900 501L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#007aff"/><path d="M0 572L21.5 570.2C43 568.3 86 564.7 128.8 558C171.7 551.3 214.3 541.7 257.2 542.7C300 543.7 343 555.3 385.8 558.3C428.7 561.3 471.3 555.7 514.2 554.3C557 553 600 556 642.8 555.7C685.7 555.3 728.3 551.7 771.2 553C814 554.3 857 560.7 878.5 563.8L900 567L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#0066ff"/>
</svg>
<header>
<h1> Movie Poster Generator </h1>
</header>
<p> Create movie posters with <a href="https://platform.openai.com/docs/models/overview" class="link">DALL-E</a>
using the <a href="https://platform.openai.com/docs/api-reference/images/create" class="link"> OpenAI </a> API.
</p>
<p> <strong>NOTE</strong>: This API key had $3.00 remaining as of uploading.</p>
<p> Pricing guide can be viewed
<a href="https://openai.com/pricing" class="link"> here. </a>
</p>
<section class="images-section" id="imagesSection"></section>
<div class="bottom-section">
<div class="input-container">
<input placeholder="Enter prompt" class="center-placeholder"/>
</div>
</div>
<div class="button-container">
<button id="dalle2Button">Select DALL-E 2</button>
<button id="dalle3Button">Select DALL-E 3</button>
</div>
<script>
</script
</body>
</html>
`);
document.addEventListener("DOMContentLoaded", () => {
const apikey = "";
const submitIcon = document.querySelector("#submit-icon");
const inputElement = document.querySelector("input");
const imageSection = document.querySelector(".images-section");
const dalle3Button = document.getElementById("dalle3Button");
const dalle2Button = document.getElementById("dalle2Button");
const buttonContainer = document.querySelector(".button-container");
// Function to handle button click and generate images
// Function to handle button click and generate images
const handleButtonClick = (selectedModel, nValue) => {
generateImages(selectedModel, nValue);
};
// Event listener for DALL-E 3 button
dalle3Button.addEventListener("click", () => {
// Modify the model property to "dall-e-3"
handleButtonClick("dall-e-3", 1);
});
// Event listener for DALL-E 2 button
dalle2Button.addEventListener("click", () => {
// Modify the model property to "dall-e-2"
handleButtonClick("dall-e-2", 4);
});
const generateImages = async (selectedModel, nValue) => {
const userInput = inputElement.value.toLowerCase() + " movie poster"; // Append " movie poster" to the input
// MH edit
console.log ( userInput );
const options = {
method: "POST",
headers: {
"Authorization": `Bearer ${apikey}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"prompt": userInput,
"model": selectedModel,
"n": nValue,
"size": "1024x1024"
})
}
try {
const response = await fetch("https://api.openai.com/v1/images/generations", options);
const data = await response.json();
console.log(data);
// Clear existing images
imageSection.innerHTML = '';
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);
}
}
buttonContainer.classList.remove("hidden");
submitIcon.addEventListener("click", generateImages);
});