Hugging Face's logo

Spaces:
Docfile
/
Flasksite
Running

App Files Community
2
Docfile commited on
Commit
b20c6fd
·
verified ·
1 Parent(s): a40f508

Update templates/philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +229 -308
templates/philosophie.html CHANGED
@@ -3,233 +3,184 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mariam AI - Philosophie</title>
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script>
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
10
  <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
11
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
  <style>
13
- :root {
14
- --primary-color: #6366f1;
15
- --secondary-color: #4f46e5;
16
- --background-color: #f9fafb;
17
- --text-color: #1f2937;
18
- --border-radius: 12px;
19
- }
20
-
21
- * {
22
- margin: 0;
23
- padding: 0;
24
- box-sizing: border-box;
25
- font-family: 'Poppins', sans-serif;
26
- }
27
-
28
- body {
29
- background-color: var(--background-color);
30
- color: var(--text-color);
31
- line-height: 1.6;
32
- min-height: 100vh;
33
- }
34
-
35
  .container {
36
- max-width: 900px;
37
- margin: 2rem auto;
38
- padding: 0 20px;
39
  }
40
-
41
  .card {
42
  background: white;
43
- border-radius: var(--border-radius);
44
- box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
45
- padding: 2rem;
46
- transition: transform 0.3s ease;
47
- }
48
-
49
- .card:hover {
50
- transform: translateY(-5px);
51
- }
52
-
53
- h1 {
54
- font-size: 2.5rem;
55
- color: var(--primary-color);
56
- margin-bottom: 1.5rem;
57
- text-align: center;
58
- text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
59
  }
60
-
61
  .form-group {
62
- margin-bottom: 1.5rem;
63
- position: relative;
64
- }
65
-
66
- label {
67
- display: block;
68
- margin-bottom: 0.5rem;
69
- font-weight: 500;
70
- color: var(--text-color);
71
  }
72
-
73
- select, textarea {
74
- width: 100%;
75
- padding: 0.75rem;
76
- border: 2px solid #e5e7eb;
77
- border-radius: var(--border-radius);
78
- font-size: 1rem;
79
- transition: all 0.3s ease;
80
- background-color: white;
81
- }
82
-
83
- select:focus, textarea:focus {
84
- outline: none;
85
- border-color: var(--primary-color);
86
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
87
- }
88
-
89
  .btn {
90
- padding: 0.75rem 1.5rem;
91
  border: none;
92
- border-radius: var(--border-radius);
93
  cursor: pointer;
94
- font-weight: 600;
95
- font-size: 1rem;
96
- transition: all 0.3s ease;
97
- text-transform: uppercase;
98
- letter-spacing: 0.5px;
99
  }
100
-
101
- .btn-success {
102
- background-color: var(--primary-color);
103
  color: white;
104
- box-shadow: 0 4px 6px rgba(99, 102, 241, 0.25);
105
  }
106
-
107
- .btn-success:hover {
108
- background-color: var(--secondary-color);
109
- transform: translateY(-2px);
110
- }
111
-
112
  .btn-secondary {
113
- background-color: #9ca3af;
114
  color: white;
115
- box-shadow: 0 4px 6px rgba(156, 163, 175, 0.25);
116
- }
117
-
118
- .btn-secondary:hover {
119
- background-color: #6b7280;
120
- transform: translateY(-2px);
121
  }
122
-
123
- .type-label {
124
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
125
  color: white;
126
- padding: 0.5rem 1rem;
127
- border-radius: var(--border-radius);
128
- margin-bottom: 1.5rem;
129
- display: inline-block;
130
- font-weight: 500;
131
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
132
  }
133
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  .course-meta {
135
- background: #f3f4f6;
136
- padding: 1rem;
137
- border-radius: var(--border-radius);
138
- margin: 1rem 0;
139
  display: flex;
140
  justify-content: space-between;
141
- box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
 
 
 
142
  }
143
-
144
- #response {
145
- margin-top: 1.5rem;
146
- padding: 1.5rem;
147
- background: #f8fafc;
148
- border-radius: var(--border-radius);
149
- border: 2px solid #e5e7eb;
150
- animation: fadeIn 0.5s ease;
151
  }
