Update templates/philosophie.html

templates/philosophie.html

@@ -18,25 +18,162 @@
     /* 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;
+      --violet-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
     }
     
-    /* 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;
     }
-    
+
+    /* Loader magnifique avec animations */
+    .progress-container {
+      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+      border: 2px solid #e2e8f0;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .progress-container::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
+      animation: shimmer 2s infinite;
+    }
+
+    @keyframes shimmer {
+      0% { left: -100%; }
+      100% { left: 100%; }
+    }
+
+    .progress-bar {
+      background: var(--violet-gradient);
+      height: 100%;
+      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+    }
+
+    .progress-bar::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
+      animation: progressGlow 2s ease-in-out infinite;
+    }
+
+    @keyframes progressGlow {
+      0%, 100% { transform: translateX(-100%) skewX(-15deg); }
+      50% { transform: translateX(200%) skewX(-15deg); }
+    }
+
+    .loading-dots {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .loading-dots span {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #8b5cf6;
+      margin: 0 2px;
+      animation: loadingDots 1.4s infinite ease-in-out both;
+    }
+
+    .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
+    .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
+
+    @keyframes loadingDots {
+      0%, 80%, 100% { 
+        transform: scale(0.8);
+        opacity: 0.5;
+      }
+      40% { 
+        transform: scale(1.2);
+        opacity: 1;
+      }
+    }
+
+    /* Animation de fondu pour le streaming */
+    .streaming-text {
+      opacity: 0;
+      animation: fadeInUp 0.6s ease-out forwards;
+    }
+
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .word-by-word {
+      display: inline;
+      opacity: 0;
+      animation: wordFadeIn 0.3s ease-out forwards;
+    }
+
+    @keyframes wordFadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    /* Pulse effect pour le contenu en cours de génération */
+    .generating-pulse {
+      animation: pulseGlow 2s ease-in-out infinite;
+    }
+
+    @keyframes pulseGlow {
+      0%, 100% {
+        box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
+        transform: scale(1);
+      }
+      50% {
+        box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
+        transform: scale(1.01);
+      }
+    }
+
+    /* Styles pour le texte en cours de streaming */
+    .streaming-cursor::after {
+      content: '|';
+      animation: cursorBlink 1s infinite;
+      color: #8b5cf6;
+      margin-left: 2px;
+    }
+
+    @keyframes cursorBlink {
+      0%, 50% { opacity: 1; }
+      51%, 100% { opacity: 0; }
+    }
+
     .collapsible { 
       cursor: pointer; 
       padding: 1rem; 
@@ -45,7 +182,6 @@
       text-align: left; 
       outline: none; 
       transition: var(--transition-fast);
-      /* Optimiser pour les interactions tactiles */
       touch-action: manipulation;
       -webkit-tap-highlight-color: transparent;
     }
@@ -59,14 +195,11 @@
       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% !important; 
-      /* Optimiser le rendu du texte */
       text-rendering: optimizeLegibility;
     }
     
@@ -74,7 +207,6 @@
       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;
@@ -90,10 +222,8 @@
       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;
     }
@@ -108,30 +238,7 @@
         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 { 
       border: 1px solid #d1d5db; 
       border-radius: 0.75rem; 
@@ -160,14 +267,12 @@
       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; 
     }
