Hugging Face's logo

Spaces:
Docfile
/
Mariam-pdf
Running

App Files Community
Docfile commited on
Commit
0f81b27
·
verified ·
1 Parent(s): 18b4b14

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +270 -395
templates/index.html CHANGED
@@ -3,23 +3,22 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <!-- Titre mis à jour pour refléter l'IA sous-jacente -->
7
  <title>Mariam AI - Correcteur d'Exercices</title>
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
  <style>
10
  :root {
11
- --primary: #4f46e5; /* Indigo */
12
  --primary-hover: #4338ca;
13
  --primary-light: #eef2ff;
14
- --success: #10b981; /* Emerald */
15
  --success-light: #ecfdf5;
16
- --error: #ef4444; /* Red */
17
  --error-light: #fef2f2;
18
- --text: #1f2937; /* Gray 800 */
19
- --text-light: #6b7280; /* Gray 500 */
20
- --bg-light: #f9fafb; /* Gray 50 */
21
  --card-bg: #ffffff;
22
- --border: #e5e7eb; /* Gray 200 */
23
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
24
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
25
  --radius: 0.5rem;
@@ -32,43 +31,39 @@
32
  }
33
 
34
  body {
35
- font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
36
  line-height: 1.6;
37
  color: var(--text);
38
  background-color: var(--bg-light);
39
  padding: 1.5rem;
40
- font-size: 16px; /* Base font size */
41
  }
42
 
43
  .container {
44
  max-width: 1000px;
45
- margin: 1.5rem auto; /* Added top margin */
46
- padding: 0 1rem; /* Padding on smaller screens */
47
  }
48
 
49
  .header {
50
  text-align: center;
51
- margin-bottom: 2.5rem; /* Increased margin */
52
  }
53
 
54
  h1 {
55
- font-size: 2.25rem; /* Larger */
56
  font-weight: 700;
57
  margin-bottom: 0.5rem;
58
  color: var(--primary);
59
  }
60
 
61
  h2 {
62
- font-size: 1.5rem; /* Larger */
63
  font-weight: 600;
64
- margin-bottom: 1.25rem; /* Increased margin */
65
  color: var(--text);
66
- border-bottom: 1px solid var(--border); /* Subtle separator */
67
- padding-bottom: 0.5rem;
68
  }
69
 
70
  h3 {
71
- font-size: 1.125rem; /* Slightly larger */
72
  font-weight: 600;
73
  margin-bottom: 0.75rem;
74
  color: var(--text);
@@ -77,22 +72,19 @@
77
  .subheader {
78
  color: var(--text-light);
79
  font-size: 1rem;
80
- max-width: 600px; /* Limit width */
81
- margin: 0 auto; /* Center */
82
  }
83
 
84
  .card {
85
  background: var(--card-bg);
86
  border-radius: var(--radius);
87
  box-shadow: var(--shadow);
88
- padding: 1.5rem; /* Standard padding */
89
  margin-bottom: 1.5rem;
90
- border: 1px solid var(--border); /* Subtle border */
91
  }
92
 
93
  .status-checks {
94
  display: grid;
95
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Increased min-width */
96
  gap: 1rem;
97
  }
98
 
@@ -102,27 +94,33 @@
102
  display: flex;
103
  align-items: center;
104
  gap: 0.75rem;
105
- font-size: 0.9rem; /* Slightly smaller text */
106
  }
107
 
108
  .status-success {
109
  background-color: var(--success-light);
110
- border-left: 4px solid var(--success); /* Accent border */
111
  }
112
 
113
  .status-error {
114
  background-color: var(--error-light);
115
- border-left: 4px solid var(--error); /* Accent border */
116
  }
117
 
118
  .status-icon {
119
  font-size: 1.25rem;
120
  }
121
 
122
- .status-success .status-icon { color: var(--success); }
123
- .status-error .status-icon { color: var(--error); }
 
 
 
 
 
124
 
125
- .status-text { flex: 1; }
 
 
126
 
