Update templates/index.html

templates/index.html

@@ -8,6 +8,7 @@
     <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@@ -50,23 +51,28 @@
         .math-content .MathJax {
             overflow-x: auto;
             overflow-y: hidden;
-            /* Empêche le défilement vertical dans les équations */
-            padding: 0.5rem 0; /* Ajoute un peu d'espace */
+            padding: 0.5rem 0;
         }
 
-        /* Ajustement pour les petits écrans */
         @media (max-width: 640px) {
             .math-content .MathJax {
-                font-size: 0.9em; /* Réduire la taille de la police sur les petits écrans */
+                font-size: 0.9em;
             }
         }
 
-        /* Classe pour masquer le contenu pendant que MathJax n'a pas traité */
         .math-hidden {
             visibility: hidden;
         }
     </style>
     <script>
+        // Configuration de marked
+        marked.setOptions({
+            breaks: true,
+            gfm: true,
+            headerIds: false
+        });
+
+        // Configuration de MathJax
         MathJax = {
             tex: {
                 inlineMath: [['$', '$'], ['\\(', '\\)']],
@@ -84,8 +90,8 @@
             },
             options: {
                 renderActions: {
-                    addMenu: [], // Désactive l'ajout du menu contextuel
-                    checkLoading: [150, (doc) => { // Vérifie si MathJax a terminé toutes les 150ms
+                    addMenu: [],
+                    checkLoading: [150, (doc) => {
                         document.querySelectorAll('.math-content').forEach(el => {
                             el.classList.remove('math-hidden');
                         });
@@ -168,7 +174,7 @@
                 // Show loading
                 document.getElementById('loading').classList.remove('hidden');
                 document.getElementById('result-container').classList.add('hidden');
-                document.getElementById('result').classList.add('math-hidden'); // Masquer le contenu pendant le traitement
+                document.getElementById('result').classList.add('math-hidden');
 
                 try {
                     const formData = new FormData();
@@ -186,23 +192,22 @@
 
                     // Show result
                     document.getElementById('result-container').classList.remove('hidden');
-                    document.getElementById('result').innerHTML = data.result;
+                    // Utiliser marked pour convertir le markdown en HTML
+                    document.getElementById('result').innerHTML = marked.parse(data.result);
 
                     // Rendre les maths avec MathJax
-                    MathJax.typesetPromise([document.getElementById('result')])                        .then(() => {
+                    MathJax.typesetPromise([document.getElementById('result')])
+                        .then(() => {
                             document.getElementById('result').classList.remove('math-hidden');
                         })
                         .catch((err) => {
                             console.error('Erreur MathJax:', err);
-                            // Gérer l'erreur MathJax, par exemple afficher un message d'erreur
                             document.getElementById('result').innerHTML = "Erreur lors du rendu des mathématiques.";
-                            document.getElementById('result').classList.remove('math-hidden'); // Démasquer même en cas d'erreur pour afficher le message.
-
+                            document.getElementById('result').classList.remove('math-hidden');
                         });
 
                 } catch (error) {
                     console.error('Erreur:', error);
-                    // Hide loading
                     document.getElementById('loading').classList.add('hidden');
                     alert('Une erreur est survenue lors du traitement de l\'image.');
                 }