@@ -175,192 +280,44 @@
     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) {
-      /* 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;
       }
-
-      .loader-container {
-        padding: 1.5rem;
-      }
-
-      .progress-circle {
-        width: 100px;
-        height: 100px;
-      }
     }
     
-    /* 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;
@@ -368,34 +325,6 @@
   </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">
@@ -437,7 +366,7 @@
             </select>
           </div>
           
-          <!-- Conteneur pour les champs texte (visible par défaut) -->
+          <!-- Conteneur pour les champs texte -->
           <div id="text-input-container">
             <!-- Course Selection -->
             <div class="space-y-2">
@@ -453,7 +382,7 @@
             </div>
           </div>
 
-          <!-- Conteneur pour l'upload d'image (caché par défaut) -->
+          <!-- Conteneur pour l'upload d'image -->
           <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>
@@ -471,8 +400,43 @@
           </div>
         </div>
       </div>
+
+      <!-- Loading Section -->
+      <div id="loading-section" class="hidden mt-8 generation-container">
+        <div class="bg-white border border-gray-200 rounded-xl shadow-lg p-8 generating-pulse">
+          <div class="text-center space-y-6">
+            <div class="mx-auto w-16 h-16 relative">
+              <svg class="w-16 h-16 text-violet-600 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </div>
+            
+            <div class="space-y-3">
+              <h3 class="text-xl font-semibold text-gray-800">Génération en cours</h3>
+              <p id="loading-message" class="text-gray-600">Initialisation de l'IA philosophique</p>
+              <div class="loading-dots">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+            
+            <!-- Barre de progression -->
+            <div class="space-y-2">
+              <div class="flex justify-between text-sm text-gray-600">
+                <span>Progression</span>
+                <span id="progress-percentage">0%</span>
+              </div>
+              <div class="progress-container w-full h-3 rounded-full">
+                <div id="progress-bar" class="progress-bar w-0 rounded-full"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       
-      <!-- Thinking Process Section (Collapsible) -->
+      <!-- Thinking Process Section -->
       <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">
@@ -482,7 +446,6 @@
             </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>
@@ -490,11 +453,10 @@
       <!-- 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 -->
+      <!-- Action Buttons -->
       <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>
@@ -506,7 +468,6 @@
       <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>
@@ -524,182 +485,263 @@ $(document).ready(function() {
     $('#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>`); },
+        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 });
 
-    // --- 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..."
-    ];
-
+    // Variables pour le loader et streaming
     let currentProgress = 0;
     let progressInterval;
-    let messageInterval;
+    let streamingTimeout;
+
+    // Messages de chargement rotatifs
+    const loadingMessages = [
+        "Initialisation de l'IA philosophique",
+        "Analyse du sujet proposé", 
+        "Recherche des concepts clés",
+        "Construction de l'argumentation",
+        "Structuration de la dissertation",
+        "Vérification de la cohérence",
+        "Finalisation de la réponse"
+    ];
 
-    function showLoader() {
-        $('#loader-overlay').addClass('show');
+    // Fonction pour simuler le progress loader
+    function startProgressLoader() {
         currentProgress = 0;
-        updateProgress();
+        let messageIndex = 0;
         
-        // Progression automatique
+        $('#loading-section').removeClass('hidden').addClass('animate-fadeIn');
+        $('#progress-bar').css('width', '0%');
+        $('#progress-percentage').text('0%');
+        
+        // Animation du message
+        const messageInterval = setInterval(() => {
+            $('#loading-message').fadeOut(300, function() {
+                $(this).text(loadingMessages[messageIndex]).fadeIn(300);
+                messageIndex = (messageIndex + 1) % loadingMessages.length;
+            });
+        }, 2000);
+
+        // Animation de la barre de progression
         progressInterval = setInterval(() => {
             if (currentProgress < 95) {
-                currentProgress += Math.random() * 3 + 1;
-                updateProgress();
+                // Progression plus rapide au début, plus lente vers la fin
+                const increment = currentProgress < 30 ? Math.random() * 8 + 3 : 
+                                 currentProgress < 60 ? Math.random() * 4 + 2 : 
+                                 Math.random() * 2 + 0.5;
+                
+                currentProgress = Math.min(currentProgress + increment, 95);
+                updateProgressBar(currentProgress);
             }
-        }, 200);
+        }, 300);
 
-        // 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);
+        // Nettoyer après 30 secondes max
+        setTimeout(() => {
+            clearInterval(messageInterval);
+            clearInterval(progressInterval);
+            completeProgress();
+        }, 30000);
     }
 
-    function hideLoader() {
-        currentProgress = 100;
-        updateProgress();
+    function updateProgressBar(progress) {
+        $('#progress-bar').css('width', progress + '%');
+        $('#progress-percentage').text(Math.round(progress) + '%');
+    }
+
+    function completeProgress() {
         clearInterval(progressInterval);
-        clearInterval(messageInterval);
-        
-        $('#status-message').fadeOut(200, function() {
-            $(this).text('Génération terminée !').fadeIn(200);
-        });
+        currentProgress = 100;
+        updateProgressBar(100);
         
         setTimeout(() => {
-            $('#loader-overlay').removeClass('show');
-        }, 1000);
+            $('#loading-section').fadeOut(500, function() {
+                startStreamingDisplay();
+            });
+        }, 800);
     }
 
-    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 pour démarrer l'affichage en streaming avec effet de fondu
+    function startStreamingDisplay() {
+        // Simuler des données reçues (remplacer par vraies données de l'API)
+        simulateStreamingData();
     }
 
-    // --- 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();
-        });
+    // Simulation du streaming avec de vraies données (remplacer par l'appel API réel)
+    function simulateStreamingData() {
+        // Exemple de données - remplacer par les vraies données de votre API
+        const sampleThinking = `## Analyse du sujet
+
+Le sujet "La liberté consiste-t-elle à faire tout ce que l'on veut ?" interroge la nature même de la liberté. Il faut distinguer entre liberté et licence, entre pouvoir et droit.
+
+## Plan envisagé
+1. La liberté comme absence de contraintes
+2. Les limites nécessaires à la liberté
+3. La liberté authentique comme autodétermination`;
+
+        const sampleResponse = `# La liberté consiste-t-elle à faire tout ce que l'on veut ?
+
+## Introduction
+
+La question de la liberté traverse toute l'histoire de la philosophie. À première vue, être libre semble signifier pouvoir agir selon ses désirs, sans contrainte. Cependant, cette conception spontanée de la liberté pose problème : peut-on vraiment identifier liberté et licence ? La liberté véritable ne suppose-t-elle pas au contraire certaines limites ?
+
+## I. La liberté comme absence de contraintes
+
+### A. La conception commune de la liberté
+
+Dans l'usage courant, être libre c'est faire ce que l'on veut, quand on le veut. Cette conception négative de la liberté la définit par l'absence d'obstacles extérieurs à nos actions.
+
+### B. La liberté naturelle selon Hobbes
+
+Thomas Hobbes définit la liberté comme "l'absence d'obstacles extérieurs". Dans l'état de nature, chaque individu a le droit à tout, y compris au corps d'autrui.
+
+## II. Les limites nécessaires à la liberté
+
+### A. La liberté des uns s'arrête où commence celle des autres
+
+John Stuart Mill, dans "De la liberté", établit le principe de non-nuisance : ma liberté ne doit pas porter atteinte à celle d'autrui.
+
+### B. Les contraintes comme conditions de la liberté
+
+Paradoxalement, certaines contraintes peuvent être libératrices. Les règles du jeu au tennis ne limitent pas le joueur, elles rendent le jeu possible.
+
+## III. La liberté authentique comme autodétermination
+
+### A. La liberté selon Kant
+
+Pour Kant, la vraie liberté n'est pas de suivre ses inclinations, mais d'agir selon des principes rationnels que l'on s'est donnés à soi-même.
+
+### B. L'autonomie comme essence de la liberté
+
+Être libre, c'est être autonome, c'est-à-dire se donner ses propres lois. Cela implique une maîtrise de soi et une réflexion sur ses actes.
+
+## Conclusion
+
+La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on veut. Une telle conception conduirait au chaos et à la négation même de la liberté. La véritable liberté réside dans l'autodétermination rationnelle, dans la capacité à agir selon des principes que l'on s'est librement choisis. Ainsi, les contraintes ne s'opposent pas nécessairement à la liberté ; elles peuvent même la rendre possible.`;
+
+        // Démarrer le streaming avec effet de fondu
+        startWordByWordStreaming(sampleThinking, sampleResponse);
     }
 
-    // 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);
+    // Fonction pour l'affichage mot par mot avec effet de fondu
+    function startWordByWordStreaming(thinkingText, responseText) {
+        // Afficher d'abord la section de pensée
+        $('#thinking-wrapper').removeClass('hidden').addClass('animate-fadeIn');
+        streamTextWordByWord('#thinking-process', thinkingText, 50, () => {
+            // Une fois la pensée terminée, afficher la réponse
+            $('#response').removeClass('hidden').addClass('animate-fadeIn');
+            streamTextWordByWord('#response > div', responseText, 30, () => {
+                // Une fois terminé, afficher les boutons d'action
+                $('#action-buttons').removeClass('hidden').addClass('animate-fadeIn');
+                Toast.fire({ icon: 'success', title: 'Génération terminée !' });
+                
+                // Sauvegarder la dissertation
+                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 {
-                    resolve();
+                    title = $('#question').val().trim();
                 }
-            }
-            
-            addWord();
+                saveDissertation(title, responseText);
+            });
         });
     }
 
-    // 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();
+    // Fonction pour streamer le texte mot par mot
+    function streamTextWordByWord(selector, text, delay = 50, callback) {
+        const container = $(selector);
+        container.empty();
         
-        // Throttling : éviter trop d'appels de scroll
-        if (!force && now - lastScrollTime < 100) {
-            return;
-        }
+        // Convertir le markdown en HTML
+        const htmlContent = marked.parse(text);
         
-        lastScrollTime = now;
+        // Créer un élément temporaire pour extraire le texte
+        const tempDiv = $('<div>').html(htmlContent);
         
-        // 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);
+        // Fonction récursive pour traiter chaque nœud
+        function processNode(node, targetContainer) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                // Nœud texte - streamer mot par mot
+                const words = node.textContent.split(/(\s+)/);
+                let wordIndex = 0;
+                
+                function addNextWord() {
+                    if (wordIndex < words.length) {
+                        const word = words[wordIndex];
+                        const span = $('<span>').addClass('word-by-word').text(word);
+                        span.css('animation-delay', '0s');
+                        targetContainer.append(span);
+                        
+                        setTimeout(() => {
+                            wordIndex++;
+                            addNextWord();
+                        }, delay);
+                    } else if (callback && node === tempDiv.get(0).lastChild) {
+                        setTimeout(callback, 500);
+                    }
+                }
                 
-                // Utiliser la méthode native pour de meilleures performances
-                window.scrollTo({
-                    top: targetScrollTop,
-                    behavior: 'smooth'
+                addNextWord();
+                
+            } else if (node.nodeType === Node.ELEMENT_NODE) {
+                // Nœud élément - recréer l'élément et traiter ses enfants
+                const newElement = $(`<${node.tagName.toLowerCase()}>`);
+                
+                // Copier les attributs
+                Array.from(node.attributes).forEach(attr => {
+                    newElement.attr(attr.name, attr.value);
                 });
                 
-                // Marquer comme terminé après l'animation
-                scrollTimer = setTimeout(() => {
-                    isScrolling = false;
-                }, 200);
-            });
+                targetContainer.append(newElement);
+                
+                // Traiter les enfants
+                Array.from(node.childNodes).forEach(child => {
+                    processNode(child, newElement);
+                });
+            }
         }
+        
+        // Démarrer le traitement
+        Array.from(tempDiv.get(0).childNodes).forEach(child => {
+            processNode(child, container);
+        });
+        
+        // Auto-scroll pendant le streaming
+        const scrollInterval = setInterval(() => {
+            smoothScrollToBottom();
+        }, 200);
+        
+        setTimeout(() => {
+            clearInterval(scrollInterval);
+        }, (text.split(' ').length * delay) + 2000);
+    }
+
+    // Fonction de scroll optimisée
+    function smoothScrollToBottom() {
+        const targetScrollTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight - 50);
+        window.scrollTo({
+            top: targetScrollTop,
+            behavior: 'smooth'
+        });
     }
 
     // --- 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');
+        $('#loading-section, #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();
             $('#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();
@@ -716,129 +758,7 @@ $(document).ready(function() {
         }
     });
 
-    // --- 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." });
-        }
-    }
-
-    // --- Gestion des Clics ---
+    // --- Gestion des clics pour démarrer la génération ---
     $('#submit-btn, #deepthink-btn').click(function() {
         const type = $('#type-select').val();
         const isDeepThink = $(this).attr('id') === 'deepthink-btn';
@@ -849,43 +769,127 @@ La liberté se révèle ainsi comme un idéal exigeant qui suppose éducation, r
                 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);
         }
+        
+        // Cacher les sections précédentes et démarrer le loader
+        $('#thinking-wrapper, #response, #action-buttons').addClass('hidden');
+        startProgressLoader();
+        
+        // Simuler une génération (remplacer par l'appel API réel)
+        setTimeout(() => {
+            completeProgress();
+        }, Math.random() * 3000 + 2000); // Entre 2 et 5 secondes
+        
+        /*
+        // Code pour l'appel API réel (décommenter et adapter) :
+        const data = type === '3' ? 
+            new FormData().append('image', $('#image-upload')[0].files[0]) :
+            { question: $('#question').val().trim(), type, courseId: $('#course-select').val() || null };
+        
+        const url = type === '3' ? '/stream_philo_image' : 
+                   isDeepThink ? '/stream_philo_deepthink' : '/stream_philo';
+        
+        handleRealStreamedGeneration(url, {
+            method: 'POST',
+            headers: type !== '3' ? { 'Content-Type': 'application/json' } : undefined,
+            body: type === '3' ? data : JSON.stringify(data)
+        });
+        */
     });
 
