Hugging Face's logo

Spaces:
Docfile
/
Mariam-cards
Running

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

Create index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +341 -0
templates/index.html ADDED
@@ -0,0 +1,341 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ white-space: pre-wrap; /* Gérer les espaces et les sauts de ligne */
90
+ }
91
+
92
+ .preview-image {
93
+ max-width: 300px;
94
+ max-height: 300px;
95
+ object-fit: contain;
96
+ }
97
+
98
+ .timestamp {
99
+ color: #3b82f6;
100
+ font-size: 0.9em;
101
+ margin-left: 8px;
102
+ }
103
+ </style>
104
+
105
+ </head>
106
+ <body class="p-4">
107
+ <div class="max-w-4xl mx-auto">
108
+ <div class="p-6">
109
+ <div class="text-center mb-8">
110
+ <h1 class="text-4xl font-bold text-blue-600">Mariam M-0</h1>
111
+ <p class="text-gray-600">Solution Mathématique Intelligente</p>
112
+ </div>
113
+
114
+ <form id="problemForm" class="space-y-6">
115
+ <div class="uploadArea p-8 text-center relative">
116
+ <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
117
+ <div class="space-y-3">
118
+ <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
119
+ <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
120
+ <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" />
121
+ </svg>
122
+ </div>
123
+ <p class="text-gray-700 font-medium">Déposez votre image ici</p>
124
+ <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
125
+ </div>
126
+ </div>
127
+
128
+ <div id="imagePreview" class="hidden text-center">
129
+ <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation">
130
+ </div>
131
+
132
+ <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
133
+ Résoudre le problème
134
+ </button>
135
+ </form>
136
+
137
+ <div id="loader" class="hidden mt-8 text-center">
138
+ <span class="loader"></span>
139
+ <p class="mt-4 text-gray-600">Analyse en cours...</p>
140
+ </div>
141
+
142
+ <div id="solution" class="hidden mt-8 space-y-6">
143
+ <div class="border-t pt-4">
144
+ <button id="thoughtsToggle" class="w-full flex justify-between items-center p-2">
145
+ <span class="font-medium text-gray-700">Processus de Réflexion</span>
146
+ <span id="timestamp" class="timestamp"></span>
147
+ </button>
148
+ <div id="thoughtsBox" class="thought-box">
149
+ <div id="thoughtsContent" class="p-4 text-gray-600"></div>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="border-t pt-6">
154
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
155
+ <div id="answerContent" class="text-gray-700"></div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <script>
162
+ document.addEventListener('DOMContentLoaded', () => {
163
+ const form = document.getElementById('problemForm');
164
+ const imageInput = document.getElementById('imageInput');
165
+ const loader = document.getElementById('loader');
166
+ const solution = document.getElementById('solution');
167
+ const thoughtsContent = document.getElementById('thoughtsContent');
168
+ const answerContent = document.getElementById('answerContent');
169
+ const thoughtsToggle = document.getElementById('thoughtsToggle');
170
+ const thoughtsBox = document.getElementById('thoughtsBox');
171
+ const imagePreview = document.getElementById('imagePreview');
172
+ const previewImage = document.getElementById('previewImage');
173
+ const timestamp = document.getElementById('timestamp');
174
+
175
+ let startTime = null;
176
+ let timerInterval = null;
177
+ let thoughtsBuffer = '';
178
+ let answerBuffer = '';
179
+
180
+ const updateTimestamp = () => {
181
+ if (startTime) {
182
+ timestamp.textContent = `${Math.floor((Date.now() - startTime) / 1000)}s`;
183
+ }
184
+ };
185
+
186
+ const startTimer = () => {
187
+ startTime = Date.now();
188
+ timerInterval = setInterval(updateTimestamp, 1000);
189
+ updateTimestamp();
190
+ };
191
+
192
+ const stopTimer = () => {
193
+ clearInterval(timerInterval);
194
+ startTime = null;
195
+ timestamp.textContent = '';
196
+ };
197
+
198
+ const handleFileSelect = file => {
199
+ if (!file) return;
200
+ const reader = new FileReader();
201
+ reader.onload = e => {
202
+ previewImage.src = e.target.result;
203
+ imagePreview.classList.remove('hidden');
204
+ };
205
+ reader.readAsDataURL(file);
206
+ };
207
+
208
+ thoughtsToggle.addEventListener('click', () => {
209
+ thoughtsBox.classList.toggle('open');
210
+ });
211
+
212
+ imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
213
+
214
+ const dropZone = document.querySelector('.uploadArea');
215
+ dropZone.addEventListener('dragover', e => {
216
+ e.preventDefault();
217
+ dropZone.classList.add('border-blue-400');
218
+ });
219
+
220
+ dropZone.addEventListener('dragleave', e => {
221
+ e.preventDefault();
222
+ dropZone.classList.remove('border-blue-400');
223
+ });
224
+
225
+ dropZone.addEventListener('drop', e => {
226
+ e.preventDefault();
227
+ dropZone.classList.remove('border-blue-400');
228
+ handleFileSelect(e.dataTransfer.files[0]);
229
+ });
230
+
231
+ const typesetAnswerIfReady = async () => {
232
+ if (window.mathJaxReady) {
233
+ MathJax.startup.document.elements = [document.getElementById('answerContent')];
234
+ await MathJax.typesetPromise();
235
+ answerContent.scrollTop = answerContent.scrollHeight;
236
+ } else {
237
+ setTimeout(typesetAnswerIfReady, 200);
238
+ }
239
+ };
240
+
241
+ // Configuration de marked pour gérer les sauts de ligne
242
+ marked.setOptions({
243
+ breaks: true, // Interpréter les sauts de ligne simples comme des <br>
244
+ });
245
+
246
+ form.addEventListener('submit', async e => {
247
+ e.preventDefault();
248
+ const file = imageInput.files[0];
249
+ if (!file) {
250
+ alert('Veuillez sélectionner une image.');
251
+ return;
252
+ }
253
+
254
+ startTimer();
255
+ loader.classList.remove('hidden');
256
+ solution.classList.add('hidden');
257
+ thoughtsContent.innerHTML = '';
258
+ answerContent.innerHTML = '';
259
+ thoughtsBuffer = '';
260
+ answerBuffer = '';
261
+ thoughtsBox.classList.add('open');
262
+
263
+ const formData = new FormData();
264
+ formData.append('image', file);
265
+
266
+ try {
267
+ let currentMode = null;
268
+ const response = await fetch('/solve', {
269
+ method: 'POST',
270
+ body: formData
271
+ });
272
+
273
+ const reader = response.body.getReader();
274
+ const decoder = new TextDecoder();
275
+ let buffer = '';
276
+
277
+ const processChunk = async (chunk) => {
278
+ buffer += decoder.decode(chunk, { stream: true });
279
+ const lines = buffer.split('\n\n');
280
+ buffer = lines.pop();
281
+
282
+ for (const line of lines) {
283
+ if (!line.startsWith('data:')) continue;
284
+ const data = JSON.parse(line.slice(5));
285
+
286
+ if (data.mode) {
287
+ currentMode = data.mode;
288
+ loader.classList.add('hidden');
289
+ solution.classList.remove('hidden');
290
+ }
291
+
292
+ if (data.content) {
293
+ if (currentMode === 'thinking') {
294
+ thoughtsBuffer += data.content;
295
+ } else if (currentMode === 'answering') {
296
+ answerBuffer += data.content;
297
+ }
298
+ }
299
+ }
300
+
301
+ // Mettre à jour le contenu visible à chaque chunk reçu
302
+ thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
303
+ answerContent.innerHTML = marked.parse(answerBuffer);
304
+ await typesetAnswerIfReady();
305
+ };
306
+
307
+ while (true) {
308
+ const { done, value } = await reader.read();
309
+ if (done) {
310
+ // Traiter le contenu restant dans le buffer à la fin du stream
311
+ if (buffer) {
312
+ const data = JSON.parse(buffer.slice(5));
313
+ if (data.content) {
314
+ if (currentMode === 'thinking') {
315
+ thoughtsBuffer += data.content;
316
+ } else if (currentMode === 'answering') {
317
+ answerBuffer += data.content;
318
+ }
319
+ }
320
+ }
321
+
322
+ // Mettre à jour le contenu visible une dernière fois à la fin du stream
323
+ thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
324
+ answerContent.innerHTML = marked.parse(answerBuffer);
325
+ await typesetAnswerIfReady();
326
+ break;
327
+ }
328
+ await processChunk(value);
329
+ }
330
+ stopTimer();
331
+ } catch (error) {
332
+ console.error('Erreur:', error);
333
+ alert('Une erreur est survenue.');
334
+ loader.classList.add('hidden');
335
+ stopTimer();
336
+ }
337
+ });
338
+ });
339
+ </script>
340
+ </body>
341
+ </html>