Update templates/index.html

templates/index.html

@@ -159,158 +159,211 @@
     </div>
 
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const form = document.getElementById('problemForm');
-            const imageInput = document.getElementById('imageInput');
-            const loader = document.getElementById('loader');
-            const solutionDiv = document.getElementById('solution');
-            const thoughtsContent = document.getElementById('thoughtsContent');
-            const answerContent = document.getElementById('answerContent');
-            const thoughtsToggle = document.getElementById('thoughtsToggle');
-            const thoughtsBox = document.getElementById('thoughtsBox');
-            const imagePreview = document.getElementById('imagePreview');
-            const previewImage = document.getElementById('previewImage');
-
-            thoughtsToggle.addEventListener('click', () => {
-                thoughtsBox.classList.toggle('open');
-                thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
-            });
+document.addEventListener('DOMContentLoaded', () => {
+    // Configuration de MathJax pour un meilleur support LaTeX
+    window.MathJax = {
+        tex: {
+            inlineMath: [['$', '$'], ['\\(', '\\)']],
+            displayMath: [['$$', '$$'], ['\\[', '\\]']],
+            processEscapes: true,
+            processEnvironments: true,
+            packages: ['base', 'ams', 'noerrors', 'noundefined']
+        },
+        options: {
+            ignoreHtmlClass: 'tex2jax_ignore',
+            processHtmlClass: 'tex2jax_process'
+        },
+        svg: {
+            fontCache: 'global'
+        }
+    };
+
+    const form = document.getElementById('problemForm');
+    const imageInput = document.getElementById('imageInput');
+    const loader = document.getElementById('loader');
+    const solutionDiv = document.getElementById('solution');
+    const thoughtsContent = document.getElementById('thoughtsContent');
+    const answerContent = document.getElementById('answerContent');
+    const thoughtsToggle = document.getElementById('thoughtsToggle');
+    const thoughtsBox = document.getElementById('thoughtsBox');
+    const imagePreview = document.getElementById('imagePreview');
+    const previewImage = document.getElementById('previewImage');
+
+    // Fonction pour formater le temps écoulé
+    function formatElapsedTime(seconds) {
+        return `${seconds}s`;
+    }
+
+    // Fonction pour nettoyer et préparer le texte LaTeX
+    function prepareMathContent(content) {
+        // Protège les expressions LaTeX déjà correctement formatées
+        content = content.replace(/\$\$(.*?)\$\$/g, '[[DISPLAY_MATH_$1]]');
+        content = content.replace(/\$(.*?)\$/g, '[[INLINE_MATH_$1]]');
+        
+        // Convertit les expressions potentiellement non formatées
+        content = content.replace(/\\boxed\{(.*?)\}/g, '$\\boxed{$1}$');
+        content = content.replace(/\\frac\{(.*?)\}\{(.*?)\}/g, '$\\frac{$1}{$2}$');
+        content = content.replace(/\\cos/g, '$\\cos$');
+        content = content.replace(/\\sin/g, '$\\sin$');
+        content = content.replace(/\\theta/g, '$\\theta$');
+        content = content.replace(/\\alpha/g, '$\\alpha$');
+        content = content.replace(/e\^{([^}]+)}/g, '$e^{$1}$');
+        
+        // Restaure les expressions protégées
+        content = content.replace(/\[\[DISPLAY_MATH_(.*?)\]\]/g, '$$$$1$$');
+        content = content.replace(/\[\[INLINE_MATH_(.*?)\]\]/g, '$$$1$');
+        
+        return content;
+    }
+
+    // Gestion du toggle des pensées
+    thoughtsToggle.addEventListener('click', () => {
+        thoughtsBox.classList.toggle('open');
+        thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
+    });
+
+    // Gestion de la prévisualisation des images
+    imageInput.addEventListener('change', function(e) {
+        const file = this.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                previewImage.src = e.target.result;
+                imagePreview.classList.remove('hidden');
+            }
+            reader.readAsDataURL(file);
+        } else {
+            previewImage.src = "";
+            imagePreview.classList.add('hidden');
+        }
+    });
 
-            // Image preview handling
-            imageInput.addEventListener('change', function(e) {
-                const file = this.files[0];
-                if (file) {
-                    const reader = new FileReader();
-                    reader.onload = function(e) {
-                        previewImage.src = e.target.result;
-                        imagePreview.classList.remove('hidden');
-                    }
-                    reader.readAsDataURL(file);
-                } else {
-                    previewImage.src = "";
-                    imagePreview.classList.add('hidden');
-                }
-            });
+    // Gestion du drag & drop
+    const dropZone = document.querySelector('.uploadArea');
 
-            // Drag and drop handling
-            const dropZone = document.querySelector('.uploadArea');
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, preventDefaults, false);
+    });
 
-            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-                dropZone.addEventListener(eventName, preventDefaults, false);
-            });
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
 
-            function preventDefaults(e) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, highlight, false);
+    });
 
