Attaque2

Sleeping

App Files Files Community

Docfile commited on Apr 6

Commit

671f070

verified ·

1 Parent(s): d9ee204

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +217 -223

templates/index.html CHANGED Viewed

@@ -3,264 +3,258 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Générateur de Flashcards IA</title>
     <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            line-height: 1.6;
-            padding: 20px;
-            max-width: 800px;
-            margin: 40px auto;
-            background-color: #f4f4f4;
-            color: #333;
-        }
-        .container {
-            background-color: #fff;
-            padding: 30px;
             border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
-        h1 {
-            text-align: center;
-            color: #2c3e50;
-            margin-bottom: 30px;
         }
-        label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: bold;
-            color: #555;
         }
-        input[type="text"] {
-            width: calc(100% - 120px); /* Adjust width considering button size */
-            padding: 12px;
             margin-bottom: 20px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            font-size: 1rem;
-            box-sizing: border-box; /* Include padding in width */
         }
-        button {
-            padding: 12px 20px;
-            background-color: #3498db;
-            color: white;
-            border: none;
             border-radius: 4px;
             cursor: pointer;
-            font-size: 1rem;
-            transition: background-color 0.3s ease;
-            vertical-align: top; /* Align with input field */
-        }
-        button:hover {
-            background-color: #2980b9;
-        }
-        button:disabled {
-            background-color: #bdc3c7;
-            cursor: not-allowed;
-        }
-        #statusMessage {
-            margin-top: 20px;
-            padding: 10px;
-            border-radius: 4px;
-            text-align: center;
-            font-weight: bold;
-        }
-        #statusMessage.loading {
-            background-color: #eaf2f8;
-            color: #3498db;
-        }
-        #statusMessage.error {
-            background-color: #fbeae5;
-            color: #c0392b;
-        }
-         #statusMessage.success {
-            background-color: #e8f6f3;
-            color: #1abc9c;
         }
-        #flashcardsContainer {
-            margin-top: 30px;
-            border-top: 1px solid #eee;
-            padding-top: 20px;
         }
