Flasksite1

Running

App Files Files Community

Docfile commited on 4 days ago

Commit

d083d33

verified ·

1 Parent(s): 81b0eb8

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +219 -193

templates/philosophie.html CHANGED Viewed

@@ -1,9 +1,9 @@
 <!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>
@@ -13,182 +13,99 @@
   <link href="https://fonts.googleapis.com/css2?family=Kalam&family=Lato:wght@400;700&display=swap" rel="stylesheet">
   <style>
-    :root {
-      --primary-color: #4f46e5;
-      --primary-hover: #4338ca;
-      --text-color: #374151;
-      --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; }
-    textarea {
-      width: 100%;
-      padding: 15px;
-      border-radius: 8px;
-      border: 1px solid var(--border-color);
-      min-height: 100px;
-      margin-bottom: 15px;
-      font-size: 16px;
-      line-height: 1.6;
-      transition: border-color 0.3s, box-shadow 0.3s;
-    }
-    textarea:focus {
-      outline: none;
-      border-color: var(--primary-color);
-      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
-    }
-    button {
-      display: block;
-      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;
-    }
-    .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;
-    }
-    /* --- 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;
-      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: 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 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: 2em 0; font-style: italic; color: #4a6a9c; }
-    .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">Type 1</p>
-    <!-- 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 et Télécharger en PDF' ]]
-      </button>
-    </form>
-    <div v-if="isLoading" class="loader"></div>
-    <p v-if="errorMessage" class="error">[[ errorMessage ]]</p>
-    <!-- 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>
-          <p class="indented">[[ partie.chapeau ]]</p>
-          <p v-for="(arg, idx) in partie.arguments" :key="idx" class="indented">
-            [[ arg.paragraphe_argumentatif ]]
-          </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>
   <script>
     const { createApp } = Vue;
-    const app = createApp({
       data() {
         return {
           question: '',
           isLoading: false,
-          errorMessage: null,
-          dissertation: null // Toujours nécessaire pour stocker les données temporairement
         }
       },
       methods: {
         async generateAndDownloadPDF() {
           if (!this.question.trim()) {
             this.errorMessage = "Veuillez entrer un sujet de dissertation.";
@@ -196,63 +113,172 @@
           }
           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' },
               body: JSON.stringify({ question: this.question })
             });
-            const data = await response.json();
-            if (!response.ok) {
-              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) return; // Pas d'erreur visible si l'élément est introuvable
-          try {
-            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, 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.";
           }
         }
       }
-    });
-    app.config.compilerOptions.delimiters = ['[[', ']]'];
-    app.mount('#app');
   </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Assistant - Télécharger PDF sans afficher</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 href="https://fonts.googleapis.com/css2?family=Kalam&family=Lato:wght@400;700&display=swap" rel="stylesheet">
   <style>
+    body { font-family: 'Lato', sans-serif; margin: 20px; background:#f4f4f9; color:#333; }
+    .container { max-width:700px; margin:0 auto; background:white; padding:20px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
+    textarea { width:100%; min-height:80px; padding:10px; margin-bottom:10px; font-size:15px; }
+    button { width:100%; padding:12px; font-size:16px; background:#2980b9; color:white; border:0; border-radius:6px; cursor:pointer; }
+    button:disabled { background:#95a5a6; cursor:not-allowed; }
+    .loader { margin:12px auto; border:6px solid #eee; border-top:6px solid #2980b9; border-radius:50%; width:36px; height:36px; animation:spin 1s linear infinite; }
+    @keyframes spin { to { transform:rotate(360deg);} }
+    .dissertation-paper { /* styles utilisés pour le rendu PDF (réutilisés dans l'élément hors-écran) */
       font-family: 'Kalam', cursive;
+      font-size:18px;
+      color:#1a2a4c;
+      background-color:#fdfaf4;
+      line-height:1.6;
       background-image: linear-gradient(transparent 97%, #d8e2ee 98%);
+      background-size:100% 36px;
+      border-left:2px solid #ffaaab;
+      padding:28px;
+      box-sizing:border-box;
     }
