|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Générateur de Manga IA</title> |
|
|
<style> |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
color: #333; |
|
|
line-height: 1.6; |
|
|
} |
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
.header h1 { |
|
|
color: white; |
|
|
font-size: 3em; |
|
|
margin-bottom: 10px; |
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
|
|
} |
|
|
.header p { |
|
|
color: rgba(255,255,255,0.9); |
|
|
font-size: 1.2em; |
|
|
} |
|
|
|
|
|
|
|
|
.main-content { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 30px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
|
|
|
.card { |
|
|
background: rgba(255, 255, 255, 0.98); |
|
|
padding: 30px; |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2); |
|
|
} |
|
|
.card h2 { |
|
|
color: #4a5568; |
|
|
margin-bottom: 20px; |
|
|
border-bottom: 3px solid #667eea; |
|
|
padding-bottom: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.json-input { |
|
|
width: 100%; |
|
|
height: 400px; |
|
|
padding: 15px; |
|
|
border: 2px solid #e2e8f0; |
|
|
border-radius: 10px; |
|
|
font-family: 'Courier New', monospace; |
|
|
font-size: 14px; |
|
|
resize: vertical; |
|
|
background: #f8fafc; |
|
|
} |
|
|
.json-input:focus { |
|
|
outline: none; |
|
|
border-color: #667eea; |
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.btn { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 15px 30px; |
|
|
border-radius: 10px; |
|
|
cursor: pointer; |
|
|
font-size: 16px; |
|
|
font-weight: bold; |
|
|
transition: all 0.3s ease; |
|
|
width: 100%; |
|
|
margin-top: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 10px; |
|
|
} |
|
|
.btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); |
|
|
} |
|
|
.btn:disabled { |
|
|
background: #a0aec0; |
|
|
cursor: not-allowed; |
|
|
transform: none; |
|
|
box-shadow: none; |
|
|
} |
|
|
.download-btn { |
|
|
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
display: inline-block; |
|
|
margin-top: 15px; |
|
|
padding: 12px 24px; |
|
|
} |
|
|
.download-btn:hover { |
|
|
box-shadow: 0 5px 15px rgba(72, 187, 120, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.status-card-display { |
|
|
background: #f7fafc; |
|
|
border: 2px solid #e2e8f0; |
|
|
border-radius: 10px; |
|
|
padding: 20px; |
|
|
margin: 15px 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.status-card-display.generating { border-color: #f6ad55; background: #fffaf0; } |
|
|
.status-card-display.completed { border-color: #68d391; background: #f0fff4; } |
|
|
.status-card-display.error { border-color: #fc8181; background: #fffafa; } |
|
|
|
|
|
.progress-bar { |
|
|
background: #e2e8f0; |
|
|
border-radius: 10px; |
|
|
height: 20px; |
|
|
margin: 15px 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.progress-fill { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
height: 100%; |
|
|
transition: width 0.5s ease; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.preview-section { |
|
|
display: none; |
|
|
} |
|
|
.image-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
.image-grid img { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
|
object-fit: cover; |
|
|
aspect-ratio: 2 / 3; |
|
|
background-color: #f0f0f0; |
|
|
} |
|
|
|
|
|
|
|
|
.spinner { |
|
|
display: inline-block; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border: 3px solid rgba(255,255,255,.3); |
|
|
border-radius: 50%; |
|
|
border-top-color: #fff; |
|
|
animation: spin 1s ease-in-out infinite; |
|
|
} |
|
|
@keyframes spin { to { transform: rotate(360deg); } } |
|
|
.alert { |
|
|
padding: 15px; |
|
|
border-radius: 10px; |
|
|
margin: 15px 0; |
|
|
font-weight: bold; |
|
|
} |
|
|
.alert-error { background: #fed7d7; color: #c53030; border: 2px solid #fc8181; } |
|
|
.alert-success { background: #c6f6d5; color: #2f855a; border: 2px solid #68d391; } |
|
|
|
|
|
|
|
|
.example-json { |
|
|
background: #2d3748; |
|
|
color: #e2e8f0; |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
font-family: 'Courier New', monospace; |
|
|
font-size: 14px; |
|
|
overflow-x: auto; |
|
|
white-space: pre-wrap; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 900px) { |
|
|
.main-content { grid-template-columns: 1fr; } |
|
|
.header h1 { font-size: 2.5em; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
|
|
|
<header class="header"> |
|
|
<h1>🎨 Générateur de Manga IA</h1> |
|
|
<p>Créez votre manga personnalisé avec l'IA Gemini. Décrivez chaque page et laissez la magie opérer !</p> |
|
|
</header> |
|
|
|
|
|
<main class="main-content"> |
|
|
<section id="input-section" class="card"> |
|
|
<h2>📝 Scénario du Manga</h2> |
|
|
<textarea id="jsonInput" class="json-input" placeholder="Collez votre JSON de configuration ici...">{ |
|
|
"partie-1": "Page de titre, style manga épique. Un jeune épéiste aux cheveux argentés se tient sur une falaise, regardant une ville futuriste sous une lune brisée. Titre : 'CHRONIQUES DE NÉO-KYOTO'.", |
|
|
"partie-2": "Style manga noir et blanc. L'épéiste, Kai, marche dans une ruelle sombre de Néo-Kyoto, éclairée par des néons. Il a l'air méfiant.", |
|
|
"partie-3": "Action intense. Kai esquive une attaque laser d'un drone robotique. Traits de vitesse et effets d'impact. Style dynamique.", |
|
|
"partie-4": "Gros plan sur le visage déterminé de Kai alors qu'il active son épée énergétique, qui brille d'une lumière bleue. Il se prépare à contre-attaquer." |
|
|
}</textarea> |
|
|
<button id="generateBtn" class="btn"> |
|
|
<span id="btnIcon">🚀</span> |
|
|
<span id="btnText">Générer le Manga</span> |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
<section id="status-section" class="card"> |
|
|
<h2>📊 Suivi de Génération</h2> |
|
|
<div id="statusContainer"> |
|
|
<p style="color: #718096; text-align: center; padding: 40px;"> |
|
|
Prêt à démarrer.<br> |
|
|
Décrivez votre scénario et cliquez sur "Générer" pour commencer. |
|
|
</p> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<section id="previewSection" class="card preview-section"> |
|
|
<h2>🖼️ Prévisualisation des Pages</h2> |
|
|
<div id="imageGrid" class="image-grid"> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="card"> |
|
|
<h2>📋 Format du Scénario (JSON)</h2> |
|
|
<p style="margin-bottom: 20px;"> |
|
|
Utilisez des clés "partie-X" (où X est un numéro) avec une description détaillée pour chaque page : |
|
|
</p> |
|
|
<div class="example-json">{ |
|
|
"partie-1": "Description détaillée de la première page...", |
|
|
"partie-2": "Description détaillée de la deuxième page...", |
|
|
"partie-N": "Continuez avec autant de parties que nécessaire..." |
|
|
}</div> |
|
|
<p style="margin-top: 15px; color: #4a5568;"> |
|
|
<strong>Conseils :</strong> Soyez précis ! Mentionnez le style (noir et blanc, couleur, shonen, etc.), les personnages, l'action, l'ambiance et l'angle de caméra pour de meilleurs résultats. |
|
|
</p> |
|
|
</section> |
|
|
|
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let currentTaskId = null; |
|
|
let statusInterval = null; |
|
|
|
|
|
|
|
|
const generateBtn = document.getElementById('generateBtn'); |
|
|
const jsonInput = document.getElementById('jsonInput'); |
|
|
const statusContainer = document.getElementById('statusContainer'); |
|
|
const previewSection = document.getElementById('previewSection'); |
|
|
const imageGrid = document.getElementById('imageGrid'); |
|
|
const btnIcon = document.getElementById('btnIcon'); |
|
|
const btnText = document.getElementById('btnText'); |
|
|
|
|
|
|
|
|
generateBtn.addEventListener('click', startGeneration); |
|
|
jsonInput.addEventListener('blur', autoFormatJSON); |
|
|
window.addEventListener('beforeunload', () => clearInterval(statusInterval)); |
|
|
|
|
|
|
|
|
async function startGeneration() { |
|
|
|
|
|
resetUI(); |
|
|
|
|
|
|
|
|
let jsonData; |
|
|
try { |
|
|
const jsonText = jsonInput.value.trim(); |
|
|
if (!jsonText) throw new Error("Veuillez saisir un scénario JSON."); |
|
|
jsonData = JSON.parse(jsonText); |
|
|
if (Object.keys(jsonData).filter(k => k.startsWith('partie-')).length === 0) { |
|
|
throw new Error('Aucune "partie-X" trouvée dans le JSON.'); |
|
|
} |
|
|
} catch (error) { |
|
|
showAlert(`Erreur de format JSON : ${error.message}`, 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
try { |
|
|
setButtonState(true, 'Démarrage...'); |
|
|
const response = await fetch('/generate', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify(jsonData) |
|
|
}); |
|
|
const result = await response.json(); |
|
|
|
|
|
if (!response.ok) throw new Error(result.error || 'Erreur inconnue du serveur.'); |
|
|
|
|
|
|
|
|
currentTaskId = result.task_id; |
|
|
startStatusPolling(); |
|
|
showAlert(`Génération démarrée ! Tâche ID : ${currentTaskId}`, 'success'); |
|
|
|
|
|
} catch (error) { |
|
|
showAlert(`Erreur de démarrage : ${error.message}`, 'error'); |
|
|
setButtonState(false); |
|
|
} |
|
|
} |
|
|
|
|
|
function startStatusPolling() { |
|
|
clearInterval(statusInterval); |
|
|
statusInterval = setInterval(async () => { |
|
|
if (!currentTaskId) return; |
|
|
try { |
|
|
const response = await fetch(`/status/${currentTaskId}`); |
|
|
const status = await response.json(); |
|
|
if (response.ok) { |
|
|
updateStatusDisplay(status); |
|
|
if (['completed', 'error'].includes(status.status)) { |
|
|
clearInterval(statusInterval); |
|
|
setButtonState(false); |
|
|
} |
|
|
} else { |
|
|
console.error('Erreur de statut:', status.error); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Erreur réseau:', error); |
|
|
} |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
function updateStatusDisplay(status) { |
|
|
|
|
|
const statusInfo = getStatusInfo(status.status); |
|
|
const progressHtml = getProgressHtml(status); |
|
|
const downloadHtml = status.status === 'completed' ? getDownloadButtonHtml() : ''; |
|
|
const errorHtml = status.error ? `<div class="alert alert-error">${status.error}</div>` : ''; |
|
|
|
|
|
statusContainer.innerHTML = ` |
|
|
<div class="status-card-display ${statusInfo.class}"> |
|
|
<h3>${statusInfo.icon} ${statusInfo.text}</h3> |
|
|
<p><small><strong>ID :</strong> ${currentTaskId}</small></p> |
|
|
${progressHtml} |
|
|
${errorHtml} |
|
|
${downloadHtml} |
|
|
</div>`; |
|
|
|
|
|
|
|
|
if (status.image_urls && status.image_urls.length > 0) { |
|
|
previewSection.style.display = 'block'; |
|
|
status.image_urls.forEach(url => { |
|
|
if (!document.querySelector(`img[src="${url}"]`)) { |
|
|
const img = document.createElement('img'); |
|
|
img.src = url; |
|
|
img.alt = `Page générée pour la tâche ${currentTaskId}`; |
|
|
img.style.opacity = 0; |
|
|
img.onload = () => { |
|
|
img.style.transition = 'opacity 0.5s ease-in-out'; |
|
|
img.style.opacity = 1; |
|
|
}; |
|
|
imageGrid.appendChild(img); |
|
|
} |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function resetUI() { |
|
|
imageGrid.innerHTML = ''; |
|
|
previewSection.style.display = 'none'; |
|
|
if(statusContainer.querySelector('.alert')) { |
|
|
statusContainer.querySelector('.alert').remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
function setButtonState(isLoading, text = 'Générer le Manga') { |
|
|
generateBtn.disabled = isLoading; |
|
|
btnText.textContent = text; |
|
|
btnIcon.innerHTML = isLoading ? '<span class="spinner"></span>' : '🚀'; |
|
|
} |
|
|
|
|
|
function getStatusInfo(status) { |
|
|
const map = { |
|
|
'queued': { icon: '⏳', text: 'En file d\'attente', class: 'generating' }, |
|
|
'generating': { icon: '🎨', text: 'Génération en cours...', class: 'generating' }, |
|
|
'creating_zip': { icon: '🗜️', text: 'Création de l\'archive ZIP...', class: 'generating' }, |
|
|
'completed': { icon: '✅', text: 'Terminé !', class: 'completed' }, |
|
|
'error': { icon: '❌', text: 'Erreur', class: 'error' } |
|
|
}; |
|
|
return map[status] || { icon: '❔', text: 'Inconnu', class: '' }; |
|
|
} |
|
|
|
|
|
function getProgressHtml(status) { |
|
|
if (!status.total_pages || status.status === 'completed') return ''; |
|
|
const progress = (status.current_page / status.total_pages) * 100; |
|
|
return ` |
|
|
<p style="text-align: center; margin-top: 10px;"> |
|
|
Page ${status.current_page || 0} sur ${status.total_pages} |
|
|
</p> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: ${progress}%"></div> |
|
|
</div>`; |
|
|
} |
|
|
|
|
|
function getDownloadButtonHtml() { |
|
|
return `<a href="/download/${currentTaskId}" class="btn download-btn">📥 Télécharger l'archive ZIP</a>`; |
|
|
} |
|
|
|
|
|
function showAlert(message, type) { |
|
|
const alertClass = type === 'error' ? 'alert-error' : 'alert-success'; |
|
|
const alertHtml = `<div class="alert ${alertClass}">${message}</div>`; |
|
|
statusContainer.innerHTML = alertHtml; |
|
|
} |
|
|
|
|
|
function autoFormatJSON() { |
|
|
try { |
|
|
const parsed = JSON.parse(jsonInput.value); |
|
|
jsonInput.value = JSON.stringify(parsed, null, 2); |
|
|
} catch (e) { |
|
|
|
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
