File size: 2,855 Bytes
0b026c7 b89af03 0b026c7 |
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!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();
// Clear previous results
$('#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> |