Eps2

Sleeping

App Files Files Community

Docfile commited on Sep 6

Commit

c075891

verified ·

1 Parent(s): 481cfe6

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +454 -201

templates/index.html CHANGED Viewed

@@ -3,234 +3,487 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title> Chat - Analyse PDF</title>
-    <!-- Tailwind CSS via CDN -->
-    <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        .chat-container {
-            height: calc(100vh - 220px);
         }
     </style>
 </head>
-<body class="bg-gray-100">
-    <div class="container mx-auto p-4 max-w-3xl">
-        <header class="bg-white shadow-md rounded-lg p-4 mb-4">
-            <h1 class="text-2xl font-bold text-center text-blue-600">Gemini Chat - Analyse PDF</h1>
-            <p class="text-center text-gray-500">Discutez avec l'IA à propos du document sur la langue Fang</p>
-            <div class="mt-2 text-center">
-                <a href="{{ pdf_url }}" target="_blank" class="text-blue-500 hover:underline">
-                    📄 Consulter le PDF analysé
-                </a>
-            </div>
-            {% if error %}
-            <div class="mt-2 p-2 bg-red-100 text-red-700 rounded">
-                {{ error }}
-            </div>
-            {% endif %}
-        </header>
-        <div class="bg-white shadow-md rounded-lg p-4">
-            <!-- Zone d'historique de chat -->
-            <div id="chat-history" class="chat-container overflow-y-auto mb-4 p-3 bg-gray-50 rounded-lg">
-                <div class="text-center text-gray-400 my-4">
-                    <p>Posez des questions sur le document PDF de la langue Fang.</p>
-                    <p class="mt-2 text-sm">Exemples de questions:</p>
-                    <ul class="text-sm mt-1 space-y-1">
-                        <li>• Quelles sont les principales caractéristiques de la langue Fang?</li>
-                        <li>• Expliquez la structure verbale en Fang</li>
-                        <li>• Que dit le document sur la phonologie du Fang?</li>
-                    </ul>
-                </div>
             </div>
-            <!-- Zone de saisie et boutons -->
-            <div class="flex flex-col gap-2">
-                <div class="flex gap-2">
-                    <textarea
-                        id="user-input"
-                        class="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        placeholder="Posez une question sur le document Fang..."
-                        rows="2"
-                    ></textarea>
-                    <button
-                        id="send-button"
-                        class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg"
-                    >
-                        Envoyer
-                    </button>
                 </div>
-                <button
-                    id="reset-button"
-                    class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg self-end"
-                >
-                    Nouvelle Conversation
-                </button>
             </div>
         </div>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const chatHistory = document.getElementById('chat-history');
-            const userInput = document.getElementById('user-input');
-            const sendButton = document.getElementById('send-button');
-            const resetButton = document.getElementById('reset-button');
-            // État de chargement
-            let isLoading = false;
-            // Fonction pour ajouter un message au chat
-            function addMessage(role, content, timestamp = getCurrentTime()) {
-                const messageDiv = document.createElement('div');
-                messageDiv.className = `my-2 p-3 rounded-lg ${role === 'user' ? 'bg-blue-100 ml-12' : 'bg-gray-100 mr-12'}`;
-                const header = document.createElement('div');
-                header.className = 'font-bold text-sm';
-                header.textContent = role === 'user' ? 'Vous' : 'Gemini';
-                const timeSpan = document.createElement('span');
-                timeSpan.className = 'text-xs text-gray-500 ml-2';
-                timeSpan.textContent = timestamp;
-                header.appendChild(timeSpan);
-                const contentDiv = document.createElement('div');
-                contentDiv.className = 'whitespace-pre-wrap';
-                contentDiv.textContent = content;
-                messageDiv.appendChild(header);
-                messageDiv.appendChild(contentDiv);
-                chatHistory.appendChild(messageDiv);
-                // Scroll to bottom
-                chatHistory.scrollTop = chatHistory.scrollHeight;
             }
-            // Obtenir l'heure actuelle
-            function getCurrentTime() {
-                const now = new Date();
-                return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
             }
-            // Fonction pour afficher l'indicateur de chargement
-            function showLoading() {
-                if (isLoading) return;
-                isLoading = true;
-                const loadingDiv = document.createElement('div');
-                loadingDiv.id = 'loading-indicator';
-                loadingDiv.className = 'my-2 p-3 bg-gray-100 rounded-lg mr-12 flex items-center';
-                loadingDiv.innerHTML = `
-                    <div class="font-bold text-sm">Gemini</div>
-                    <div class="ml-2">
-                        <span class="inline-block w-2 h-2 bg-gray-500 rounded-full animate-bounce"></span>
-                        <span class="inline-block w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></span>
-                        <span class="inline-block w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></span>
-                    </div>
-                `;
-                chatHistory.appendChild(loadingDiv);
-                chatHistory.scrollTop = chatHistory.scrollHeight;
             }
-            // Fonction pour masquer l'indicateur de chargement
-            function hideLoading() {
-                if (!isLoading) return;
-                const loadingIndicator = document.getElementById('loading-indicator');
-                if (loadingIndicator) {
-                    loadingIndicator.remove();
                 }
-                isLoading = false;
             }
-            // Fonction pour envoyer un message
-            async function sendMessage() {
-                const message = userInput.value.trim();
-                if (!message) return;
-                // Remplacer le contenu initial si c'est le premier message
-                if (chatHistory.querySelector('.text-gray-400')) {
-                    chatHistory.innerHTML = '';
-                }
-                // Vider l'input et ajouter le message de l'utilisateur
-                userInput.value = '';
-                addMessage('user', message);
-                // Afficher l'indicateur de chargement
-                showLoading();
-                try {
-                    // Envoyer la requête au serveur
-                    const response = await fetch('/chat', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({ message }),
-                    });
-                    if (!response.ok) {
-                        throw new Error('Erreur de communication avec le serveur');
-                    }
-                    const data = await response.json();
-                    // Masquer l'indicateur de chargement
-                    hideLoading();
-                    // Afficher la réponse
-                    addMessage('model', data.response);
-                } catch (error) {
-                    // Masquer l'indicateur de chargement
-                    hideLoading();
-                    // Afficher l'erreur
-                    addMessage('system', `Erreur: ${error.message}`);
-                    console.error('Erreur:', error);
-                }
             }
-            // Réinitialiser la conversation
-            async function resetChat() {
                 try {
-                    const response = await fetch('/reset', {
-                        method: 'POST',
-                    });
-                    if (!response.ok) {
-                        throw new Error('Erreur lors de la réinitialisation');
                     }
-                    // Vider l'historique
-                    chatHistory.innerHTML = `
-                        <div class="text-center text-gray-400 my-4">
-                            <p>Posez des questions sur le document PDF de la langue Fang.</p>
-                            <p class="mt-2 text-sm">Exemples de questions:</p>
-                            <ul class="text-sm mt-1 space-y-1">
-                                <li>• Quelles sont les principales caractéristiques de la langue Fang?</li>
-                                <li>• Expliquez la structure verbale en Fang</li>
-                                <li>• Que dit le document sur la phonologie du Fang?</li>
-                            </ul>
-                        </div>
-                    `;
                 } catch (error) {
-                    console.error('Erreur de réinitialisation:', error);
-                    alert('Impossible de réinitialiser la conversation. Veuillez réessayer.');
                 }
             }
-            // Écouteurs d'événements
-            sendButton.addEventListener('click', sendMessage);
-            userInput.addEventListener('keypress', (e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    sendMessage();
                 }
-            });
-            resetButton.addEventListener('click', resetChat);
         });
     </script>
 </body>

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