Hugging Face's logo

Spaces:
Docfile
/
Mariam-cards
Running

App Files Community
1
Docfile commited on
Commit
a3ebf23
·
verified ·
1 Parent(s): d60fb8f

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -335
templates/index.html DELETED
@@ -1,335 +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
-
9
- <!-- Optimized MathJax Configuration -->
10
- <script>
11
- window.MathJax = {
12
- tex: {
13
- inlineMath: [['$', '$']],
14
- displayMath: [['$$', '$$']],
15
- processEscapes: true,
16
- packages: ['base', 'ams']
17
- },
18
- options: {
19
- enableMenu: false,
20
- messageStyle: 'none'
21
- },
22
- startup: {
23
- pageReady: () => {
24
- console.log('MathJax is fully loaded and ready.');
25
- window.mathJaxReady = true; // Signal that MathJax is ready
26
- // On pourrait appeler une fonction ici pour traiter du contenu initial si nécessaire
27
- }
28
- }
29
- };
30
- </script>
31
- <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
32
- <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
33
-
34
- <style>
35
- @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
36
-
37
- body {
38
- font-family: 'Space Grotesk', sans-serif;
39
- }
40
-
41
- .uploadArea {
42
- background: #f3f4f6;
43
- border: 2px dashed #d1d5db;
44
- transition: border-color 0.2s ease;
45
- }
46
-
47
- .uploadArea:hover {
48
- border-color: #3b82f6;
49
- }
50
-
51
- .blue-button {
52
- background: #3b82f6;
53
- transition: background-color 0.2s ease;
54
- }
55
-
56
- .blue-button:hover {
57
- background: #2563eb;
58
- }
59
-
60
- .loader {
61
- width: 48px;
62
- height: 48px;
63
- border: 3px solid #3b82f6;
64
- border-bottom-color: transparent;
65
- border-radius: 50%;
66
- display: inline-block;
67
- animation: rotation 1s linear infinite;
68
- }
69
-
70
- @keyframes rotation {
71
- 0% { transform: rotate(0deg); }
72
- 100% { transform: rotate(360deg); }
73
- }
74
-
75
- .thought-box {
76
- transition: max-height 0.3s ease-out;
77
- max-height: 0;
78
- overflow: hidden;
79
- }
80
-
81
- .thought-box.open {
82
- max-height: 500px;
83
- }
84
-
85
- #thoughtsContent, #answerContent {
86
- max-height: 500px;
87
- overflow-y: auto;
88
- scroll-behavior: smooth;
89
- }
90
-
91
- .preview-image {
92
- max-width: 300px;
93
- max-height: 300px;
94
- object-fit: contain;
95
- }
96
-
97
- .timestamp {
98
- color: #3b82f6;
99
- font-size: 0.9em;
100
- margin-left: 8px;
101
- }
102
- </style>
103
-
104
- </head>
105
- <body class="p-4">
106
- <div class="max-w-4xl mx-auto">
107
- <div class="p-6">
108
- <div class="text-center mb-8">
109
- <h1 class="text-4xl font-bold text-blue-600">Mariam M-0</h1>
110
- <p class="text-gray-600">Solution Mathématique Intelligente</p>
111
- </div>
112
-
113
- <form id="problemForm" class="space-y-6">
114
- <div class="uploadArea p-8 text-center relative">
115
- <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
116
- <div class="space-y-3">
117
- <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
118
- <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
119
- <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" />
120
- </svg>
121
- </div>
122
- <p class="text-gray-700 font-medium">Déposez votre image ici</p>
123
- <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
124
- </div>
125
- </div>
126
-
127
- <div id="imagePreview" class="hidden text-center">
128
- <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation">
129
- </div>
130
-
131
- <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
132
- Résoudre le problème
133
- </button>
134
- </form>
135
-
136
- <div id="loader" class="hidden mt-8 text-center">
137
- <span class="loader"></span>
138
- <p class="mt-4 text-gray-600">Analyse en cours...</p>
139
- </div>
140
-
141
- <div id="solution" class="hidden mt-8 space-y-6">
142
- <div class="border-t pt-4">
143
- <button id="thoughtsToggle" class="w-full flex justify-between items-center p-2">
144
- <span class="font-medium text-gray-700">Processus de Réflexion</span>
145
- <span id="timestamp" class="timestamp"></span>
146
- </button>
147
- <div id="thoughtsBox" class="thought-box">
148
- <div id="thoughtsContent" class="p-4 text-gray-600"></div>
149
- </div>
150
- </div>
151
-
152
- <div class="border-t pt-6">
153
- <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
154
- <div id="answerContent" class="text-gray-700"></div>
155
- </div>
156
- </div>
157
- </div>
158
- </div>
159
-
160
- <script>
161
- document.addEventListener('DOMContentLoaded', () => {
162
- const form = document.getElementById('problemForm');
163
- const imageInput = document.getElementById('imageInput');
164
- const loader = document.getElementById('loader');
165
- const solution = document.getElementById('solution');
166
- const thoughtsContent = document.getElementById('thoughtsContent');
167
- const answerContent = document.getElementById('answerContent');
168
- const thoughtsToggle = document.getElementById('thoughtsToggle');
169
- const thoughtsBox = document.getElementById('thoughtsBox');
170
- const imagePreview = document.getElementById('imagePreview');
171
- const previewImage = document.getElementById('previewImage');
172
- const timestamp = document.getElementById('timestamp');
173
-
174
- let startTime = null;
175
- let timerInterval = null;
176
- let thoughtsBuffer = '';
177
- let answerBuffer = '';
178
-
179
- const updateTimestamp = () => {
180
- if (startTime) {
181
- timestamp.textContent = `${Math.floor((Date.now() - startTime) / 1000)}s`;
182
- }
183
- };
184
-
185
- const startTimer = () => {
186
- startTime = Date.now();
187
- timerInterval = setInterval(updateTimestamp, 1000);
188
- updateTimestamp();
189
- };
190
-
191
- const stopTimer = () => {
192
- clearInterval(timerInterval);
193
- startTime = null;
194
- timestamp.textContent = '';
195
- };
196
-
197
- const handleFileSelect = file => {
198
- if (!file) return;
199
- const reader = new FileReader();
200
- reader.onload = e => {
201
- previewImage.src = e.target.result;
202
- imagePreview.classList.remove('hidden');
203
- };
204
- reader.readAsDataURL(file);
205
- };
206
-
207
- thoughtsToggle.addEventListener('click', () => {
208
- thoughtsBox.classList.toggle('open');
209
- });
210
-
211
- imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
212
-
213
- const dropZone = document.querySelector('.uploadArea');
214
- dropZone.addEventListener('dragover', e => {
215
- e.preventDefault();
216
- dropZone.classList.add('border-blue-400');
217
- });
218
-
219
- dropZone.addEventListener('dragleave', e => {
220
- e.preventDefault();
221
- dropZone.classList.remove('border-blue-400');
222
- });
223
-
224
- dropZone.addEventListener('drop', e => {
225
- e.preventDefault();
226
- dropZone.classList.remove('border-blue-400');
227
- handleFileSelect(e.dataTransfer.files[0]);
228
- });
229
-
230
- const typesetAnswerIfReady = async () => {
231
- if (window.mathJaxReady) {
232
- MathJax.startup.document.elements = [document.getElementById('answerContent')];
233
- await MathJax.typesetPromise();
234
- answerContent.scrollTop = answerContent.scrollHeight;
235
- } else {
236
- setTimeout(typesetAnswerIfReady, 200);
237
- }
238
- };
239
-
240
- form.addEventListener('submit', async e => {
241
- e.preventDefault();
242
- const file = imageInput.files[0];
243
- if (!file) {
244
- alert('Veuillez sélectionner une image.');
245
- return;
246
- }
247
-
248
- startTimer();
249
- loader.classList.remove('hidden');
250
- solution.classList.add('hidden');
251
- thoughtsContent.innerHTML = '';
252
- answerContent.innerHTML = '';
253
- thoughtsBuffer = '';
254
- answerBuffer = '';
255
- thoughtsBox.classList.add('open');
256
-
257
- const formData = new FormData();
258
- formData.append('image', file);
259
-
260
- try {
261
- let currentMode = null;
262
- const response = await fetch('/solve', {
263
- method: 'POST',
264
- body: formData
265
- });
266
-
267
- const reader = response.body.getReader();
268
- const decoder = new TextDecoder();
269
- let buffer = '';
270
-
271
- const processChunk = async (chunk) => {
272
- buffer += decoder.decode(chunk, { stream: true });
273
- const lines = buffer.split('\n\n');
274
- buffer = lines.pop();
275
-
276
- for (const line of lines) {
277
- if (!line.startsWith('data:')) continue;
278
- const data = JSON.parse(line.slice(5));
279
-
280
- if (data.mode) {
281
- currentMode = data.mode;
282
- loader.classList.add('hidden');
283
- solution.classList.remove('hidden');
284
- }
285
-
286
- if (data.content) {
287
- if (currentMode === 'thinking') {
288
- thoughtsBuffer += data.content;
289
- } else if (currentMode === 'answering') {
290
- answerBuffer += data.content;
291
- }
292
- }
293
- }
294
-
295
- // Mettre à jour le contenu visible à chaque chunk reçu
296
- thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
297
- answerContent.innerHTML = marked.parse(answerBuffer);
298
- await typesetAnswerIfReady();
299
- };
300
-
301
- while (true) {
302
- const { done, value } = await reader.read();
303
- if (done) {
304
- // Traiter le contenu restant dans le buffer à la fin du stream
305
- if (buffer) {
306
- const data = JSON.parse(buffer.slice(5));
307
- if (data.content) {
308
- if (currentMode === 'thinking') {
309
- thoughtsBuffer += data.content;
310
- } else if (currentMode === 'answering') {
311
- answerBuffer += data.content;
312
- }
313
- }
314
- }
315
-
316
- // Mettre à jour le contenu visible une dernière fois à la fin du stream
317
- thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
318
- answerContent.innerHTML = marked.parse(answerBuffer);
319
- await typesetAnswerIfReady();
320
- break;
321
- }
322
- await processChunk(value);
323
- }
324
- stopTimer();
325
- } catch (error) {
326
- console.error('Erreur:', error);
327
- alert('Une erreur est survenue.');
328
- loader.classList.add('hidden');
329
- stopTimer();
330
- }
331
- });
332
- });
333
- </script>
334
- </body>
335
- </html>