Hugging Face's logo

Spaces:
Docfile
/
Serveur
Runtime error

App Files Community
1
Docfile commited on
Commit
607c338
·
verified ·
1 Parent(s): 5c8a3c4

Update templates/math.html

Browse files
Files changed (1) hide show
  1. templates/math.html +38 -210
templates/math.html CHANGED
@@ -11,10 +11,32 @@
11
  <!-- Marked.js pour le Markdown -->
12
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
13
 
14
- <!-- KaTeX pour le LaTeX -->
15
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
16
- <script defer src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
17
- <script defer src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
 
19
  <!-- Font Awesome pour les icônes -->
20
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
@@ -44,16 +66,13 @@
44
  margin-bottom: 1rem;
45
  white-space: pre-wrap;
46
  }
47
- .math-content .katex-display {
48
  overflow-x: auto;
49
  overflow-y: hidden;
50
  padding: 0.5rem 0;
51
  }
52
- .math-content .katex {
53
- font-size: 1.1em;
54
- }
55
  @media (max-width: 640px) {
56
- .math-content .katex {
57
  font-size: 0.9em;
58
  }
59
  }
@@ -61,89 +80,11 @@
61
  </head>
62
 
63
  <body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
64
- <!-- Container principal -->
65
- <div class="container mx-auto px-4 py-8 max-w-4xl">
66
- <!-- En-tête -->
67
- <header class="text-center mb-12">
68
- <h1 class="text-4xl font-bold text-blue-800 mb-4">Résolution de Problèmes Mathématiques</h1>
69
- <p class="text-gray-600 text-lg">Soumettez une image de votre problème mathématique pour obtenir une solution détaillée</p>
70
- </header>
71
-
72
- <!-- Zone de dépôt d'image -->
73
- <div class="mb-8">
74
- <form id="uploadForm" class="space-y-4">
75
- <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer bg-white shadow-sm hover:shadow-md transition-all">
76
- <input type="file" id="fileInput" class="hidden" accept="image/*">
77
- <div class="flex flex-col items-center space-y-4">
78
- <i class="fas fa-cloud-upload-alt text-4xl text-blue-600"></i>
79
- <div class="text-lg text-gray-700">
80
- Glissez votre image ici ou <span class="text-blue-600 font-semibold">cliquez pour sélectionner</span>
81
- </div>
82
- <p class="text-sm text-gray-500">Formats acceptés: PNG, JPG, JPEG</p>
83
- </div>
84
- </div>
85
-
86
- <div class="flex justify-center">
87
- <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">
88
- <i class="fas fa-paper-plane"></i>
89
- <span>Analyser l'image</span>
90
- </button>
91
- </div>
92
- </form>
93
- </div>
94
-
95
- <!-- Indicateur de chargement -->
96
- <div id="loading" class="loading flex-col items-center justify-center space-y-4 my-8">
97
- <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-200 border-t-blue-600"></div>
98
- <p class="text-gray-700 font-medium">Analyse en cours...</p>
99
- </div>
100
-
101
- <!-- Zone de réponse -->
102
- <div id="response" class="hidden">
103
- <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
104
- <h2 class="text-2xl font-semibold text-blue-800 mb-4">Solution</h2>
105
- <div id="latexContent" class="prose max-w-none math-content">
106
- <!-- Le contenu sera inséré ici -->
107
- </div>
108
- </div>
109
- </div>
110
-
111
- <!-- Message d'erreur -->
112
- <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">
113
- <strong class="font-bold">Erreur!</strong>
114
- <span class="block sm:inline" id="errorText"></span>
115
- </div>
116
- </div>
117
-
118
  <script>
