Hugging Face's logo

Spaces:
Docfile
/
Mariam-cards
Running

App Files Community
1
Docfile commited on
Commit
f7a7659
·
verified ·
1 Parent(s): 484ead3

Delete templates/index.html

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