Spaces:

Docfile
/

Flasksite

Running

App Files Files Community

Docfile commited on Nov 10

Commit

03084ff

•

1 Parent(s): 43b4583

Create templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +370 -0

templates/philosophie.html ADDED Viewed

	@@ -0,0 +1,370 @@

+<!DOCTYPE html>
+<html lang="fr">
+<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>
+            </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>
+</body>
+</html>