Spaces:
Running
Running
| <html lang="fr" class="scroll-smooth"> | |
| <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> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.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> | |
| <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> | |
| <style> | |
| /* Styles pour le Glow Up */ | |
| :root { | |
| font-family: 'Inter', sans-serif; | |
| /* Variables pour des transitions plus fluides */ | |
| --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-fast: all 0.15s ease-out; | |
| } | |
| /* Optimisations pour le scroll fluide */ | |
| html { | |
| scroll-behavior: smooth; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| body { | |
| /* Prévenir le reflow lors de la génération */ | |
| will-change: scroll-position; | |
| /* Améliorer les performances sur mobile */ | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .collapsible { | |
| cursor: pointer; | |
| padding: 1rem; | |
| width: 100%; | |
| border: none; | |
| text-align: left; | |
| outline: none; | |
| transition: var(--transition-fast); | |
| /* Optimiser pour les interactions tactiles */ | |
| touch-action: manipulation; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .collapsible:hover { | |
| background-color: #f9fafb; | |
| } | |
| .content { | |
| padding: 0 1rem; | |
| display: none; | |
| overflow: hidden; | |
| background-color: white; | |
| /* Transition plus fluide pour l'ouverture */ | |
| transition: var(--transition-smooth); | |
| } | |
| /* Styles pour la lisibilité du Markdown généré */ | |
| .prose { | |
| max-width: 100% ; | |
| /* Optimiser le rendu du texte */ | |
| text-rendering: optimizeLegibility; | |
| } | |
| #response .prose { | |
| color: #374151; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| /* Prévenir les débordements sur mobile */ | |
| hyphens: auto; | |
| -webkit-hyphens: auto; | |
| -moz-hyphens: auto; | |
| } | |
| .prose p, .prose ul, .prose ol, .prose li { | |
| line-height: 1.75; | |
| } | |
| .prose h1, .prose h2, .prose h3 { | |
| margin-top: 1.5em; | |
| margin-bottom: 0.8em; | |
| line-height: 1.3; | |
| } | |
| /* Animation fadeIn optimisée */ | |
| .animate-fadeIn { | |
| animation: fadeIn 0.4s ease-out forwards; | |
| /* Utiliser GPU pour l'animation */ | |
| transform: translateZ(0); | |
| will-change: opacity, transform; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(15px) translateZ(0); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) translateZ(0); | |
| } | |
| } | |
| /* Styles pour Select2 */ | |
| .select2-container--default .select2-selection--single { | |
| border: 1px solid #d1d5db; | |
| border-radius: 0.75rem; | |
| height: auto; | |
| padding: 0.75rem 1rem; | |
| background-color: white; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| } | |
| .select2-container--default .select2-selection--single .select2-selection__rendered { | |
| color: #111827; | |
| line-height: inherit; | |
| padding-right: 1.5rem; | |
| } | |
| .select2-results__option .course-author { | |
| font-size: 0.875rem; | |
| color: #6b7280; | |
| display: block; | |
| margin-top: 0.1rem; | |
| } | |
| .select2-dropdown { | |
| border-radius: 0.75rem; | |
| border: 1px solid #d1d5db; | |
| box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); | |
| } | |
| /* 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); | |
| } | |
| /* Cacher le marqueur par défaut de <details> */ | |
| summary { | |
| list-style: none; | |
| } | |
| summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| /* Optimisations mobiles */ | |
| @media (max-width: 640px) { | |
| /* Réduire les marges sur mobile pour plus d'espace */ | |
| .max-w-3xl { | |
| max-width: 100%; | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; | |
| } | |
| /* Optimiser l'affichage des sections de contenu */ | |
| #response, #thinking-wrapper { | |
| /* Éviter les débordements horizontaux */ | |
| overflow-x: hidden; | |
| } | |
| /* Améliorer la lisibilité du texte généré */ | |
| .prose { | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| } | |
| /* Réduire l'animation pour économiser la batterie */ | |
| .animate-fadeIn { | |
| animation-duration: 0.2s; | |
| } | |
| } | |
| /* Conteneur de génération avec scroll optimisé */ | |
| .generation-container { | |
| /* Conteneur stable pour éviter les recalculs de layout */ | |
| contain: layout style; | |
| /* Optimiser les performances de scroll */ | |
| transform: translateZ(0); | |
| } | |
| /* Améliorer les performances du textarea */ | |
| textarea { | |
| /* Éviter les reflows pendant la saisie */ | |
| resize: none; | |
| /* Optimiser sur mobile */ | |
| -webkit-appearance: none; | |
| } | |
| /* Optimiser les boutons pour le tactile */ | |
| button { | |
| touch-action: manipulation; | |
| -webkit-tap-highlight-color: transparent; | |
| transition: var(--transition-fast); | |
| } | |
| /* Scroll fluide pour les éléments avec beaucoup de contenu */ | |
| .content-scrollable { | |
| -webkit-overflow-scrolling: touch; | |
| scroll-behavior: smooth; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900"> | |
| <!-- Navbar --> | |
| <nav class="bg-white/90 backdrop-blur-lg border-b border-gray-200 fixed w-full z-50"> | |
| <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center space-x-3"> | |
| <svg class="h-8 w-auto text-violet-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.311a15.045 15.045 0 01-7.5 0C4.508 19.663 2.25 15.184 2.25 10.5 2.25 5.816 5.816 2.25 10.5 2.25c4.684 0 8.25 3.566 8.25 8.25 0 4.684-2.258 9.163-5.25 11.584z" /> | |
| </svg> | |
| <div class="text-xl font-bold text-gray-800">Mariam AI</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-violet-100 text-violet-800"> | |
| Assistant Philosophique | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-24 pb-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden"> | |
| <div class="p-6 sm:p-8"> | |
| <div class="text-center"> | |
| <h1 class="text-3xl font-bold text-gray-900">Gen'Dissertation</h1> | |
| <p class="mt-2 text-md text-gray-600">Créez des dissertations et analyses pertinentes et structurées.</p> | |
| </div> | |
| </div> | |
| <div class="p-6 sm:p-8 border-t border-gray-200 space-y-6"> | |
| <!-- Type Selection --> | |
| <div class="space-y-2"> | |
| <label for="type-select" class="block text-sm font-medium text-gray-700">Type de travail</label> | |
| <select id="type-select" class="w-full rounded-xl border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500 bg-white py-3 px-4"> | |
| <option value="1">Sujet Type 1</option> | |
| <option value="2">Sujet Type 2 (Citation)</option> | |
| <option value="3">Sujet Type 3</option> | |
| </select> | |
| </div> | |
| <!-- Conteneur pour les champs texte (visible par défaut) --> | |
| <div id="text-input-container"> | |
| <!-- Course Selection --> | |
| <div class="space-y-2"> | |
| <label for="course-select" class="block text-sm font-medium text-gray-700">Utiliser un cours comme contexte</label> | |
| <select id="course-select" class="w-full"> | |
| <option value="">Choisir un cours...</option> | |
| </select> | |
| </div> | |
| <!-- Question Input --> | |
| <div class="space-y-2 mt-4"> | |
| <label for="question" class="block text-sm font-medium text-gray-700">Sujet de dissertation</label> | |
| <textarea id="question" rows="4" class="w-full rounded-xl border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500 resize-none bg-white py-3 px-4" placeholder="Saisissez votre sujet de dissertation... ex: 'La liberté consiste-t-elle à faire tout ce que l'on veut ?'"></textarea> | |
| </div> | |
| </div> | |
| <!-- Conteneur pour l'upload d'image (caché par défaut) --> | |
| <div id="image-input-container" class="hidden"> | |
| <div class="space-y-2"> | |
| <label for="image-upload" class="block text-sm font-medium text-gray-700">Charger un document 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 cursor-pointer"/> | |
| <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 --> | |
| <div class="pt-4"> | |
| <button id="submit-btn" class="w-full flex items-center justify-center py-3.5 px-6 rounded-xl bg-violet-600 text-white font-semibold shadow-md shadow-violet-200 hover:bg-violet-700 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2"> | |
| <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" /></svg> | |
| Générer la dissertation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Thinking Process Section (Collapsible) --> | |
| <div id="thinking-wrapper" class="hidden mt-8 generation-container"> | |
| <details id="thinking-container" class="bg-white border border-gray-200 rounded-xl shadow-sm"> | |
| <summary class="flex justify-between items-center p-4 cursor-pointer"> | |
| <h3 class="text-md font-semibold text-gray-700">Processus de pensée de l'IA</h3> | |
| <svg class="h-5 w-5 text-gray-500 transition-transform transform open:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </summary> | |
| <div id="thinking-process" class="p-4 border-t border-gray-200 text-sm text-gray-600 prose prose-sm max-w-none max-h-64 overflow-y-auto content-scrollable"> | |
| <!-- Le contenu du processus de pensée sera injecté ici --> | |
| </div> | |
| </details> | |
| </div> | |
| <!-- Response Section --> | |
| <div id="response" class="hidden mt-6 generation-container"> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 sm:p-8 prose prose-violet max-w-none"> | |
| <!-- Le contenu de la réponse sera injecté ici --> | |
| </div> | |
| </div> | |
| <!-- Action Buttons after generation --> | |
| <div id="action-buttons" class="hidden mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
| <button id="copy-btn" class="w-full flex items-center justify-center py-3 px-6 rounded-xl bg-gray-100 text-gray-800 font-medium border border-gray-200 hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"> | |
| <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg> | |
| Copier le texte | |
| </button> | |
| </div> | |
| <!-- Saved Dissertations Section --> | |
| <div class="mt-12"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Historique</h3> | |
| <div id="dissertations-list" class="space-y-3"> | |
| <!-- La liste des dissertations sauvegardées sera injectée ici --> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Bouton flottant DeepThink --> | |
| <button id="deepthink-btn" class="fixed bottom-6 right-6 z-50 flex items-center bg-indigo-600 text-white px-5 py-3 rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-transform hover:scale-105"> | |
| <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.898 20.562L16.25 22.5l-.648-1.938a3.375 3.375 0 00-2.672-2.672L11.25 18l1.938-.648a3.375 3.375 0 002.672-2.672L16.25 13.5l.648 1.938a3.375 3.375 0 002.672 2.672L21.75 18l-1.938.648a3.375 3.375 0 00-2.672 2.672z" /></svg> | |
| DeepThink | |
| </button> | |
| <script> | |
| $(document).ready(function() { | |
| // --- Initialisations --- | |
| $('#course-select').select2({ | |
| placeholder: 'Optionnel : choisir un cours...', | |
| allowClear: true, | |
| 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 }); | |
| // Variables pour optimiser le scroll | |
| let isScrolling = false; | |
| let scrollTimer = null; | |
| let lastScrollTime = 0; | |
| // Fonction de scroll optimisée avec throttling | |
| function smoothScrollToBottom(force = false) { | |
| const now = Date.now(); | |
| // Throttling : éviter trop d'appels de scroll | |
| if (!force && now - lastScrollTime < 100) { | |
| return; | |
| } | |
| lastScrollTime = now; | |
| // Annuler le timer précédent s'il existe | |
| if (scrollTimer) { | |
| clearTimeout(scrollTimer); | |
| } | |
| // Utiliser requestAnimationFrame pour un scroll plus fluide | |
| if (!isScrolling) { | |
| isScrolling = true; | |
| requestAnimationFrame(() => { | |
| // Scroll fluide vers le bas avec une marge | |
| const targetScrollTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight - 50); | |
| // Utiliser la méthode native pour de meilleures performances | |
| window.scrollTo({ | |
| top: targetScrollTop, | |
| behavior: 'smooth' | |
| }); | |
| // Marquer comme terminé après l'animation | |
| scrollTimer = setTimeout(() => { | |
| isScrolling = false; | |
| }, 200); | |
| }); | |
| } | |
| } | |
| // --- Gestion de l'interface --- | |
| $('#type-select').change(function() { | |
| const type = $(this).val(); | |
| // Cacher les sections de résultat lors du changement de type | |
| $('#thinking-wrapper, #response, #action-buttons').addClass('hidden'); | |
| if (type === '3') { // Sujet Type 3 (anciennement Analyse d'image) | |
| $('#text-input-container').hide(); | |
| $('#image-input-container').show().addClass('animate-fadeIn'); | |
| $('#deepthink-btn').hide(); | |
| $('#submit-btn').html('<svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>Analyser le sujet'); | |
| $('label[for="image-upload"]').text("Charger un document pour analyse (image, etc.)"); | |
| } else { // Dissertation texte | |
| $('#text-input-container').show().addClass('animate-fadeIn'); | |
| $('#image-input-container').hide(); | |
| $('#deepthink-btn').show(); | |
| $('#submit-btn').html('<svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" /></svg>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').addClass('animate-fadeIn'); | |
| reader.readAsDataURL(e.target.files[0]); | |
| } | |
| }); | |
| // --- Logique de Génération en Streaming Optimisée --- | |
| 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-wrapper, #response, #action-buttons').addClass('hidden'); | |
| $('#thinking-container').prop('open', false); | |
| const thinkingDiv = $('#thinking-process'); | |
| const responseDiv = $('#response > div'); | |
| thinkingDiv.html(''); | |
| responseDiv.html(''); | |
| let fullResponseText = '', fullThinkingText = '', firstChunkReceived = false; | |
| // Compteur pour optimiser les updates | |
| let chunkCount = 0; | |
| const updateFrequency = 3; // Mettre à jour tous les 3 chunks pour réduire les recalculs | |
| 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(); | |
| let shouldUpdate = false; | |
| for (const line of lines) { | |
| if (line.trim() === '') continue; | |
| try { | |
| const data = JSON.parse(line.trim()); | |
| chunkCount++; | |
| if (data.type === 'thought') { | |
| if (!$('#thinking-wrapper').is(':visible')) { | |
| $('#thinking-wrapper').removeClass('hidden').addClass('animate-fadeIn'); | |
| } | |
| fullThinkingText += data.content; | |
| shouldUpdate = true; | |
| } else if (data.type === 'answer') { | |
| if (!$('#response').is(':visible')) { | |
| $('#response').removeClass('hidden').addClass('animate-fadeIn'); | |
| } | |
| fullResponseText += data.content; | |
| shouldUpdate = true; | |
| } else if (data.type === 'error') { | |
| throw new Error(data.content); | |
| } | |
| } catch (e) { | |
| console.error("Erreur JSON parse:", line, e); | |
| } | |
| } | |
| // Mettre à jour le DOM moins fréquemment pour de meilleures performances | |
| if (shouldUpdate && (chunkCount % updateFrequency === 0 || done)) { | |
| if (fullThinkingText) { | |
| thinkingDiv.html(marked.parse(fullThinkingText)); | |
| } | |
| if (fullResponseText) { | |
| responseDiv.html(marked.parse(fullResponseText)); | |
| } | |
| // Scroll optimisé vers le bas | |
| smoothScrollToBottom(); | |
| } | |
| } | |
| // Mise à jour finale | |
| if (fullThinkingText) { | |
| thinkingDiv.html(marked.parse(fullThinkingText)); | |
| } | |
| if (fullResponseText) { | |
| responseDiv.html(marked.parse(fullResponseText)); | |
| } | |
| $('#action-buttons').removeClass('hidden').addClass('animate-fadeIn'); | |
| Toast.fire({ icon: 'success', title: 'Génération terminée !' }); | |
| let title; | |
| if ($('#type-select').val() === '3') { | |
| const fileName = $('#image-upload')[0].files[0]?.name || "Analyse de document"; | |
| title = `Analyse (Sujet Type 3): ${fileName}`; | |
| } else { | |
| title = $('#question').val().trim(); | |
| } | |
| saveDissertation(title, fullResponseText); | |
| // Scroll final pour s'assurer que tout est visible | |
| smoothScrollToBottom(true); | |
| } catch (error) { | |
| Swal.fire({ icon: 'error', title: 'Erreur', text: error.message || "Une erreur inconnue est survenue." }); | |
| } | |
| } | |
| // --- Gestion des Clics --- | |
| $('#submit-btn, #deepthink-btn').click(function() { | |
| 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 un document.', '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 de gestion de l'historique --- | |
| 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(); | |
| function saveDissertation(title, content) { | |
| if (!title || !content) return; | |
| let saved = JSON.parse(localStorage.getItem('dissertations')) || []; | |
| saved.unshift({ title, content, timestamp: Date.now() }); | |
| if(saved.length > 10) saved.pop(); | |
| 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 text-center py-4">Aucune dissertation dans l\'historique.</p>'); | |
| return; | |
| } | |
| saved.forEach((diss, index) => { | |
| const date = moment(diss.timestamp).fromNow(); | |
| const title = diss.title.length > 60 ? diss.title.substring(0, 60) + '...' : diss.title; | |
| const item = $(` | |
| <div class="border border-gray-200 bg-white rounded-xl shadow-sm transition-shadow hover:shadow-md"> | |
| <button class="collapsible rounded-t-xl w-full text-left"> | |
| <div class="flex justify-between items-center w-full p-4"> | |
| <span class="font-medium text-gray-800">${title}</span> | |
| <span class="text-gray-500 text-sm flex-shrink-0 ml-4">${date}</span> | |
| </div> | |
| </button> | |
| <div class="content prose max-w-none border-t border-gray-200"> | |
| <div class="inner-content p-4 content-scrollable"></div> | |
| <div class="p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl"> | |
| <button class="delete-btn text-sm text-red-600 hover:text-red-800 font-medium" data-index="${index}">Supprimer</button> | |
| </div> | |
| </div> | |
| </div> | |
| `); | |
| item.find('.inner-content').html(marked.parse(diss.content)); | |
| list.append(item); | |
| }); | |
| } | |
| // Optimiser l'ouverture des dissertations avec une transition plus fluide | |
| $('#dissertations-list').on('click', '.collapsible', function() { | |
| const content = $(this).next('.content'); | |
| const isVisible = content.is(':visible'); | |
| // Animation plus fluide avec easing | |
| content.stop(true, true).slideToggle({ | |
| duration: 300, | |
| easing: 'swing', | |
| start: function() { | |
| $(this).css('overflow', 'hidden'); | |
| }, | |
| complete: function() { | |
| $(this).css('overflow', isVisible ? 'hidden' : 'visible'); | |
| } | |
| }); | |
| $(this).toggleClass("active"); | |
| }); | |
| $('#dissertations-list').on('click', '.delete-btn', function(e) { | |
| e.stopPropagation(); // Empêcher le collapsible de se fermer | |
| const index = $(this).data('index'); | |
| deleteDissertation(index); | |
| }); | |
| $('#copy-btn').click(function() { | |
| const htmlToCopy = $('#response > div').html(); | |
| // Pour copier le Markdown brut (plus fidèle) | |
| const textToCopy = new DOMParser().parseFromString(htmlToCopy, 'text/html').body.textContent || ""; | |
| navigator.clipboard.writeText(textToCopy).then(() => { | |
| Toast.fire({ icon: 'success', title: 'Copié dans le presse-papiers!' }); | |
| }).catch(() => { | |
| Toast.fire({ icon: 'error', title: 'Erreur de copie' }); | |
| }); | |
| }); | |
| // Optimisation pour les événements de scroll sur mobile | |
| let ticking = false; | |
| function updateScrollPosition() { | |
| // Code pour gérer les changements de position de scroll si nécessaire | |
| ticking = false; | |
| } | |
| window.addEventListener('scroll', function() { | |
| if (!ticking) { | |
| requestAnimationFrame(updateScrollPosition); | |
| ticking = true; | |
| } | |
| }, { passive: true }); | |
| // Optimisation du resize pour mobile | |
| let resizeTimer; | |
| window.addEventListener('resize', function() { | |
| clearTimeout(resizeTimer); | |
| resizeTimer = setTimeout(function() { | |
| // Recalculer les dimensions si nécessaire | |
| if (window.innerWidth <= 640) { | |
| // Optimisations spécifiques mobile | |
| $('body').addClass('mobile-optimized'); | |
| } else { | |
| $('body').removeClass('mobile-optimized'); | |
| } | |
| }, 250); | |
| }, { passive: true }); | |
| // Optimisation tactile pour mobile | |
| if ('ontouchstart' in window) { | |
| $('body').addClass('touch-device'); | |
| // Améliorer les interactions tactiles | |
| $(document).on('touchstart', 'button, .collapsible', function() { | |
| $(this).addClass('touch-active'); | |
| }); | |
| $(document).on('touchend', 'button, .collapsible', function() { | |
| const element = $(this); | |
| setTimeout(() => element.removeClass('touch-active'), 150); | |
| }); | |
| } | |
| // Init | |
| updateSavedDissertationsList(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |