Hugging Face's logo

Spaces:
Docfile
/
Mariam-cards
Running

App Files Community
1
Docfile commited on
Commit
0cb44f9
·
verified ·
1 Parent(s): 09586cd

Create index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +269 -0
templates/index.html ADDED
@@ -0,0 +1,269 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ /* ... (style non modifié) ... */
36
+ </style>
37
+
38
+ </head>
39
+ <body class="p-4">
40
+ <div class="max-w-4xl mx-auto">
41
+ <div class="p-6">
42
+ <div class="text-center mb-8">
43
+ <h1 class="text-4xl font-bold text-blue-600">Mariam M-0</h1>
44
+ <p class="text-gray-600">Solution Mathématique Intelligente</p>
45
+ </div>
46
+
47
+ <form id="problemForm" class="space-y-6">
48
+ <div class="uploadArea p-8 text-center relative">
49
+ <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
50
+ <div class="space-y-3">
51
+ <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
52
+ <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
53
+ <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" />
54
+ </svg>
55
+ </div>
56
+ <p class="text-gray-700 font-medium">Déposez votre image ici</p>
57
+ <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
58
+ </div>
59
+ </div>
60
+
61
+ <div id="imagePreview" class="hidden text-center">
62
+ <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation">
63
+ </div>
64
+
65
+ <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
66
+ Résoudre le problème
67
+ </button>
68
+ </form>
69
+
70
+ <div id="loader" class="hidden mt-8 text-center">
71
+ <span class="loader"></span>
72
+ <p class="mt-4 text-gray-600">Analyse en cours...</p>
73
+ </div>
74
+
75
+ <div id="solution" class="hidden mt-8 space-y-6">
76
+ <div class="border-t pt-4">
77
+ <button id="thoughtsToggle" class="w-full flex justify-between items-center p-2">
78
+ <span class="font-medium text-gray-700">Processus de Réflexion</span>
79
+ <span id="timestamp" class="timestamp"></span>
80
+ </button>
81
+ <div id="thoughtsBox" class="thought-box">
82
+ <div id="thoughtsContent" class="p-4 text-gray-600"></div>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="border-t pt-6">
87
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
88
+ <div id="answerContent" class="text-gray-700"></div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <script>
95
+ document.addEventListener('DOMContentLoaded', () => {
96
+ const form = document.getElementById('problemForm');
97
+ const imageInput = document.getElementById('imageInput');
98
+ const loader = document.getElementById('loader');
99
+ const solution = document.getElementById('solution');
100
+ const thoughtsContent = document.getElementById('thoughtsContent');
101
+ const answerContent = document.getElementById('answerContent');
102
+ const thoughtsToggle = document.getElementById('thoughtsToggle');
103
+ const thoughtsBox = document.getElementById('thoughtsBox');
104
+ const imagePreview = document.getElementById('imagePreview');
105
+ const previewImage = document.getElementById('previewImage');
106
+ const timestamp = document.getElementById('timestamp');
107
+
108
+ let startTime = null;
109
+ let timerInterval = null;
110
+ let thoughtsBuffer = '';
111
+ let answerBuffer = '';
112
+
113
+ const updateTimestamp = () => {
114
+ if (startTime) {
115
+ timestamp.textContent = `${Math.floor((Date.now() - startTime) / 1000)}s`;
116
+ }
117
+ };
118
+
119
+ const startTimer = () => {
120
+ startTime = Date.now();
121
+ timerInterval = setInterval(updateTimestamp, 1000);
122
+ updateTimestamp();
123
+ };
124
+
125
+ const stopTimer = () => {
126
+ clearInterval(timerInterval);
127
+ startTime = null;
128
+ timestamp.textContent = '';
129
+ };
130
+
131
+ const handleFileSelect = file => {
132
+ if (!file) return;
133
+ const reader = new FileReader();
134
+ reader.onload = e => {
135
+ previewImage.src = e.target.result;
136
+ imagePreview.classList.remove('hidden');
137
+ };
138
+ reader.readAsDataURL(file);
139
+ };
140
+
141
+ thoughtsToggle.addEventListener('click', () => {
142
+ thoughtsBox.classList.toggle('open');
143
+ });
144
+
145
+ imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
146
+
147
+ const dropZone = document.querySelector('.uploadArea');
148
+ dropZone.addEventListener('dragover', e => {
149
+ e.preventDefault();
150
+ dropZone.classList.add('border-blue-400');
151
+ });
152
+
153
+ dropZone.addEventListener('dragleave', e => {
154
+ e.preventDefault();
155
+ dropZone.classList.remove('border-blue-400');
156
+ });
157
+
158
+ dropZone.addEventListener('drop', e => {
159
+ e.preventDefault();
160
+ dropZone.classList.remove('border-blue-400');
161
+ handleFileSelect(e.dataTransfer.files[0]);
162
+ });
163
+
164
+ const typesetAnswerIfReady = async () => {
165
+ if (window.mathJaxReady) {
166
+ MathJax.startup.document.elements = [document.getElementById('answerContent')];
167
+ await MathJax.typesetPromise();
168
+ answerContent.scrollTop = answerContent.scrollHeight;
169
+ } else {
170
+ setTimeout(typesetAnswerIfReady, 200);
171
+ }
172
+ };
173
+
174
+ form.addEventListener('submit', async e => {
175
+ e.preventDefault();
176
+ const file = imageInput.files[0];
177
+ if (!file) {
178
+ alert('Veuillez sélectionner une image.');
179
+ return;
180
+ }
181
+
182
+ startTimer();
183
+ loader.classList.remove('hidden');
184
+ solution.classList.add('hidden');
185
+ thoughtsContent.innerHTML = '';
186
+ answerContent.innerHTML = '';
187
+ thoughtsBuffer = '';
188
+ answerBuffer = '';
189
+ thoughtsBox.classList.add('open');
190
+
191
+ const formData = new FormData();
192
+ formData.append('image', file);
193
+
194
+ try {
195
+ let currentMode = null;
196
+ const response = await fetch('/solve', {
197
+ method: 'POST',
198
+ body: formData
199
+ });
200
+
201
+ const reader = response.body.getReader();
202
+ const decoder = new TextDecoder();
203
+ let buffer = '';
204
+
205
+ const processChunk = async (chunk) => {
206
+ buffer += decoder.decode(chunk, { stream: true });
207
+ const lines = buffer.split('\n\n');
208
+ buffer = lines.pop();
209
+
210
+ for (const line of lines) {
211
+ if (!line.startsWith('data:')) continue;
212
+ const data = JSON.parse(line.slice(5));
213
+
214
+ if (data.mode) {
215
+ currentMode = data.mode;
216
+ loader.classList.add('hidden');
217
+ solution.classList.remove('hidden');
218
+ }
219
+
220
+ if (data.content) {
221
+ if (currentMode === 'thinking') {
222
+ thoughtsBuffer += data.content;
223
+ } else if (currentMode === 'answering') {
224
+ answerBuffer += data.content;
225
+ }
226
+ }
227
+ }
228
+
229
+ // Mettre à jour le contenu visible à chaque chunk reçu
230
+ thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
231
+ answerContent.innerHTML = marked.parse(answerBuffer);
232
+ await typesetAnswerIfReady();
233
+ };
234
+
235
+ while (true) {
236
+ const { done, value } = await reader.read();
237
+ if (done) {
238
+ // Traiter le contenu restant dans le buffer à la fin du stream
239
+ if (buffer) {
240
+ const data = JSON.parse(buffer.slice(5));
241
+ if (data.content) {
242
+ if (currentMode === 'thinking') {
243
+ thoughtsBuffer += data.content;
244
+ } else if (currentMode === 'answering') {
245
+ answerBuffer += data.content;
246
+ }
247
+ }
248
+ }
249
+
250
+ // Mettre à jour le contenu visible une dernière fois à la fin du stream
251
+ thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
252
+ answerContent.innerHTML = marked.parse(answerBuffer);
253
+ await typesetAnswerIfReady();
254
+ break;
255
+ }
256
+ await processChunk(value);
257
+ }
258
+ stopTimer();
259
+ } catch (error) {
260
+ console.error('Erreur:', error);
261
+ alert('Une erreur est survenue.');
262
+ loader.classList.add('hidden');
263
+ stopTimer();
264
+ }
265
+ });
266
+ });
267
+ </script>
268
+ </body>
269
+ </html>