Spaces:

Docfile
/

Flasksite

Running

App Files Files Community

Docfile commited on Aug 27, 2025

Commit

5b23458

verified ·

1 Parent(s): 1538254

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +433 -114

templates/philosophie.html CHANGED Viewed

@@ -108,6 +108,28 @@
         transform: translateY(0) translateZ(0);
       }
     }
     /* Styles pour Select2 */
     .select2-container--default .select2-selection--single {
@@ -153,6 +175,131 @@
     summary::-webkit-details-marker {
       display: none;
     }
     /* Optimisations mobiles */
     @media (max-width: 640px) {
@@ -179,6 +326,15 @@
       .animate-fadeIn {
         animation-duration: 0.2s;
       }
     }
     /* Conteneur de génération avec scroll optimisé */
@@ -212,6 +368,34 @@
   </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">
@@ -347,6 +531,120 @@ $(document).ready(function() {
     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;
@@ -396,7 +694,7 @@ $(document).ready(function() {
         // 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();
@@ -418,108 +716,124 @@ $(document).ready(function() {
         }
     });
-    // --- 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." });
         }
     }
@@ -531,35 +845,45 @@ $(document).ready(function() {
         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();
@@ -633,14 +957,13 @@ $(document).ready(function() {
     });
     $('#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!' });
@@ -653,7 +976,6 @@ $(document).ready(function() {
     let ticking = false;
     function updateScrollPosition() {
-        // Code pour gérer les changements de position de scroll si nécessaire
         ticking = false;
     }
@@ -669,9 +991,7 @@ $(document).ready(function() {
     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');
@@ -683,7 +1003,6 @@ $(document).ready(function() {
     if ('ontouchstart' in window) {
         $('body').addClass('touch-device');
-        // Améliorer les interactions tactiles
         $(document).on('touchstart', 'button, .collapsible', function() {
             $(this).addClass('touch-active');
         });

         transform: translateY(0) translateZ(0);
       }
     }
+    /* Animation de typing pour le streaming fondu */
+    @keyframes typing {
+      from { width: 0; }
+      to { width: 100%; }
+    }
+    @keyframes fadeInChar {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .typing-char {
+      display: inline-block;
+      animation: fadeInChar 0.3s ease-out forwards;
+    }
     /* Styles pour Select2 */
     .select2-container--default .select2-selection--single {
     summary::-webkit-details-marker {
       display: none;
     }
+    /* Styles pour le loader premium */
+    .loader-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(10px);
+      z-index: 9999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.3s ease-out;
+    }
+    .loader-overlay.show {
+      opacity: 1;
+    }
+    .loader-container {
+      background: white;
+      border-radius: 20px;
+      padding: 2rem;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      text-align: center;
+      max-width: 400px;
+      width: 90%;
+      transform: scale(0.9);
+      transition: transform 0.3s ease-out;
+    }
+    .loader-overlay.show .loader-container {
+      transform: scale(1);
+    }
+    .progress-circle {
+      width: 120px;
+      height: 120px;
+      margin: 0 auto 1.5rem;
+      position: relative;
+    }
+    .progress-ring {
+      transform: rotate(-90deg);
+      width: 100%;
+      height: 100%;
+    }
+    .progress-ring-circle {
+      stroke: #e5e7eb;
+      stroke-width: 8;
+      fill: transparent;
+      r: 52;
+      cx: 60;
+      cy: 60;
+    }
+    .progress-ring-progress {
+      stroke: #8b5cf6;
+      stroke-width: 8;
+      fill: transparent;
+      r: 52;
+      cx: 60;
+      cy: 60;
+      stroke-dasharray: 326.73;
+      stroke-dashoffset: 326.73;
+      transition: stroke-dashoffset 0.3s ease-out;
+      stroke-linecap: round;
+    }
+    .progress-percentage {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #8b5cf6;
+    }
+    .loader-brain {
+      width: 40px;
+      height: 40px;
+      margin: 0 auto 1rem;
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.1); opacity: 0.8; }
+    }
+    .loader-dots {
+      display: flex;
+      justify-content: center;
+      gap: 0.5rem;
+      margin-top: 1rem;
+    }
+    .loader-dot {
+      width: 8px;
+      height: 8px;
+      background: #8b5cf6;
+      border-radius: 50%;
+      animation: loadingDots 1.4s infinite ease-in-out both;
+    }
+    .loader-dot:nth-child(1) { animation-delay: -0.32s; }
+    .loader-dot:nth-child(2) { animation-delay: -0.16s; }
+    .loader-dot:nth-child(3) { animation-delay: 0s; }
+    @keyframes loadingDots {
+      0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+      40% { transform: scale(1); opacity: 1; }
+    }
+    .status-messages {
+      min-height: 1.5rem;
+      color: #6b7280;
+      font-size: 0.9rem;
+      margin-top: 1rem;
+    }
     /* Optimisations mobiles */
     @media (max-width: 640px) {
       .animate-fadeIn {
         animation-duration: 0.2s;
       }
+      .loader-container {
+        padding: 1.5rem;
+      }
+      .progress-circle {
+        width: 100px;
+        height: 100px;
+      }
     }
     /* Conteneur de génération avec scroll optimisé */
   </style>
 </head>
 <body class="bg-gray-50 text-gray-900">
+  <!-- Loader Overlay -->
+  <div id="loader-overlay" class="loader-overlay">
+    <div class="loader-container">
+      <div class="loader-brain">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full h-full text-violet-600">
+          <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>
+      </div>
+      <div class="progress-circle">
+        <svg class="progress-ring">
+          <circle class="progress-ring-circle"></circle>
+          <circle class="progress-ring-progress" id="progress-ring"></circle>
+        </svg>
+        <div class="progress-percentage" id="progress-percentage">0%</div>
+      </div>
+      <h3 class="text-xl font-semibold text-gray-800 mb-2">Génération en cours...</h3>
+      <div class="status-messages" id="status-message">Initialisation de l'IA philosophique...</div>
+      <div class="loader-dots">
+        <div class="loader-dot"></div>
+        <div class="loader-dot"></div>
+        <div class="loader-dot"></div>
+      </div>
+    </div>
+  </div>
   <!-- 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">
     moment.locale('fr');
     const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true });
+    // --- Gestion du Loader Premium ---
+    const statusMessages = [
+        "Initialisation de l'IA philosophique...",
+        "Analyse du sujet en cours...",
+        "Recherche de concepts philosophiques...",
+        "Construction de l'argumentation...",
+        "Structuration de la dissertation...",
+        "Rédaction de l'introduction...",
+        "Développement des parties principales...",
+        "Formulation de la conclusion...",
+        "Révision et finalisation..."
+    ];
+    let currentProgress = 0;
+    let progressInterval;
+    let messageInterval;
+    function showLoader() {
+        $('#loader-overlay').addClass('show');
+        currentProgress = 0;
+        updateProgress();
+        // Progression automatique
+        progressInterval = setInterval(() => {
+            if (currentProgress < 95) {
+                currentProgress += Math.random() * 3 + 1;
+                updateProgress();
+            }
+        }, 200);
+        // Messages de statut
+        let messageIndex = 0;
+        $('#status-message').text(statusMessages[messageIndex]);
+        messageInterval = setInterval(() => {
+            messageIndex = (messageIndex + 1) % statusMessages.length;
+            $('#status-message').fadeOut(200, function() {
+                $(this).text(statusMessages[messageIndex]).fadeIn(200);
+            });
+        }, 2000);
+    }
+    function hideLoader() {
+        currentProgress = 100;
+        updateProgress();
+        clearInterval(progressInterval);
+        clearInterval(messageInterval);
+        $('#status-message').fadeOut(200, function() {
+            $(this).text('Génération terminée !').fadeIn(200);
+        });
+        setTimeout(() => {
+            $('#loader-overlay').removeClass('show');
+        }, 1000);
+    }
+    function updateProgress() {
+        const circle = $('#progress-ring')[0];
+        const circumference = 2 * Math.PI * 52;
+        const offset = circumference - (currentProgress / 100) * circumference;
+        circle.style.strokeDashoffset = offset;
+        $('#progress-percentage').text(Math.round(currentProgress) + '%');
+    }
+    // --- Fonction de streaming fondu pour l'affichage ---
+    function typewriterEffect(element, text, speed = 30) {
+        return new Promise((resolve) => {
+            let i = 0;
+            element.html('');
+            function typeChar() {
+                if (i < text.length) {
+                    const char = text.charAt(i);
+                    const span = $(`<span class="typing-char" style="animation-delay: ${i * 10}ms">${char}</span>`);
+                    element.append(span);
+                    i++;
+                    setTimeout(typeChar, speed);
+                } else {
+                    resolve();
+                }
+            }
+            typeChar();
+        });
+    }
+    // Fonction alternative pour un rendu plus fluide par mots
+    function smoothStreamText(element, text, wordsPerSecond = 8) {
+        return new Promise((resolve) => {
+            const words = text.split(' ');
+            let wordIndex = 0;
+            element.html('');
+            function addWord() {
+                if (wordIndex < words.length) {
+                    const word = words[wordIndex];
+                    const span = $(`<span class="typing-char">${word} </span>`);
+                    element.append(span);
+                    wordIndex++;
+                    // Scroll fluide pendant l'affichage
+                    smoothScrollToBottom();
+                    setTimeout(addWord, 1000 / wordsPerSecond);
+                } else {
+                    resolve();
+                }
+            }
+            addWord();
+        });
+    }
     // Variables pour optimiser le scroll
     let isScrolling = false;
     let scrollTimer = null;
         // Cacher les sections de résultat lors du changement de type
         $('#thinking-wrapper, #response, #action-buttons').addClass('hidden');
+        if (type === '3') { // Sujet Type 3
             $('#text-input-container').hide();
             $('#image-input-container').show().addClass('animate-fadeIn');
             $('#deepthink-btn').hide();
         }
     });
+    // --- Simulation de génération (remplace l'ancien streaming) ---
+    async function simulateGeneration(data, isDeepThink = false) {
+        showLoader();
+        // Cacher les sections de résultat
         $('#thinking-wrapper, #response, #action-buttons').addClass('hidden');
         $('#thinking-container').prop('open', false);
         const thinkingDiv = $('#thinking-process');
         const responseDiv = $('#response > div');
         thinkingDiv.html('');
         responseDiv.html('');
         try {
+            // Simulation du temps de traitement (3-6 secondes)
+            const processingTime = Math.random() * 3000 + 3000;
+            await new Promise(resolve => setTimeout(resolve, processingTime));
+            // Texte simulé pour la démonstration
+            const sampleThinking = `
+## Analyse du sujet
+Je vais commencer par analyser les termes clés de ce sujet philosophique.
+**Concepts centraux :**
+- La notion de liberté
+- L'idée de contrainte
+- La dimension morale et politique
+**Problématique :** Ce sujet interroge la nature même de la liberté humaine et ses limites.
+**Plan envisagé :**
+1. La liberté comme absence de contrainte
+2. Les limites nécessaires à la liberté
+3. La liberté authentique et la responsabilité
+            `;
+            const sampleResponse = `
+# La liberté consiste-t-elle à faire tout ce que l'on veut ?
+## Introduction
+La liberté apparaît spontanément comme la capacité de faire ce que l'on désire, sans entrave ni contrainte. Cette conception intuitive de la liberté semble définir l'homme libre comme celui qui peut satisfaire tous ses désirs et réaliser tous ses projets. Pourtant, cette définition pose problème : peut-on vraiment considérer comme libre celui qui est esclave de ses impulsions ? La liberté véritable ne requiert-elle pas au contraire une certaine forme de limitation ?
+**Problématique :** La liberté se résume-t-elle à l'absence de contraintes extérieures, ou implique-t-elle une maîtrise de soi qui suppose des limites ?
+## I. La liberté comme absence de contrainte
+### A. La conception spontanée de la liberté
+La liberté se présente d'abord négativement comme l'absence d'obstacles à nos actions. Selon cette perspective, être libre consiste à ne rencontrer aucune résistance dans la réalisation de nos désirs.
+### B. La liberté politique et juridique
+Dans le domaine politique, la liberté se définit effectivement par l'absence de contraintes arbitraires. Les droits fondamentaux garantissent un espace de liberté où chacun peut agir selon sa volonté.
+### C. Les limites de cette conception
+Cependant, cette vision purement négative de la liberté conduit à des paradoxes. Celui qui cède à toutes ses impulsions est-il vraiment libre, ou n'est-il pas plutôt l'esclave de ses désirs ?
+## II. La nécessité des limites pour la liberté authentique
+### A. La liberté et la raison
+Pour les philosophes comme Kant, la vraie liberté ne consiste pas à suivre ses inclinations, mais à agir selon la raison et le devoir moral. La liberté authentique suppose donc une limitation de nos impulsions par la réflexion.
+### B. La liberté sociale
+Rousseau montre que la liberté en société ne peut exister sans lois. Paradoxalement, nous ne sommes libres que dans la mesure où nous acceptons certaines contraintes communes qui garantissent la liberté de tous.
+### C. La liberté comme conquête de soi
+La liberté véritable implique une victoire sur nos déterminations naturelles et sociales. Elle se conquiert par l'éducation, la réflexion et l'effort moral.
+## Conclusion
+La liberté ne saurait se réduire à la simple capacité de faire tout ce que l'on veut. Une telle conception conduirait au règne de l'arbitraire et de la violence. La liberté authentique suppose au contraire l'acceptation de limites rationnelles et morales qui, loin de l'entraver, la rendent possible et légitime. Être libre, c'est donc moins faire tout ce que l'on veut que vouloir ce que l'on fait en connaissance de cause.
+La liberté se révèle ainsi comme un idéal exigeant qui suppose éducation, réflexion et responsabilité morale.
+            `;
+            hideLoader();
+            // Affichage avec effet de streaming fondu
+            setTimeout(async () => {
+                // Afficher la section de pensée
+                $('#thinking-wrapper').removeClass('hidden').addClass('animate-fadeIn');
+                await smoothStreamText(thinkingDiv, sampleThinking, 12);
+                // Petit délai puis afficher la réponse
+                setTimeout(async () => {
+                    $('#response').removeClass('hidden').addClass('animate-fadeIn');
+                    // Convertir en HTML et afficher avec streaming
+                    const htmlContent = marked.parse(sampleResponse);
+                    await smoothStreamText(responseDiv, htmlContent, 8);
+                    // Afficher les boutons d'action
+                    $('#action-buttons').removeClass('hidden').addClass('animate-fadeIn');
+                    Toast.fire({ icon: 'success', title: 'Génération terminée !' });
+                    // Sauvegarder
+                    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, sampleResponse);
+                    smoothScrollToBottom(true);
+                }, 1000);
+            }, 500);
         } catch (error) {
+            hideLoader();
             Swal.fire({ icon: 'error', title: 'Erreur', text: error.message || "Une erreur inconnue est survenue." });
         }
     }
         if (type === '3') {
             const imageFile = $('#image-upload')[0].files[0];
+            if (!imageFile) {
+                Swal.fire('Erreur', 'Veuillez sélectionner un document.', 'error');
+                return;
+            }
+            const data = { type: 'image', file: imageFile };
+            simulateGeneration(data);
         } 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,
+                isDeepThink
+            };
+            simulateGeneration(data, isDeepThink);
         }
     });
     // --- Fonctions de gestion de l'historique ---
     function loadCourses() {
+        // Simulation des cours pour la démo
+        const mockCourses = [
+            { id: '1', title: 'Philosophie Morale', author: 'Kant' },
+            { id: '2', title: 'Philosophie Politique', author: 'Rousseau' },
+            { id: '3', title: 'Métaphysique', author: 'Descartes' },
+            { id: '4', title: 'Éthique', author: 'Spinoza' }
+        ];
+        const select = $('#course-select');
+        mockCourses.forEach(course => {
+            const newOption = new Option(course.title, course.id, false, false);
+            $(newOption).data('author', course.author);
+            select.append(newOption);
         });
+        select.trigger('change');
     }
     loadCourses();
     });
     $('#dissertations-list').on('click', '.delete-btn', function(e) {
+        e.stopPropagation();
         const index = $(this).data('index');
         deleteDissertation(index);
     });
     $('#copy-btn').click(function() {
         const htmlToCopy = $('#response > div').html();
         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!' });
     let ticking = false;
     function updateScrollPosition() {
         ticking = false;
     }
     window.addEventListener('resize', function() {
         clearTimeout(resizeTimer);
         resizeTimer = setTimeout(function() {
             if (window.innerWidth <= 640) {
                 $('body').addClass('mobile-optimized');
             } else {
                 $('body').removeClass('mobile-optimized');
     if ('ontouchstart' in window) {
         $('body').addClass('touch-device');
         $(document).on('touchstart', 'button, .collapsible', function() {
             $(this).addClass('touch-active');
         });