Update templates/math.html

templates/math.html

@@ -10,18 +10,69 @@
     <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 { display: none; }
-        .loading.active { display: flex; }
-        .math-content { font-size: 1.1em; line-height: 1.6; overflow-x: auto; }
-        .math-content p { margin-bottom: 1rem; white-space: pre-wrap; }
-        .math-content .MathJax { overflow-x: auto; overflow-y: hidden; padding: 0.5rem 0; }
-        @media (max-width: 640px) { .math-content .MathJax { font-size: 0.9em; } }
-        .math-hidden { visibility: hidden; }
-        .saved-response-header { cursor: pointer; display: flex; 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; }
+        .dropzone {
+            border: 2px dashed #4F46E5;
+            transition: all 0.3s ease;
+        }
+
+        .dropzone:hover {
+            border-color: #312E81;
+            background-color: rgba(79, 70, 229, 0.1);
+        }
+
+        .loading {
+            display: none;
+        }
+
+        .loading.active {
+            display: flex;
+        }
+
+        .math-content {
+            font-size: 1.1em;
+            line-height: 1.6;
+            overflow-x: auto;
+        }
+
+        .math-content p {
+            margin-bottom: 1rem;
+            white-space: pre-wrap;
+        }
+
+        .math-content .MathJax {
+            overflow-x: auto;
+            overflow-y: hidden;
+            padding: 0.5rem 0;
+        }
+
+        @media (max-width: 640px) {
+            .math-content .MathJax {
+                font-size: 0.9em;
+            }
+        }
+
+        .math-hidden {
+            visibility: hidden;
+        }
+
+        .saved-response-header {
+            cursor: pointer;
+            display: flex;
+            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 = {
@@ -29,11 +80,31 @@
                 inlineMath: [['$', '$'], ['\\(', '\\)']],
                 displayMath: [['$$', '$$'], ['\\[', '\\]']],
                 processEscapes: true,
-                macros: { R: "{\\mathbb{R}}", N: "{\\mathbb{N}}", Z: "{\\mathbb{Z}}", vecv: ["\\begin{pmatrix}#1\\\\#2\\\\#3\\end{pmatrix}", 3] }
+                macros: {
+                    R: "{\\mathbb{R}}",
+                    N: "{\\mathbb{N}}",
+                    Z: "{\\mathbb{Z}}",
+                    vecv: ["\\begin{pmatrix}#1\\\\#2\\\\#3\\end{pmatrix}", 3]
+                }
+            },
+            svg: {
+                fontCache: 'global'
             },
-            svg: { fontCache: 'global' },
-            startup: { pageReady: () => { return Promise.resolve(); } },
-            options: { renderActions: { addMenu: [], checkLoading: [150, () => { document.querySelectorAll('.math-content').forEach(el => { el.classList.remove('math-hidden'); }); }] } }
+            startup: {
+                pageReady: () => {
+                    return Promise.resolve();
+                }
+            },
+            options: {
+                renderActions: {
+                    addMenu: [],
+                    checkLoading: [150, () => {
+                        document.querySelectorAll('.math-content').forEach(el => {
+                            el.classList.remove('math-hidden');
+                        });
+                    }]
+                }
+            }
         };
     </script>
     <script>
@@ -57,7 +128,8 @@
     <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>
+            <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">
@@ -67,16 +139,26 @@
                     <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>
+                            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>
                     </div>
                 </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 2 +performant)</option>
+                    <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">
@@ -94,7 +176,8 @@
 
         <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>
+                <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>
         </div>
@@ -102,7 +185,8 @@
         <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">
+                <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>
@@ -131,18 +215,26 @@
             const clearSavedResponsesButton = document.getElementById('clearSavedResponses');
             const modelChoiceSelect = document.getElementById('modelChoice');
             const modelNameSpan = document.getElementById('modelName');
+            const customInstructionInput = document.getElementById('customInstruction');
 
             let mathJaxReady = false;
             window.MathJax.startup.promise.then(() => {
                 mathJaxReady = true;
             });
 
