Serveur

Runtime error

App Files Files Community

Docfile commited on Nov 15, 2024

Commit

6350fb6

verified ·

1 Parent(s): 03fe7bd

Update templates/math.html

Browse files

Files changed (1) hide show

templates/math.html +128 -108

templates/math.html CHANGED Viewed

@@ -1,142 +1,162 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <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>
 </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 class="result-container">
-                <div id="result" class="bg-white rounded-lg shadow-lg p-6">
-                    <!-- Les résultats seront insérés ici -->
                 </div>
             </div>
         </div>
     </div>
     <script>
-        function previewImage(event) {
-            const preview = document.getElementById('preview');
-            const file = event.target.files[0];
-            const reader = new FileReader();
-            reader.onload = function() {
-                preview.src = reader.result;
-                preview.classList.remove('hidden');
-            }
-            if (file) {
-                reader.readAsDataURL(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', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => response.json())
-            .then(data => {
-                loading.classList.add('hidden');
-                if (data.error) {
-                    errorMessage.textContent = data.error;
-                    errorMessage.classList.remove('hidden');
-                } else {
-                    // Injecter directement le HTML retourné par Gemini
-                    result.innerHTML = data.result;
-                    // Recharger MathJax pour les nouvelles équations
                     if (window.MathJax) {
-                        MathJax.Hub.Queue(["Typeset", MathJax.Hub, result]);
                     }
-                    // Forcer le rafraîchissement des graphiques Plotly s'il y en a
-                    if (window.Plotly) {
-                        const plots = result.getElementsByClassName('plotly-graph-div');
-                        Array.from(plots).forEach(plot => {
-                            Plotly.relayout(plot, {});
-                        });
                     }
                 }
-            })
-            .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);
             });
         });
     </script>

 <!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>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
+        .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;
         }
     </style>
 </head>
+<body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
+    <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>
+        </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">
+                    <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>
+                <button type="submit" class="w-full md:w-auto px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2">
+                    <i class="fas fa-paper-plane"></i>
+                    <span>Analyser l'image</span>
+                </button>
+            </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-b-2 border-blue-600"></div>
+            <p class="text-gray-700">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">
+                    <!-- Le contenu LaTeX sera inséré ici -->
                 </div>
             </div>
         </div>
     </div>
     <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const dropzone = document.getElementById('dropzone');
+            const fileInput = document.getElementById('fileInput');
+            const uploadForm = document.getElementById('uploadForm');
+            const loading = document.getElementById('loading');
+            const response = document.getElementById('response');
+            const latexContent = document.getElementById('latexContent');
+            // Gestion du drag & drop
+            dropzone.addEventListener('click', () => fileInput.click());
+            dropzone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropzone.classList.add('bg-blue-50');
+            });
+            dropzone.addEventListener('dragleave', () => {
+                dropzone.classList.remove('bg-blue-50');
+            });
+            dropzone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropzone.classList.remove('bg-blue-50');
+                if (e.dataTransfer.files.length) {
+                    fileInput.files = e.dataTransfer.files;
+                    const event = new Event('change');
+                    fileInput.dispatchEvent(event);
+                }
+            });
+            // Gestion du formulaire
+            uploadForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const formData = new FormData();
+                formData.append('image', fileInput.files[0]);
+                try {
+                    loading.classList.add('active');
+                    response.classList.add('hidden');
+                    const res = await fetch('/upload', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const data = await res.json();
+                    if (data.error) {
+                        throw new Error(data.error);
+                    }
+                    latexContent.innerHTML = data.result;
+                    response.classList.remove('hidden');
+                    // Rafraîchir le rendu LaTeX
                     if (window.MathJax) {
+                        MathJax.Hub.Queue(["Typeset", MathJax.Hub, latexContent]);
                     }
+                } catch (error) {
+                    alert('Erreur: ' + error.message);
+                } finally {
+                    loading.classList.remove('active');
+                }
+            });
+            // Aperçu de l'image sélectionnée
+            fileInput.addEventListener('change', function() {
+                if (this.files && this.files[0]) {
+                    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');
+                        // Supprimer l'aperçu précédent s'il existe
+                        const oldPreview = dropzone.querySelector('img');
+                        if (oldPreview) {
+                            oldPreview.remove();
+                        }
+                        dropzone.appendChild(preview);
                     }
+                    reader.readAsDataURL(this.files[0]);
                 }
             });
         });
     </script>