Spaces:

Docfile
/

Flasksite

Running

File size: 25,209 Bytes

<!DOCTYPE html>
<html lang="fr">
<head>
    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.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>
    <style>
        .collapsible {
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            background-color: #f1f1f1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .active, .collapsible:hover {
            background-color: #ddd;
        }

        .content {
            padding: 0 18px;
            display: none;
            overflow: hidden;
            background-color: white;
        }
        .animate-fadeIn {
            animation: fadeIn 0.5s ease-out forwards;
        }
        .animate-slideUp {
            animation: slideUp 0.5s ease-out forwards;
        }
        .animate-shake {
            animation: shake 0.5s ease-in-out;
        }
         @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            @keyframes slideUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-5px); }
                75% { transform: translateX(5px); }
            }
    </style>
</head>

<body class="bg-gradient-to-br from-violet-50 to-indigo-50 min-h-screen">
    <!-- Navbar -->
    <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">Gen'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 -</option>
                                <option value="2">Type 2 -</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-11.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>

                      <!-- Saved Dissertations Section -->
                    <div id="saved-dissertations" class="mt-8">
                        <h3 class="text-lg font-medium text-gray-700 mb-4">Dissertations Sauvegardées</h3>
                        <div id="dissertations-list" class="space-y-4">
                            <!-- Les dissertations sauvegardées seront insérées ici -->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

<script>
    $(document).ready(function() {
        // Configuration de marked
        marked.setOptions({
            breaks: true,
            gfm: true,
            headerIds: true,
            langPrefix: 'language-',
            smartLists: true,
            smartypants: true
        });

        moment.locale('fr'); // Configuration de moment.js en français

        // 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'
            }
        });



        // Animation des boutons
        function addButtonAnimation(buttonId) {
            $(`#${buttonId}`).on('mousedown', function() {
                $(this).addClass('scale-95');
            }).on('mouseup mouseleave', function() {
                $(this).removeClass('scale-95');
            });
        }
        addButtonAnimation('submit-btn');
        addButtonAnimation('copy-btn');

        // Gestion du changement de type
        $('#type-select').change(function() {
            const type = $(this).val();
            const labels = {
                '1': 'Type1',
                '2': 'Type2'
            };
            $('#current-type-label').text(`Type ${type} - ${labels[type]}`);
        });

        // Chargement des cours avec animation
        function loadCourses() {
            return $.ajax({
                url: '/api/philosophy/courses',
                method: 'GET',
                beforeSend: function() {
                    $('#course-select').addClass('animate-pulse');
                },
                complete: function() {
                    $('#course-select').removeClass('animate-pulse');
                }
            });
        }

        loadCourses()
            .done(function(courses) {
                const select = $('#course-select');
                courses.forEach(course => {
                    select.append(`<option value="${course.id}">${course.title}</option>`);
                });
            })
            .fail(function() {
                Toast.fire({
                    icon: 'error',
                    title: 'Erreur de chargement des cours',
                    text: 'Veuillez réessayer ultérieurement'
                });
            });

        // Gestion du changement de cours avec animations
        $('#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 et sauvegarde
        $('#submit-btn').click(function() {
            const question = $('#question').val().trim();

            if (!question) {
                // Gestion de l'erreur si la question est vide (inchangée)
                return;
            }

            // Animation de chargement sophistiquée
                Swal.fire({
                    title: 'Génération en cours',
                    html: `
                        <div class="space-y-4">
                            <div class="flex justify-center">
                                <div class="w-16 h-16 relative">
                                    <div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div>
                                    <div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div>
                                </div>
                            </div>
                            <div class="text-gray-600">
                                <p class="animate-pulse">Analyse philosophique en cours...</p>
                                <p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p>
                            </div>
                        </div>
                    `,
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    customClass: {
                        popup: 'rounded-2xl'
                    }
                });

            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();

                    const htmlContent = marked.parse(data.response);
                    // Afficher la dissertation
                    $('#response > div').html(htmlContent);
                    $('#response').removeClass('hidden').addClass('animate-fadeIn');
                    $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');

                    // Sauvegarder la dissertation
                    saveDissertation(question, data.response);

                    Toast.fire({
                        icon: 'success',
                        title: 'Dissertation générée et sauvegardée avec succès',
                        timer: 2000
                    });
                },
                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'
                        }
                    });
                }
            });
        });

        // Fonction pour sauvegarder la dissertation (localStorage ou autre)
       function saveDissertation(title, content) {
            let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
            savedDissertations.push({ title, content, timestamp: Date.now() });
            localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
           updateSavedDissertationsList();

        }



          // Fonction pour supprimer une dissertation sauvegardée
        function deleteDissertation(index) {
             let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
            savedDissertations.splice(index, 1);
            localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
            updateSavedDissertationsList();
            Toast.fire({
                icon: 'success',
                title: 'Dissertation supprimée avec succès'
            });

        }

        // Fonction pour afficher les dissertations sauvegardées (avec sections repliables et suppression)
        function updateSavedDissertationsList() {
            const dissertationsList = $('#dissertations-list');
            dissertationsList.empty(); // Vider la liste actuelle

            let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];

           if (savedDissertations.length === 0) {
                dissertationsList.append('<p class="text-gray-500">Aucune dissertation sauvegardée.</p>');
                return;
            }



            savedDissertations.forEach((diss, index) => {
                 const date = moment(diss.timestamp).format('LLL');

                const collapsible = $(`<button class="collapsible rounded-xl border border-gray-100 flex justify-between w-full"><span>${diss.title}</span><span class="text-gray-500 text-sm">${date}</span></button>`);
                const deleteButton = $('<button class="text-red-500 hover:text-red-700 ml-2">Supprimer</button>');
                const content = $('<div class="content prose prose-violet max-w-none p-4"></div>').html(marked.parse(diss.content)); // Convertir en HTML

                collapsible.append(deleteButton); // Ajouter le bouton supprimer
                dissertationsList.append(collapsible, content);

                 // Gestionnaire d'événement pour chaque section repliable
                collapsible.click(function(event) {
                    // Empêcher la propagation de l'événement click sur le bouton "Supprimer"
                   if (event.target === deleteButton[0]) {
                       return;
                    }

                    content.slideToggle("fast");
                    collapsible.toggleClass("active");
                });

                deleteButton.click(function() {
                    // Supprimer la dissertation correspondante
                    deleteDissertation(index);

                });
            });
        }

        // Appeler la fonction pour afficher les dissertations au chargement de la page
        updateSavedDissertationsList();

