Update templates/philosophie.html

templates/philosophie.html

@@ -14,9 +14,9 @@
 
   <style>
     :root {
-      --primary-color: #4f46e5; /* Indigo */
+      --primary-color: #4f46e5;
       --primary-hover: #4338ca;
-      --text-color: #374151; /* Gris foncé */
+      --text-color: #374151;
       --background-color: #f8f9fa;
       --container-bg: #ffffff;
       --border-color: #e5e7eb;
@@ -41,18 +41,8 @@
       box-shadow: 0 6px 20px rgba(0,0,0,0.08);
     }
 
-    h1 {
-      text-align: center;
-      color: #111827;
-      margin-bottom: 0.5em;
-    }
-
-    .type-indicator {
-      text-align: center;
-      color: #6b7280;
-      font-size: 1.1em;
-      margin-bottom: 2em;
-    }
+    h1 { text-align: center; color: #111827; margin-bottom: 0.5em; }
+    .type-indicator { text-align: center; color: #6b7280; font-size: 1.1em; margin-bottom: 2em; }
 
     textarea {
       width: 100%;
@@ -74,7 +64,6 @@
 
     button {
       display: block;
-      box-sizing: border-box;
       width: 100%;
       padding: 16px;
       background-color: var(--primary-color);
@@ -96,20 +85,6 @@
       background-color: #9ca3af;
       cursor: not-allowed;
     }
-    
-    /* Style pour le bouton de téléchargement */
-    .download-container {
-        margin-top: 15px;
-    }
-    .secondary-button {
-        background-color: #f3f4f6; /* Gris clair */
-        color: #374151; /* Texte foncé */
-        border: 1px solid #d1d5db; /* Bordure subtile */
-    }
-    .secondary-button:hover:not(:disabled) {
-        background-color: #e5e7eb; /* Gris plus foncé au survol */
-        border-color: #9ca3af;
-    }
 
     .loader {
       display: block;
@@ -133,7 +108,16 @@
       font-weight: bold;
     }
 
-    /* Styles de la feuille de dissertation */
+    /* --- NOUVEAU : Style pour cacher le contenu --- */
+    /* On le rend, mais on le place hors de l'écran pour que html2pdf puisse le lire */
+    .hidden-for-pdf {
+      position: absolute;
+      left: -9999px;
+      top: -9999px;
+      width: 800px; /* Largeur fixe pour aider au rendu PDF */
+    }
+
+    /* Styles de la feuille de dissertation (conservés pour le rendu PDF) */
     .dissertation-paper {
       font-family: 'Kalam', cursive;
       font-size: 20px;
@@ -143,23 +127,16 @@
       background-image: linear-gradient(transparent 97%, #d8e2ee 98%);
       background-size: 100% 40px;
       border-left: 3px solid #ffaaab;
-      padding-left: 4em;
-      margin: 40px -40px -40px -40px;
-      padding-top: 30px;
-      padding-bottom: 40px;
-      padding-right: 30px;
+      padding: 30px 30px 40px 4em;
       -webkit-print-color-adjust: exact;
       print-color-adjust: exact;
     }
     .dissertation-paper h2 { font-size: 1.5em; text-align: center; margin-bottom: 1.5em; }
     .dissertation-paper h3 { font-size: 1.2em; margin-top: 3em; margin-bottom: 1.5em; text-transform: uppercase; text-decoration: underline; }
-    .dissertation-paper .development-block { margin-top: 3em; }
     .dissertation-paper p { text-align: justify; margin: 0; padding: 0; }
     .dissertation-paper .prof { text-align: center; font-style: italic; margin-bottom: 2em; }
     .dissertation-paper .indented { text-indent: 3em; }
-    .dissertation-paper .transition { margin-top: 2em; margin-bottom: 2em; font-style: italic; color: #4a6a9c; }
-    .dissertation-paper, .dissertation-paper * { box-sizing: border-box; }
-    
+    .dissertation-paper .transition { margin: 2em 0; font-style: italic; color: #4a6a9c; }
     .avoid-page-break { page-break-inside: avoid; break-inside: avoid; }
   </style>
 </head>
@@ -168,31 +145,25 @@
     <h1>Assistant de Dissertation Philosophique</h1>
     <p class="type-indicator">Type 1</p>
 
-    <form @submit.prevent="generateDissertation">
+    <!-- Le formulaire appelle maintenant la nouvelle méthode -->
+    <form @submit.prevent="generateAndDownloadPDF">
       <textarea v-model="question" placeholder="Entrez votre sujet de dissertation ici..."></textarea>
       <button type="submit" :disabled="isLoading">
-        [[ isLoading ? 'Génération en cours...' : 'Générer la dissertation' ]]
+        [[ isLoading ? 'Génération en cours...' : 'Générer et Télécharger en PDF' ]]
       </button>
     </form>
 
-    <!-- NOUVEL EMPLACEMENT DU BOUTON PDF -->
-    <div v-if="dissertation" class="download-container" data-html2canvas-ignore="true">
-      <button class="secondary-button" @click="generatePDF">Télécharger la dissertation en PDF</button>
-    </div>
-
     <div v-if="isLoading" class="loader"></div>
     <p v-if="errorMessage" class="error">[[ errorMessage ]]</p>
 
-    <div v-if="dissertation" id="dissertation-content" class="dissertation-paper">
-      
+    <!-- CE BLOC SERA RENDU MAIS RESTERA INVISIBLE POUR L'UTILISATEUR -->
+    <div v-if="dissertation" id="dissertation-content" class="dissertation-paper hidden-for-pdf">
       <h2>Sujet : [[ dissertation.sujet ]]</h2>
       <p class="prof">Prof : [[ dissertation.prof ]]</p>
-
       <h3>Introduction</h3>
       <p class="indented">[[ dissertation.introduction ]]</p>
-
       <div v-for="partie in dissertation.parties" :key="partie.chapeau" class="avoid-page-break">
-        <div class="development-block">
+        <div>
           <p class="indented">[[ partie.chapeau ]]</p>
           <p v-for="(arg, idx) in partie.arguments" :key="idx" class="indented">
             [[ arg.paragraphe_argumentatif ]]
@@ -200,10 +171,8 @@
         </div>
         <p v-if="partie.transition" class="indented transition">[[ partie.transition ]]</p>
       </div>
-
       <h3>Conclusion</h3>
       <p class="indented">[[ dissertation.conclusion ]]</p>
-
     </div>
   </div>
 
@@ -216,11 +185,11 @@
           question: '',
           isLoading: false,
           errorMessage: null,
-          dissertation: null
+          dissertation: null // Toujours nécessaire pour stocker les données temporairement
         }
       },
       methods: {
-        async generateDissertation() {
+        async generateAndDownloadPDF() {
           if (!this.question.trim()) {
             this.errorMessage = "Veuillez entrer un sujet de dissertation.";
             return;
@@ -228,7 +197,9 @@
           this.isLoading = true;
           this.errorMessage = null;
           this.dissertation = null;
+
           try {
+            // 1. Récupérer les données de la dissertation
             const response = await fetch('/api/generate_dissertation', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
@@ -239,50 +210,48 @@
               throw new Error(data.error || "Une erreur inconnue est survenue.");
             }
             this.dissertation = data;
+
+            // 2. Attendre que Vue mette à jour le DOM avec le contenu caché
+            await this.$nextTick();
+            
+            // 3. Générer le PDF à partir du contenu maintenant présent (mais caché)
+            await this.generatePDF();
+
           } catch (error) {
             this.errorMessage = error.message;
           } finally {
             this.isLoading = false;
+            // 4. (Optionnel) Nettoyer les données pour retirer l'élément caché du DOM
+            this.dissertation = null;
           }
         },
 
         async generatePDF() {
           const element = document.getElementById('dissertation-content');
-          if (!element) {
-            this.errorMessage = "Contenu introuvable pour le PDF.";
-            return;
-          }
+          if (!element) return; // Pas d'erreur visible si l'élément est introuvable
+
           try {
-            if (document.fonts && document.fonts.ready) {
-              await document.fonts.ready;
-            }
+            await document.fonts.ready;
             window.scrollTo(0, 0);
 
             const options = {
               margin: [15, 15, 15, 15],
               filename: 'dissertation-philosophie.pdf',
               image: { type: 'jpeg', quality: 0.98 },
-              html2canvas: {
-                scale: 2,
-                useCORS: true,
-                logging: true,
-                backgroundColor: null,
-              },
+              html2canvas: { scale: 2, useCORS: true, backgroundColor: null },
               jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
             };
 
             await html2pdf().set(options).from(element).save();
           } catch (err) {
             console.error('Erreur html2pdf:', err);
-            this.errorMessage = "Erreur lors de la génération du PDF. Voir la console pour les détails.";
+            this.errorMessage = "Erreur lors de la génération du PDF. Voir la console.";
           }
         }
       }
     });
 
-    // ⚠️ Changer les délimiteurs pour éviter le conflit avec Jinja2
     app.config.compilerOptions.delimiters = ['[[', ']]'];
-
     app.mount('#app');
   </script>
 </body>