Spaces:

Docfile
/

Flasksite

Running

File size: 15,856 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 | Dissertation 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">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #7C3AED;
            --primary-dark: #6D28D9;
            --secondary-color: #10B981;
            --accent-color: #F59E0B;
            --background-color: #F3F4F8;
            --text-primary: #1F2937;
            --text-secondary: #6B7280;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--background-color);
            color: var(--text-primary);
        }

        .mariam-container {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .mariam-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
            padding: 1rem;
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .mariam-logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .mariam-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            border-top: 4px solid var(--primary-color);
        }

        .mariam-input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #E5E7EB;
            border-radius: 0.5rem;
            transition: all 0.3s;
            font-size: 1rem;
        }

        .mariam-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
        }

        .mariam-select {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #E5E7EB;
            border-radius: 0.5rem;
            background-color: white;
            transition: all 0.3s;
        }

        .mariam-select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
        }

        .mariam-btn {
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.3s;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .mariam-btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .mariam-btn-primary:hover {
            background-color: var(--primary-dark);
        }

        .mariam-btn-secondary {
            background-color: white;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
        }

        .mariam-btn-secondary:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .mariam-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background-color: var(--primary-color);
            color: white;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
        }

        .mariam-meta {
            background-color: #F9FAFB;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-top: 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.875rem;
            color: var(--text-secondary);
            border-left: 4px solid var(--secondary-color);
        }

        .mariam-response {
            margin-top: 2rem;
            padding: 1.5rem;
            background-color: #F9FAFB;
            border-radius: 0.5rem;
            line-height: 1.75;
            border-left: 4px solid var(--primary-color);
        }

        .mariam-form-group {
            margin-bottom: 1.5rem;
        }

        .mariam-label {
            display: block;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

        .mariam-loading {
            border: 3px solid #f3f3f3;
            border-radius: 50%;
            border-top: 3px solid var(--primary-color);
            width: 24px;
            height: 24px;
            animation: mariam-spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes mariam-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .mariam-button-group {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        /* Style des alertes SweetAlert2 personnalisé */
        .swal2-popup {
            font-family: 'Poppins', sans-serif;
        }
    </style>
</head>
<body>
    <div class="mariam-container">
        <header class="mariam-header">
            <div class="mariam-logo">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 16v-4"/>
                    <path d="M12 8h.01"/>
                </svg>
                Mariam AI
            </div>
            <span class="text-sm text-gray-500">Module de Philosophie</span>
        </header>

        <div class="mariam-card">
            <h1 class="text-2xl font-bold mb-6">Assistant de Dissertation</h1>
            
            <div class="mariam-form-group">
                <label class="mariam-label" for="type-select">Type de dissertation</label>
                <select id="type-select" class="mariam-select">
                    <option value="1">Dissertation type 1</option>
                    <option value="2">Dissertation type 2</option>
                </select>
            </div>

            <div class="mariam-badge" id="current-type-label">Dissertation type 1</div>

            <div class="mariam-form-group">
                <label class="mariam-label" for="course-select">Cours de référence</label>
                <select id="course-select" class="mariam-select">
                    <option value="">Sélectionner un cours...</option>
                </select>
                <div class="mariam-meta hidden" id="course-info">
                    <span id="course-author" class="flex items-center gap-2">
                        <svg class="w-4 h-4" 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></span>
                    </span>
                    <span id="course-date" class="flex items-center gap-2">
                        <svg class="w-4 h-4" 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></span>
                    </span>
                </div>
            </div>

            <div class="mariam-form-group">
                <label class="mariam-label" for="question">Sujet de dissertation</label>
                <textarea 
                    id="question" 
                    rows="4" 
                    class="mariam-input" 
                    placeholder="Saisissez votre sujet de dissertation ici..."
                ></textarea>
            </div>

            <button id="submit-btn" class="mariam-btn mariam-btn-primary">
                <svg class="w-5 h-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>
                Générer avec Mariam AI
            </button>

            <div id="response" class="mariam-response hidden"></div>

            <div class="mariam-button-group hidden" id="action-buttons">
                <button id="copy-btn" class="mariam-btn mariam-btn-secondary">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
                    </svg>
                    Copier
                </button>
                <button id="new-btn" class="mariam-btn mariam-btn-secondary">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    Nouvelle dissertation
                </button>
            </div>
        </div>
    </div>

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

            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            $('#type-select').change(function() {
                const type = $(this).val();
                $('#current-type-label').text(`Dissertation type ${type}`);
            });

            $.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 de chargement des cours'
                    });
                }
            });

            $('#course-select').change(function() {
                const courseId = $(this).val();
                if (courseId) {
                    $.ajax({
                        url: `/api/philosophy/courses/${courseId}`,
                        method: 'GET',
                        success: function(course) {
                            $('#course-info').removeClass('hidden');
                            $('#course-author span').text(`Prof. ${course.author}`);
                            $('#course-date span').text(`Mis à jour le ${new Date(course.updated_at).toLocaleDateString()}`);
                        },
                        error: function() {
                            Toast.fire({
                                icon: 'error',
                                title: 'Erreur de chargement des détails du cours'
                            });
                        }
                    });
                } else {
                    $('#course-info').addClass('hidden');
                }
            });

            $('#submit-btn').click(function() {
                const question = $('#question').val().trim();
                const type = $('#type-select').val();

                if (!question) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Champ requis',
                        text: 'Veuillez saisir un sujet de dissertation.'                     });
                    return;
                }

                $(this).html('<div class="mariam-loading"></div>').prop('disabled', true);

                $.ajax({
                    url: '/api/philosophy/dissertation',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ question: question, type: type, course_id: $('#course-select').val() }),
                    success: function(response) {
                        $('#submit-btn').html(`
                            <svg class="w-5 h-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>
                            Générer avec Mariam AI`).prop('disabled', false);
                        $('#response').html(marked.parse(response.answer)).removeClass('hidden');
                        $('#action-buttons').removeClass('hidden');
                    },
                    error: function() {
                        $('#submit-btn').html(`
                            <svg class="w-5 h-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>
                            Générer avec Mariam AI`).prop('disabled', false);
                        Swal.fire({
                            icon: 'error',
                            title: 'Erreur',
                            text: 'Une erreur est survenue lors de la génération de la dissertation.'
                        });
                    }
                });
            });

            $('#copy-btn').click(function() {
                const textToCopy = $('#response').text();
                navigator.clipboard.writeText(textToCopy).then(function() {
                    Toast.fire({
                        icon: 'success',
                        title: 'Copié dans le presse-papiers!'
                    });
                }, function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: 'Impossible de copier le texte.'
                    });
                });
            });

            $('#new-btn').click(function() {
                $('#question').val('');
                $('#response').html('').addClass('hidden');
                $('#action-buttons').addClass('hidden');
                $('#course-info').addClass('hidden');
                $('#course-select').val('');
            });
        });
    </script>
</body>
</html>