Spaces:
Running
Running
| <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; | |
| --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."; | |
| return; | |
| } | |
| 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> |