127
  .file-upload {
128
  display: flex;
@@ -133,7 +131,7 @@
133
  .file-input-container {
134
  position: relative;
135
  width: 100%;
136
- min-height: 150px; /* Use min-height */
137
  border: 2px dashed var(--border);
138
  border-radius: var(--radius);
139
  display: flex;
@@ -144,13 +142,12 @@
144
  padding: 1.5rem;
145
  cursor: pointer;
146
  overflow: hidden;
147
- transition: border-color 0.3s ease, background-color 0.3s ease; /* Corrected property name */
148
- text-align: center; /* Ensure text is centered */
149
  }
150
 
151
  .file-input-container:hover, .file-input-container.dragover {
152
  border-color: var(--primary);
153
- background-color: var(--primary-light); /* Corrected property name */
154
  }
155
 
156
  .file-input {
@@ -164,13 +161,12 @@
164
  }
165
 
166
  .upload-icon {
167
- font-size: 2.5rem; /* Larger icon */
168
  color: var(--primary);
169
  }
170
 
171
  .upload-label {
172
  font-weight: 500;
173
- color: var(--text); /* Ensure label color */
174
  }
175
 
176
  .upload-hint {
@@ -179,123 +175,112 @@
179
  }
180
 
181
  .file-preview {
182
- display: none; /* Initially hidden */
183
  position: absolute;
184
  top: 0;
185
  left: 0;
186
  width: 100%;
187
  height: 100%;
188
  z-index: 1;
189
- background: rgba(255, 255, 255, 0.95); /* Slightly more opaque */
190
  align-items: center;
191
  justify-content: center;
192
- padding: 0.5rem; /* Add padding */
193
  }
194
 
195
  .file-preview img {
196
- max-width: 100%; /* Use 100% */
197
- max-height: 100%; /* Use 100% */
198
  object-fit: contain;
199
- border-radius: calc(var(--radius) / 2); /* Slight radius */
200
  }
201
 
202
- .preview-active .file-preview { display: flex; }
 
 
203
 
204
- .file-name-display { /* Renamed for clarity */
205
  display: none;
206
  position: absolute;
207
  bottom: 0;
208
  left: 0;
209
  right: 0;
210
- background: rgba(79, 70, 229, 0.8); /* Primary color background */
211
- color: white;
212
- padding: 0.5rem 1rem;
213
- font-size: 0.8rem;
214
  text-align: center;
215
  word-break: break-all;
216
- z-index: 2; /* Above preview image */
217
- border-bottom-left-radius: var(--radius); /* Match container */
218
- border-bottom-right-radius: var(--radius);
219
  }
220
 
221
- .preview-active .file-name-display { display: block; } /* Corrected class name */
 
 
222
 
223
  .clear-file {
224
  display: none;
225
  position: absolute;
226
- top: 0.75rem; /* Adjusted position */
227
- right: 0.75rem;
228
- background: rgba(255, 255, 255, 0.8);
229
- backdrop-filter: blur(2px); /* Frosted glass effect */
230
- border: 1px solid var(--border);
231
  border-radius: 50%;
232
- width: 28px; /* Larger */
233
- height: 28px;
234
  align-items: center;
235
  justify-content: center;
236
  cursor: pointer;
237
  box-shadow: var(--shadow);
238
- z-index: 3; /* Above name display */
239
- color: var(--text-light);
240
- transition: background-color 0.2s, color 0.2s;
241
- }
242
- .clear-file:hover {
243
- background-color: var(--error);
244
- color: white;
245
  }
246
 
247
- .preview-active .clear-file { display: flex; }
 
 
248
 
249
  .button {
250
  display: inline-flex;
251
  align-items: center;
252
  justify-content: center;
253
- gap: 0.6rem; /* Increased gap */
254
  background-color: var(--primary);
255
  color: white;
256
- padding: 0.8rem 1.75rem; /* Adjusted padding */
257
  border: none;
258
  border-radius: var(--radius);
259
  font-weight: 500;
260
  font-size: 1rem;
261
  cursor: pointer;
262
- transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
263
  width: 100%;
264
- box-shadow: var(--shadow); /* Add shadow */
265
  }
266
 
267
  .button:hover {
268
  background-color: var(--primary-hover);
269
- box-shadow: var(--shadow-md); /* Enhance shadow */
270
  }
271
 
272
  .button:active {
273
  transform: translateY(1px);
274
- box-shadow: none; /* Remove shadow on click */
275
  }
276
 
277
  .button:disabled {
278
  background-color: var(--text-light);
279
  cursor: not-allowed;
280
  opacity: 0.7;
281
- box-shadow: none;
282
  }
283
 
284
- .button-icon { font-size: 1.1rem; } /* Slightly larger */
 
 
285
 
286
  .loading {
287
  display: flex;
288
  flex-direction: column;
289
  align-items: center;
290
  gap: 1rem;
291
- padding: 2.5rem 1.5rem; /* Increased padding */
292
- text-align: center;
293
  }
294
 
295
  .spinner {
296
- width: 48px; /* Larger */
297
- height: 48px;
298
- border: 5px solid rgba(79, 70, 229, 0.2); /* Thicker border */
299
  border-radius: 50%;
300
  border-top-color: var(--primary);
301
  animation: spin 1s linear infinite;
@@ -307,116 +292,92 @@
307
  }
308
 
309
  .message {
310
- padding: 1rem 1.25rem; /* Adjusted padding */
311
  border-radius: var(--radius);
312
  margin-bottom: 1.5rem;
313
  display: flex;
314
- align-items: flex-start; /* Align icon top */
315
  gap: 0.75rem;
316
- font-size: 0.95rem; /* Adjust font size */
317
- border-left-width: 4px;
318
- border-left-style: solid;
319
- }
320
-
321
- .message i {
322
- margin-top: 2px; /* Align icon better with text */
323
- font-size: 1.1rem;
324
  }
325
 
326
  .message-success {
327
  background-color: var(--success-light);
328
- border-left-color: var(--success);
329
- color: var(--success); /* Adjust text color for consistency */
330
  }
331
 
332
  .message-error {
333
  background-color: var(--error-light);
334
- border-left-color: var(--error);
335
- color: #c01d1d; /* Darker red for text */
336
- white-space: pre-wrap; /* Preserve line breaks in errors */
337
  }
338
 
339
  .tab-container {
340
  border: 1px solid var(--border);
341
  border-radius: var(--radius);
342
  overflow: hidden;
343
- box-shadow: var(--shadow); /* Add shadow */
344
- margin-top: 1.5rem; /* Add margin */
345
  }
346
 
347
  .tabs {
348
  display: flex;
349
  background: var(--bg-light);
350
- border-bottom: 1px solid var(--border); /* Separator line */
351
  }
352
 
353
  .tab {
354
- padding: 0.85rem 1.5rem; /* Adjusted padding */
355
  cursor: pointer;
356
- border-bottom: 3px solid transparent; /* Thicker border */
357
- margin-bottom: -1px; /* Overlap border */
358
  font-weight: 500;
359
  color: var(--text-light);
360
  transition: all 0.3s ease;
361
- font-size: 0.95rem;
362
  }
363
- .tab:hover {
364
- background-color: #f3f4f6; /* Light gray hover */
365
- color: var(--text);
366
- }
367
 
368
  .tab.active {
369
  color: var(--primary);
370
  border-bottom-color: var(--primary);
371
- background-color: var(--card-bg); /* Match content background */
372
  }
373
 
374
  .tab-content {
375
  display: none;
376
  padding: 1.5rem;
377
- background-color: var(--card-bg);
378
  }
379
 
380
- .tab-content.active { display: block; }
 
 
381
 
382
  #pdf-viewer {
383
  width: 100%;
384
- height: 650px; /* Increased height */
385
  border: 1px solid var(--border);
386
  border-radius: var(--radius);
387
  }
388
 
389
  .code-area {
390
- background-color: #f8fafc; /* Lighter background */
391
  border: 1px solid var(--border);
392
- border-radius: var(--radius); /* Use consistent radius */
393
- padding: 1rem 1.25rem; /* Adjust padding */
394
- max-height: 500px; /* Increased max-height */
395
  overflow-y: auto;
396
- font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
397
- font-size: 0.875rem;
398
- line-height: 1.6; /* Improved line spacing */
399
- color: #334155; /* Darker code text */
400
  }
401
 
402
  .code-area pre {
403
  margin: 0;
404
  white-space: pre-wrap;
405
  word-wrap: break-word;
406
- }
407
-
408
- .download-container {
409
- text-align: center; /* Center the button */
410
- margin-top: 1.5rem; /* Add space above button */
411
  }
412
 
413
  .download-button {
414
- /* Reuse button styles and adjust */
415
  display: inline-flex;
416
  align-items: center;
417
  justify-content: center;
418
- gap: 0.6rem;
419
- background-color: var(--success); /* Use success color */
420
  color: white;
421
  padding: 0.75rem 1.5rem;
422
  border: none;
@@ -424,37 +385,33 @@
424
  font-weight: 500;
425
  font-size: 1rem;
426
  cursor: pointer;
427
- transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
428
- width: auto; /* Don't force full width */
429
- box-shadow: var(--shadow);
430
- }
431
- .download-button:hover {
432
- background-color: #059669; /* Darker success */
433
- box-shadow: var(--shadow-md);
434
- }
435
- .download-button:active {
436
- transform: translateY(1px);
437
- box-shadow: none;
438
- }
439
- .download-button i {
440
- font-size: 1rem; /* Match icon size */
441
  }
442
 
443
- .hidden { display: none !important; }
 
 
444
 
445
  /* Responsive design */
446
  @media (max-width: 768px) {
447
- body { padding: 1rem; }
448
- .container { margin-top: 1rem; padding: 0 0.5rem; }
449
- h1 { font-size: 1.75rem; }
450
- h2 { font-size: 1.25rem; }
451
- .status-checks { grid-template-columns: 1fr; }
452
- .file-input-container { min-height: 120px; }
453
- .tabs { flex-wrap: wrap; } /* Allow tabs to wrap */
454
- .tab { padding: 0.7rem 1rem; font-size: 0.9rem; flex-grow: 1; text-align: center; } /* Make tabs responsive */
455
- #pdf-viewer { height: 500px; } /* Adjust height */
456
- .code-area { max-height: 400px; }
457
- .button, .download-button { font-size: 0.95rem; padding: 0.7rem 1.25rem; }
 
 
 
 
 
458
  }
459
  </style>
460
  </head>
