document.addEventListener('DOMContentLoaded', function () {
// Add CSS styles to the document
const style = document.createElement('style');
style.textContent = `
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
all{
background: black;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background: #151515;
color: white;
}
.container {
margin: 20px;
text-align: center;
width: 80%;
max-width: 600px;
}
h1 {
margin-bottom: 0.5em;
color: #00fd0a;
text-shadow: 2px 2px 4px rgba(0, 253, 10, 0.5);
}
h3 {
margin: 1em 0;
color: #ddd;
}
#selected-year, #rangeValue {
font-size: 2em;
color: #00fd0a;
margin-bottom: 1em;
}
.range {
width: 100%;
height: 25px;
-webkit-appearance: none;
background: #333;
outline: none;
border-radius: 15px;
overflow: hidden;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
cursor: pointer;
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #00fd0a;
border: none;
box-shadow: -407px 0 0 400px #00fd0a;
transition: transform 0.3s ease;
}
.range::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
input, button {
margin: 10px;
padding: 10px;
border-radius: 5px;
border: none;
transition: background-color 0.3s ease;
}
button {
background-color: #00fd0a;
cursor: pointer;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0, 253, 10, 0.3);
}
button:hover {
background-color: #00db0a;
}
#api-key-container {
background-color: #222;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
#api-key {
width: calc(100% - 130px);
}
#output {
min-height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #aaa;
margin-bottom: 0; /* Reduce the bottom margin */
}
.loading {
display: flex;
justify-content: center;
align-items: center;
margin-top: 0px;
}
.loading div {
width: 1em;
height: 1em;
margin: 0.2em;
background-color: #00fd0a;
border-radius: 50%;
animation: bounce 0.6s infinite alternate;
}
.loading div:nth-child(2) {
animation-delay: 0.2s;
}
.loading div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
to {
opacity: 0.1;
transform: translate3d(0, -0.5em, 0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
width: 95%;
}
#api-key {
width: calc(100% - 140px);
}
}
`;
document.head.appendChild(style);
// Inject the HTML structure into the body
document.body.innerHTML = `
<div id="all">
<h1>TimeMachine powered by DALL·E</h1>
<div class="container" id="api-key-container">
<h3>Enter API Key</h3>
<input type="text" id="api-key" placeholder="Enter your API Key...">
<button id="set-api-key">Set API Key</button>
</div>
<div class="container">
<h3>Enter Year and Location</h3>
<input class="range" id="year-slider" type="range" min="-2020" max="2020" step="10" value="0" oninput="updateYearSlider(this.value)" onchange="updateYearSlider(this.value)">
<p><span id="selected-year">1 AD</span></p>
<input type="text" id="location-input" placeholder="Enter a location...">
<button id="submit-prompt">Generate Image</button>
</div>
<div class="container">
<h3>Disclaimer</h3>
<p class="disclaimer">The images generated by AI are based on data models and may not be always historically or factually accurate. They are for illustrative purposes only and should not be used as a sole source of truth.</p>
<h3>Generated Image</h3>
<div id="output"></div>
<div class="loading" id="loading-animation" style="display:none;">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>`;
let apiKey = '';
// Function to set API key and hide the API key div
function setApiKey() {
apiKey = document.querySelector("#api-key").value.trim();
if (apiKey) {
console.log("API Key set:", apiKey);
document.querySelector("#api-key-container").style.display = 'none';
} else {
alert("Please enter an API key.");
}
}
// Function to display the year with BC/AD notation and update the slider
function updateYearSlider(value) {
const yearSpan = document.querySelector("#selected-year");
let year = parseInt(value);
if (year < 0) {
yearSpan.textContent = `${Math.abs(year)} BC`;
} else if (year > 0) {
yearSpan.textContent = `${year} AD`;
} else {
yearSpan.textContent = `1`; // Handling the year 0 as 1
}
}
// Function to show the loading animation
function showLoading() {
document.getElementById('loading-animation').style.display = 'flex';
}
// Function to hide the loading animation
function hideLoading() {
document.getElementById('loading-animation').style.display = 'none';
}
// Function to generate image based on selected year and location
function generateImage(year, location) {
showLoading(); // Show loading animation
const adjustedYear = year < 0 ? `${Math.abs(year)} BC` : `${year} AD`;
const prompt = `Generate a photorealistic image of ${location} in the decade starting in the year ${adjustedYear}.`;
const outputDiv = document.querySelector("#output");
outputDiv.innerHTML = '';
// Making the API request
fetch('https://api.openai.com/v1/images/generations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: "dall-e-3",
prompt: prompt,
n: 1,
size: "1024x1024"
})
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok: ' + response.statusText);
}
return response.json();
})
.then(data => {
if (data && data.data && data.data.length > 0) {
const imageUrl = data.data[0].url;
outputDiv.innerHTML = `<img src="${imageUrl}" alt="Generated Image" style="max-width:100%; height:auto;" />`;
} else {
outputDiv.textContent = "No image generated.";
}
hideLoading(); // Hide loading animation
})
.catch(error => {
console.error("Error while generating image:", error);
outputDiv.textContent = "Error: " + error.message;
hideLoading(); // Hide loading animation
});
}
// Event listeners
document.querySelector("#set-api-key").addEventListener('click', setApiKey);
document.querySelector("#submit-prompt").addEventListener('click', function () {
const year = parseInt(document.querySelector("#year-slider").value);
const location = document.querySelector("#location-input").value.trim();
if (apiKey && location) {
generateImage(year, location);
} else {
alert("Please set the API key and enter a location.");
}
});
// Update displayed year when the slider is moved
const yearSlider = document.querySelector("#year-slider");
yearSlider.addEventListener('input', function () {
updateYearSlider(this.value);
});
});