Flasksite1

Running

App Files Files Community

Docfile commited on 4 days ago

Commit

be583ae

verified ·

1 Parent(s): a8ee996

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +175 -127

templates/philosophie.html CHANGED Viewed

@@ -1,141 +1,189 @@
 <!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"></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>
-        /* Les styles CSS restent identiques, pas besoin de les modifier */
-        body { font-family: 'Lato', sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; color: #333; }
-        .container { max-width: 900px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
-        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; }
-        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; }
-        button:hover { background-color: #3498db; }
-        button:disabled { background-color: #95a5a6; cursor: not-allowed; }
-        .loader { display: block; 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; font-weight: bold; }
-        .dissertation-paper { 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; 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>
-    <div id="app" class="container">
-        {% raw %}
-        <!-- Le contenu de l'application Vue commence ici -->
-        <h1>Assistant de Dissertation Philosophique</h1>
-        <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>
-        <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">
-                <div class="development-block">
-                    <p class="indented">{{ partie.chapeau }}</p>
-                    <p v-for="arg in partie.arguments" :key="arg.paragraphe_argumentatif" 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 class="pdf-button-container" data-html2canvas-ignore="true">
-                <button class="pdf-button" @click="generatePDF">Télécharger en PDF</button>
-            </div>
         </div>
-        <!-- Le contenu de l'application Vue se termine ici -->
-        {% endraw %}
     </div>
-    <script>
-        const { createApp } = Vue;
-        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;
-                    }
-                },
-                generatePDF() {
-                    const element = document.getElementById('dissertation-content');
-                    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' }
-                    };
-                    html2pdf().set(options).from(element).save();
-                }
             }
-        }).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"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+  <!-- Ajout du crossorigin pour aider le chargement des fonts dans html2canvas -->
+  <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" crossorigin="anonymous">
+  <style>
+    body { font-family: 'Lato', sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; color: #333; }
+    .container { max-width: 900px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
+    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; }
+    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; }
+    button:hover { background-color: #3498db; }
+    button:disabled { background-color: #95a5a6; cursor: not-allowed; }
+    .loader { display: block; 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; font-weight: bold; }
+    /* Paper style */
+    .dissertation-paper {
+      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;
+      padding-top: 30px;
+      padding-bottom: 30px;
+      padding-right: 30px;
+      /* for better printing */
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+      -webkit-font-smoothing: antialiased;
+      /* Force white background for canvas capture (avoid transparent PNG-like issues) */
+      background-clip: padding-box;
+    }
+    .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; }
+    /* Evite que des blocs soient cassés au mauvais endroit */
+    .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">
+    <!-- contenu Vue -->
+    <h1>Assistant de Dissertation Philosophique</h1>
+    <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>
+    <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 class="pdf-button-container" data-html2canvas-ignore="true">
+        <!-- data-html2canvas-ignore empêchera le bouton d'être rendu dans le canvas -->
+        <button class="pdf-button" @click="generatePDF">Télécharger en PDF</button>
+      </div>
     </div>
+    <!-- fin contenu Vue -->
+  </div>
+  <script>
+    const { createApp } = Vue;
+    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;
+            // petit timeout facultatif pour s'assurer que le DOM est posé
+            await new Promise(r => setTimeout(r, 50));
+          } 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 {
+            // attendre que les polices web soient chargées (important pour html2canvas)
+            if (document.fonts && document.fonts.ready) {
+              await document.fonts.ready;
             }
+            // mettre la page en haut (prévenir offset / découpage)
+            window.scrollTo(0, 0);
+            const options = {
+              margin: [10, 10, 10, 10], // mm
+              filename: 'dissertation-philosophie.pdf',
+              image: { type: 'jpeg', quality: 0.98 },
+              html2canvas: {
+                scale: 2,
+                useCORS: true,
+                logging: true,
+                backgroundColor: '#ffffff' // important si l'élément a un fond semi-transparent
+              },
+              jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+            };
+            // génération
+            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. Vérifiez la console pour plus de détails (CORS / ressources externes).";
+          }
+        }
+      }
+    }).mount('#app');
+  </script>
 </body>
 </html>