Hugging Face's logo

Spaces:
Docfile
/
Flasksite
Running

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

Update templates/philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +331 -185
templates/philosophie.html CHANGED
@@ -3,215 +3,292 @@
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
 
@@ -231,16 +308,26 @@
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',
@@ -262,23 +349,26 @@
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
  });
@@ -296,73 +386,129 @@
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>
 
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
  <style>
12
+ :root {
13
+ --primary-color: #6366f1;
14
+ --secondary-color: #4f46e5;
15
+ --accent-color: #818cf8;
16
+ --background-color: #f3f4f6;
17
+ --card-background: #ffffff;
18
+ --text-primary: #1f2937;
19
+ --text-secondary: #4b5563;
20
+ --success-color: #10b981;
21
+ --warning-color: #f59e0b;
22
+ --error-color: #ef4444;
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ font-family: 'Inter', system-ui, sans-serif;
30
+ }
31
+
32
+ body {
33
+ background: var(--background-color);
34
+ color: var(--text-primary);
35
+ line-height: 1.6;
36
+ }
37
+
38
  .container {
39
+ max-width: 1000px;
40
+ margin: 2rem auto;
41
+ padding: 0 1.5rem;
42
+ }
43
+
44
+ .header {
45
+ text-align: center;
46
+ margin-bottom: 2rem;
47
  }
48
+
49
+ .logo {
50
+ font-size: 2.5rem;
51
+ font-weight: 800;
52
+ color: var(--primary-color);
53
+ margin-bottom: 0.5rem;
54
+ }
55
+
56
+ .subtitle {
57
+ color: var(--text-secondary);
58
+ font-size: 1.1rem;
59
+ }
60
+
61
  .card {
62
+ background: var(--card-background);
63
+ border-radius: 1rem;
64
+ box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
65
+ padding: 2rem;
66
+ margin-bottom: 2rem;
67
  }
68
+
69
  .form-group {
70
+ margin-bottom: 1.5rem;
71
  }
72
+
73
+ .form-group label {
74
+ display: block;
75
+ font-weight: 600;
76
+ margin-bottom: 0.5rem;
77
+ color: var(--text-primary);
78
+ }
79
+
80
+ select, textarea {
81
+ width: 100%;
82
+ padding: 0.75rem;
83
+ border: 2px solid #e5e7eb;
84
+ border-radius: 0.5rem;
85
+ font-size: 1rem;
86
+ transition: all 0.3s ease;
87
+ }
88
+
89
+ select:focus, textarea:focus {
90
+ outline: none;
91
+ border-color: var(--primary-color);
92
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
93
+ }
94
+
95
  .btn {
96
+ display: inline-flex;
97
+ align-items: center;
98
+ justify-content: center;
99
+ padding: 0.75rem 1.5rem;
100
+ border-radius: 0.5rem;
101
+ font-weight: 600;
102
+ transition: all 0.3s ease;
103
  cursor: pointer;
104
+ border: none;
105
+ gap: 0.5rem;
106
  }
107
+
108
  .btn-primary {
109
+ background: var(--primary-color);
110
  color: white;
111
  }
112
+
113
+ .btn-primary:hover {
114
+ background: var(--secondary-color);
115
  }
116
+
117
+ .btn-secondary {
118
+ background: var(--text-secondary);
119
  color: white;
120
  }
121
+
122
+ .btn-secondary:hover {
123
+ background: var(--text-primary);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  }
125
+
126
+ .type-badge {
127
+ display: inline-flex;
128
+ align-items: center;
129
+ padding: 0.5rem 1rem;
130
+ background: var(--accent-color);
131
+ color: white;
132
+ border-radius: 9999px;
133
+ font-weight: 600;
134
+ font-size: 0.875rem;
135
+ margin-bottom: 1rem;
136
  }
137
+
138
  .course-meta {
139
  display: flex;
140
  justify-content: space-between;
141
+ align-items: center;
142
+ padding: 1rem;
143
+ background: var(--background-color);
144
+ border-radius: 0.5rem;
145
+ margin: 1rem 0;
 
 
 
 
 
 
 
146
  }
147
 
148
+ .course-meta span {
149
+ display: flex;
150
+ align-items: center;
151
+ gap: 0.5rem;
152
+ color: var(--text-secondary);
153
+ font-size: 0.875rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
154
  }
155
+
156
+ #response {
157
+ background: var(--background-color);
158
+ padding: 1.5rem;
159
+ border-radius: 0.5rem;
160
+ margin-top: 1.5rem;
161
  }
162
+
163
+ #response h1, #response h2, #response h3 {
164
+ color: var(--text-primary);
165
+ margin-bottom: 1rem;
166
+ border-bottom: 2px solid #e5e7eb;
167
+ padding-bottom: 0.5rem;
168
  }
