Create index.html

templates/index.html

@@ -0,0 +1,128 @@
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, preventDefaults, false);
+            });
+
+            function preventDefaults(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropZone.addEventListener(eventName, highlight, false);
+            });
+
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, unhighlight, false);
+            });
+
+            function highlight(e) {
+                dropZone.classList.add('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);
+                }
+            }
+
+            form.addEventListener('submit', async (event) => {
+                event.preventDefault();
+                const file = imageInput.files[0];
+                if (!file) {
+                    alert('Veuillez sélectionner une image.');
+                    return;
+                }
+
+                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;
+                        }
+
+                        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>${marked.parse(content)}</p>`;
+                                        thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+                                    } else if (currentMode === 'answering') {
+                                        // Applique le rendu Markdown
+                                        answerContent.innerHTML += marked.parse(content);
+                                        // Applique le rendu MathJax
+                                        if (window.MathJax) {
+                                            MathJax.typesetPromise([answerContent]).then(() => {
+                                                // Le rendu MathJax est terminé, faites défiler vers le bas si nécessaire
+                                                answerContent.scrollTop = answerContent.scrollHeight;
+                                            }).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();
+                }
+            });
+        });
+    </script>
+</body>
+</html>