Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on Jan 22

Commit

484ead3

verified ·

1 Parent(s): 632ff02

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +266 -0

templates/index.html CHANGED Viewed

@@ -1,3 +1,269 @@
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                 dropZone.addEventListener(eventName, preventDefaults, false);
             });

+<!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">
+    <script>
+       window.MathJax = {
+            tex: {
+                inlineMath: [['$', '$'], ['\\(', '\\)']],
+                displayMath: [['$$', '$$'], ['\\[', '\\]']],
+                processEscapes: true,
+                processEnvironments: true,
+                packages: ['base', 'ams', 'noerrors', 'noundefined', 'autoload', 'require'],
+                macros: {
+                    RR: "{\\mathbb{R}}",
+                    NN: "{\\mathbb{N}}",
+                    ZZ: "{\\mathbb{Z}}",
+                    QQ: "{\\mathbb{Q}}",
+                    CC: "{\\mathbb{C}}",
+                    brackets: ['{\\left[ #1 \\right]}', 1],
+                    set: ['{\\left\\{ #1 \\right\\}}', 1]
+                },
+                environments: {
+                    aligned: ['AMSmath'],
+                    array: ['AMSmath'],
+                    bmatrix: ['AMSmath'],
+                    cases: ['AMSmath'],
+                    matrix: ['AMSmath'],
+                    pmatrix: ['AMSmath'],
+                    vmatrix: ['AMSmath']
+                }
+            },
+            options: {
+                ignoreHtmlClass: 'tex2jax_ignore',
+                processHtmlClass: 'tex2jax_process',
+                renderActions: {
+                    findScript: [10, function (doc) {
+                        document.querySelectorAll('script[type^="math/tex"]').forEach(function (node) {
+                            const display = !!node.type.match(/; *mode=display/);
+                            const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
+                            const text = document.createTextNode('');
+                            node.parentNode.replaceChild(text, node);
+                            math.start = { node: text, delim: '', n: 0 };
+                            math.end = { node: text, delim: '', n: 0 };
+                            doc.math.push(math);
+                        });
+                    }, '']
+                }
+            },
+            svg: {
+                fontCache: 'global',
+                scale: 1,
+                minScale: .5
+            },
+            loader: {
+                load: ['[tex]/autoload', '[tex]/ams', '[tex]/require']
+            }
+        };
+    </script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></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;
+        }
+        .uploadArea:hover {
+            border-color: #3b82f6;
+            transform: translateY(-2px);
+        }
+        .blue-button {
+            background: #3b82f6;
+            transition: all 0.3s ease;
+        }
+        .blue-button:hover {
+            background: #2563eb;
+            transform: translateY(-2px);
+        }
+        .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.5s cubic-bezier(0.4, 0, 0.2, 1);
+            max-height: 0;
+            overflow: hidden;
+        }
+        .thought-box.open {
+            max-height: 1000px;
+        }
+        .preview-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20px;
+        }
+        .preview-image {
+            max-width: 300px;
+            max-height: 300px;
+            border-radius: 8px;
+        }
+        #thoughtsContent, #answerContent {
+            max-height: 500px;
+            overflow-y: auto;
+        }
+        .timestamp {
+            color: #3b82f6;
+            margin-left: 10px;
+            font-size: 0.9em;
+        }
+    </style>
+</head>
+<body class="p-4">
+    <div class="w-full">
+        <div class="p-8">
+            <div class="text-center mb-12">
+                <h1 class="text-4xl font-bold text-blue-600 mb-4">Mariam M-0</h1>
+                <p class="text-gray-600 text-lg">Solution Mathématique Intelligente</p>
+            </div>
+            <form id="problemForm" class="space-y-8" enctype="multipart/form-data">
+                <div class="relative">
+                    <div class="uploadArea p-12 text-center transition-all duration-300 cursor-pointer">
+                        <input type="file" id="imageInput" name="image" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
+                        <div class="space-y-4">
+                            <div class="w-20 h-20 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
+                                <svg class="w-10 h-10 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 text-lg 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="preview-container hidden">
+                        <img id="previewImage" src="#" alt="Prévisualisation de l'image" class="preview-image">
+                    </div>
+                </div>
+                <button type="submit" class="blue-button w-full py-4 text-white font-medium text-lg transition-all duration-300">
+                    Résoudre le problème
+                </button>
+            </form>
+            <div id="loader" class="hidden mt-12">
+                <div class="flex flex-col items-center justify-center space-y-4">
+                    <span class="loader"></span>
+                    <div class="text-gray-600 text-lg">Analyse en cours...</div>
+                </div>
+            </div>
+            <div id="solution" class="hidden mt-12 space-y-8">
+                <div class="border-t pt-6">
+                    <button id="thoughtsToggle" class="w-full flex justify-between items-center text-left text-lg font-medium text-gray-700 hover:text-blue-600 transition-colors">
+                        <div class="flex items-center">
+                            <span>Processus de Réflexion</span>
+                            <span id="timestamp" class="timestamp"></span>
+                        </div>
+                        <svg class="w-6 h-6 transform transition-transform duration-300" 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 max-w-none text-gray-600 mt-4"></div>
+                    </div>
+                </div>
+                <div class="border-t pt-8">
+                    <h3 class="text-2xl font-bold text-gray-800 mb-6">Solution</h3>
+                    <div id="answerContent" class="prose max-w-none 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 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');
+                }
+            });
+            const dropZone = document.querySelector('.uploadArea');
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                 dropZone.addEventListener(eventName, preventDefaults, false);
             });