-            ['dragenter', 'dragover'].forEach(eventName => {
-                dropZone.addEventListener(eventName, highlight, false);
-            });
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, unhighlight, false);
+    });
 
-            ['dragleave', 'drop'].forEach(eventName => {
-                dropZone.addEventListener(eventName, unhighlight, false);
-            });
+    function highlight(e) {
+        dropZone.classList.add('border-blue-400');
+    }
 
-            function highlight(e) {
-                dropZone.classList.add('border-blue-400');
-            }
+    function unhighlight(e) {
+        dropZone.classList.remove('border-blue-400');
+    }
 
-            function unhighlight(e) {
-                dropZone.classList.remove('border-blue-400');
+    dropZone.addEventListener('drop', handleDrop, false);
+
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+
+        if (files.length) {
+            imageInput.files = files;
+            const file = files[0];
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                previewImage.src = e.target.result;
+                imagePreview.classList.remove('hidden');
             }
+            reader.readAsDataURL(file);
+        }
+    }
+
+    // Gestion de la soumission du formulaire et du streaming
+    form.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        const file = imageInput.files[0];
+        if (!file) {
+            alert('Veuillez sélectionner une image.');
+            return;
+        }
 
-            dropZone.addEventListener('drop', handleDrop, false);
+        // Reset UI
+        loader.classList.remove('hidden');
+        solutionDiv.classList.add('hidden');
+        thoughtsContent.innerHTML = '';
+        answerContent.innerHTML = '';
+        thoughtsBox.classList.add('open');
+
+        const formData = new FormData();
+        formData.append('image', file);
+
+        try {
+            let currentMode = null;
+            const response = await fetch('/solve', {
+                method: 'POST',
+                body: formData
+            });
 
-            function handleDrop(e) {
-                const dt = e.dataTransfer;
-                const files = dt.files;
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
 
-                if (files.length) {
-                    imageInput.files = files;
-                    const file = files[0];
-                    const reader = new FileReader();
-                    reader.onload = function(e) {
-                        previewImage.src = e.target.result;
-                        imagePreview.classList.remove('hidden');
-                    }
-                    reader.readAsDataURL(file);
-                }
-            }
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
 
-            // Form submission and streaming
-            form.addEventListener('submit', async (event) => {
-                event.preventDefault();
-                const file = imageInput.files[0];
-                if (!file) {
-                    alert('Veuillez sélectionner une image.');
-                    return;
-                }
+                buffer += decoder.decode(value, { stream: true });
+                let eolIndex;
 
-                // Reset UI
-                loader.classList.remove('hidden');
-                solutionDiv.classList.add('hidden');
-                thoughtsContent.innerHTML = '';
-                answerContent.innerHTML = '';
-                thoughtsBox.classList.add('open');
-
-                const formData = new FormData();
-                formData.append('image', file);
-
-                try {
-                    let currentMode = null;
-                    const response = await fetch('/solve', {
-                        method: 'POST',
-                        body: formData
-                    });
-
-                    const reader = response.body.getReader();
-                    const decoder = new TextDecoder();
-                    let buffer = '';
-
-                    while (true) {
-                        const { done, value } = await reader.read();
-                        if (done) break;
-
-                        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') {
-                                        thoughtsContent.innerHTML += `<p>${content}</p>`;
-                                        thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
-                                    } else if (currentMode === 'answering') {
-                                        answerContent.innerHTML += content;
-                                        if (window.MathJax) {
-                                            MathJax.Hub.Queue(["Typeset", MathJax.Hub, answerContent]);
-                                        }
-                                    }
+                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 = prepareMathContent(data.content);
+                            const timeString = data.elapsed_time ? ` <span class="text-blue-400">(${formatElapsedTime(data.elapsed_time)})</span> ` : '';
+                            
+                            if (currentMode === 'thinking') {
+                                thoughtsContent.innerHTML += `<p>${timeString}${content}</p>`;
+                                thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+                            } else if (currentMode === 'answering') {
+                                answerContent.innerHTML += content;
+                                if (window.MathJax) {
+                                    MathJax.Hub.Queue(["Typeset", MathJax.Hub, answerContent]);
                                 }
                             }
                         }
-                    }
 
-                } catch (error) {
-                    console.error('Erreur:', error);
-                    alert('Une erreur est survenue lors du traitement de la requête.');
-                    loader.classList.add('hidden');
+                        // Mettre à jour MathJax pour le contenu des pensées aussi
+                        if (window.MathJax) {
+                            MathJax.Hub.Queue(["Typeset", MathJax.Hub, thoughtsContent]);
+                        }
+                    }
                 }
-            });
-        });
-    </script>
+            }
+
+        } catch (error) {
+            console.error('Erreur:', error);
+            alert('Une erreur est survenue lors du traitement de la requête.');
+            loader.classList.add('hidden');
+        }
+    });
+});
+</script>
 </body>
 </html>