| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Cygnis Image Gen</title> |
| | <style> |
| | body { font-family: sans-serif; background: #111; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } |
| | input { padding: 10px; width: 300px; border-radius: 5px; border: none; } |
| | button { padding: 10px 20px; background: #8b5cf6; color: white; border: none; border-radius: 5px; cursor: pointer; margin-left: 10px; } |
| | button:disabled { background: #555; } |
| | #result { margin-top: 20px; max-width: 512px; } |
| | img { width: 100%; border-radius: 10px; } |
| | </style> |
| | </head> |
| | <body> |
| | <h1>Cygnis Image Generator (DALL-E Mini)</h1> |
| | <div> |
| | <input type="text" id="prompt" placeholder="Un chat dans l'espace..."> |
| | <button id="btn">Générer</button> |
| | </div> |
| | <div id="result"></div> |
| |
|
| | <script> |
| | const btn = document.getElementById('btn'); |
| | const prompt = document.getElementById('prompt'); |
| | const result = document.getElementById('result'); |
| | |
| | btn.addEventListener('click', async () => { |
| | const text = prompt.value; |
| | if (!text) return; |
| | |
| | btn.disabled = true; |
| | btn.textContent = "Génération..."; |
| | result.innerHTML = '<p>Calcul en cours (peut prendre 1-2 min sur CPU)...</p>'; |
| | |
| | try { |
| | const res = await fetch('/generate', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ prompt: text }) |
| | }); |
| | |
| | if (!res.ok) throw new Error("Erreur serveur"); |
| | const data = await res.json(); |
| | |
| | result.innerHTML = `<img src="${data.image_url}" alt="Image générée">`; |
| | } catch (e) { |
| | result.innerHTML = `<p style="color:red">Erreur: ${e.message}</p>`; |
| | } finally { |
| | btn.disabled = false; |
| | btn.textContent = "Générer"; |
| | } |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