// Gestion de la copie avec retour visuel amélioré
        $('#copy-btn').click(function() {
            const response = $('#response').text();

            $(this).addClass('scale-95 bg-violet-100');
            navigator.clipboard.writeText(response)
                .then(() => {
                    $(this).removeClass('scale-95 bg-violet-100')
                        .addClass('bg-green-50 text-green-700');

                    setTimeout(() => {
                        $(this).removeClass('bg-green-50 text-green-700');
                    }, 1000);

                    Toast.fire({
                        icon: 'success',
                        title: 'Copié avec succès',
                        text: 'Le contenu a été copié dans votre presse-papiers',
                        timer: 2000
                    });
                })
                .catch(() => {
                    $(this).removeClass('scale-95 bg-violet-100')
                        .addClass('bg-red-50 text-red-700');

                    setTimeout(() => {
                        $(this).removeClass('bg-red-50 text-red-700');
                    }, 1000);

                    Toast.fire({
                        icon: 'error',
                        title: 'Erreur de copie',
                        text: 'Impossible de copier le contenu',
                        timer: 3000
                    });
                });
        });

        // Ajout des styles d'animation personnalisés
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            @keyframes slideUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-5px); }
                75% { transform: translateX(5px); }
            }
            .animate-fadeIn {
                animation: fadeIn 0.5s ease-out forwards;
            }
            .animate-slideUp {
                animation: slideUp 0.5s ease-out forwards;
            }
            .animate-shake {
                animation: shake 0.5s ease-in-out;
            }
        `;
        document.head.appendChild(style);
    });
                      </script>

</body>
</html>