+    // Fonction pour les vrais appels API streamés (à utiliser quand l'API est prête)
+    async function handleRealStreamedGeneration(url, options) {
+        startProgressLoader();
+        
+        let fullResponseText = '', fullThinkingText = '';
+        
+        try {
+            const response = await fetch(url, options);
+            if (!response.ok) throw new Error(await response.text());
+
+            // Compléter la barre de progression
+            completeProgress();
+            
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            
+            while (true) {
+                const { value, done } = await reader.read();
+                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.trim());
+                        
+                        if (data.type === 'thought') {
+                            fullThinkingText += data.content;
+                        } else if (data.type === 'answer') {
+                            fullResponseText += data.content;
+                        } else if (data.type === 'error') {
+                            throw new Error(data.content);
+                        }
+                    } catch (e) { 
+                        console.error("Erreur JSON parse:", line, e); 
+                    }
+                }
+            }
+            
+            // Démarrer l'affichage streaming avec les vraies données
+            startWordByWordStreaming(fullThinkingText, fullResponseText);
+
+        } catch (error) {
+            $('#loading-section').addClass('hidden');
+            Swal.fire({ icon: 'error', title: 'Erreur', text: error.message || "Une erreur inconnue est survenue." });
+        }
+    }
+
     // --- 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' }
