Update templates/philosophie.html

templates/philosophie.html

@@ -5,12 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Assistant de Philosophie</title>
     
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Kalam&family=Lato:wght@400;700&display=swap" rel="stylesheet">
 
     <style>
         /* --- Styles Généraux et Interface --- */
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Lato', sans-serif;
             background-color: #f4f4f9;
             margin: 0;
             padding: 20px;
@@ -24,126 +27,46 @@
             border-radius: 8px;
             box-shadow: 0 4px 10px rgba(0,0,0,0.1);
         }
-        h1 {
-            text-align: center;
-            color: #2c3e50;
-        }
+        h1 { text-align: center; color: #2c3e50; }
         textarea {
-            width: 100%;
-            padding: 10px;
-            border-radius: 4px;
-            border: 1px solid #ddd;
-            min-height: 80px;
-            margin-bottom: 10px;
-            font-size: 16px;
-            box-sizing: border-box;
+            width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #ddd;
+            min-height: 80px; margin-bottom: 10px; font-size: 16px; box-sizing: border-box;
         }
         button {
-            display: block;
-            width: 100%;
-            padding: 15px;
-            background-color: #2980b9;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            font-size: 18px;
-            cursor: pointer;
-            transition: background-color 0.3s;
+            display: block; width: 100%; padding: 15px; background-color: #2980b9;
+            color: white; border: none; border-radius: 5px; font-size: 18px;
+            cursor: pointer; transition: background-color 0.3s;
         }
         button:hover { background-color: #3498db; }
         button:disabled { background-color: #95a5a6; cursor: not-allowed; }
 
         .loader {
-            display: none;
-            border: 8px solid #f3f3f3;
-            border-top: 8px solid #3498db;
-            border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            animation: spin 1s linear infinite;
-            margin: 20px auto;
+            display: none; border: 8px solid #f3f3f3; border-top: 8px solid #3498db;
+            border-radius: 50%; width: 50px; height: 50px;
+            animation: spin 1s linear infinite; margin: 20px auto;
         }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        .error { color: #c0392b; text-align: center; margin-top: 20px; }
-        .success { color: #27ae60; text-align: center; margin-top: 20px; }
+        .error { color: #c0392b; text-align: center; margin-top: 20px; font-weight: bold; }
 
         /* --- Styles du Rendu "Cahier" --- */
         .dissertation-paper {
-            font-family: 'Times New Roman', serif;
-            font-size: 16px;
-            color: #1a2a4c;
-            background-color: #fdfaf4;
-            line-height: 1.6;
-            border-left: 3px solid #ffaaab;
-            padding: 30px;
+            font-family: 'Kalam', cursive; font-size: 20px; color: #1a2a4c;
+            background-color: #fdfaf4; line-height: 1.8;
+            background-image: linear-gradient(transparent 97%, #d8e2ee 98%);
+            background-size: 100% 36px;
+            border-left: 2px solid #ffaaab; padding-left: 4em;
             margin: 40px -30px -30px -30px;
-            min-height: 500px;
-        }
-        
-        .dissertation-paper h2 { 
-            font-size: 1.4em; 
-            text-align: center; 
-            margin-bottom: 24px;
-            font-weight: bold;
-            text-decoration: underline;
-        }
-        
-        .dissertation-paper h3 { 
-            font-size: 1.2em; 
-            margin-top: 32px; 
-            margin-bottom: 20px; 
-            text-transform: uppercase; 
-            text-decoration: underline;
-            font-weight: bold;
-        }
-        
-        .dissertation-paper .development-block { 
-            margin-top: 24px; 
-            margin-bottom: 24px;
-        }
-        
-        .dissertation-paper p { 
-            text-align: justify; 
-            margin-bottom: 16px;
-            padding-bottom: 8px;
-        }
-        
-        .dissertation-paper .prof { 
-            text-align: center; 
-            font-style: italic; 
-            margin-bottom: 24px;
-            font-size: 0.9em;
-        }
-        
-        .dissertation-paper .indented { 
-            text-indent: 2em; 
-        }
-        
-        .dissertation-paper .transition { 
-            margin-top: 20px; 
-            margin-bottom: 20px; 
-            font-style: italic; 
-            color: #4a6a9c;
-            font-weight: 500;
-        }
-        
-        .pdf-button-container { 
-            text-align: center; 
-            margin-top: 40px;
-        }
-        
-        .pdf-button { 
-            font-family: Arial, sans-serif; 
-            font-size: 16px; 
-            padding: 12px 24px; 
-            width: auto;
-            display: inline-block;
-            background-color: #27ae60;
-        }
-
-        .pdf-button:hover {
-            background-color: #2ecc71;
-        }
+            padding-top: 30px; padding-bottom: 30px; padding-right: 30px;
+        }
+        .dissertation-paper h2 { font-size: 1.5em; text-align: center; margin-bottom: 1.8em; }
+        .dissertation-paper h3 { font-size: 1.2em; margin-top: 3.6em; margin-bottom: 1.8em; text-transform: uppercase; text-decoration: underline; }
+        .dissertation-paper .development-block { margin-top: 3.6em; }
+        .dissertation-paper p { text-align: justify; margin: 0; padding: 0; }
+        .dissertation-paper .prof { text-align: center; font-style: italic; margin-bottom: 1.8em; }
+        .dissertation-paper .indented { text-indent: 3em; }
+        .dissertation-paper .transition { margin-top: 1.8em; margin-bottom: 1.8em; font-style: italic; color: #4a6a9c; }
+        .dissertation-paper .pdf-button-container { text-align: center; margin-top: 3.6em; }
+        .dissertation-paper .pdf-button { font-family: 'Lato', sans-serif; font-size: 16px; padding: 10px 20px; width: auto; }
     </style>
 </head>
 <body>
@@ -169,61 +92,36 @@
             form.addEventListener('submit', async (event) => {
                 event.preventDefault();
                 const question = document.getElementById('question').value.trim();
-
                 if (!question) {
                     showError("Veuillez entrer un sujet de dissertation.");
                     return;
                 }
 
-                simulateGeneration(question);
-            });
-
-            function simulateGeneration(question) {
                 submitBtn.disabled = true;
                 submitBtn.textContent = 'Génération en cours...';
                 loader.style.display = 'block';
                 resultContainer.innerHTML = '';
 
-                setTimeout(() => {
-                    const mockData = {
-                        sujet: question,
-                        prof: "M. Dupont",
-                        introduction: "L'introduction de cette dissertation explore les différentes dimensions du sujet proposé. Nous commençons par définir les termes clés et établir la problématique qui guidera notre réflexion. Cette question soulève des enjeux philosophiques fondamentaux que nous devrons examiner avec rigueur.",
-                        parties: [
-                            {
-                                chapeau: "Dans un premier temps, nous examinerons la dimension théorique de cette question.",
-                                arguments: [
-                                    {
-                                        paragraphe_argumentatif: "Premier argument : Cette perspective nous permet de comprendre les fondements conceptuels du problème. En effet, l'analyse théorique révèle des aspects souvent négligés dans l'approche commune de cette question."
-                                    },
-                                    {
-                                        paragraphe_argumentatif: "Deuxième argument : L'examen des sources philosophiques classiques nous éclaire sur les différentes interprétations possibles. Les penseurs comme Descartes, Kant ou Nietzsche ont chacun apporté des éléments de réponse qui méritent d'être confrontés."
-                                    }
-                                ],
-                                transition: "Cependant, cette approche théorique trouve ses limites, ce qui nous amène à considérer une perspective plus pratique."
-                            },
-                            {
-                                chapeau: "Dans un second temps, nous analyserons les implications pratiques et concrètes.",
-                                arguments: [
-                                    {
-                                        paragraphe_argumentatif: "L'expérience quotidienne nous confronte à des situations qui remettent en question les conclusions purement théoriques. La réalité vécue apporte une richesse d'exemples qui nuancent notre compréhension initiale."
-                                    },
-                                    {
-                                        paragraphe_argumentatif: "Les applications contemporaines de cette réflexion philosophique montrent l'actualité et la pertinence du questionnement. Dans notre société moderne, ces enjeux prennent une dimension particulière qu'il convient d'examiner."
-                                    }
-                                ]
-                            }
-                        ],
-                        conclusion: "En conclusion, cette dissertation a permis d'explorer les multiples facettes du sujet proposé. Nous avons vu que l'approche théorique, bien qu'essentielle, doit être complétée par une analyse pratique pour saisir toute la complexité de la question. Cette réflexion ouvre de nouvelles perspectives et invite à poursuivre l'investigation philosophique sur ces thèmes fondamentaux."
-                    };
-
-                    renderDissertation(mockData);
-                    
+                try {
+                    const response = await fetch('/api/generate_dissertation', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ question: question })
+                    });
+                    if (!response.ok) {
+                        const errorData = await response.json();
+                        throw new Error(errorData.error || "Une erreur inconnue est survenue.");
+                    }
+                    const data = await response.json();
+                    renderDissertation(data);
+                } catch (error) {
+                    showError(error.message);
+                } finally {
                     submitBtn.disabled = false;
                     submitBtn.textContent = 'Générer la dissertation';
                     loader.style.display = 'none';
-                }, 2000);
-            }
+                }
+            });
 
             function renderDissertation(data) {
                 let html = `
@@ -231,145 +129,65 @@
                         <h2>Sujet : ${data.sujet}</h2>
                         <p class="prof">Prof : ${data.prof}</p>
                         <h3>Introduction</h3>
-                        <p class="indented">${data.introduction}</p>
+                        <p class="indented">${data.introduction.replace(/\n/g, '<br>')}</p>
                 `;
-
-                data.parties.forEach((partie, index) => {
+                data.parties.forEach((partie) => {
                     html += `<div class="development-block">`;
-                    html += `<p class="indented">${partie.chapeau}</p>`;
+                    html += `<p class="indented">${partie.chapeau.replace(/\n/g, '<br>')}</p>`;
                     partie.arguments.forEach(arg => {
-                        html += `<p class="indented">${arg.paragraphe_argumentatif}</p>`;
+                        html += `<p class="indented">${arg.paragraphe_argumentatif.replace(/\n/g, '<br>')}</p>`;
                     });
                     html += `</div>`;
-
                     if (partie.transition) {
-                        html += `<p class="indented transition">${partie.transition}</p>`;
+                        html += `<p class="indented transition">${partie.transition.replace(/\n/g, '<br>')}</p>`;
                     }
                 });
-
                 html += `
                         <h3>Conclusion</h3>
-                        <p class="indented">${data.conclusion}</p>
-                    </div>
-                    <div class="pdf-button-container">
-                        <button class="pdf-button" id="download-pdf">Télécharger en PDF</button>
+                        <p class="indented">${data.conclusion.replace(/\n/g, '<br>')}</p>
+                        <div class="pdf-button-container">
+                            <button class="pdf-button" id="download-pdf">Télécharger en PDF</button>
+                        </div>
                     </div>
                 `;
-
                 resultContainer.innerHTML = html;
-
-                // Stocker les données pour le PDF
-                window.currentDissertation = data;
                 document.getElementById('download-pdf').addEventListener('click', generatePDF);
             }
 
             function generatePDF() {
-                const { jsPDF } = window.jspdf;
-                const doc = new jsPDF();
-                
-                const data = window.currentDissertation;
-                let yPosition = 20;
-                const lineHeight = 7;
-                const maxWidth = 180;
-                const margin = 15;
+                const element = document.getElementById('dissertation-content');
+                const pdfButtonContainer = element.querySelector('.pdf-button-container');
+                const pdfButton = element.querySelector('.pdf-button');
 
-                // Configuration des polices et styles
-                doc.setFont("times", "normal");
-                doc.setFontSize(12);
+                pdfButton.textContent = 'Préparation du PDF...';
+                pdfButton.disabled = true;
 
-                // Fonction pour ajouter du texte avec retour à la ligne automatique
-                function addText(text, x, y, fontSize = 12, style = "normal") {
-                    doc.setFontSize(fontSize);
-                    doc.setFont("times", style);
+                setTimeout(() => {
+                    pdfButtonContainer.style.display = 'none';
+                    const options = {
+                        margin: [0.5, 0.5, 0.5, 0.5], filename: 'dissertation-philosophie.pdf',
+                        image: { type: 'jpeg', quality: 0.98 },
+                        html2canvas:  { scale: 2, useCORS: true },
+                        jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
+                    };
                     
-                    const splitText = doc.splitTextToSize(text, maxWidth);
-                    doc.text(splitText, x, y);
-                    return y + (splitText.length * lineHeight);
-                }
-
-                // Fonction pour centrer du texte
-                function addCenteredText(text, y, fontSize = 12, style = "normal") {
-                    doc.setFontSize(fontSize);
-                    doc.setFont("times", style);
-                    const textWidth = doc.getTextWidth(text);
-                    const x = (doc.internal.pageSize.width - textWidth) / 2;
-                    doc.text(text, x, y);
-                    return y + lineHeight;
-                }
-
-                // Titre
-                yPosition = addCenteredText(`Sujet : ${data.sujet}`, yPosition, 16, "bold");
-                yPosition += 5;
-                yPosition = addCenteredText(`Prof : ${data.prof}`, yPosition, 10, "italic");
-                yPosition += 10;
-
-                // Introduction
-                yPosition = addText("INTRODUCTION", margin, yPosition, 14, "bold");
-                yPosition += 5;
-                yPosition = addText(`    ${data.introduction}`, margin, yPosition);
-                yPosition += 10;
-
-                // Parties
-                data.parties.forEach((partie, index) => {
-                    // Vérifier si on a besoin d'une nouvelle page
-                    if (yPosition > 250) {
-                        doc.addPage();
-                        yPosition = 20;
-                    }
-
-                    // Chapeau de partie
-                    yPosition = addText(`    ${partie.chapeau}`, margin, yPosition);
-                    yPosition += 5;
-
-                    // Arguments
-                    partie.arguments.forEach(arg => {
-                        if (yPosition > 250) {
-                            doc.addPage();
-                            yPosition = 20;
-                        }
-                        yPosition = addText(`    ${arg.paragraphe_argumentatif}`, margin, yPosition);
-                        yPosition += 5;
+                    html2pdf().set(options).from(element).save().then(() => {
+                        pdfButtonContainer.style.display = 'block';
+                        pdfButton.textContent = 'Télécharger en PDF';
+                        pdfButton.disabled = false;
+                    }).catch((err) => {
+                        console.error("Erreur lors de la génération du PDF :", err);
+                        showError("Une erreur est survenue lors de la création du PDF.");
+                        pdfButtonContainer.style.display = 'block';
+                        pdfButton.textContent = 'Télécharger en PDF';
+                        pdfButton.disabled = false;
                     });
-
-                    // Transition
-                    if (partie.transition) {
-                        if (yPosition > 250) {
-                            doc.addPage();
-                            yPosition = 20;
-                        }
-                        yPosition = addText(`    ${partie.transition}`, margin, yPosition, 12, "italic");
-                        yPosition += 10;
-                    }
-                });
-
-                // Conclusion
-                if (yPosition > 230) {
-                    doc.addPage();
-                    yPosition = 20;
-                }
-                yPosition = addText("CONCLUSION", margin, yPosition, 14, "bold");
-                yPosition += 5;
-                yPosition = addText(`    ${data.conclusion}`, margin, yPosition);
-
-                // Sauvegarder le PDF
-                doc.save('dissertation-philosophie.pdf');
-                showSuccess("PDF généré avec succès !");
+                }, 100);
             }
 
             function showError(message) {
                 resultContainer.innerHTML = `<p class="error">${message}</p>`;
             }
-
-            function showSuccess(message) {
-                const successDiv = document.createElement('div');
-                successDiv.className = 'success';
-                successDiv.textContent = message;
-                resultContainer.appendChild(successDiv);
-                
-                setTimeout(() => {
-                    successDiv.remove();
-                }, 3000);
-            }
         });
     </script>