169
+
170
+ .actions {
171
+ display: flex;
172
+ gap: 1rem;
173
+ margin-top: 1.5rem;
174
  }
175
+
176
+ .loading-overlay {
177
+ position: fixed;
178
+ top: 0;
179
+ left: 0;
180
+ right: 0;
181
+ bottom: 0;
182
+ background: rgba(255, 255, 255, 0.9);
183
+ display: flex;
184
+ justify-content: center;
185
+ align-items: center;
186
+ z-index: 1000;
187
  }
188
+
189
+ .loading-spinner {
190
+ width: 50px;
191
+ height: 50px;
192
+ border: 4px solid var(--background-color);
193
+ border-top: 4px solid var(--primary-color);
194
+ border-radius: 50%;
195
+ animation: spin 1s linear infinite;
196
  }
197
+
198
+ @keyframes spin {
199
+ 0% { transform: rotate(0deg); }
200
+ 100% { transform: rotate(360deg); }
201
  }
202
+
203
+ .hidden {
204
+ display: none;
205
  }
206
+
207
+ @media (max-width: 768px) {
208
+ .container {
209
+ padding: 1rem;
210
+ }
211
+
212
+ .card {
213
+ padding: 1.5rem;
214
+ }
215
+
216
+ .course-meta {
217
+ flex-direction: column;
218
+ gap: 0.5rem;
219
+ }
220
  }
221
  </style>
222
  </head>
223
  <body>
224
  <div class="container">
225
+ <div class="header">
226
+ <h1 class="logo">Mariam AI</h1>
227
+ <p class="subtitle">Assistant de dissertation philosophique</p>
228
+ </div>
229
+
230
  <div class="card">
231
+ <div class="type-badge" id="current-type-label">
232
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px; margin-right: 8px;">
233
+ <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
234
+ <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
235
+ </svg>
236
+ Sujet de type 1
237
+ </div>
238
+
239
  <div class="form-group">
240
+ <label for="type-select">Type de dissertation</label>
241
+ <select id="type-select">
242
+ <option value="1">Type 1 - Dissertation classique</option>
243
+ <option value="2">Type 2 - Analyse de texte</option>
244
  </select>
245
  </div>
246
 
 
 
 
247
  <div class="form-group">
248
+ <label for="course-select">Sélectionner un cours</label>
249
+ <select id="course-select">
250
  <option value="">Choisir un cours...</option>
251
  </select>
252
+
253
+ <div class="course-meta hidden">
254
+ <span id="course-author">
255
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
256
+ <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
257
+ </svg>
258
+ <span></span>
259
+ </span>
260
+ <span id="course-date">
261
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
262
+ <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
263
+ </svg>
264
+ <span></span>
265
+ </span>
266
  </div>
267
  </div>
268
 
 
269
  <div class="form-group">
270
+ <label for="question">Sujet de dissertation</label>
271
+ <textarea id="question" rows="4" placeholder="Entrez votre sujet de dissertation ici..."></textarea>
272
  </div>
273
 
274
+ <div class="actions">
275
+ <button id="submit-btn" class="btn btn-primary">
276
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
277
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
278
+ </svg>
279
+ Générer
280
+ </button>
281
 
282
+ <button id="copy-btn" class="btn btn-secondary hidden">
283
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
284
+ <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
285
+ <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
286
+ </svg>
287
+ Copier
288
+ </button>
289
  </div>
290
 
 
291
  <div id="response" class="hidden"></div>
 
 
 
292
  </div>
293
  </div>
294
 
 
308
  position: 'top-end',
309
  showConfirmButton: false,
310
  timer: 3000,
311
+ timerProgressBar: true,
312
+ customClass: {
313
+ popup: 'colored-toast'
314
+ }
315
  });
316
 
317
  // Gestion du changement de type
318
  $('#type-select').change(function() {
319
  const type = $(this).val();
320
+ const typeText = type === "1" ? "Dissertation classique" : "Analyse de texte";
321
+ $('#current-type-label').html(`
322
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px; margin-right: 8px;">
323
+ <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
324
+ <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
325
+ </svg>
326
+ Sujet de type ${type} - ${typeText}
327
+ `);
328
  });
329
 