@@ -462,11 +419,11 @@
462
  <div class="container">
463
  <div class="header">
464
  <h1>Mariam AI</h1>
465
- <p class="subheader">Votre assistante IA pour la correction détaillée d'exercices de Mathématiques, Physique et Chimie.</p>
466
  </div>
467
 
468
  <div class="card">
469
- <h2><i class="fas fa-power-off fa-fw" style="margin-right: 0.5rem; color: var(--primary);"></i>État du système</h2>
470
  <div class="status-checks">
471
  <div id="latex-status" class="status-item">
472
  <span class="status-icon"><i class="fas fa-spinner fa-spin"></i></span>
@@ -480,57 +437,47 @@
480
  </div>
481
 
482
  <div class="card">
483
- <h2><i class="fas fa-upload fa-fw" style="margin-right: 0.5rem; color: var(--primary);"></i>Soumettre un exercice</h2>
484
  <div class="file-upload">
485
  <div id="file-input-container" class="file-input-container">
486
- <input type="file" id="image-input" class="file-input" accept="image/jpeg, image/png, image/gif, image/webp"> <!-- Added webp -->
487
-
488
- <!-- Default content -->
489
- <div class="default-content">
490
- <span class="upload-icon"><i class="fas fa-cloud-upload-alt"></i></span>
491
- <span class="upload-label">Déposez votre image ici ou cliquez pour sélectionner</span>
492
- <span class="upload-hint">Formats: JPG, PNG, GIF, WebP. Taille max: 10Mo</span> <!-- Clarify formats -->
493
- </div>
494
-
495
- <!-- Preview content (managed by JS) -->
496
  <div class="file-preview">
497
- <img id="image-preview" src="" alt="Aperçu de l'exercice">
498
  </div>
499
- <div class="file-name-display" id="file-name-display"></div>
500
- <div class="clear-file" id="clear-file" title="Retirer l'image"><i class="fas fa-times"></i></div>
501
  </div>
502
-
503
  <button id="process-button" class="button" disabled>
504
- <span class="button-icon"><i class="fas fa-wand-magic-sparkles"></i></span> <!-- Updated icon -->
505
  <span>Générer la solution</span>
506
  </button>
507
  </div>
508
  </div>
509
 
510
- <!-- Loading Indicator -->
511
  <div id="loading" class="card loading hidden">
512
  <div class="spinner"></div>
513
- <p style="font-weight: 500; font-size: 1.1rem;">Mariam AI travaille...</p>
514
- <p class="upload-hint">Analyse de l'image et génération de la solution en cours. Cela peut prendre un moment.</p>
515
  </div>
516
 
517
- <!-- Messages Area -->
518
- <div id="messages" class="message hidden"></div> <!-- Will be populated by JS -->
519
 
520
- <!-- Results Area -->
521
  <div id="results" class="card hidden">
522
- <h2><i class="fas fa-lightbulb fa-fw" style="margin-right: 0.5rem; color: var(--primary);"></i>Résultat de l'analyse</h2>
523
-
524
  <div class="tab-container">
525
  <div class="tabs">
526
- <div class="tab active" data-tab="pdf"><i class="fas fa-file-pdf fa-fw"></i> Aperçu PDF</div>
527
- <div class="tab" data-tab="latex"><i class="fas fa-code fa-fw"></i> Code LaTeX</div>
528
- <div class="tab" data-tab="thinking"><i class="fas fa-brain fa-fw"></i> Processus</div> <!-- NEW TAB -->
529
  </div>
530
-
531
- <!-- PDF Tab Content -->
532
  <div id="pdf-tab" class="tab-content active">
533
- <p class="upload-hint" style="margin-bottom: 1rem;">Aperçu de la solution générée au format PDF.</p>
534
  <iframe id="pdf-viewer" title="Aperçu du PDF de la solution"></iframe>
535
  <div class="download-container">
536
  <button id="download-button" class="download-button">
@@ -538,20 +485,16 @@
538
  </button>
539
  </div>
540
  </div>
541
-
542
- <!-- LaTeX Tab Content -->
543
  <div id="latex-tab" class="tab-content">
544
- <p class="upload-hint" style="margin-bottom: 1rem;">Code source LaTeX généré par l'IA.</p>
545
  <div class="code-area">
546
  <pre id="latex-output"></pre>
547
  </div>
548
  </div>
549
-
550
- <!-- Thinking Tab Content -->
551
  <div id="thinking-tab" class="tab-content">
552
- <p class="upload-hint" style="margin-bottom: 1rem;">Étapes de raisonnement suivies par l'IA pour générer la solution.</p>
553
  <div class="code-area">
554
- <pre id="thinking-output"></pre> <!-- NEW PRE -->
555
  </div>
556
  </div>
557
  </div>
@@ -560,13 +503,13 @@
560
 
561
  <script>
562
  document.addEventListener('DOMContentLoaded', () => {
563
- // --- Éléments DOM ---
564
  const latexStatusEl = document.getElementById('latex-status');
565
  const apiStatusEl = document.getElementById('api-status');
566
  const fileInputContainer = document.getElementById('file-input-container');
567
  const imageInput = document.getElementById('image-input');
568
  const imagePreview = document.getElementById('image-preview');
569
- const fileNameDisplay = document.getElementById('file-name-display'); // Updated ID
570
  const clearFile = document.getElementById('clear-file');
571
  const processButton = document.getElementById('process-button');
572
  const loadingEl = document.getElementById('loading');
@@ -575,53 +518,50 @@
575
  const pdfViewer = document.getElementById('pdf-viewer');
576
  const downloadButton = document.getElementById('download-button');
577
  const latexOutputEl = document.getElementById('latex-output');
578
- const thinkingOutputEl = document.getElementById('thinking-output'); // NEW: Thinking output element
579
  const tabs = document.querySelectorAll('.tab');
580
  const tabContents = document.querySelectorAll('.tab-content');
581
- const defaultUploadContent = fileInputContainer.querySelector('.default-content'); // Get default content area
582
 
583
- let currentPdfBase64 = null; // Stockage des données PDF base64
584
- let currentFileName = null; // Store filename for download
585
 
586
  // --- Gestion des onglets ---
587
  tabs.forEach(tab => {
588
  tab.addEventListener('click', () => {
589
- activateTab(tab.dataset.tab); // Use activateTab function
 
 
 
 
 
 
590
  });
591
  });
592
 
593
- function activateTab(tabName) {
594
- tabs.forEach(t => t.classList.remove('active'));
595
- tabContents.forEach(c => c.classList.remove('active'));
596
-
597
- const activeTab = document.querySelector(`.tab[data-tab="${tabName}"]`);
598
- const activeContent = document.getElementById(`${tabName}-tab`);
599
-
600
- if(activeTab) activeTab.classList.add('active');
601
- if(activeContent) activeContent.classList.add('active');
602
- }
603
-
604
  // --- Gestion du chargement des images ---
605
  imageInput.addEventListener('change', handleFileSelect);
606
-
607
  // Gestion du drag and drop
608
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
609
  fileInputContainer.addEventListener(eventName, preventDefaults, false);
610
  });
611
 
612
  ['dragenter', 'dragover'].forEach(eventName => {
613
- fileInputContainer.addEventListener(eventName, () => fileInputContainer.classList.add('dragover'), false);
 
 
614
  });
