Eps2

Sleeping

File size: 16,512 Bytes

<!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 BD</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;
        }

        .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;
        }

        .input-section, .status-section {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .input-section h2, .status-section 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;
            line-height: 1.5;
            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;
        }

        .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;
        }

        .status-card {
            background: #f7fafc;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            padding: 20px;
            margin: 15px 0;
            transition: all 0.3s ease;
        }

        .status-card.generating {
            border-color: #f6ad55;
            background: #fffaf0;
        }

        .status-card.completed {
            border-color: #68d391;
            background: #f0fff4;
        }

        .status-card.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;
        }

        .download-btn {
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(72, 187, 120, 0.3);
        }

        .example-section {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            margin-top: 30px;
        }

        .example-json {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        .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;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .header h1 {
                font-size: 2em;
            }

            .json-input {
                height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎨 Générateur de Manga BD</h1>
            <p>Créez votre manga personnalisé avec l'IA Gemini</p>
        </div>

        <div class="main-content">
            <div class="input-section">
                <h2>📝 Configuration du Manga</h2>
                <textarea 
                    id="jsonInput" 
                    class="json-input" 
                    placeholder="Collez votre JSON de configuration ici...">
{
  "partie-1": "Crée une page de manga style shonen avec un héros adolescent aux cheveux hérissés qui découvre ses pouvoirs magiques dans une forêt mystérieuse. Style artistique détaillé avec beaucoup d'effets visuels.",
  "partie-2": "Suite de l'histoire: le héros rencontre un mentor sage qui lui explique l'origine de ses pouvoirs. Scène dans une clairière avec des éléments magiques flottants.",
  "partie-3": "Combat épique contre un monstre des ombres. Le héros utilise ses nouveaux pouvoirs pour la première fois. Beaucoup d'action et d'effets spéciaux.",
  "partie-4": "Victoire du héros et résolution. Il regarde vers l'horizon, prêt pour de nouvelles aventures. Scène inspirante avec un coucher de soleil."
}</textarea>
                <button id="generateBtn" class="btn">
                    🚀 Générer le Manga
                </button>
            </div>

            <div class="status-section">
                <h2>📊 Statut de Génération</h2>
                <div id="statusContainer">
                    <p style="color: #718096; text-align: center; padding: 40px;">
                        Aucune génération en cours.<br>
                        Collez votre configuration JSON et cliquez sur "Générer le Manga" pour commencer.
                    </p>
                </div>
            </div>
        </div>

        <div class="example-section">
            <h2>📋 Format JSON Attendu</h2>
            <p style="margin-bottom: 20px;">
                Votre JSON doit contenir des clés nommées "partie-X" (où X est un numéro) avec des prompts détaillés pour chaque page :
            </p>
            <div class="example-json">{
  "partie-1": "Prompt détaillé pour la première page de votre manga...",
  "partie-2": "Prompt détaillé pour la deuxième page...",
  "partie-3": "Prompt détaillé pour la troisième page...",
  "partie-N": "Continuez avec autant de parties que nécessaire..."
}</div>
            <p style="margin-top: 15px; color: #4a5568;">
                <strong>Conseils :</strong> Soyez très descriptif dans vos prompts. Mentionnez le style artistique, 
                les personnages, l'action, l'ambiance, etc. Plus votre description est détaillée, 
                meilleur sera le résultat !
            </p>
        </div>
    </div>

    <script>
        let currentTaskId = null;
        let statusInterval = null;

        const generateBtn = document.getElementById('generateBtn');
        const jsonInput = document.getElementById('jsonInput');
        const statusContainer = document.getElementById('statusContainer');

        generateBtn.addEventListener('click', async () => {
            const jsonText = jsonInput.value.trim();
            
            if (!jsonText) {
                showAlert('Veuillez saisir une configuration JSON', 'error');
                return;
            }

            let jsonData;
            try {
                jsonData = JSON.parse(jsonText);
            } catch (error) {
                showAlert('Format JSON invalide: ' + error.message, 'error');
                return;
            }

            // Vérifier que le JSON contient des parties
            const parts = Object.keys(jsonData).filter(key => key.startsWith('partie-'));
            if (parts.length === 0) {
                showAlert('Aucune partie trouvée dans le JSON. Utilisez des clés comme "partie-1", "partie-2", etc.', 'error');
                return;
            }

            try {
                generateBtn.disabled = true;
                generateBtn.innerHTML = '<span class="spinner"></span> 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) {
                    currentTaskId = result.task_id;
                    startStatusPolling();
                    showAlert(`Génération démarrée ! ID de tâche: ${currentTaskId}`, 'success');
                } else {
                    throw new Error(result.error || 'Erreur inconnue');
                }

            } catch (error) {
                showAlert('Erreur lors du démarrage: ' + error.message, 'error');
                generateBtn.disabled = false;
                generateBtn.innerHTML = '🚀 Générer le Manga';
            }
        });

        function startStatusPolling() {
            if (statusInterval) {
                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 (status.status === 'completed' || status.status === 'error') {
                            clearInterval(statusInterval);
                            statusInterval = null;
                            generateBtn.disabled = false;
                            generateBtn.innerHTML = '🚀 Générer le Manga';
                        }
                    } else {
                        console.error('Erreur lors de la récupération du statut:', status.error);
                    }
                } catch (error) {
                    console.error('Erreur réseau:', error);
                }
            }, 2000); // Vérifier toutes les 2 secondes
        }

        function updateStatusDisplay(status) {
            const container = statusContainer;
            
            let statusClass = '';
            let statusIcon = '';
            let statusText = '';

            switch (status.status) {
                case 'queued':
                    statusClass = 'generating';
                    statusIcon = '⏳';
                    statusText = 'En file d\'attente';
                    break;
                case 'generating':
                    statusClass = 'generating';
                    statusIcon = '🎨';
                    statusText = 'Génération en cours';
                    break;
                case 'creating_pdf':
                    statusClass = 'generating';
                    statusIcon = '📄';
                    statusText = 'Création du PDF';
                    break;
                case 'completed':
                    statusClass = 'completed';
                    statusIcon = '✅';
                    statusText = 'Terminé !';
                    break;
                case 'error':
                    statusClass = 'error';
                    statusIcon = '❌';
                    statusText = 'Erreur';
                    break;
            }

            let progressHtml = '';
            if (status.total_pages && status.current_page) {
                const progress = (status.current_page / status.total_pages) * 100;
                progressHtml = `
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: ${progress}%"></div>
                    </div>
                    <p style="text-align: center; margin-top: 10px;">
                        Page ${status.current_page} sur ${status.total_pages}
                        ${status.current_part ? `(${status.current_part})` : ''}
                    </p>
                `;
            }

            let downloadHtml = '';
            if (status.status === 'completed') {
                downloadHtml = `
                    <a href="/download/${currentTaskId}" class="download-btn" style="width: 100%; text-align: center; margin-top: 15px;">
                        📥 Télécharger le PDF
                    </a>
                `;
            }

            let errorHtml = '';
            if (status.error) {
                errorHtml = `<div class="alert alert-error">${status.error}</div>`;
            }

            container.innerHTML = `
                <div class="status-card ${statusClass}">
                    <h3>${statusIcon} ${statusText}</h3>
                    <p><strong>ID de tâche:</strong> ${currentTaskId}</p>
                    <p><strong>Créée le:</strong> ${new Date(status.created_at).toLocaleString('fr-FR')}</p>
                    ${status.completed_at ? `<p><strong>Terminée le:</strong> ${new Date(status.completed_at).toLocaleString('fr-FR')}</p>` : ''}
                    ${progressHtml}
                    ${errorHtml}
                    ${downloadHtml}
                </div>
            `;
        }

        function showAlert(message, type) {
            const alertClass = type === 'error' ? 'alert-error' : 'alert-success';
            const alertHtml = `<div class="alert ${alertClass}">${message}</div>`;
            
            statusContainer.innerHTML = alertHtml + statusContainer.innerHTML;
            
            // Retirer l'alerte après 5 secondes
            setTimeout(() => {
                const alert = statusContainer.querySelector('.alert');
                if (alert) {
                    alert.remove();
                }
            }, 5000);
        }

        // Nettoyer l'intervalle quand la page est fermée
        window.addEventListener('beforeunload', () => {
            if (statusInterval) {
                clearInterval(statusInterval);
            }
        });

        // Auto-formatter le JSON
        jsonInput.addEventListener('blur', () => {
            try {
                const parsed = JSON.parse(jsonInput.value);
                jsonInput.value = JSON.stringify(parsed, null, 2);
            } catch (error) {
                // Ignorer les erreurs de parsing
            }
        });
    </script>
</body>
</html>