Update templates/philosophie.html

templates/philosophie.html

@@ -6,13 +6,11 @@
   <title>Assistant de Philosophie (Vue.js)</title>
 
   <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
-  <!-- La ligne html2pdf.js a été SUPPRIMÉE -->
 
   <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
-  <!-- Le CSS reste INCHANGÉ -->
   <style>
     :root {
       --primary-color: #6366f1; /* Indigo moderne */
@@ -46,10 +44,13 @@
     .form-container { background: var(--background); border-radius: 20px; padding: 2.5rem; margin-bottom: 2rem; border: 1px solid var(--border); backdrop-filter: blur(10px); }
     .form-group { margin-bottom: 2rem; }
     label { display: block; margin-bottom: 0.75rem; font-weight: 600; color: var(--text-primary); font-size: 0.95rem; letter-spacing: 0.01em; }
-    textarea, .form-select { width: 100%; padding: 1rem 1.25rem; border-radius: 12px; border: 2px solid var(--border); font-size: 1rem; line-height: 1.6; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background-color: var(--background); color: var(--text-primary); font-family: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; }
+    /* Style ajouté pour le champ de fichier */
+    textarea, .form-select, .file-input { width: 100%; padding: 1rem 1.25rem; border-radius: 12px; border: 2px solid var(--border); font-size: 1rem; line-height: 1.6; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background-color: var(--background); color: var(--text-primary); font-family: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; }
+    .file-input { cursor: pointer; }
+    .file-input:hover { border-color: var(--border-focus); }
     .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 1rem center; background-repeat: no-repeat; background-size: 1.25rem 1.25rem; padding-right: 3rem; cursor: pointer; }
     textarea { min-height: 120px; resize: vertical; }
-    textarea:focus, .form-select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); transform: translateY(-1px); }
+    textarea:focus, .form-select:focus, .file-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); transform: translateY(-1px); }
     .primary-button { display: block; width: 100%; padding: 1.25rem; background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); color: white; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0.01em; position: relative; overflow: hidden; }
     .primary-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; }
     .primary-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); }
@@ -90,32 +91,44 @@
         <div class="form-group">
           <label for="dissertation-type">Choisir la méthodologie</label>
           <select id="dissertation-type" v-model="dissertationType" class="form-select">
-              <option value="type1">Type 1 </option>
+              <option value="type1">Type 1</option>
               <option value="type2">Type 2 (citation)</option>
+              <option value="type3">Type 3 (commentaire de texte)</option>
           </select>
         </div>
-        <div class="form-group">
-          <label for="course-context">Choisir un cours comme contexte (optionnel)</label>
-          <select id="course-context" v-model="selectedCourse" class="form-select">
-            <option value="">-- Aucun cours en contexte --</option>
-            <option v-for="course in courses" :key="course.id" :value="course.id">
-              [[ course.title ]]
-            </option>
-          </select>
+
+        <!-- AFFICHAGE CONDITIONNEL : Champs pour Type 1 et 2 -->
+        <div v-if="dissertationType !== 'type3'">
+          <div class="form-group">
+            <label for="course-context">Choisir un cours comme contexte (optionnel)</label>
+            <select id="course-context" v-model="selectedCourse" class="form-select">
+              <option value="">-- Aucun cours en contexte --</option>
+              <option v-for="course in courses" :key="course.id" :value="course.id">
+                [[ course.title ]]
+              </option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="question">Entrez votre sujet de dissertation</label>
+            <textarea id="question" v-model="question" placeholder="Entrez votre sujet ou la citation à analyser ici..."></textarea>
+          </div>
         </div>