615
 
616
  ['dragleave', 'drop'].forEach(eventName => {
617
- fileInputContainer.addEventListener(eventName, () => fileInputContainer.classList.remove('dragover'), false);
 
 
618
  });
619
 
620
  fileInputContainer.addEventListener('drop', handleDrop, false);
621
-
622
  // Gestion du bouton de suppression de fichier
623
  clearFile.addEventListener('click', (e) => {
624
- e.stopPropagation(); // Prevent triggering file input click
625
  clearFileInput();
626
  });
627
 
@@ -633,67 +573,38 @@
633
  function handleDrop(e) {
634
  const dt = e.dataTransfer;
635
  const files = dt.files;
636
- handleFiles(files); // Use a common handler
 
 
 
 
637
  }
638
 
639
  function handleFileSelect() {
640
- handleFiles(imageInput.files); // Use a common handler
641
- }
642
-
643
- function handleFiles(files) {
644
- if (files && files[0]) {
645
- const file = files[0];
646
- // Simple size check (e.g., 10MB)
647
- if (file.size > 10 * 1024 * 1024) {
648
- showMessage('Le fichier est trop volumineux (max 10Mo).', true);
649
- clearFileInput();
650
- return;
651
- }
652
- // Check file type (more robustly)
653
- const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
654
- if (!allowedTypes.includes(file.type)) {
655
- showMessage('Format de fichier non supporté. Utilisez JPG, PNG, GIF ou WebP.', true);
656
- clearFileInput();
657
- return;
658
- }
659
-
660
  const reader = new FileReader();
 
661
  reader.onload = function(e) {
662
  imagePreview.src = e.target.result;
663
- fileNameDisplay.textContent = file.name;
664
- currentFileName = file.name.split('.').slice(0, -1).join('.') || 'solution'; // Store base name
665
  fileInputContainer.classList.add('preview-active');
666
- if(defaultUploadContent) defaultUploadContent.style.display = 'none'; // Hide default text
667
  processButton.disabled = false;
668
- hideMessage(); // Clear previous messages
669
- resultsEl.classList.add('hidden'); // Hide previous results
670
  };
671
- reader.onerror = function() {
672
- showMessage("Erreur lors de la lecture du fichier.", true);
673
- clearFileInput();
674
- }
675
  reader.readAsDataURL(file);
676
  } else {
677
  clearFileInput();
678
  }
679
  }
680
 
681
-
682
  function clearFileInput() {
683
- imageInput.value = ''; // Important to clear the input
684
  imagePreview.src = '';
685
- fileNameDisplay.textContent = '';
686
- currentFileName = null;
687
  fileInputContainer.classList.remove('preview-active');
688
- if(defaultUploadContent) defaultUploadContent.style.display = 'flex'; // Show default text
689
  processButton.disabled = true;
690
- resultsEl.classList.add('hidden'); // Hide results on clear
691
- hideMessage(); // Hide any messages
692
- // Reset PDF viewer and outputs
693
- pdfViewer.src = 'about:blank';
694
- latexOutputEl.textContent = '';
695
- thinkingOutputEl.textContent = ''; // Clear thinking output
696
- currentPdfBase64 = null;
697
  }
698
 
699
  // --- Fonctions Utilitaires ---
@@ -702,112 +613,100 @@
702
  processButton.disabled = true;
703
  messagesEl.classList.add('hidden');
704
  resultsEl.classList.add('hidden');
705
- // Clear previous results before loading
706
- pdfViewer.src = 'about:blank';
707
  latexOutputEl.textContent = '';
708
- thinkingOutputEl.textContent = ''; // Clear thinking output too
709
  currentPdfBase64 = null;
710
  }
711
 
712
  function hideLoading() {
713
  loadingEl.classList.add('hidden');
714
- // Re-enable button only if a file is still selected
715
  processButton.disabled = !imageInput.files[0];
716
  }
717
 
718
  function showMessage(message, isError = false) {
719
  messagesEl.innerHTML = `
720
- <i class="fas ${isError ? 'fa-times-circle' : 'fa-check-circle'}"></i>
721
  <div>${message}</div>
722
  `;
723
  messagesEl.className = `message ${isError ? 'message-error' : 'message-success'}`;
724
  messagesEl.classList.remove('hidden');
725
- // Scroll to the message for visibility
726
- messagesEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
727
  }
728
 
729
- function hideMessage() {
730
- messagesEl.classList.add('hidden');
731
- messagesEl.innerHTML = ''; // Clear content
732
- }
733
-
734
-
735
  function displayResults(data) {
736
- resultsEl.classList.remove('hidden');
737
- let defaultTab = 'thinking'; // Default to thinking if nothing else
738
-
739
- // PDF Handling
740
- if (data.pdf_base64) {
741
- try {
742
- // Test if base64 is valid (basic check)
743
- atob(data.pdf_base64);
744
- pdfViewer.src = `data:application/pdf;base64,${data.pdf_base64}`;
745
- currentPdfBase64 = data.pdf_base64;
746
- downloadButton.classList.remove('hidden');
747
- defaultTab = 'pdf'; // Set PDF as default if available
748
- } catch(e) {
749
- console.error("Invalid base64 data for PDF:", e);
750
- showMessage("Erreur: Les données PDF reçues sont invalides.", true);
751
- pdfViewer.src = 'about:blank';
752
- downloadButton.classList.add('hidden');
753
- currentPdfBase64 = null;
754
- }
755
- } else {
756
- pdfViewer.src = 'about:blank'; // Ensure it's blank if no PDF
757
- document.getElementById('pdf-tab').innerHTML = '<p class="upload-hint">Aucun aperçu PDF n\'a pu être généré (vérifiez les onglets LaTeX ou Processus).</p>'; // Inform user
758
- downloadButton.classList.add('hidden');
759
- }
760
 
761
- // LaTeX Handling
762
- latexOutputEl.textContent = data.latex || "Aucun code LaTeX disponible.";
763
- if (data.latex && defaultTab === 'thinking') defaultTab = 'latex'; // Prefer LaTeX over thinking if PDF failed
764
-
765
-
766
- // Thinking Process Handling (NEW)
767
- thinkingOutputEl.textContent = data.thinking || "Aucun processus de réflexion disponible.";
768
- // No need to change defaultTab here, it's the fallback
769
-
770
- // Activate the determined default tab
771
- activateTab(defaultTab);
772
-
773
- // Scroll to results
774
- resultsEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
775
- }
776
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
777
 
778
  // --- Vérifications Initiales ---
779
  async function checkStatus() {
780
- // Check LaTeX
781
  try {
782
  const latexRes = await fetch('/check-latex');
783
- if (!latexRes.ok) throw new Error(`HTTP error! status: ${latexRes.status}`);
784
  const latexData = await latexRes.json();
785
- updateStatus(latexStatusEl, latexData.success, latexData.message);
 
 
 
 
 
786
  } catch (error) {
787
- console.error("LaTeX check failed:", error);
788
- updateStatus(latexStatusEl, false, `Erreur lors de la vérification de LaTeX: ${error.message}`);
 
 
 
789
  }
790
 
791
- // Check API
792
  try {
793
  const apiRes = await fetch('/check-api');
794
- if (!apiRes.ok) throw new Error(`HTTP error! status: ${apiRes.status}`);
795
  const apiData = await apiRes.json();
796
- updateStatus(apiStatusEl, apiData.success, apiData.message);
 
 
 
 
 
797
  } catch (error) {
798
- console.error("API check failed:", error);
799
- updateStatus(apiStatusEl, false, `Erreur lors de la vérification de l'API: ${error.message}`);
 
 
 
800
  }
801
  }
