File size: 1,665 Bytes
e20f18b d76d49b 59bd6dc d76d49b 59bd6dc df7f0f4 59bd6dc d76d49b 59bd6dc e20f18b 59bd6dc e20f18b 59bd6dc d76d49b 59bd6dc d76d49b 59bd6dc e20f18b d76d49b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Generator</title>
<script>
async function generateImage() {
const generateButton = document.getElementById('generate-btn');
generateButton.disabled = true;
generateButton.innerText = 'Generating...';
const prompt = document.getElementById('prompt-input').value;
try {
const response = await fetch('https://e5c2-35-198-254-120.ngrok-free.app/generate-image/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `prompt=${encodeURIComponent(prompt)}`
});
const data = await response.json();
if (response.ok) {
const imageBase64 = data.image_base64;
document.getElementById('generated-image').src = `data:image/png;base64,${imageBase64}`;
generateButton.disabled = false;
generateButton.innerText = 'Generate';
} else {
console.error('Error from API:', data);
alert('Failed to generate image.');
}
} catch (error) {
console.error('Network or other error:', error);
alert('Failed to generate image.');
}
}
</script>
</head>
<body>
<h1>Image Generator</h1>
<label for="prompt-input">Enter a prompt to generate an image:</label>
<input type="text" id="prompt-input" required>
<button onclick="generateImage()" id="generate-btn" type="submit">Generate</button>
<img id="generated-image" alt="Generated Image" style="max-width: 100%;">
</body>
</html>
|