Docfile commited on
Commit
18659e4
·
verified ·
1 Parent(s): 77b6048

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -384
templates/index.html DELETED
@@ -1,384 +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
- <!-- Tailwind CSS (version 2.2.19 utilisée ici, à mettre à jour si besoin) -->
8
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
9
-
10
- <!-- Configuration optimisée de MathJax avec support étendu LaTeX -->
11
- <script>
12
- window.MathJax = {
13
- tex: {
14
- inlineMath: [['$', '$']],
15
- displayMath: [['$$', '$$']],
16
- processEscapes: true,
17
- // Chargement automatique de commandes supplémentaires (ex. environnements de tableaux)
18
- packages: {'[+]': ['autoload','ams']}
19
- },
20
- options: {
21
- enableMenu: false,
22
- messageStyle: 'none'
23
- },
24
- startup: {
25
- pageReady: () => {
26
- console.log('MathJax est complètement chargé.');
27
- window.mathJaxReady = true;
28
- }
29
- }
30
- };
31
- </script>
32
- <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
33
- <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
34
-
35
- <style>
36
- @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
37
-
38
- body {
39
- font-family: 'Space Grotesk', sans-serif;
40
- }
41
-
42
- .uploadArea {
43
- background: #f3f4f6;
44
- border: 2px dashed #d1d5db;
45
- transition: border-color 0.2s ease;
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
- .blue-button:hover {
56
- background: #2563eb;
57
- }
58
-
59
- .loader {
60
- width: 48px;
61
- height: 48px;
62
- border: 3px solid #3b82f6;
63
- border-bottom-color: transparent;
64
- border-radius: 50%;
65
- display: inline-block;
66
- animation: rotation 1s linear infinite;
67
- }
68
- @keyframes rotation {
69
- 0% { transform: rotate(0deg); }
70
- 100% { transform: rotate(360deg); }
71
- }
72
-
73
- .thought-box {
74
- transition: max-height 0.3s ease-out;
75
- max-height: 0;
76
- overflow: hidden;
77
- }
78
- .thought-box.open {
79
- max-height: 500px;
80
- }
81
-
82
- #thoughtsContent, #answerContent {
83
- max-height: 500px;
84
- overflow-y: auto;
85
- scroll-behavior: smooth;
86
- white-space: pre-wrap;
87
- }
88
-
89
- .preview-image {
90
- max-width: 300px;
91
- max-height: 300px;
92
- object-fit: contain;
93
- }
94
-
95
- .timestamp {
96
- color: #3b82f6;
97
- font-size: 0.9em;
98
- margin-left: 8px;
99
- }
100
-
101
- /* Styles supplémentaires pour une meilleure présentation des tableaux */
102
- table {
103
- border-collapse: collapse;
104
- width: 100%;
105
- margin-bottom: 1rem;
106
- }
107
- th, td {
108
- border: 1px solid #d1d5db;
109
- padding: 0.5rem;
110
- text-align: left;
111
- }
112
- th {
113
- background-color: #f3f4f6;
114
- font-weight: 600;
115
- }
116
- /* Pour un rendu responsive, ajouter éventuellement : */
117
- .table-responsive {
118
- overflow-x: auto;
119
- }
120
- </style>
121
- </head>
122
- <body class="p-4">
123
- <div class="max-w-4xl mx-auto">
124
- <header class="p-6 text-center mb-8">
125
- <h1 class="text-4xl font-bold text-blue-600">Mariam M-0</h1>
126
- <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente</p>
127
- </header>
128
-
129
- <main>
130
- <form id="problemForm" class="space-y-6" novalidate>
131
- <!-- Zone de dépôt et sélection d'image -->
132
- <div class="uploadArea p-8 text-center relative" aria-label="Zone de dépôt d'image">
133
- <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image">
134
- <div class="space-y-3">
135
- <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
136
- <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
137
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
138
- 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" />
139
- </svg>
140
- </div>
141
- <p class="text-gray-700 font-medium">Déposez votre image ici</p>
142
- <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
143
- </div>
144
- </div>
145
-
146
- <!-- Aperçu de l'image -->
147
- <div id="imagePreview" class="hidden text-center">
148
- <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation de l'image sélectionnée">
149
- </div>
150
-
151
- <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
152
- Résoudre le problème
153
- </button>
154
- </form>
155
-
156
- <!-- Loader d'analyse -->
157
- <div id="loader" class="hidden mt-8 text-center">
158
- <span class="loader"></span>
159
- <p class="mt-4 text-gray-600">Analyse en cours...</p>
160
- </div>
161
-
162
- <!-- Affichage de la solution -->
163
- <section id="solution" class="hidden mt-8 space-y-6">
164
- <div class="border-t pt-4">
165
- <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-2">
166
- <span class="font-medium text-gray-700">Processus de Réflexion</span>
167
- <span id="timestamp" class="timestamp"></span>
168
- </button>
169
- <div id="thoughtsBox" class="thought-box">
170
- <div id="thoughtsContent" class="p-4 text-gray-600"></div>
171
- </div>
172
- </div>
173
- <div class="border-t pt-6">
174
- <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
175
- <!-- Enveloppement d'éventuels tableaux dans une div responsive -->
176
- <div id="answerContent" class="text-gray-700 table-responsive"></div>
177
- </div>
178
- </section>
179
- </main>
180
- </div>
181
-
182
- <script>
183
- document.addEventListener('DOMContentLoaded', () => {
184
- // Récupération des éléments DOM
185
- const form = document.getElementById('problemForm');
186
- const imageInput = document.getElementById('imageInput');
187
- const loader = document.getElementById('loader');
188
- const solutionSection = document.getElementById('solution');
189
- const thoughtsContent = document.getElementById('thoughtsContent');
190
- const answerContent = document.getElementById('answerContent');
191
- const thoughtsToggle = document.getElementById('thoughtsToggle');
192
- const thoughtsBox = document.getElementById('thoughtsBox');
193
- const imagePreview = document.getElementById('imagePreview');
194
- const previewImage = document.getElementById('previewImage');
195
- const timestamp = document.getElementById('timestamp');
196
-
197
- let startTime = null;
198
- let timerInterval = null;
199
- let thoughtsBuffer = '';
200
- let answerBuffer = '';
201
- let currentMode = null;
202
- let updateTimeout = null; // Variable pour le debounce des mises à jour
203
-
204
- // Mise à jour de l'affichage du temps écoulé
205
- const updateTimestamp = () => {
206
- if (startTime) {
207
- const seconds = Math.floor((Date.now() - startTime) / 1000);
208
- timestamp.textContent = `${seconds}s`;
209
- }
210
- };
211
-
212
- const startTimer = () => {
213
- startTime = Date.now();
214
- timerInterval = setInterval(updateTimestamp, 1000);
215
- updateTimestamp();
216
- };
217
-
218
- const stopTimer = () => {
219
- clearInterval(timerInterval);
220
- startTime = null;
221
- timestamp.textContent = '';
222
- };
223
-
224
- // Gestion de la sélection ou du dépôt de l'image
225
- const handleFileSelect = file => {
226
- if (!file) return;
227
- const reader = new FileReader();
228
- reader.onload = e => {
229
- previewImage.src = e.target.result;
230
- imagePreview.classList.remove('hidden');
231
- };
232
- reader.readAsDataURL(file);
233
- };
234
-
235
- // Toggle pour afficher/cacher le processus de réflexion
236
- thoughtsToggle.addEventListener('click', () => {
237
- thoughtsBox.classList.toggle('open');
238
- });
239
-
240
- imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
241
-
242
- // Gestion des événements de glisser-déposer
243
- const dropZone = document.querySelector('.uploadArea');
244
- dropZone.addEventListener('dragover', e => {
245
- e.preventDefault();
246
- dropZone.classList.add('border-blue-400');
247
- });
248
- dropZone.addEventListener('dragleave', e => {
249
- e.preventDefault();
250
- dropZone.classList.remove('border-blue-400');
251
- });
252
- dropZone.addEventListener('drop', e => {
253
- e.preventDefault();
254
- dropZone.classList.remove('border-blue-400');
255
- handleFileSelect(e.dataTransfer.files[0]);
256
- });
257
-
258
- // Fonction pour relancer le rendu MathJax dès que le contenu de la réponse est mis à jour
259
- const typesetAnswerIfReady = async () => {
260
- if (window.mathJaxReady) {
261
- MathJax.startup.document.elements = [document.getElementById('answerContent')];
262
- await MathJax.typesetPromise();
263
- answerContent.scrollTop = answerContent.scrollHeight;
264
- } else {
265
- setTimeout(typesetAnswerIfReady, 200);
266
- }
267
- };
268
-
269
- // Fonction pour déclencher la mise à jour de l'affichage
270
- const updateDisplay = async () => {
271
- // Mise à jour du contenu via marked
272
- thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
273
- answerContent.innerHTML = marked.parse(answerBuffer);
274
-
275
- // Lancer le rendu MathJax
276
- await typesetAnswerIfReady();
277
- updateTimeout = null;
278
- };
279
-
280
- // Fonction pour planifier la mise à jour (dé-bounce)
281
- const scheduleUpdate = () => {
282
- if (updateTimeout) return;
283
- updateTimeout = setTimeout(updateDisplay, 200);
284
- };
285
-
286
- // Configuration de marked avec support du mode GFM (pour les tableaux) et interprétation des sauts de ligne
287
- marked.setOptions({
288
- gfm: true,
289
- breaks: true
290
- });
291
-
292
- // Soumission du formulaire
293
- form.addEventListener('submit', async e => {
294
- e.preventDefault();
295
- const file = imageInput.files[0];
296
- if (!file) {
297
- alert('Veuillez sélectionner une image.');
298
- return;
299
- }
300
-
301
- // Initialisation de l'affichage et des variables
302
- startTimer();
303
- loader.classList.remove('hidden');
304
- solutionSection.classList.add('hidden');
305
- thoughtsContent.innerHTML = '';
306
- answerContent.innerHTML = '';
307
- thoughtsBuffer = '';
308
- answerBuffer = '';
309
- currentMode = null;
310
- thoughtsBox.classList.add('open');
311
-
312
- const formData = new FormData();
313
- formData.append('image', file);
314
-
315
- try {
316
- // Envoi de la requête au serveur
317
- const response = await fetch('/solve', {
318
- method: 'POST',
319
- body: formData
320
- });
321
-
322
- const reader = response.body.getReader();
323
- const decoder = new TextDecoder();
324
- let buffer = '';
325
-
326
- // Traitement d'un chunk de données
327
- const processChunk = async chunk => {
328
- buffer += decoder.decode(chunk, { stream: true });
329
- const lines = buffer.split('\n\n');
330
- buffer = lines.pop(); // Conserver la dernière ligne incomplète
331
-
332
- for (const line of lines) {
333
- if (!line.startsWith('data:')) continue;
334
- const data = JSON.parse(line.slice(5));
335
-
336
- if (data.mode) {
337
- currentMode = data.mode;
338
- loader.classList.add('hidden');
339
- solutionSection.classList.remove('hidden');
340
- }
341
- if (data.content) {
342
- if (currentMode === 'thinking') {
343
- thoughtsBuffer += data.content;
344
- } else if (currentMode === 'answering') {
345
- answerBuffer += data.content;
346
- }
347
- }
348
- }
349
- // Planifier la mise à jour dé-bouncée
350
- scheduleUpdate();
351
- };
352
-
353
- // Lecture du flux de réponse
354
- while (true) {
355
- const { done, value } = await reader.read();
356
- if (done) {
357
- // Traitement du contenu restant dans le buffer
358
- if (buffer) {
359
- const data = JSON.parse(buffer.slice(5));
360
- if (data.content) {
361
- if (currentMode === 'thinking') {
362
- thoughtsBuffer += data.content;
363
- } else if (currentMode === 'answering') {
364
- answerBuffer += data.content;
365
- }
366
- }
367
- }
368
- scheduleUpdate();
369
- break;
370
- }
371
- await processChunk(value);
372
- }
373
- stopTimer();
374
- } catch (error) {
375
- console.error('Erreur:', error);
376
- alert('Une erreur est survenue.');
377
- loader.classList.add('hidden');
378
- stopTimer();
379
- }
380
- });
381
- });
382
- </script>
383
- </body>
384
- </html>