Spaces:

Docfile
/

Flasksite

Running

App Files Files Community

Docfile commited on Nov 24, 2024

Commit

7b917ee

verified ·

1 Parent(s): c870f81

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +210 -130

templates/philosophie.html CHANGED Viewed

@@ -4,14 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam AI - Assistant Philosophique</title>
-    <!-- Import des bibliothèques nécessaires -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/prism.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/components/prism-markdown.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/themes/prism.min.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
@@ -19,192 +15,276 @@
     <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between items-center h-16">
-                <div class="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 text-transparent bg-clip-text">
-                    Mariam AI
                 </div>
-                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-violet-100 text-violet-800">
-                    <span class="w-2 h-2 bg-violet-400 rounded-full animate-pulse mr-2"></span>
-                    Assistant Philosophique
-                </span>
             </div>
         </div>
     </nav>
-    <!-- Contenu principal -->
     <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
         <div class="max-w-4xl mx-auto">
             <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
-                <!-- En-tête -->
                 <div class="bg-gradient-to-r from-violet-600 to-indigo-600 p-6 text-white">
                     <h2 class="text-2xl font-bold">Générateur de Dissertation</h2>
                     <p class="mt-2 opacity-90">Créez des dissertations philosophiques pertinentes et structurées</p>
                 </div>
-                <!-- Section formulaire -->
                 <div class="p-8 space-y-8">
-                    <!-- Sélection du type -->
                     <div class="space-y-3">
                         <label class="block text-sm font-medium text-gray-700">Type de dissertation</label>
-                        <select id="type-select" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500">
-                            <option value="1">Type 1 - Dissertation classique</option>
-                            <option value="2">Type 2 - Analyse comparative</option>
-                        </select>
                         <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">
                             Sujet de type 1
                         </div>
                     </div>
-                    <!-- Sélection du cours -->
                     <div class="space-y-3">
                         <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
-                        <select id="course-select" class="w-full rounded-xl border-gray-200 shadow-sm focus:border-violet-500 focus:ring-violet-500">
-                            <option value="">Choisir un cours...</option>
-                        </select>
-                        <div class="course-meta hidden mt-4 p-4 bg-gray-50 rounded-xl border border-gray-200">
-                            <div class="flex justify-between">
-                                <span id="course-author" class="text-gray-600"></span>
-                                <span id="course-date" class="text-gray-600"></span>
                             </div>
                         </div>
                     </div>
-                    <!-- Saisie de la question -->
                     <div class="space-y-3">
                         <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
-                        <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>
                     </div>
-                    <!-- Bouton soumission -->
-                    <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">
-                        Générer la dissertation
                     </button>
-                    <!-- Résultats -->
-                    <div id="response" class="hidden mt-8">
-                        <div class="border-b border-gray-200 mb-6 flex space-x-4">
-                            <button id="preview-tab" class="text-violet-600 border-b-2 border-violet-600 px-4 py-2">Aperçu</button>
-                            <button id="markdown-tab" class="text-gray-500 hover:text-violet-600 px-4 py-2">Markdown</button>
-                        </div>
-                        <div id="preview-content" class="prose prose-violet max-w-none">
-                            <!-- Réponse HTML -->
-                        </div>
-                        <div id="markdown-content" class="hidden bg-gray-900 text-white p-4 rounded-xl overflow-auto">
-                            <pre><code class="language-markdown"></code></pre>
                         </div>
                     </div>
-                    <!-- Bouton copie -->
-                    <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">
-                        Copier la dissertation
                     </button>
                 </div>
             </div>
         </div>
     </div>
-    <!-- Scripts -->
     <script>