-        .flashcard {
-            background-color: #f9f9f9;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            padding: 15px 20px;
-            margin-bottom: 15px;
-            cursor: pointer;
-            transition: box-shadow 0.2s ease-in-out;
-        }
-        .flashcard:hover {
-             box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
-        .flashcard .question {
-            font-weight: bold;
-            margin-bottom: 10px;
-            color: #34495e;
         }
-        .flashcard .answer {
-            display: none; /* Hidden by default */
-            color: #555;
-            margin-top: 10px;
-            padding-top: 10px;
-            border-top: 1px dashed #ccc;
         }
-        .flashcard.flipped .answer {
-            display: block; /* Shown when .flipped class is added */
         }
-        @media (max-width: 600px) {
-            input[type="text"] {
-                width: 100%;
-                margin-bottom: 10px;
-            }
-            button {
-                width: 100%;
-            }
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Générateur de Flashcards IA</h1>
-        <div>
-            <label for="topicInput">Entrez un sujet :</label>
-            <input type="text" id="topicInput" placeholder="Ex: Histoire de l'intelligence artificielle">
-            <button id="generateButton">Générer</button>
         </div>
-        <div id="statusMessage"></div>
-        <div id="flashcardsContainer">
-            <!-- Les flashcards générées apparaîtront ici -->
         </div>
     </div>
     <script>
-        const topicInput = document.getElementById('topicInput');
-        const generateButton = document.getElementById('generateButton');
-        const statusMessage = document.getElementById('statusMessage');
-        const flashcardsContainer = document.getElementById('flashcardsContainer');
-        generateButton.addEventListener('click', handleGenerateClick);
-        // Optionnel : Permettre de lancer la génération avec la touche Entrée dans le champ de texte
-        topicInput.addEventListener('keypress', function(event) {
-            if (event.key === 'Enter') {
-                event.preventDefault(); // Empêche la soumission de formulaire par défaut si enveloppé dans un <form>
-                handleGenerateClick();
-            }
-        });
-        async function handleGenerateClick() {
-            const topic = topicInput.value.trim();
             if (!topic) {
-                displayMessage('Veuillez entrer un sujet.', 'error');
                 return;
             }
-            // Désactiver le bouton et afficher le message de chargement
-            generateButton.disabled = true;
-            flashcardsContainer.innerHTML = ''; // Vider les anciennes flashcards
-            displayMessage('Génération des flashcards en cours... Cela peut prendre un moment.', 'loading');
-            try {
-                const response = await fetch('/generate', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ topic: topic }),
-                });
-                // Essayer de parser la réponse JSON même si le statut n'est pas OK (pour les messages d'erreur du backend)
-                const data = await response.json();
-                clearMessage(); // Effacer le message de chargement
-                if (!response.ok) {
-                    // Gérer les erreurs HTTP (4xx, 5xx) et les erreurs applicatives renvoyées dans le JSON
-                    const errorMsg = data?.error || `Erreur ${response.status}: ${response.statusText}`;
-                    throw new Error(errorMsg); // Provoque l'entrée dans le bloc catch
                 }
-                if (data.success && data.flashcards && Array.isArray(data.flashcards)) {
-                    if(data.flashcards.length > 0) {
-                        displayFlashcards(data.flashcards);
-                        displayMessage(`Flashcards générées pour "${topic}"! Cliquez sur une carte pour voir la réponse.`, 'success');
-                    } else {
-                         displayMessage("Aucune flashcard n'a pu être générée pour ce sujet. Essayez d'être plus spécifique ou de reformuler.", 'info'); // Utiliser 'info' ou une classe dédiée
-                         statusMessage.style.backgroundColor = '#eaf2f8'; // Style pour info
-                         statusMessage.style.color = '#3498db';
-                    }
-                } else if (data.error) {
-                    // Gérer les erreurs applicatives spécifiques renvoyées dans data.error
-                     displayMessage(`Erreur: ${data.error}`, 'error');
-                }
-                 else {
-                    // Cas où la réponse est 200 OK mais le format n'est pas celui attendu
-                    displayMessage('Réponse inattendue reçue du serveur.', 'error');
                 }
-            } catch (error) {
-                // Gérer les erreurs réseau ou les erreurs levées lors du traitement de la réponse
-                console.error('Erreur lors de la requête de génération:', error);
-                clearMessage(); // Assurez-vous que le message de chargement est parti
-                displayMessage(`Erreur de communication: ${error.message}`, 'error');
-            } finally {
-                // Réactiver le bouton dans tous les cas (succès ou échec)
-                generateButton.disabled = false;
-            }
-        }
-        function displayMessage(message, type = 'info') { // type peut être 'info', 'error', 'loading', 'success'
-            statusMessage.textContent = message;
-            statusMessage.className = type; // Appliquer la classe pour le style CSS
-            statusMessage.style.display = 'block'; // S'assurer que le message est visible
-        }
-        function clearMessage() {
-            statusMessage.textContent = '';
-            statusMessage.className = '';
-            statusMessage.style.display = 'none'; // Cacher la zone de message
-        }
         function displayFlashcards(flashcards) {
-            flashcardsContainer.innerHTML = ''; // Assurer que c'est vide avant d'ajouter
-            flashcards.forEach((card) => {
-                // Vérification simple de la structure attendue
-                if (typeof card.question !== 'string' || typeof card.answer !== 'string') {
-                     console.warn('Format de flashcard inattendu ignoré:', card);
-                     return; // Ignorer cette carte si elle n'a pas le bon format
-                }
                 const cardElement = document.createElement('div');
-                cardElement.classList.add('flashcard');
                 const questionElement = document.createElement('div');
-                questionElement.classList.add('question');
-                questionElement.textContent = `Q: ${card.question}`;
-                const answerElement = document.createElement('div');
-                answerElement.classList.add('answer');
-                answerElement.textContent = `R: ${card.answer}`;
-                cardElement.appendChild(questionElement);
-                cardElement.appendChild(answerElement);
-                // Ajouter l'interactivité: cliquer pour afficher/masquer la réponse
-                cardElement.addEventListener('click', () => {
-                    cardElement.classList.toggle('flipped');
                 });
-                flashcardsContainer.appendChild(cardElement);
             });
         }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Générateur de Flashcards et Quiz</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