152
 
153
- .image-preview-container {
154
- margin-top: 1rem;
155
- text-align: center;
 
 
 
156
  }
157
-
158
- .image-preview {
159
- max-width: 100%;
160
- max-height: 300px;
161
- border-radius: var(--border-radius);
162
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
163
- display: none;
164
- object-fit: contain;
165
  }
166
-
167
- .upload-zone {
168
- border: 2px dashed #e5e7eb;
169
- border-radius: var(--border-radius);
170
- padding: 2rem;
171
- text-align: center;
172
- cursor: pointer;
173
- transition: all 0.3s ease;
174
  }
175
-
176
- .upload-zone:hover {
177
- border-color: var(--primary-color);
178
- background-color: rgba(99, 102, 241, 0.05);
179
  }
180
-
181
- .upload-zone.dragover {
182
- border-color: var(--primary-color);
183
- background-color: rgba(99, 102, 241, 0.1);
184
  }
185
-
186
- .hidden {
187
- display: none !important;
188
  }
189
-
190
- @keyframes fadeIn {
191
- from { opacity: 0; transform: translateY(10px); }
192
- to { opacity: 1; transform: translateY(0); }
 
193
  }
194
-
195
- /* Responsive Design */
196
- @media (max-width: 768px) {
197
- .container {
198
- padding: 1rem;
199
- }
200
-
201
- h1 {
202
- font-size: 2rem;
203
- }
204
-
205
- .card {
206
- padding: 1.5rem;
207
- }
208
-
209
- .btn {
210
- width: 100%;
211
- margin-bottom: 0.5rem;
212
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  }
214
  </style>
215
  </head>
216
  <body>
217
  <div class="container">
218
  <div class="card">
219
- <h1>Mariam AI - Philosophie</h1>
220
 
 
221
  <div class="form-group">
222
  <label for="type-select">Type de dissertation :</label>
223
  <select id="type-select" class="form-control">
224
- <option value="1">Type 1</option>
225
- <option value="2">Type 2</option>
226
- <option value="3">Type 3 (Image uniquement)</option>
227
  </select>
228
  </div>
229
 
230
  <div class="type-label" id="current-type-label">Sujet de type 1</div>
231
 
232
- <div class="form-group course-selection">
 
233
  <label for="course-select">Sélectionner un cours :</label>
234
  <select id="course-select" class="form-control">
235
  <option value="">Choisir un cours...</option>
@@ -242,41 +193,31 @@
242
  </div>
243
  </div>
244
 
245
- <div class="form-group" id="question-group">
246
- <label for="question">Entrez le sujet :</label>
 
247
  <textarea id="question" rows="4" class="form-control"></textarea>
248
  </div>
249
 
250
- <div class="form-group hidden" id="image-group">
251
- <label>Image :</label>
252
- <div class="upload-zone" id="upload-zone">
253
- <p>Glissez votre image ici ou cliquez pour sélectionner</p>
254
- <input type="file" id="image-upload" accept="image/*" class="hidden">
255
- </div>
256
- <div class="image-preview-container">
257
- <img id="image-preview" class="image-preview">
258
- </div>
259
  </div>
260
 
261
- <button id="submit-btn" class="btn btn-success">Soumettre</button>
262
  <div id="response" class="hidden"></div>
 
 
263
  <button id="copy-btn" class="btn btn-secondary hidden">Copier la réponse</button>
264
  </div>
265
  </div>
266
 
267
  <script>
268
  $(document).ready(function() {
269
- const courses = {
270
- '1': [
271
- { id: 1, title: 'La conscience', author: 'Prof. Martin', date: '2024-01-15' },
272
- { id: 2, title: 'La liberté', author: 'Prof. Dubois', date: '2024-01-20' }
273
- ],
274
- '2': [
275
- { id: 3, title: 'La justice', author: 'Prof. Bernard', date: '2024-01-25' },
276
- { id: 4, title: 'Le bonheur', author: 'Prof. Thomas', date: '2024-01-30' }
277
- ]
278
- };
279
-
280
  marked.setOptions({
281
  breaks: true,
282
  gfm: true,
@@ -284,6 +225,7 @@
284
  langPrefix: 'language-'
285
  });
286
 
 
287
  const Toast = Swal.mixin({
288
  toast: true,
289
  position: 'top-end',
@@ -292,157 +234,136 @@
292
  timerProgressBar: true
293
  });
294
 
295
- // Image upload handling
296
- const uploadZone = document.getElementById('upload-zone');
297
- const imageUpload = document.getElementById('image-upload');
298
- const imagePreview = document.getElementById('image-preview');
299
-
300
- uploadZone.addEventListener('click', () => imageUpload.click());
301
-
302
- uploadZone.addEventListener('dragover', (e) => {
303
- e.preventDefault();
304
- uploadZone.classList.add('dragover');
305
- });
306
-
307
- uploadZone.addEventListener('dragleave', () => {
308
- uploadZone.classList.remove('dragover');
309
- });
310
-
311
- uploadZone.addEventListener('drop', (e) => {
312
- e.preventDefault();
313
- uploadZone.classList.remove('dragover');
314
- const file = e.dataTransfer.files[0];
315
- if (file && file.type.startsWith('image/')) {
316
- handleImageUpload(file);
317
- }
318
- });
319
-
320
- imageUpload.addEventListener('change', (e) => {
321
- const file = e.target.files[0];
322
- if (file) {
323
- handleImageUpload(file);
324
- }
325
- });
326
-
327
- function handleImageUpload(file) {
328
- const reader = new FileReader();
329
- reader.onload = (e) => {
330
- imagePreview.src = e.target.result;
331
- imagePreview.style.display = 'block';
332
- };
333
- reader.readAsDataURL(file);
334
- }
335
-
336
- // Type selection handling
337
  $('#type-select').change(function() {
338
  const type = $(this).val();
339
  $('#current-type-label').text(`Sujet de type ${type}`);
340
- updateCourseSelect(type);
341
-
342
- if(type === "3") {
343
- $('#question-group').addClass('hidden');
344
- $('#image-group').removeClass('hidden');
345
- $('.course-selection').addClass('hidden');
346
- } else {
347
- $('#question-group').removeClass('hidden');
348
- $('#image-group').addClass('hidden');
349
- $('.course-selection').removeClass('hidden');
350
- }
351
  });
352
 
353
- function updateCourseSelect(type) {
354
- const $courseSelect = $('#course-select');
355
- $courseSelect.empty();
356
- $courseSelect.append('<option value="">Choisir un cours...</option>');
357
-
358
- if (courses[type]) {
359
- courses[type].forEach(course => {
360
- $courseSelect.append(`<option value="${course.id}">${course.title}</option>`);
 
 
 
 
 
 
361
  });
362
  }
363
- }
364
 
365
- // Course selection handling
366
  $('#course-select').change(function() {
367
  const courseId = $(this).val();
368
- const type = $('#type-select').val();
369
-
370
- if (courseId && courses[type]) {
371
- const course = courses[type].find(c => c.id === parseInt(courseId));
372
- if (course) {
373
- $('#course-author').text(`Auteur: ${course.author}`);
374
- $('#course-date').text(`Date: ${course.date}`);
375
- $('.course-meta').removeClass('hidden');
376
- }
 
 
 
 
 
 
 
 
 
 
 
 
377
  } else {
378
  $('.course-meta').addClass('hidden');
379
  }
380
  });
381
 
382
- // Submit handling
383
  $('#submit-btn').click(function() {
 
384
  const type = $('#type-select').val();
385
- const question = $('#question').val();
386
- const courseId = $('#course-select').val();
387
-
388
- if (type === "3" && !imagePreview.src) {
389
- Toast.fire({
390
- icon: 'error',
391
- title: 'Veuillez sélectionner une image'
392
- });
393
- return;
394
- }
395
 
396
- if ((type !== "3" && !question) || (type !== "3" && !courseId)) {
397
- Toast.fire({
398
- icon: 'error',
399
- title: 'Veuillez remplir tous les champs'
 
400
  });
401
  return;
402
  }
403
 
404
- // Simulate API call
405
  Swal.fire({
406
- title: 'Traitement en cours...',
 
407
  allowOutsideClick: false,
408
  didOpen: () => {
409
  Swal.showLoading();
410
  }
411
  });
412
 
413
- setTimeout(() => {
414
- const response = "## Réponse générée\n\nVoici une réponse générée par l'IA pour votre question. Elle contient du texte formaté en Markdown.\n\n### Points clés\n\n1. Premier point important\n2. Deuxième point important\n3. Troisième point important\n\n> Citation importante à retenir\n\n### Conclusion\n\nCeci est la conclusion de la réponse.";
415
-
416
- $('#response').html(marked.parse(response)).removeClass('hidden');
417
- $('#copy-btn').removeClass('hidden');
418
-
419
- Swal.fire({
420
- icon: 'success',
421
- title: 'Réponse générée avec succès',
422
- showConfirmButton: false,
423
- timer: 1500
424
- });
425
- }, 2000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
426
  });
427
 
428
- // Copy response handling
429
  $('#copy-btn').click(function() {
430
  const response = $('#response').text();
431
- navigator.clipboard.writeText(response).then(() => {
432
  Toast.fire({
433
  icon: 'success',
434
- title: 'Réponse copiée'
435
  });
436
- }).catch(() => {
437
  Toast.fire({
438
  icon: 'error',
439
  title: 'Erreur lors de la copie'
440
  });
441
  });
442
  });
443
-
444
- // Initial course list update
445
- updateCourseSelect('1');
446
  });
447
  </script>
448
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Philosophie</title>
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script>
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
10
  <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
 
11
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  .container {
13
+ max-width: 800px;
14
+ margin: 0 auto;
15
+ padding: 20px;
16
  }
 
17
  .card {
18
  background: white;
19
+ border-radius: 8px;
20
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
21
+ padding: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
 
23
  .form-group {
24
+ margin-bottom: 20px;
 
 
 
 
 
 
 
 
25
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  .btn {
27
+ padding: 10px 20px;
28
  border: none;
29
+ border-radius: 4px;
30
  cursor: pointer;
31
+ margin-right: 10px;
32
+ font-weight: bold;
 
 
 
33
  }
34
+ .btn-primary {
35
+ background-color: #4A90E2;
 
36
  color: white;
 
37
  }
 
 
 
 
 
 
38
  .btn-secondary {
39
+ background-color: #6c757d;
40
  color: white;
 
 
 
 
 
 
41
  }
42
+ .btn-success {
43
+ background-color: #28a745;
 
44
  color: white;
 
 
 
 
 
 
45
  }
46
+ .select-wrapper {
47
+ margin-bottom: 20px;
48
+ }
49
+ select, textarea {
50
+ width: 100%;
51
+ padding: 8px;
52
+ border: 1px solid #ddd;
53
+ border-radius: 4px;
54
+ margin-top: 5px;
55
+ }
56
+ .hidden {
57
+ display: none;
58
+ }
59
+ #loader {
60
+ text-align: center;
61
+ padding: 20px;
62
+ }
63
+ #response {
64
+ margin-top: 20px;
65
+ padding: 15px;
66
+ background: #f8f9fa;
67
+ border-radius: 4px;
68
+ line-height: 1.6;
69
+ }
70
+ .course-info {
71
+ margin-top: 10px;
72
+ font-size: 0.9em;
73
+ color: #666;
74
+ }
75
  .course-meta {
 
 
 
 
76
  display: flex;
77
  justify-content: space-between;
78
+ margin-bottom: 10px;
79
+ padding: 5px;
80
+ background: #f8f9fa;
81
+ border-radius: 4px;
82
  }
83
+ .type-label {
84
+ background: #4A90E2;
85
+ color: white;
86
+ padding: 5px 10px;
87
+ border-radius: 4px;
88
+ margin-bottom: 15px;
89
+ display: inline-block;
 
90
  }
91
 
92
+ /* Styles Markdown */
93
+ #response h1 {
94
+ font-size: 2em;
95
+ margin-bottom: 0.5em;
96
+ border-bottom: 2px solid #eee;
97
+ padding-bottom: 0.3em;
98
  }
99
+ #response h2 {
100
+ font-size: 1.5em;
101
+ margin-bottom: 0.5em;
102
+ border-bottom: 1px solid #eee;
103
+ padding-bottom: 0.3em;
 
 
 
104
  }
