|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Image Generation with Flask</title> |
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
text-align: center; |
|
padding: 20px; |
|
} |
|
input, button { |
|
margin: 10px 0; |
|
padding: 10px; |
|
font-size: 16px; |
|
} |
|
#result { |
|
margin-top: 20px; |
|
} |
|
img { |
|
max-width: 100%; |
|
height: auto; |
|
} |
|
#generated-image { |
|
display: none; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Generate an Image from Text</h1> |
|
<form id="generate-form"> |
|
<label for="model">Model Name:</label> |
|
<input type="text" id="model" name="model" value="prompthero/openjourney-v4"><br> |
|
|
|
<label for="prompt">Prompt:</label> |
|
<input type="text" id="prompt" name="prompt" required><br> |
|
|
|
<label for="seed">Seed:</label> |
|
<input type="number" id="seed" name="seed" min="0" max="3999999999" value="1"><br> |
|
|
|
<button type="submit" id="generate-button">Generate Image</button> |
|
</form> |
|
|
|
<div id="result"> |
|
<h2>Generated Image:</h2> |
|
<img id="generated-image" src="" alt="Generated Image"> |
|
<a id="download-button" href="#" download style="display:none;">Download Image</a> |
|
<p id="error-message" style="color:red;"></p> |
|
</div> |
|
|
|
<script> |
|
$(document).ready(function() { |
|
$('#generate-form').on('submit', function(event) { |
|
event.preventDefault(); |
|
|
|
const model = $('#model').val(); |
|
const prompt = $('#prompt').val(); |
|
const seed = $('#seed').val(); |
|
|
|
|
|
$('#error-message').text(''); |
|
$('#generated-image').hide(); |
|
$('#download-button').hide(); |
|
|
|
$.ajax({ |
|
url: '/generate_image', |
|
method: 'POST', |
|
contentType: 'application/json', |
|
data: JSON.stringify({ model, prompt, seed }), |
|
success: function(response) { |
|
$('#generated-image').attr('src', response.image_path).show(); |
|
$('#download-button').attr('href', response.image_path).show(); |
|
}, |
|
error: function(jqXHR) { |
|
const errorMessage = jqXHR.responseJSON?.error || 'An error occurred while generating the image.'; |
|
$('#error-message').text(errorMessage); |
|
} |
|
}); |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