-        <div class="form-group">
-          <label for="question">Entrez votre sujet de dissertation</label>
-          <textarea id="question" v-model="question" placeholder="Entrez votre sujet ou la citation à analyser ici..."></textarea>
+
+        <!-- AFFICHAGE CONDITIONNEL : Champ pour Type 3 (Upload d'image) -->
+        <div v-if="dissertationType === 'type3'" class="form-group">
+          <label for="text-image">Téléchargez une image du texte à commenter</label>
+          <input type="file" @change="handleFileUpload" id="text-image" accept="image/*" class="file-input">
         </div>
+
         <button type="submit" class="primary-button" :disabled="isLoading">
-          [[ isLoading ? 'Génération en cours...' : 'Générer la dissertation' ]]
+          [[ isLoading ? 'Génération en cours...' : 'Générer' ]]
         </button>
       </form>
     </div>
 
     <div v-if="dissertation" class="download-container">
       <button class="secondary-button" @click="generatePDF" :disabled="isDownloading">
-        [[ isDownloading ? 'Téléchargement...' : 'Télécharger la dissertation en PDF' ]]
+        [[ isDownloading ? 'Téléchargement...' : 'Télécharger en PDF' ]]
       </button>
     </div>
 
@@ -151,99 +164,118 @@
           dissertationType: 'type1',
           courses: [],
           selectedCourse: '',
+          uploadedFile: null, // <-- NOUVEL état pour le fichier
           isLoading: false,
-          isDownloading: false, // <-- NOUVEL état pour le bouton de téléchargement
+          isDownloading: false,
           errorMessage: null,
           dissertation: null
         }
       },
       computed: {
+        // Propriété calculée pour afficher le bon libellé en haut
         dissertationTypeLabel() {
-          return this.dissertationType === 'type1' ? 'Type 1' : 'Type 2';
+            const labels = {
+                'type1': 'Type 1',
+                'type2': 'Type 2 (Citation)',
+                'type3': 'Type 3 (Commentaire de texte)'
+            };
+            return labels[this.dissertationType] || 'Inconnu';
         }
       },
       mounted() {
         this.fetchCourses();
       },
       methods: {
+        // NOUVELLE méthode pour gérer la sélection du fichier
+        handleFileUpload(event) {
+            this.uploadedFile = event.target.files[0];
+            this.errorMessage = null; // Réinitialiser l'erreur
+        },
         async fetchCourses() {
           try {
             const response = await fetch('/api/philosophy/courses');
             if (!response.ok) throw new Error('Impossible de charger les cours.');
-            const data = await response.json();
-            if (data.error) throw new Error(data.error);
-            this.courses = data;
+            this.courses = await response.json();
           } catch (error) {
             this.errorMessage = error.message;
           }
         },
+        // MÉTHODE MISE À JOUR pour gérer les deux types de soumission
         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,
-                type: this.dissertationType,
-                courseId: this.selectedCourse
-              })
-            });
+            let response;
+            // CAS 1 : C'est un upload d'image (Type 3)
+            if (this.dissertationType === 'type3') {
+              if (!this.uploadedFile) {
+                throw new Error("Veuillez sélectionner une image pour le commentaire de texte.");
+              }
+              const formData = new FormData();
+              formData.append('image', this.uploadedFile);
+              formData.append('type', this.dissertationType);
+              
+              response = await fetch('/api/generate_dissertation', {
+                method: 'POST',
+                body: formData, // Le navigateur gère le Content-Type pour FormData
+              });
+
+            // CAS 2 : C'est une soumission de texte (Type 1 ou 2)
+            } else {
+              if (!this.question.trim()) {
+                throw new Error("Veuillez entrer un sujet de dissertation.");
+              }
+              response = await fetch('/api/generate_dissertation', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ 
+                  question: this.question,
+                  type: this.dissertationType,
+                  courseId: this.selectedCourse
+                })
+              });
+            }
+
+            // Le traitement de la réponse est commun aux deux cas
             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;
           }
         },
-
-        // --- MÉTHODE generatePDF ENTIÈREMENT MISE À JOUR ---
+        // La méthode de génération PDF reste identique car elle travaille sur l'objet 'dissertation' final
         async generatePDF() {
-          if (!this.dissertation) {
-            this.errorMessage = "Aucune dissertation à télécharger.";
-            return;
-          }
+          if (!this.dissertation) return;
           this.isDownloading = true;
           this.errorMessage = null;
           try {
             const response = await fetch('/api/generate_pdf', {
               method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              // On envoie les données de la dissertation au serveur
+              headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify(this.dissertation),
             });
-
             if (!response.ok) {
                 const errorData = await response.json();
-                throw new Error(errorData.error || "Le serveur n'a pas pu générer le PDF.");
+                throw new Error(errorData.error || "Erreur serveur lors de la création du PDF.");
             }
-
-            // Le serveur renvoie le PDF, on le traite pour le télécharger
             const blob = await response.blob();
             const url = window.URL.createObjectURL(blob);
             const a = document.createElement('a');
-            a.style.display = 'none';
             a.href = url;
             a.download = 'dissertation-philosophie.pdf';
             document.body.appendChild(a);
             a.click();
             window.URL.revokeObjectURL(url);
             a.remove();
-
           } catch (err) {
-            console.error('Erreur de téléchargement du PDF:', err);
             this.errorMessage = "Erreur lors de la génération du PDF : " + err.message;
           } finally {
             this.isDownloading = false;