Hugging Face's logo

Spaces:
Docfile
/
Flasksite1
Sleeping

App Files Community
Docfile commited on
Commit
0818a0a
·
verified ·
1 Parent(s): 533067f

Upload philosophie.html

Browse files
Files changed (1) hide show
  1. templates/philosophie.html +88 -111
templates/philosophie.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
2
  <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
@@ -110,6 +110,7 @@
110
  font-size: 0.875em;
111
  }
112
 
 
113
  .active, .collapsible:hover {
114
  background-color: #ddd;
115
  }
@@ -185,6 +186,7 @@
185
  padding: 0.5rem 0.75rem;
186
  }
187
 
 
188
  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
189
  background-color: #ede9fe;
190
  color:#374151;
@@ -241,16 +243,14 @@
241
 
242
  <!-- Content Section -->
243
  <div class="p-8 space-y-8">
244
- <form id="philo-form" method="POST" action="/submit_philo" enctype="multipart/form-data">
245
  <!-- Type Selection -->
246
  <div class="space-y-3">
247
  <label class="block text-sm font-medium text-gray-700">Type de dissertation</label>
248
  <div class="relative">
249
- <select id="type-select" name="type" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 appearance-none bg-white py-3 px-4 pr-10">
250
  <option value="1">Type 1</option>
251
  <option value="2">Type 2</option>
252
  <option value="3">Synthèse</option>
253
- <option value="4">Image</option>
254
  </select>
255
  <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
256
  <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -264,9 +264,9 @@
264
  </div>
265
 
266
  <!-- Course Selection -->
267
- <div id="course-selection" class="space-y-3">
268
  <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
269
- <select id="course-select" name="courseId" class="w-full">
270
  <option value="">Choisir un cours...</option>
271
  </select>
272
  <div class="course-meta hidden">
@@ -289,21 +289,12 @@
289
  </div>
290
  </div>
291
 
292
- <!-- Image Upload -->
293
- <div id="image-upload" class="space-y-3 hidden">
294
- <label class="block text-sm font-medium text-gray-700">Télécharger des images</label>
295
- <input type="file" name="file" id="file-input" multiple accept=".jpg,.jpeg,.png" class="hidden">
296
- <label for="file-input" class="cursor-pointer bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
297
- <span>Choisir des fichiers</span>
298
- </label>
299
- <div id="selected-files" class="mt-2 text-sm text-gray-500"></div>
300
- </div>
301
 
302
  <!-- Question Input -->
303
- <div id="question-input" class="space-y-3 hidden">
304
  <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
305
  <div class="relative">
306
- <textarea id="question" name="question" rows="4"
307
  class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 resize-none bg-white py-3 px-4"
308
  placeholder="Saisissez votre sujet de dissertation..."></textarea>
309
  <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
@@ -315,7 +306,7 @@
315
  </div>
316
 
317
  <!-- Submit Button -->
318
- <button id="submit-btn" type="submit" 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 shadow-violet-200 hover:shadow-xl hover:shadow-violet-300 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2">
319
  <span class="flex items-center justify-center space-x-2">
320
  <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
321
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
@@ -323,7 +314,6 @@
323
  <span>Générer la dissertation</span>
324
  </span>
325
  </button>
326
- </form>
327
 
328
  <!-- Response Section -->
329
  <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
@@ -420,103 +410,13 @@
420
  let labelText;
421
  if(type === '3') {
422
  labelText = 'S - Synthèse';
423
- } else if (type === '4') {
424
- $('#image-upload').removeClass('hidden');
425
- $('#question-input').addClass('hidden');
426
- $('#course-selection').addClass('hidden');
427
- labelText = 'Image';
428
- } else {
429
- $('#image-upload').addClass('hidden');
430
- $('#question-input').removeClass('hidden');
431
- $('#course-selection').removeClass('hidden');
432
  labelText = `Type ${type} - ${typeLabel}`;
433
  }
434
  $('#current-type-label').text(labelText);
435
 
436
  });
437
 
