Update templates/index.html

templates/index.html

@@ -136,10 +136,6 @@
                         </div>
                         <input id="image-input" type="file" name="image" class="hidden" accept="image/*" />
                     </label>
-                    <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>
             </form>
 
@@ -157,130 +153,64 @@
             <!-- 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 items-center mb-4">
-                    <button id="copy-button"
-                        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>
         </div>
     </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 saveButton = document.getElementById('save-button');
-        let generatedResult = '';
-
-        imageInput.addEventListener('change', function (e) {
+        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) {
-                    imagePreview.src = e.target.result;
-                    imagePreview.classList.remove('hidden');
-                    submitButton.classList.remove('hidden');
+                    preview.src = e.target.result;
+                    preview.classList.remove('hidden');
                 };
                 reader.readAsDataURL(file);
-            } else {
-                imagePreview.src = "";
-                imagePreview.classList.add('hidden');
-                submitButton.classList.add('hidden');
-            }
-        });
-
-        form.addEventListener('submit', async function (e) {
-            e.preventDefault();
 
-            // Show loading
-            loading.classList.remove('hidden');
-            resultContainer.classList.add('hidden');
-            result.classList.add('math-hidden');
-            submitButton.classList.add('hidden');
+                // Show loading
+                document.getElementById('loading').classList.remove('hidden');
+                document.getElementById('result-container').classList.add('hidden');
+                document.getElementById('result').classList.add('math-hidden');
 
-            const formData = new FormData(form);
+                try {
+                    const formData = new FormData();
+                    formData.append('image', file);
 
-            try {
-                const response = await fetch('/generate', {
-                    method: 'POST',
-                    body: formData
-                });
+                    const response = await fetch('/generate', {
+                        method: 'POST',
+                        body: formData
+                    });
 
-                const data = await response.json();
-                generatedResult = data.result;
+                    const data = await response.json();
 
-                // Hide loading
-                loading.classList.add('hidden');
+                    // Hide loading
+                    document.getElementById('loading').classList.add('hidden');
 
-                // Show result
-                resultContainer.classList.remove('hidden');
-                result.innerHTML = marked.parse(generatedResult);
+                    // 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);
 
-                // Rendre les maths avec MathJax
-                setTimeout(() => {
-                    MathJax.typesetPromise([result])
+                    // Rendre les maths avec MathJax
+                    MathJax.typesetPromise([document.getElementById('result')])
                         .then(() => {
-                            result.classList.remove('math-hidden');
+                            document.getElementById('result').classList.remove('math-hidden');
                         })
                         .catch((err) => {
                             console.error('Erreur MathJax:', err);
-                            result.innerHTML = "Erreur lors du rendu des mathématiques.";
-                            result.classList.remove('math-hidden');
+                            document.getElementById('result').innerHTML = "Erreur lors du rendu des mathématiques.";
+                            document.getElementById('result').classList.remove('math-hidden');
                         });
-                }, 0);
 
-            } 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
-        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 file = imageInput.files[0];
-
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function (e) {
-                    const savedData = {
-                        timestamp: timestamp,
-                        image: e.target.result, // On sauvegarde la data URL de l'image
-                        result: generatedResult
-                    };
-
-                    localStorage.setItem('savedResult-' + Date.now(), JSON.stringify(savedData));
-                    alert('Réponse sauvegardée!');
-                };
-                reader.readAsDataURL(file); // On lit l'image comme une data URL
-            } else {
-                alert('Aucune image sélectionnée.');
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    document.getElementById('loading').classList.add('hidden');
+                    alert('Une erreur est survenue lors du traitement de l\'image.');
+                }
             }
         });
     </script>