Hugging Face's logo

Spaces:
Docfile
/
Flasksite
Running

App Files Community
2
Docfile commited on
Commit
4ed7392
·
verified ·
1 Parent(s): ea64f11

Update templates/philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +225 -271
templates/philosophie.html CHANGED
@@ -3,283 +3,221 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mariam AI | Dissertation Philosophique</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://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
12
  <style>
13
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
14
-
15
- :root {
16
- --primary-color: #7C3AED;
17
- --primary-dark: #6D28D9;
18
- --secondary-color: #10B981;
19
- --accent-color: #F59E0B;
20
- --background-color: #F3F4F8;
21
- --text-primary: #1F2937;
22
- --text-secondary: #6B7280;
23
  }
24
-
25
- body {
26
- font-family: 'Poppins', sans-serif;
27
- background-color: var(--background-color);
28
- color: var(--text-primary);
29
  }
30
-
31
- .mariam-container {
32
- max-width: 1000px;
33
- margin: 2rem auto;
34
- padding: 0 1rem;
35
  }
36
-
37
- .mariam-header {
38
- display: flex;
39
- align-items: center;
40
- gap: 1rem;
41
- margin-bottom: 2rem;
42
- padding: 1rem;
43
- background: white;
44
- border-radius: 1rem;
45
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
46
  }
47
-
48
- .mariam-logo {
49
- font-size: 1.5rem;
50
- font-weight: 700;
51
- color: var(--primary-color);
52
- display: flex;
53
- align-items: center;
54
- gap: 0.5rem;
55
  }
56
-
57
- .mariam-card {
58
- background: white;
59
- border-radius: 1rem;
60
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
61
- padding: 2rem;
62
- border-top: 4px solid var(--primary-color);
63
  }
64
-
65
- .mariam-input {
66
- width: 100%;
67
- padding: 0.75rem;
68
- border: 2px solid #E5E7EB;
69
- border-radius: 0.5rem;
70
- transition: all 0.3s;
71
- font-size: 1rem;
72
  }
73
-
74
- .mariam-input:focus {
75
- outline: none;
76
- border-color: var(--primary-color);
77
- box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
78
  }
79
-
80
- .mariam-select {
81
  width: 100%;
82
- padding: 0.75rem;
83
- border: 2px solid #E5E7EB;
84
- border-radius: 0.5rem;
85
- background-color: white;
86
- transition: all 0.3s;
87
  }
88
-
89
- .mariam-select:focus {
90
- outline: none;
91
- border-color: var(--primary-color);
92
- box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
93
  }
94
-
95
- .mariam-btn {
96
- padding: 0.75rem 1.5rem;
97
- border-radius: 0.5rem;
98
- font-weight: 600;
99
- transition: all 0.3s;
100
- cursor: pointer;
101
- display: inline-flex;
102
- align-items: center;
103
- gap: 0.5rem;
104
  }
105
-
106
- .mariam-btn-primary {
107
- background-color: var(--primary-color);
108
- color: white;
 
 
109
  }
110
-
111
- .mariam-btn-primary:hover {
112
- background-color: var(--primary-dark);
 
113
  }
114
-
115
- .mariam-btn-secondary {
116
- background-color: white;
117
- color: var(--primary-color);
118
- border: 2px solid var(--primary-color);
 
 
119
  }
120
-
121
- .mariam-btn-secondary:hover {
122
- background-color: var(--primary-color);
123
  color: white;
124
- }
125
-
126
- .mariam-badge {
127
  display: inline-block;
128
- padding: 0.25rem 0.75rem;
129
- background-color: var(--primary-color);
130
- color: white;
131
- border-radius: 9999px;
132
- font-size: 0.875rem;
133
- font-weight: 500;
134
- margin-bottom: 1.5rem;
135
  }
136
 
137
- .mariam-meta {
138
- background-color: #F9FAFB;
139
- border-radius: 0.5rem;
140
- padding: 1rem;
141
- margin-top: 0.5rem;
142
- display: flex;
143
- justify-content: space-between;
144
- align-items: center;
145
- font-size: 0.875rem;
146
- color: var(--text-secondary);
147
- border-left: 4px solid var(--secondary-color);
148
  }