+        // Simuler le chargement des cours
+        const sampleCourses = [
+            { id: '1', title: 'Introduction à la philosophie politique', author: 'Martin' },
+            { id: '2', title: 'Éthique et morale', author: 'Dubois' },
+            { id: '3', title: 'Métaphysique contemporaine', author: 'Laurent' }
         ];
         
         const select = $('#course-select');
-        mockCourses.forEach(course => {
+        sampleCourses.forEach(course => {
             const newOption = new Option(course.title, course.id, false, false);
             $(newOption).data('author', course.author);
             select.append(newOption);
         });
         select.trigger('change');
+        
+        /*
+        // Code pour l'appel API réel :
+        $.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;
@@ -936,12 +940,11 @@ La liberté se révèle ainsi comme un idéal exigeant qui suppose éducation, r
         });
     }
     
-    // Optimiser l'ouverture des dissertations avec une transition plus fluide
+    // Gestion des interactions avec l'historique
     $('#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',
@@ -972,7 +975,7 @@ La liberté se révèle ainsi comme un idéal exigeant qui suppose éducation, r
         });
     });
 
-    // Optimisation pour les événements de scroll sur mobile
+    // Optimisations mobiles
     let ticking = false;
     
     function updateScrollPosition() {
@@ -986,7 +989,6 @@ La liberté se révèle ainsi comme un idéal exigeant qui suppose éducation, r
         }
     }, { passive: true });
 
-    // Optimisation du resize pour mobile
     let resizeTimer;
     window.addEventListener('resize', function() {
         clearTimeout(resizeTimer);
@@ -999,7 +1001,6 @@ La liberté se révèle ainsi comme un idéal exigeant qui suppose éducation, r
         }, 250);
     }, { passive: true });
 
-    // Optimisation tactile pour mobile
     if ('ontouchstart' in window) {
         $('body').addClass('touch-device');
         
@@ -1013,7 +1014,8 @@ La liberté se révèle ainsi comme un idéal exigeant qui suppose éducation, r
         });
     }
 
-    // Init
+    // Initialisation
+    loadCourses();
     updateSavedDissertationsList();
 });
 </script>