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