Flasksite1

Running

App Files Files Community

Docfile commited on 4 days ago

Commit

5064228

verified ·

1 Parent(s): d083d33

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +224 -219

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" />
-  <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>
@@ -13,272 +13,277 @@
   <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.";
             return;
           }
           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>

 <!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 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;
+    }
+    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;
+      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;
+    }
+    /* 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;
+      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; }
+    .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; }
+    .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>
+    <form @submit.prevent="generateDissertation">
+      <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' ]]
+      </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">
+      <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>
+          <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
         }
       },
       methods: {
+        async generateDissertation() {
           if (!this.question.trim()) {
             this.errorMessage = "Veuillez entrer un sujet de dissertation.";
             return;
           }
           this.isLoading = true;
           this.errorMessage = null;
+          this.dissertation = null;
           try {
+            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;
+          } 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>
 </html>