149
-
150
- .mariam-response {
151
- margin-top: 2rem;
152
- padding: 1.5rem;
153
- background-color: #F9FAFB;
154
- border-radius: 0.5rem;
155
- line-height: 1.75;
156
- border-left: 4px solid var(--primary-color);
157
  }
158
-
159
- .mariam-form-group {
160
- margin-bottom: 1.5rem;
161
  }
162
-
163
- .mariam-label {
164
- display: block;
165
- font-weight: 500;
166
- margin-bottom: 0.5rem;
167
- color: var(--text-primary);
168
  }
169
-
170
- .mariam-loading {
171
- border: 3px solid #f3f3f3;
172
- border-radius: 50%;
173
- border-top: 3px solid var(--primary-color);
174
- width: 24px;
175
- height: 24px;
176
- animation: mariam-spin 1s linear infinite;
177
- margin: 0 auto;
178
  }
179
-
180
- @keyframes mariam-spin {
181
- 0% { transform: rotate(0deg); }
182
- 100% { transform: rotate(360deg); }
183
  }
184
-
185
- .mariam-button-group {
186
- display: flex;
187
- gap: 1rem;
188
- margin-top: 1.5rem;
189
  }
190
-
191
- /* Style des alertes SweetAlert2 personnalisé */
192
- .swal2-popup {
193
- font-family: 'Poppins', sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  }
195
  </style>
196
  </head>
197
  <body>
198
- <div class="mariam-container">
199
- <header class="mariam-header">
200
- <div class="mariam-logo">
201
- <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
202
- <circle cx="12" cy="12" r="10"/>
203
- <path d="M12 16v-4"/>
204
- <path d="M12 8h.01"/>
205
- </svg>
206
- Mariam AI
207
- </div>
208
- <span class="text-sm text-gray-500">Module de Philosophie</span>
209
- </header>
210
-
211
- <div class="mariam-card">
212
- <h1 class="text-2xl font-bold mb-6">Assistant de Dissertation</h1>
213
 
214
- <div class="mariam-form-group">
215
- <label class="mariam-label" for="type-select">Type de dissertation</label>
216
- <select id="type-select" class="mariam-select">
217
- <option value="1">Dissertation type 1</option>
218
- <option value="2">Dissertation type 2</option>
 
219
  </select>
220
  </div>
221
 
222
- <div class="mariam-badge" id="current-type-label">Dissertation type 1</div>
223
 
224
- <div class="mariam-form-group">
225
- <label class="mariam-label" for="course-select">Cours de référence</label>
226
- <select id="course-select" class="mariam-select">
227
- <option value="">Sélectionner un cours...</option>
 
228
  </select>
229
- <div class="mariam-meta hidden" id="course-info">
230
- <span id="course-author" class="flex items-center gap-2">
231
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
232
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
233
- </svg>
234
- <span></span>
235
- </span>
236
- <span id="course-date" class="flex items-center gap-2">
237
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
238
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
239
- </svg>
240
- <span></span>
241
- </span>
242
  </div>
243
  </div>
244
 
245
- <div class="mariam-form-group">
246
- <label class="mariam-label" for="question">Sujet de dissertation</label>
247
- <textarea
248
- id="question"
249
- rows="4"
250
- class="mariam-input"
251
- placeholder="Saisissez votre sujet de dissertation ici..."
252
- ></textarea>
253
  </div>
254
 
255
- <button id="submit-btn" class="mariam-btn mariam-btn-primary">
256
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
257
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
258
- </svg>
259
- Générer avec Mariam AI
260
- </button>
261
-
262
- <div id="response" class="mariam-response hidden"></div>
263
 
264
- <div class="mariam-button-group hidden" id="action-buttons">
265
- <button id="copy-btn" class="mariam-btn mariam-btn-secondary">
266
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
267
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
268
- </svg>
269
- Copier
270
- </button>
271
- <button id="new-btn" class="mariam-btn mariam-btn-secondary">
272
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
273
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
274
- </svg>
275
- Nouvelle dissertation
276
- </button>
277
  </div>
 
 
 
 
 
 
278
  </div>
279
  </div>
280
 
281
  <script>
