Spaces:

Docfile
/

Maths

Running

App Files Files Community

Docfile commited on 18 days ago

Commit

ec5066b

•

1 Parent(s): 9398dd5

Update templates/math.html

Browse files

Files changed (1) hide show

templates/math.html +90 -32

templates/math.html CHANGED Viewed

@@ -3,20 +3,29 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Résolution de Problèmes Mathématiques</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <style>
         .dropzone {
-            border: 2px dashed #4F46E5;
             transition: all 0.3s ease;
         }
         .dropzone:hover {
-            border-color: #312E81;
-            background-color: rgba(79, 70, 229, 0.1);
         }
         .loading {
@@ -60,18 +69,64 @@
             justify-content: space-between;
             align-items: center;
             padding: 0.75rem 1rem;
-            background-color: #f3f4f6;
-            border-bottom: 1px solid #e5e7eb;
         }
         .saved-response-content {
             padding: 1rem;
             display: none;
         }
         .saved-response-item.open .saved-response-content {
             display: block;
         }
     </style>
     <script>
         window.MathJax = {
@@ -123,22 +178,24 @@
     <script src="https://cdn.jsdelivr.net/npm/localforage@1.10.0/dist/localforage.min.js"></script>
 </head>
-<body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
     <div class="container mx-auto px-4 py-8 max-w-4xl">
         <header class="text-center mb-12">
-            <h1 class="text-4xl font-bold text-blue-800 mb-4">Résolution de Problèmes Mathématiques</h1>
-            <p class="text-gray-600 text-lg">Soumettez une image de votre problème mathématique pour obtenir une
-                solution détaillée</p>
         </header>
         <div class="mb-8">
             <form id="uploadForm" class="space-y-4">
                 <div id="dropzone"
-                    class="dropzone rounded-lg p-8 text-center cursor-pointer bg-white shadow-sm hover:shadow-md transition-all">
                     <input type="file" id="fileInput" class="hidden" accept="image/*">
                     <div class="flex flex-col items-center space-y-4">
-                        <i class="fas fa-cloud-upload-alt text-4xl text-blue-600"></i>
-                        <div class="text-lg text-gray-700">
-                            Glissez votre image ici ou <span class="text-blue-600 font-semibold">cliquez pour
                                 sélectionner</span>
                         </div>
                         <p class="text-sm text-gray-500">Formats acceptés: PNG, JPG, JPEG</p>
@@ -146,21 +203,21 @@
                 </div>
                 <div class="space-y-4">
-                    <label for="customInstruction" class="block text-gray-700 font-medium">Instruction
-                        personnalisée(pas obligatoire)</label>
                     <input type="text" id="customInstruction" name="custom_instruction"
-                        class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500"
                         placeholder="Exemple : Résoudre en utilisant le théorème de Pythagore">
                 </div>
-                <div class="flex justify-center items-center space-x-4">
                     <select id="modelChoice" name="model_choice"
-                        class="rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                         <option value="mariam's">Mariam's (Rapide et performant)</option>
                         <option value="qwen2">Qwen2 (lent mais plus performant)</option>
                     </select>
                     <button type="submit"
-                        class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed">
                         <i class="fas fa-paper-plane"></i>
                         <span>Analyser l'image</span>
                     </button>
@@ -169,13 +226,13 @@
         </div>
         <div id="loading" class="loading flex-col items-center justify-center space-y-4 my-8">
-            <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-200 border-t-blue-600"></div>
-            <p class="text-gray-700 font-medium">Analyse en cours...</p>
         </div>
         <div id="response" class="hidden">
-            <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
-                <h2 id="modelUsed" class="text-2xl font-semibold text-blue-800 mb-4">Solution (Modèle: <span
                         id="modelName"></span>)</h2>
                 <div id="latexContent" class="prose max-w-none math-content math-hidden"></div>
             </div>
@@ -183,23 +240,24 @@
         <div id="savedResponsesSection" class="mt-8">
             <div class="flex justify-between items-center mb-4">
-                <h2 class="text-2xl font-semibold text-blue-800">Réponses Sauvegardées</h2>
                 <button id="clearSavedResponses"
-                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors duration-200">
                     <i class="fas fa-trash-alt"></i> Effacer Tout
                 </button>
             </div>
-            <div id="savedResponses" class="space-y-2"></div>
         </div>
         <div id="errorMessage"
-            class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative my-4" role="alert">
             <strong class="font-bold">Erreur!</strong>
             <span class="block sm:inline" id="errorText"></span>
         </div>
     </div>
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             const dropzone = document.getElementById('dropzone');
             const fileInput = document.getElementById('fileInput');
@@ -365,15 +423,15 @@
                         const [, timestamp, model] = key.split('-');
                         const responseItem = document.createElement('div');
                         responseItem.className =
-                            'saved-response-item bg-white rounded-lg shadow-md overflow-hidden';
                         const header = document.createElement('div');
                         header.className = 'saved-response-header';
                         header.innerHTML = `
-                            <span class="text-blue-800 font-medium">Réponse du ${new Date(parseInt(timestamp)).toLocaleString()} (Modèle: ${model})</span>
                             <div>
-                                <button class="toggle-content px-1 py-0.5 rounded-md text-xs bg-blue-500 hover:bg-blue-700 text-white mr-1"><i class="fas fa-chevron-down"></i></button>
-                                <button class="delete-response px-1 py-0.5 rounded-md text-xs bg-red-500 hover:bg-red-700 text-white"><i class="fas fa-trash-alt"></i></button>
                             </div>
                         `;
                         responseItem.appendChild(header);

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam - Résolution de Problèmes Mathématiques</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
         .dropzone {
+            border: 3px dashed #3b82f6; /* Increased border thickness */
             transition: all 0.3s ease;
+            border-radius: 10px; /* More rounded corners */
+            padding: 3rem; /* Increased padding */
+            background-color: #f5f5f5; /* Lighter background color */
         }
         .dropzone:hover {
+            border-color: #2563eb;
+            background-color: rgba(59, 130, 246, 0.1);
         }
         .loading {
             justify-content: space-between;
             align-items: center;
             padding: 0.75rem 1rem;
+            background-color: #e5e7eb; /* Changed background color */
+            border-bottom: 1px solid #d1d5db; /* Changed border color */
+            border-radius: 8px; /* Added border-radius */
+            font-weight: 500; /* Added font weight */
         }
         .saved-response-content {
             padding: 1rem;
             display: none;
+            border-radius: 8px; /* Added border-radius */
         }
         .saved-response-item.open .saved-response-content {
             display: block;
         }
+        /* Custom button style */
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+        .btn-primary {
+            background-color: #3b82f6;
+            color: #fff;
+        }
+        .btn-primary:hover {
+            background-color: #2563eb;
+        }
+        .btn-danger {
+            background-color: #ef4444;
+            color: #fff;
+        }
+        .btn-danger:hover {
+            background-color: #dc2626;
+        }
+        /* Custom select style */
+        .select {
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            padding: 0.75rem 1rem;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.75rem center;
+            background-size: 1em;
+            padding-right: 2.5rem;
+        }
+        .select:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+        }
     </style>
     <script>
         window.MathJax = {
     <script src="https://cdn.jsdelivr.net/npm/localforage@1.10.0/dist/localforage.min.js"></script>
 </head>
+<body class="bg-gray-100">
     <div class="container mx-auto px-4 py-8 max-w-4xl">
         <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-blue-600 mb-4">
+                <span class="bg-gradient-to-r from-blue-500 to-blue-700 text-transparent bg-clip-text">Mariam</span>
+                 - Résolution de Problèmes Mathématiques
+            </h1>
+            <p class="text-gray-500 text-lg">Votre assistant intelligent pour des solutions mathématiques détaillées</p>
         </header>
         <div class="mb-8">
             <form id="uploadForm" class="space-y-4">
                 <div id="dropzone"
+                    class="dropzone rounded-lg text-center cursor-pointer shadow-md hover:shadow-lg transition-all">
                     <input type="file" id="fileInput" class="hidden" accept="image/*">
                     <div class="flex flex-col items-center space-y-4">
+                        <i class="fas fa-cloud-upload-alt text-6xl text-blue-500"></i>
+                        <div class="text-lg text-gray-600">
+                            Glissez votre image ici ou <span class="text-blue-500 font-semibold">cliquez pour
                                 sélectionner</span>
                         </div>
                         <p class="text-sm text-gray-500">Formats acceptés: PNG, JPG, JPEG</p>
                 </div>
                 <div class="space-y-4">
+                    <label for="customInstruction" class="block text-gray-600 font-medium">Instruction
+                        personnalisée (optionnel)</label>
                     <input type="text" id="customInstruction" name="custom_instruction"
+                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                         placeholder="Exemple : Résoudre en utilisant le théorème de Pythagore">
                 </div>
+                <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-4">
                     <select id="modelChoice" name="model_choice"
+                        class="select w-full md:w-auto">
                         <option value="mariam's">Mariam's (Rapide et performant)</option>
                         <option value="qwen2">Qwen2 (lent mais plus performant)</option>
                     </select>
                     <button type="submit"
+                        class="btn btn-primary w-full md:w-auto flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed">
                         <i class="fas fa-paper-plane"></i>
                         <span>Analyser l'image</span>
                     </button>
         </div>
         <div id="loading" class="loading flex-col items-center justify-center space-y-4 my-8">
+            <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-500"></div>
+            <p class="text-gray-600 font-medium text-lg">Analyse en cours...</p>
         </div>
         <div id="response" class="hidden">
+            <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
+                <h2 id="modelUsed" class="text-2xl font-semibold text-blue-600 mb-4">Solution (Modèle: <span
                         id="modelName"></span>)</h2>
                 <div id="latexContent" class="prose max-w-none math-content math-hidden"></div>
             </div>
         <div id="savedResponsesSection" class="mt-8">
             <div class="flex justify-between items-center mb-4">
+                <h2 class="text-2xl font-semibold text-blue-600">Réponses Sauvegardées</h2>
                 <button id="clearSavedResponses"
+                    class="btn btn-danger">
                     <i class="fas fa-trash-alt"></i> Effacer Tout
                 </button>
             </div>
+            <div id="savedResponses" class="space-y-4"></div>
         </div>
         <div id="errorMessage"
+            class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative my-4" role="alert">
             <strong class="font-bold">Erreur!</strong>
             <span class="block sm:inline" id="errorText"></span>
         </div>
     </div>
     <script>
+        // JavaScript code (same as before, but with minor adjustments if needed)
         document.addEventListener('DOMContentLoaded', function () {
             const dropzone = document.getElementById('dropzone');
             const fileInput = document.getElementById('fileInput');
                         const [, timestamp, model] = key.split('-');
                         const responseItem = document.createElement('div');
                         responseItem.className =
+                            'saved-response-item bg-gray-100 rounded-lg shadow-md overflow-hidden';
                         const header = document.createElement('div');
                         header.className = 'saved-response-header';
                         header.innerHTML = `
+                            <span class="text-blue-600 font-medium">Réponse du ${new Date(parseInt(timestamp)).toLocaleString()} (Modèle: ${model})</span>
                             <div>
+                                <button class="toggle-content px-2 py-1 rounded-md text-xs bg-blue-500 hover:bg-blue-700 text-white mr-1"><i class="fas fa-chevron-down"></i></button>
+                                <button class="delete-response px-2 py-1 rounded-md text-xs bg-red-500 hover:bg-red-700 text-white"><i class="fas fa-trash-alt"></i></button>
                             </div>
                         `;
                         responseItem.appendChild(header);