Update templates/math.html

templates/math.html

@@ -5,129 +5,37 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Résolution de Problèmes Mathématiques</title>
-
-    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-
-    <!-- Marked.js pour le Markdown -->
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
-
-    <!-- Font Awesome pour les icônes -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
-
-    <!-- SweetAlert2 -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-
     <style>
-        /* Styles personnalisés */
-        .dropzone {
-            border: 2px dashed #4F46E5;
-            transition: all 0.3s ease;
-        }
-
-        .dropzone:hover {
-            border-color: #312E81;
-            background-color: rgba(79, 70, 229, 0.1);
-        }
-
-        .loading {
-            display: none;
-        }
-
-        .loading.active {
-            display: flex;
-        }
-
-        .math-content {
-            font-size: 1.1em;
-            line-height: 1.6;
-            overflow-x: auto;
-        }
-
-        .math-content p {
-            margin-bottom: 1rem;
-            white-space: pre-wrap;
-        }
-
-        .math-content .MathJax {
-            overflow-x: auto;
-            overflow-y: hidden;
-            padding: 0.5rem 0;
-        }
-
-        @media (max-width: 640px) {
-            .math-content .MathJax {
-                font-size: 0.9em;
-            }
-        }
-
-        /* Style pour masquer le contenu pendant le chargement de MathJax */
-        .math-hidden {
-            visibility: hidden;
-        }
-
-        .saved-response-header {
-            cursor: pointer;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.75rem 1rem;
-            background-color: #f3f4f6;
-            border-bottom: 1px solid #e5e7eb;
-        }
-
-        .saved-response-content {
-            padding: 1rem;
-            display: none;
-        }
-
-        .saved-response-item.open .saved-response-content {
-            display: block;
-        }
+        .dropzone { border: 2px dashed #4F46E5; transition: all 0.3s ease; }
+        .dropzone:hover { border-color: #312E81; background-color: rgba(79, 70, 229, 0.1); }
+        .loading { display: none; }
+        .loading.active { display: flex; }
+        .math-content { font-size: 1.1em; line-height: 1.6; overflow-x: auto; }
+        .math-content p { margin-bottom: 1rem; white-space: pre-wrap; }
+        .math-content .MathJax { overflow-x: auto; overflow-y: hidden; padding: 0.5rem 0; }
+        @media (max-width: 640px) { .math-content .MathJax { font-size: 0.9em; } }
+        .math-hidden { visibility: hidden; }
+        .saved-response-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background-color: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
+        .saved-response-content { padding: 1rem; display: none; }
+        .saved-response-item.open .saved-response-content { display: block; }
     </style>
-
-    <!-- Configuration de MathJax -->
     <script>
         window.MathJax = {
             tex: {
-                inlineMath: [
-                    ['$', '$'],
-                    ['\\(', '\\)']
-                ],
-                displayMath: [
-                    ['$$', '$$'],
-                    ['\\[', '\\]']
-                ],
+                inlineMath: [['$', '$'], ['\\(', '\\)']],
+                displayMath: [['$$', '$$'], ['\\[', '\\]']],
                 processEscapes: true,
-                macros: {
-                    R: "{\\mathbb{R}}",
-                    N: "{\\mathbb{N}}",
-                    Z: "{\\mathbb{Z}}",
-                    vecv: ["\\begin{pmatrix}#1\\\\#2\\\\#3\\end{pmatrix}", 3]
-                }
-            },
-            svg: {
-                fontCache: 'global'
-            },
-            startup: {
-                pageReady: () => {
-                    return Promise.resolve();
-                }
+                macros: { R: "{\\mathbb{R}}", N: "{\\mathbb{N}}", Z: "{\\mathbb{Z}}", vecv: ["\\begin{pmatrix}#1\\\\#2\\\\#3\\end{pmatrix}", 3] }
             },
-            options: {
-                renderActions: {
-                    addMenu: [],
-                    checkLoading: [150, () => {
-                        document.querySelectorAll('.math-content').forEach(el => {
-                            el.classList.remove('math-hidden');
-                        });
-                    }]
-                }
-            }
+            svg: { fontCache: 'global' },
+            startup: { pageReady: () => { return Promise.resolve(); } },
+            options: { renderActions: { addMenu: [], checkLoading: [150, () => { document.querySelectorAll('.math-content').forEach(el => { el.classList.remove('math-hidden'); }); }] } }
         };
     </script>
-
-    <!-- Chargement de MathJax -->
     <script>
         function loadMathJax() {
             return new Promise((resolve, reject) => {
@@ -140,27 +48,17 @@
                 document.head.appendChild(script);
             });
         }
-
-        // Charger MathJax immédiatement
         loadMathJax().catch(console.error);
     </script>
-
-    <!-- localForage pour le stockage local -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/localforage.min.js"></script>
-
 </head>
 
 <body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
-    <!-- Container principal -->
     <div class="container mx-auto px-4 py-8 max-w-4xl">
-        <!-- En-tête -->
         <header class="text-center mb-12">
             <h1 class="text-4xl font-bold text-blue-800 mb-4">Résolution de Problèmes Mathématiques</h1>
-            <p class="text-gray-600 text-lg">Soumettez une image de votre problème mathématique pour obtenir une solution
-                détaillée</p>
+            <p class="text-gray-600 text-lg">Soumettez une image de votre problème mathématique pour obtenir une solution détaillée</p>
         </header>
-
-        <!-- Zone de dépôt d'image -->
         <div class="mb-8">
             <form id="uploadForm" class="space-y-4">
                 <div id="dropzone"
@@ -169,14 +67,17 @@
                     <div class="flex flex-col items-center space-y-4">
                         <i class="fas fa-cloud-upload-alt text-4xl text-blue-600"></i>
                         <div class="text-lg text-gray-700">
-                            Glissez votre image ici ou <span class="text-blue-600 font-semibold">cliquez pour
-                                sélectionner</span>
+                            Glissez votre image ici ou <span class="text-blue-600 font-semibold">cliquez pour sélectionner</span>
                         </div>
                         <p class="text-sm text-gray-500">Formats acceptés: PNG, JPG, JPEG</p>
                     </div>
                 </div>
 
-                <div class="flex justify-center">
+                <div class="flex justify-center items-center space-x-4">
+                    <select id="modelChoice" name="model_choice" class="rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
+                        <option value="mariam's">Mariam's(Rapide et performant)</option>
+                        <option value="qwen2">Qwen2(lent mais 2 +performant)</option>
+                    </select>
                     <button type="submit"
                         class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed">
                         <i class="fas fa-paper-plane"></i>
@@ -186,37 +87,28 @@
             </form>
         </div>
 
-        <!-- Indicateur de chargement -->
         <div id="loading" class="loading flex-col items-center justify-center space-y-4 my-8">
             <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-200 border-t-blue-600"></div>
             <p class="text-gray-700 font-medium">Analyse en cours...</p>
         </div>
 
-        <!-- Zone de réponse -->
         <div id="response" class="hidden">
             <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
-                <h2 class="text-2xl font-semibold text-blue-800 mb-4">Solution</h2>
-                <div id="latexContent" class="prose max-w-none math-content math-hidden">
-                    <!-- Le contenu sera inséré ici -->
-                </div>
+                <h2 id="modelUsed" class="text-2xl font-semibold text-blue-800 mb-4">Solution (Modèle: <span id="modelName"></span>)</h2>
+                <div id="latexContent" class="prose max-w-none math-content math-hidden"></div>
             </div>
         </div>
 
-        <!-- Réponses sauvegardées -->
         <div id="savedResponsesSection" class="mt-8">
             <div class="flex justify-between items-center mb-4">
                 <h2 class="text-2xl font-semibold text-blue-800">Réponses Sauvegardées</h2>
-                <button id="clearSavedResponses"
-                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors duration-200">
+                <button id="clearSavedResponses" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors duration-200">
                     <i class="fas fa-trash-alt"></i> Effacer Tout
                 </button>
             </div>
-            <div id="savedResponses" class="space-y-2">
-                <!-- Les réponses sauvegardées seront affichées ici -->
-            </div>
+            <div id="savedResponses" class="space-y-2"></div>
         </div>
 
-        <!-- Message d'erreur -->
         <div id="errorMessage"
             class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative my-4" role="alert">
             <strong class="font-bold">Erreur!</strong>
@@ -226,7 +118,6 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function () {
-            // Éléments DOM
             const dropzone = document.getElementById('dropzone');
             const fileInput = document.getElementById('fileInput');
             const uploadForm = document.getElementById('uploadForm');
@@ -238,57 +129,37 @@
             const submitButton = uploadForm.querySelector('button[type="submit"]');
             const savedResponsesContainer = document.getElementById('savedResponses');
             const clearSavedResponsesButton = document.getElementById('clearSavedResponses');
+            const modelChoiceSelect = document.getElementById('modelChoice');
+            const modelNameSpan = document.getElementById('modelName');
 
-            // Attendre que MathJax soit complètement chargé
             let mathJaxReady = false;
             window.MathJax.startup.promise.then(() => {
                 mathJaxReady = true;
             });
 
-            // Configuration de marked
-            marked.setOptions({
-                breaks: true,
-                gfm: true,
-                pedantic: false,
-                smartLists: true
-            });
+            marked.setOptions({ breaks: true, gfm: true, pedantic: false, smartLists: true });
 
-            // Fonction pour afficher les erreurs
             function showError(message) {
                 errorText.textContent = message;
                 errorMessage.classList.remove('hidden');
-                setTimeout(() => {
-                    errorMessage.classList.add('hidden');
-                }, 5000);
+                setTimeout(() => { errorMessage.classList.add('hidden'); }, 5000);
             }
 
-            // Fonction pour rendre le contenu mathématique
             async function renderMathContent(text) {
                 try {
-                    // Attendre que MathJax soit prêt
                     if (!mathJaxReady) {
                         await window.MathJax.startup.promise;
                     }
-
-                    // Nettoyer le contenu précédent
                     latexContent.innerHTML = '';
                     latexContent.classList.add('math-hidden');
-
-                    // Convertir le Markdown en HTML
                     const htmlContent = marked.parse(text);
                     latexContent.innerHTML = htmlContent;
-
-                    // Rendre les formules mathématiques avec MathJax
                     await MathJax.typesetPromise([latexContent]);
-
-                    // Afficher le contenu
                     response.classList.remove('hidden');
                     latexContent.classList.remove('math-hidden');
-
                 } catch (error) {
                     console.error('Erreur lors du rendu:', error);
                     showError('Erreur lors du rendu de la formule mathématique');
-
                     latexContent.innerHTML = `
                         <div class="text-red-600 mb-4">Une erreur s'est produite lors du rendu. Voici le texte brut :</div>
                         <pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto">${text}</pre>
@@ -297,24 +168,10 @@
                 }
             }
 
-            // Gestionnaire de drag & drop
-            function handleDragOver(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                dropzone.classList.add('bg-blue-50');
-            }
-
-            function handleDragLeave(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                dropzone.classList.remove('bg-blue-50');
-            }
-
+            function handleDragOver(e) { e.preventDefault(); e.stopPropagation(); dropzone.classList.add('bg-blue-50'); }
+            function handleDragLeave(e) { e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('bg-blue-50'); }
             function handleDrop(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                dropzone.classList.remove('bg-blue-50');
-
+                e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('bg-blue-50');
                 const files = e.dataTransfer.files;
                 if (files.length > 0 && files[0].type.startsWith('image/')) {
                     fileInput.files = files;
@@ -324,7 +181,6 @@
                 }
             }
 
-            // Gestion de la sélection de fichier
             function handleFileSelect(file) {
                 if (file && file.type.startsWith('image/')) {
                     const reader = new FileReader();
@@ -332,10 +188,8 @@
                         const preview = document.createElement('img');
                         preview.src = e.target.result;
                         preview.classList.add('max-h-48', 'mx-auto', 'mt-4', 'rounded-lg');
-
                         const oldPreview = dropzone.querySelector('img');
                         if (oldPreview) oldPreview.remove();
-
                         dropzone.appendChild(preview);
                         submitButton.disabled = false;
                     };
@@ -345,7 +199,6 @@
                 }
             }
 
-            // Gestionnaires d'événements
             dropzone.addEventListener('dragover', handleDragOver);
             dropzone.addEventListener('dragleave', handleDragLeave);
             dropzone.addEventListener('drop', handleDrop);
@@ -357,14 +210,11 @@
                 }
             });
 
-            // Fonction pour sauvegarder la réponse
-            async function saveResponse(response) {
+            async function saveResponse(response, model) {
                 const timestamp = new Date().getTime();
-                const key = `response-${timestamp}`;
+                const key = `response-${timestamp}-${model}`;
                 try {
                     await localforage.setItem(key, response);
-                    console.log('Réponse sauvegardée avec la clé:', key);
-                    // Recharger les réponses affichées après la sauvegarde
                     loadSavedResponses();
                 } catch (error) {
                     console.error('Erreur lors de la sauvegarde:', error);
@@ -372,7 +222,6 @@
                 }
             }
 
-            // Fonction pour effacer toutes les réponses sauvegardées
             async function clearSavedResponses() {
                 Swal.fire({
                     title: 'Êtes-vous sûr?',
@@ -407,22 +256,22 @@
                 });
             }
 
-            // Fonction pour charger et afficher les réponses sauvegardées
             async function loadSavedResponses() {
                 try {
                     savedResponsesContainer.innerHTML = '';
                     const keys = await localforage.keys();
-                    keys.sort((a, b) => parseInt(b.replace('response-', '')) - parseInt(a.replace('response-', '')));
+                    keys.sort((a, b) => parseInt(b.replace('response-', '').split('-')[0]) - parseInt(a.replace('response-', '').split('-')[0]));
 
                     for (const key of keys) {
                         const response = await localforage.getItem(key);
+                        const [ , timestamp, model ] = key.split('-');
                         const responseItem = document.createElement('div');
                         responseItem.className = 'saved-response-item bg-white rounded-lg shadow-md overflow-hidden';
 
                         const header = document.createElement('div');
                         header.className = 'saved-response-header';
                         header.innerHTML = `
-                            <span class="text-blue-800 font-medium">Réponse du ${new Date(parseInt(key.replace('response-', ''))).toLocaleString()}</span>
+                            <span class="text-blue-800 font-medium">Réponse du ${new Date(parseInt(timestamp)).toLocaleString()} (Modèle: ${model})</span>
                             <div>
                                 <button class="toggle-content px-1 py-0.5 rounded-md text-xs bg-blue-500 hover:bg-blue-700 text-white mr-1"><i class="fas fa-chevron-down"></i></button>
                                 <button class="delete-response px-1 py-0.5 rounded-md text-xs bg-red-500 hover:bg-red-700 text-white"><i class="fas fa-trash-alt"></i></button>
@@ -434,24 +283,19 @@
                         content.className = 'saved-response-content math-content math-hidden';
                         content.innerHTML = marked.parse(response);
                         responseItem.appendChild(content);
-
                         savedResponsesContainer.appendChild(responseItem);
 
-                        // Gestionnaire d'événement pour afficher/masquer le contenu
                         header.querySelector('.toggle-content').addEventListener('click', () => {
                             responseItem.classList.toggle('open');
                             header.querySelector('i').classList.toggle('fa-chevron-down');
                             header.querySelector('i').classList.toggle('fa-chevron-up');
                             MathJax.typesetPromise([content]);
                             content.classList.remove('math-hidden');
-
                         });
 
-                        // Gestionnaire d'événement pour supprimer la réponse
                         header.querySelector('.delete-response').addEventListener('click', async () => {
                             try {
                                 await localforage.removeItem(key);
-                                console.log('Réponse supprimée:', key);
                                 responseItem.remove();
                             } catch (error) {
                                 console.error('Erreur lors de la suppression de la réponse:', error);
@@ -468,7 +312,6 @@
                 }
             }
 
-            // Gestion du formulaire
             uploadForm.addEventListener('submit', async (e) => {
                 e.preventDefault();
 
@@ -479,6 +322,7 @@
 
                 const formData = new FormData();
                 formData.append('image', fileInput.files[0]);
+                formData.append('model_choice', modelChoiceSelect.value);
 
                 try {
                     submitButton.disabled = true;
@@ -498,9 +342,8 @@
                     }
 
                     await renderMathContent(data.result);
-
-                    // Sauvegarder la réponse après le rendu
-                    saveResponse(data.result);
+                    modelNameSpan.textContent = data.model;
+                    saveResponse(data.result, data.model);
 
                 } catch (error) {
                     console.error('Erreur:', error);
@@ -511,15 +354,10 @@
                 }
             });
 
-            // Charger les réponses sauvegardées au chargement de la page
             loadSavedResponses();
-
-            // Gestionnaire d'événement pour effacer les réponses sauvegardées
             clearSavedResponsesButton.addEventListener('click', clearSavedResponses);
-
         });
-
     </script>
 </body>
 
-</html>
+</html>