802
 
803
- function updateStatus(element, success, message) {
804
- element.innerHTML = `
805
- <span class="status-icon"><i class="fas ${success ? 'fa-check-circle' : 'fa-times-circle'}"></i></span>
806
- <span class="status-text">${message}</span>
807
- `;
808
- element.className = `status-item ${success ? 'status-success' : 'status-error'}`;
809
- }
810
-
811
  // --- Traitement de l'Image ---
812
  processButton.addEventListener('click', async () => {
813
  const file = imageInput.files[0];
@@ -817,7 +716,6 @@
817
  }
818
 
819
  showLoading();
820
- hideMessage(); // Hide previous messages
821
 
822
  const formData = new FormData();
823
  formData.append('image', file);
@@ -828,91 +726,68 @@
828
  body: formData
829
  });
830
 
831
- // Always hide loading indicator regardless of success/failure
832
- hideLoading();
833
-
834
- if (!response.ok) {
835
- // Try to get error message from JSON response, otherwise use status text
836
- let errorMsg = `Erreur HTTP ${response.status}: ${response.statusText}`;
837
- try {
838
- const errorData = await response.json();
839
- if (errorData && errorData.message) {
840
- errorMsg = `Erreur: ${errorData.message}`;
841
- // Display partial results even on error if available
842
- if (errorData.latex || errorData.thinking) {
843
- displayResults(errorData); // Pass the whole error data
844
- }
845
- }
846
- } catch (e) {
847
- // Ignore if response is not JSON
848
- console.warn("Response was not JSON:", await response.text());
849
- }
850
- showMessage(errorMsg, true);
851
- return; // Stop processing
852
- }
853
-
854
- // If response is OK (2xx)
855
  const data = await response.json();
 
856
 
857
  if (data.success) {
858
  showMessage('Solution générée avec succès !');
859
  displayResults(data);
860
  } else {
861
- // Handle cases where backend reports success:false but returns 200 OK
862
- showMessage(`Erreur : ${data.message || 'Une erreur inconnue est survenue.'}`, true);
863
- // Display partial results if available (e.g., PDF failed but LaTeX is OK)
864
- if (data.latex || data.thinking) {
865
  displayResults(data);
866
  }
867
  }
868
 
869
  } catch (error) {
870
- // Network errors or other unexpected issues
871
  hideLoading();
872
- showMessage(`Erreur de communication : ${error.message || error}. Vérifiez votre connexion ou contactez l'administrateur.`, true);
873
  console.error("Fetch Error:", error);
874
  }
875
  });
876
 
877
- // --- Téléchargement du PDF ---
878
- downloadButton.addEventListener('click', () => { // Removed async as it's not needed here
879
- if (!currentPdfBase64) {
880
- showMessage('Aucune donnée PDF à télécharger.', true);
881
- return;
882
- }
883
-
884
- try {
885
- // Decode base64 string to binary data
886
- const byteCharacters = atob(currentPdfBase64);
887
- const byteNumbers = new Array(byteCharacters.length);
888
- for (let i = 0; i < byteCharacters.length; i++) {
889
- byteNumbers[i] = byteCharacters.charCodeAt(i);
890
- }
891
- const byteArray = new Uint8Array(byteNumbers);
892
- const blob = new Blob([byteArray], {type: 'application/pdf'});
893
-
894
- // Create a temporary link to trigger download
895
- const url = window.URL.createObjectURL(blob);
896
- const a = document.createElement('a');
897
- a.style.display = 'none';
898
- a.href = url;
899
- // Use the stored filename or a default
900
- const downloadFilename = `${currentFileName || 'solution_mariam_ai'}.pdf`;
901
- a.download = downloadFilename;
902
- document.body.appendChild(a);
903
- a.click();
904
-
905
- // Clean up
906
- window.URL.revokeObjectURL(url);
907
- a.remove();
908
- showMessage('Téléchargement démarré.');
909
-
910
- } catch (error) {
911
- showMessage(`Erreur lors de la préparation du téléchargement : ${error}`, true);
912
- console.error("Download Prep Error:", error);
913
- }
914
- });
915
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
916
 
917
  // Exécuter les vérifications au chargement
918
  checkStatus();
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
6
  <title>Mariam AI - Correcteur d'Exercices</title>
7
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
8
  <style>
9
  :root {
10
+ --primary: #4f46e5;
11
  --primary-hover: #4338ca;
12
  --primary-light: #eef2ff;
13
+ --success: #10b981;
14
  --success-light: #ecfdf5;
15
+ --error: #ef4444;
16
  --error-light: #fef2f2;
17
+ --text: #1f2937;
18
+ --text-light: #6b7280;
19
+ --bg-light: #f9fafb;
20
  --card-bg: #ffffff;
21
+ --border: #e5e7eb;
22
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
23
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
24
  --radius: 0.5rem;
 
31
  }
32
 
33
  body {
34
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
35
  line-height: 1.6;
36
  color: var(--text);
37
  background-color: var(--bg-light);
38
  padding: 1.5rem;
 
39
  }
40
 
41
  .container {
42
  max-width: 1000px;
43
+ margin: 0 auto;
 
44
  }
45
 
46
  .header {
47
  text-align: center;
48
+ margin-bottom: 2rem;
49
  }
50
 
51
  h1 {
52
+ font-size: 2rem;
53
  font-weight: 700;
54
  margin-bottom: 0.5rem;
55
  color: var(--primary);
56
  }
57
 
58
  h2 {
59
+ font-size: 1.25rem;
60
  font-weight: 600;
61
+ margin-bottom: 1rem;
62
  color: var(--text);
 
 
63
  }
64
 
65
  h3 {
66
+ font-size: 1rem;
67
  font-weight: 600;
68
  margin-bottom: 0.75rem;
69
  color: var(--text);
 
72
  .subheader {
73
  color: var(--text-light);
74
  font-size: 1rem;
 
 
75
  }
76
 
77
  .card {
78
  background: var(--card-bg);
79
  border-radius: var(--radius);
80
  box-shadow: var(--shadow);
81
+ padding: 1.5rem;
82
  margin-bottom: 1.5rem;
 
83
  }
84
 
85
  .status-checks {
86
  display: grid;
87
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
88
  gap: 1rem;
89
  }
90
 
 
94
  display: flex;
95
  align-items: center;
96
  gap: 0.75rem;
 
97
  }
98
 
99
  .status-success {
100
  background-color: var(--success-light);
101
+ border: 1px solid var(--success);
102
  }
103
 
104
  .status-error {
105
  background-color: var(--error-light);
106
+ border: 1px solid var(--error);
107
  }
108
 
109
  .status-icon {
110
  font-size: 1.25rem;
111
  }
112
 
