Spaces:

Docfile
/

Flasksite

Running

App Files Files Community

Docfile commited on Nov 14, 2024

Commit

c721805

verified ·

1 Parent(s): 1c71f62

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +292 -194

templates/philosophie.html CHANGED Viewed

@@ -3,117 +3,189 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Philosophie - Dissertation Assistant</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
     <style>
-        .hidden {
-            display: none;
-        }
-        .loader {
-            border: 4px solid #f3f3f3;
-            border-radius: 50%;
-            border-top: 4px solid #3498db;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            margin: 20px auto;
         }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
         }
         .form-group {
-            margin-bottom: 1.5rem;
-        }
-        .form-control {
-            width: 100%;
-            padding: 0.5rem;
-            border: 1px solid #e2e8f0;
-            border-radius: 0.375rem;
-            margin-top: 0.5rem;
         }
         .btn {
-            padding: 0.5rem 1rem;
-            border-radius: 0.375rem;
-            font-weight: 500;
             cursor: pointer;
-            transition: all 0.2s;
         }
         .btn-primary {
-            background-color: #4299e1;
             color: white;
         }
-        .btn-primary:hover {
-            background-color: #3182ce;
-        }
         .btn-secondary {
-            background-color: #cbd5e0;
-            color: #2d3748;
-            margin-top: 1rem;
         }
-        .btn-secondary:hover {
-            background-color: #a0aec0;
         }
-        .card {
-            background-color: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-            padding: 1.5rem;
-            margin: 1rem auto;
-            max-width: 800px;
         }
-        .type-label {
-            margin: 1rem 0;
-            font-weight: 500;
-            color: #4a5568;
         }
-        #image-preview img {
-            max-width: 100%;
-            height: auto;
-            border-radius: 0.375rem;
-            margin-top: 1rem;
         }
         #response {
-            margin-top: 1.5rem;
-            padding: 1rem;
-            border: 1px solid #e2e8f0;
-            border-radius: 0.375rem;
-            white-space: pre-wrap;
         }
         .course-meta {
-            font-size: 0.875rem;
-            color: #718096;
-            margin-top: 0.5rem;
         }
     </style>
 </head>
-<body class="bg-gray-100 min-h-screen py-8">
-    <div class="container mx-auto px-4">
         <div class="card">
-            <h1 class="text-3xl font-bold text-gray-800 mb-6">Philosophie</h1>
-            <!-- Type Selection -->
             <div class="form-group">
-                <label class="block text-gray-700 font-medium">Type de dissertation :</label>
                 <select id="type-select" class="form-control">
-                    <option value="1">Type 1</option>
-                    <option value="2">Type 2</option>
-                    <option value="3">Type 3 (Image)</option>
                 </select>
             </div>
-            <div id="current-type-label" class="type-label">
-                Sujet de type 1
-            </div>
-            <!-- Course Selection (for types 1 and 2) -->
-            <div id="course-section" class="form-group">
-                <label class="block text-gray-700 font-medium">Sélectionner un cours :</label>
                 <select id="course-select" class="form-control">
                     <option value="">Choisir un cours...</option>
                 </select>
-                <div id="course-info">
                     <div class="course-meta hidden">
                         <span id="course-author"></span>
                         <span id="course-date"></span>
@@ -121,150 +193,176 @@
                 </div>
             </div>
-            <!-- Text Input (for types 1 and 2) -->
-            <div id="text-input-section" class="form-group">
-                <label class="block text-gray-700 font-medium">Entrez juste le sujet :</label>
-                <textarea id="question-input" class="form-control" rows="4"></textarea>
-            </div>
-            <!-- Image Upload (for type 3) -->
-            <div id="image-upload-section" class="form-group hidden">
-                <label class="block text-gray-700 font-medium">Sélectionnez une image :</label>
-                <input type="file" id="image-input" accept="image/*" class="form-control">
-                <div id="image-preview" class="mt-3"></div>
             </div>
-            <!-- Submit Button -->
-            <button id="submit-btn" class="btn btn-primary w-full">
-                Soumettre
-            </button>
             <!-- Loader -->
