Update templates/index.html

templates/index.html

@@ -464,7 +464,7 @@
                 }
             }
 
-            form.addEventListener('submit', async (event) => {
+        form.addEventListener('submit', async (event) => {
     event.preventDefault();
     const file = imageInput.files[0];
     if (!file) {
@@ -484,45 +484,59 @@
     formData.append('image', file);
 
     try {
+        let currentMode = null;
         const response = await fetch('/solve', {
             method: 'POST',
             body: formData
         });
 
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
 
-        // Essayons d'abord de lire la réponse comme du JSON
-        try {
-            const data = await response.json();
-            loader.classList.add('hidden');
-            solutionDiv.classList.remove('hidden');
-            
-            if (data.thinking) {
-                renderContent(data.thinking, thoughtsContent);
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) {
+                stopTimer();
+                break;
             }
-            if (data.answer) {
-                renderContent(data.answer, answerContent);
+
+            buffer += decoder.decode(value, { stream: true });
+            let eolIndex;
+
+            while ((eolIndex = buffer.indexOf('\n\n')) >= 0) {
+                const line = buffer.slice(0, eolIndex).trim();
+                buffer = buffer.slice(eolIndex + 2);
+
+                if (line.startsWith('data:')) {
+                    const data = JSON.parse(line.slice(5));
+                    
+                    if (data.mode) {
+                        currentMode = data.mode;
+                        loader.classList.add('hidden');
+                        solutionDiv.classList.remove('hidden');
+                    }
+                    
+                    if (data.content) {
+                        const content = data.content;
+                        if (currentMode === 'thinking') {
+                            renderContent(content, thoughtsContent);
+                            thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+                        } else if (currentMode === 'answering') {
+                            renderContent(content, answerContent);
+                        }
+                    }
+                }
             }
-        } catch (jsonError) {
-            // Si ce n'est pas du JSON, essayons de lire comme du texte
-            const textData = await response.text();
-            loader.classList.add('hidden');
-            solutionDiv.classList.remove('hidden');
-            renderContent(textData, answerContent);
         }
 
-        stopTimer();
-
     } catch (error) {
         console.error('Erreur:', error);
         alert('Une erreur est survenue lors du traitement de la requête.');
         loader.classList.add('hidden');
         stopTimer();
     }
-});
-
+});    
           
         });
     </script>