Spaces:

Docfile
/

Flasksite

Running

App Files Files Community

Docfile commited on Aug 27

Commit

67433f8

verified ·

1 Parent(s): a7279c7

Delete templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +0 -981

templates/philosophie.html DELETED Viewed

@@ -1,981 +0,0 @@
-<!DOCTYPE html>
-<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/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
-  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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% !important;
-      /* 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 le loader élégant */
-    .elegant-loader {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border-radius: 1rem;
-      padding: 2rem;
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-      backdrop-filter: blur(10px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    .loader-content {
-      text-align: center;
-      color: white;
-    }
-    .progress-container {
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 50px;
-      padding: 4px;
-      margin: 1.5rem 0;
-      backdrop-filter: blur(10px);
-    }
-    .progress-bar {
-      background: linear-gradient(90deg, #60a5fa, #34d399, #fbbf24);
-      background-size: 200% 100%;
-      border-radius: 50px;
-      height: 12px;
-      width: 0%;
-      transition: width 0.3s ease;
-      animation: progressGradient 2s ease-in-out infinite;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    }
-    @keyframes progressGradient {
-      0%, 100% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-    }
-    .loader-icon {
-      display: inline-block;
-      animation: float 3s ease-in-out infinite;
-      font-size: 3rem;
-      margin-bottom: 1rem;
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px) rotate(0deg); }
-      50% { transform: translateY(-10px) rotate(5deg); }
-    }
-    .thinking-particles {
-      display: flex;
-      justify-content: center;
-      gap: 0.5rem;
-      margin-top: 1rem;
-    }
-    .particle {
-      width: 8px;
-      height: 8px;
-      background: rgba(255, 255, 255, 0.8);
-      border-radius: 50%;
-      animation: particle-bounce 1.4s ease-in-out infinite both;
-    }
-    .particle:nth-child(1) { animation-delay: -0.32s; }
-    .particle:nth-child(2) { animation-delay: -0.16s; }
-    .particle:nth-child(3) { animation-delay: 0s; }
-    @keyframes particle-bounce {
-      0%, 80%, 100% { transform: scale(0.8) translateY(0); opacity: 0.7; }
-      40% { transform: scale(1.2) translateY(-10px); opacity: 1; }
-    }
-    /* Effet de pluie pour l'affichage du texte */
-    .rain-text {
-      opacity: 0;
-      transform: translateY(-20px);
-      animation: rainDrop 0.8s ease-out forwards;
-    }
-    @keyframes rainDrop {
-      0% {
-        opacity: 0;
-        transform: translateY(-20px) scale(0.95);
-      }
-      50% {
-        opacity: 0.7;
-        transform: translateY(5px) scale(1.02);
-      }
-      100% {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-      }
-    }
-    /* 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;
-      }
-      .elegant-loader {
-        padding: 1.5rem;
-        margin: 0.5rem;
-      }
-    }
-    /* 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>
-      <!-- Elegant Loading Section -->
-      <div id="loading-section" class="hidden mt-8">
-        <div class="elegant-loader">
-          <div class="loader-content">
-            <div class="loader-icon">🧠</div>
-            <h3 class="text-xl font-bold mb-2">Réflexion en cours...</h3>
-            <p class="text-white/80 mb-4" id="loading-status">Analyse du sujet</p>
-            <div class="progress-container">
-              <div class="progress-bar" id="progress-bar"></div>
-            </div>
-            <div class="flex justify-between text-sm text-white/70 mb-4">
-              <span>Progression</span>
-              <span id="progress-text">0%</span>
-            </div>
-            <div class="thinking-particles">
-              <div class="particle"></div>
-              <div class="particle"></div>
-              <div class="particle"></div>
-            </div>
-          </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 le système de chargement
-    let progressInterval;
-    let currentProgress = 0;
-    let storedThinkingContent = '';
-    let storedResponseContent = '';
-    // Messages de statut pour le loader
-    const loadingMessages = [
-        "Analyse du sujet...",
-        "Structuration des idées...",
-        "Recherche de références...",
-        "Développement de l'argumentation...",
-        "Formulation des conclusions...",
-        "Finalisation de la réponse..."
-    ];
-    // Fonction pour démarrer le loader élégant
-    function startElegantLoader() {
-        // Cacher les sections précédentes
-        $('#thinking-wrapper, #response, #action-buttons').addClass('hidden');
-        // Afficher le loader
-        $('#loading-section').removeClass('hidden').addClass('animate-fadeIn');
-        // Reset du progrès
-        currentProgress = 0;
-        $('#progress-bar').css('width', '0%');
-        $('#progress-text').text('0%');
-        // Animation du progrès avec messages dynamiques
-        progressInterval = setInterval(() => {
-            // Incrément intelligent du progrès
-            if (currentProgress < 30) {
-                currentProgress += Math.random() * 8 + 2; // 2-10% par étape
-            } else if (currentProgress < 70) {
-                currentProgress += Math.random() * 5 + 1; // 1-6% par étape
-            } else if (currentProgress < 95) {
-                currentProgress += Math.random() * 2 + 0.5; // 0.5-2.5% par étape
-            } else {
-                currentProgress = Math.min(currentProgress + 0.1, 99); // Très lent vers la fin
-            }
-            // Mise à jour de l'interface
-            $('#progress-bar').css('width', currentProgress + '%');
-            $('#progress-text').text(Math.floor(currentProgress) + '%');
-            // Changement des messages de statut
-            const messageIndex = Math.floor(currentProgress / 16.67); // 6 messages répartis sur 100%
-            if (messageIndex < loadingMessages.length) {
-                $('#loading-status').text(loadingMessages[messageIndex]);
-            }
-        }, 200); // Mise à jour toutes les 200ms
-    }
-    // Fonction pour terminer le loader et afficher le contenu
-    function finishLoaderAndDisplay() {
-        // Terminer le progrès à 100%
-        currentProgress = 100;
-        $('#progress-bar').css('width', '100%');
-        $('#progress-text').text('100%');
-        $('#loading-status').text('Génération terminée !');
-        clearInterval(progressInterval);
-        // Attendre un peu puis masquer le loader et afficher le contenu
-        setTimeout(() => {
-            $('#loading-section').addClass('hidden');
-            // Afficher le processus de pensée s'il existe
-            if (storedThinkingContent) {
-                $('#thinking-wrapper').removeClass('hidden').addClass('animate-fadeIn');
-                displayContentWithRainEffect($('#thinking-process'), marked.parse(storedThinkingContent));
-            }
-            // Afficher la réponse avec effet de pluie
-            if (storedResponseContent) {
-                $('#response').removeClass('hidden').addClass('animate-fadeIn');
-                displayContentWithRainEffect($('#response > div'), marked.parse(storedResponseContent));
-            }
-        }, 800); // Délai pour laisser le temps de voir 100%
-    }
-    // Fonction pour afficher le contenu avec effet de pluie (goutte par goutte)
-    function displayContentWithRainEffect(container, htmlContent) {
-        container.empty();
-        // Créer un div temporaire pour parser le HTML
-        const tempDiv = $('<div>').html(htmlContent);
-        // Extraire tous les éléments et textes
-        const elements = [];
-        function extractElements(node) {
-            $(node).contents().each(function() {
-                if (this.nodeType === Node.TEXT_NODE && this.textContent.trim()) {
-                    // Diviser le texte en mots
-                    const words = this.textContent.split(/(\s+)/);
-                    words.forEach(word => {
-                        if (word.trim()) {
-                            elements.push({
-                                type: 'text',
-                                content: word,
-                                parent: $(this).parent()[0] ? $(this).parent()[0].tagName.toLowerCase() : 'span'
-                            });
-                        } else if (word) {
-                            elements.push({
-                                type: 'space',
-                                content: word,
-                                parent: $(this).parent()[0] ? $(this).parent()[0].tagName.toLowerCase() : 'span'
-                            });
-                        }
-                    });
-                } else if (this.nodeType === Node.ELEMENT_NODE) {
-                    // Pour les éléments HTML complets (images, liens, etc.)
-                    if (['img', 'br', 'hr'].includes(this.tagName.toLowerCase())) {
-                        elements.push({
-                            type: 'element',
-                            content: this.outerHTML,
-                            parent: null
-                        });
-                    } else {
-                        extractElements(this);
-                    }
-                }
-            });
-        }
-        extractElements(tempDiv);
-        // Variables pour la reconstruction
-        let currentElement = null;
-        let elementIndex = 0;
-        // Fonction récursive pour afficher les éléments avec délai
-        function showNextElement() {
-            if (elementIndex >= elements.length) {
-                // Afficher les boutons d'action
-                $('#action-buttons').removeClass('hidden').addClass('animate-fadeIn');
-                Toast.fire({ icon: 'success', title: 'Génération terminée !' });
-                return;
-            }
-            const item = elements[elementIndex];
-            // Créer ou continuer l'élément parent
-            if (!currentElement || currentElement.prop('tagName').toLowerCase() !== item.parent) {
-                if (currentElement) {
-                    container.append(currentElement);
-                }
-                currentElement = $(`<${item.parent}></${item.parent}>`);
-            }
-            // Créer un span pour l'animation
-            let span;
-            if (item.type === 'element') {
-                span = $(item.content);
-            } else {
-                span = $('<span>').text(item.content).addClass('rain-text');
-            }
-            currentElement.append(span);
-            // Animation de l'élément
-            setTimeout(() => {
-                span.removeClass('rain-text');
-                // Scroll fluide
-                const containerOffset = container.offset();
-                const windowHeight = $(window).height();
-                if (containerOffset && containerOffset.top > windowHeight * 0.7) {
-                    $('html, body').animate({
-                        scrollTop: containerOffset.top - windowHeight * 0.3
-                    }, 300);
-                }
-                elementIndex++;
-                showNextElement();
-            }, 50 + Math.random() * 100); // Délai variable pour un effet plus naturel
-        }
-        // Démarrer l'affichage
-        showNextElement();
-        // S'assurer que le dernier élément est ajouté
-        setTimeout(() => {
-            if (currentElement) {
-                container.append(currentElement);
-            }
-        }, elements.length * 80);
-    }
-    // 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, #loading-section').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 avec Nouveau Système de Loading ---
-    async function handleStreamedGeneration(url, options) {
-        // Démarrer le loader élégant
-        startElegantLoader();
-        // Réinitialiser le contenu stocké
-        storedThinkingContent = '';
-        storedResponseContent = '';
-        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 (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') {
-                            storedThinkingContent += data.content;
-                        } else if (data.type === 'answer') {
-                            storedResponseContent += data.content;
-                        } else if (data.type === 'error') {
-                            throw new Error(data.content);
-                        }
-                    } catch (e) {
-                        console.error("Erreur JSON parse:", line, e);
-                    }
-                }
-            }
-            // Une fois le streaming terminé, finaliser le loader et afficher le contenu
-            finishLoaderAndDisplay();
-            // 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 {
-                title = $('#question').val().trim();
-            }
-            saveDissertation(title, storedResponseContent);
-        } catch (error) {
-            clearInterval(progressInterval);
-            $('#loading-section').addClass('hidden');
-            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() {
-        const courses = [
-            { id: 1, title: "Introduction à la philosophie", author: "Martin" },
-            { id: 2, title: "Éthique et morale", author: "Dubois" },
-            { id: 3, title: "Métaphysique moderne", author: "Bernard" },
-            { id: 4, title: "Philosophie politique", author: "Rousseau" },
-            { id: 5, title: "Esthétique et art", author: "Delacroix" }
-        ];
-        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');
-    }
-    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>