330
+ // Charger les cours
331
  $.ajax({
332
  url: '/api/philosophy/courses',
333
  method: 'GET',
 
349
  $('#course-select').change(function() {
350
  const courseId = $(this).val();
351
  if (courseId) {
352
+ $.ajax({url: `/api/philosophy/courses/${courseId}`,
 
353
  method: 'GET',
354
  success: function(course) {
355
  $('.course-meta').removeClass('hidden');
356
+ $('#course-author span').text(`Prof. ${course.author}`);
357
+ $('#course-date span').text(`Mis à jour le ${new Date(course.updated_at).toLocaleDateString('fr-FR')}`);
358
 
359
  Toast.fire({
360
  icon: 'success',
361
+ title: 'Cours chargé avec succès',
362
+ background: '#10b981',
363
+ color: '#ffffff'
364
  });
365
  },
366
  error: function() {
367
  Toast.fire({
368
  icon: 'error',
369
+ title: 'Erreur lors du chargement des détails du cours',
370
+ background: '#ef4444',
371
+ color: '#ffffff'
372
  });
373
  }
374
  });
 
386
  Swal.fire({
387
  icon: 'warning',
388
  title: 'Attention',
389
+ text: 'Veuillez saisir un sujet de dissertation.',
390
+ confirmButtonColor: var(--primary-color),
391
+ background: '#ffffff',
392
+ customClass: {
393
+ title: 'swal-title',
394
+ content: 'swal-text'
395
+ }
396
  });
397
  return;
398
  }
399
 
400
+ // Animation de chargement personnalisée
401
  Swal.fire({
402
+ title: 'Génération en cours',
403
+ html: `
404
+ <div class="loading-animation">
405
+ <div class="loading-spinner"></div>
406
+ <p style="margin-top: 1rem; color: var(--text-secondary)">
407
+ L'IA analyse votre sujet...
408
+ </p>
409
+ </div>
410
+ `,
411
  allowOutsideClick: false,
412
+ showConfirmButton: false,
413
+ customClass: {
414
+ popup: 'loading-popup'
415
  }
416
  });
417
 
418
  // Préparation des données
419
  const data = {
420
  question: question,
421
+ type: type,
422
+ model: "mariam-ai-v2" // Version spécifique du modèle
423
  };
424
 
425
+ // Ajout du courseId si sélectionné
426
  const courseId = $('#course-select').val();
427
  if (courseId) {
428
  data.courseId = courseId;
429
  }
430
 
431
  $.ajax({
432
+ url: '/api/philosophy/generate',
433
  method: 'POST',
434
  contentType: 'application/json',
435
  data: JSON.stringify(data),
436
+ success: function(response) {
437
  Swal.close();
438
+
439
+ // Animation de transition
440
+ $('#response').fadeOut(200, function() {
441
+ // Conversion du Markdown en HTML avec syntax highlighting
442
+ const htmlContent = marked.parse(response.content);
443
+ $(this)
444
+ .html(htmlContent)
445
+ .fadeIn(400)
446
+ .removeClass('hidden');
447
+ });
448
+
449
  $('#copy-btn').removeClass('hidden');
450
 
451
  Toast.fire({
452
  icon: 'success',
453
+ title: 'Dissertation générée avec succès',
454
+ background: '#10b981',
455
+ color: '#ffffff'
456
  });
457
+
458
+ // Scroll smooth vers la réponse
459
+ $('html, body').animate({
460
+ scrollTop: $('#response').offset().top - 100
461
+ }, 800);
462
  },
463
  error: function(xhr) {
464
  Swal.fire({
465
  icon: 'error',
466
  title: 'Erreur',
467
+ text: xhr.responseJSON?.message || 'Une erreur est survenue lors de la génération de la dissertation.',
468
+ confirmButtonColor: var(--primary-color),
469
+ background: '#ffffff'
470
  });
471
  }
472
  });
473
  });
474
 
475
+ // Gestion de la copie avec animation
476
  $('#copy-btn').click(function() {
477
  const response = $('#response').text();
478
+ navigator.clipboard.writeText(response)
479
+ .then(function() {
480
+ // Animation du bouton
481
+ const $btn = $('#copy-btn');
482
+ $btn.css('transform', 'scale(0.95)');
483
+ setTimeout(() => $btn.css('transform', 'scale(1)'), 200);
484
+
485
+ Toast.fire({
486
+ icon: 'success',
487
+ title: 'Copié dans le presse-papiers',
488
+ background: '#10b981',
489
+ color: '#ffffff'
490
+ });
491
+ })
492
+ .catch(function() {
493
+ Toast.fire({
494
+ icon: 'error',
495
+ title: 'Erreur lors de la copie',
496
+ background: '#ef4444',
497
+ color: '#ffffff'
498
+ });
499
  });
500
+ });
501
+
502
+ // Gestion des raccourcis clavier
503
+ $(document).keydown(function(e) {
504
+ // Ctrl/Cmd + Enter pour générer
505
+ if ((e.ctrlKey || e.metaKey) && e.keyCode === 13) {
506
+ $('#submit-btn').click();
507
+ }
508
+ // Ctrl/Cmd + C pour copier la réponse si elle existe
509
+ if ((e.ctrlKey || e.metaKey) && e.keyCode === 67 && !$('#response').hasClass('hidden')) {
510
+ $('#copy-btn').click();
511
+ }
512
  });
513
  });
514
  </script>