+        .flashcard {
+            border: 1px solid #ddd;
             border-radius: 8px;
+            margin-bottom: 15px;
+            padding: 15px;
+            cursor: pointer;
+            background-color: #f8f9fa;
+            transition: transform 0.3s;
         }
+        .flashcard:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         }
+        .answer {
+            display: none;
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px dashed #ccc;
         }
+        .quiz-question {
+            border: 1px solid #ddd;
+            border-radius: 8px;
             margin-bottom: 20px;
+            padding: 15px;
+            background-color: #f8f9fa;
         }
+        .option {
+            padding: 8px 15px;
+            margin: 5px 0;
             border-radius: 4px;
             cursor: pointer;
+            transition: background-color 0.2s;
         }
+        .option:hover {
+            background-color: #e9ecef;
         }
+        .selected {
+            background-color: #d1e7dd;
         }
+        .correct {
+            background-color: #d4edda;
+            border-color: #c3e6cb;
         }
+        .incorrect {
+            background-color: #f8d7da;
+            border-color: #f5c6cb;
         }
+        .explanation {
+            display: none;
+            margin-top: 15px;
+            padding: 10px;
+            border-radius: 4px;
+            background-color: #e2f3fc;
         }
+        #loading {
+            display: none;
         }
     </style>
 </head>
 <body>
+    <div class="container mt-5">
+        <h1 class="text-center mb-4">Générateur de Flashcards et Quiz</h1>
+        <div class="row mb-4">
+            <div class="col-md-8 offset-md-2">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="mb-3">
+                            <label for="topic" class="form-label">Sujet</label>
+                            <input type="text" class="form-control" id="topic" placeholder="Entrez un sujet...">
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">Type de contenu</label>
+                            <div class="form-check">
+                                <input class="form-check-input" type="radio" name="contentType" id="typeFlashcards" value="flashcards" checked>
+                                <label class="form-check-label" for="typeFlashcards">
+                                    Flashcards
+                                </label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="radio" name="contentType" id="typeQuiz" value="quiz">
+                                <label class="form-check-label" for="typeQuiz">
+                                    Quiz
+                                </label>
+                            </div>
+                        </div>
+                        <button id="generateBtn" class="btn btn-primary w-100">Générer</button>
+                    </div>
+                </div>
+            </div>
         </div>
+        <div id="loading" class="text-center my-5">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Chargement...</span>
+            </div>
+            <p class="mt-2">Génération en cours... Cela peut prendre plusieurs minutes.</p>
         </div>
+        <div id="flashcardsContainer" class="row mt-4"></div>
+        <div id="quizContainer" class="row mt-4"></div>
     </div>
     <script>