438
- $('#file-input').change(function() {
439
- const files = this.files;
440
- const fileNames = Array.from(files).map(file => file.name).join(', ');
441
- $('#selected-files').text(fileNames);
442
- });
443
-
444
- // Gestion de la soumission avec conversion en Markdown et sauvegarde
445
- $('#philo-form').on('submit', function(e) {
446
- e.preventDefault();
447
-
448
- const question = $('#question').val().trim();
449
- const type = $('#type-select').val();
450
-
451
- if (!question && type !== '4') {
452
- // Gestion de l'erreur si la question est vide (inchangée)
453
- return;
454
- }
455
-
456
- // Animation de chargement sophistiquée
457
- Swal.fire({
458
- title: 'Génération en cours',
459
- html: `
460
- <div class="space-y-4">
461
- <div class="flex justify-center">
462
- <div class="w-16 h-16 relative">
463
- <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
464
- <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
465
- </div>
466
- </div>
467
- <div class="text-gray-600">
468
- <p class="animate-pulse">Analyse philosophique en cours...</p>
469
- <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
470
- </div>
471
- </div>
472
- `,
473
- allowOutsideClick: false,
474
- showConfirmButton: false,
475
- customClass: {
476
- popup: 'rounded-2xl'
477
- }
478
- });
479
-
480
- const formData = new FormData(this);
481
-
482
- $.ajax({
483
- url: '/submit_philo',
484
- method: 'POST',
485
- data: formData,
486
- processData: false,
487
- contentType: false,
488
- success: function(data) {
489
- Swal.close();
490
-
491
- const htmlContent = marked.parse(data.response);
492
- // Afficher la dissertation
493
- $('#response > div').html(htmlContent);
494
- $('#response').removeClass('hidden').addClass('animate-fadeIn');
495
- $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
496
-
497
- // Sauvegarder la dissertation
498
- saveDissertation(question, data.response);
499
-
500
- Toast.fire({
501
- icon: 'success',
502
- title: 'Dissertation générée et sauvegardée avec succès',
503
- timer: 2000
504
- });
505
- },
506
- error: function() {
507
- Swal.fire({
508
- icon: 'error',
509
- title: 'Erreur de génération',
510
- text: 'Une erreur est survenue lors de la génération de votre dissertation.',
511
- customClass: {
512
- popup: 'rounded-2xl',
513
- confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
514
- }
515
- });
516
- }
517
- });
518
- });
519
-
520
  // Chargement des cours avec animation
521
  function loadCourses() {
522
  return $.ajax({
@@ -594,6 +494,83 @@
594
 
595
  });
596
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
597
  function saveDissertation(title, content) {
598
  let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
599
  savedDissertations.push({ title, content, timestamp: Date.now() });
@@ -720,7 +697,7 @@
720
  textarea.value = textToCopy;
721
  textarea.style.position = 'fixed'; // Évite le défilement
722
  textarea.style.opacity = '0';
723
- document.body.appendChild(textarea);
724
 
725
  // Sélectionner et copier le texte
726
  textarea.select();
 
1
+ <!DOCTYPE html>
2
  <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
 
110
  font-size: 0.875em;
111
  }
112
 
113
+
114
  .active, .collapsible:hover {
115
  background-color: #ddd;
116
  }
 
186
  padding: 0.5rem 0.75rem;
187
  }
188
 
189
+
190
  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
191
  background-color: #ede9fe;
192
  color:#374151;
 
243
 
244
  <!-- Content Section -->
245
  <div class="p-8 space-y-8">
 
246
  <!-- Type Selection -->
247
  <div class="space-y-3">
248
  <label class="block text-sm font-medium text-gray-700">Type de dissertation</label>
249
  <div class="relative">
250
+ <select id="type-select" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 appearance-none bg-white py-3 px-4 pr-10">
251
  <option value="1">Type 1</option>
252
  <option value="2">Type 2</option>
253
  <option value="3">Synthèse</option>
 
254
  </select>
255
  <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
256
  <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
 
264
  </div>
265
 
266
  <!-- Course Selection -->
267
+ <div class="space-y-3">
268
  <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
269
+ <select id="course-select" class="w-full">
270
  <option value="">Choisir un cours...</option>
271
  </select>