-            marked.setOptions({ breaks: true, gfm: true, pedantic: false, smartLists: true });
+            marked.setOptions({
+                breaks: true,
+                gfm: true,
+                pedantic: false,
+                smartLists: true
+            });
 
             function showError(message) {
                 errorText.textContent = message;
                 errorMessage.classList.remove('hidden');
-                setTimeout(() => { errorMessage.classList.add('hidden'); }, 5000);
+                setTimeout(() => {
+                    errorMessage.classList.add('hidden');
+                }, 5000);
             }
 
             async function renderMathContent(text) {
@@ -168,10 +260,22 @@
                 }
             }
 
-            function handleDragOver(e) { e.preventDefault(); e.stopPropagation(); dropzone.classList.add('bg-blue-50'); }
-            function handleDragLeave(e) { e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('bg-blue-50'); }
+            function handleDragOver(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                dropzone.classList.add('bg-blue-50');
+            }
+
+            function handleDragLeave(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                dropzone.classList.remove('bg-blue-50');
+            }
+
             function handleDrop(e) {
-                e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('bg-blue-50');
+                e.preventDefault();
+                e.stopPropagation();
+                dropzone.classList.remove('bg-blue-50');
                 const files = e.dataTransfer.files;
                 if (files.length > 0 && files[0].type.startsWith('image/')) {
                     fileInput.files = files;
@@ -238,19 +342,13 @@
                             await localforage.clear();
                             console.log('Réponses sauvegardées effacées');
                             loadSavedResponses();
-                            Swal.fire(
-                                'Effacé!',
-                                'Les réponses ont été supprimées.',
-                                'success'
-                            );
+                            Swal.fire('Effacé!', 'Les réponses ont été supprimées.', 'success');
                         } catch (error) {
-                            console.error('Erreur lors de l\'effacement des réponses sauvegardées:', error);
-                            showError('Erreur lors de l\'effacement des réponses sauvegardées');
-                            Swal.fire(
-                                'Erreur!',
-                                'Une erreur est survenue lors de la suppression.',
-                                'error'
-                            );
+                            console.error("Erreur lors de l'effacement des réponses sauvegardées:",
+                                error);
+                            showError("Erreur lors de l'effacement des réponses sauvegardées");
+                            Swal.fire('Erreur!', 'Une erreur est survenue lors de la suppression.',
+                                'error');
                         }
                     }
                 });
@@ -260,13 +358,15 @@
                 try {
                     savedResponsesContainer.innerHTML = '';
                     const keys = await localforage.keys();
-                    keys.sort((a, b) => parseInt(b.replace('response-', '').split('-')[0]) - parseInt(a.replace('response-', '').split('-')[0]));
+                    keys.sort((a, b) => parseInt(b.replace('response-', '').split('-')[0]) - parseInt(a
+                        .replace('response-', '').split('-')[0]));
 
                     for (const key of keys) {
                         const response = await localforage.getItem(key);
-                        const [ , timestamp, model ] = key.split('-');
+                        const [, timestamp, model] = key.split('-');
                         const responseItem = document.createElement('div');
-                        responseItem.className = 'saved-response-item bg-white rounded-lg shadow-md overflow-hidden';
+                        responseItem.className =
+                            'saved-response-item bg-white rounded-lg shadow-md overflow-hidden';
 
                         const header = document.createElement('div');
                         header.className = 'saved-response-header';
@@ -298,7 +398,8 @@
                                 await localforage.removeItem(key);
                                 responseItem.remove();
                             } catch (error) {
-                                console.error('Erreur lors de la suppression de la réponse:', error);
+                                console.error('Erreur lors de la suppression de la réponse:',
+                                    error);
                                 showError('Erreur lors de la suppression de la réponse');
                             }
                         });
@@ -323,6 +424,7 @@
                 const formData = new FormData();
                 formData.append('image', fileInput.files[0]);
                 formData.append('model_choice', modelChoiceSelect.value);
+                formData.append('custom_instruction', customInstructionInput.value);
 
                 try {
                     submitButton.disabled = true;
@@ -360,4 +462,4 @@
     </script>
 </body>
 
-</html>
+</html>