+        document.getElementById('generateBtn').addEventListener('click', function() {
+            const topic = document.getElementById('topic').value;
             if (!topic) {
+                alert('Veuillez entrer un sujet.');
                 return;
             }
+            const contentType = document.querySelector('input[name="contentType"]:checked').value;
+            // Afficher le chargement
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('flashcardsContainer').innerHTML = '';
+            document.getElementById('quizContainer').innerHTML = '';
+            // Envoi de la requête
+            fetch('/generate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ topic, type: contentType }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Masquer le chargement
+                document.getElementById('loading').style.display = 'none';
+                if (data.error) {
+                    alert('Erreur: ' + data.error);
+                    return;
                 }
+                if (contentType === 'flashcards' && data.flashcards) {
+                    displayFlashcards(data.flashcards);
+                } else if (contentType === 'quiz' && data.quiz) {
+                    displayQuiz(data.quiz);
                 }
+            })
+            .catch(error => {
+                document.getElementById('loading').style.display = 'none';
+                alert('Erreur lors de la génération: ' + error);
+            });
+        });
         function displayFlashcards(flashcards) {
+            const container = document.getElementById('flashcardsContainer');
+            container.innerHTML = `
+                <div class="col-12 mb-4">
+                    <h2 class="text-center">Flashcards générées (${flashcards.length})</h2>
+                    <p class="text-center text-muted">Cliquez sur une carte pour voir la réponse</p>
+                </div>
+            `;
+            flashcards.forEach((card, index) => {
                 const cardElement = document.createElement('div');
+                cardElement.className = 'col-md-6 col-lg-4';
+                cardElement.innerHTML = `
+                    <div class="flashcard" onclick="toggleAnswer(${index})">
+                        <h5 class="card-title">${card.question}</h5>
+                        <div id="answer-${index}" class="answer">
+                            <strong>Réponse:</strong> ${card.answer}
+                        </div>
+                    </div>
+                `;
+                container.appendChild(cardElement);
+            });
+        }
+        function toggleAnswer(index) {
+            const answerElement = document.getElementById(`answer-${index}`);
+            if (answerElement.style.display === 'block') {
+                answerElement.style.display = 'none';
+            } else {
+                answerElement.style.display = 'block';
+            }
+        }
+        function displayQuiz(quizQuestions) {
+            const container = document.getElementById('quizContainer');
+            container.innerHTML = `
+                <div class="col-12 mb-4">
+                    <h2 class="text-center">Quiz généré (${quizQuestions.length} questions)</h2>
+                    <p class="text-center text-muted">Sélectionnez une réponse pour chaque question</p>
+                </div>
+            `;
+            quizQuestions.forEach((question, qIndex) => {
                 const questionElement = document.createElement('div');
+                questionElement.className = 'col-12 mb-4';
+                let optionsHtml = '';
+                question.options.forEach((option, oIndex) => {
+                    optionsHtml += `
+                        <div class="option" id="q${qIndex}-o${oIndex}"
+                             onclick="selectOption(${qIndex}, ${oIndex}, '${question.correctAnswer}')">
+                            ${option}
+                        </div>
+                    `;
                 });
+                questionElement.innerHTML = `
+                    <div class="quiz-question">
+                        <h5>${qIndex + 1}. ${question.question}</h5>
+                        <div class="options mt-3">
+                            ${optionsHtml}
+                        </div>
+                        <div class="explanation" id="explanation-${qIndex}">
+                            <strong>Explication:</strong> ${question.explanation}
+                        </div>
+                    </div>
+                `;
+                container.appendChild(questionElement);
             });
         }
+        function selectOption(questionIndex, optionIndex, correctAnswer) {
+            const questionOptions = document.querySelectorAll(`[id^="q${questionIndex}-o"]`);
+            const selectedOption = document.getElementById(`q${questionIndex}-o${optionIndex}`);
+            const explanationElement = document.getElementById(`explanation-${questionIndex}`);
+            // Retirer les classes des autres options
+            questionOptions.forEach(option => {
+                option.classList.remove('selected', 'correct', 'incorrect');
+            });
+            // Sélectionner l'option
+            selectedOption.classList.add('selected');
+            // Vérifier si c'est la bonne réponse
+            const selectedText = selectedOption.textContent.trim();
+            if (selectedText === correctAnswer) {
+                selectedOption.classList.add('correct');
+            } else {
+                selectedOption.classList.add('incorrect');
+                // Mettre en évidence la bonne réponse
+                questionOptions.forEach(option => {
+                    if (option.textContent.trim() === correctAnswer) {
+                        option.classList.add('correct');
+                    }
+                });
+            }
+            // Afficher l'explication
+            explanationElement.style.display = 'block';
+        }
     </script>
 </body>
 </html>