272
  <div class="course-meta hidden">
 
289
  </div>
290
  </div>
291
 
 
 
 
 
 
 
 
 
 
292
 
293
  <!-- Question Input -->
294
+ <div class="space-y-3">
295
  <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
296
  <div class="relative">
297
+ <textarea id="question" rows="4"
298
  class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500 resize-none bg-white py-3 px-4"
299
  placeholder="Saisissez votre sujet de dissertation..."></textarea>
300
  <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
 
306
  </div>
307
 
308
  <!-- Submit Button -->
309
+ <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 shadow-violet-200 hover:shadow-xl hover:shadow-violet-300 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2">
310
  <span class="flex items-center justify-center space-x-2">
311
  <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
312
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
 
314
  <span>Générer la dissertation</span>
315
  </span>
316
  </button>
 
317
 
318
  <!-- Response Section -->
319
  <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
 
410
  let labelText;
411
  if(type === '3') {
412
  labelText = 'S - Synthèse';
413
+ } else {
 
 
 
 
 
 
 
 
414
  labelText = `Type ${type} - ${typeLabel}`;
415
  }
416
  $('#current-type-label').text(labelText);
417
 
418
  });
419
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
420
  // Chargement des cours avec animation
421
  function loadCourses() {
422
  return $.ajax({
 
494
 
495
  });
496
 
497
+ // Gestion de la soumission avec conversion en Markdown et sauvegarde
498
+ $('#submit-btn').click(function() {
499
+ const question = $('#question').val().trim();
500
+
501
+ if (!question) {
502
+ // Gestion de l'erreur si la question est vide (inchangée)
503
+ return;
504
+ }
505
+
506
+ // Animation de chargement sophistiquée
507
+ Swal.fire({
508
+ title: 'Génération en cours',
509
+ html: `
510
+ <div class="space-y-4">
511
+ <div class="flex justify-center">
512
+ <div class="w-16 h-16 relative">
513
+ <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
514
+ <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
515
+ </div>
516
+ </div>
517
+ <div class="text-gray-600">
518
+ <p class="animate-pulse">Analyse philosophique en cours...</p>
519
+ <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
520
+ </div>
521
+ </div>
522
+ `,
523
+ allowOutsideClick: false,
524
+ showConfirmButton: false,
525
+ customClass: {
526
+ popup: 'rounded-2xl'
527
+ }
528
+ });
529
+
530
+ const data = {
531
+ question: question,
532
+ type: $('#type-select').val(),
533
+ courseId: $('#course-select').val() || null
534
+ };
535
+
536
+ $.ajax({
537
+ url: '/submit_philo',
538
+ method: 'POST',
539
+ contentType: 'application/json',
540
+ data: JSON.stringify(data),
541
+ success: function(data) {
542
+ Swal.close();
543
+
544
+ const htmlContent = marked.parse(data.response);
545
+ // Afficher la dissertation
546
+ $('#response > div').html(htmlContent);
547
+ $('#response').removeClass('hidden').addClass('animate-fadeIn');
548
+ $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
549
+
550
+ // Sauvegarder la dissertation
551
+ saveDissertation(question, data.response);
552
+
553
+ Toast.fire({
554
+ icon: 'success',
555
+ title: 'Dissertation générée et sauvegardée avec succès',
556
+ timer: 2000
557
+ });
558
+ },
559
+ error: function() {
560
+ Swal.fire({
561
+ icon: 'error',
562
+ title: 'Erreur de génération',
563
+ text: 'Une erreur est survenue lors de la génération de votre dissertation.',
564
+ customClass: {
565
+ popup: 'rounded-2xl',
566
+ confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
567
+ }
568
+ });
569
+ }
570
+ });
571
+ });
572
+
573
+
574
  function saveDissertation(title, content) {
575
  let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
576
  savedDissertations.push({ title, content, timestamp: Date.now() });
 
697
  textarea.value = textToCopy;
698
  textarea.style.position = 'fixed'; // Évite le défilement
699
  textarea.style.opacity = '0';
700
+ document.body.appendChild(textarea);
701
 
702
  // Sélectionner et copier le texte
703
  textarea.select();