Spaces:

Docfile
/

Mariam-cards

Running

File size: 13,505 Bytes

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mariam M-0 | Solution Mathématique</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

    <!-- Optimized MathJax Configuration -->
    <script>
        window.MathJax = {
            tex: {
                inlineMath: [['$', '$']],
                displayMath: [['$$', '$$']],
                processEscapes: true,
                packages: ['base', 'ams']
            },
            options: {
                enableMenu: false,
                messageStyle: 'none'
            },
            startup: {
                pageReady: () => {
                    console.log('MathJax is fully loaded and ready.');
                    window.mathJaxReady = true; // Signal that MathJax is ready
                    // On pourrait appeler une fonction ici pour traiter du contenu initial si nécessaire
                }
            }
        };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');

        body {
            font-family: 'Space Grotesk', sans-serif;
        }

        .uploadArea {
            background: #f3f4f6;
            border: 2px dashed #d1d5db;
            transition: border-color 0.2s ease;
        }

        .uploadArea:hover {
            border-color: #3b82f6;
        }

        .blue-button {
            background: #3b82f6;
            transition: background-color 0.2s ease;
        }

        .blue-button:hover {
            background: #2563eb;
        }

        .loader {
            width: 48px;
            height: 48px;
            border: 3px solid #3b82f6;
            border-bottom-color: transparent;
            border-radius: 50%;
            display: inline-block;
            animation: rotation 1s linear infinite;
        }

        @keyframes rotation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .thought-box {
            transition: max-height 0.3s ease-out;
            max-height: 0;
            overflow: hidden;
        }

        .thought-box.open {
            max-height: 500px;
        }

        #thoughtsContent, #answerContent {
            max-height: 500px;
            overflow-y: auto;
            scroll-behavior: smooth;
            white-space: pre-wrap; /* Gérer les espaces et les sauts de ligne */
        }

        .preview-image {
            max-width: 300px;
            max-height: 300px;
            object-fit: contain;
        }

        .timestamp {
            color: #3b82f6;
            font-size: 0.9em;
            margin-left: 8px;
        }
    </style>

