Update templates/index.html

templates/index.html

@@ -159,7 +159,7 @@
     </div>
 
     <script>
-        document.getElementById('image-input').addEventListener('change', async function (e) {
+        document.getElementById('image-input').addEventListener('change', function (e) {
             const file = e.target.files[0];
             if (file) {
                 // Show preview
@@ -175,42 +175,50 @@
                 document.getElementById('loading').classList.remove('hidden');
                 document.getElementById('result-container').classList.add('hidden');
                 document.getElementById('result').classList.add('math-hidden');
+                document.getElementById('result').innerHTML = '';
 
-                try {
-                    const formData = new FormData();
-                    formData.append('image', file);
+                const formData = new FormData();
+                formData.append('image', file);
 
-                    const response = await fetch('/generate', {
-                        method: 'POST',
-                        body: formData
-                    });
+                const eventSource = new EventSource('/generate?' + new URLSearchParams(formData));
 
-                    const data = await response.json();
+                let completeResponse = '';
 
+                eventSource.onmessage = function (event) {
                     // Hide loading
                     document.getElementById('loading').classList.add('hidden');
 
                     // 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);
+
+                    if (event.data.startsWith('Error:')) {
+                        console.error('Erreur:', event.data);
+                        document.getElementById('result').innerHTML = event.data;
+                        eventSource.close();
+                        return;
+                    }
+
+                    completeResponse += event.data;
+                    document.getElementById('result').innerHTML = marked.parse(completeResponse);
 
                     // 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');
-                        });
+                    .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');
+                    });
+                };
 
-                } catch (error) {
-                    console.error('Erreur:', error);
+                eventSource.onerror = function (err) {
+                    console.error('EventSource failed:', err);
                     document.getElementById('loading').classList.add('hidden');
-                    alert('Une erreur est survenue lors du traitement de l\'image.');
-                }
+                    document.getElementById('result').innerHTML = "Une erreur est survenue lors du traitement de l'image.";
+                    eventSource.close();
+                };
             }
         });
     </script>