Spaces:
Sleeping
Sleeping
Update templates/philosophie.html
Browse files- templates/philosophie.html +12 -31
templates/philosophie.html
CHANGED
|
@@ -5,17 +5,15 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Assistant de Philosophie (Vue.js)</title>
|
| 7 |
|
| 8 |
-
<!-- Importation de Vue.js et html2pdf.js via CDN -->
|
| 9 |
<script src="https://unpkg.com/vue@3"></script>
|
| 10 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
| 11 |
|
| 12 |
-
<!-- Importation des polices -->
|
| 13 |
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 14 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 15 |
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Lato:wght@400;700&display=swap" rel="stylesheet">
|
| 16 |
|
| 17 |
<style>
|
| 18 |
-
/* Les styles CSS
|
| 19 |
body { font-family: 'Lato', sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; color: #333; }
|
| 20 |
.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); }
|
| 21 |
h1 { text-align: center; color: #2c3e50; }
|
|
@@ -40,27 +38,23 @@
|
|
| 40 |
</head>
|
| 41 |
<body>
|
| 42 |
|
| 43 |
-
<!-- L'application Vue est montée sur cet élément -->
|
| 44 |
<div id="app" class="container">
|
|
|
|
|
|
|
|
|
|
| 45 |
<h1>Assistant de Dissertation Philosophique</h1>
|
| 46 |
|
| 47 |
-
<!-- Le formulaire est maintenant géré par Vue -->
|
| 48 |
<form @submit.prevent="generateDissertation">
|
| 49 |
<textarea v-model="question" placeholder="Entrez votre sujet de dissertation ici..."></textarea>
|
| 50 |
|
| 51 |
-
<!-- Le bouton est désactivé et son texte change en fonction de l'état 'isLoading' -->
|
| 52 |
<button type="submit" :disabled="isLoading">
|
| 53 |
{{ isLoading ? 'Génération en cours...' : 'Générer la dissertation' }}
|
| 54 |
</button>
|
| 55 |
</form>
|
| 56 |
|
| 57 |
-
<!-- Affiche le loader si 'isLoading' est vrai -->
|
| 58 |
<div v-if="isLoading" class="loader"></div>
|
| 59 |
-
|
| 60 |
-
<!-- Affiche un message d'erreur s'il y en a un -->
|
| 61 |
<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
|
| 62 |
|
| 63 |
-
<!-- Le rendu de la dissertation n'apparaît que si l'objet 'dissertation' existe -->
|
| 64 |
<div v-if="dissertation" id="dissertation-content" class="dissertation-paper">
|
| 65 |
<h2>Sujet : {{ dissertation.sujet }}</h2>
|
| 66 |
<p class="prof">Prof : {{ dissertation.prof }}</p>
|
|
@@ -68,11 +62,9 @@
|
|
| 68 |
<h3>Introduction</h3>
|
| 69 |
<p class="indented">{{ dissertation.introduction }}</p>
|
| 70 |
|
| 71 |
-
<!-- On boucle sur les parties avec v-for -->
|
| 72 |
<div v-for="partie in dissertation.parties" :key="partie.chapeau">
|
| 73 |
<div class="development-block">
|
| 74 |
<p class="indented">{{ partie.chapeau }}</p>
|
| 75 |
-
<!-- On boucle sur les arguments de chaque partie -->
|
| 76 |
<p v-for="arg in partie.arguments" :key="arg.paragraphe_argumentatif" class="indented">
|
| 77 |
{{ arg.paragraphe_argumentatif }}
|
| 78 |
</p>
|
|
@@ -87,50 +79,43 @@
|
|
| 87 |
<button class="pdf-button" @click="generatePDF">Télécharger en PDF</button>
|
| 88 |
</div>
|
| 89 |
</div>
|
|
|
|
|
|
|
|
|
|
| 90 |
</div>
|
| 91 |
|
| 92 |
<script>
|
| 93 |
const { createApp } = Vue;
|
| 94 |
|
| 95 |
createApp({
|
| 96 |
-
// --- DATA : L'état de notre application ---
|
| 97 |
data() {
|
| 98 |
return {
|
| 99 |
-
question: '',
|
| 100 |
-
isLoading: false,
|
| 101 |
-
errorMessage: null,
|
| 102 |
-
dissertation: null
|
| 103 |
}
|
| 104 |
},
|
| 105 |
-
// --- METHODS : Les actions de notre application ---
|
| 106 |
methods: {
|
| 107 |
async generateDissertation() {
|
| 108 |
if (!this.question.trim()) {
|
| 109 |
this.errorMessage = "Veuillez entrer un sujet de dissertation.";
|
| 110 |
return;
|
| 111 |
}
|
| 112 |
-
|
| 113 |
-
// Réinitialisation de l'état
|
| 114 |
this.isLoading = true;
|
| 115 |
this.errorMessage = null;
|
| 116 |
this.dissertation = null;
|
| 117 |
-
|
| 118 |
try {
|
| 119 |
const response = await fetch('/api/generate_dissertation', {
|
| 120 |
method: 'POST',
|
| 121 |
headers: { 'Content-Type': 'application/json' },
|
| 122 |
body: JSON.stringify({ question: this.question })
|
| 123 |
});
|
| 124 |
-
|
| 125 |
const data = await response.json();
|
| 126 |
-
|
| 127 |
if (!response.ok) {
|
| 128 |
throw new Error(data.error || "Une erreur inconnue est survenue.");
|
| 129 |
}
|
| 130 |
-
|
| 131 |
-
// Succès : on met à jour la donnée 'dissertation', Vue mettra à jour l'affichage
|
| 132 |
this.dissertation = data;
|
| 133 |
-
|
| 134 |
} catch (error) {
|
| 135 |
this.errorMessage = error.message;
|
| 136 |
} finally {
|
|
@@ -139,21 +124,17 @@
|
|
| 139 |
},
|
| 140 |
generatePDF() {
|
| 141 |
const element = document.getElementById('dissertation-content');
|
| 142 |
-
|
| 143 |
const options = {
|
| 144 |
margin: [0.5, 0.5, 0.5, 0.5],
|
| 145 |
filename: 'dissertation-philosophie.pdf',
|
| 146 |
image: { type: 'jpeg', quality: 0.98 },
|
| 147 |
-
// LA MÉTHODE FIABLE : On ignore l'élément qui contient le bouton
|
| 148 |
-
// On ajoute 'data-html2canvas-ignore="true"' sur le container du bouton
|
| 149 |
html2canvas: { scale: 2, useCORS: true },
|
| 150 |
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
|
| 151 |
};
|
| 152 |
-
|
| 153 |
html2pdf().set(options).from(element).save();
|
| 154 |
}
|
| 155 |
}
|
| 156 |
-
}).mount('#app');
|
| 157 |
</script>
|
| 158 |
|
| 159 |
</body>
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Assistant de Philosophie (Vue.js)</title>
|
| 7 |
|
|
|
|
| 8 |
<script src="https://unpkg.com/vue@3"></script>
|
| 9 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
| 10 |
|
|
|
|
| 11 |
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 12 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 13 |
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Lato:wght@400;700&display=swap" rel="stylesheet">
|
| 14 |
|
| 15 |
<style>
|
| 16 |
+
/* Les styles CSS restent identiques, pas besoin de les modifier */
|
| 17 |
body { font-family: 'Lato', sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; color: #333; }
|
| 18 |
.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); }
|
| 19 |
h1 { text-align: center; color: #2c3e50; }
|
|
|
|
| 38 |
</head>
|
| 39 |
<body>
|
| 40 |
|
|
|
|
| 41 |
<div id="app" class="container">
|
| 42 |
+
{% raw %}
|
| 43 |
+
<!-- Le contenu de l'application Vue commence ici -->
|
| 44 |
+
|
| 45 |
<h1>Assistant de Dissertation Philosophique</h1>
|
| 46 |
|
|
|
|
| 47 |
<form @submit.prevent="generateDissertation">
|
| 48 |
<textarea v-model="question" placeholder="Entrez votre sujet de dissertation ici..."></textarea>
|
| 49 |
|
|
|
|
| 50 |
<button type="submit" :disabled="isLoading">
|
| 51 |
{{ isLoading ? 'Génération en cours...' : 'Générer la dissertation' }}
|
| 52 |
</button>
|
| 53 |
</form>
|
| 54 |
|
|
|
|
| 55 |
<div v-if="isLoading" class="loader"></div>
|
|
|
|
|
|
|
| 56 |
<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
|
| 57 |
|
|
|
|
| 58 |
<div v-if="dissertation" id="dissertation-content" class="dissertation-paper">
|
| 59 |
<h2>Sujet : {{ dissertation.sujet }}</h2>
|
| 60 |
<p class="prof">Prof : {{ dissertation.prof }}</p>
|
|
|
|
| 62 |
<h3>Introduction</h3>
|
| 63 |
<p class="indented">{{ dissertation.introduction }}</p>
|
| 64 |
|
|
|
|
| 65 |
<div v-for="partie in dissertation.parties" :key="partie.chapeau">
|
| 66 |
<div class="development-block">
|
| 67 |
<p class="indented">{{ partie.chapeau }}</p>
|
|
|
|
| 68 |
<p v-for="arg in partie.arguments" :key="arg.paragraphe_argumentatif" class="indented">
|
| 69 |
{{ arg.paragraphe_argumentatif }}
|
| 70 |
</p>
|
|
|
|
| 79 |
<button class="pdf-button" @click="generatePDF">Télécharger en PDF</button>
|
| 80 |
</div>
|
| 81 |
</div>
|
| 82 |
+
|
| 83 |
+
<!-- Le contenu de l'application Vue se termine ici -->
|
| 84 |
+
{% endraw %}
|
| 85 |
</div>
|
| 86 |
|
| 87 |
<script>
|
| 88 |
const { createApp } = Vue;
|
| 89 |
|
| 90 |
createApp({
|
|
|
|
| 91 |
data() {
|
| 92 |
return {
|
| 93 |
+
question: '',
|
| 94 |
+
isLoading: false,
|
| 95 |
+
errorMessage: null,
|
| 96 |
+
dissertation: null
|
| 97 |
}
|
| 98 |
},
|
|
|
|
| 99 |
methods: {
|
| 100 |
async generateDissertation() {
|
| 101 |
if (!this.question.trim()) {
|
| 102 |
this.errorMessage = "Veuillez entrer un sujet de dissertation.";
|
| 103 |
return;
|
| 104 |
}
|
|
|
|
|
|
|
| 105 |
this.isLoading = true;
|
| 106 |
this.errorMessage = null;
|
| 107 |
this.dissertation = null;
|
|
|
|
| 108 |
try {
|
| 109 |
const response = await fetch('/api/generate_dissertation', {
|
| 110 |
method: 'POST',
|
| 111 |
headers: { 'Content-Type': 'application/json' },
|
| 112 |
body: JSON.stringify({ question: this.question })
|
| 113 |
});
|
|
|
|
| 114 |
const data = await response.json();
|
|
|
|
| 115 |
if (!response.ok) {
|
| 116 |
throw new Error(data.error || "Une erreur inconnue est survenue.");
|
| 117 |
}
|
|
|
|
|
|
|
| 118 |
this.dissertation = data;
|
|
|
|
| 119 |
} catch (error) {
|
| 120 |
this.errorMessage = error.message;
|
| 121 |
} finally {
|
|
|
|
| 124 |
},
|
| 125 |
generatePDF() {
|
| 126 |
const element = document.getElementById('dissertation-content');
|
|
|
|
| 127 |
const options = {
|
| 128 |
margin: [0.5, 0.5, 0.5, 0.5],
|
| 129 |
filename: 'dissertation-philosophie.pdf',
|
| 130 |
image: { type: 'jpeg', quality: 0.98 },
|
|
|
|
|
|
|
| 131 |
html2canvas: { scale: 2, useCORS: true },
|
| 132 |
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
|
| 133 |
};
|
|
|
|
| 134 |
html2pdf().set(options).from(element).save();
|
| 135 |
}
|
| 136 |
}
|
| 137 |
+
}).mount('#app');
|
| 138 |
</script>
|
| 139 |
|
| 140 |
</body>
|