</head>
<body class="p-4">
    <div class="max-w-4xl mx-auto">
        <div class="p-6">
            <div class="text-center mb-8">
                <h1 class="text-4xl font-bold text-blue-600">Mariam M-0</h1>
                <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente</p>
            </div>

            <form id="problemForm" class="space-y-6">
                <div class="uploadArea p-8 text-center relative">
                    <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                    <div class="space-y-3">
                        <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
                            <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <p class="text-gray-700 font-medium">Déposez votre image ici</p>
                        <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
                    </div>
                </div>

                <div id="imagePreview" class="hidden text-center">
                    <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation">
                </div>

                <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
                    Résoudre le problème
                </button>
            </form>

            <div id="loader" class="hidden mt-8 text-center">
                <span class="loader"></span>
                <p class="mt-4 text-gray-600">Analyse en cours...</p>
            </div>

            <div id="solution" class="hidden mt-8 space-y-6">
                <div class="border-t pt-4">
                    <button id="thoughtsToggle" class="w-full flex justify-between items-center p-2">
                        <span class="font-medium text-gray-700">Processus de Réflexion</span>
                        <span id="timestamp" class="timestamp"></span>
                    </button>
                    <div id="thoughtsBox" class="thought-box">
                        <div id="thoughtsContent" class="p-4 text-gray-600"></div>
                    </div>
                </div>

                <div class="border-t pt-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
                    <div id="answerContent" class="text-gray-700"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('problemForm');
            const imageInput = document.getElementById('imageInput');
            const loader = document.getElementById('loader');
            const solution = 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;
            let thoughtsBuffer = '';
            let answerBuffer = '';

            const updateTimestamp = () => {
                if (startTime) {
                    timestamp.textContent = `${Math.floor((Date.now() - startTime) / 1000)}s`;
                }
            };

            const startTimer = () => {
                startTime = Date.now();
                timerInterval = setInterval(updateTimestamp, 1000);
                updateTimestamp();
            };

            const stopTimer = () => {
                clearInterval(timerInterval);
                startTime = null;
                timestamp.textContent = '';
            };

            const handleFileSelect = file => {
                if (!file) return;
                const reader = new FileReader();
                reader.onload = e => {
                    previewImage.src = e.target.result;
                    imagePreview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            };

            thoughtsToggle.addEventListener('click', () => {
                thoughtsBox.classList.toggle('open');
            });

            imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));

            const dropZone = document.querySelector('.uploadArea');
            dropZone.addEventListener('dragover', e => {
                e.preventDefault();
                dropZone.classList.add('border-blue-400');
            });

            dropZone.addEventListener('dragleave', e => {
                e.preventDefault();
                dropZone.classList.remove('border-blue-400');
            });

            dropZone.addEventListener('drop', e => {
                e.preventDefault();
                dropZone.classList.remove('border-blue-400');
                handleFileSelect(e.dataTransfer.files[0]);
            });

            const typesetAnswerIfReady = async () => {
                if (window.mathJaxReady) {
                    MathJax.startup.document.elements = [document.getElementById('answerContent')];
                    await MathJax.typesetPromise();
                    answerContent.scrollTop = answerContent.scrollHeight;
                } else {
                    setTimeout(typesetAnswerIfReady, 200);
                }
            };

            // Configuration de marked pour gérer les sauts de ligne
            marked.setOptions({
              breaks: true, // Interpréter les sauts de ligne simples comme des <br>
            });

            form.addEventListener('submit', async e => {
                e.preventDefault();
                const file = imageInput.files[0];
                if (!file) {
                    alert('Veuillez sélectionner une image.');
                    return;
                }

                startTimer();
                loader.classList.remove('hidden');
                solution.classList.add('hidden');
                thoughtsContent.innerHTML = '';
                answerContent.innerHTML = '';
                thoughtsBuffer = '';
                answerBuffer = '';
                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 = '';

                    const processChunk = async (chunk) => {
                        buffer += decoder.decode(chunk, { stream: true });
                        const lines = buffer.split('\n\n');
                        buffer = lines.pop();

                        for (const line of lines) {
                            if (!line.startsWith('data:')) continue;
                            const data = JSON.parse(line.slice(5));

                            if (data.mode) {
                                currentMode = data.mode;
                                loader.classList.add('hidden');
                                solution.classList.remove('hidden');
                            }

                            if (data.content) {
                                if (currentMode === 'thinking') {
                                    thoughtsBuffer += data.content;
                                } else if (currentMode === 'answering') {
                                    answerBuffer += data.content;
                                }
                            }
                        }

                        // Mettre à jour le contenu visible à chaque chunk reçu
                        thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
                        answerContent.innerHTML = marked.parse(answerBuffer);
                        await typesetAnswerIfReady();
                    };

                    while (true) {
                        const { done, value } = await reader.read();
                        if (done) {
                            // Traiter le contenu restant dans le buffer à la fin du stream
                            if (buffer) {
                                const data = JSON.parse(buffer.slice(5));
                                if (data.content) {
                                    if (currentMode === 'thinking') {
                                        thoughtsBuffer += data.content;
                                    } else if (currentMode === 'answering') {
                                        answerBuffer += data.content;
                                    }
                                }
                            }

                            // Mettre à jour le contenu visible une dernière fois à la fin du stream
                            thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
                            answerContent.innerHTML = marked.parse(answerBuffer);
                            await typesetAnswerIfReady();
                            break;
                        }
                        await processChunk(value);
                    }
                    stopTimer();
                } catch (error) {
                    console.error('Erreur:', error);
                    alert('Une erreur est survenue.');
                    loader.classList.add('hidden');
                    stopTimer();
                }
            });
        });
    </script>
</body>
</html>