Update templates/index.html

templates/index.html

@@ -136,6 +136,11 @@
                         </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>
+                        Soumettre
+                    </button>
                 </div>
             </form>
 
@@ -152,15 +157,47 @@
 
             <!-- 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 class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold text-gray-800">Résolution détaillée :</h2>
+                    <button id="copy-button"
+                        class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition duration-300">
+                        <i class="fas fa-copy mr-2"></i>Copier
+                    </button>
+                </div>
                 <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];
+        const imageInput = document.getElementById('image-input');
+        const submitButton = document.getElementById('submit-button');
+        const copyButton = document.getElementById('copy-button');
+        const resultDiv = document.getElementById('result');
+
+        // 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];
             if (file) {
                 // Show preview
                 const preview = document.getElementById('image-preview');
@@ -174,7 +211,7 @@
                 // Show loading
                 document.getElementById('loading').classList.remove('hidden');
                 document.getElementById('result-container').classList.add('hidden');
-                document.getElementById('result').classList.add('math-hidden');
+                resultDiv.classList.add('math-hidden');
 
                 try {
                     const formData = new FormData();
@@ -192,19 +229,20 @@
 
                     // Show result
                     document.getElementById('result-container').classList.remove('hidden');
-                    // Utiliser marked pour convertir le markdown en HTML
-                    document.getElementById('result').innerHTML = marked.parse(data.result);
+                    const formattedResult = marked.parse(data.result);
+                    resultDiv.innerHTML = formattedResult;
+
+                    // Sauvegarder dans le localStorage
+                    localStorage.setItem('lastResponse', 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);
-                            document.getElementById('result').innerHTML = "Erreur lors du rendu des mathématiques.";
-                            document.getElementById('result').classList.remove('math-hidden');
-                        });
+                    MathJax.typesetPromise([resultDiv]).then(() => {
+                        resultDiv.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');
+                    });
 
                 } catch (error) {
                     console.error('Erreur:', error);
@@ -213,6 +251,20 @@
                 }
             }
         });
+
+        // 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);
+            });
+        });
     </script>
 </body>