Spaces:

Docfile
/

Flasksite

Sleeping

App Files Files Community

Docfile commited on Aug 13

Commit

810c4e4

verified ·

1 Parent(s): 5524fc2

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +203 -69

templates/philosophie.html CHANGED Viewed

@@ -14,24 +14,48 @@
   <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    /* ... (tous les styles de votre fichier original restent ici) ... */
     .collapsible { cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; background-color: #f1f1f1; display: flex; justify-content: space-between; align-items: center; }
     .prose { max-width: 100% !important; }
     .prose p { margin-top: 1.25em; margin-bottom: 1.25em; line-height: 1.75; }
-    .prose ul { margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; }
     #response .prose { color: #374151; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
-    .content { padding: 0 18px; display: none; overflow: hidden; background-color: white; }
     .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
     @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
     .select2-container--default .select2-selection--single { border: 1px solid #e5e7eb; border-radius: 0.75rem; height: auto; padding: 0.625rem 1rem; background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); display: flex; align-items: center; }
     .select2-container--default .select2-selection--single .select2-selection__rendered { color: #374151; line-height: inherit; padding-right: 1.5rem; }
     #image-preview { max-height: 200px; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
   </style>
 </head>
 <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
   <!-- Navbar -->
   <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
-      <!-- ... (contenu de la navbar inchangé) ... -->
   </nav>
   <!-- Main Content -->
@@ -53,14 +77,22 @@
             </select>
           </div>
-          <!-- Conteneur pour les champs de texte -->
           <div id="text-input-container">
             <!-- Course Selection -->
             <div class="space-y-3">
-              <label class="block text-sm font-medium text-gray-700">Appuyer l'analyse sur un cours (Optionnel)</label>
               <select id="course-select" class="w-full">
-                <option value="">Ne pas utiliser de cours</option>
               </select>
             </div>
             <!-- Question Input -->
             <div class="space-y-3 mt-8">
@@ -69,35 +101,41 @@
             </div>
           </div>
-          <!-- Conteneur pour l'upload d'image -->
           <div id="image-input-container" class="hidden">
              <div class="space-y-3">
                 <label for="image-upload" class="block text-sm font-medium text-gray-700">Charger une image pour analyse</label>
                 <input type="file" id="image-upload" accept="image/jpeg, image/png, image/webp" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100"/>
-                <div class="mt-4 flex justify-center">
-                    <img id="image-preview" src="" alt="Aperçu de l'image" class="hidden"/>
-                </div>
             </div>
           </div>
           <!-- Submit Button -->
           <button id="submit-btn" class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-medium shadow-lg shadow-violet-200 hover:shadow-xl hover:shadow-violet-300 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2">
-            Générer
           </button>
           <!-- Response Section -->
           <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
-            <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100">
-              <!-- La réponse en streaming sera insérée ici -->
-            </div>
           </div>
           <!-- Copy Button -->
-          <button id="copy-btn" class="hidden w-full py-3 ...">Copier</button>
           <!-- Saved Dissertations Section -->
           <div id="saved-dissertations" class="mt-8">
-             <!-- ... (section inchangée) ... -->
           </div>
         </div>
       </div>
@@ -112,8 +150,12 @@
 <script>
 $(document).ready(function() {
     // --- Initialisations ---
-    $('#course-select').select2({ /* ... options select2 ... */ });
-    marked.setOptions({ breaks: true, gfm: true });
     moment.locale('fr');
     const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true });
@@ -124,66 +166,80 @@ $(document).ready(function() {
             $('#text-input-container').hide();
             $('#image-input-container').show();
             $('#deepthink-btn').hide();
-            $('#submit-btn span').text("Analyser l'image");
         } else { // Dissertation texte
             $('#text-input-container').show();
             $('#image-input-container').hide();
             $('#deepthink-btn').show();
-            $('#submit-btn span').text("Générer la dissertation");
         }
     }).trigger('change');
     $('#image-upload').change(function(e) {
         if (e.target.files && e.target.files[0]) {
             const reader = new FileReader();
-            reader.onload = function(event) {
-                $('#image-preview').attr('src', event.target.result).removeClass('hidden');
-            }
             reader.readAsDataURL(e.target.files[0]);
         }
     });
-    // --- Chargement des cours (inchangé) ---
-    // ...
     // --- Logique de Génération en Streaming ---
     async function handleStreamedGeneration(url, options) {
-        Swal.fire({ title: 'Génération en cours...', html: 'Veuillez patienter...', allowOutsideClick: false, showConfirmButton: false, didOpen: () => { Swal.showLoading() }});
         const responseDiv = $('#response > div');
         responseDiv.html('');
-        $('#response').removeClass('hidden');
-        $('#copy-btn').addClass('hidden');
-        let fullResponseText = '';
         try {
             const response = await fetch(url, options);
-            if (!response.ok) {
-                const errorText = await response.text();
-                throw new Error(errorText || `Erreur HTTP: ${response.status}`);
-            }
             const reader = response.body.getReader();
             const decoder = new TextDecoder();
             while (true) {
                 const { value, done } = await reader.read();
                 if (done) break;
-                const chunk = decoder.decode(value, { stream: true });
-                fullResponseText += chunk;
-                responseDiv.html(marked.parse(fullResponseText));
-                window.scrollTo(0, document.body.scrollHeight);
             }
-            Swal.close();
             $('#copy-btn').removeClass('hidden');
             Toast.fire({ icon: 'success', title: 'Génération terminée !' });
-            saveDissertation($('#question').val().trim() || "Analyse d'image", fullResponseText);
         } catch (error) {
-            console.error('Erreur de streaming:', error);
             Swal.fire({ icon: 'error', title: 'Erreur', text: error.message });
         }
     }
@@ -193,41 +249,119 @@ $(document).ready(function() {
         const type = $('#type-select').val();
         const isDeepThink = $(this).attr('id') === 'deepthink-btn';
-        if (type === '3') { // Analyse d'image
             const imageFile = $('#image-upload')[0].files[0];
-            if (!imageFile) {
-                Swal.fire('Erreur', 'Veuillez sélectionner une image.', 'error');
-                return;
-            }
             const formData = new FormData();
             formData.append('image', imageFile);
             handleStreamedGeneration('/stream_philo_image', { method: 'POST', body: formData });
-        } else { // Dissertation texte
             const question = $('#question').val().trim();
-            if (!question) {
-                Swal.fire('Erreur', 'Veuillez saisir un sujet.', 'error');
-                return;
-            }
-            const data = {
-                question: question,
-                type: type,
-                courseId: $('#course-select').val() || null
-            };
             const url = isDeepThink ? '/stream_philo_deepthink' : '/stream_philo';
-            handleStreamedGeneration(url, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data)
             });
         }
     });