-            <div id="loader" class="loader hidden"></div>
-            <!-- Response Section -->
             <div id="response" class="hidden"></div>
-            <!-- Copy Button -->
-            <button id="copy-btn" class="btn btn-secondary w-full">
-                Copier la réponse
-            </button>
         </div>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const typeSelect = document.getElementById('type-select');
-            const courseSection = document.getElementById('course-section');
-            const textInputSection = document.getElementById('text-input-section');
-            const imageUploadSection = document.getElementById('image-upload-section');
-            const typeLabel = document.getElementById('current-type-label');
-            const imageInput = document.getElementById('image-input');
-            const imagePreview = document.getElementById('image-preview');
-            const submitBtn = document.getElementById('submit-btn');
-            const loader = document.getElementById('loader');
-            const response = document.getElementById('response');
-            const copyBtn = document.getElementById('copy-btn');
-            const courseSelect = document.getElementById('course-select');
-            // Load courses on page load
-            fetch('/api/philosophy/courses')
-                .then(response => response.json())
-                .then(courses => {
-                    courses.forEach(course => {
-                        const option = document.createElement('option');
-                        option.value = course.id;
-                        option.textContent = course.title;
-                        courseSelect.appendChild(option);
-                    });
-                })
-                .catch(error => console.error('Error loading courses:', error));
-            typeSelect.addEventListener('change', function() {
-                const selectedType = this.value;
-                typeLabel.textContent = `Sujet de type ${selectedType}`;
-                if (selectedType === '3') {
-                    courseSection.classList.add('hidden');
-                    textInputSection.classList.add('hidden');
-                    imageUploadSection.classList.remove('hidden');
-                } else {
-                    courseSection.classList.remove('hidden');
-                    textInputSection.classList.remove('hidden');
-                    imageUploadSection.classList.add('hidden');
                 }
             });
-            imageInput.addEventListener('change', function(e) {
-                const file = e.target.files[0];
-                if (file) {
-                    const reader = new FileReader();
-                    reader.onload = function(e) {
-                        const img = document.createElement('img');
-                        img.src = e.target.result;
-                        img.className = 'max-w-full h-auto';
-                        imagePreview.innerHTML = '';
-                        imagePreview.appendChild(img);
-                    };
-                    reader.readAsDataURL(file);
                 }
             });
-            submitBtn.addEventListener('click', async function() {
-                const type = typeSelect.value;
-                let data = {
-                    type: type
-                };
-                loader.classList.remove('hidden');
-                response.classList.add('hidden');
-                try {
-                    if (type === '3') {
-                        const imagePreviewImg = imagePreview.querySelector('img');
-                        if (!imagePreviewImg) {
-                            alert('Veuillez sélectionner une image');
-                            return;
-                        }
-                        data.image = imagePreviewImg.src;
-                    } else {
-                        const questionInput = document.getElementById('question-input');
-                        if (!questionInput.value.trim()) {
-                            alert('Veuillez entrer un sujet');
-                            return;
-                        }
-                        data.question = questionInput.value;
-                        data.courseId = courseSelect.value;
-                    }
-                    const res = await fetch('/submit_philo', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(data)
                     });
-                    const result = await res.json();
-                    if (result.error) {
-                        throw new Error(result.error);
                     }
-                    response.innerHTML = result.response.replace(/\n/g, '<br>');
-                    response.classList.remove('hidden');
-                } catch (error) {
-                    alert('Erreur : ' + error.message);
-                } finally {
-                    loader.classList.add('hidden');
                 }
             });
-            copyBtn.addEventListener('click', function() {
-                const responseText = response.innerText;
-                navigator.clipboard.writeText(responseText)
-                    .then(() => alert('Réponse copiée !'))
-                    .catch(err => alert('Erreur lors de la copie : ' + err));
             });
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Philosophie</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">
     <style>
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
         }
+        .card {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            padding: 20px;
         }
         .form-group {
+            margin-bottom: 20px;
         }
         .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
             cursor: pointer;
