Hugging Face's logo

Spaces:
Docfile
/
Mariam-cards
Running

App Files Community
1
Docfile commited on
Commit
0b52bb7
·
verified ·
1 Parent(s): 4b0c9c0

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -301
templates/index.html DELETED
@@ -1,301 +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
- <!-- 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>