105
+ #response h3 {
106
+ font-size: 1.3em;
107
+ margin-bottom: 0.5em;
 
 
 
 
 
108
  }
109
+ #response p {
110
+ margin-bottom: 1em;
 
 
111
  }
112
+ #response ul, #response ol {
113
+ margin-bottom: 1em;
114
+ padding-left: 2em;
 
115
  }
116
+ #response li {
117
+ margin-bottom: 0.5em;
 
118
  }
119
+ #response blockquote {
120
+ border-left: 4px solid #ddd;
121
+ padding-left: 1em;
122
+ margin-left: 0;
123
+ color: #666;
124
  }
125
+ #response code {
126
+ background-color: #f5f5f5;
127
+ padding: 0.2em 0.4em;
128
+ border-radius: 3px;
129
+ font-family: monospace;
130
+ }
131
+ #response pre {
132
+ background-color: #f5f5f5;
133
+ padding: 1em;
134
+ border-radius: 4px;
135
+ overflow-x: auto;
136
+ margin-bottom: 1em;
137
+ }
138
+ #response pre code {
139
+ background-color: transparent;
140
+ padding: 0;
141
+ }
142
+ #response table {
143
+ border-collapse: collapse;
144
+ width: 100%;
145
+ margin-bottom: 1em;
146
+ }
147
+ #response th, #response td {
148
+ border: 1px solid #ddd;
149
+ padding: 8px;
150
+ text-align: left;
151
+ }
152
+ #response th {
153
+ background-color: #f5f5f5;
154
+ }
155
+ #response img {
156
+ max-width: 100%;
157
+ height: auto;
158
+ }
159
+ #response hr {
160
+ border: none;
161
+ border-top: 1px solid #ddd;
162
+ margin: 1em 0;
163
  }
