Spaces:

Docfile
/

Mariam-physiques

Sleeping

App Files Files Community

Docfile commited on Dec 4, 2024

Commit

447c76e

verified ·

1 Parent(s): d64bf5d

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +90 -10

templates/index.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -27,11 +28,74 @@
         }
         @keyframes rotation {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- Navbar -->
     <nav class="bg-white shadow-lg">
@@ -56,10 +120,12 @@
             <!-- Upload Section -->
             <form id="upload-form" enctype="multipart/form-data">
                 <div class="flex flex-col items-center justify-center w-full">
-                    <label for="image-input" class="flex flex-col items-center justify-center w-full h-64 border-2 border-blue-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition duration-300">
                         <div class="flex flex-col items-center justify-center pt-5 pb-6">
                             <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
-                            <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Cliquez pour upload</span> ou glissez-déposez</p>
                             <p class="text-xs text-gray-500">PNG, JPG ou JPEG</p>
                         </div>
                         <input id="image-input" type="file" name="image" class="hidden" accept="image/*" />
@@ -81,19 +147,19 @@
             <!-- Result Section -->
             <div id="result-container" class="hidden mt-8">
                 <h2 class="text-xl font-semibold text-gray-800 mb-4">Résolution détaillée :</h2>
-                <div id="result" class="bg-gray-50 rounded-lg p-6 prose max-w-none"></div>
             </div>
         </div>
     </div>
     <script>
-        document.getElementById('image-input').addEventListener('change', async function(e) {
             const file = e.target.files[0];
             if (file) {
                 // Show preview
                 const preview = document.getElementById('image-preview');
                 const reader = new FileReader();
-                reader.onload = function(e) {
                     preview.src = e.target.result;
                     preview.classList.remove('hidden');
                 };
@@ -102,6 +168,7 @@
                 // Show loading
                 document.getElementById('loading').classList.remove('hidden');
                 document.getElementById('result-container').classList.add('hidden');
                 try {
                     const formData = new FormData();
@@ -113,14 +180,26 @@
                     });
                     const data = await response.json();
                     // Hide loading
                     document.getElementById('loading').classList.add('hidden');
                     // Show result
                     document.getElementById('result-container').classList.remove('hidden');
                     document.getElementById('result').innerHTML = data.result;
-                    MathJax.typeset();
                 } catch (error) {
                     console.error('Erreur:', error);
                     // Hide loading
@@ -131,4 +210,5 @@
         });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
         }
         @keyframes rotation {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        .math-content {
+            font-size: 1.1em;
+            line-height: 1.6;
+            overflow-x: auto;
+        }
+        .math-content p {
+            margin-bottom: 1rem;
+        }
+        .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 */
+        }
+        /* 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 */
+            }
+        }
+        /* Classe pour masquer le contenu pendant que MathJax n'a pas traité */
+        .math-hidden {
+            visibility: hidden;
         }
     </style>
+    <script>
+        MathJax = {
+            tex: {
+                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'
+            },
+            options: {
+                renderActions: {
+                    addMenu: [], // Désactive l'ajout du menu contextuel
+                    checkLoading: [150, (doc) => { // Vérifie si MathJax a terminé toutes les 150ms
+                        document.querySelectorAll('.math-content').forEach(el => {
+                            el.classList.remove('math-hidden');
+                        });
+                    }]
+                }
+            }
+        };
+    </script>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- Navbar -->
     <nav class="bg-white shadow-lg">
             <!-- Upload Section -->
             <form id="upload-form" enctype="multipart/form-data">
                 <div class="flex flex-col items-center justify-center w-full">
+                    <label for="image-input"
+                        class="flex flex-col items-center justify-center w-full h-64 border-2 border-blue-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition duration-300">
                         <div class="flex flex-col items-center justify-center pt-5 pb-6">
                             <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
+                            <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Cliquez pour
+                                    upload</span> ou glissez-déposez</p>
                             <p class="text-xs text-gray-500">PNG, JPG ou JPEG</p>
                         </div>
                         <input id="image-input" type="file" name="image" class="hidden" accept="image/*" />
             <!-- Result Section -->
             <div id="result-container" class="hidden mt-8">
                 <h2 class="text-xl font-semibold text-gray-800 mb-4">Résolution détaillée :</h2>
+                <div id="result" class="bg-gray-50 rounded-lg p-6 prose max-w-none math-content math-hidden"></div>
             </div>
         </div>
     </div>
     <script>
+        document.getElementById('image-input').addEventListener('change', async function (e) {
             const file = e.target.files[0];
             if (file) {
                 // Show preview
                 const preview = document.getElementById('image-preview');
                 const reader = new FileReader();
+                reader.onload = function (e) {
                     preview.src = e.target.result;
                     preview.classList.remove('hidden');
                 };
                 // 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
                 try {
                     const formData = new FormData();
                     });
                     const data = await response.json();
                     // Hide loading
                     document.getElementById('loading').classList.add('hidden');
                     // Show result
                     document.getElementById('result-container').classList.remove('hidden');
                     document.getElementById('result').innerHTML = data.result;
+                    // Rendre les maths avec MathJax
+                    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.
+                        });
                 } catch (error) {
                     console.error('Erreur:', error);
                     // Hide loading
         });
     </script>
 </body>
 </html>