Hugging Face's logo

Spaces:
Docfile
/
Flasksite
Running

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

Update templates/philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +140 -300
templates/philosophie.html CHANGED
@@ -3,367 +3,207 @@
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,
224
- headerIds: 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',
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mariam AI - Assistant Philosophique</title>
7
+ <!-- Import des bibliothèques nécessaires -->
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script>
10
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/prism.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/components/prism-markdown.min.js"></script>
13
  <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
14
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/themes/prism.min.css" rel="stylesheet">
15
+ <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </head>
17
+ <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
18
+ <!-- Navbar -->
19
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
20
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
21
+ <div class="flex justify-between items-center h-16">
22
+ <div class="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 text-transparent bg-clip-text">
23
+ Mariam AI
24
+ </div>
25
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-violet-100 text-violet-800">
26
+ <span class="w-2 h-2 bg-violet-400 rounded-full animate-pulse mr-2"></span>
27
+ Assistant Philosophique
28
+ </span>
29
  </div>
30
+ </div>
31
+ </nav>
32
+
33
+ <!-- Contenu principal -->
34
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
35
+ <div class="max-w-4xl mx-auto">
36
+ <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
37
+ <!-- En-tête -->
38
+ <div class="bg-gradient-to-r from-violet-600 to-indigo-600 p-6 text-white">
39
+ <h2 class="text-2xl font-bold">Générateur de Dissertation</h2>
40
+ <p class="mt-2 opacity-90">Créez des dissertations philosophiques pertinentes et structurées</p>
41
+ </div>
42
 
43
+ <!-- Section formulaire -->
44
+ <div class="p-8 space-y-8">
45
+ <!-- Sélection du type -->
46
+ <div class="space-y-3">
47
+ <label class="block text-sm font-medium text-gray-700">Type de dissertation</label>
48
+ <select id="type-select" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500">
49
+ <option value="1">Type 1 - Dissertation classique</option>
50
+ <option value="2">Type 2 - Analyse comparative</option>
51
+ </select>
52
+ <div id="current-type-label" class="inline-flex px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-violet-50 to-indigo-50 text-violet-700 border border-violet-200">
53
+ Sujet de type 1
54
+ </div>
55
+ </div>
56
 
57
+ <!-- Sélection du cours -->
58
+ <div class="space-y-3">
59
+ <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
60
+ <select id="course-select" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500">
61
+ <option value="">Choisir un cours...</option>
62
+ </select>
63
+ <div class="course-meta hidden mt-4 p-4 bg-gray-50 rounded-xl border border-gray-200">
64
+ <div class="flex justify-between">
65
+ <span id="course-author" class="text-gray-600"></span>
66
+ <span id="course-date" class="text-gray-600"></span>
67
+ </div>
68
+ </div>
69
  </div>
 
 
70
 
71
+ <!-- Saisie de la question -->
72
+ <div class="space-y-3">
73
+ <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
74
+ <textarea id="question" rows="4" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500" placeholder="Saisissez votre sujet de dissertation..."></textarea>
75
+ </div>
76
 
77
+ <!-- Bouton soumission -->
78
+ <button id="submit-btn" class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-medium shadow-lg">
79
+ Générer la dissertation
80
+ </button>
81
+
82
+ <!-- Résultats -->
83
+ <div id="response" class="hidden mt-8">
84
+ <div class="border-b border-gray-200 mb-6 flex space-x-4">
85
+ <button id="preview-tab" class="text-violet-600 border-b-2 border-violet-600 px-4 py-2">Aperçu</button>
86
+ <button id="markdown-tab" class="text-gray-500 hover:text-violet-600 px-4 py-2">Markdown</button>
87
+ </div>
88
+ <div id="preview-content" class="prose prose-violet max-w-none">
89
+ <!-- Réponse HTML -->
90
+ </div>
91
+ <div id="markdown-content" class="hidden bg-gray-900 text-white p-4 rounded-xl overflow-auto">
92
+ <pre><code class="language-markdown"></code></pre>
93
+ </div>
94
+ </div>
95
 
96
+ <!-- Bouton copie -->
97
+ <button id="copy-btn" class="hidden w-full py-3 px-6 rounded-xl bg-gray-50 text-gray-700 border hover:bg-gray-100">
98
+ Copier la dissertation
99
+ </button>
100
+ </div>
101
  </div>
 
 
 
 
 
 
