Mariam-cards2

Running

App Files Files Community

Docfile commited on Jan 22

Commit

1f7f905

verified ·

1 Parent(s): 61a8581

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +132 -71

templates/index.html CHANGED Viewed

@@ -1,98 +1,159 @@
-<!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Math Problem Solver</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 </head>
-<body class="bg-gray-100 p-8 font-sans">
-    <div class="container mx-auto max-w-4xl bg-white p-8 rounded-lg shadow-lg">
-        <h1 class="text-4xl font-bold mb-6 text-center text-blue-700">Math Problem Solver</h1>
-        <form id="problemForm" class="space-y-6">
-            <div class="flex items-center justify-center w-full">
-                <label for="imageInput" class="flex flex-col items-center justify-center w-full h-64 border-2 border-blue-300 border-dashed rounded-lg cursor-pointer bg-blue-50 hover:bg-blue-100 hover:border-blue-400">
-                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
-                        <svg aria-hidden="true" class="w-10 h-10 mb-3 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
-                        <p class="mb-2 text-sm text-blue-500"><span class="font-semibold">Click to upload</span> or drag and drop</p>
-                        <p class="text-xs text-blue-500">PNG, JPG, or JPEG</p>
                     </div>
-                    <input id="imageInput" type="file" accept="image/*" class="hidden" />
-                </label>
             </div>
-            <button type="submit" class="w-full bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-800 transition duration-300 ease-in-out">Solve</button>
-        </form>
-        <div id="loader" class="hidden flex justify-center mt-6">
-            <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
-        </div>
-        <div id="solution" class="mt-8 hidden">
-            <h2 class="text-2xl font-semibold mb-4 text-center">Solution</h2>
-            <details class="mb-4 border border-gray-300 rounded-md">
-                <summary class="p-4 cursor-pointer font-bold bg-gray-100 hover:bg-gray-200">Show/Hide Thoughts</summary>
-                <div id="thoughts" class="p-4">
-                    <pre id="thoughtsContent" class="whitespace-pre-wrap font-mono"></pre>
                 </div>
-            </details>
-            <div id="answer" class="p-4 border border-gray-300 rounded-md">
-                <h3 class="font-bold mb-2">Answer:</h3>
-                <pre id="answerContent" class="whitespace-pre-wrap font-mono"></pre>
             </div>
         </div>
     </div>
     <script>
-        const form = document.getElementById('problemForm');
-        const imageInput = document.getElementById('imageInput');
-        const solutionDiv = document.getElementById('solution');
-        const thoughtsContent = document.getElementById('thoughtsContent');
-        const answerContent = document.getElementById('answerContent');
-        const loader = document.getElementById('loader');
-        form.addEventListener('submit', async (event) => {
-            event.preventDefault();
-            const file = imageInput.files[0];
-            if (!file) {
-                alert('Please select an image file.');
-                return;
-            }
-            const formData = new FormData();
-            formData.append('image', file);
-            // Afficher le loader et cacher la solution précédente
-            loader.classList.remove('hidden');
-            solutionDiv.classList.add('hidden');
-            try {
-                const response = await fetch('/solve', {
-                    method: 'POST',
-                    body: formData,
-                });
-                const data = await response.json();
-                if (response.ok) {
-                    thoughtsContent.textContent = data.thoughts;
-                    answerContent.textContent = data.answer;
-                    // Recharger MathJax pour le nouveau contenu
-                    MathJax.typesetPromise();
-                    solutionDiv.classList.remove('hidden');
-                } else {
-                    alert('Error: ' + data.error);
                 }
-            } catch (error) {
-                console.error('Error:', error);
-                alert('An error occurred while processing the request.');
-            } finally {
-                // Cacher le loader
-                loader.classList.add('hidden');
-            }
         });
     </script>
 </body>

+ <!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 | Résolveur de Problèmes Mathématiques</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML"></script>
+    <style>
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .loader {
+            border-top-color: #3B82F6;
+            animation: spinner 1s linear infinite;
+        }
+        @keyframes spinner {
+            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;
+        }
+    </style>
 </head>
+<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen p-8">
+    <div class="container mx-auto max-w-3xl">
+        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
+            <div class="flex items-center justify-center mb-8">
+                <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
+                    Mariam M-0
+                </h1>
+            </div>
+            <form id="problemForm" class="space-y-6">
+                <div class="relative">
+                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-blue-500 transition-colors">
+                        <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
+                        <div class="space-y-2">
+                            <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+                                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                            <div class="text-gray-600">
+                                Glissez une image ou cliquez pour sélectionner
+                            </div>
+                        </div>
                     </div>
+                </div>
+                <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 px-6 rounded-xl font-medium hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transform transition-all hover:scale-105">
+                    Résoudre
+                </button>
+            </form>
+            <div id="loader" class="hidden mt-8">
+                <div class="flex justify-center items-center">
+                    <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
+                </div>
+                <div class="text-center mt-4 text-gray-600">Analyse en cours...</div>
             </div>
+            <div id="solution" class="mt-8 hidden space-y-6">
+                <div class="bg-gray-50 rounded-xl p-4">
+                    <button id="thoughtsToggle" class="w-full flex justify-between items-center text-left font-semibold text-gray-700 hover:text-blue-600">
+                        <span>Processus de réflexion</span>
+                        <svg class="w-5 h-5 transform transition-transform" 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 mt-4">
+                        <div id="thoughtsContent" class="prose max-w-none"></div>
+                    </div>
+                </div>
+                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6">
+                    <h3 class="font-bold text-xl mb-4 text-gray-800">Solution</h3>
+                    <div id="answerContent" class="prose max-w-none"></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');
+            // Toggle thoughts
+            thoughtsToggle.addEventListener('click', () => {
+                thoughtsBox.classList.toggle('open');
+                thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
+            });
+            form.addEventListener('submit', async (event) => {
+                event.preventDefault();
+                const file = imageInput.files[0];
+                if (!file) {
+                    alert('Veuillez sélectionner une image.');
+                    return;
+                }
+                // Show loader
+                loader.classList.remove('hidden');
+                solution.classList.add('hidden');
+                const formData = new FormData();
+                formData.append('image', file);
+                try {
+                    const response = await fetch('/solve', {
+                        method: 'POST',
+                        body: formData,
+                    });
+                    const data = await response.json();
+                    if (response.ok) {
+                        thoughtsContent.innerHTML = data.thoughts;
+                        answerContent.innerHTML = data.answer;
+                        // Refresh MathJax
+                        if (window.MathJax) {
+                            MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
+                        }
+                        loader.classList.add('hidden');
+                        solution.classList.remove('hidden');
+                    } else {
+                        throw new Error(data.error || 'Une erreur est survenue');
+                    }
+                } catch (error) {
+                    console.error('Error:', error);
+                    alert(error.message);
+                    loader.classList.add('hidden');
+                }
+            });
+            // File input visualization
+            imageInput.addEventListener('change', function() {
+                const fileName = this.files[0]?.name;
+                if (fileName) {
+                    this.parentElement.querySelector('.text-gray-600').textContent = fileName;
                 }
+            });
         });
     </script>
 </body>