Update templates/index.html

templates/index.html

@@ -166,186 +166,193 @@
     </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');
-            const timestamp = document.getElementById('timestamp');
-
-            let startTime = null;
-            let timerInterval = null;
-
-            function updateTimestamp() {
-                if (startTime) {
-                    const elapsed = Math.floor((Date.now() - startTime) / 1000);
-                    timestamp.textContent = elapsed + "s";
-                }
+        
+           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');
+    const timestamp = document.getElementById('timestamp');
+
+    let startTime = null;
+    let timerInterval = null;
+
+    function updateTimestamp() {
+        if (startTime) {
+            const elapsed = Math.floor((Date.now() - startTime) / 1000);
+            timestamp.textContent = elapsed + "s";
+        }
+    }
+
+    function startTimer() {
+        startTime = Date.now();
+        timerInterval = setInterval(updateTimestamp, 1000);
+        updateTimestamp();
+    }
+
+    function stopTimer() {
+        if (timerInterval) {
+            clearInterval(timerInterval);
+            timerInterval = null;
+        }
+        startTime = null;
+        timestamp.textContent = "";
+    }
+
+    thoughtsToggle.addEventListener('click', () => {
+        thoughtsBox.classList.toggle('open');
+        thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
+    });
+
+    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');
+        }
+    });
 
-            function startTimer() {
-                startTime = Date.now();
-                timerInterval = setInterval(updateTimestamp, 1000);
-                updateTimestamp();
-            }
+    const dropZone = document.querySelector('.uploadArea');
 
-            function stopTimer() {
-                if (timerInterval) {
-                    clearInterval(timerInterval);
-                    timerInterval = null;
-                }
-                startTime = null;
-                timestamp.textContent = "";
-            }
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, preventDefaults, false);
+    });
 
-            thoughtsToggle.addEventListener('click', () => {
-                thoughtsBox.classList.toggle('open');
-                thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
-            });
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
 
-            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');
-                }
-            });
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, highlight, false);
+    });
 
-            const dropZone = document.querySelector('.uploadArea');
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, unhighlight, false);
+    });
 
-            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-                dropZone.addEventListener(eventName, preventDefaults, false);
-            });
+    function highlight(e) {
+        dropZone.classList.add('border-blue-400');
+    }
 
-            function preventDefaults(e) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
+    function unhighlight(e) {
+        dropZone.classList.remove('border-blue-400');
+    }
 
-            ['dragenter', 'dragover'].forEach(eventName => {
-                dropZone.addEventListener(eventName, highlight, false);
-            });
+    dropZone.addEventListener('drop', handleDrop, false);
 
-            ['dragleave', 'drop'].forEach(eventName => {
-                dropZone.addEventListener(eventName, unhighlight, false);
-            });
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
 
-            function highlight(e) {
-                dropZone.classList.add('border-blue-400');
+        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);
+        }
+    }
+
+    form.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        const file = imageInput.files[0];
+        if (!file) {
+            alert('Veuillez sélectionner une image.');
+            return;
+        }
 
-            function unhighlight(e) {
-                dropZone.classList.remove('border-blue-400');
-            }
+        startTimer();
 
-            dropZone.addEventListener('drop', handleDrop, false);
+        loader.classList.remove('hidden');
+        solutionDiv.classList.add('hidden');
+        thoughtsContent.innerHTML = '';
+        answerContent.innerHTML = '';
+        thoughtsBox.classList.add('open');
 
-            function handleDrop(e) {
-                const dt = e.dataTransfer;
-                const files = dt.files;
+        const formData = new FormData();
+        formData.append('image', file);
 
-                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);
-                }
-            }
+        try {
+            let currentMode = null;
+            const response = await fetch('/solve', {
+                method: 'POST',
+                body: formData
+            });
 
-            form.addEventListener('submit', async (event) => {
-                event.preventDefault();
-                const file = imageInput.files[0];
-                if (!file) {
-                    alert('Veuillez sélectionner une image.');
-                    return;
-                }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
 
-                startTimer();
-
-                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) {
-                            stopTimer();
-                            break;
-                        }
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) {
+                    stopTimer();
+                    break;
+                }
 
-                        buffer += decoder.decode(value, { stream: true });
-                        let eolIndex;
+                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);
+                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 (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>`;
+                                if (window.MathJax) {
+                                    MathJax.typesetPromise([thoughtsContent]).catch((err) => 
+                                        console.log('MathJax error:', err)
+                                    );
                                 }
-                                
-                                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.typesetPromise([answerContent]).catch((err) => console.log('MathJax error:', err));
-                                        }
-                                    }
+                                thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+                            } else if (currentMode === 'answering') {
+                                answerContent.innerHTML += content;
+                                if (window.MathJax) {
+                                    MathJax.typesetPromise([answerContent]).catch((err) => 
+                                        console.log('MathJax error:', err)
+                                    );
                                 }
                             }
                         }
                     }
-
-                } catch (error) {
-                    console.error('Erreur:', error);
-                    alert('Une erreur est survenue lors du traitement de la requête.');
-                    loader.classList.add('hidden');
-                    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>
 </body>
 </html>