Update templates/index.html

templates/index.html

@@ -11,94 +11,10 @@
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-
-        .loader {
-            width: 48px;
-            height: 48px;
-            border: 5px solid #FFF;
-            border-bottom-color: #3B82F6;
-            border-radius: 50%;
-            display: inline-block;
-            box-sizing: border-box;
-            animation: rotation 1s linear infinite;
-        }
-
-        @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;
-            padding: 0.5rem 0;
-        }
-
-        @media (max-width: 640px) {
-            .math-content .MathJax {
-                font-size: 0.9em;
-            }
-        }
-
-        .math-hidden {
-            visibility: hidden;
-        }
+        /* ... (votre CSS existant) ... */
     </style>
     <script>
-        // Configuration de marked
-        marked.setOptions({
-            breaks: true,
-            gfm: true,
-            headerIds: false
-        });
-
-        // Configuration de MathJax
-        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: [],
-                    checkLoading: [150, (doc) => {
-                        document.querySelectorAll('.math-content').forEach(el => {
-                            el.classList.remove('math-hidden');
-                        });
-                    }]
-                }
-            }
-        };
+        // ... (votre configuration de marked et MathJax) ...
     </script>
 </head>
 
@@ -136,9 +52,8 @@
                         </div>
                         <input id="image-input" type="file" name="image" class="hidden" accept="image/*" />
                     </label>
-                    <button id="submit-button" type="button"
-                        class="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
-                        disabled>
+                    <button type="submit" id="submit-button"
+                        class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg hidden">
                         Soumettre
                     </button>
                 </div>
@@ -157,12 +72,16 @@
 
             <!-- Result Section -->
             <div id="result-container" class="hidden mt-8">
-                <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-xl font-semibold text-gray-800">Résolution détaillée :</h2>
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Résolution détaillée :</h2>
+                <div class="flex items-center mb-4">
                     <button id="copy-button"
-                        class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition duration-300">
+                        class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg">
                         <i class="fas fa-copy mr-2"></i>Copier
                     </button>
+                    <button id="save-button"
+                        class="ml-4 bg-green-200 hover:bg-green-300 text-green-800 font-bold py-2 px-4 rounded-lg">
+                        <i class="fas fa-save mr-2"></i>Sauvegarder
+                    </button>
                 </div>
                 <div id="result" class="bg-gray-50 rounded-lg p-6 prose max-w-none math-content math-hidden"></div>
             </div>
@@ -170,100 +89,105 @@
     </div>
 
     <script>
+        const form = document.getElementById('upload-form');
         const imageInput = document.getElementById('image-input');
         const submitButton = document.getElementById('submit-button');
+        const imagePreview = document.getElementById('image-preview');
+        const loading = document.getElementById('loading');
+        const resultContainer = document.getElementById('result-container');
+        const result = document.getElementById('result');
         const copyButton = document.getElementById('copy-button');
-        const resultDiv = document.getElementById('result');
+        const saveButton = document.getElementById('save-button');
+        let generatedResult = '';
 
-        // Gérer l'état du bouton "Soumettre"
-        imageInput.addEventListener('change', () => {
-            submitButton.disabled = !imageInput.files.length;
-        });
-
-        // Fonction pour charger la dernière réponse depuis le localStorage
-        function loadLastResponse() {
-            const lastResponse = localStorage.getItem('lastResponse');
-            if (lastResponse) {
-                resultDiv.innerHTML = marked.parse(lastResponse);
-                MathJax.typesetPromise([resultDiv]).then(() => {
-                    resultDiv.classList.remove('math-hidden');
-                });
-                document.getElementById('result-container').classList.remove('hidden');
-            }
-        }
-
-        // Charger la dernière réponse au chargement de la page
-        loadLastResponse();
-
-        // Soumettre l'image et afficher la réponse
-        submitButton.addEventListener('click', async () => {
-            const file = imageInput.files[0];
+        imageInput.addEventListener('change', 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');
+                    imagePreview.src = e.target.result;
+                    imagePreview.classList.remove('hidden');
+                    submitButton.classList.remove('hidden');
                 };
                 reader.readAsDataURL(file);
+            } else {
+                imagePreview.src = "";
+                imagePreview.classList.add('hidden');
+                submitButton.classList.add('hidden');
+            }
+        });
 
