<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image Generation App</title>
<link href=”https://cdn.jsdelivr.net/npm/tailwindcss@2.2.3/dist/tailwind.min.css” rel=”stylesheet”>
<style>
.spinner {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #3498db; /* Blue */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class=”flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4″>
<h1 class=”text-2xl mb-4″>Image Generation</h1>
<div class=”w-full max-w-md”>
<input type=”text” id=”promptInput” placeholder=”Enter prompt” class=”mb-4 p-2 border border-gray-300 rounded w-full” />
<button id=”generateButton” class=”p-2 bg-green-700 text-white rounded w-full”>
Generate Image
</button>
<div id=”spinner” class=”hidden mt-4 flex justify-center”>
<div class=”spinner”></div>
</div>
<div id=”imageDisplay” class=”mt-4″></div>
<div id=”errorDisplay” class=”mt-4 text-red-600″></div>
</div>
<script>
document.getElementById(‘generateButton’).addEventListener(‘click’, function() {
const prompt = document.getElementById(‘promptInput’).value;
if (!prompt) {
document.getElementById(‘errorDisplay’).textContent = ‘Please enter a prompt.’;
return;
}
document.getElementById(‘spinner’).classList.remove(‘hidden’);
document.getElementById(‘errorDisplay’).textContent = ”;
document.getElementById(‘imageDisplay’).innerHTML = ”;
fetch(‘https://backend.buildpicoapps.com/aero/run/image-generation-api?pk=v1-Z0FBQUFBQm80Y0pyTGx6MXZLMDBZR3R0QWNOQW9reFNlT3luY1BXeWFQOTlCWUE4S3E4NUdPYnZoMmpjbHh1Q09SUVZpbVg0OFhmQ1lqT2wwZ3k1U0dxcElKY1Z5MzhaZHI2el9veVJhZWVLNVNPOTUzT1pMM0U9’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({ prompt: prompt })
})
.then(response => response.json())
.then(data => {
document.getElementById(‘spinner’).classList.add(‘hidden’);
if (data.status === ‘success’) {
let imgElement = document.createElement(‘img’);
imgElement.src = data.imageUrl;
imgElement.alt = ‘Generated image’;
imgElement.className = ‘w-full’;
document.getElementById(‘imageDisplay’).appendChild(imgElement);
} else {
document.getElementById(‘errorDisplay’).textContent = ‘An error occurred: ‘ + data.status;
console.log(‘Error:’, data);
}
})
.catch(error => {
document.getElementById(‘spinner’).classList.add(‘hidden’);
document.getElementById(‘errorDisplay’).textContent = ‘An error occurred during the API request.’;
console.log(‘Fetch error:’, error);
});
});
</script>
</body>
</html>
Site Title 