Spaces:

Docfile
/

Maths

Running

App Files Files Community

Docfile commited on Nov 25, 2024

Commit

c00a085

verified ·

1 Parent(s): 5928c56

Update templates/math.html

Browse files

Files changed (1) hide show

templates/math.html +148 -27

templates/math.html CHANGED Viewed

@@ -1,66 +1,81 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
     <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">
     <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;
         }
     </style>
     <!-- Configuration de MathJax -->
     <script>
         window.MathJax = {
             tex: {
-                inlineMath: [['$', '$'], ['\\(', '\\)']],
-                displayMath: [['$$', '$$'], ['\\[', '\\]']],
                 processEscapes: true,
                 macros: {
                     R: "{\\mathbb{R}}",
@@ -89,7 +104,7 @@
             }
         };
     </script>
     <!-- Chargement de MathJax -->
     <script>
         function loadMathJax() {
@@ -107,6 +122,9 @@
         // Charger MathJax immédiatement
         loadMathJax().catch(console.error);
     </script>
 </head>
 <body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
@@ -115,25 +133,29 @@
         <!-- 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>
         </header>
         <!-- Zone de dépôt d'image -->
         <div class="mb-8">
             <form id="uploadForm" class="space-y-4">
-                <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer bg-white shadow-sm hover:shadow-md transition-all">
                     <input type="file" id="fileInput" class="hidden" accept="image/*">
                     <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>
                         </div>
                         <p class="text-sm text-gray-500">Formats acceptés: PNG, JPG, JPEG</p>
                     </div>
                 </div>
                 <div class="flex justify-center">
-                    <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>
                         <span>Analyser l'image</span>
                     </button>
@@ -157,15 +179,27 @@
             </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>
             <span class="block sm:inline" id="errorText"></span>
         </div>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
             // Éléments DOM
             const dropzone = document.getElementById('dropzone');
             const fileInput = document.getElementById('fileInput');
@@ -176,6 +210,8 @@
             const errorMessage = document.getElementById('errorMessage');
             const errorText = document.getElementById('errorText');
             const submitButton = uploadForm.querySelector('button[type="submit"]');
             // Attendre que MathJax soit complètement chargé
             let mathJaxReady = false;
@@ -211,22 +247,22 @@
                     // 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>
@@ -252,7 +288,7 @@
                 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;
@@ -266,14 +302,14 @@
             function handleFileSelect(file) {
                 if (file && file.type.startsWith('image/')) {
                     const reader = new FileReader();
-                    reader.onload = function(e) {
                         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;
                     };
@@ -288,17 +324,90 @@
             dropzone.addEventListener('dragleave', handleDragLeave);
             dropzone.addEventListener('drop', handleDrop);
             dropzone.addEventListener('click', () => fileInput.click());
             fileInput.addEventListener('change', (e) => {
                 if (e.target.files.length > 0) {
                     handleFileSelect(e.target.files[0]);
                 }
             });
             // Gestion du formulaire
             uploadForm.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 if (!fileInput.files.length) {
                     showError('Veuillez sélectionner une image');
                     return;
@@ -326,15 +435,27 @@
                     await renderMathContent(data.result);
                 } catch (error) {
                     console.error('Erreur:', error);
-                    showError(error.message || 'Une erreur est survenue lors du traitement');
                 } finally {
                     loading.classList.remove('active');
                     submitButton.disabled = false;
                 }
             });
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
     <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">
     <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;
         }
     </style>
     <!-- Configuration de MathJax -->
     <script>
         window.MathJax = {
             tex: {
+                inlineMath: [
+                    ['$', '$'],
+                    ['\\(', '\\)']
+                ],
+                displayMath: [
+                    ['$$', '$$'],
+                    ['\\[', '\\]']
+                ],
                 processEscapes: true,
                 macros: {
                     R: "{\\mathbb{R}}",
             }
         };
     </script>
     <!-- Chargement de MathJax -->
     <script>
         function loadMathJax() {
         // 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">
         <!-- 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>
         </header>
         <!-- Zone de dépôt d'image -->
         <div class="mb-8">
             <form id="uploadForm" class="space-y-4">
+                <div id="dropzone"
+                    class="dropzone rounded-lg p-8 text-center cursor-pointer bg-white shadow-sm hover:shadow-md transition-all">
                     <input type="file" id="fileInput" class="hidden" accept="image/*">
                     <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>
                         </div>
                         <p class="text-sm text-gray-500">Formats acceptés: PNG, JPG, JPEG</p>
                     </div>
                 </div>
                 <div class="flex justify-center">
+                    <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>
                         <span>Analyser l'image</span>
                     </button>
             </div>
         </div>
+        <!-- Réponses sauvegardées -->
+        <div id="savedResponsesSection" class="mt-8">
+            <h2 class="text-2xl font-semibold text-blue-800 mb-4">Réponses Sauvegardées</h2>
+            <div id="savedResponses" class="space-y-4">
+                <!-- Les réponses sauvegardées seront affichées ici -->
+            </div>
+            <button id="clearSavedResponses" class="mt-4 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors duration-200">
+                Effacer les réponses sauvegardées
+            </button>
+        </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>
             <span class="block sm:inline" id="errorText"></span>
         </div>
     </div>
     <script>
+        document.addEventListener('DOMContentLoaded', function () {
             // Éléments DOM
             const dropzone = document.getElementById('dropzone');
             const fileInput = document.getElementById('fileInput');
             const errorMessage = document.getElementById('errorMessage');
             const errorText = document.getElementById('errorText');
             const submitButton = uploadForm.querySelector('button[type="submit"]');
+            const savedResponsesContainer = document.getElementById('savedResponses');
+            const clearSavedResponsesButton = document.getElementById('clearSavedResponses');
             // Attendre que MathJax soit complètement chargé
             let mathJaxReady = false;
                     // 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>
                 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;
             function handleFileSelect(file) {
                 if (file && file.type.startsWith('image/')) {
                     const reader = new FileReader();
+                    reader.onload = function (e) {
                         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;
                     };
             dropzone.addEventListener('dragleave', handleDragLeave);
             dropzone.addEventListener('drop', handleDrop);
             dropzone.addEventListener('click', () => fileInput.click());
             fileInput.addEventListener('change', (e) => {
                 if (e.target.files.length > 0) {
                     handleFileSelect(e.target.files[0]);
                 }
             });
+            // Fonction pour sauvegarder la réponse
+            async function saveResponse(response) {
+                const timestamp = new Date().getTime();
+                const key = `response-${timestamp}`;
+                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);
+                    showError('Erreur lors de la sauvegarde de la réponse en local');
+                }
+            }
+            // Fonction pour effacer toutes les réponses sauvegardées
+            async function clearSavedResponses() {
+                try {
+                    await localforage.clear();
+                    console.log('Réponses sauvegardées effacées');
+                    // Recharger les réponses affichées après l'effacement
+                    loadSavedResponses();
+                } catch (error) {
+                    console.error('Erreur lors de l\'effacement des réponses sauvegardées:', error);
+                    showError('Erreur lors de l\'effacement des réponses sauvegardées');
+                }
+            }
+            // Fonction pour charger et afficher les réponses sauvegardées
+            async function loadSavedResponses() {
+                try {
+                    savedResponsesContainer.innerHTML = ''; // Effacer les réponses précédentes
+                    const keys = await localforage.keys();
+                    keys.sort((a, b) => parseInt(b.replace('response-', '')) - parseInt(a.replace('response-', '')));
+                    for (const key of keys) {
+                        const response = await localforage.getItem(key);
+                        const responseDiv = document.createElement('div');
+                        responseDiv.className = 'bg-white rounded-lg shadow-md p-4';
+                        const responseContent = document.createElement('div');
+                        responseContent.className = 'math-content math-hidden';
+                        responseContent.innerHTML = marked.parse(response);
+                        responseDiv.appendChild(responseContent);
+                        // Bouton de suppression pour chaque réponse
+                        const deleteButton = document.createElement('button');
+                        deleteButton.innerHTML = '<i class="fas fa-trash"></i>'; // Icône Font Awesome pour la poubelle
+                        deleteButton.className = 'mt-2 px-2 py-1 bg-red-500 hover:bg-red-700 text-white rounded-sm text-xs';
+                        deleteButton.onclick = async function () {
+                            try {
+                                await localforage.removeItem(key);
+                                console.log('Réponse supprimée:', key);
+                                responseDiv.remove(); // Supprimer la réponse de l'affichage
+                            } catch (error) {
+                                console.error('Erreur lors de la suppression de la réponse:', error);
+                                showError('Erreur lors de la suppression de la réponse');
+                            }
+                        };
+                        responseDiv.appendChild(deleteButton); // Ajouter le bouton de suppression à la réponse
+                        await MathJax.typesetPromise([responseContent]);
+                        responseContent.classList.remove('math-hidden');
+                        savedResponsesContainer.appendChild(responseDiv);
+                    }
+                } catch (error) {
+                    console.error('Erreur lors du chargement des réponses sauvegardées:', error);
+                    showError('Erreur lors du chargement des réponses sauvegardées');
+                }
+            }
             // Gestion du formulaire
             uploadForm.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 if (!fileInput.files.length) {
                     showError('Veuillez sélectionner une image');
                     return;
                     await renderMathContent(data.result);
+                    // Sauvegarder la réponse après le rendu
+                    saveResponse(data.result);
                 } catch (error) {
                     console.error('Erreur:', error);
+                                        showError(error.message || 'Une erreur est survenue lors du traitement');
                 } finally {
                     loading.classList.remove('active');
                     submitButton.disabled = false;
                 }
             });
+            // 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>