102
  </div>
103
  </div>
104
 
105
+ <!-- Scripts -->
106
  <script>
107
  $(document).ready(function() {
108
+ // Configuration Toast
 
 
 
 
 
 
 
 
109
  const Toast = Swal.mixin({
110
  toast: true,
111
  position: 'top-end',
112
  showConfirmButton: false,
113
+ timer: 3000
 
114
  });
115
 
116
+ // Changement de type
117
  $('#type-select').change(function() {
118
  const type = $(this).val();
119
+ $('#current-type-label').text(`Type ${type} - ${type == 1 ? 'Dissertation classique' : 'Analyse comparative'}`);
120
  });
121
 
122
+ // Charger les cours
123
  $.ajax({
124
  url: '/api/philosophy/courses',
125
  method: 'GET',
126
  success: function(courses) {
 
127
  courses.forEach(course => {
128
+ $('#course-select').append(`<option value="${course.id}">${course.title}</option>`);
129
  });
130
  },
131
  error: function() {
132
+ Toast.fire({ icon: 'error', title: 'Erreur de chargement des cours' });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
133
  }
134
  });
135
 
136
+ // Soumission
137
  $('#submit-btn').click(function() {
138
  const question = $('#question').val().trim();
 
 
139
  if (!question) {
140
+ $('#question').addClass('border-red-300 animate-shake');
141
+ setTimeout(() => $('#question').removeClass('border-red-300 animate-shake'), 1000);
 
 
 
142
  return;
143
  }
144
 
145
+ Swal.fire({ title: 'Génération en cours...', allowOutsideClick: false, showConfirmButton: false });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
 
147
  $.ajax({
148
  url: '/submit_philo',
149
  method: 'POST',
150
  contentType: 'application/json',
151
+ data: JSON.stringify({ question, type: $('#type-select').val(), courseId: $('#course-select').val() }),
152
  success: function(data) {
153
  Swal.close();
154
+ $('#preview-content').html(marked.parse(data.response));
155
+ $('#markdown-content code').text(data.response);
156
+ Prism.highlightAll();
157
+ $('#response').removeClass('hidden');
158
  $('#copy-btn').removeClass('hidden');
159
+ Toast.fire({ icon: 'success', title: 'Dissertation générée' });
 
 
 
 
160
  },
161
+ error: function() {
162
+ Swal.fire({ icon: 'error', title: 'Erreur', text: 'Une erreur est survenue.' });
 
 
 
 
163
  }
164
  });
165
  });
166
 
167
+ // Gestion des onglets
168
+ $('#preview-tab').click(function() {
169
+ $('#preview-content').show();
170
+ $('#markdown-content').hide();
171
+ $(this).addClass('text-violet-600 border-b-2 border-violet-600').removeClass('text-gray-500');
172
+ $('#markdown-tab').addClass('text-gray-500').removeClass('text-violet-600 border-b-2 border-violet-600');
173
+ });
174
+
175
+ $('#markdown-tab').click(function() {
176
+ $('#preview-content').hide();
177
+ $('#markdown-content').show();
178
+ $(this).addClass('text-violet-600 border-b-2 border-violet-600').removeClass('text-gray-500');
179
+ $('#preview-tab').addClass('text-gray-500').removeClass('text-violet-600 border-b-2 border-violet-600');
180
+ });
181
+
182
+ // Copie du contenu
183
  $('#copy-btn').click(function() {
184
+ const markdownContent = $('#markdown-content code').text();
185
+ navigator.clipboard.writeText(markdownContent)
186
+ .then(() => {
187
+ Toast.fire({ icon: 'success', title: 'Contenu copié dans le presse-papiers' });
188
+ })
189
+ .catch(() => {
190
+ Toast.fire({ icon: 'error', title: 'Erreur lors de la copie' });
 
 
 
191
  });
 
192
  });
193
+
194
+ // Animations personnalisées
195
+ const style = document.createElement('style');
196
+ style.textContent = `
197
+ @keyframes shake {
198
+ 0%, 100% { transform: translateX(0); }
199
+ 25% { transform: translateX(-5px); }
200
+ 50% { transform: translateX(5px); }
201
+ }
202
+ .animate-shake {
203
+ animation: shake 0.5s ease-in-out;
204
+ }
205
+ `;
206
+ document.head.appendChild(style);
207
  });
208
  </script>
209
  </body>