113
+ .status-success .status-icon {
114
+ color: var(--success);
115
+ }
116
+
117
+ .status-error .status-icon {
118
+ color: var(--error);
119
+ }
120
 
121
+ .status-text {
122
+ flex: 1;
123
+ }
124
 
125
  .file-upload {
126
  display: flex;
 
131
  .file-input-container {
132
  position: relative;
133
  width: 100%;
134
+ height: 150px;
135
  border: 2px dashed var(--border);
136
  border-radius: var(--radius);
137
  display: flex;
 
142
  padding: 1.5rem;
143
  cursor: pointer;
144
  overflow: hidden;
145
+ transition: border-color 0.3s ease, background 0.3s ease;
 
146
  }
147
 
148
  .file-input-container:hover, .file-input-container.dragover {
149
  border-color: var(--primary);
150
+ background: var(--primary-light);
151
  }
152
 
153
  .file-input {
 
161
  }
162
 
163
  .upload-icon {
164
+ font-size: 2rem;
165
  color: var(--primary);
166
  }
167
 
168
  .upload-label {
169
  font-weight: 500;
 
170
  }
171
 
172
  .upload-hint {
 
175
  }
176
 
177
  .file-preview {
178
+ display: none;
179
  position: absolute;
180
  top: 0;
181
  left: 0;
182
  width: 100%;
183
  height: 100%;
184
  z-index: 1;
185
+ background: rgba(255, 255, 255, 0.9);
186
  align-items: center;
187
  justify-content: center;
 
188
  }
189
 
190
  .file-preview img {
191
+ max-width: 90%;
192
+ max-height: 90%;
193
  object-fit: contain;
 
194
  }
195
 
196
+ .preview-active .file-preview {
197
+ display: flex;
198
+ }
199
 
200
+ .file-name {
201
  display: none;
202
  position: absolute;
203
  bottom: 0;
204
  left: 0;
205
  right: 0;
206
+ background: rgba(255, 255, 255, 0.8);
207
+ padding: 0.5rem;
208
+ font-size: 0.875rem;
 
209
  text-align: center;
210
  word-break: break-all;
 
 
 
211
  }
212
 
213
+ .preview-active .file-name {
214
+ display: block;
215
+ }
216
 
217
  .clear-file {
218
  display: none;
219
  position: absolute;
220
+ top: 0.5rem;
221
+ right: 0.5rem;
222
+ background: white;
 
 
223
  border-radius: 50%;
224
+ width: 24px;
225
+ height: 24px;
226
  align-items: center;
227
  justify-content: center;
228
  cursor: pointer;
229
  box-shadow: var(--shadow);
230
+ z-index: 2;
 
 
 
 
 
 
231
  }
232
 
233
+ .preview-active .clear-file {
234
+ display: flex;
235
+ }
236
 
237
  .button {
238
  display: inline-flex;
239
  align-items: center;
240
  justify-content: center;
241
+ gap: 0.5rem;
242
  background-color: var(--primary);
243
  color: white;
244
+ padding: 0.75rem 1.5rem;
245
  border: none;
246
  border-radius: var(--radius);
247
  font-weight: 500;
248
  font-size: 1rem;
249
  cursor: pointer;
250
+ transition: background-color 0.3s, transform 0.2s;
251
  width: 100%;
 
252
  }
253
 
254
  .button:hover {
255
  background-color: var(--primary-hover);
 
256
  }
257
 
258
  .button:active {
259
  transform: translateY(1px);
 
260
  }
261
 
262
  .button:disabled {
263
  background-color: var(--text-light);
264
  cursor: not-allowed;
265
  opacity: 0.7;
 
266
  }
267
 
268
+ .button-icon {
269
+ font-size: 1rem;
270
+ }
271
 
272
  .loading {
273
  display: flex;
274
  flex-direction: column;
275
  align-items: center;
276
  gap: 1rem;
277
+ padding: 2rem;
 
278
  }
279
 
280
  .spinner {
281
+ width: 40px;
282
+ height: 40px;
283
+ border: 4px solid rgba(79, 70, 229, 0.2);
284
  border-radius: 50%;
285
  border-top-color: var(--primary);
286
  animation: spin 1s linear infinite;
 
292
  }
293
 
294
  .message {
295
+ padding: 1rem;
296
  border-radius: var(--radius);
297
  margin-bottom: 1.5rem;
298
  display: flex;
299
+ align-items: center;
300
  gap: 0.75rem;
 
 
 
 
 
 
 
 
301
  }
302
 
303
  .message-success {
304
  background-color: var(--success-light);
305
+ border: 1px solid var(--success);
306
+ color: var(--success);
307
  }
308
 
309
  .message-error {
310
  background-color: var(--error-light);
311
+ border: 1px solid var(--error);
312
+ color: var(--error);
313
+ white-space: pre-wrap;
314
  }
315
 
316
  .tab-container {
317
  border: 1px solid var(--border);
318
  border-radius: var(--radius);
319
  overflow: hidden;
 
 
320
  }
321
 
322
  .tabs {
323
  display: flex;
324
  background: var(--bg-light);
 
325
  }
326
 
327
  .tab {
328
+ padding: 0.75rem 1.25rem;
329
  cursor: pointer;
330
+ border-bottom: 2px solid transparent;
 
331
  font-weight: 500;
332
  color: var(--text-light);
333
  transition: all 0.3s ease;
 
334
  }
 
 
 
 
335
 
336
  .tab.active {
337
  color: var(--primary);
338
  border-bottom-color: var(--primary);
 
339
  }
340
 
341
  .tab-content {
342
  display: none;
343
  padding: 1.5rem;
 
344
  }
345
 
346
+ .tab-content.active {
347
+ display: block;
348
+ }
349
 
350
  #pdf-viewer {
351
  width: 100%;
352
+ height: 600px;
353
  border: 1px solid var(--border);
354
  border-radius: var(--radius);
355
  }
356
 
357
  .code-area {
358
+ background-color: #f8fafc;
359
  border: 1px solid var(--border);
360
+ border-radius: 0.25rem;
361
+ padding: 1rem;
362
+ max-height: 400px;
363
  overflow-y: auto;
 
 
 
 
364
  }
365
 
366
  .code-area pre {
367
  margin: 0;
368
  white-space: pre-wrap;
369
  word-wrap: break-word;
370
+ font-family: Consolas, Monaco, 'Andale Mono', monospace;
371
+ font-size: 0.875rem;
372
+ line-height: 1.5;
 
 
373
  }
374
 
375
  .download-button {
 
376
  display: inline-flex;
377
  align-items: center;
378
  justify-content: center;
379
+ gap: 0.5rem;
380
+ background-color: var(--primary);
381
  color: white;
382
  padding: 0.75rem 1.5rem;
383
  border: none;
 
385
  font-weight: 500;
386
  font-size: 1rem;
387
  cursor: pointer;
388
+ transition: background-color 0.3s, transform 0.2s;
389
+ margin: 1.5rem auto;
390
+ width: auto;
 
 
 
 
 
 
 
 
 
 
 
391
  }
392
 
393
+ .hidden {
394
+ display: none !important;
395
+ }
396
 
397
  /* Responsive design */
