Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mariam AI - Assistant Philosophique</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.js"></script> | |
| <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> | |
| .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; | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| .animate-slideUp { | |
| animation: slideUp 0.5s ease-out forwards; | |
| } | |
| .animate-shake { | |
| animation: shake 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 75% { transform: translateX(5px); } | |
| } | |
| </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 --> | |
| <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Main Card --> | |
| <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden"> | |
| <!-- Header Section --> | |
| <div class="bg-gradient-to-r from-violet-600 to-indigo-600 p-6 text-white"> | |
| <h2 class="text-2xl font-bold">Gen'Dissertation</h2> | |
| <p class="mt-2 opacity-90">Créez des dissertations philosophiques pertinentes et structurées</p> | |
| </div> | |
| <!-- Content Section --> | |
| <div class="p-8 space-y-8"> | |
| <!-- Type Selection --> | |
| <div class="space-y-3"> | |
| <label class="block text-sm font-medium text-gray-700">Type de dissertation</label> | |
| <div class="relative"> | |
| <select id="type-select" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 appearance-none bg-white py-3 px-4 pr-10"> | |
| <option value="1">Type 1 -</option> | |
| <option value="2">Type 2 -</option> | |
| </select> | |
| <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none"> | |
| <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div id="current-type-label" class="inline-flex px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-violet-50 to-indigo-50 text-violet-700 border border-violet-200"> | |
| Sujet de type 1 | |
| </div> | |
| </div> | |
| <!-- Course Selection --> | |
| <div class="space-y-3"> | |
| <label class="block text-sm font-medium text-gray-700">Sélection du cours</label> | |
| <div class="relative"> | |
| <select id="course-select" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 appearance-none bg-white py-3 px-4 pr-10"> | |
| <option value="">Choisir un cours...</option> | |
| </select> | |
| <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none"> | |
| <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-11.414z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="course-meta hidden"> | |
| <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"> | |
| <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label> | |
| <div class="relative"> | |
| <textarea id="question" rows="4" | |
| class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 resize-none bg-white py-3 px-4" | |
| placeholder="Saisissez votre sujet de dissertation..."></textarea> | |
| <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400"> | |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /> | |
| </svg> | |
| </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"> | |
| <span class="flex items-center justify-center space-x-2"> | |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| <span>Générer la dissertation</span> | |
| </span> | |
| </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 sera insérée ici --> | |
| </div> | |
| </div> | |
| <!-- Copy Button --> | |
| <button id="copy-btn" class="hidden 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"> | |
| <span class="flex items-center justify-center space-x-2"> | |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> | |
| </svg> | |
| <span>Copier la dissertation</span> | |
| </span> | |
| </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"> | |
| <!-- Les dissertations sauvegardées seront insérées ici --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| // Configuration de marked | |
| marked.setOptions({ | |
| breaks: true, | |
| gfm: true, | |
| headerIds: true, | |
| langPrefix: 'language-', | |
| smartLists: true, | |
| smartypants: true | |
| }); | |
| moment.locale('fr'); // Configuration de moment.js en français | |
| // Configuration des notifications | |
| const Toast = Swal.mixin({ | |
| toast: true, | |
| position: 'top-end', | |
| showConfirmButton: false, | |
| timer: 3000, | |
| timerProgressBar: true, | |
| customClass: { | |
| popup: 'rounded-lg shadow-xl border border-gray-100' | |
| } | |
| }); | |
| // Animation des boutons | |
| function addButtonAnimation(buttonId) { | |
| $(`#${buttonId}`).on('mousedown', function() { | |
| $(this).addClass('scale-95'); | |
| }).on('mouseup mouseleave', function() { | |
| $(this).removeClass('scale-95'); | |
| }); | |
| } | |
| addButtonAnimation('submit-btn'); | |
| addButtonAnimation('copy-btn'); | |
| // Gestion du changement de type | |
| $('#type-select').change(function() { | |
| const type = $(this).val(); | |
| const labels = { | |
| '1': 'Type1', | |
| '2': 'Type2' | |
| }; | |
| $('#current-type-label').text(`Type ${type} - ${labels[type]}`); | |
| }); | |
| // Chargement des cours avec animation | |
| function loadCourses() { | |
| return $.ajax({ | |
| url: '/api/philosophy/courses', | |
| method: 'GET', | |
| beforeSend: function() { | |
| $('#course-select').addClass('animate-pulse'); | |
| }, | |
| complete: function() { | |
| $('#course-select').removeClass('animate-pulse'); | |
| } | |
| }); | |
| } | |
| loadCourses() | |
| .done(function(courses) { | |
| const select = $('#course-select'); | |
| courses.forEach(course => { | |
| select.append(`<option value="${course.id}">${course.title}</option>`); | |
| }); | |
| }) | |
| .fail(function() { | |
| Toast.fire({ | |
| icon: 'error', | |
| title: 'Erreur de chargement des cours', | |
| text: 'Veuillez réessayer ultérieurement' | |
| }); | |
| }); | |
| // Gestion du changement de cours avec animations | |
| $('#course-select').change(function() { | |
| const courseId = $(this).val(); | |
| if (courseId) { | |
| $.ajax({ | |
| url: `/api/philosophy/courses/${courseId}`, | |
| method: 'GET', | |
| beforeSend: function() { | |
| $('.course-meta').addClass('animate-pulse'); | |
| }, | |
| success: function(course) { | |
| $('.course-meta').removeClass('hidden animate-pulse') | |
| .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' })); | |
| // Afficher une notification de succès | |
| Toast.fire({ | |
| icon: 'success', | |
| title: 'Cours chargé avec succès' | |
| }); | |
| }, | |
| error: function() { | |
| Toast.fire({ | |
| icon: 'error', | |
| title: 'Erreur', | |
| text: 'Impossible de charger les détails du cours' | |
| }); | |
| } | |
| }); | |
| } else { | |
| $('.course-meta').addClass('animate-fadeOut').on('animationend', function() { | |
| $(this).addClass('hidden').removeClass('animate-fadeOut'); | |
| }); | |
| } | |
| }); | |
| // Gestion de la soumission avec conversion en Markdown et sauvegarde | |
| $('#submit-btn').click(function() { | |
| const question = $('#question').val().trim(); | |
| if (!question) { | |
| // Gestion de l'erreur si la question est vide (inchangée) | |
| return; | |
| } | |
| // Animation de chargement sophistiquée | |
| Swal.fire({ | |
| title: 'Génération en cours', | |
| html: ` | |
| <div class="space-y-4"> | |
| <div class="flex justify-center"> | |
| <div class="w-16 h-16 relative"> | |
| <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div> | |
| <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div> | |
| </div> | |
| </div> | |
| <div class="text-gray-600"> | |
| <p class="animate-pulse">Analyse philosophique en cours...</p> | |
| <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p> | |
| </div> | |
| </div> | |
| `, | |
| allowOutsideClick: false, | |
| showConfirmButton: false, | |
| customClass: { | |
| popup: 'rounded-2xl' | |
| } | |
| }); | |
| const data = { | |
| question: question, | |
| type: $('#type-select').val(), | |
| courseId: $('#course-select').val() || null | |
| }; | |
| $.ajax({ | |
| url: '/submit_philo', | |
| method: 'POST', | |
| contentType: 'application/json', | |
| data: JSON.stringify(data), | |
| success: function(data) { | |
| Swal.close(); | |
| const htmlContent = marked.parse(data.response); | |
| // Afficher la dissertation | |
| $('#response > div').html(htmlContent); | |
| $('#response').removeClass('hidden').addClass('animate-fadeIn'); | |
| $('#copy-btn').removeClass('hidden').addClass('animate-slideUp'); | |
| // Sauvegarder la dissertation | |
| saveDissertation(question, data.response); | |
| Toast.fire({ | |
| icon: 'success', | |
| title: 'Dissertation générée et sauvegardée avec succès', | |
| timer: 2000 | |
| }); | |
| }, | |
| error: function() { | |
| Swal.fire({ | |
| icon: 'error', | |
| title: 'Erreur de génération', | |
| text: 'Une erreur est survenue lors de la génération de votre dissertation.', | |
| customClass: { | |
| popup: 'rounded-2xl', | |
| confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200' | |
| } | |
| }); | |
| } | |
| }); | |
| }); | |
| // Fonction pour sauvegarder la dissertation (localStorage ou autre) | |
| function saveDissertation(title, content) { | |
| let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || []; | |
| savedDissertations.push({ title, content, timestamp: Date.now() }); | |
| localStorage.setItem('dissertations', JSON.stringify(savedDissertations)); | |
| updateSavedDissertationsList(); | |
| } | |
| // Fonction pour supprimer une dissertation sauvegardée | |
| function deleteDissertation(index) { | |
| let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || []; | |
| savedDissertations.splice(index, 1); | |
| localStorage.setItem('dissertations', JSON.stringify(savedDissertations)); | |
| updateSavedDissertationsList(); | |
| Toast.fire({ | |
| icon: 'success', | |
| title: 'Dissertation supprimée avec succès' | |
| }); | |
| } | |
| // Fonction pour afficher les dissertations sauvegardées (avec sections repliables et suppression) | |
| function updateSavedDissertationsList() { | |
| const dissertationsList = $('#dissertations-list'); | |
| dissertationsList.empty(); // Vider la liste actuelle | |
| let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || []; | |
| if (savedDissertations.length === 0) { | |
| dissertationsList.append('<p class="text-gray-500">Aucune dissertation sauvegardée.</p>'); | |
| return; | |
| } | |
| savedDissertations.forEach((diss, index) => { | |
| const date = moment(diss.timestamp).format('LLL'); | |
| const collapsible = $(`<button class="collapsible rounded-xl border border-gray-100 flex justify-between w-full"><span>${diss.title}</span><span class="text-gray-500 text-sm">${date}</span></button>`); | |
| const deleteButton = $('<button class="text-red-500 hover:text-red-700 ml-2">Supprimer</button>'); | |
| const content = $('<div class="content prose prose-violet max-w-none p-4"></div>').html(marked.parse(diss.content)); // Convertir en HTML | |
| collapsible.append(deleteButton); // Ajouter le bouton supprimer | |
| dissertationsList.append(collapsible, content); | |
| // Gestionnaire d'événement pour chaque section repliable | |
| collapsible.click(function(event) { | |
| // Empêcher la propagation de l'événement click sur le bouton "Supprimer" | |
| if (event.target === deleteButton[0]) { | |
| return; | |
| } | |
| content.slideToggle("fast"); | |
| collapsible.toggleClass("active"); | |
| }); | |
| deleteButton.click(function() { | |
| // Supprimer la dissertation correspondante | |
| deleteDissertation(index); | |
| }); | |
| }); | |
| } | |
| // Appeler la fonction pour afficher les dissertations au chargement de la page | |
| updateSavedDissertationsList(); | |
| // Gestion de la copie avec retour visuel amélioré | |
| $('#copy-btn').click(function() { | |
| const response = $('#response').text(); | |
| $(this).addClass('scale-95 bg-violet-100'); | |
| navigator.clipboard.writeText(response) | |
| .then(() => { | |
| $(this).removeClass('scale-95 bg-violet-100') | |
| .addClass('bg-green-50 text-green-700'); | |
| setTimeout(() => { | |
| $(this).removeClass('bg-green-50 text-green-700'); | |
| }, 1000); | |
| Toast.fire({ | |
| icon: 'success', | |
| title: 'Copié avec succès', | |
| text: 'Le contenu a été copié dans votre presse-papiers', | |
| timer: 2000 | |
| }); | |
| }) | |
| .catch(() => { | |
| $(this).removeClass('scale-95 bg-violet-100') | |
| .addClass('bg-red-50 text-red-700'); | |
| setTimeout(() => { | |
| $(this).removeClass('bg-red-50 text-red-700'); | |
| }, 1000); | |
| Toast.fire({ | |
| icon: 'error', | |
| title: 'Erreur de copie', | |
| text: 'Impossible de copier le contenu', | |
| timer: 3000 | |
| }); | |
| }); | |
| }); | |
| // Ajout des styles d'animation personnalisés | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 75% { transform: translateX(5px); } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| .animate-slideUp { | |
| animation: slideUp 0.5s ease-out forwards; | |
| } | |
| .animate-shake { | |
| animation: shake 0.5s ease-in-out; | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| }); | |
| </script> | |
| </body> | |
| </html> |