-    // --- Fonctions de sauvegarde et copie (inchangées) ---
-    function saveDissertation(title, content) { /* ... */ }
-    function deleteDissertation(index) { /* ... */ }
-    function updateSavedDissertationsList() { /* ... */ }
-    $('#copy-btn').click(function() { /* ... */ });
     updateSavedDissertationsList();
 });

   <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
+    /* Styles de votre fichier original `philosophie (7).html` */
     .collapsible { cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; background-color: #f1f1f1; display: flex; justify-content: space-between; align-items: center; }
+    .active, .collapsible:hover { background-color: #ddd; }
+    .content { padding: 0 18px; display: none; overflow: hidden; background-color: white; }
+    /* Styles pour la responsivité et la lisibilité du Markdown généré */
     .prose { max-width: 100% !important; }
     .prose p { margin-top: 1.25em; margin-bottom: 1.25em; line-height: 1.75; }
+    .prose ul, .prose ol { margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; }
+    .prose li { margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 0.375em; }
+    .prose h1, .prose h2, .prose h3 { margin-top: 2em; margin-bottom: 1em; line-height: 1.3; }
     #response .prose { color: #374151; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
+    /* Styles d'animation */
     .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
     @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    /* Styles pour Select2 */
     .select2-container--default .select2-selection--single { border: 1px solid #e5e7eb; border-radius: 0.75rem; height: auto; padding: 0.625rem 1rem; background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); display: flex; align-items: center; }
     .select2-container--default .select2-selection--single .select2-selection__rendered { color: #374151; line-height: inherit; padding-right: 1.5rem; }
+    .select2-results__option .course-author { font-size: 0.875rem; color: #6b7280; display: block; margin-top: 0.25rem; }
+    /* Styles pour l'aperçu de l'image */
     #image-preview { max-height: 200px; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
   </style>
 </head>
 <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
   <!-- Navbar -->
   <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between items-center h-16">
+        <div class="flex items-center">
+          <div class="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 text-transparent bg-clip-text">Mariam AI</div>
+        </div>
+        <div class="flex items-center space-x-4">
+          <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-violet-100 text-violet-800">
+            <span class="w-2 h-2 bg-violet-400 rounded-full animate-pulse mr-2"></span>
+            Assistant Philosophique
+          </span>
+        </div>
+      </div>
+    </div>
   </nav>
   <!-- Main Content -->
             </select>
           </div>
+          <!-- Conteneur pour les champs texte (visible par défaut) -->
           <div id="text-input-container">
             <!-- Course Selection -->
             <div class="space-y-3">
+              <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
               <select id="course-select" class="w-full">
+                <option value="">Choisir un cours...</option>
               </select>
+              <div class="course-meta hidden mt-4">
+                <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-4 border border-gray-100">
+                  <div class="flex justify-between items-center">
+                    <span id="course-author" class="flex items-center space-x-2"><svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg><span class="text-gray-600"></span></span>
+                    <span id="course-date" class="flex items-center space-x-2"><svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg><span class="text-gray-600"></span></span>
+                  </div>
+                </div>
+              </div>
             </div>
             <!-- Question Input -->
             <div class="space-y-3 mt-8">
             </div>
           </div>
+          <!-- Conteneur pour l'upload d'image (caché par défaut) -->
           <div id="image-input-container" class="hidden">
              <div class="space-y-3">
                 <label for="image-upload" class="block text-sm font-medium text-gray-700">Charger une image pour analyse</label>
                 <input type="file" id="image-upload" accept="image/jpeg, image/png, image/webp" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100"/>
+                <div class="mt-4 flex justify-center"><img id="image-preview" src="" alt="Aperçu de l'image" class="hidden"/></div>
             </div>
           </div>
           <!-- Submit Button -->
           <button id="submit-btn" class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-medium shadow-lg shadow-violet-200 hover:shadow-xl hover:shadow-violet-300 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2">
+            Générer la dissertation
           </button>
+          <!-- Thinking Process Section -->
+          <div id="thinking-container" class="hidden mt-8">
+            <h3 class="text-md font-semibold text-gray-600 mb-2 border-b pb-2">Processus de pensée de l'IA :</h3>
+            <div id="thinking-process" class="text-sm text-gray-500 bg-gray-50 p-4 rounded-lg prose prose-sm max-w-none"></div>
+          </div>
           <!-- Response Section -->
           <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
+            <h3 class="text-lg font-bold text-gray-800 mb-2">Réponse :</h3>
+            <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100"></div>
           </div>
           <!-- Copy Button -->
+          <button id="copy-btn" class="hidden mt-8 w-full py-3 px-6 rounded-xl bg-gray-50 text-gray-700 font-medium border border-gray-200 hover:bg-gray-100 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
+            Copier la dissertation
+          </button>
           <!-- Saved Dissertations Section -->
           <div id="saved-dissertations" class="mt-8">
+            <h3 class="text-lg font-medium text-gray-700 mb-4">Dissertations Sauvegardées</h3>
+            <div id="dissertations-list" class="space-y-4"></div>
           </div>
         </div>
       </div>
 <script>
 $(document).ready(function() {
     // --- Initialisations ---
+    $('#course-select').select2({
+        placeholder: 'Choisir un cours...',
+        templateResult: function (course) { if (!course.id) { return course.text; } return $(`<span>${course.text}</span><span class="course-author">Pr. ${$(course.element).data('author')}</span>`); },
+        templateSelection: function (course) { return course.text; },
+    });
+    marked.setOptions({ breaks: true, gfm: true, headerIds: false, mangle: false });
     moment.locale('fr');
     const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true });
             $('#text-input-container').hide();
             $('#image-input-container').show();
             $('#deepthink-btn').hide();
+            $('#submit-btn').text("Analyser l'image");
         } else { // Dissertation texte
             $('#text-input-container').show();
             $('#image-input-container').hide();
             $('#deepthink-btn').show();
+            $('#submit-btn').text("Générer la dissertation");
         }
     }).trigger('change');
     $('#image-upload').change(function(e) {
         if (e.target.files && e.target.files[0]) {
             const reader = new FileReader();
+            reader.onload = (event) => $('#image-preview').attr('src', event.target.result).removeClass('hidden');
             reader.readAsDataURL(e.target.files[0]);
         }
     });
     // --- Logique de Génération en Streaming ---
     async function handleStreamedGeneration(url, options) {
+        Swal.fire({ title: 'Génération en cours...', html: 'Connexion au service IA...', allowOutsideClick: false, showConfirmButton: false, didOpen: () => Swal.showLoading() });
+        $('#thinking-container, #response, #copy-btn').addClass('hidden');
+        const thinkingDiv = $('#thinking-process');
         const responseDiv = $('#response > div');
+        thinkingDiv.html('');
         responseDiv.html('');
+        let fullResponseText = '', fullThinkingText = '', firstChunkReceived = false;
         try {
             const response = await fetch(url, options);
+            if (!response.ok) throw new Error(await response.text());
             const reader = response.body.getReader();
             const decoder = new TextDecoder();
+            let buffer = '';
             while (true) {
                 const { value, done } = await reader.read();
+                if (!firstChunkReceived && (value || done)) {
+                    Swal.close();
+                    firstChunkReceived = true;
+                }
                 if (done) break;
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop();
+                for (const line of lines) {
+                    if (line.trim() === '') continue;
+                    try {
+                        const data = JSON.parse(line);
+                        if (data.type === 'thought') {
+                            $('#thinking-container').removeClass('hidden');
+                            fullThinkingText += data.content;
+                            thinkingDiv.html(marked.parse(fullThinkingText));
+                        } else if (data.type === 'answer') {
+                            $('#response').removeClass('hidden');
+                            fullResponseText += data.content;
+                            responseDiv.html(marked.parse(fullResponseText));
+                        } else if (data.type === 'error') {
+                            throw new Error(data.content);
+                        }
+                    } catch (e) { console.error("Erreur JSON parse:", line); }
+                }
+                 window.scrollTo(0, document.body.scrollHeight);
             }
             $('#copy-btn').removeClass('hidden');
             Toast.fire({ icon: 'success', title: 'Génération terminée !' });
+            const title = $('#type-select').val() === '3' ? "Analyse d'image" : $('#question').val().trim();
+            saveDissertation(title, fullResponseText);
         } catch (error) {
             Swal.fire({ icon: 'error', title: 'Erreur', text: error.message });
         }
     }
         const type = $('#type-select').val();
         const isDeepThink = $(this).attr('id') === 'deepthink-btn';
+        if (type === '3') {
             const imageFile = $('#image-upload')[0].files[0];
+            if (!imageFile) { Swal.fire('Erreur', 'Veuillez sélectionner une image.', 'error'); return; }
             const formData = new FormData();
             formData.append('image', imageFile);
             handleStreamedGeneration('/stream_philo_image', { method: 'POST', body: formData });
+        } else {
             const question = $('#question').val().trim();
+            if (!question) { Swal.fire('Erreur', 'Veuillez saisir un sujet.', 'error'); return; }
+            const data = { question, type, courseId: $('#course-select').val() || null };
             const url = isDeepThink ? '/stream_philo_deepthink' : '/stream_philo';
+            handleStreamedGeneration(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
+        }
+    });
+    // --- Fonctions existantes ---
+    function loadCourses() {
+        $.ajax({
+          url: '/api/philosophy/courses',
+          method: 'GET',
+        }).done(function(courses) {
+            const select = $('#course-select');
+            courses.forEach(course => {
+              const newOption = new Option(course.title, course.id, false, false);
+              $(newOption).data('author', course.author);
+              select.append(newOption);
             });
+            select.trigger('change');
+        }).fail(function() {
+            Toast.fire({ icon: 'error', title: 'Erreur de chargement des cours' });
+        });
+    }
+    loadCourses();
+    $('#course-select').on('change', function() {
+        const courseId = $(this).val();
+        if (courseId) {
+            $.ajax({
+                url: `/api/philosophy/courses/${courseId}`,
+                method: 'GET',
+                success: function(course) {
+                    $('.course-meta').removeClass('hidden').addClass('animate-fadeIn');
+                    $('#course-author span').text(`Pr. ${course.author}`);
+                    $('#course-date span').text(new Date(course.updated_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }));
+                }
+            });
+        } else {
+            $('.course-meta').addClass('hidden');
+        }
+    });
+    function saveDissertation(title, content) {
+        let saved = JSON.parse(localStorage.getItem('dissertations')) || [];
+        saved.unshift({ title, content, timestamp: Date.now() });
+        if(saved.length > 10) saved.pop(); // Limite à 10 sauvegardes
+        localStorage.setItem('dissertations', JSON.stringify(saved));
+        updateSavedDissertationsList();
+    }
+    function deleteDissertation(index) {
+        let saved = JSON.parse(localStorage.getItem('dissertations')) || [];
+        saved.splice(index, 1);
+        localStorage.setItem('dissertations', JSON.stringify(saved));
+        updateSavedDissertationsList();
+        Toast.fire({ icon: 'info', title: 'Dissertation supprimée' });
+    }
+    function updateSavedDissertationsList() {
+        const list = $('#dissertations-list');
+        list.empty();
+        let saved = JSON.parse(localStorage.getItem('dissertations')) || [];
+        if (saved.length === 0) {
+            list.append('<p class="text-gray-500">Aucune dissertation sauvegardée.</p>');
+            return;
         }
+        saved.forEach((diss, index) => {
+            const date = moment(diss.timestamp).format('LLL');
+            const title = diss.title.length > 50 ? diss.title.substring(0, 50) + '...' : diss.title;
+            const item = $(`
+              <div class="border border-gray-100 rounded-xl">
+                <button class="collapsible rounded-t-xl flex justify-between w-full p-4">
+                  <span class="font-medium text-gray-800">${title}</span>
+                  <span class="text-gray-500 text-sm">${date}</span>
+                </button>
+                <div class="content prose max-w-none p-4 border-t border-gray-200">
+                  <div class="inner-content"></div>
+                  <button class="delete-btn mt-4 text-sm text-red-600 hover:text-red-800" data-index="${index}">Supprimer</button>
+                </div>
+              </div>
+            `);
+            item.find('.inner-content').html(marked.parse(diss.content));
+            list.append(item);
+        });
+    }
+    $('#dissertations-list').on('click', '.collapsible', function() {
+        $(this).next('.content').slideToggle("fast");
+        $(this).parent().toggleClass("active");
+    });
+    $('#dissertations-list').on('click', '.delete-btn', function() {
+        const index = $(this).data('index');
+        deleteDissertation(index);
     });
+    $('#copy-btn').click(function() {
+        const textToCopy = $('#response > div').text();
+        navigator.clipboard.writeText(textToCopy).then(() => {
+            Toast.fire({ icon: 'success', title: 'Copié dans le presse-papiers!' });
+        }).catch(() => {
+            Toast.fire({ icon: 'error', title: 'Erreur de copie' });
+        });
+    });
     updateSavedDissertationsList();
 });