398
  @media (max-width: 768px) {
399
+ .status-checks {
400
+ grid-template-columns: 1fr;
401
+ }
402
+
403
+ .file-upload-container {
404
+ height: 120px;
405
+ }
406
+
407
+ .tab {
408
+ padding: 0.5rem 1rem;
409
+ font-size: 0.875rem;
410
+ }
411
+
412
+ #pdf-viewer {
413
+ height: 400px;
414
+ }
415
  }
416
  </style>
417
  </head>
 
419
  <div class="container">
420
  <div class="header">
421
  <h1>Mariam AI</h1>
422
+ <p class="subheader">Correcteur Intelligent d'Exercices Mathématiques/physique/chimie.</p>
423
  </div>
424
 
425
  <div class="card">
426
+ <h2>État du système</h2>
427
  <div class="status-checks">
428
  <div id="latex-status" class="status-item">
429
  <span class="status-icon"><i class="fas fa-spinner fa-spin"></i></span>
 
437
  </div>
438
 
439
  <div class="card">
440
+ <h2>Soumettre un exercice</h2>
441
  <div class="file-upload">
442
  <div id="file-input-container" class="file-input-container">
443
+ <span class="upload-icon"><i class="fas fa-cloud-upload-alt"></i></span>
444
+ <span class="upload-label">Déposez votre image ou cliquez pour sélectionner</span>
445
+ <span class="upload-hint">Formats acceptés: JPG, PNG, GIF</span>
446
+ <input type="file" id="image-input" class="file-input" accept="image/*">
447
+
 
 
 
 
 
448
  <div class="file-preview">
449
+ <img id="image-preview" src="" alt="Aperçu">
450
  </div>
451
+ <div class="file-name" id="file-name"></div>
452
+ <div class="clear-file" id="clear-file"><i class="fas fa-times"></i></div>
453
  </div>
454
+
455
  <button id="process-button" class="button" disabled>
456
+ <span class="button-icon"><i class="fas fa-magic"></i></span>
457
  <span>Générer la solution</span>
458
  </button>
459
  </div>
460
  </div>
461
 
 
462
  <div id="loading" class="card loading hidden">
463
  <div class="spinner"></div>
464
+ <p>Mariam AI analyse l'exercice et génère la solution...</p>
465
+ <p class="upload-hint">Cette opération peut prendre jusqu'à une minute.</p>
466
  </div>
467
 
468
+ <div id="messages" class="message hidden"></div>
 
469
 
 
470
  <div id="results" class="card hidden">
471
+ <h2>Résultat de l'analyse</h2>
472
+
473
  <div class="tab-container">
474
  <div class="tabs">
475
+ <div class="tab active" data-tab="pdf">Aperçu PDF</div>
476
+ <div class="tab" data-tab="latex">Code LaTeX</div>
477
+ <div class="tab" data-tab="thinking">Processus de réflexion</div>
478
  </div>
479
+
 
480
  <div id="pdf-tab" class="tab-content active">
 
481
  <iframe id="pdf-viewer" title="Aperçu du PDF de la solution"></iframe>
482
  <div class="download-container">
483
  <button id="download-button" class="download-button">
 
485
  </button>
486
  </div>
487
  </div>
488
+
 
489
  <div id="latex-tab" class="tab-content">
 
490
  <div class="code-area">
491
  <pre id="latex-output"></pre>
492
  </div>
493
  </div>
494
+
 
495
  <div id="thinking-tab" class="tab-content">
 
496
  <div class="code-area">
497
+ <pre id="thinking-output"></pre>
498
  </div>
499
  </div>
500
  </div>
 
503
 
504
  <script>
505
  document.addEventListener('DOMContentLoaded', () => {
506
+ // Éléments DOM
507
  const latexStatusEl = document.getElementById('latex-status');
508
  const apiStatusEl = document.getElementById('api-status');
509
  const fileInputContainer = document.getElementById('file-input-container');
510
  const imageInput = document.getElementById('image-input');
511
  const imagePreview = document.getElementById('image-preview');
512
+ const fileName = document.getElementById('file-name');
513
  const clearFile = document.getElementById('clear-file');
514
  const processButton = document.getElementById('process-button');
515
  const loadingEl = document.getElementById('loading');
 
518
  const pdfViewer = document.getElementById('pdf-viewer');
519
  const downloadButton = document.getElementById('download-button');
520
  const latexOutputEl = document.getElementById('latex-output');
521
+ const thinkingOutputEl = document.getElementById('thinking-output');
522
  const tabs = document.querySelectorAll('.tab');
523
  const tabContents = document.querySelectorAll('.tab-content');
 
524
 
525
+ let currentPdfBase64 = null; // Stockage des données PDF
 
526
 
527
  // --- Gestion des onglets ---
528
  tabs.forEach(tab => {
529
  tab.addEventListener('click', () => {
530
+ // Désactiver tous les onglets
531
+ tabs.forEach(t => t.classList.remove('active'));
532
+ tabContents.forEach(c => c.classList.remove('active'));
533
+
534
+ // Activer l'onglet sélectionné
535
+ tab.classList.add('active');
536
+ document.getElementById(`${tab.dataset.tab}-tab`).classList.add('active');
537
  });
538
  });
539
 
 
 
 
 
 
 
 
 
 
 
 
540
  // --- Gestion du chargement des images ---
541
  imageInput.addEventListener('change', handleFileSelect);
542
+
543
  // Gestion du drag and drop
544
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
545
  fileInputContainer.addEventListener(eventName, preventDefaults, false);
546
  });
547
 
548
  ['dragenter', 'dragover'].forEach(eventName => {
549
+ fileInputContainer.addEventListener(eventName, () => {
550
+ fileInputContainer.classList.add('dragover');
551
+ }, false);
552
  });
553
 
554
  ['dragleave', 'drop'].forEach(eventName => {
555
+ fileInputContainer.addEventListener(eventName, () => {
556
+ fileInputContainer.classList.remove('dragover');
557
+ }, false);
558
  });
559
 
560
  fileInputContainer.addEventListener('drop', handleDrop, false);
561
+
562
  // Gestion du bouton de suppression de fichier
563
  clearFile.addEventListener('click', (e) => {
564
+ e.stopPropagation();
565
  clearFileInput();
566
  });
567
 
 
573
  function handleDrop(e) {
574
  const dt = e.dataTransfer;
575
  const files = dt.files;
576
+
577
+ if (files && files[0]) {
578
+ imageInput.files = files;
579
+ handleFileSelect();
580
+ }
581
  }
582
 
583
  function handleFileSelect() {
584
+ const file = imageInput.files[0];
585
+
586
+ if (file) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
587
  const reader = new FileReader();
588
+
589
  reader.onload = function(e) {
590
  imagePreview.src = e.target.result;
591
+ fileName.textContent = file.name;
 
592
  fileInputContainer.classList.add('preview-active');
 
593
  processButton.disabled = false;
 
 
594
  };
595
+
 
 
 
596
  reader.readAsDataURL(file);
597
  } else {
598
  clearFileInput();
599
  }
600
  }
601
 
 
602
  function clearFileInput() {
603
+ imageInput.value = '';
604
  imagePreview.src = '';
605
+ fileName.textContent = '';
 
606
  fileInputContainer.classList.remove('preview-active');
 
607
  processButton.disabled = true;
 
 
 
 
 
 
 
608
  }
