Hugging Face's logo

Spaces:
Docfile
/
Mariam-cards
Running

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

Create index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +301 -0
templates/index.html ADDED
@@ -0,0 +1,301 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <!-- Configuration MathJax optimisée -->
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
+ return MathJax.startup.defaultPageReady().then(() => {
25
+ console.log('MathJax initial typeset complete');
26
+ });
27
+ }
28
+ }
29
+ };
30
+ </script>
31
+ <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" defer></script>
32
+ <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js" defer></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
+ </head>
104
+ <body class="p-4">
105
+ <div class="max-w-4xl mx-auto">
106
+ <div class="p-6">
107
+ <div class="text-center mb-8">
108
+ <h1 class="text-4xl font-bold text-blue-600">Mariam M-0</h1>
109
+ <p class="text-gray-600">Solution Mathématique Intelligente</p>
110
+ </div>
111
+
112
+ <form id="problemForm" class="space-y-6">
113
+ <div class="uploadArea p-8 text-center relative">
114
+ <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
115
+ <div class="space-y-3">
116
+ <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
117
+ <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
118
+ <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" />
119
+ </svg>
120
+ </div>
121
+ <p class="text-gray-700 font-medium">Déposez votre image ici</p>
122
+ <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
123
+ </div>
124
+ </div>
125
+
126
+ <div id="imagePreview" class="hidden text-center">
127
+ <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation">
128
+ </div>
129
+
130
+ <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
131
+ Résoudre le problème
132
+ </button>
133
+ </form>
134
+
135
+ <div id="loader" class="hidden mt-8 text-center">
136
+ <span class="loader"></span>
137
+ <p class="mt-4 text-gray-600">Analyse en cours...</p>
138
+ </div>
139
+
140
+ <div id="solution" class="hidden mt-8 space-y-6">
141
+ <div class="border-t pt-4">
142
+ <button id="thoughtsToggle" class="w-full flex justify-between items-center p-2">
143
+ <span class="font-medium text-gray-700">Processus de Réflexion</span>
144
+ <span id="timestamp" class="timestamp"></span>
145
+ </button>
146
+ <div id="thoughtsBox" class="thought-box">
147
+ <div id="thoughtsContent" class="p-4 text-gray-600"></div>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="border-t pt-6">
152
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
153
+ <div id="answerContent" class="text-gray-700"></div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <script>
160
+ document.addEventListener('DOMContentLoaded', () => {
161
+ const form = document.getElementById('problemForm');
162
+ const imageInput = document.getElementById('imageInput');
163
+ const loader = document.getElementById('loader');
164
+ const solution = document.getElementById('solution');
165
+ const thoughtsContent = document.getElementById('thoughtsContent');
166
+ const answerContent = document.getElementById('answerContent');
167
+ const thoughtsToggle = document.getElementById('thoughtsToggle');
168
+ const thoughtsBox = document.getElementById('thoughtsBox');
169
+ const imagePreview = document.getElementById('imagePreview');
170
+ const previewImage = document.getElementById('previewImage');
171
+ const timestamp = document.getElementById('timestamp');
172
+
173
+ let startTime = null;
174
+ let timerInterval = null;
175
+
176
+ const updateTimestamp = () => {
177
+ if (startTime) {
178
+ timestamp.textContent = `${Math.floor((Date.now() - startTime) / 1000)}s`;
179
+ }
180
+ };
181
+
182
+ const startTimer = () => {
183
+ startTime = Date.now();
184
+ timerInterval = setInterval(updateTimestamp, 1000);
185
+ updateTimestamp();
186
+ };
187
+
188
+ const stopTimer = () => {
189
+ clearInterval(timerInterval);
190
+ startTime = null;
191
+ timestamp.textContent = '';
192
+ };
193
+
194
+ const handleFileSelect = file => {
195
+ if (!file) return;
196
+ const reader = new FileReader();
197
+ reader.onload = e => {
198
+ previewImage.src = e.target.result;
199
+ imagePreview.classList.remove('hidden');
200
+ };
201
+ reader.readAsDataURL(file);
202
+ };
203
+
204
+ thoughtsToggle.addEventListener('click', () => {
205
+ thoughtsBox.classList.toggle('open');
206
+ });
207
+
208
+ imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
209
+
210
+ const dropZone = document.querySelector('.uploadArea');
211
+ dropZone.addEventListener('dragover', e => {
212
+ e.preventDefault();
213
+ dropZone.classList.add('border-blue-400');
214
+ });
215
+
216
+ dropZone.addEventListener('dragleave', e => {
217
+ e.preventDefault();
218
+ dropZone.classList.remove('border-blue-400');
219
+ });
220
+
221
+ dropZone.addEventListener('drop', e => {
222
+ e.preventDefault();
223
+ dropZone.classList.remove('border-blue-400');
224
+ handleFileSelect(e.dataTransfer.files[0]);
225
+ });
226
+
227
+ form.addEventListener('submit', async e => {
228
+ e.preventDefault();
229
+ const file = imageInput.files[0];
230
+ if (!file) {
231
+ alert('Veuillez sélectionner une image.');
232
+ return;
233
+ }
234
+
235
+ startTimer();
236
+ loader.classList.remove('hidden');
237
+ solution.classList.add('hidden');
238
+ thoughtsContent.innerHTML = '';
239
+ answerContent.innerHTML = '';
240
+ thoughtsBox.classList.add('open');
241
+
242
+ const formData = new FormData();
243
+ formData.append('image', file);
244
+
245
+ try {
246
+ let currentMode = null;
247
+ const response = await fetch('/solve', {
248
+ method: 'POST',
249
+ body: formData
250
+ });
251
+
252
+ const reader = response.body.getReader();
253
+ const decoder = new TextDecoder();
254
+ let buffer = '';
255
+
256
+ const processChunk = chunk => {
257
+ buffer += decoder.decode(chunk, { stream: true });
258
+ const lines = buffer.split('\n\n');
259
+ buffer = lines.pop();
260
+
261
+ lines.forEach(line => {
262
+ if (!line.startsWith('data:')) return;
263
+ const data = JSON.parse(line.slice(5));
264
+
265
+ if (data.mode) {
266
+ currentMode = data.mode;
267
+ loader.classList.add('hidden');
268
+ solution.classList.remove('hidden');
269
+ }
270
+
271
+ if (!data.content) return;
272
+
273
+ const container = currentMode === 'thinking' ? thoughtsContent : answerContent;
274
+ container.innerHTML += marked.parse(data.content);
275
+
276
+ if (currentMode === 'answering' && window.MathJax) {
277
+ MathJax.typesetPromise([container]).catch(console.error);
278
+ }
279
+
280
+ container.scrollTop = container.scrollHeight;
281
+ });
282
+ };
283
+
284
+ while (true) {
285
+ const { done, value } = await reader.read();
286
+ if (done) break;
287
+ processChunk(value);
288
+ }
289
+
290
+ stopTimer();
291
+ } catch (error) {
292
+ console.error('Erreur:', error);
293
+ alert('Une erreur est survenue.');
294
+ loader.classList.add('hidden');
295
+ stopTimer();
296
+ }
297
+ });
298
+ });
299
+ </script>
300
+ </body>
301
+ </html>