Hugging Face's logo

Spaces:
Docfile
/
Mariam-cards
Running

App Files Community
1
Docfile commited on
Commit
5e1f74d
·
verified ·
1 Parent(s): c35d394

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -422
templates/index.html DELETED
@@ -1,422 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mariam M-0 | Solution Mathématique</title>
7
- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
-
9
- <script>
10
- window.MathJax = {
11
- loader: {
12
- load: ['[tex]/color', '[tex]/ams', '[tex]/noerrors', '[tex]/noundefined']
13
- },
14
- tex: {
15
- inlineMath: [['$', '$']],
16
- displayMath: [['$$', '$$']],
17
- processEscapes: true,
18
- packages: {
19
- '[+]': ['color', 'ams', 'noerrors', 'noundefined']
20
- },
21
- macros: {
22
- RR: "{\\mathbb{R}}",
23
- NN: "{\\mathbb{N}}",
24
- ZZ: "{\\mathbb{Z}}",
25
- QQ: "{\\mathbb{Q}}",
26
- CC: "{\\mathbb{C}}",
27
- vec: ["{\\overrightarrow{#1}}", 1],
28
- mat: ["{\\mathbf{#1}}", 1]
29
- }
30
- },
31
- options: {
32
- enableMenu: false,
33
- messageStyle: 'none',
34
- renderActions: {
35
- addMenu: [],
36
- checkLoading: []
37
- }
38
- },
39
- startup: {
40
- ready: () => {
41
- MathJax.startup.defaultReady();
42
- MathJax.startup.promise.then(() => {
43
- document.dispatchEvent(new Event('MathJaxReady'));
44
- });
45
- }
46
- },
47
- svg: {
48
- fontCache: 'global',
49
- scale: 1,
50
- minScale: .5
51
- }
52
- };
53
- </script>
54
- <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" async></script>
55
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
56
-
57
- <style>
58
- @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
59
-
60
- body {
61
- font-family: 'Space Grotesk', sans-serif;
62
- background-color: white;
63
- }
64
-
65
- .uploadArea {
66
- background: #f3f4f6;
67
- border: 2px dashed #d1d5db;
68
- transition: all 0.2s ease;
69
- }
70
-
71
- .uploadArea:hover {
72
- border-color: #3b82f6;
73
- transform: translateY(-1px);
74
- }
75
-
76
- .blue-button {
77
- background: #3b82f6;
78
- transition: all 0.2s ease;
79
- }
80
-
81
- .blue-button:hover {
82
- background: #2563eb;
83
- transform: translateY(-1px);
84
- }
85
-
86
- .loader {
87
- width: 48px;
88
- height: 48px;
89
- border: 3px solid #3b82f6;
90
- border-bottom-color: transparent;
91
- border-radius: 50%;
92
- display: inline-block;
93
- box-sizing: border-box;
94
- animation: rotation 1s linear infinite;
95
- }
96
-
97
- @keyframes rotation {
98
- 0% { transform: rotate(0deg); }
99
- 100% { transform: rotate(360deg); }
100
- }
101
-
102
- .thought-box {
103
- transition: all 0.3s ease-out;
104
- max-height: 0;
105
- overflow: hidden;
106
- }
107
-
108
- .thought-box.open {
109
- max-height: 500px;
110
- }
111
-
112
- .preview-container {
113
- display: flex;
114
- justify-content: center;
115
- align-items: center;
116
- margin-top: 20px;
117
- }
118
-
119
- .preview-image {
120
- max-width: 300px;
121
- max-height: 300px;
122
- border-radius: 8px;
123
- object-fit: contain;
124
- }
125
-
126
- #thoughtsContent, #answerContent {
127
- max-height: 500px;
128
- overflow-y: auto;
129
- scroll-behavior: smooth;
130
- }
131
-
132
- .timestamp {
133
- color: #3b82f6;
134
- margin-left: 10px;
135
- font-size: 0.9em;
136
- }
137
-
138
- .math-content {
139
- opacity: 0;
140
- transition: opacity 0.3s ease;
141
- }
142
-
143
- .math-content.rendered {
144
- opacity: 1;
145
- }
146
-
147
- .mjx-math {
148
- text-align: left !important;
149
- }
150
-
151
- .mjx-chtml {
152
- margin: 0 !important;
153
- padding: 0 !important;
154
- display: inline-block !important;
155
- outline: none !important;
156
- }
157
-
158
- mjx-container {
159
- padding: 5px 0;
160
- }
161
-
162
- .prose {
163
- max-width: 65ch;
164
- color: #374151;
165
- line-height: 1.6;
166
- }
167
-
168
- .prose p {
169
- margin-bottom: 1em;
170
- }
171
-
172
- .prose h1, .prose h2, .prose h3 {
173
- color: #1f2937;
174
- font-weight: 600;
175
- margin-top: 1.5em;
176
- margin-bottom: 0.5em;
177
- }
178
- </style>
179
- </head>
180
- <body class="p-4">
181
- <div class="max-w-4xl mx-auto">
182
- <div class="p-6">
183
- <div class="text-center mb-8">
184
- <h1 class="text-4xl font-bold text-blue-600 mb-2">Mariam M-0</h1>
185
- <p class="text-gray-600 text-lg">Solution Mathématique Intelligente</p>
186
- </div>
187
-
188
- <form id="problemForm" class="space-y-6">
189
- <div class="relative">
190
- <div class="uploadArea p-8 text-center cursor-pointer">
191
- <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
192
- <div class="space-y-3">
193
- <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
194
- <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
195
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
196
- </svg>
197
- </div>
198
- <div class="text-gray-700 font-medium">Déposez votre image ici</div>
199
- <div class="text-gray-500 text-sm">ou cliquez pour sélectionner</div>
200
- </div>
201
- </div>
202
- <div id="imagePreview" class="hidden preview-container">
203
- <img id="previewImage" alt="Prévisualisation" class="preview-image">
204
- </div>
205
- </div>
206
-
207
- <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg shadow-sm">
208
- Résoudre le problème
209
- </button>
210
- </form>
211
-
212
- <div id="loader" class="hidden mt-8">
213
- <div class="flex flex-col items-center justify-center space-y-4">
214
- <span class="loader"></span>
215
- <div class="text-gray-600">Analyse en cours...</div>
216
- </div>
217
- </div>
218
-
219
- <div id="solution" class="hidden mt-8 space-y-6">
220
- <div class="border-t pt-4">
221
- <button id="thoughtsToggle" class="w-full flex justify-between items-center p-2 hover:bg-gray-50 rounded">
222
- <div class="flex items-center">
223
- <span class="font-medium text-gray-700">Processus de Réflexion</span>
224
- <span id="timestamp" class="timestamp"></span>
225
- </div>
226
- <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
227
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
228
- </svg>
229
- </button>
230
- <div id="thoughtsBox" class="thought-box">
231
- <div id="thoughtsContent" class="prose p-4"></div>
232
- </div>
233
- </div>
234
-
235
- <div class="border-t pt-6">
236
- <h3 class="text-2xl font-bold text-gray-800 mb-4">Solution</h3>
237
- <div id="answerContent" class="prose"></div>
238
- </div>
239
- </div>
240
- </div>
241
- </div>
242
-
243
- <script>
244
- document.addEventListener('DOMContentLoaded', () => {
245
- const elements = {
246
- form: document.getElementById('problemForm'),
247
- imageInput: document.getElementById('imageInput'),
248
- loader: document.getElementById('loader'),
249
- solution: document.getElementById('solution'),
250
- thoughtsContent: document.getElementById('thoughtsContent'),
251
- answerContent: document.getElementById('answerContent'),
252
- thoughtsToggle: document.getElementById('thoughtsToggle'),
253
- thoughtsBox: document.getElementById('thoughtsBox'),
254
- imagePreview: document.getElementById('imagePreview'),
255
- previewImage: document.getElementById('previewImage'),
256
- timestamp: document.getElementById('timestamp')
257
- };
258
-
259
- let renderQueue = [];
260
- let isProcessing = false;
261
- let startTime = null;
262
- let timerInterval = null;
263
-
264
- const updateTimestamp = () => {
265
- if (startTime) {
266
- elements.timestamp.textContent = `${Math.floor((Date.now() - startTime) / 1000)}s`;
267
- }
268
- };
269
-
270
- const startTimer = () => {
271
- startTime = Date.now();
272
- timerInterval = setInterval(updateTimestamp, 1000);
273
- updateTimestamp();
274
- };
275
-
276
- const stopTimer = () => {
277
- clearInterval(timerInterval);
278
- startTime = null;
279
- elements.timestamp.textContent = '';
280
- };
281
-
282
- async function processRenderQueue() {
283
- if (isProcessing || renderQueue.length === 0) return;
284
-
285
- isProcessing = true;
286
- const element = renderQueue.shift();
287
-
288
- try {
289
- if (window.MathJax && window.MathJax.typesetPromise) {
290
- await MathJax.typesetPromise([element]);
291
- }
292
- element.classList.add('rendered');
293
- } catch (error) {
294
- console.error('Erreur de rendu LaTeX:', error);
295
- }
296
-
297
- isProcessing = false;
298
- requestAnimationFrame(processRenderQueue);
299
- }
300
-
301
- function addContentWithLatex(container, content) {
302
- const wrapper = document.createElement('div');
303
- wrapper.classList.add('math-content');
304
- wrapper.innerHTML = marked.parse(content);
305
- container.appendChild(wrapper);
306
-
307
- renderQueue.push(wrapper);
308
- processRenderQueue();
309
-
310
- container.scrollTop = container.scrollHeight;
311
- }
312
-
313
- const handleFileSelect = (file) => {
314
- if (!file) return;
315
- const reader = new FileReader();
316
- reader.onload = (e) => {
317
- elements.previewImage.src = e.target.result;
318
- elements.imagePreview.classList.remove('hidden');
319
- };
320
- reader.readAsDataURL(file);
321
- };
322
-
323
- elements.thoughtsToggle.addEventListener('click', () => {
324
- elements.thoughtsBox.classList.toggle('open');
325
- elements.thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
326
- });
327
-
328
- elements.imageInput.addEventListener('change', (e) => handleFileSelect(e.target.files[0]));
329
-
330
- const dropZone = document.querySelector('.uploadArea');
331
- ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
332
- dropZone.addEventListener(eventName, (e) => {
333
- e.preventDefault();
334
- e.stopPropagation();
335
- });
336
- });
337
-
338
- ['dragenter', 'dragover'].forEach(eventName => {
339
- dropZone.addEventListener(eventName, () => dropZone.classList.add('border-blue-400'));
340
- });
341
-
342
- ['dragleave', 'drop'].forEach(eventName => {
343
- dropZone.addEventListener(eventName, () => dropZone.classList.remove('border-blue-400'));
344
- });
345
-
346
- dropZone.addEventListener('drop', (e) => {
347
- handleFileSelect(e.dataTransfer.files[0]);
348
- });
349
-
350
- elements.form.addEventListener('submit', async (e) => {
351
- e.preventDefault();
352
- const file = elements.imageInput.files[0];
353
- if (!file) {
354
- alert('Veuillez sélectionner une image.');
355
- return;
356
- }
357
-
358
- startTimer();
359
- elements.loader.classList.remove('hidden');
360
- elements.solution.classList.add('hidden');
361
- elements.thoughtsContent.innerHTML = '';
362
- elements.answerContent.innerHTML = '';
363
- elements.thoughtsBox.classList.add('open');
364
- renderQueue = [];
365
-
366
- const formData = new FormData();
367
- formData.append('image', file);
368
-
369
- try {
370
- let currentMode = null;
371
- const response = await fetch('/solve', {
372
- method: 'POST',
373
- body: formData
374
- });
375
-
376
- const reader = response.body.getReader();
377
- const decoder = new TextDecoder();
378
- let buffer = '';
379
-
380
- while (true) {
381
- const { done, value } = await reader.read();
382
- if (done) break;
383
-
384
- buffer += decoder.decode(value, { stream: true });
385
- const lines = buffer.split('\n\n');
386
- buffer = lines.pop();
387
-
388
- for (const line of lines) {
389
- if (!line.startsWith('data:')) continue;
390
- const data = JSON.parse(line.slice(5));
391
-
392
- if (data.mode) {
393
- currentMode = data.mode;
394
- elements.loader.classList.add('hidden');
395
- elements.solution.classList.remove('hidden');
396
- }
397
-
398
- if (data.content) {
399
- const container = currentMode === 'thinking' ?
400
- elements.thoughtsContent : elements.answerContent;
401
- addContentWithLatex(container, data.content);
402
- }
403
- }
404
- }
405
-
406
- stopTimer();
407
- } catch (error) {
408
- console.error('Erreur:', error);
409
- alert('Une erreur est survenue lors du traitement de la requête.');
410
- elements.loader.classList.add('hidden');
411
- stopTimer();
412
- }
413
- });
414
-
415
- document.addEventListener('MathJaxReady', () => {
416
- console.log('MathJax est prêt');
417
- processRenderQueue();
418
- });
419
- });
420
- </script>
421
- </body>
422
- </html>