Spaces:
Sleeping
Sleeping
| <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> |