Spaces:

Docfile
/

Maths

Running

App Files Files Community

Docfile commited on Nov 15, 2024

Commit

f479d42

verified ·

1 Parent(s): cfdb53a

Update templates/math.html

Browse files

Files changed (1) hide show

templates/math.html +88 -53

templates/math.html CHANGED Viewed

@@ -4,55 +4,81 @@
     <title>Résolution de problème mathématique</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.24.2/plotly.min.js"></script>
     <style>
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
         }
-        .upload-form {
-            border: 2px dashed #ccc;
-            padding: 20px;
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        #preview {
-            max-width: 300px;
-            margin: 10px auto;
-        }
-        .result {
-            margin-top: 20px;
-            padding: 20px;
-            border: 1px solid #eee;
-        }
-        .loading {
-            display: none;
-            margin: 20px 0;
-        }
-        .error-message {
-            color: red;
-            margin-top: 10px;
-            display: none;
         }
     </style>
 </head>
-<body>
-    <div class="container">
-        <h1>Résolution de problème mathématique</h1>
-        <div class="upload-form">
-            <form id="uploadForm" enctype="multipart/form-data">
-                <input type="file" id="imageInput" name="image" accept="image/*" onchange="previewImage(event)">
-                <br><br>
-                <img id="preview" style="display: none;">
-                <br>
-                <button type="submit">Analyser l'image</button>
-            </form>
-            <div id="loading" class="loading">
-                Analyse en cours... Cette opération peut prendre quelques instants.
             </div>
-            <div id="errorMessage" class="error-message"></div>
         </div>
-        <div id="result" class="result"></div>
     </div>
     <script>
@@ -63,7 +89,7 @@
             reader.onload = function() {
                 preview.src = reader.result;
-                preview.style.display = 'block';
             }
             if (file) {
@@ -72,16 +98,16 @@
         }
         document.getElementById('uploadForm').addEventListener('submit', function(e) {
-            e.preventDefault();  // Empêche le rechargement de la page
             const formData = new FormData(this);
             const loading = document.getElementById('loading');
             const result = document.getElementById('result');
             const errorMessage = document.getElementById('errorMessage');
-            // Afficher le message de chargement
-            loading.style.display = 'block';
-            errorMessage.style.display = 'none';
             result.innerHTML = '';
             fetch('/upload', {
@@ -90,23 +116,32 @@
             })
             .then(response => response.json())
             .then(data => {
-                loading.style.display = 'none';
                 if (data.error) {
                     errorMessage.textContent = data.error;
-                    errorMessage.style.display = 'block';
                 } else {
-                    result.innerHTML = data.result;
-                    // Recharger MathJax pour le nouveau contenu
                     if (window.MathJax) {
                         MathJax.Hub.Queue(["Typeset", MathJax.Hub, result]);
                     }
                 }
             })
             .catch(error => {
-                loading.style.display = 'none';
                 errorMessage.textContent = "Une erreur s'est produite lors de l'analyse.";
-                errorMessage.style.display = 'block';
                 console.error('Erreur:', error);
             });
         });

     <title>Résolution de problème mathématique</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.24.2/plotly.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        @keyframes spin {
+            to { transform: rotate(360deg); }
         }
+        .animate-spin-slow {
+            animation: spin 1.5s linear infinite;
         }
     </style>
+    <script>
+        MathJax.Hub.Config({
+            tex2jax: {
+                inlineMath: [['$','$'], ['\\(','\\)']],
+                displayMath: [['$$','$$'], ['\\[','\\]']],
+                processEscapes: true
+            }
+        });
+    </script>
 </head>
+<body class="bg-gray-50">
+    <div class="min-h-screen bg-gradient-to-b from-blue-50 to-white">
+        <div class="max-w-4xl mx-auto px-4 py-8">
+            <!-- En-tête -->
+            <div class="text-center mb-8">
+                <h1 class="text-3xl font-bold text-blue-800 mb-2">Résolution de Problèmes Mathématiques</h1>
+                <p class="text-gray-600">Soumettez une image de votre problème mathématique pour obtenir une solution détaillée</p>
+            </div>
+            <!-- Zone de téléchargement -->
+            <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
+                <form id="uploadForm" class="space-y-4" enctype="multipart/form-data">
+                    <!-- Zone de drop -->
+                    <div class="border-2 border-dashed border-blue-300 rounded-lg p-8 text-center hover:border-blue-500 transition-colors">
+                        <div class="flex flex-col items-center">
+                            <div class="mb-4">
+                                <svg class="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <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>
+                            <label class="cursor-pointer">
+                                <span class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
+                                    Sélectionner une image
+                                </span>
+                                <input type="file" id="imageInput" name="image" accept="image/*" class="hidden" onchange="previewImage(event)">
+                            </label>
+                        </div>
+                        <img id="preview" class="max-h-64 mx-auto mt-4 hidden rounded-lg">
+                    </div>
+                    <!-- Bouton d'analyse -->
+                    <div class="text-center">
+                        <button type="submit" class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                            Analyser l'image
+                        </button>
+                    </div>
+                </form>
+                <!-- Loading spinner -->
+                <div id="loading" class="hidden">
+                    <div class="flex items-center justify-center py-8">
+                        <div class="animate-spin-slow rounded-full h-16 w-16 border-4 border-blue-500 border-t-transparent"></div>
+                    </div>
+                    <p class="text-center text-gray-600">Analyse en cours... Veuillez patienter.</p>
+                </div>
+                <!-- Message d'erreur -->
+                <div id="errorMessage" class="hidden mt-4 p-4 bg-red-50 text-red-700 rounded-lg">
+                </div>
+            </div>
+            <!-- Zone de résultat -->
+            <div id="result" class="bg-white rounded-lg shadow-lg p-6 prose max-w-none">
+                <!-- Les résultats seront insérés ici -->
             </div>
         </div>
     </div>
     <script>
             reader.onload = function() {
                 preview.src = reader.result;
+                preview.classList.remove('hidden');
             }
             if (file) {
         }
         document.getElementById('uploadForm').addEventListener('submit', function(e) {
+            e.preventDefault();
             const formData = new FormData(this);
             const loading = document.getElementById('loading');
             const result = document.getElementById('result');
             const errorMessage = document.getElementById('errorMessage');
+            // Afficher le loading
+            loading.classList.remove('hidden');
+            errorMessage.classList.add('hidden');
             result.innerHTML = '';
             fetch('/upload', {
             })
             .then(response => response.json())
             .then(data => {
+                loading.classList.add('hidden');
                 if (data.error) {
                     errorMessage.textContent = data.error;
+                    errorMessage.classList.remove('hidden');
                 } else {
+                    // Formater la réponse en LaTeX si nécessaire
+                    let formattedResult = data.result;
+                    // Si la réponse n'est pas déjà en LaTeX, on peut l'entourer de balises mathématiques
+                    if (!formattedResult.includes('$$') && !formattedResult.includes('\\[')) {
+                        formattedResult = `\\[${formattedResult}\\]`;
+                    }
+                    result.innerHTML = formattedResult;
+                    // Recharger MathJax
                     if (window.MathJax) {
                         MathJax.Hub.Queue(["Typeset", MathJax.Hub, result]);
                     }
                 }
             })
             .catch(error => {
+                loading.classList.add('hidden');
                 errorMessage.textContent = "Une erreur s'est produite lors de l'analyse.";
+                errorMessage.classList.remove('hidden');
                 console.error('Erreur:', error);
             });
         });