|
<!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> |
|
|
