Spaces:

Docfile
/

Mariam-cards

Running

File size: 28,132 Bytes


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mariam M-1 | Solution Mathématique</title>
  <!-- Tailwind CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

  <!-- SweetAlert2 -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <!-- Highlight.js pour la coloration syntaxique -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

  <!-- Configuration de MathJax -->
  <script>
    window.MathJax = {
      tex: {
        inlineMath: [['$', '$']],
        displayMath: [['$$', '$$']],
        processEscapes: true,
        packages: {'[+]': ['autoload', 'ams']}
      },
      options: {
        enableMenu: false,
        messageStyle: 'none'
      },
      startup: {
        pageReady: () => { window.mathJaxReady = true; }
      }
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/marked.umd.min.js"></script>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
    body { font-family: 'Space Grotesk', sans-serif; }

    .uploadArea {
      background: #f3f4f6;
      border: 2px dashed #d1d5db;
      transition: border-color 0.2s ease;
    }
    .uploadArea:hover { border-color: #3b82f6; }

    .blue-button { background: #3b82f6; transition: background-color 0.2s ease; }
    .blue-button:hover { background: #2563eb; }

    .loader {
      width: 48px;
      height: 48px;
      border: 3px solid #3b82f6;
      border-bottom-color: transparent;
      border-radius: 50%;
      display: inline-block;
      animation: rotation 1s linear infinite;
    }
    @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    .thought-box {
      transition: max-height 0.3s ease-out;
      max-height: 0;
      overflow: hidden;
    }
    .thought-box.open { max-height: 500px; }

    #thoughtsContent, #answerContent {
      max-height: 500px;
      overflow-y: auto;
      scroll-behavior: smooth;
      white-space: pre-wrap;
    }

    .preview-image { max-width: 300px; max-height: 300px; object-fit: contain; }

    .timestamp { color: #3b82f6; font-size: 0.9em; margin-left: 8px; }

    table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 1rem;
    }
    th, td {
      border: 1px solid #d1d5db;
      padding: 0.5rem;
      text-align: left;
    }
    th { background-color: #f3f4f6; font-weight: 600; }
    .table-responsive { overflow-x: auto; }

    /* Style pour le bouton Sauvegarder afin de le mettre en évidence */
    #saveButton {
      background: #3b82f6;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      transition: background-color 0.2s ease;
    }
    #saveButton:hover { background: #2563eb; }

    /* Modal plein écran pour les sauvegardes */
    #savedModal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 50;
    }
    #savedModal.active { display: block; }
    #savedModalContent {
      background: #fff;
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }

    /* Styles spécifiques pour le code et son exécution */
    pre {
      background-color: #f8f8f8;
      border: 1px solid #e2e8f0;
      border-radius: 0.375rem;
      padding: 1rem;
      margin: 1rem 0;
      overflow-x: auto;
      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    }

    code {
      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    }

    .code-execution-result {
      background-color: #f0fff4;
      border-left: 4px solid #48bb78;
      padding: 1rem;
      margin: 1rem 0;
      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
      white-space: pre-wrap;
    }

    /* Styles pour les types de contenu spécifiques */
    .content-text {}
    .content-code { padding: 0; }
    .content-result {
      background-color: #f0fff4;
      border-left: 4px solid #48bb78;
      padding: 1rem;
      margin: 0.5rem 0;
    }
    .content-image { margin: 1rem 0; text-align: center; }
    .content-image img { max-width: 100%; }

  </style>
</head>
<body class="p-4">
  <div class="max-w-4xl mx-auto">
    <header class="p-6 text-center mb-8">
      <h1 class="text-4xl font-bold text-blue-600">Mariam M-?</h1>
      <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente, avec intégration d'une calculatrice.</p>
  <p style="color: red;">Mode standard. Passez au premium pour de très hautes performances.</p>
      <div class="mt-4 flex justify-end">
        <button id="openSaved" class="blue-button px-4 py-2 text-white rounded">Sauvegardes</button>
      </div>
    </header>

    <main id="mainContent">
      <form id="problemForm" class="space-y-6" novalidate>
        <!-- Zone de dépôt / sélection d'image -->
        <div class="uploadArea p-8 text-center relative" aria-label="Zone de dépôt d'image">
          <input type="file" id="imageInput" name="image" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image">
          <div class="space-y-3">
            <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
              <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
            <p class="text-gray-700 font-medium">Déposez votre image ici</p>
            <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
          </div>
        </div>
        <!-- Aperçu de l'image -->
        <div id="imagePreview" class="hidden text-center">
          <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation de l'image">
        </div>
        <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
          Résoudre le problème
        </button>
      </form>

      <!-- Loader -->
      <div id="loader" class="hidden mt-8 text-center">
        <span class="loader"></span>
        <p class="mt-4 text-gray-600">Analyse en cours...</p>
      </div>

      <!-- Zone d'affichage de la solution -->
      <section id="solution" class="hidden mt-8 space-y-6 relative">
        <div class="border-t pt-4">
          <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-2">
            <span class="font-medium text-gray-700">Processus de Réflexion</span>
            <span id="timestamp" class="timestamp"></span>
          </button>
          <div id="thoughtsBox" class="thought-box">
            <div id="thoughtsContent" class="p-4 text-gray-600"></div>
          </div>
        </div>
        <div class="border-t pt-6">
          <div class="flex justify-between items-center">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
            <!-- Bouton Sauvegarder mis en évidence -->
            <button id="saveButton">Sauvegarder</button>
          </div>
          <div id="answerContent" class="text-gray-700 table-responsive"></div>
        </div>
      </section>
    </main>
  </div>

  <!-- Modal plein écran pour les sauvegardes -->
  <div id="savedModal">
    <div id="savedModalContent" class="p-6">
      <header class="flex justify-between items-center border-b pb-4">
        <h2 class="text-2xl font-bold">Sauvegardes</h2>
        <button id="closeSaved" class="text-3xl text-gray-600">×</button>
      </header>
      <div id="savedListContainer" class="mt-4">
        <ul id="savedList" class="space-y-4">
          <!-- Liste des sauvegardes insérée dynamiquement -->
        </ul>
      </div>
      <div class="mt-6">
        <button id="newExercise" class="blue-button w-full py-3 text-white font-medium rounded-lg">
          Résoudre un nouvel exercice
        </button>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Récupération des éléments
      const form = document.getElementById('problemForm');
      const imageInput = document.getElementById('imageInput');
      const loader = document.getElementById('loader');
      const solutionSection = document.getElementById('solution');
      const thoughtsContent = document.getElementById('thoughtsContent');
      const answerContent = document.getElementById('answerContent');
      const thoughtsToggle = document.getElementById('thoughtsToggle');
      const thoughtsBox = document.getElementById('thoughtsBox');
      const imagePreview = document.getElementById('imagePreview');
      const previewImage = document.getElementById('previewImage');
      const timestamp = document.getElementById('timestamp');
      const saveButton = document.getElementById('saveButton');
      const openSaved = document.getElementById('openSaved');
      const closeSaved = document.getElementById('closeSaved');
      const savedModal = document.getElementById('savedModal');
      const savedList = document.getElementById('savedList');
      const newExercise = document.getElementById('newExercise');
      const mainContent = document.getElementById('mainContent'); // This variable is not used in the original logic, keeping it but it could be removed.

      let startTime = null;
      let timerInterval = null;
      let thoughtsBuffer = '';
      let answerBuffer = '';
      let currentMode = null;
      let updateTimeout = null;
      // Removed currentEndpoint variable as it's no longer needed

      // Gestion des onglets pour le choix du modèle (Removed as tabs are removed)

      // Mise à jour du temps écoulé
      const updateTimestamp = () => {
        if (startTime) {
          const seconds = Math.floor((Date.now() - startTime) / 1000);
          timestamp.textContent = `${seconds}s`;
        }
      };
      const startTimer = () => { startTime = Date.now(); timerInterval = setInterval(updateTimestamp, 1000); updateTimestamp(); };
      const stopTimer = () => { clearInterval(timerInterval); startTime = null; timestamp.textContent = ''; };

      // Affichage de l'image sélectionnée
      const handleFileSelect = file => {
        if (!file) return;
        const reader = new FileReader();
        reader.onload = e => {
          previewImage.src = e.target.result;
          imagePreview.classList.remove('hidden');
        };
        reader.readAsDataURL(file);
      };

      thoughtsToggle.addEventListener('click', () => { thoughtsBox.classList.toggle('open'); });
      imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));

      // Gestion du glisser-déposer
      const dropZone = document.querySelector('.uploadArea');
      dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('border-blue-400'); });
      dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400'); });
      dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400'); handleFileSelect(e.dataTransfer.files[0]); });

      // Fonction pour appliquer la coloration syntaxique
      const applyHighlighting = () => {
        document.querySelectorAll('pre code').forEach((block) => {
          hljs.highlightBlock(block);
        });
      };

      // Rendu MathJax et mise à jour de l'affichage
      const typesetAnswerIfReady = async () => {
        if (window.mathJaxReady) {
          MathJax.startup.document.elements = [document.getElementById('answerContent')];
          await MathJax.typesetPromise();
          applyHighlighting();
          answerContent.scrollTop = answerContent.scrollHeight;
        } else { setTimeout(typesetAnswerIfReady, 200); }
      };

      const updateDisplay = async () => {
        thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
        answerContent.innerHTML = marked.parse(answerBuffer);
        await typesetAnswerIfReady();
        updateTimeout = null;
      };

      const scheduleUpdate = () => { if (!updateTimeout) updateTimeout = setTimeout(updateDisplay, 200); };

      marked.setOptions({
        gfm: true,
        breaks: true,
        highlight: function(code, lang) {
          if (lang && hljs.getLanguage(lang)) {
            try {
              return hljs.highlight(code, { language: lang }).value;
            } catch (error) {}
          }
          return code;
        }
      });

      // Creation of content elements (This part wasn't directly used in the streaming logic before, keeping it just in case it was intended for future use, but the current streaming logic builds markdown directly)
      const createContentElement = (content, type) => {
        const div = document.createElement('div');
        div.className = `content-${type}`;

        switch(type) {
          case 'text':
            div.innerHTML = marked.parse(content);
            break;
          case 'code':
            div.innerHTML = `<pre><code>${content}</code></pre>`;
            break;
          case 'result':
            div.innerHTML = `<div class="code-execution-result">${content}</div>`;
            break;
          case 'image':
            div.innerHTML = `<img src="data:image/png;base64,${content}" />`;
            break;
          default:
            div.innerHTML = marked.parse(content);
        }

        return div;
      };

      // Envoi de l'image pour résolution
      form.addEventListener('submit', async e => {
        e.preventDefault();
        const file = imageInput.files[0];
        if (!file) {
          Swal.fire({
            icon: 'error',
            title: 'Image manquante',
            text: 'Veuillez sélectionner une image.'
          });
          return;
        }

        startTimer();
        loader.classList.remove('hidden');
        solutionSection.classList.add('hidden');
        thoughtsContent.innerHTML = '';
        answerContent.innerHTML = '';
        thoughtsBuffer = '';
        answerBuffer = '';
        currentMode = null; // Reset mode

        // thoughtsBox starts open by default, keep it open during processing
        thoughtsBox.classList.add('open');

        const formData = new FormData();
        formData.append('image', file);

        try {
          // Hardcode the endpoint to /solved
          const response = await fetch('/solved', { method: 'POST', body: formData });

          if (!response.body) {
              throw new Error('Response body is not available (e.g., not a streaming response)');
          }

          const reader = response.body.getReader();
          const decoder = new TextDecoder();
          let buffer = '';

          const processChunk = async chunk => {
            buffer += decoder.decode(chunk, { stream: true });
            const lines = buffer.split('\n\n');
            buffer = lines.pop();

            for (const line of lines) {
              if (!line.startsWith('data:')) {
                  console.warn('Skipping non-data line:', line); // Log non-data lines
                  continue;
              }
              try {
                  const data = JSON.parse(line.slice(5));

                  if (data.mode) {
                    currentMode = data.mode;
                    loader.classList.add('hidden');
                    solutionSection.classList.remove('hidden');
                  }

                  if (data.content !== undefined) { // Check for undefined to allow empty strings
                    // Gestion différenciée selon le type de contenu
                    if (currentMode === 'thinking') {
                      // For thinking mode, just append text
                      thoughtsBuffer += data.content;
                    } else if (currentMode === 'answering') {
                      // For answering mode, handle different types
                      switch(data.type) {
                        case 'code':
                          answerBuffer += "\n```\n" + data.content + "\n```\n";
                          break;
                        case 'result':
                           // Format results clearly, handling multiple lines
                           const formattedResult = data.content.split('\n').map(line => `> ${line}`).join('\n');
                           answerBuffer += "\n" + formattedResult + "\n";
                           break;
                        case 'image':
                          // Include images as markdown images
                          answerBuffer += `\n![Résultat](data:image/png;base64,${data.content})\n`;
                          break;
                        case 'text': // Explicitly handle text within answering mode
                        default: // Default behavior is to append text
                          answerBuffer += data.content;
                          break;
                      }
                    }
                  }

                  if (data.error) {
                    answerBuffer += `\n**Erreur:** ${data.error}\n`;
                  }

                } catch (e) {
                   console.error('Error parsing JSON data:', line.slice(5), e);
                   // Optionally append an error message to the output
                   if (currentMode === 'thinking') { thoughtsBuffer += `\n[Parsing Error]`; }
                   else { answerBuffer += `\n[Parsing Error]`; }
                }
            }

            scheduleUpdate(); // Schedule display update after processing chunks
          };

          // Start processing the stream
          while (true) {
            const { done, value } = await reader.read();
            if (done) {
               // Process any remaining buffer
              if (buffer) {
                 try {
                   // Attempt to parse the last bit if it looks like a data line
                    if (buffer.startsWith('data:')) {
                       const data = JSON.parse(buffer.slice(5));
                        if (data.content !== undefined) {
                           if (currentMode === 'thinking') { thoughtsBuffer += data.content; }
                           else if (currentMode === 'answering') { answerBuffer += data.content; }
                        }
                    } else {
                       // Handle cases where the buffer is not a complete data line (e.g., partial line)
                       console.warn('Remaining buffer is not a complete data line:', buffer);
                       // Decide how to handle partial data - maybe discard or append as raw? Appending as raw might break markdown. Discarding is safer.
                    }
                 } catch (e) {
                    console.error('Error processing final buffer:', e);
                 }
              }
              scheduleUpdate(); // Final display update
              break; // Exit loop
            }
            await processChunk(value);
          }

          stopTimer(); // Stop timer when stream is done
        } catch (error) {
          console.error('Erreur de Fetch ou du Stream:', error);
          Swal.fire({
            icon: 'error',
            title: 'Erreur de connexion ou de traitement',
            text: `Une erreur est survenue lors du traitement de votre demande: ${error.message}`
          });
          loader.classList.add('hidden');
          stopTimer(); // Ensure timer stops on error
          solutionSection.classList.remove('hidden'); // Show section maybe with error message
          if(answerBuffer === '') { // If no output yet, put error in answer section
             answerContent.innerHTML = `<div class="text-red-500">Une erreur est survenue: ${error.message}</div>`;
          } else { // If some output exists, append error
             answerBuffer += `\n\n<div class="text-red-500">Une erreur est survenue: ${error.message}</div>`;
             scheduleUpdate(); // Update display with error
          }
        }
      });


      // Sauvegarde de la solution avec SweetAlert2
      saveButton.addEventListener('click', () => {
        Swal.fire({
          title: 'Sauvegarder la solution',
          input: 'text',
          inputLabel: 'Nom de la sauvegarde',
          inputPlaceholder: 'Entrez un nom pour cette sauvegarde',
          showCancelButton: true,
          confirmButtonText: 'Sauvegarder',
          cancelButtonText: 'Annuler'
        }).then((result) => {
          if (result.isConfirmed && result.value) {
            const saveName = result.value;
            const saveData = {
              answer: answerContent.innerHTML, // Save the rendered HTML
              thinking: thoughtsContent.innerHTML, // Save the rendered HTML
              date: new Date().toLocaleString()
            };
            let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
            savedExercises[saveName] = saveData;
            localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
            Swal.fire({
              icon: 'success',
              title: 'Sauvegarde réussie',
              text: 'Votre solution a bien été sauvegardée !',
              timer: 2000,
              showConfirmButton: false
            });
          }
        });
      });

      // Chargement des sauvegardes dans le modal
      const loadSavedList = () => {
        savedList.innerHTML = '';
        const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');

        if (Object.keys(savedExercises).length === 0) {
          savedList.innerHTML = '<li class="text-gray-500 text-center py-8">Aucune sauvegarde disponible</li>';
          return;
        }

        // Sort by date, newest first (optional but nice)
        const sortedEntries = Object.entries(savedExercises).sort(([,a], [,b]) => new Date(b.date) - new Date(a.date));


        for (const [name, data] of sortedEntries) {
          const li = document.createElement('li');
          li.className = 'border-b pb-2';
          li.innerHTML = `
            <div class="flex justify-between items-center">
              <button class="text-left text-blue-600 hover:underline" data-save="${name}">
                ${name} <span class="text-gray-500 text-xs">(${data.date})</span>
              </button>
              <button class="text-red-500 hover:text-red-700" data-delete="${name}">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
              </button>
            </div>
          `;
          savedList.appendChild(li);
        }
      };

      // Gestion des clics sur les sauvegardes
      savedList.addEventListener('click', (e) => {
        // Chargement d'une sauvegarde
        if (e.target && e.target.dataset.save) {
          const saveName = e.target.dataset.save;
          const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
          const data = savedExercises[saveName];
          if (data) {
            // Hide the form and loader, show the solution section
            form.classList.add('hidden');
            loader.classList.add('hidden');
            solutionSection.classList.remove('hidden');

            // Load the saved HTML content
            thoughtsContent.innerHTML = data.thinking;
            answerContent.innerHTML = data.answer;

            // Close the modal
            savedModal.classList.remove('active');

            // Re-render MathJax and apply highlighting to the loaded HTML
            // Use MathJax.typesetPromise() on the specific elements
             if (window.mathJaxReady) {
                MathJax.startup.document.elements = [thoughtsContent, answerContent]; // Target both potentially
                MathJax.typesetPromise().then(() => {
                   applyHighlighting(); // Apply highlighting after MathJax
                }).catch((err) => console.error("MathJax typesetting failed:", err));
             } else {
                console.warn("MathJax not ready yet, cannot typeset saved content.");
             }

            // Ensure thoughts box is open when viewing a saved solution
            thoughtsBox.classList.add('open');

            // Reset buffers and timer as this is static content
            thoughtsBuffer = ''; // Or load from saved data if needed for re-processing
            answerBuffer = ''; // Or load from saved data if needed for re-processing
            stopTimer();
            timestamp.textContent = data.date; // Show saved date as timestamp
          }
        }

        // Suppression d'une sauvegarde
        if (e.target && (e.target.dataset.delete || e.target.closest('[data-delete]'))) {
          const deleteName = e.target.dataset.delete || e.target.closest('[data-delete]').dataset.delete;

          Swal.fire({
            title: 'Êtes-vous sûr ?',
            text: "Cette sauvegarde sera définitivement supprimée.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Oui, supprimer',
            cancelButtonText: 'Annuler'
          }).then((result) => {
            if (result.isConfirmed) {
              const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
              delete savedExercises[deleteName];
              localStorage.setItem('savedExercises', JSON.stringify(savedExercises));

              Swal.fire(
                'Supprimé !',
                'La sauvegarde a été supprimée.',
                'success'
              );

              loadSavedList(); // Refresh the list in the modal
              // If the currently viewed solution is the one being deleted, clear it
              // (Optional, maybe better to just let them view it until they start a new one)
            }
          });
        }
      });

      // Ouverture / fermeture du modal de sauvegardes
      openSaved.addEventListener('click', () => { loadSavedList(); savedModal.classList.add('active'); });
      closeSaved.addEventListener('click', () => { savedModal.classList.remove('active'); });

      // Bouton présent uniquement dans le modal pour lancer un nouvel exercice
      newExercise.addEventListener('click', () => {
        // Reset form and hide solution
        form.reset();
        form.classList.remove('hidden');
        solutionSection.classList.add('hidden');
        imagePreview.classList.add('hidden'); // Hide image preview
        previewImage.src = ''; // Clear image source

        // Clear content areas and buffers
        thoughtsContent.innerHTML = '';
        answerContent.innerHTML = '';
        thoughtsBuffer = '';
        answerBuffer = '';
        currentMode = null; // Reset mode

        // Stop timer and clear timestamp
        stopTimer();
        timestamp.textContent = '';

        // Ensure thoughts box is collapsed for a new exercise
        thoughtsBox.classList.remove('open');


        // Close the modal
        savedModal.classList.remove('active');
      });
    });
  </script>
</body>
</html>