+            margin-right: 10px;
+            font-weight: bold;
         }
         .btn-primary {
+            background-color: #4A90E2;
             color: white;
         }
         .btn-secondary {
+            background-color: #6c757d;
+            color: white;
+        }
+        .btn-success {
+            background-color: #28a745;
+            color: white;
         }
+        .select-wrapper {
+            margin-bottom: 20px;
         }
+        select, textarea {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            margin-top: 5px;
         }
+        .hidden {
+            display: none;
         }
+        #loader {
+            text-align: center;
+            padding: 20px;
         }
         #response {
+            margin-top: 20px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 4px;
+            line-height: 1.6;
+        }
+        .course-info {
+            margin-top: 10px;
+            font-size: 0.9em;
+            color: #666;
         }
         .course-meta {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            padding: 5px;
+            background: #f8f9fa;
+            border-radius: 4px;
+        }
+        .type-label {
+            background: #4A90E2;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            margin-bottom: 15px;
+            display: inline-block;
+        }
+        /* Styles Markdown */
+        #response h1 {
+            font-size: 2em;
+            margin-bottom: 0.5em;
+            border-bottom: 2px solid #eee;
+            padding-bottom: 0.3em;
+        }
+        #response h2 {
+            font-size: 1.5em;
+            margin-bottom: 0.5em;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 0.3em;
+        }
+        #response h3 {
+            font-size: 1.3em;
+            margin-bottom: 0.5em;
+        }
+        #response p {
+            margin-bottom: 1em;
+        }
+        #response ul, #response ol {
+            margin-bottom: 1em;
+            padding-left: 2em;
+        }
+        #response li {
+            margin-bottom: 0.5em;
+        }
+        #response blockquote {
+            border-left: 4px solid #ddd;
+            padding-left: 1em;
+            margin-left: 0;
+            color: #666;
+        }
+        #response code {
+            background-color: #f5f5f5;
+            padding: 0.2em 0.4em;
+            border-radius: 3px;
+            font-family: monospace;
+        }
+        #response pre {
+            background-color: #f5f5f5;
+            padding: 1em;
+            border-radius: 4px;
+            overflow-x: auto;
+            margin-bottom: 1em;
+        }
+        #response pre code {
+            background-color: transparent;
+            padding: 0;
+        }
+        #response table {
+            border-collapse: collapse;
+            width: 100%;
+            margin-bottom: 1em;
+        }
+        #response th, #response td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        #response th {
+            background-color: #f5f5f5;
+        }
+        #response img {
+            max-width: 100%;
+            height: auto;
+        }
+        #response hr {
+            border: none;
+            border-top: 1px solid #ddd;
+            margin: 1em 0;
         }
     </style>
 </head>
+<body>
+    <div class="container">
         <div class="card">
+            <h1 class="text-3xl font-bold text-gray-800">Philosophie</h1>
+            <!-- Sélection du type de dissertation -->
             <div class="form-group">
+                <label for="type-select">Type de dissertation :</label>
                 <select id="type-select" class="form-control">
+                    <option value="1">Type 1 </option>
+                    <option value="2">Type 2 </option>
                 </select>
             </div>
+            <div class="type-label" id="current-type-label">Sujet de type 1</div>
+            <!-- Sélection du cours -->
+            <div class="form-group">
+                <label for="course-select">Sélectionner un cours :</label>
                 <select id="course-select" class="form-control">
                     <option value="">Choisir un cours...</option>
                 </select>
+                <div class="course-info">
                     <div class="course-meta hidden">
                         <span id="course-author"></span>
                         <span id="course-date"></span>
                 </div>
             </div>
+            <!-- Zone de texte pour la question -->
+            <div class="form-group">
+                <label for="question">Entrez juste le sujet :</label>
+                <textarea id="question" rows="4" class="form-control"></textarea>
             </div>
+            <!-- Bouton de soumission -->
+            <button id="submit-btn" class="btn btn-success">Soumettre</button>
             <!-- Loader -->
+            <div id="loader" class="hidden">
+                Chargement en cours...
+            </div>
+            <!-- Zone de réponse -->
             <div id="response" class="hidden"></div>
+            <!-- Bouton de copie -->
+            <button id="copy-btn" class="btn btn-secondary hidden">Copier la réponse</button>
         </div>
     </div>
     <script>