119
  document.addEventListener('DOMContentLoaded', function() {
120
- // Éléments DOM
121
- const dropzone = document.getElementById('dropzone');
122
- const fileInput = document.getElementById('fileInput');
123
- const uploadForm = document.getElementById('uploadForm');
124
- const loading = document.getElementById('loading');
125
- const response = document.getElementById('response');
126
- const latexContent = document.getElementById('latexContent');
127
- const errorMessage = document.getElementById('errorMessage');
128
- const errorText = document.getElementById('errorText');
129
- const submitButton = uploadForm.querySelector('button[type="submit"]');
130
-
131
- // Configuration de marked
132
- marked.setOptions({
133
- breaks: true,
134
- gfm: true,
135
- pedantic: false,
136
- smartLists: true
137
- });
138
-
139
- // Fonction pour afficher les erreurs
140
- function showError(message) {
141
- errorText.textContent = message;
142
- errorMessage.classList.remove('hidden');
143
- setTimeout(() => {
144
- errorMessage.classList.add('hidden');
145
- }, 5000);
146
- }
147
 
148
  // Fonction pour rendre le contenu mathématique
149
  async function renderMathContent(text) {
@@ -155,33 +96,18 @@
155
  const htmlContent = marked.parse(text);
156
  latexContent.innerHTML = htmlContent;
157
 
158
- // Rendre les formules mathématiques
159
- await renderMathInElement(latexContent, {
160
- delimiters: [
161
- {left: "$$", right: "$$", display: true},
162
- {left: "$", right: "$", display: false},
163
- {left: "\\[", right: "\\]", display: true},
164
- {left: "\\(", right: "\\)", display: false}
165
- ],
166
- throwOnError: false,
167
- errorColor: '#cc0000',
168
- strict: false,
169
- trust: true,
170
- macros: {
171
- "\\R": "\\mathbb{R}",
172
- "\\N": "\\mathbb{N}",
173
- "\\Z": "\\mathbb{Z}"
174
- }
175
  });
176
-
177
- // Afficher le résultat
178
- response.classList.remove('hidden');
179
 
180
  } catch (error) {
181
  console.error('Erreur lors du rendu:', error);
182
  showError('Erreur lors du rendu de la formule mathématique');
183
 
184
- // Afficher le texte brut en cas d'erreur
185
  latexContent.innerHTML = `
186
  <div class="text-red-600 mb-4">Une erreur s'est produite lors du rendu. Voici le texte brut :</div>
187
  <pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto">${text}</pre>
@@ -189,105 +115,7 @@
189
  }
190
  }
191
 
192
- // Gestionnaire de drag & drop
193
- function handleDragOver(e) {
194
- e.preventDefault();
195
- e.stopPropagation();
196
- dropzone.classList.add('bg-blue-50');
197
- }
198
-
199
- function handleDragLeave(e) {
200
- e.preventDefault();
201
- e.stopPropagation();
202
- dropzone.classList.remove('bg-blue-50');
203
- }
204
-
205
- function handleDrop(e) {
206
- e.preventDefault();
207
- e.stopPropagation();
208
- dropzone.classList.remove('bg-blue-50');
209
-
210
- const files = e.dataTransfer.files;
211
- if (files.length > 0 && files[0].type.startsWith('image/')) {
212
- fileInput.files = files;
213
- handleFileSelect(files[0]);
214
- } else {
215
- showError('Veuillez déposer une image valide');
216
- }
217
- }
218
-
219
- // Gestion de la sélection de fichier
220
- function handleFileSelect(file) {
221
- if (file && file.type.startsWith('image/')) {
222
- const reader = new FileReader();
223
- reader.onload = function(e) {
224
- const preview = document.createElement('img');
225
- preview.src = e.target.result;
226
- preview.classList.add('max-h-48', 'mx-auto', 'mt-4', 'rounded-lg');
227
-
228
- const oldPreview = dropzone.querySelector('img');
229
- if (oldPreview) oldPreview.remove();
230
-
231
- dropzone.appendChild(preview);
232
- submitButton.disabled = false;
233
- };
234
- reader.readAsDataURL(file);
235
- } else {
236
- showError('Veuillez sélectionner une image valide');
237
- }
238
- }
239
-
240
- // Gestionnaires d'événements
241
- dropzone.addEventListener('dragover', handleDragOver);
242
- dropzone.addEventListener('dragleave', handleDragLeave);
243
- dropzone.addEventListener('drop', handleDrop);
244
- dropzone.addEventListener('click', () => fileInput.click());
245
-
246
- fileInput.addEventListener('change', (e) => {
247
- if (e.target.files.length > 0) {
248
- handleFileSelect(e.target.files[0]);
249
- }
250
- });
251
-
252
- // Gestion du formulaire
253
- uploadForm.addEventListener('submit', async (e) => {
254
- e.preventDefault();
255
-
256
- if (!fileInput.files.length) {
257
- showError('Veuillez sélectionner une image');
258
- return;
259
- }
260
-
261
- const formData = new FormData();
262
- formData.append('image', fileInput.files[0]);
263
-
264
- try {
265
- submitButton.disabled = true;
266
- loading.classList.add('active');
267
- response.classList.add('hidden');
268
- errorMessage.classList.add('hidden');
269
-
270
- const res = await fetch('/upload', {
271
- method: 'POST',
272
- body: formData
273
- });
274
-
275
- const data = await res.json();
276
-
277
- if (data.error) {
278
- throw new Error(data.error);
279
- }
280
-
281
- await renderMathContent(data.result);
282
-
283
- } catch (error) {
284
- console.error('Erreur:', error);
285
- showError(error.message || 'Une erreur est survenue lors du traitement');
286
- } finally {
287
- loading.classList.remove('active');
288
- submitButton.disabled = false;
289
- }
290
- });
291
  });
292
  </script>
293
  </body>
 
11
  <!-- Marked.js pour le Markdown -->
12
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
13
 
14
+ <!-- MathJax -->
15
+ <script type="text/javascript" id="MathJax-script" async
16
+ src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
17
+ </script>
18
+ <script>
19
+ window.MathJax = {
20
+ tex: {
21
+ inlineMath: [['$', '$'], ['\\(', '\\)']],
22
+ displayMath: [['$$', '$$'], ['\\[', '\\]']],
23
+ processEscapes: true,
24
+ macros: {
25
+ R: "{\\mathbb{R}}",
26
+ N: "{\\mathbb{N}}",
27
+ Z: "{\\mathbb{Z}}"
28
+ }
29
+ },
30
+ svg: {
31
+ fontCache: 'global'
32
+ },
33
+ options: {
34
+ renderActions: {
35
+ addMenu: []
36
+ }
37
+ }
38
+ };
39
+ </script>
40
 
41
  <!-- Font Awesome pour les icônes -->
42
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 
66
  margin-bottom: 1rem;
67
  white-space: pre-wrap;
68
  }
69
+ .math-content .MathJax {
70
  overflow-x: auto;
71
  overflow-y: hidden;
72
  padding: 0.5rem 0;
73
  }
 
 
 
74
  @media (max-width: 640px) {
75
+ .math-content .MathJax {
76
  font-size: 0.9em;
77
  }
78
  }
 
80
  </head>
81
 
82
  <body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
83
+ <!-- Le reste du HTML reste identique -->
84
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  <script>
86
  document.addEventListener('DOMContentLoaded', function() {
87
+ // Les variables DOM restent identiques
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
 
89
  // Fonction pour rendre le contenu mathématique
90
  async function renderMathContent(text) {
 
96
  const htmlContent = marked.parse(text);
97
  latexContent.innerHTML = htmlContent;
98
 
99
+ // Rendre les formules mathématiques avec MathJax
100
+ MathJax.typesetPromise([latexContent]).then(() => {
101
+ response.classList.remove('hidden');
102
+ }).catch((err) => {
103
+ console.error('Erreur MathJax:', err);
104
+ showError('Erreur lors du rendu de la formule mathématique');
 
 
 
 
 
 
 
 
 
 
 
105
  });
 
 
 
106
 
107
  } catch (error) {
108
  console.error('Erreur lors du rendu:', error);
109
  showError('Erreur lors du rendu de la formule mathématique');
110
 
 
111
  latexContent.innerHTML = `
112
  <div class="text-red-600 mb-4">Une erreur s'est produite lors du rendu. Voici le texte brut :</div>
113
  <pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto">${text}</pre>
 
115
  }
116
  }
117
 
118
+ // Le reste du JavaScript reste identique
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  });
120
  </script>
121
  </body>