Spaces:

Docfile
/

Flasksite

Running

File size: 28,260 Bytes

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mariam AI - Assistant Philosophique</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Styles existants */
    .collapsible {
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      background-color: #f1f1f1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Nouveaux styles pour le Markdown responsive */
    .prose {
      max-width: 100% !important;
    }

    .prose p {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      line-height: 1.75;
    }

    .prose ul {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-left: 1.625em;
    }

    .prose li {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      padding-left: 0.375em;
    }

    .prose h1, .prose h2, .prose h3 {
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3;
    }

    /* Styles spécifiques pour mobile */
    @media (max-width: 640px) {
      .prose {
        font-size: 0.95rem;
      }

      .prose p {
        margin-top: 1em;
        margin-bottom: 1em;
      }

      .prose ul {
        padding-left: 1.25em;
      }

      .prose li {
        margin-top: 0.375em;
        margin-bottom: 0.375em;
      }

      .prose h1, .prose h2, .prose h3 {
        margin-top: 1.5em;
        margin-bottom: 0.75em;
      }
    }

    /* Styles pour améliorer la lisibilité du texte */
    #response .prose {
      color: #374151;
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
    }

    #response .prose > * + * {
      margin-top: 1em;
    }

    #response .prose blockquote {
      margin: 1.5em 0;
      padding-left: 1em;
      border-left: 4px solid #e5e7eb;
      font-style: italic;
    }

    #response .prose code {
      background-color: #f3f4f6;
      padding: 0.2em 0.4em;
      border-radius: 0.25em;
      font-size: 0.875em;
    }

    .active, .collapsible:hover {
      background-color: #ddd;
    }

    .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: white;
    }
    .animate-fadeIn {
      animation: fadeIn 0.5s ease-out forwards;
    }
    .animate-slideUp {
      animation: slideUp 0.5s ease-out forwards;
    }
    .animate-shake {
      animation: shake 0.5s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }

    /* Ajout du style pour Select2 */
    .select2-container--default .select2-selection--single {
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      height: auto;
      padding: 0.625rem 1rem;
      background-color: white;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
      color: #374151;
      line-height: inherit;
      padding-right: 1.5rem;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
      top: 50%;
      transform: translateY(-50%);
      right: 0.75rem;
    }
    .select2-dropdown {
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      padding: 0.25rem;
    }
    .select2-search--dropdown .select2-search__field {
      border: 1px solid #e5e7eb;
      border-radius: 0.375rem;
      padding: 0.5rem;
    }
    .select2-results__options {
      padding: 0.25rem;
    }
    .select2-results__option {
      padding: 0.5rem 0.75rem;
    }
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
      background-color: #ede9fe;
      color:#374151;
    }
    .select2-container--default .select2-results__option--selected {
      background-color: #f3f4f6;
      color:#374151;
    }
    .select2-results__option .course-author {
      font-size: 0.875rem;
      color: #6b7280;
      display: block;
      margin-top: 0.25rem;
    }
    .select2-container--open .select2-selection--single .select2-selection__arrow {
      border-color: transparent transparent #a8a29e;
    }
  </style>