+        $(document).ready(function() {
+            // Configuration de marked
+            marked.setOptions({
+                breaks: true,
+                gfm: true,
+                headerIds: true,
+                langPrefix: 'language-'
+            });
+            // Configuration des toasts SweetAlert2
+            const Toast = Swal.mixin({
+                toast: true,
+                position: 'top-end',
+                showConfirmButton: false,
+                timer: 3000,
+                timerProgressBar: true
+            });
+            // Gestion du changement de type
+            $('#type-select').change(function() {
+                const type = $(this).val();
+                $('#current-type-label').text(`Sujet de type ${type}`);
+            });
+            // Charger les cours depuis la base de données
+            $.ajax({
+                url: '/api/philosophy/courses',
+                method: 'GET',
+                success: function(courses) {
+                    const select = $('#course-select');
+                    courses.forEach(course => {
+                        select.append(`<option value="${course.id}">${course.title}</option>`);
+                    });
+                },
+                error: function() {
+                    Toast.fire({
+                        icon: 'error',
+                        title: 'Erreur lors du chargement des cours'
+                    });
                 }
             });
+            // Gestion du changement de cours
+            $('#course-select').change(function() {
+                const courseId = $(this).val();
+                if (courseId) {
+                    $.ajax({
+                        url: `/api/philosophy/courses/${courseId}`,
+                        method: 'GET',
+                        success: function(course) {
+                            $('.course-meta').removeClass('hidden');
+                            $('#course-author').text(`Professeur: ${course.author}`);
+                            $('#course-date').text(`Mis à jour: ${new Date(course.updated_at).toLocaleDateString()}`);
+                            Toast.fire({
+                                icon: 'success',
+                                title: 'Cours chargé avec succès'
+                            });
+                        },
+                        error: function() {
+                            Toast.fire({
+                                icon: 'error',
+                                title: 'Erreur lors du chargement des détails du cours'
+                            });
+                        }
+                    });
+                } else {
+                    $('.course-meta').addClass('hidden');
                 }
             });
+            // Gestion de la soumission
+            $('#submit-btn').click(function() {
+                const question = $('#question').val().trim();
+                const type = $('#type-select').val();
+                if (!question) {
+                    Swal.fire({
+                        icon: 'warning',
+                        title: 'Attention',
+                        text: 'Veuillez saisir une question.'
                     });
+                    return;
+                }
+                Swal.fire({
+                    title: 'Generation en cours',
+                    html: 'Veuillez patienter...',
+                    allowOutsideClick: false,
+                    didOpen: () => {
+                        Swal.showLoading();
                     }
+                });
+                // Préparation des données
+                const data = {
+                    question: question,
+                    type: type
+                };
+                // Ajout du courseId seulement s'il est sélectionné
+                const courseId = $('#course-select').val();
+                if (courseId) {
+                    data.courseId = courseId;
                 }
+                $.ajax({
+                    url: '/submit_philo',
+                    method: 'POST',
+                    contentType: 'application/json',
+                    data: JSON.stringify(data),
+                    success: function(data) {
+                        Swal.close();
+                        // Conversion du Markdown en HTML
+                        const htmlContent = marked.parse(data.response);
+                        $('#response').html(htmlContent).removeClass('hidden');
+                        $('#copy-btn').removeClass('hidden');
+                        Toast.fire({
+                            icon: 'success',
+                            title: 'Réponse générée avec succès'
+                        });
+                    },
+                    error: function(xhr) {
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Erreur',
+                            text: 'Une erreur est survenue lors de la génération de la réponse.'
+                        });
+                    }
+                });
             });
+            // Gestion de la copie de la réponse
+            $('#copy-btn').click(function() {
+                const response = $('#response').text();
+                navigator.clipboard.writeText(response).then(function() {
+                    Toast.fire({
+                        icon: 'success',
+                        title: 'Réponse copiée avec succès'
+                    });
+                }).catch(function() {
+                    Toast.fire({
+                        icon: 'error',
+                        title: 'Erreur lors de la copie'
+                    });
+                });
             });
         });
     </script>