-        $(document).ready(function() {
-            // Configuration Toast
-            const Toast = Swal.mixin({
-                toast: true,
-                position: 'top-end',
-                showConfirmButton: false,
-                timer: 3000
-            });
-            // Changement de type
-            $('#type-select').change(function() {
-                const type = $(this).val();
-                $('#current-type-label').text(`Type ${type} - ${type == 1 ? 'Dissertation classique' : 'Analyse comparative'}`);
-            });
-            // Charger les cours
             $.ajax({
-                url: '/api/philosophy/courses',
                 method: 'GET',
-                success: function(courses) {
-                    courses.forEach(course => {
-                        $('#course-select').append(`<option value="${course.id}">${course.title}</option>`);
                     });
                 },
                 error: function() {
-                    Toast.fire({ icon: 'error', title: 'Erreur de chargement des cours' });
                 }
             });
-            // Soumission
-            $('#submit-btn').click(function() {
-                const question = $('#question').val().trim();
-                if (!question) {
-                    $('#question').addClass('border-red-300 animate-shake');
-                    setTimeout(() => $('#question').removeClass('border-red-300 animate-shake'), 1000);
-                    return;
-                }
-                Swal.fire({ title: 'Génération en cours...', allowOutsideClick: false, showConfirmButton: false });
-                $.ajax({
-                    url: '/submit_philo',
-                    method: 'POST',
-                    contentType: 'application/json',
-                    data: JSON.stringify({ question, type: $('#type-select').val(), courseId: $('#course-select').val() }),
-                    success: function(data) {
-                        Swal.close();
-                        $('#preview-content').html(marked.parse(data.response));
-                        $('#markdown-content code').text(data.response);
-                        Prism.highlightAll();
-                        $('#response').removeClass('hidden');
-                        $('#copy-btn').removeClass('hidden');
-                        Toast.fire({ icon: 'success', title: 'Dissertation générée' });
-                    },
-                    error: function() {
-                        Swal.fire({ icon: 'error', title: 'Erreur', text: 'Une erreur est survenue.' });
-                    }
-                });
-            });
-            // Gestion des onglets
-            $('#preview-tab').click(function() {
-                $('#preview-content').show();
-                $('#markdown-content').hide();
-                $(this).addClass('text-violet-600 border-b-2 border-violet-600').removeClass('text-gray-500');
-                $('#markdown-tab').addClass('text-gray-500').removeClass('text-violet-600 border-b-2 border-violet-600');
             });
-            $('#markdown-tab').click(function() {
-                $('#preview-content').hide();
-                $('#markdown-content').show();
-                $(this).addClass('text-violet-600 border-b-2 border-violet-600').removeClass('text-gray-500');
-                $('#preview-tab').addClass('text-gray-500').removeClass('text-violet-600 border-b-2 border-violet-600');
-            });
-            // Copie du contenu
-            $('#copy-btn').click(function() {
-                const markdownContent = $('#markdown-content code').text();
-                navigator.clipboard.writeText(markdownContent)
-                    .then(() => {
-                        Toast.fire({ icon: 'success', title: 'Contenu copié dans le presse-papiers' });
-                    })
-                    .catch(() => {
-                        Toast.fire({ icon: 'error', title: 'Erreur lors de la copie' });
-                    });
-            });
-            // Animations personnalisées
-            const style = document.createElement('style');
-            style.textContent = `
-                @keyframes shake {
-                    0%, 100% { transform: translateX(0); }
-                    25% { transform: translateX(-5px); }
-                    50% { transform: translateX(5px); }
-                }
-                .animate-shake {
-                    animation: shake 0.5s ease-in-out;
-                }
-            `;
-            document.head.appendChild(style);
         });
     </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam AI - Assistant Philosophique</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
     <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between items-center h-16">
+                <div class="flex items-center">
+                    <div class="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 text-transparent bg-clip-text">
+                        Mariam AI
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-violet-100 text-violet-800">
+                        <span class="w-2 h-2 bg-violet-400 rounded-full animate-pulse mr-2"></span>
+                        Assistant Philosophique
+                    </span>
                 </div>
             </div>
         </div>
     </nav>
+    <!-- Main Content -->
     <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
         <div class="max-w-4xl mx-auto">
+            <!-- Main Card -->
             <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
+                <!-- Header Section -->
                 <div class="bg-gradient-to-r from-violet-600 to-indigo-600 p-6 text-white">
                     <h2 class="text-2xl font-bold">Générateur de Dissertation</h2>
                     <p class="mt-2 opacity-90">Créez des dissertations philosophiques pertinentes et structurées</p>
                 </div>
+                <!-- Content Section -->
                 <div class="p-8 space-y-8">
+                    <!-- Type Selection -->
                     <div class="space-y-3">
                         <label class="block text-sm font-medium text-gray-700">Type de dissertation</label>
+                        <div class="relative">
+                            <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">
+                                <option value="1">Type 1 - Dissertation classique</option>
+                                <option value="2">Type 2 - Analyse comparative</option>
+                            </select>
+                            <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
+                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                        </div>
                         <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">
                             Sujet de type 1
                         </div>
                     </div>
+                    <!-- Course Selection -->
                     <div class="space-y-3">
                         <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
+                        <div class="relative">
+                            <select id="course-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">
+                                <option value="">Choisir un cours...</option>
+                            </select>
+                            <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
+                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                        </div>
+                        <div class="course-meta hidden">
+                            <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-4 border border-gray-100">
+                                <div class="flex justify-between items-center">
+                                    <span id="course-author" class="flex items-center space-x-2">
+                                        <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <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" />
+                                        </svg>
+                                        <span class="text-gray-600"></span>
+                                    </span>
+                                    <span id="course-date" class="flex items-center space-x-2">
+                                        <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <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" />
+                                        </svg>
+                                        <span class="text-gray-600"></span>
+                                    </span>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    <!-- Question Input -->
                     <div class="space-y-3">
                         <label class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