282
  $(document).ready(function() {
 
283
  marked.setOptions({
284
  breaks: true,
285
  gfm: true,
@@ -287,23 +225,22 @@
287
  langPrefix: 'language-'
288
  });
289
 
 
290
  const Toast = Swal.mixin({
291
  toast: true,
292
  position: 'top-end',
293
  showConfirmButton: false,
294
  timer: 3000,
295
- timerProgressBar: true,
296
- didOpen: (toast) => {
297
- toast.addEventListener('mouseenter', Swal.stopTimer)
298
- toast.addEventListener('mouseleave', Swal.resumeTimer)
299
- }
300
  });
301
 
 
302
  $('#type-select').change(function() {
303
  const type = $(this).val();
304
- $('#current-type-label').text(`Dissertation type ${type}`);
305
  });
306
 
 
307
  $.ajax({
308
  url: '/api/philosophy/courses',
309
  method: 'GET',
@@ -316,11 +253,12 @@
316
  error: function() {
317
  Toast.fire({
318
  icon: 'error',
319
- title: 'Erreur de chargement des cours'
320
  });
321
  }
322
  });
323
 
 
324
  $('#course-select').change(function() {
325
  const courseId = $(this).val();
326
  if (courseId) {
@@ -328,22 +266,28 @@
328
  url: `/api/philosophy/courses/${courseId}`,
329
  method: 'GET',
330
  success: function(course) {
331
- $('#course-info').removeClass('hidden');
332
- $('#course-author span').text(`Prof. ${course.author}`);
333
- $('#course-date span').text(`Mis à jour le ${new Date(course.updated_at).toLocaleDateString()}`);
 
 
 
 
 
334
  },
335
  error: function() {
336
  Toast.fire({
337
  icon: 'error',
338
- title: 'Erreur de chargement des détails du cours'
339
  });
340
  }
341
  });
342
  } else {
343
- $('#course-info').addClass('hidden');
344
  }
345
  });
346
 
 
347
  $('#submit-btn').click(function() {
348
  const question = $('#question').val().trim();
349
  const type = $('#type-select').val();
@@ -351,65 +295,75 @@
351
  if (!question) {
352
  Swal.fire({
353
  icon: 'warning',
354
- title: 'Champ requis',
355
- text: 'Veuillez saisir un sujet de dissertation.' });
 
356
  return;
357
  }
358
 
359
- $(this).html('<div class="mariam-loading"></div>').prop('disabled', true);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
360
 
361
  $.ajax({
362
- url: '/api/philosophy/dissertation',
363
  method: 'POST',
364
  contentType: 'application/json',
365
- data: JSON.stringify({ question: question, type: type, course_id: $('#course-select').val() }),
366
- success: function(response) {
367
- $('#submit-btn').html(`
368
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
369
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
370
- </svg>
371
- Générer avec Mariam AI`).prop('disabled', false);
372
- $('#response').html(marked.parse(response.answer)).removeClass('hidden');
373
- $('#action-buttons').removeClass('hidden');
 
 
 
374
  },
375
- error: function() {
376
- $('#submit-btn').html(`
377
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
378
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
379
- </svg>
380
- Générer avec Mariam AI`).prop('disabled', false);
381
  Swal.fire({
382
  icon: 'error',
383
  title: 'Erreur',
384
- text: 'Une erreur est survenue lors de la génération de la dissertation.'
385
  });
386
  }
387
  });
388
  });
389
 
 
390
  $('#copy-btn').click(function() {
391
- const textToCopy = $('#response').text();
392
- navigator.clipboard.writeText(textToCopy).then(function() {
393
  Toast.fire({
394
  icon: 'success',
395
- title: 'Copié dans le presse-papiers!'
396
  });
397
- }, function() {
398
- Swal.fire({
399
  icon: 'error',
400
- title: 'Erreur',
401
- text: 'Impossible de copier le texte.'
402
  });
403
  });
404
  });
405
-
406
- $('#new-btn').click(function() {
407
- $('#question').val('');
408
- $('#response').html('').addClass('hidden');
409
- $('#action-buttons').addClass('hidden');
410
- $('#course-info').addClass('hidden');
411
- $('#course-select').val('');
412
- });
413
  });
414
  </script>
415
  </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>
187
  </select>
188
+ <div class="course-info">
189
+ <div class="course-meta hidden">
190
+ <span id="course-author"></span>
191
+ <span id="course-date"></span>
192
+ </div>
 
 
 
 
 
 
 
 
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',
232
  showConfirmButton: false,
233
  timer: 3000,
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',
 
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) {
 
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();
 
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>