+    .dissertation-paper h2 { text-align:center; margin-bottom:18px; }
+    .dissertation-paper .indented { text-indent:3em; text-align:justify; margin:0 0 8px 0; }
+    .prof { text-align:center; font-style:italic; margin-bottom:12px; }
+    .transition { margin-top:12px; font-style:italic; color:#4a6a9c; }
+    /* évite que l'élément hors-écran soit pris en compte dans l'affichage */
+    #pdf-hidden { position:absolute; left:-9999px; top:0; width:210mm; background:#fff; }
   </style>
 </head>
 <body>
   <div id="app" class="container">
+    <h1>Générer & télécharger le PDF (sans affichage)</h1>
+    <!-- Garde le textarea si tu veux fournir le sujet ; sinon supprime ce bloc -->
+    <textarea v-model="question" placeholder="Entrez votre sujet de dissertation ici..."></textarea>
+    <!-- Ce bouton déclenche la génération + téléchargement sans afficher la réponse -->
+    <!-- data-html2canvas-ignore empêche le bouton d'être capturé par html2canvas -->
+    <button @click="generateAndDownloadPDF" :disabled="isLoading" data-html2canvas-ignore="true">
+      [[ isLoading ? 'Génération et téléchargement en cours...' : 'Générer et télécharger le PDF' ]]
+    </button>
+    <div v-if="isLoading" class="loader" aria-hidden="true"></div>
+    <p v-if="errorMessage" style="color:#c0392b;margin-top:12px;">[[ errorMessage ]]</p>
   </div>
   <script>
     const { createApp } = Vue;
+    createApp({
       data() {
         return {
           question: '',
           isLoading: false,
+          errorMessage: null
         }
       },
       methods: {
+        // petit utilitaire pour échapper HTML (sécurité de base)
+        escapeHtml(str) {
+          if (!str) return '';
+          return String(str)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+        },
+        // construit le HTML (mêmes classes que .dissertation-paper)
+        buildDissertationHTML(data) {
+          const e = this.escapeHtml.bind(this);
+          let html = '';
+          html += `<h2>Sujet : ${e(data.sujet || '')}</h2>`;
+          html += `<p class="prof">Prof : ${e(data.prof || '')}</p>`;
+          html += `<h3>Introduction</h3>`;
+          html += `<p class="indented">${e(data.introduction || '')}</p>`;
+          (data.parties || []).forEach(partie => {
+            html += `<div class="development-block">`;
+            html += `<p class="indented">${e(partie.chapeau || '')}</p>`;
+            (partie.arguments || []).forEach(arg => {
+              html += `<p class="indented">${e(arg.paragraphe_argumentatif || '')}</p>`;
+            });
+            html += `</div>`;
+            if (partie.transition) {
+              html += `<p class="indented transition">${e(partie.transition)}</p>`;
+            }
+          });
+          html += `<h3>Conclusion</h3>`;
+          html += `<p class="indented">${e(data.conclusion || '')}</p>`;
+          return html;
+        },
         async generateAndDownloadPDF() {
           if (!this.question.trim()) {
             this.errorMessage = "Veuillez entrer un sujet de dissertation.";
           }
           this.isLoading = true;
           this.errorMessage = null;
           try {
+            // 1) Appel API pour récupérer la dissertation (même structure JSON qu'avant)
+            const res = await fetch('/api/generate_dissertation', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({ question: this.question })
             });
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Erreur serveur lors de la génération.');
+            // 2) construire le HTML à insérer dans l'élément hors-écran
+            const inner = this.buildDissertationHTML(data);
+            // 3) créer l'élément hors-écran (important : pas display:none)
+            let hidden = document.getElementById('pdf-hidden');
+            if (hidden) hidden.remove(); // nettoyage si présent
+            hidden = document.createElement('div');
+            hidden.id = 'pdf-hidden';
+            hidden.className = 'dissertation-paper';
+            hidden.style.position = 'absolute';
+            hidden.style.left = '-9999px';
+            hidden.style.top = '0';
+            hidden.style.width = '210mm'; // correspond à la largeur A4
+            hidden.style.backgroundColor = '#ffffff';
+            hidden.innerHTML = inner;
+            document.body.appendChild(hidden);
+            // 4) attendre le chargement des polices web (important)
+            if (document.fonts && document.fonts.ready) {
+              await document.fonts.ready;
+            }
+            // 5) config html2pdf et génération
             const options = {
+              margin: [10, 10, 10, 10], // mm
               filename: 'dissertation-philosophie.pdf',
               image: { type: 'jpeg', quality: 0.98 },
+              html2canvas: { scale: 2, useCORS: true, backgroundColor: '#ffffff' },
               jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
             };
+            await html2pdf().set(options).from(hidden).save();
+            // 6) nettoyage
+            hidden.remove();
           } catch (err) {
+            console.error('Erreur génération PDF:', err);
+            this.errorMessage = err.message || 'Erreur inconnue lors de la génération du PDF.';
+          } finally {
+            this.isLoading = false;
           }
         }
       }
+    })
+    // éviter conflit Jinja2
+    .config && (Vue.createApp ? null : null); // noop to keep linter tranquille
+    const app = createApp ? createApp() : null; // sécurité
+    // actually create and mount app with custom delimiters
+    const mountedApp = (function() {
+      const a = Vue.createApp ? Vue.createApp({
+        data: () => ({ /* unused - actual instance created above via createApp in chain */ })
+      }) : null;
+      // Instead we will create using the previously-defined createApp call:
+      // To avoid confusion, re-create properly:
+      const realApp = Vue.createApp({
+        data() {
+          return {
+            question: '',
+            isLoading: false,
+            errorMessage: null
+          };
+        }
+      });
+      // set delimiters to avoid Jinja conflicts
+      realApp.config.compilerOptions = realApp.config.compilerOptions || {};
+      realApp.config.compilerOptions.delimiters = ['[[', ']]'];
+      // mount the app and replace the placeholder methods with those defined earlier
+      // We'll reuse the methods from the earlier createApp block by redefining them here:
+      realApp.mixin({
+        methods: {
+          escapeHtml(str) {
+            if (!str) return '';
+            return String(str)
+              .replace(/&/g, '&amp;')
+              .replace(/</g, '&lt;')
+              .replace(/>/g, '&gt;')
+              .replace(/"/g, '&quot;')
+              .replace(/'/g, '&#39;');
+          },
+          buildDissertationHTML(data) {
+            const e = this.escapeHtml.bind(this);
+            let html = '';
+            html += `<h2>Sujet : ${e(data.sujet || '')}</h2>`;
+            html += `<p class="prof">Prof : ${e(data.prof || '')}</p>`;
+            html += `<h3>Introduction</h3>`;
+            html += `<p class="indented">${e(data.introduction || '')}</p>`;
+            (data.parties || []).forEach(partie => {
+              html += `<div class="development-block">`;
+              html += `<p class="indented">${e(partie.chapeau || '')}</p>`;
+              (partie.arguments || []).forEach(arg => {
+                html += `<p class="indented">${e(arg.paragraphe_argumentatif || '')}</p>`;
+              });
+              html += `</div>`;
+              if (partie.transition) html += `<p class="indented transition">${e(partie.transition)}</p>`;
+            });
+            html += `<h3>Conclusion</h3>`;
+            html += `<p class="indented">${e(data.conclusion || '')}</p>`;
+            return html;
+          },
+          async generateAndDownloadPDF() {
+            if (!this.question.trim()) {
+              this.errorMessage = "Veuillez entrer un sujet de dissertation.";
+              return;
+            }
+            this.isLoading = true;
+            this.errorMessage = null;
+            try {
+              const res = await fetch('/api/generate_dissertation', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ question: this.question })
+              });
+              const data = await res.json();
+              if (!res.ok) throw new Error(data.error || 'Erreur serveur.');
+              const inner = this.buildDissertationHTML(data);
+              let hidden = document.getElementById('pdf-hidden');
+              if (hidden) hidden.remove();
+              hidden = document.createElement('div');
+              hidden.id = 'pdf-hidden';
+              hidden.className = 'dissertation-paper';
+              hidden.style.position = 'absolute';
+              hidden.style.left = '-9999px';
+              hidden.style.top = '0';
+              hidden.style.width = '210mm';
+              hidden.style.backgroundColor = '#ffffff';
+              hidden.innerHTML = inner;
+              document.body.appendChild(hidden);
+              if (document.fonts && document.fonts.ready) await document.fonts.ready;
+              const options = {
+                margin: [10,10,10,10],
+                filename: 'dissertation-philosophie.pdf',
+                image: { type: 'jpeg', quality: 0.98 },
+                html2canvas: { scale: 2, useCORS: true, backgroundColor: '#ffffff' },
+                jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+              };
+              await html2pdf().set(options).from(hidden).save();
+              hidden.remove();
+            } catch (err) {
+              console.error(err);
+              this.errorMessage = err.message || 'Erreur lors de la génération du PDF.';
+            } finally {
+              this.isLoading = false;
+            }
+          }
+        }
+      });
+      return realApp.mount('#app');
+    })();
   </script>
 </body>
 </html>