Flasksite1

Sleeping

App Files Files Community

Docfile commited on Aug 27, 2025

Commit

d865223

verified ·

1 Parent(s): fc4bc7e

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +173 -139

templates/philosophie.html CHANGED Viewed

@@ -1,82 +1,87 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Assistant de Philosophie (Vue.js)</title>
   <script src="https://unpkg.com/vue@3/dist/vue.global.prod.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>
     :root {
-      --primary-color: #4f46e5; /* Indigo */
       --primary-hover: #4338ca;
-      --text-color: #374151; /* Gris foncé */
-      --background-color: #f8f9fa;
       --container-bg: #ffffff;
       --border-color: #e5e7eb;
     }
     body {
-      font-family: 'Lato', sans-serif;
       background-color: var(--background-color);
       margin: 0;
       padding: 2rem;
-      color: var(--text-color);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
     .container {
-      max-width: 960px;
       margin: 0 auto;
       background: var(--container-bg);
-      padding: 40px;
-      border-radius: 12px;
-      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;
-      font-weight: bold;
     }
     .form-group {
-        margin-bottom: 20px;
     }
     label {
         display: block;
-        margin-bottom: 8px;
-        font-weight: 700;
-        color: #4b5563;
     }
     textarea, .form-select {
       width: 100%;
-      padding: 15px;
-      border-radius: 8px;
       border: 1px solid var(--border-color);
-      min-height: 58px;
-      font-size: 16px;
-      line-height: 1.6;
-      transition: border-color 0.3s, box-shadow 0.3s;
-      background-color: #fff;
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
@@ -85,100 +90,104 @@
     .form-select {
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-      background-position: right 0.75rem center;
       background-repeat: no-repeat;
       background-size: 1.5em 1.5em;
-      padding-right: 2.5rem;
     }
     textarea {
-        min-height: 100px;
     }
     textarea:focus, .form-select:focus {
       outline: none;
       border-color: var(--primary-color);
-      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
     }
-    button {
-      display: block;
       box-sizing: border-box;
       width: 100%;
-      padding: 16px;
-      background-color: var(--primary-color);
-      color: white;
       border: none;
-      border-radius: 8px;
-      font-size: 18px;
       font-weight: 700;
       cursor: pointer;
-      transition: background-color 0.3s, transform 0.2s;
     }
-    button:hover:not(:disabled) {
       background-color: var(--primary-hover);
       transform: translateY(-2px);
     }
-    button:disabled {
       background-color: #9ca3af;
       cursor: not-allowed;
     }
     .download-container {
-        margin-top: 15px;
     }
     .secondary-button {
-        background-color: #f3f4f6;
-        color: #374151;
-        border: 1px solid #d1d5db;
     }
     .secondary-button:hover:not(:disabled) {
-        background-color: #e5e7eb;
-        border-color: #9ca3af;
     }
-    .loader {
-      display: block;
-      border: 8px solid #f3f3f3;
-      border-top: 8px solid var(--primary-color);
-      border-radius: 50%;
-      width: 50px;
-      height: 50px;
-      animation: spin 1s linear infinite;
-      margin: 30px auto;
-    }
-    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     .error {
       color: #ef4444;
       background-color: #fee2e2;
       text-align: center;
       margin-top: 20px;
       padding: 15px;
-      border-radius: 8px;
-      font-weight: bold;
     }
-    /* Styles de la feuille de dissertation */
-    .dissertation-paper {
-      font-family: 'Kalam', cursive;
-      font-size: 20px;
-      color: #1a2a4c;
-      background-color: #fdfaf4;
-      line-height: 2;
-      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;
-      -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; }
@@ -187,18 +196,17 @@
     .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; }
     .avoid-page-break { page-break-inside: avoid; break-inside: avoid; }
   </style>
 </head>
 <body>
   <div id="app" class="container">
-    <h1>Assistant de Dissertation Philosophique</h1>
-    <p class="type-indicator">Méthodologie : [[ dissertationTypeLabel ]]</p>
     <form @submit.prevent="generateDissertation">
       <div class="form-group">
-        <label for="dissertation-type">Choisir la méthodologie</label>
         <select id="dissertation-type" v-model="dissertationType" class="form-select">
             <option value="type1">Type 1 (Problématique en deux questions)</option>
             <option value="type2">Type 2 (Introduction autour d'une citation)</option>
@@ -206,7 +214,7 @@
       </div>
       <div class="form-group">
-        <label for="course-context">Choisir un cours comme contexte (optionnel)</label>
         <select id="course-context" v-model="selectedCourse" class="form-select">
           <option value="">-- Aucun cours en contexte --</option>
           <option v-for="course in courses" :key="course.id" :value="course.id">
@@ -216,29 +224,35 @@
       </div>
       <div class="form-group">
-        <label for="question">Entrez votre sujet de dissertation</label>
         <textarea id="question" v-model="question" placeholder="Entrez votre sujet ou la citation à analyser ici..."></textarea>
       </div>
-      <button type="submit" :disabled="isLoading">
         [[ isLoading ? 'Génération en cours...' : 'Générer la dissertation' ]]
       </button>
     </form>
     <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">
       <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">
           <p class="indented">[[ partie.chapeau ]]</p>
@@ -248,10 +262,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>
@@ -263,11 +275,14 @@
         return {
           question: '',
           dissertationType: 'type1',
-          courses: [], // Pour stocker la liste des cours
-          selectedCourse: '', // Pour stocker l'ID du cours sélectionné
           isLoading: false,
           errorMessage: null,
-          dissertation: null
         }
       },
       computed: {
@@ -276,22 +291,12 @@
         }
       },
       mounted() {
-        // Au chargement du composant, on récupère la liste des cours
         this.fetchCourses();
       },
       methods: {
-        async fetchCourses() {
-          try {
-            const response = await fetch('/api/philosophy/courses');
-            if (!response.ok) throw new Error('Impossible de charger les cours. Vérifiez la connexion à la base de données.');
-            const data = await response.json();
-            if (data.error) throw new Error(data.error);
-            this.courses = data;
-          } catch (error) {
-            this.errorMessage = error.message;
-            console.error("Erreur de chargement des cours:", error);
-          }
-        },
         async generateDissertation() {
           if (!this.question.trim()) {
             this.errorMessage = "Veuillez entrer un sujet de dissertation.";
@@ -300,6 +305,8 @@
           this.isLoading = true;
           this.errorMessage = null;
           this.dissertation = null;
           try {
             const response = await fetch('/api/generate_dissertation', {
               method: 'POST',
@@ -307,7 +314,7 @@
               body: JSON.stringify({
                 question: this.question,
                 type: this.dissertationType,
-                courseId: this.selectedCourse // On envoie l'ID du cours s��lectionné
               })
             });
             const data = await response.json();
@@ -318,47 +325,74 @@
           } catch (error) {
             this.errorMessage = error.message;
           } finally {
-            this.isLoading = false;
           }
         },
-        async generatePDF() {
-          const element = document.getElementById('dissertation-content');
-          if (!element) {
-            this.errorMessage = "Contenu introuvable pour le PDF.";
-            return;
           }
-          try {
-            if (document.fonts && 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,
-              },
               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.";
-          }
         }
-      }
-    });
-    // ⚠️ Changer les délimiteurs pour éviter le conflit avec Jinja2
     app.config.compilerOptions.delimiters = ['[[', ']]'];
     app.mount('#app');
   </script>
 </body>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Assistant de Philosophie Élégant</title>
   <script src="https://unpkg.com/vue@3/dist/vue.global.prod.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&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
   <style>
     :root {
+      --primary-color: #4f46e5;
       --primary-hover: #4338ca;
+      --text-color-dark: #111827;
+      --text-color-medium: #4b5563;
+      --text-color-light: #6b7280;
+      --background-color: #f7f8fc; /* Fond très légèrement bleuté */
       --container-bg: #ffffff;
       --border-color: #e5e7eb;
+      --input-bg: #f9fafb;
     }
     body {
+      font-family: 'Inter', sans-serif;
       background-color: var(--background-color);
       margin: 0;
       padding: 2rem;
+      color: var(--text-color-medium);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
     .container {
+      max-width: 800px; /* Un peu plus resserré pour l'élégance */
       margin: 0 auto;
       background: var(--container-bg);
+      padding: 48px;
+      border-radius: 24px;
+      box-shadow: 0 10px 30px -15px rgba(0,0,0,0.07);
+      border: 1px solid var(--border-color);
     }
     h1 {
       text-align: center;
+      color: var(--text-color-dark);
+      font-size: 2.25rem;
+      letter-spacing: -0.02em;
       margin-bottom: 0.5em;
     }
+    .subtitle {
       text-align: center;
+      color: var(--text-color-light);
+      font-size: 1.125rem;
+      margin-bottom: 3em;
     }
     .form-group {
+        margin-bottom: 1.75rem;
     }
     label {
         display: block;
+        margin-bottom: 0.75rem;
+        font-weight: 500;
+        font-size: 0.875rem;
+        color: var(--text-color-medium);
     }
     textarea, .form-select {
       width: 100%;
+      padding: 16px;
+      border-radius: 12px;
       border: 1px solid var(--border-color);
+      background-color: var(--input-bg);
+      font-size: 1rem;
+      line-height: 1.5;
+      color: var(--text-color-dark);
+      transition: border-color 0.2s, box-shadow 0.2s;
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
     .form-select {
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+      background-position: right 1rem center;
       background-repeat: no-repeat;
       background-size: 1.5em 1.5em;
+      padding-right: 3rem;
     }
     textarea {
+        min-height: 120px;
+        resize: vertical;
     }
     textarea:focus, .form-select:focus {
       outline: none;
       border-color: var(--primary-color);
+      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
     }
+    .main-button, .secondary-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
       box-sizing: border-box;
       width: 100%;
+      padding: 16px 24px;
       border: none;
+      border-radius: 12px;
+      font-size: 1rem;
       font-weight: 700;
       cursor: pointer;
+      transition: all 0.2s ease-in-out;
     }
+    .main-button {
+      background-color: var(--primary-color);
+      color: white;
+      box-shadow: 0 4px 14px -4px var(--primary-color);
+    }
+    .main-button:hover:not(:disabled) {
       background-color: var(--primary-hover);
       transform: translateY(-2px);
+      box-shadow: 0 6px 16px -4px var(--primary-color);
     }
+    .main-button:disabled {
       background-color: #9ca3af;
       cursor: not-allowed;
+      box-shadow: none;
     }
     .download-container {
+        margin-top: 1rem;
     }
     .secondary-button {
+        background-color: transparent;
+        color: var(--text-color-medium);
+        border: 1px solid var(--border-color);
     }
     .secondary-button:hover:not(:disabled) {
+        background-color: var(--input-bg);
+        border-color: #d1d5db;
+        color: var(--text-color-dark);
     }
     .error {
       color: #ef4444;
       background-color: #fee2e2;
       text-align: center;
       margin-top: 20px;
       padding: 15px;
+      border-radius: 12px;
+      font-weight: 500;
     }
+    /* NOUVEAU LOADER AVEC POURCENTAGE */
+    .progress-container {
+      width: 100%;
+      margin: 30px auto;
     }
+    .progress-bar {
+      height: 12px;
+      background-color: var(--primary-color);
+      border-radius: 6px;
+      width: 0%;
+      transition: width 0.4s ease-in-out;
+      box-shadow: 0 0 15px -2px rgba(79, 70, 229, 0.5);
+    }
+    .progress-text {
+      text-align: center;
+      margin-top: 0.75rem;
+      font-weight: 700;
+      color: var(--primary-color);
+      font-size: 0.875rem;
+    }
+    /* Styles de la feuille de dissertation (inchangés car c'est un style voulu) */
+    .dissertation-paper { font-family: 'Kalam', cursive; font-size: 20px; color: #1a2a4c; background-color: #fdfaf4; line-height: 2; background-image: linear-gradient(transparent 97%, #d8e2ee 98%); background-size: 100% 40px; border-left: 3px solid #ffaaab; padding-left: 4em; margin: 40px -48px -48px -48px; padding-top: 30px; padding-bottom: 40px; padding-right: 30px; border-radius: 0 0 24px 24px; -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 .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; }
     .avoid-page-break { page-break-inside: avoid; break-inside: avoid; }
   </style>
 </head>
 <body>
   <div id="app" class="container">
+    <h1>Assistant Philosophique</h1>
+    <p class="subtitle">Construisez une dissertation structurée en quelques instants.</p>
     <form @submit.prevent="generateDissertation">
       <div class="form-group">
+        <label for="dissertation-type">Méthodologie</label>
         <select id="dissertation-type" v-model="dissertationType" class="form-select">
             <option value="type1">Type 1 (Problématique en deux questions)</option>
             <option value="type2">Type 2 (Introduction autour d'une citation)</option>
       </div>
       <div class="form-group">
+        <label for="course-context">Contexte (optionnel)</label>
         <select id="course-context" v-model="selectedCourse" class="form-select">
           <option value="">-- Aucun cours en contexte --</option>
           <option v-for="course in courses" :key="course.id" :value="course.id">
       </div>
       <div class="form-group">
+        <label for="question">Sujet de la dissertation</label>
         <textarea id="question" v-model="question" placeholder="Entrez votre sujet ou la citation à analyser ici..."></textarea>
       </div>
+      <button type="submit" :disabled="isLoading" class="main-button">
+        <svg v-if="!isLoading" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.59a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
         [[ isLoading ? 'Génération en cours...' : 'Générer la dissertation' ]]
       </button>
     </form>
     <div v-if="dissertation" class="download-container" data-html2canvas-ignore="true">
+      <button class="secondary-button" @click="generatePDF">
+         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+        Télécharger en PDF
+      </button>
+    </div>
+    <!-- NOUVEAU BLOC DE CHARGEMENT -->
+    <div v-if="isLoading" class="progress-container">
+      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
+      <p class="progress-text">Analyse du sujet... [[ Math.round(progress) ]]%</p>
     </div>
     <p v-if="errorMessage" class="error">[[ errorMessage ]]</p>
     <div v-if="dissertation" id="dissertation-content" class="dissertation-paper">
       <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">
           <p class="indented">[[ partie.chapeau ]]</p>
         </div>
         <p v-if="partie.transition" class="indented transition">[[ partie.transition ]]</p>
       </div>
       <h3>Conclusion</h3>
       <p class="indented">[[ dissertation.conclusion ]]</p>
     </div>
   </div>
         return {
           question: '',
           dissertationType: 'type1',
+          courses: [],
+          selectedCourse: '',
           isLoading: false,
           errorMessage: null,
+          dissertation: null,
+          // Nouvelles données pour la barre de progression
+          progress: 0,
+          progressInterval: null
         }
       },
       computed: {
         }
       },
       mounted() {
         this.fetchCourses();
       },
       methods: {
+        async fetchCourses() { /* ... méthode inchangée ... */ },
+        // Méthode de génération MISE À JOUR avec la logique de progression
         async generateDissertation() {
           if (!this.question.trim()) {
             this.errorMessage = "Veuillez entrer un sujet de dissertation.";
           this.isLoading = true;
           this.errorMessage = null;
           this.dissertation = null;
+          this.startProgressSimulation();
           try {
             const response = await fetch('/api/generate_dissertation', {
               method: 'POST',
               body: JSON.stringify({
                 question: this.question,
                 type: this.dissertationType,
+                courseId: this.selectedCourse
               })
             });
             const data = await response.json();
           } catch (error) {
             this.errorMessage = error.message;
           } finally {
+            this.finishProgressSimulation();
           }
         },
+        // NOUVELLES MÉTHODES pour gérer la simulation de la progression
+        startProgressSimulation() {
+          this.progress = 0;
+          clearInterval(this.progressInterval); // Sécurité
+          this.progressInterval = setInterval(() => {
+            if (this.progress < 95) { // Ne jamais atteindre 100% tout seul
+              const increment = Math.random() * 5;
+              this.progress = Math.min(this.progress + increment, 95);
+            }
+          }, 400); // Mettre à jour toutes les 400ms
+        },
+        finishProgressSimulation() {
+          clearInterval(this.progressInterval);
+          // Si la requête a réussi, on va à 100% puis on cache la barre
+          if(this.dissertation) {
+            this.progress = 100;
+            setTimeout(() => {
+              this.isLoading = false;
+            }, 500); // Laisser le temps à l'utilisateur de voir les 100%
+          } else {
+            // S'il y a eu une erreur, on cache directement
+            this.isLoading = false;
           }
+        },
+        async generatePDF() { /* ... méthode inchangée ... */ }
+      }
+    });
+    // Pour la simplicité, les méthodes fetchCourses et generatePDF sont omises ici
+    // mais elles doivent être copiées depuis votre version précédente.
+    // Voici les versions complètes pour être sûr.
+    const originalMethods = app.config.globalProperties;
+    originalMethods.fetchCourses = async function() {
+        try {
+            const response = await fetch('/api/philosophy/courses');
+            if (!response.ok) throw new Error('Impossible de charger les cours.');
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            this.courses = data;
+        } catch (error) {
+            this.errorMessage = error.message;
+        }
+    };
+    originalMethods.generatePDF = async function() {
+        const element = document.getElementById('dissertation-content');
+        if (!element) return;
+        try {
+            if (document.fonts && 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 },
               jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
             };
             await html2pdf().set(options).from(element).save();
+        } catch (err) {
+            this.errorMessage = "Erreur lors de la génération du PDF.";
         }
+    };
     app.config.compilerOptions.delimiters = ['[[', ']]'];
     app.mount('#app');
   </script>
 </body>