-                // Show loading
-                document.getElementById('loading').classList.remove('hidden');
-                document.getElementById('result-container').classList.add('hidden');
-                resultDiv.classList.add('math-hidden');
+        form.addEventListener('submit', async function (e) {
+            e.preventDefault();
 
-                try {
-                    const formData = new FormData();
-                    formData.append('image', file);
+            // Show loading
+            loading.classList.remove('hidden');
+            resultContainer.classList.add('hidden');
+            result.classList.add('math-hidden');
+            submitButton.classList.add('hidden');
 
-                    const response = await fetch('/generate', {
-                        method: 'POST',
-                        body: formData
-                    });
+            const formData = new FormData(form);
 
-                    const data = await response.json();
+            try {
+                const response = await fetch('/generate', {
+                    method: 'POST',
+                    body: formData
+                });
 
-                    // Hide loading
-                    document.getElementById('loading').classList.add('hidden');
+                const data = await response.json();
+                generatedResult = data.result;
 
-                    // Show result
-                    document.getElementById('result-container').classList.remove('hidden');
-                    const formattedResult = marked.parse(data.result);
-                    resultDiv.innerHTML = formattedResult;
+                // Hide loading
+                loading.classList.add('hidden');
 
-                    // Sauvegarder dans le localStorage
-                    localStorage.setItem('lastResponse', data.result);
+                // Show result
+                resultContainer.classList.remove('hidden');
+                result.innerHTML = marked.parse(generatedResult);
 
-                    // Rendre les maths avec MathJax
-                    MathJax.typesetPromise([resultDiv]).then(() => {
-                        resultDiv.classList.remove('math-hidden');
-                    }).catch((err) => {
+                // Rendre les maths avec MathJax
+                MathJax.typesetPromise([result])
+                    .then(() => {
+                        result.classList.remove('math-hidden');
+                    })
+                    .catch((err) => {
                         console.error('Erreur MathJax:', err);
-                        resultDiv.innerHTML = "Erreur lors du rendu des mathématiques.";
-                        resultDiv.classList.remove('math-hidden');
+                        result.innerHTML = "Erreur lors du rendu des mathématiques.";
+                        result.classList.remove('math-hidden');
                     });
 
-                } catch (error) {
-                    console.error('Erreur:', error);
-                    document.getElementById('loading').classList.add('hidden');
-                    alert('Une erreur est survenue lors du traitement de l\'image.');
-                }
+            } catch (error) {
+                console.error('Erreur:', error);
+                loading.classList.add('hidden');
+                alert('Une erreur est survenue lors du traitement de l\'image.');
             }
         });
 
-        // Copier la réponse dans le presse-papiers
-        copyButton.addEventListener('click', () => {
-            const textToCopy = resultDiv.innerText; 
-            navigator.clipboard.writeText(textToCopy).then(() => {
-                // Confirmation visuelle (optionnel)
-                copyButton.innerHTML = '<i class="fas fa-check mr-2"></i>Copié !';
-                setTimeout(() => {
-                    copyButton.innerHTML = '<i class="fas fa-copy mr-2"></i>Copier';
-                }, 2000);
-            }).catch(err => {
-                console.error('Erreur lors de la copie:', err);
-            });
+        // Copier la réponse
+        copyButton.addEventListener('click', function () {
+            navigator.clipboard.writeText(generatedResult)
+                .then(() => {
+                    // Message de confirmation (optionnel)
+                    alert('Réponse copiée dans le presse-papiers!');
+                })
+                .catch(err => {
+                    console.error('Erreur lors de la copie:', err);
+                });
+        });
+
+        // Sauvegarder la réponse dans le localStorage
+        saveButton.addEventListener('click', function () {
+            const timestamp = new Date().toLocaleString();
+            const savedData = {
+                timestamp: timestamp,
+                image: imagePreview.src,
+                result: generatedResult
+            };
+
+            localStorage.setItem('savedResult-' + Date.now(), JSON.stringify(savedData));
+
+            // Message de confirmation (optionnel)
+            alert('Réponse sauvegardée!');
         });
     </script>
 </body>