+                        <div class="relative">
+                            <textarea id="question" rows="4"
+                                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"
+                                placeholder="Saisissez votre sujet de dissertation..."></textarea>
+                            <div class="absolute bottom-3 right-3 flex items-center space-x-2 text-gray-400">
+                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                                </svg>
+                            </div>
+                        </div>
                     </div>
+                    <!-- Submit Button -->
+                    <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">
+                        <span class="flex items-center justify-center space-x-2">
+                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                            </svg>
+                            <span>Générer la dissertation</span>
+                        </span>
                     </button>
+                    <!-- Response Section -->
+                    <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
+                        <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100">
+                            <!-- La réponse sera insérée ici -->
                         </div>
                     </div>
+                    <!-- Copy Button -->
+                    <button id="copy-btn" class="hidden w-full py-3 px-6 rounded-xl bg-gray-50 text-gray-700 font-medium border border-gray-200 hover:bg-gray-100 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
+                        <span class="flex items-center justify-center space-x-2">
+                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                            </svg>
+                            <span>Copier la dissertation</span>
+                        </span>
                     </button>
                 </div>
             </div>
         </div>
     </div>
     <script>
+    $(document).ready(function() {
+    // Configuration de marked avec support de la syntaxe GFM
+    marked.setOptions({
+        breaks: true,
+        gfm: true,
+        headerIds: true,
+        langPrefix: 'language-',
+        smartLists: true,
+        smartypants: true
+    });
+    // Configuration des notifications
+    const Toast = Swal.mixin({
+        toast: true,
+        position: 'top-end',
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
+        customClass: {
+            popup: 'rounded-lg shadow-xl border border-gray-100'
+        }
+    });
+    // Gestion du changement de cours
+    $('#course-select').change(function() {
+        const courseId = $(this).val();
+        if (courseId) {
             $.ajax({
+                url: `/api/philosophy/courses/${courseId}`,
                 method: 'GET',
+                beforeSend: function() {
+                    $('.course-meta').addClass('animate-pulse');
+                },
+                success: function(course) {
+                    $('.course-meta').removeClass('hidden animate-pulse')
+                        .addClass('animate-fadeIn');
+                    $('#course-author span').text(`Pr. ${course.author}`);
+                    $('#course-date span').text(new Date(course.updated_at).toLocaleDateString('fr-FR', {
+                        day: 'numeric',
+                        month: 'long',
+                        year: 'numeric' }));
+                    // Afficher une notification de succès
+                    Toast.fire({
+                        icon: 'success',
+                        title: 'Cours chargé avec succès'
                     });
                 },
                 error: function() {
+                    Toast.fire({
+                        icon: 'error',
+                        title: 'Erreur',
+                        text: 'Impossible de charger les détails du cours'
+                    });
                 }
             });
+        } else {
+            $('.course-meta').addClass('animate-fadeOut').on('animationend', function() {
+                $(this).addClass('hidden').removeClass('animate-fadeOut');
+            });
+        }
+    });
+    // Gestion de la soumission avec conversion en Markdown
+    $('#submit-btn').click(function() {
+        const question = $('#question').val().trim();
+        if (!question) {
+            $('#question').addClass('animate-shake border-red-300');
+            setTimeout(() => {
+                $('#question').removeClass('animate-shake border-red-300');
+            }, 1000);
+            Swal.fire({
+                icon: 'warning',
+                title: 'Champ requis',
+                text: 'Veuillez saisir votre sujet de dissertation',
+                showClass: {
+                    popup: 'animate__animated animate__fadeInDown'
+                },
+                hideClass: {
+                    popup: 'animate__animated animate__fadeOutUp'
+                },
+                customClass: {
+                    popup: 'rounded-2xl',
+                    confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
+                }
             });
+            return;
+        }
+        Swal.fire({
+            title: 'Génération en cours',
+            html: `<div class="animate-pulse">Veuillez patienter quelques instants...</div>`,
+            allowOutsideClick: false,
+            showConfirmButton: false
+        });
+        const data = {
+            question: question,
+            type: $('#type-select').val(),
+            courseId: $('#course-select').val() || null
+        };
+        $.ajax({
+            url: '/submit_philo',
+            method: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify(data),
+            success: function(data) {
+                Swal.close();
+                // Conversion et affichage en Markdown
+                const htmlContent = marked.parse(data.response);
+                $('#response > div').html(htmlContent);
+                $('#response').removeClass('hidden').addClass('animate-fadeIn');
+                Toast.fire({
+                    icon: 'success',
+                    title: 'Dissertation générée avec succès',
+                    timer: 2000
+                });
+                // Afficher le bouton de copie
+                $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
+            },
+            error: function() {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Erreur de génération',
+                    text: 'Une erreur est survenue lors de la génération de votre dissertation.',
+                    customClass: {
+                        popup: 'rounded-2xl',
+                        confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
+                    }
+                });
+            }
         });
+    });
+});
     </script>
 </body>
 </html>