164
  </style>
165
  </head>
166
  <body>
167
  <div class="container">
168
  <div class="card">
169
+ <h1 class="text-3xl font-bold text-gray-800">Philosophie</h1>
170
 
171
+ <!-- Sélection du type de dissertation -->
172
  <div class="form-group">
173
  <label for="type-select">Type de dissertation :</label>
174
  <select id="type-select" class="form-control">
175
+ <option value="1">Type 1 </option>
176
+ <option value="2">Type 2 </option>
 
177
  </select>
178
  </div>
179
 
180
  <div class="type-label" id="current-type-label">Sujet de type 1</div>
181
 
182
+ <!-- Sélection du cours -->
183
+ <div class="form-group">
184
  <label for="course-select">Sélectionner un cours :</label>
185
  <select id="course-select" class="form-control">
186
  <option value="">Choisir un cours...</option>
 
193
  </div>
194
  </div>
195
 
196
+ <!-- Zone de texte pour la question -->
197
+ <div class="form-group">
198
+ <label for="question">Entrez juste le sujet :</label>
199
  <textarea id="question" rows="4" class="form-control"></textarea>
200
  </div>
201
 
202
+ <!-- Bouton de soumission -->
203
+ <button id="submit-btn" class="btn btn-success">Soumettre</button>
204
+
205
+ <!-- Loader -->
206
+ <div id="loader" class="hidden">
207
+ Chargement en cours...
 
 
 
