Spaces:
Running
Running
Update templates/math.html
Browse files- templates/math.html +43 -8
templates/math.html
CHANGED
|
@@ -5,7 +5,10 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Résolution de Problèmes Mathématiques</title>
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/
|
|
|
|
|
|
|
|
|
|
| 9 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
| 10 |
<style>
|
| 11 |
.dropzone {
|
|
@@ -22,6 +25,13 @@
|
|
| 22 |
.loading.active {
|
| 23 |
display: flex;
|
| 24 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 25 |
</style>
|
| 26 |
</head>
|
| 27 |
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
|
|
@@ -62,7 +72,7 @@
|
|
| 62 |
<div id="response" class="hidden">
|
| 63 |
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
|
| 64 |
<h2 class="text-2xl font-semibold text-blue-800 mb-4">Solution</h2>
|
| 65 |
-
<div id="latexContent" class="prose max-w-none">
|
| 66 |
<!-- Le contenu LaTeX sera inséré ici -->
|
| 67 |
</div>
|
| 68 |
</div>
|
|
@@ -78,6 +88,35 @@
|
|
| 78 |
const response = document.getElementById('response');
|
| 79 |
const latexContent = document.getElementById('latexContent');
|
| 80 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 81 |
// Gestion du drag & drop
|
| 82 |
dropzone.addEventListener('click', () => fileInput.click());
|
| 83 |
|
|
@@ -123,13 +162,9 @@
|
|
| 123 |
throw new Error(data.error);
|
| 124 |
}
|
| 125 |
|
| 126 |
-
|
|
|
|
| 127 |
response.classList.remove('hidden');
|
| 128 |
-
|
| 129 |
-
// Rafraîchir le rendu LaTeX
|
| 130 |
-
if (window.MathJax) {
|
| 131 |
-
MathJax.Hub.Queue(["Typeset", MathJax.Hub, latexContent]);
|
| 132 |
-
}
|
| 133 |
|
| 134 |
} catch (error) {
|
| 135 |
alert('Erreur: ' + error.message);
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Résolution de Problèmes Mathématiques</title>
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
|
| 9 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
|
| 10 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script>
|
| 11 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
|
| 12 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
| 13 |
<style>
|
| 14 |
.dropzone {
|
|
|
|
| 25 |
.loading.active {
|
| 26 |
display: flex;
|
| 27 |
}
|
| 28 |
+
.math-content {
|
| 29 |
+
font-size: 1.1em;
|
| 30 |
+
line-height: 1.6;
|
| 31 |
+
}
|
| 32 |
+
.math-content p {
|
| 33 |
+
margin-bottom: 1rem;
|
| 34 |
+
}
|
| 35 |
</style>
|
| 36 |
</head>
|
| 37 |
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
|
|
|
|
| 72 |
<div id="response" class="hidden">
|
| 73 |
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
|
| 74 |
<h2 class="text-2xl font-semibold text-blue-800 mb-4">Solution</h2>
|
| 75 |
+
<div id="latexContent" class="prose max-w-none math-content">
|
| 76 |
<!-- Le contenu LaTeX sera inséré ici -->
|
| 77 |
</div>
|
| 78 |
</div>
|
|
|
|
| 88 |
const response = document.getElementById('response');
|
| 89 |
const latexContent = document.getElementById('latexContent');
|
| 90 |
|
| 91 |
+
// Configuration de marked pour le Markdown
|
| 92 |
+
marked.setOptions({
|
| 93 |
+
breaks: true,
|
| 94 |
+
gfm: true
|
| 95 |
+
});
|
| 96 |
+
|
| 97 |
+
// Configuration de KaTeX
|
| 98 |
+
const renderMathInElement = function(element) {
|
| 99 |
+
renderMathInElementOptions = {
|
| 100 |
+
delimiters: [
|
| 101 |
+
{left: "$$", right: "$$", display: true},
|
| 102 |
+
{left: "$", right: "$", display: false},
|
| 103 |
+
],
|
| 104 |
+
throwOnError: false,
|
| 105 |
+
output: 'html'
|
| 106 |
+
};
|
| 107 |
+
renderMathInElement(element, renderMathInElementOptions);
|
| 108 |
+
};
|
| 109 |
+
|
| 110 |
+
// Fonction pour traiter le contenu avec Markdown et LaTeX
|
| 111 |
+
function processContent(text) {
|
| 112 |
+
// Convertir d'abord le Markdown en HTML
|
| 113 |
+
const htmlContent = marked.parse(text);
|
| 114 |
+
latexContent.innerHTML = htmlContent;
|
| 115 |
+
|
| 116 |
+
// Puis rendre les expressions mathématiques
|
| 117 |
+
renderMathInElement(latexContent);
|
| 118 |
+
}
|
| 119 |
+
|
| 120 |
// Gestion du drag & drop
|
| 121 |
dropzone.addEventListener('click', () => fileInput.click());
|
| 122 |
|
|
|
|
| 162 |
throw new Error(data.error);
|
| 163 |
}
|
| 164 |
|
| 165 |
+
// Traiter le contenu avec Markdown et LaTeX
|
| 166 |
+
processContent(data.result);
|
| 167 |
response.classList.remove('hidden');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 168 |
|
| 169 |
} catch (error) {
|
| 170 |
alert('Erreur: ' + error.message);
|