Hugging Face's logo

Spaces:
Docfile
/
Serveur
Runtime error

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

Update templates/math.html

Browse files
Files changed (1) hide show
  1. templates/math.html +180 -4
templates/math.html CHANGED
@@ -80,11 +80,89 @@
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) {
@@ -115,7 +193,105 @@
115
  }
116
  }
117
 
118
- // Le reste du JavaScript reste identique
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  });
120
  </script>
121
  </body>
 
80
  </head>
81
 
82
  <body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
83
+ <!-- Container principal -->
84
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
85
+ <!-- En-tête -->
86
+ <header class="text-center mb-12">
87
+ <h1 class="text-4xl font-bold text-blue-800 mb-4">Résolution de Problèmes Mathématiques</h1>
88
+ <p class="text-gray-600 text-lg">Soumettez une image de votre problème mathématique pour obtenir une solution détaillée</p>
89
+ </header>
90
+
91
+ <!-- Zone de dépôt d'image -->
92
+ <div class="mb-8">
93
+ <form id="uploadForm" class="space-y-4">
94
+ <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer bg-white shadow-sm hover:shadow-md transition-all">
95
+ <input type="file" id="fileInput" class="hidden" accept="image/*">
96
+ <div class="flex flex-col items-center space-y-4">
97
+ <i class="fas fa-cloud-upload-alt text-4xl text-blue-600"></i>
98
+ <div class="text-lg text-gray-700">
99
+ Glissez votre image ici ou <span class="text-blue-600 font-semibold">cliquez pour sélectionner</span>
100
+ </div>
101
+ <p class="text-sm text-gray-500">Formats acceptés: PNG, JPG, JPEG</p>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="flex justify-center">
106
+ <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">
107
+ <i class="fas fa-paper-plane"></i>
108
+ <span>Analyser l'image</span>
109
+ </button>
110
+ </div>
111
+ </form>
112
+ </div>
113
+
114
+ <!-- Indicateur de chargement -->
115
+ <div id="loading" class="loading flex-col items-center justify-center space-y-4 my-8">
116
+ <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-200 border-t-blue-600"></div>
117
+ <p class="text-gray-700 font-medium">Analyse en cours...</p>
118
+ </div>
119
+
120
+ <!-- Zone de réponse -->
121
+ <div id="response" class="hidden">
122
+ <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
123
+ <h2 class="text-2xl font-semibold text-blue-800 mb-4">Solution</h2>
124
+ <div id="latexContent" class="prose max-w-none math-content">
125
+ <!-- Le contenu sera inséré ici -->
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Message d'erreur -->
131
+ <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">
132
+ <strong class="font-bold">Erreur!</strong>
133
+ <span class="block sm:inline" id="errorText"></span>
134
+ </div>
135
+ </div>
136
+
137
  <script>
138
  document.addEventListener('DOMContentLoaded', function() {
139
+ // Éléments DOM
140
+ const dropzone = document.getElementById('dropzone');
141
+ const fileInput = document.getElementById('fileInput');
142
+ const uploadForm = document.getElementById('uploadForm');
143
+ const loading = document.getElementById('loading');
144
+ const response = document.getElementById('response');
145
+ const latexContent = document.getElementById('latexContent');
146
+ const errorMessage = document.getElementById('errorMessage');
147
+ const errorText = document.getElementById('errorText');
148
+ const submitButton = uploadForm.querySelector('button[type="submit"]');
149
+
150
+ // Configuration de marked
151
+ marked.setOptions({
152
+ breaks: true,
153
+ gfm: true,
154
+ pedantic: false,
155
+ smartLists: true
156
+ });
157
+
158
+ // Fonction pour afficher les erreurs
159
+ function showError(message) {
160
+ errorText.textContent = message;
161
+ errorMessage.classList.remove('hidden');
162
+ setTimeout(() => {
163
+ errorMessage.classList.add('hidden');
164
+ }, 5000);
165
+ }
166
 
167
  // Fonction pour rendre le contenu mathématique
168
  async function renderMathContent(text) {
 
193
  }
194
  }
195
 
196
+ // Gestionnaire de drag & drop
197
+ function handleDragOver(e) {
198
+ e.preventDefault();
199
+ e.stopPropagation();
200
+ dropzone.classList.add('bg-blue-50');
201
+ }
202
+
203
+ function handleDragLeave(e) {
204
+ e.preventDefault();
205
+ e.stopPropagation();
206
+ dropzone.classList.remove('bg-blue-50');
207
+ }
208
+
209
+ function handleDrop(e) {
210
+ e.preventDefault();
211
+ e.stopPropagation();
212
+ dropzone.classList.remove('bg-blue-50');
213
+
214
+ const files = e.dataTransfer.files;
215
+ if (files.length > 0 && files[0].type.startsWith('image/')) {
216
+ fileInput.files = files;
217
+ handleFileSelect(files[0]);
218
+ } else {
219
+ showError('Veuillez déposer une image valide');
220
+ }
221
+ }
222
+
223
+ // Gestion de la sélection de fichier
224
+ function handleFileSelect(file) {
225
+ if (file && file.type.startsWith('image/')) {
226
+ const reader = new FileReader();
227
+ reader.onload = function(e) {
228
+ const preview = document.createElement('img');
229
+ preview.src = e.target.result;
230
+ preview.classList.add('max-h-48', 'mx-auto', 'mt-4', 'rounded-lg');
231
+
232
+ const oldPreview = dropzone.querySelector('img');
233
+ if (oldPreview) oldPreview.remove();
234
+
235
+ dropzone.appendChild(preview);
236
+ submitButton.disabled = false;
237
+ };
238
+ reader.readAsDataURL(file);
239
+ } else {
240
+ showError('Veuillez sélectionner une image valide');
241
+ }
242
+ }
243
+
244
+ // Gestionnaires d'événements
245
+ dropzone.addEventListener('dragover', handleDragOver);
246
+ dropzone.addEventListener('dragleave', handleDragLeave);
247
+ dropzone.addEventListener('drop', handleDrop);
248
+ dropzone.addEventListener('click', () => fileInput.click());
249
+
250
+ fileInput.addEventListener('change', (e) => {
251
+ if (e.target.files.length > 0) {
252
+ handleFileSelect(e.target.files[0]);
253
+ }
254
+ });
255
+
256
+ // Gestion du formulaire
257
+ uploadForm.addEventListener('submit', async (e) => {
258
+ e.preventDefault();
259
+
260
+ if (!fileInput.files.length) {
261
+ showError('Veuillez sélectionner une image');
262
+ return;
263
+ }
264
+
265
+ const formData = new FormData();
266
+ formData.append('image', fileInput.files[0]);
267
+
268
+ try {
269
+ submitButton.disabled = true;
270
+ loading.classList.add('active');
271
+ response.classList.add('hidden');
272
+ errorMessage.classList.add('hidden');
273
+
274
+ const res = await fetch('/upload', {
275
+ method: 'POST',
276
+ body: formData
277
+ });
278
+
279
+ const data = await res.json();
280
+
281
+ if (data.error) {
282
+ throw new Error(data.error);
283
+ }
284
+
285
+ await renderMathContent(data.result);
286
+
287
+ } catch (error) {
288
+ console.error('Erreur:', error);
289
+ showError(error.message || 'Une erreur est survenue lors du traitement');
290
+ } finally {
291
+ loading.classList.remove('active');
292
+ submitButton.disabled = false;
293
+ }
294
+ });
295
  });
296
  </script>
297
  </body>