208
  </div>
209
 
210
+ <!-- Zone de réponse -->
211
  <div id="response" class="hidden"></div>
212
+
213
+ <!-- Bouton de copie -->
214
  <button id="copy-btn" class="btn btn-secondary hidden">Copier la réponse</button>
215
  </div>
216
  </div>
217
 
218
  <script>
219
  $(document).ready(function() {
220
+ // Configuration de marked
 
 
 
 
 
 
 
 
 
 
221
  marked.setOptions({
222
  breaks: true,
223
  gfm: true,
 
225
  langPrefix: 'language-'
226
  });
227
 
228
+ // Configuration des toasts SweetAlert2
229
  const Toast = Swal.mixin({
230
  toast: true,
231
  position: 'top-end',
 
234
  timerProgressBar: true
235
  });
236
 
237
+ // Gestion du changement de type
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
238
  $('#type-select').change(function() {
239
  const type = $(this).val();
240
  $('#current-type-label').text(`Sujet de type ${type}`);
 
 
 
 
 
 
 
 
 
 
 
241
  });
242
 
243
+ // Charger les cours depuis la base de données
244
+ $.ajax({
245
+ url: '/api/philosophy/courses',
246
+ method: 'GET',
247
+ success: function(courses) {
248
+ const select = $('#course-select');
249
+ courses.forEach(course => {
250
+ select.append(`<option value="${course.id}">${course.title}</option>`);
251
+ });
252
+ },
253
+ error: function() {
254
+ Toast.fire({
255
+ icon: 'error',
256
+ title: 'Erreur lors du chargement des cours'
257
  });
258
  }
259
+ });
260
 
261
+ // Gestion du changement de cours
262
  $('#course-select').change(function() {
263
  const courseId = $(this).val();
264
+ if (courseId) {
265
+ $.ajax({
266
+ url: `/api/philosophy/courses/${courseId}`,
267
+ method: 'GET',
268
+ success: function(course) {
269
+ $('.course-meta').removeClass('hidden');
270
+ $('#course-author').text(`Professeur: ${course.author}`);
271
+ $('#course-date').text(`Mis à jour: ${new Date(course.updated_at).toLocaleDateString()}`);
272
+
273
+ Toast.fire({
274
+ icon: 'success',
275
+ title: 'Cours chargé avec succès'
276
+ });
277
+ },
278
+ error: function() {
279
+ Toast.fire({
280
+ icon: 'error',
281
+ title: 'Erreur lors du chargement des détails du cours'
282
+ });
283
+ }
284
+ });
285
  } else {
286
  $('.course-meta').addClass('hidden');
287
  }
288
  });
289
 
290
+ // Gestion de la soumission
291
  $('#submit-btn').click(function() {
292
+ const question = $('#question').val().trim();
293
  const type = $('#type-select').val();
 
 
 
 
 
 
 
 
 
 
294
 
295
+ if (!question) {
296
+ Swal.fire({
297
+ icon: 'warning',
298
+ title: 'Attention',
299
+ text: 'Veuillez saisir une question.'
300
  });
301
  return;
302
  }
303
 
 
304
  Swal.fire({
305
+ title: 'Generation en cours',
306
+ html: 'Veuillez patienter...',
307
  allowOutsideClick: false,
308
  didOpen: () => {
309
  Swal.showLoading();
310
  }
311
  });
312
 
313
+ // Préparation des données
314
+ const data = {
315
+ question: question,
316
+ type: type
317
+ };
318
+
319
+ // Ajout du courseId seulement s'il est sélectionné
320
+ const courseId = $('#course-select').val();
321
+ if (courseId) {
322
+ data.courseId = courseId;
323
+ }
324
+
325
+ $.ajax({
326
+ url: '/submit_philo',
327
+ method: 'POST',
328
+ contentType: 'application/json',
329
+ data: JSON.stringify(data),
330
+ success: function(data) {
331
+ Swal.close();
332
+ // Conversion du Markdown en HTML
333
+ const htmlContent = marked.parse(data.response);
334
+ $('#response').html(htmlContent).removeClass('hidden');
335
+ $('#copy-btn').removeClass('hidden');
336
+
337
+ Toast.fire({
338
+ icon: 'success',
339
+ title: 'Réponse générée avec succès'
340
+ });
341
+ },
342
+ error: function(xhr) {
343
+ Swal.fire({
344
+ icon: 'error',
345
+ title: 'Erreur',
346
+ text: 'Une erreur est survenue lors de la génération de la réponse.'
347
+ });
348
+ }
349
+ });
350
  });
351
 
352
+ // Gestion de la copie de la réponse
353
  $('#copy-btn').click(function() {
354
  const response = $('#response').text();
355
+ navigator.clipboard.writeText(response).then(function() {
356
  Toast.fire({
357
  icon: 'success',
358
+ title: 'Réponse copiée avec succès'
359
  });
360
+ }).catch(function() {
361
  Toast.fire({
362
  icon: 'error',
363
  title: 'Erreur lors de la copie'
364
  });
365
  });
366
  });
 
 
 
367
  });
368
  </script>
369
  </body>