609
 
610
  // --- Fonctions Utilitaires ---
 
613
  processButton.disabled = true;
614
  messagesEl.classList.add('hidden');
615
  resultsEl.classList.add('hidden');
616
+ pdfViewer.src = 'about:blank'; // Vider l'aperçu PDF
 
617
  latexOutputEl.textContent = '';
618
+ thinkingOutputEl.textContent = '';
619
  currentPdfBase64 = null;
620
  }
621
 
622
  function hideLoading() {
623
  loadingEl.classList.add('hidden');
 
624
  processButton.disabled = !imageInput.files[0];
625
  }
626
 
627
  function showMessage(message, isError = false) {
628
  messagesEl.innerHTML = `
629
+ <i class="fas ${isError ? 'fa-exclamation-circle' : 'fa-check-circle'}"></i>
630
  <div>${message}</div>
631
  `;
632
  messagesEl.className = `message ${isError ? 'message-error' : 'message-success'}`;
633
  messagesEl.classList.remove('hidden');
 
 
634
  }
635
 
 
 
 
 
 
 
636
  function displayResults(data) {
637
+ resultsEl.classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
638
 
639
+ // Gestion du PDF
640
+ if (data.pdf_base64) {
641
+ pdfViewer.src = `data:application/pdf;base64,${data.pdf_base64}`;
642
+ currentPdfBase64 = data.pdf_base64;
643
+ downloadButton.classList.remove('hidden');
644
+ } else {
645
+ pdfViewer.src = 'about:blank';
646
+ downloadButton.classList.add('hidden');
647
+ }
 
 
 
 
 
 
648
 
649
+ // Gestion du LaTeX
650
+ latexOutputEl.textContent = data.latex || "Aucun code LaTeX disponible.";
651
+
652
+ // Gestion du processus de réflexion
653
+ thinkingOutputEl.textContent = data.thinking || "Aucun processus de réflexion disponible.";
654
+
655
+ // Activer l'onglet approprié par défaut
656
+ if (data.pdf_base64) {
657
+ activateTab('pdf');
658
+ } else if (data.latex) {
659
+ activateTab('latex');
660
+ } else if (data.thinking) {
661
+ activateTab('thinking');
662
+ }
663
+ }
664
+
665
+ function activateTab(tabName) {
666
+ tabs.forEach(t => t.classList.remove('active'));
667
+ tabContents.forEach(c => c.classList.remove('active'));
668
+
669
+ document.querySelector(`.tab[data-tab="${tabName}"]`).classList.add('active');
670
+ document.getElementById(`${tabName}-tab`).classList.add('active');
671
+ }
672
 
673
  // --- Vérifications Initiales ---
674
  async function checkStatus() {
 
675
  try {
676
  const latexRes = await fetch('/check-latex');
 
677
  const latexData = await latexRes.json();
678
+
679
+ latexStatusEl.innerHTML = `
680
+ <span class="status-icon"><i class="fas ${latexData.success ? 'fa-check-circle' : 'fa-times-circle'}"></i></span>
681
+ <span class="status-text">${latexData.message}</span>
682
+ `;
683
+ latexStatusEl.className = `status-item ${latexData.success ? 'status-success' : 'status-error'}`;
684
  } catch (error) {
685
+ latexStatusEl.innerHTML = `
686
+ <span class="status-icon"><i class="fas fa-times-circle"></i></span>
687
+ <span class="status-text">Erreur lors de la vérification de LaTeX: ${error}</span>
688
+ `;
689
+ latexStatusEl.className = 'status-item status-error';
690
  }
691
 
 
692
  try {
693
  const apiRes = await fetch('/check-api');
 
694
  const apiData = await apiRes.json();
695
+
696
+ apiStatusEl.innerHTML = `
697
+ <span class="status-icon"><i class="fas ${apiData.success ? 'fa-check-circle' : 'fa-times-circle'}"></i></span>
698
+ <span class="status-text">${apiData.message}</span>
699
+ `;
700
+ apiStatusEl.className = `status-item ${apiData.success ? 'status-success' : 'status-error'}`;
701
  } catch (error) {
702
+ apiStatusEl.innerHTML = `
703
+ <span class="status-icon"><i class="fas fa-times-circle"></i></span>
704
+ <span class="status-text">Erreur lors de la vérification de l'API: ${error}</span>
705
+ `;
706
+ apiStatusEl.className = 'status-item status-error';
707
  }
708
  }
709
 
 
 
 
 
 
 
 
 
710
  // --- Traitement de l'Image ---
711
  processButton.addEventListener('click', async () => {
712
  const file = imageInput.files[0];
 
716
  }
717
 
718
  showLoading();
 
719
 
720
  const formData = new FormData();
721
  formData.append('image', file);
 
726
  body: formData
727
  });
728
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
729
  const data = await response.json();
730
+ hideLoading();
731
 
732
  if (data.success) {
733
  showMessage('Solution générée avec succès !');
734
  displayResults(data);
735
  } else {
736
+ showMessage(`Erreur : ${data.message}`, true);
737
+ // Afficher le LaTeX/Thinking même en cas d'erreur de compilation
738
+ if(data.latex || data.thinking) {
 
739
  displayResults(data);
740
  }
741
  }
742
 
743
  } catch (error) {
 
744
  hideLoading();
745
+ showMessage(`Erreur de communication avec le serveur : ${error}`, true);
746
  console.error("Fetch Error:", error);
747
  }
748
  });
749
 
750
+ // --- Téléchargement du PDF ---
751
+ downloadButton.addEventListener('click', async () => {
752
+ if (!currentPdfBase64) {
753
+ showMessage('Aucune donnée PDF à télécharger.', true);
754
+ return;
755
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
756
 
757
+ try {
758
+ const response = await fetch('/download-pdf', {
759
+ method: 'POST',
760
+ headers: {
761
+ 'Content-Type': 'application/json',
762
+ },
763
+ body: JSON.stringify({ pdf_data: currentPdfBase64 }),
764
+ });
765
+
766
+ if (response.ok) {
767
+ const blob = await response.blob();
768
+ const url = window.URL.createObjectURL(blob);
769
+ const a = document.createElement('a');
770
+ a.style.display = 'none';
771
+ a.href = url;
772
+ a.download = response.headers.get('Content-Disposition')?.split('filename=')[1]?.replaceAll('"', '') || 'solution_mariam_ai.pdf';
773
+ document.body.appendChild(a);
774
+ a.click();
775
+ window.URL.revokeObjectURL(url);
776
+ a.remove();
777
+ showMessage('Téléchargement démarré.');
778
+ } else {
779
+ let errorMsg = `Échec du téléchargement (code ${response.status}).`;
780
+ try {
781
+ const errorData = await response.json();
782
+ if(errorData.message) errorMsg += ` Raison: ${errorData.message}`;
783
+ } catch(e) { /* Ignorer l'erreur si la réponse n'est pas JSON */ }
784
+ showMessage(errorMsg, true);
785
+ }
786
+ } catch (error) {
787
+ showMessage(`Erreur lors de la tentative de téléchargement : ${error}`, true);
788
+ console.error("Download Error:", error);
789
+ }
790
+ });
791
 
792
  // Exécuter les vérifications au chargement
793
  checkStatus();