</head>
<body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
  <!-- Navbar -->
  <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <div class="flex items-center">
          <div class="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 text-transparent bg-clip-text">
            Mariam AI
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-violet-100 text-violet-800">
            <span class="w-2 h-2 bg-violet-400 rounded-full animate-pulse mr-2"></span>
            Assistant Philosophique
          </span>
        </div>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto">
      <!-- Main Card -->
      <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        <!-- Header Section -->
        <div class="bg-gradient-to-r from-violet-600 to-indigo-600 p-6 text-white">
          <h2 class="text-2xl font-bold">Gen'Dissertation</h2>
          <p class="mt-2 opacity-90">Créez des dissertations philosophiques pertinentes et structurées</p>
        </div>
        <!-- Content Section -->
        <div class="p-8 space-y-8">
          <!-- Type Selection -->
          <div class="space-y-3">
            <label class="block text-sm font-medium text-gray-700">Type de dissertation</label>
            <div class="relative">
              <select id="type-select" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 appearance-none bg-white py-3 px-4 pr-10">
                <option value="1">Type 1</option>
                <option value="2">Type 2</option>
                <option value="3">Synthèse</option>
              </select>
              <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
              </div>
            </div>
            <div id="current-type-label" class="inline-flex px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-violet-50 to-indigo-50 text-violet-700 border border-violet-200">
              Sujet de type 1
            </div>
          </div>
          <!-- Course Selection -->
          <div class="space-y-3">
            <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
            <select id="course-select" class="w-full">
              <option value="">Choisir un cours...</option>
            </select>
            <div class="course-meta hidden">
              <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-4 border border-gray-100">
                <div class="flex justify-between items-center">
                  <span id="course-author" class="flex items-center space-x-2">
                    <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    <span class="text-gray-600"></span>
                  </span>
                  <span id="course-date" class="flex items-center space-x-2">
                    <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    <span class="text-gray-600"></span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- Question Input -->
          <div class="space-y-3">
            <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
            <div class="relative">
              <textarea id="question" rows="4" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 resize-none bg-white py-3 px-4" placeholder="Saisissez votre sujet de dissertation..."></textarea>
              <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                </svg>
              </div>
            </div>
          </div>
          <!-- Submit Button -->
          <button id="submit-btn" class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-medium shadow-lg shadow-violet-200 hover:shadow-xl hover:shadow-violet-300 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2">
            <span class="flex items-center justify-center space-x-2">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              <span>Générer la dissertation</span>
            </span>
          </button>
          <!-- Response Section -->
          <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
            <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100">
              <!-- La réponse sera insérée ici -->
            </div>
          </div>
          <!-- Copy Button -->
          <button id="copy-btn" class="hidden w-full py-3 px-6 rounded-xl bg-gray-50 text-gray-700 font-medium border border-gray-200 hover:bg-gray-100 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
            <span class="flex items-center justify-center space-x-2">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
              <span>Copier la dissertation</span>
            </span>
          </button>
          <!-- Saved Dissertations Section -->
          <div id="saved-dissertations" class="mt-8">
            <h3 class="text-lg font-medium text-gray-700 mb-4">Dissertations Sauvegardées</h3>
            <div id="dissertations-list" class="space-y-4">
              <!-- Les dissertations sauvegardées seront insérées ici -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bouton flottant DeepThink -->
  <button id="deepthink-btn" class="fixed bottom-6 right-6 z-50 bg-indigo-600 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none">
    DeepThink
  </button>

  <script>
    $(document).ready(function() {
      // Initialisation de Select2
      $('#course-select').select2({
        placeholder: 'Choisir un cours...',
        templateResult: function (course) {
          if (!course.id) {
            return course.text;
          }
          const author = $(course.element).data('author');
          return $(`
            <span>${course.text}</span>
            <span class="course-author">Pr. ${author}</span>
          `);
        },
        templateSelection: function (course) {
          return course.text;
        },
      });

      // Configuration de marked
      marked.setOptions({
        breaks: true,
        gfm: true,
        headerIds: true,
        langPrefix: 'language-',
        smartLists: true,
        smartypants: true
      });

      moment.locale('fr');

      // Configuration des notifications SweetAlert2
      const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        customClass: {
          popup: 'rounded-lg shadow-xl border border-gray-100'
        }
      });

      // Animation des boutons
      function addButtonAnimation(buttonId) {
        $(`#${buttonId}`).on('mousedown', function() {
          $(this).addClass('scale-95');
        }).on('mouseup mouseleave', function() {
          $(this).removeClass('scale-95');
        });
      }
      addButtonAnimation('submit-btn');
      addButtonAnimation('copy-btn');

      // Gestion du changement de type
      $('#type-select').change(function() {
        const selectedOption = $(this).find('option:selected');
        const typeLabel = selectedOption.text();
        const type = $(this).val();
        let labelText;
        if (type === '3') {
          labelText = 'S - Synthèse';
        } else {
          labelText = `Type ${type} - ${typeLabel}`;
        }
        $('#current-type-label').text(labelText);
      });

      // Chargement des cours
      function loadCourses() {
        return $.ajax({
          url: '/api/philosophy/courses',
          method: 'GET',
          beforeSend: function() {
            $('#course-select').prop('disabled', true).addClass('animate-pulse');
          },
          complete: function() {
            $('#course-select').prop('disabled', false).removeClass('animate-pulse');
          }
        });
      }
      loadCourses()
      .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);
        });
      })
      .fail(function() {
        Toast.fire({
          icon: 'error',
          title: 'Erreur de chargement des cours',
          text: 'Veuillez réessayer ultérieurement'
        });
      });

      // Gestion du changement de cours
      $('#course-select').on('change', function() {
        const courseId = $(this).val();
        if (courseId) {
          $.ajax({
            url: `/api/philosophy/courses/${courseId}`,
            method: 'GET',
            beforeSend: function() {
              $('.course-meta').addClass('animate-pulse');
            },
            success: function(course) {
              $('.course-meta').removeClass('hidden animate-pulse')
                .addClass('animate-fadeIn');
              $('#course-author span').text(`Pr. ${course.author}`);
              $('#course-date span').text(new Date(course.updated_at).toLocaleDateString('fr-FR', {
                day: 'numeric',
                month: 'long',
                year: 'numeric'
              }));
              Toast.fire({
                icon: 'success',
                title: 'Cours chargé avec succès'
              });
            },
            error: function() {
              Toast.fire({
                icon: 'error',
                title: 'Erreur',
                text: 'Impossible de charger les détails du cours'
              });
            }
          });
        } else {
          $('.course-meta').addClass('animate-fadeOut').on('animationend', function() {
            $(this).addClass('hidden').removeClass('animate-fadeOut');
          });
        }
      });

      // Gestion de la soumission standard
      $('#submit-btn').click(function() {
        const question = $('#question').val().trim();
        if (!question) {
          return;
        }
        Swal.fire({
          title: 'Génération en cours',
          html: `
            <div class="space-y-4">
              <div class="flex justify-center">
                <div class="w-16 h-16 relative">
                  <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
                  <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
                </div>
              </div>
              <div class="text-gray-600">
                <p class="animate-pulse">Analyse philosophique en cours...</p>
                <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
              </div>
            </div>
          `,
          allowOutsideClick: false,
          showConfirmButton: false,
          customClass: {
            popup: 'rounded-2xl'
          }
        });
        const data = {
          question: question,
          type: $('#type-select').val(),
          courseId: $('#course-select').val() || null
        };
        $.ajax({
          url: '/submit_philo',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(data),
          success: function(data) {
            Swal.close();
            const htmlContent = marked.parse(data.response);
            $('#response > div').html(htmlContent);
            $('#response').removeClass('hidden').addClass('animate-fadeIn');
            $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
            saveDissertation(question, data.response);
            Toast.fire({
              icon: 'success',
              title: 'Dissertation générée et sauvegardée avec succès',
              timer: 2000
            });
          },
          error: function() {
            Swal.fire({
              icon: 'error',
              title: 'Erreur de génération',
              text: 'Une erreur est survenue lors de la génération de votre dissertation.',
              customClass: {
                popup: 'rounded-2xl',
                confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
              }
            });
          }
        });
      });

      function saveDissertation(title, content) {
        let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
        savedDissertations.push({ title, content, timestamp: Date.now() });
        localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
        updateSavedDissertationsList();
      }

      function deleteDissertation(index) {
        let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
        savedDissertations.splice(index, 1);
        localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
        updateSavedDissertationsList();
        Toast.fire({
          icon: 'success',
          title: 'Dissertation supprimée avec succès'
        });
      }

      function updateSavedDissertationsList() {
        const dissertationsList = $('#dissertations-list');
        dissertationsList.empty();
        let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
        if (savedDissertations.length === 0) {
          dissertationsList.append('<p class="text-gray-500">Aucune dissertation sauvegardée.</p>');
          return;
        }
        savedDissertations.forEach((diss, index) => {
          const date = moment(diss.timestamp).format('LLL');
          const collapsible = $(`<button class="collapsible rounded-xl border border-gray-100 flex justify-between w-full"><span>${diss.title}</span><span class="text-gray-500 text-sm">${date}</span></button>`);
          const deleteButton = $('<button class="text-red-500 hover:text-red-700 ml-2">Supprimer</button>');
          const content = $('<div class="content prose prose-violet max-w-none p-4"></div>').html(marked.parse(diss.content));
          collapsible.append(deleteButton);
          dissertationsList.append(collapsible, content);
          collapsible.click(function(event) {
            if (event.target === deleteButton[0]) {
              return;
            }
            content.slideToggle("fast");
            collapsible.toggleClass("active");
          });
          deleteButton.click(function() {
            deleteDissertation(index);
          });
        });
      }
      updateSavedDissertationsList();

      $('#copy-btn').click(function() {
        const responseDiv = document.querySelector('#response > div');
        let textToCopy = '';
        const temp = document.createElement('div');
        temp.innerHTML = responseDiv.innerHTML;
        function extractText(node) {
          let text = '';
          node.childNodes.forEach(child => {
            if (child.nodeType === 3) {
              text += child.textContent;
            } else if (child.nodeType === 1) {
              if (window.getComputedStyle(child).display === 'block') {
                text += '\n';
              }
              text += extractText(child);
              if (window.getComputedStyle(child).display === 'block') {
                text += '\n';
              }
            }
          });
          return text;
        }
        textToCopy = extractText(temp).trim();
        $(this).addClass('scale-95 bg-violet-100');
        navigator.clipboard.writeText(textToCopy)
          .then(() => {
            $(this).removeClass('scale-95 bg-violet-100')
              .addClass('bg-green-50 text-green-700');
            setTimeout(() => {
              $(this).removeClass('bg-green-50 text-green-700');
            }, 1000);
            Toast.fire({
              icon: 'success',
              title: 'Copié avec succès',
              text: 'Le contenu a été copié dans votre presse-papiers',
              timer: 2000
            });
          })
          .catch((err) => {
            try {
              const textarea = document.createElement('textarea');
              textarea.value = textToCopy;
              textarea.style.position = 'fixed';
              textarea.style.opacity = '0';
              document.body.appendChild(textarea);
              textarea.select();
              document.execCommand('copy');
              document.body.removeChild(textarea);
              $(this).removeClass('scale-95 bg-violet-100')
                .addClass('bg-green-50 text-green-700');
              setTimeout(() => {
                $(this).removeClass('bg-green-50 text-green-700');
              }, 1000);
              Toast.fire({
                icon: 'success',
                title: 'Copié avec succès',
                timer: 2000
              });
            } catch (fallbackErr) {
              $(this).removeClass('scale-95 bg-violet-100')
                .addClass('bg-red-50 text-red-700');
              setTimeout(() => {
                $(this).removeClass('bg-red-50 text-red-700');
              }, 1000);
              Toast.fire({
                icon: 'error',
                title: 'Erreur de copie',
                text: 'Impossible de copier le contenu',
                timer: 3000
              });
            }
          });
      });

      // Bouton flottant DeepThink
      // Vérification de la limite d'une utilisation par jour via localStorage
      function isToday(dateStr) {
        const today = new Date();
        const date = new Date(dateStr);
        return date.getFullYear() === today.getFullYear() &&
               date.getMonth() === today.getMonth() &&
               date.getDate() === today.getDate();
      }

      $('#deepthink-btn').click(function() {
        const lastUsed = localStorage.getItem('deepThinkLastUsed');
        if (lastUsed && isToday(lastUsed)) {
          Swal.fire({
            icon: 'warning',
            title: "Limite quotidienne",
            text: "Vous ne pouvez utiliser DeepThink qu'une seule fois par jour."
          });
          return;
        }
        const question = $('#question').val().trim();
        const type = $('#type-select').val();
        const courseId = $('#course-select').val() || null;
        if (!question) {
          Swal.fire({
            icon: 'error',
            title: "Sujet manquant",
            text: "Veuillez saisir un sujet dans le champ principal."
          });
          return;
        }
        Swal.fire({
          title: 'DeepThink en cours',
          html: `
            <div class="flex justify-center">
              <div class="w-16 h-16 relative">
                <div class="absolute inset-0 rounded-full border-4 border-indigo-200 animate-ping"></div>
                <div class="absolute inset-0 rounded-full border-4 border-indigo-500 animate-pulse"></div>
              </div>
            </div>
            <p class="mt-4 text-gray-600">Veuillez patienter quelques instants...</p>
          `,
          allowOutsideClick: false,
          showConfirmButton: false,
          customClass: {
            popup: 'rounded-2xl'
          }
        });
        const data = { question, type, courseId };
        $.ajax({
          url: '/submit_philo_deepthink',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(data),
          success: function(response) {
            Swal.close();
            const htmlContent = marked.parse(response.response);
            $('#response > div').html(htmlContent);
            $('#response').removeClass('hidden').addClass('animate-fadeIn');
            $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
            saveDissertation(question, response.response);
            localStorage.setItem('deepThinkLastUsed', new Date().toISOString());
            Swal.fire({
              icon: 'success',
              title: 'DeepThink généré avec succès',
              timer: 2000,
              showConfirmButton: false
            });
          },
          error: function() {
            Swal.fire({
              icon: 'error',
              title: 'Erreur DeepThink',
              text: 'Une erreur est survenue lors de la génération DeepThink.',
              customClass: {
                popup: 'rounded-2xl'
              }
            });
          }
        });
      });
    });
  </script>
</body>
</html>