Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on Jan 23

Commit

c35d394

verified ·

1 Parent(s): 0b52bb7

Create index.html

Browse files

Files changed (1) hide show

templates/index.html +422 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,422 @@

+<!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/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <script>
+        window.MathJax = {
+            loader: {
+                load: ['[tex]/color', '[tex]/ams', '[tex]/noerrors', '[tex]/noundefined']
+            },
+            tex: {
+                inlineMath: [['$', '$']],
+                displayMath: [['$$', '$$']],
+                processEscapes: true,
+                packages: {
+                    '[+]': ['color', 'ams', 'noerrors', 'noundefined']
+                },
+                macros: {
+                    RR: "{\\mathbb{R}}",
+                    NN: "{\\mathbb{N}}",
+                    ZZ: "{\\mathbb{Z}}",
+                    QQ: "{\\mathbb{Q}}",
+                    CC: "{\\mathbb{C}}",
+                    vec: ["{\\overrightarrow{#1}}", 1],
+                    mat: ["{\\mathbf{#1}}", 1]
+                }
+            },
+            options: {
+                enableMenu: false,
+                messageStyle: 'none',
+                renderActions: {
+                    addMenu: [],
+                    checkLoading: []
+                }
+            },
+            startup: {
+                ready: () => {
+                    MathJax.startup.defaultReady();
+                    MathJax.startup.promise.then(() => {
+                        document.dispatchEvent(new Event('MathJaxReady'));
+                    });
+                }
+            },
+            svg: {
+                fontCache: 'global',
+                scale: 1,
+                minScale: .5
+            }
+        };
+    </script>
+    <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" async></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background-color: white;
+        }
+        .uploadArea {
+            background: #f3f4f6;
+            border: 2px dashed #d1d5db;
+            transition: all 0.2s ease;
+        }
+        .uploadArea:hover {
+            border-color: #3b82f6;
+            transform: translateY(-1px);
+        }
+        .blue-button {
+            background: #3b82f6;
+            transition: all 0.2s ease;
+        }
+        .blue-button:hover {
+            background: #2563eb;
+            transform: translateY(-1px);
+        }
+        .loader {
+            width: 48px;
+            height: 48px;
+            border: 3px solid #3b82f6;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            display: inline-block;
+            box-sizing: border-box;
+            animation: rotation 1s linear infinite;
+        }
+        @keyframes rotation {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .thought-box {
+            transition: all 0.3s ease-out;
+            max-height: 0;
+            overflow: hidden;
+        }
+        .thought-box.open {
+            max-height: 500px;
+        }
+        .preview-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20px;
+        }
+        .preview-image {
+            max-width: 300px;
+            max-height: 300px;
+            border-radius: 8px;
+            object-fit: contain;
+        }
+        #thoughtsContent, #answerContent {
+            max-height: 500px;
+            overflow-y: auto;
+            scroll-behavior: smooth;
+        }
+        .timestamp {
+            color: #3b82f6;
+            margin-left: 10px;
+            font-size: 0.9em;
+        }
+        .math-content {
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .math-content.rendered {
+            opacity: 1;
+        }
+        .mjx-math {
+            text-align: left !important;
+        }
+        .mjx-chtml {
+            margin: 0 !important;
+            padding: 0 !important;
+            display: inline-block !important;
+            outline: none !important;
+        }
+        mjx-container {
+            padding: 5px 0;
+        }
+        .prose {
+            max-width: 65ch;
+            color: #374151;
+            line-height: 1.6;
+        }
+        .prose p {
+            margin-bottom: 1em;
+        }
+        .prose h1, .prose h2, .prose h3 {
+            color: #1f2937;
+            font-weight: 600;
+            margin-top: 1.5em;
+            margin-bottom: 0.5em;
+        }
+    </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 mb-2">Mariam M-0</h1>
+                <p class="text-gray-600 text-lg">Solution Mathématique Intelligente</p>
+            </div>
+            <form id="problemForm" class="space-y-6">
+                <div class="relative">
+                    <div class="uploadArea p-8 text-center cursor-pointer">
+                        <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>
+                            <div class="text-gray-700 font-medium">Déposez votre image ici</div>
+                            <div class="text-gray-500 text-sm">ou cliquez pour sélectionner</div>
+                        </div>
+                    </div>
+                    <div id="imagePreview" class="hidden preview-container">
+                        <img id="previewImage" alt="Prévisualisation" class="preview-image">
+                    </div>
+                </div>
+                <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg shadow-sm">
+                    Résoudre le problème
+                </button>
+            </form>
+            <div id="loader" class="hidden mt-8">
+                <div class="flex flex-col items-center justify-center space-y-4">
+                    <span class="loader"></span>
+                    <div class="text-gray-600">Analyse en cours...</div>
+                </div>
+            </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 hover:bg-gray-50 rounded">
+                        <div class="flex items-center">
+                            <span class="font-medium text-gray-700">Processus de Réflexion</span>
+                            <span id="timestamp" class="timestamp"></span>
+                        </div>
+                        <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                        </svg>
+                    </button>
+                    <div id="thoughtsBox" class="thought-box">
+                        <div id="thoughtsContent" class="prose p-4"></div>
+                    </div>
+                </div>
+                <div class="border-t pt-6">
+                    <h3 class="text-2xl font-bold text-gray-800 mb-4">Solution</h3>
+                    <div id="answerContent" class="prose"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const elements = {
+                form: document.getElementById('problemForm'),
+                imageInput: document.getElementById('imageInput'),
+                loader: document.getElementById('loader'),
+                solution: document.getElementById('solution'),
+                thoughtsContent: document.getElementById('thoughtsContent'),
+                answerContent: document.getElementById('answerContent'),
+                thoughtsToggle: document.getElementById('thoughtsToggle'),
+                thoughtsBox: document.getElementById('thoughtsBox'),
+                imagePreview: document.getElementById('imagePreview'),
+                previewImage: document.getElementById('previewImage'),
+                timestamp: document.getElementById('timestamp')
+            };
+            let renderQueue = [];
+            let isProcessing = false;
+            let startTime = null;
+            let timerInterval = null;
+            const updateTimestamp = () => {
+                if (startTime) {
+                    elements.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;
+                elements.timestamp.textContent = '';
+            };
+            async function processRenderQueue() {
+                if (isProcessing || renderQueue.length === 0) return;
+                isProcessing = true;
+                const element = renderQueue.shift();
+                try {
+                    if (window.MathJax && window.MathJax.typesetPromise) {
+                        await MathJax.typesetPromise([element]);
+                    }
+                    element.classList.add('rendered');
+                } catch (error) {
+                    console.error('Erreur de rendu LaTeX:', error);
+                }
+                isProcessing = false;
+                requestAnimationFrame(processRenderQueue);
+            }
+            function addContentWithLatex(container, content) {
+                const wrapper = document.createElement('div');
+                wrapper.classList.add('math-content');
+                wrapper.innerHTML = marked.parse(content);
+                container.appendChild(wrapper);
+                renderQueue.push(wrapper);
+                processRenderQueue();
+                container.scrollTop = container.scrollHeight;
+            }
+            const handleFileSelect = (file) => {
+                if (!file) return;
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    elements.previewImage.src = e.target.result;
+                    elements.imagePreview.classList.remove('hidden');
+                };
+                reader.readAsDataURL(file);
+            };
+            elements.thoughtsToggle.addEventListener('click', () => {
+                elements.thoughtsBox.classList.toggle('open');
+                elements.thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
+            });
+            elements.imageInput.addEventListener('change', (e) => handleFileSelect(e.target.files[0]));
+            const dropZone = document.querySelector('.uploadArea');
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                });
+            });
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropZone.addEventListener(eventName, () => dropZone.classList.add('border-blue-400'));
+            });
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, () => dropZone.classList.remove('border-blue-400'));
+            });
+            dropZone.addEventListener('drop', (e) => {
+                handleFileSelect(e.dataTransfer.files[0]);
+            });
+            elements.form.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const file = elements.imageInput.files[0];
+                if (!file) {
+                    alert('Veuillez sélectionner une image.');
+                    return;
+                }
+                startTimer();
+                elements.loader.classList.remove('hidden');
+                elements.solution.classList.add('hidden');
+                elements.thoughtsContent.innerHTML = '';
+                elements.answerContent.innerHTML = '';
+                elements.thoughtsBox.classList.add('open');
+                renderQueue = [];
+                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 });
+                        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;
+                                elements.loader.classList.add('hidden');
+                                elements.solution.classList.remove('hidden');
+                            }
+                            if (data.content) {
+                                const container = currentMode === 'thinking' ?
+                                    elements.thoughtsContent : elements.answerContent;
+                                addContentWithLatex(container, data.content);
+                            }
+                        }
+                    }
+                    stopTimer();
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    alert('Une erreur est survenue lors du traitement de la requête.');
+                    elements.loader.classList.add('hidden');
+                    stopTimer();
+                }
+            });
+            document.addEventListener('MathJaxReady', () => {
+                console.log('MathJax est prêt');
+                processRenderQueue();
+            });
+        });
+    </script>
+</body>
+</html>