Spaces:

Docfile
/

Flasksite

Running

App Files Files Community

Docfile commited on Sep 24

Commit

43b55c4

verified ·

1 Parent(s): e1b7241

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +246 -850

templates/philosophie.html CHANGED Viewed

@@ -1,863 +1,259 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Générateur de Dissertations Philosophiques - Mariam AI</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Kalam:wght@400;700&display=swap" rel="stylesheet">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        :root {
-            --primary: #667eea;
-            --primary-dark: #5a6fd8;
-            --secondary: #764ba2;
-            --accent: #f093fb;
-            --background: #0f0f23;
-            --surface: #1a1a2e;
-            --surface-light: #16213e;
-            --text-primary: #ffffff;
-            --text-secondary: #a0a9c1;
-            --success: #10b981;
-            --error: #ef4444;
-            --warning: #f59e0b;
-        }
-        body {
-            font-family: 'Inter', sans-serif;
-            background: var(--background);
-            color: var(--text-primary);
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-        .background-animation {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            background: linear-gradient(-45deg, #667eea, #764ba2, #667eea, #764ba2);
-            background-size: 400% 400%;
-            animation: gradientShift 15s ease infinite;
-            opacity: 0.1;
-        }
-        @keyframes gradientShift {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-        .header {
-            text-align: center;
-            padding: 60px 0 40px;
-            position: relative;
-        }
-        .header::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 100px;
-            height: 4px;
-            background: linear-gradient(90deg, var(--primary), var(--accent));
-            border-radius: 2px;
-        }
-        .header h1 {
-            font-family: 'Kalam', cursive;
-            font-size: 3rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, var(--primary), var(--accent));
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 16px;
-            animation: fadeInUp 1s ease;
-        }
-        .header p {
-            font-size: 1.2rem;
-            color: var(--text-secondary);
-            animation: fadeInUp 1s ease 0.2s both;
-        }
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .main-content {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 40px;
-            margin-bottom: 60px;
-        }
-        @media (min-width: 1024px) {
-            .main-content {
-                grid-template-columns: 400px 1fr;
-                gap: 60px;
-            }
-        }
-        .form-section {
-            background: var(--surface);
-            border-radius: 20px;
-            padding: 30px;
-            border: 1px solid rgba(102, 126, 234, 0.2);
-            backdrop-filter: blur(10px);
-            animation: fadeInLeft 1s ease 0.4s both;
-        }
-        @keyframes fadeInLeft {
-            from {
-                opacity: 0;
-                transform: translateX(-30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-        .form-group {
-            margin-bottom: 24px;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 600;
-            color: var(--text-primary);
-            font-size: 0.95rem;
-        }
-        .form-input, .form-select, .form-textarea {
-            width: 100%;
-            padding: 12px 16px;
-            background: var(--surface-light);
-            border: 2px solid rgba(102, 126, 234, 0.3);
-            border-radius: 12px;
-            color: var(--text-primary);
-            font-size: 16px;
-            transition: all 0.3s ease;
-            resize: vertical;
-        }
-        .form-input:focus, .form-select:focus, .form-textarea:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
-            transform: translateY(-2px);
-        }
-        .form-textarea {
-            min-height: 120px;
-        }
-        .radio-group {
-            display: grid;
-            gap: 12px;
-        }
-        .radio-item {
-            position: relative;
-            cursor: pointer;
-        }
-        .radio-item input[type="radio"] {
-            display: none;
-        }
-        .radio-label {
-            display: block;
-            padding: 16px;
-            background: var(--surface-light);
-            border: 2px solid rgba(102, 126, 234, 0.3);
-            border-radius: 12px;
-            transition: all 0.3s ease;
-            position: relative;
-            padding-left: 48px;
-        }
-        .radio-label::before {
-            content: '';
-            position: absolute;
-            left: 16px;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 20px;
-            height: 20px;
-            border: 2px solid rgba(102, 126, 234, 0.5);
-            border-radius: 50%;
-            transition: all 0.3s ease;
-        }
-        .radio-item input[type="radio"]:checked + .radio-label {
-            border-color: var(--primary);
-            background: rgba(102, 126, 234, 0.1);
-        }
-        .radio-item input[type="radio"]:checked + .radio-label::before {
-            border-color: var(--primary);
-            background: var(--primary);
-            box-shadow: inset 0 0 0 3px var(--surface-light);
-        }
-        .radio-label h4 {
-            color: var(--text-primary);
-            margin-bottom: 4px;
-            font-weight: 600;
-        }
-        .radio-label p {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-        }
-        .generate-btn {
-            width: 100%;
-            padding: 16px;
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            border: none;
-            border-radius: 12px;
-            color: white;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-        .generate-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
-        }
-        .generate-btn:active {
-            transform: translateY(0);
-        }
-        .generate-btn:disabled {
-            opacity: 0.7;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .btn-loading {
-            animation: pulse 2s ease-in-out infinite;
-        }
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.7; }
-            100% { opacity: 1; }
-        }
-        .result-section {
-            background: var(--surface);
-            border-radius: 20px;
-            padding: 30px;
-            border: 1px solid rgba(102, 126, 234, 0.2);
-            backdrop-filter: blur(10px);
-            animation: fadeInRight 1s ease 0.6s both;
-            min-height: 400px;
-            display: flex;
-            flex-direction: column;
-        }
-        @keyframes fadeInRight {
-            from {
-                opacity: 0;
-                transform: translateX(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-        .result-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 24px;
-            padding-bottom: 16px;
-            border-bottom: 1px solid rgba(102, 126, 234, 0.2);
-        }
-        .result-title {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-        .download-btn {
-            padding: 10px 20px;
-            background: linear-gradient(135deg, var(--success), #059669);
-            border: none;
-            border-radius: 8px;
-            color: white;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 0.9rem;
-        }
-        .download-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
-        }
-        .loading-state {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            flex-grow: 1;
-            text-align: center;
-        }
-        .spinner {
-            width: 60px;
-            height: 60px;
-            border: 4px solid rgba(102, 126, 234, 0.3);
-            border-top: 4px solid var(--primary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-bottom: 20px;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .loading-text {
-            font-size: 1.1rem;
-            color: var(--text-secondary);
-            margin-bottom: 8px;
-        }
-        .loading-subtext {
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-            opacity: 0.7;
-        }
-        .empty-state {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            flex-grow: 1;
-            text-align: center;
-            color: var(--text-secondary);
-        }
-        .empty-icon {
-            width: 80px;
-            height: 80px;
-            margin-bottom: 20px;
-            opacity: 0.5;
-        }
-        .dissertation-content {
-            flex-grow: 1;
-        }
-        .dissertation-paper {
-            background: #fdfaf4;
-            color: #1a2a4c;
-            padding: 40px;
-            border-radius: 12px;
-            font-family: 'Kalam', cursive;
-            font-size: 18px;
-            line-height: 1.8;
-            background-image: linear-gradient(transparent 97%, #d8e2ee 98%);
-            background-size: 100% 32px;
-            border-left: 4px solid #ffaaab;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-        }
-        .dissertation-title {
-            text-align: center;
-            font-size: 1.4rem;
-            font-weight: 700;
-            margin-bottom: 10px;
-            color: #1a2a4c;
-        }
-        .dissertation-prof {
-            text-align: center;
-            font-style: italic;
-            margin-bottom: 30px;
-            color: #4a6a9c;
-        }
-        .dissertation-section {
-            margin-bottom: 30px;
-        }
-        .section-title {
-            font-size: 1.2rem;
-            font-weight: 700;
-            text-transform: uppercase;
-            text-decoration: underline;
-            margin-bottom: 16px;
-            color: #1a2a4c;
-        }
-        .section-content {
-            text-align: justify;
-        }
-        .paragraph {
-            margin-bottom: 16px;
-            text-indent: 2em;
-        }
-        .partie-block {
-            margin-bottom: 24px;
-        }
-        .chapeau {
-            font-weight: 600;
-            margin-bottom: 12px;
-        }
-        .transition {
-            font-style: italic;
-            color: #4a6a9c;
-            margin-top: 16px;
-        }
-        .error-state {
-            background: rgba(239, 68, 68, 0.1);
-            border: 1px solid rgba(239, 68, 68, 0.3);
-            border-radius: 12px;
-            padding: 20px;
-            text-align: center;
-            color: var(--error);
-        }
-        .error-icon {
-            width: 48px;
-            height: 48px;
-            margin: 0 auto 16px;
-        }
-        .footer {
-            text-align: center;
-            padding: 40px 0;
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-        }
-        @media (max-width: 768px) {
-            .container {
-                padding: 0 16px;
-            }
-            .header h1 {
-                font-size: 2.2rem;
-            }
-            .form-section, .result-section {
-                padding: 20px;
-            }
-            .main-content {
-                gap: 24px;
-            }
-        }
-        .notification {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 16px 20px;
-            border-radius: 12px;
-            color: white;
-            font-weight: 600;
-            z-index: 1000;
-            transform: translateX(400px);
-            opacity: 0;
-            transition: all 0.4s ease;
-        }
-        .notification.show {
-            transform: translateX(0);
-            opacity: 1;
-        }
-        .notification.success {
-            background: linear-gradient(135deg, var(--success), #059669);
-        }
-        .notification.error {
-            background: linear-gradient(135deg, var(--error), #dc2626);
-        }
-    </style>
 </head>
 <body>
-    <div class="background-animation"></div>
-    <div class="container">
-        <header class="header">
-            <h1>Générateur de Dissertations</h1>
-            <p>Créez des dissertations philosophiques avec l'intelligence artificielle Mariam AI</p>
-        </header>
-        <main class="main-content">
-            <section class="form-section">
-                <form id="dissertationForm">
-                    <div class="form-group">
-                        <label for="courseSelect">Cours de référence (optionnel)</label>
-                        <select id="courseSelect" class="form-select">
-                            <option value="">Sélectionner un cours...</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="questionInput">Sujet de dissertation *</label>
-                        <textarea
-                            id="questionInput"
-                            class="form-textarea"
-                            placeholder="Exemple: L'art nous détourne-t-il de la réalité ?"
-                            required
-                        ></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label>Type de méthodologie</label>
-                        <div class="radio-group">
-                            <div class="radio-item">
-                                <input type="radio" id="type1" name="methodType" value="type1" checked>
-                                <label for="type1" class="radio-label">
-                                    <h4>Méthodologie Type 1</h4>
-                                    <p>Approche classique avec plan dialectique</p>
-                                </label>
-                            </div>
-                            <div class="radio-item">
-                                <input type="radio" id="type2" name="methodType" value="type2">
-                                <label for="type2" class="radio-label">
-                                    <h4>Méthodologie Type 2</h4>
-                                    <p>Approche thématique avec développement progressif</p>
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                    <button type="submit" class="generate-btn" id="generateBtn">
-                        <span id="btnText">Générer la dissertation</span>
-                    </button>
-                </form>
-            </section>
-            <section class="result-section">
-                <div class="result-header">
-                    <h2 class="result-title">Résultat</h2>
-                    <button class="download-btn" id="downloadBtn" style="display: none;">
-                        📄 Télécharger PDF
-                    </button>
-                </div>
-                <div id="resultContent">
-                    <div class="empty-state">
-                        <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                            <polyline points="14,2 14,8 20,8"></polyline>
-                            <line x1="16" y1="13" x2="8" y2="13"></line>
-                            <line x1="16" y1="17" x2="8" y2="17"></line>
-                            <polyline points="10,9 9,9 8,9"></polyline>
-                        </svg>
-                        <p>Votre dissertation apparaîtra ici</p>
-                    </div>
-                </div>
-            </section>
-        </main>
-        <footer class="footer">
-            <p>&copy; 2024 Mariam AI - Générateur de Dissertations Philosophiques</p>
-        </footer>
     </div>
-    <div id="notification" class="notification"></div>
-    <script>
-        class DissertationGenerator {
-            constructor() {
-                this.currentDissertation = null;
-                this.init();
-            }
-            init() {
-                this.loadCourses();
-                this.bindEvents();
-            }
-            async loadCourses() {
-                try {
-                    const response = await fetch('/api/philosophy/courses');
-                    const courses = await response.json();
-                    const select = document.getElementById('courseSelect');
-                    select.innerHTML = '<option value="">Sélectionner un cours...</option>';
-                    courses.forEach(course => {
-                        const option = document.createElement('option');
-                        option.value = course.id;
-                        option.textContent = course.title;
-                        select.appendChild(option);
-                    });
-                } catch (error) {
-                    console.error('Erreur lors du chargement des cours:', error);
-                }
-            }
-            bindEvents() {
-                const form = document.getElementById('dissertationForm');
-                const downloadBtn = document.getElementById('downloadBtn');
-                form.addEventListener('submit', (e) => {
-                    e.preventDefault();
-                    this.generateDissertation();
-                });
-                downloadBtn.addEventListener('click', () => {
-                    this.downloadPDF();
-                });
-            }
-            async generateDissertation() {
-                const form = document.getElementById('dissertationForm');
-                const formData = new FormData(form);
-                const data = {
-                    question: document.getElementById('questionInput').value.trim(),
-                    type: formData.get('methodType'),
-                    courseId: document.getElementById('courseSelect').value || null
-                };
-                if (!data.question) {
-                    this.showNotification('Veuillez saisir un sujet de dissertation', 'error');
-                    return;
-                }
-                this.showLoading();
-                try {
-                    const response = await fetch('/api/generate_dissertation', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(data)
-                    });
-                    const result = await response.json();
-                    if (response.ok) {
-                        this.currentDissertation = result;
-                        this.displayDissertation(result);
-                        this.showNotification('Dissertation générée avec succès !', 'success');
-                    } else {
-                        throw new Error(result.error || 'Erreur lors de la génération');
-                    }
-                } catch (error) {
-                    console.error('Erreur:', error);
-                    this.showError(error.message);
-                    this.showNotification('Erreur lors de la génération', 'error');
-                }
-            }
-            showLoading() {
-                const resultContent = document.getElementById('resultContent');
-                const downloadBtn = document.getElementById('downloadBtn');
-                const generateBtn = document.getElementById('generateBtn');
-                const btnText = document.getElementById('btnText');
-                downloadBtn.style.display = 'none';
-                generateBtn.disabled = true;
-                generateBtn.classList.add('btn-loading');
-                btnText.textContent = 'Génération en cours...';
-                resultContent.innerHTML = `
-                    <div class="loading-state">
-                        <div class="spinner"></div>
-                        <div class="loading-text">Génération de votre dissertation</div>
-                        <div class="loading-subtext">Analyse du sujet et structuration des idées...</div>
-                    </div>
-                `;
-            }
-            displayDissertation(dissertation) {
-                const resultContent = document.getElementById('resultContent');
-                const downloadBtn = document.getElementById('downloadBtn');
-                const generateBtn = document.getElementById('generateBtn');
-                const btnText = document.getElementById('btnText');
-                // Réinitialiser le bouton
-                generateBtn.disabled = false;
-                generateBtn.classList.remove('btn-loading');
-                btnText.textContent = 'Générer une nouvelle dissertation';
-                // Afficher le bouton de téléchargement
-                downloadBtn.style.display = 'block';
-                let partiesHTML = '';
-                dissertation.parties.forEach((partie, index) => {
-                    let argumentsHTML = '';
-                    partie.arguments.forEach(arg => {
-                        argumentsHTML += `<div class="paragraph">${arg.paragraphe_argumentatif}</div>`;
-                    });
-                    partiesHTML += `
-                        <div class="partie-block">
-                            <div class="paragraph chapeau">${partie.chapeau}</div>
-                            ${argumentsHTML}
-                            ${partie.transition ? `<div class="paragraph transition">${partie.transition}</div>` : ''}
-                        </div>
-                    `;
-                });
-                resultContent.innerHTML = `
-                    <div class="dissertation-content">
-                        <div class="dissertation-paper">
-                            <div class="dissertation-title">Sujet : ${dissertation.sujet}</div>
-                            <div class="dissertation-prof">Prof : ${dissertation.prof}</div>
-                            <div class="dissertation-section">
-                                <div class="section-title">Introduction</div>
-                                <div class="section-content">
-                                    <div class="paragraph">${dissertation.introduction}</div>
-                                </div>
-                            </div>
-                            <div class="dissertation-section">
-                                <div class="section-title">Développement</div>
-                                <div class="section-content">
-                                    ${partiesHTML}
-                                </div>
-                            </div>
-                            <div class="dissertation-section">
-                                <div class="section-title">Conclusion</div>
-                                <div class="section-content">
-                                    <div class="paragraph">${dissertation.conclusion}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-            }
-            showError(message) {
-                const resultContent = document.getElementById('resultContent');
-                const generateBtn = document.getElementById('generateBtn');
-                const btnText = document.getElementById('btnText');
-                generateBtn.disabled = false;
-                generateBtn.classList.remove('btn-loading');
-                btnText.textContent = 'Générer la dissertation';
-                resultContent.innerHTML = `
-                    <div class="error-state">
-                        <svg class="error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <line x1="15" y1="9" x2="9" y2="15"></line>
-                            <line x1="9" y1="9" x2="15" y2="15"></line>
-                        </svg>
-                        <h3>Erreur de génération</h3>
-                        <p>${message}</p>
-                    </div>
-                `;
-            }
-            async downloadPDF() {
-                if (!this.currentDissertation) {
-                    this.showNotification('Aucune dissertation à télécharger', 'error');
-                    return;
-                }
-                try {
-                    const response = await fetch('/api/generate_pdf', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(this.currentDissertation)
-                    });
-                    if (response.ok) {
-                        const blob = await response.blob();
-                        const url = window.URL.createObjectURL(blob);
-                        const a = document.createElement('a');
-                        a.href = url;
-                        // Créer un nom de fichier sécurisé
-                        const safeFilename = this.currentDissertation.sujet
-                            .substring(0, 50)
-                            .replace(/[^a-zA-Z0-9\s\-_]/g, '')
-                            .trim();
-                        a.download = `${safeFilename || 'dissertation'}.pdf`;
-                        document.body.appendChild(a);
-                        a.click();
-                        document.body.removeChild(a);
-                        window.URL.revokeObjectURL(url);
-                        this.showNotification('PDF téléchargé avec succès !', 'success');
-                    } else {
-                        throw new Error('Erreur lors de la génération du PDF');
-                    }
-                } catch (error) {
-                    console.error('Erreur téléchargement PDF:', error);
-                    this.showNotification('Erreur lors du téléchargement PDF', 'error');
-                }
             }
-            showNotification(message, type = 'success') {
-                const notification = document.getElementById('notification');
-                notification.textContent = message;
-                notification.className = `notification ${type}`;
-                notification.classList.add('show');
-                setTimeout(() => {
-                    notification.classList.remove('show');
-                }, 4000);
             }
-        }
-        // Initialiser l'application
-        document.addEventListener('DOMContentLoaded', () => {
-            new DissertationGenerator();
-        });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Assistant de Philosophie (Vue.js)</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+  <!-- La ligne html2pdf.js a été SUPPRIMÉE -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Kalam&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <!-- Le CSS reste INCHANGÉ -->
+  <style>
+    :root {
+      --primary-color: #6366f1; /* Indigo moderne */
+      --primary-hover: #5b21b6;
+      --secondary-color: #8b5cf6; /* Violet */
+      --accent-color: #06b6d4; /* Cyan */
+      --text-primary: #0f172a; /* Slate-900 */
+      --text-secondary: #475569; /* Slate-600 */
+      --text-muted: #94a3b8; /* Slate-400 */
+      --background: #ffffff;
+      --surface: #f8fafc; /* Slate-50 */
+      --border: #e2e8f0; /* Slate-200 */
+      --border-focus: #cbd5e1; /* Slate-300 */
+      --success: #10b981; /* Emerald-500 */
+      --error: #ef4444; /* Red-500 */
+    }
+    * { box-sizing: border-box; }
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+      margin: 0; padding: 0; color: var(--text-primary);
+      line-height: 1.6; font-weight: 400;
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      min-height: 100vh;
+    }
+    .container { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; }
+    h1 { font-size: 3.5rem; font-weight: 700; text-align: center; background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 1rem 0; letter-spacing: -0.02em; }
+    .type-indicator { text-align: center; color: var(--text-muted); font-size: 1.125rem; font-weight: 500; margin-bottom: 3rem; letter-spacing: 0.05em; text-transform: uppercase; }
+    .form-container { background: var(--background); border-radius: 20px; padding: 2.5rem; margin-bottom: 2rem; border: 1px solid var(--border); backdrop-filter: blur(10px); }
+    .form-group { margin-bottom: 2rem; }
+    label { display: block; margin-bottom: 0.75rem; font-weight: 600; color: var(--text-primary); font-size: 0.95rem; letter-spacing: 0.01em; }
+    textarea, .form-select { width: 100%; padding: 1rem 1.25rem; border-radius: 12px; border: 2px solid var(--border); font-size: 1rem; line-height: 1.6; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background-color: var(--background); color: var(--text-primary); font-family: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; }
+    .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 1rem center; background-repeat: no-repeat; background-size: 1.25rem 1.25rem; padding-right: 3rem; cursor: pointer; }
+    textarea { min-height: 120px; resize: vertical; }
+    textarea:focus, .form-select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); transform: translateY(-1px); }
+    .primary-button { display: block; width: 100%; padding: 1.25rem; background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); color: white; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0.01em; position: relative; overflow: hidden; }
+    .primary-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; }
+    .primary-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); }
+    .primary-button:hover:not(:disabled)::before { left: 100%; }
+    .primary-button:active { transform: translateY(0); }
+    .primary-button:disabled { background: var(--text-muted); cursor: not-allowed; transform: none; box-shadow: none; }
+    .download-container { margin-top: 2rem; text-align: center; }
+    .secondary-button { background: var(--surface); color: var(--text-primary); border: 2px solid var(--border); border-radius: 12px; padding: 1rem 2rem; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 0.5rem; }
+    .secondary-button::before { content: '⬇'; font-size: 1.2rem; }
+    .secondary-button:hover:not(:disabled) { background: var(--background); border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-1px); box-shadow: 0 5px 15px rgba(99, 102, 241, 0.15); }
+    .loader { width: 60px; height: 60px; margin: 3rem auto; position: relative; }
+    .loader::before { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--primary-color), var(--secondary-color), var(--accent-color), var(--primary-color)); animation: spin 1.5s linear infinite; }
+    .loader::after { content: ''; position: absolute; top: 8px; left: 8px; width: 44px; height: 44px; border-radius: 50%; background: var(--background); }
+    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    .error { color: var(--error); background: rgba(239, 68, 68, 0.1); text-align: center; margin-top: 2rem; padding: 1.25rem; border-radius: 12px; font-weight: 500; border: 1px solid rgba(239, 68, 68, 0.2); }
+    .dissertation-paper { font-family: 'Kalam', cursive; font-size: 20px; color: #1a2a4c; background-color: #fdfaf4; line-height: 2; background-image: linear-gradient(transparent 97%, #d8e2ee 98%); background-size: 100% 40px; border-left: 3px solid #ffaaab; padding-left: 4em; margin: 2rem 0; padding-top: 30px; padding-bottom: 40px; padding-right: 30px; border-radius: 0 12px 12px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    .dissertation-paper h2 { font-size: 1.5em; text-align: center; margin-bottom: 1.5em; color: #1a2a4c; }
+    .dissertation-paper h3 { font-size: 1.2em; margin-top: 3em; margin-bottom: 1.5em; text-transform: uppercase; text-decoration: underline; color: #1a2a4c; }
+    .dissertation-paper .development-block { margin-top: 3em; }
+    .dissertation-paper p { text-align: justify; margin: 0; padding: 0; }
+    .dissertation-paper .prof { text-align: center; font-style: italic; margin-bottom: 2em; }
+    .dissertation-paper .indented { text-indent: 3em; }
+    .dissertation-paper .transition { margin-top: 2em; margin-bottom: 2em; font-style: italic; color: #4a6a9c; }
+    .dissertation-paper, .dissertation-paper * { box-sizing: border-box; }
+    .avoid-page-break { page-break-inside: avoid; break-inside: avoid; }
+    @media (max-width: 768px) { .container { padding: 2rem 1rem; } h1 { font-size: 2.5rem; } .form-container { padding: 1.5rem; } .dissertation-paper { padding-left: 2em; padding-right: 1rem; font-size: 18px; } }
+    @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+    .container > * { animation: fadeInUp 0.6s ease-out; }
+  </style>
 </head>
 <body>
+  <div id="app" class="container">
+    <h1>Assistant de Dissertation Philosophique</h1>
+    <p class="type-indicator">Méthodologie : [[ dissertationTypeLabel ]]</p>
+    <div class="form-container">
+      <form @submit.prevent="generateDissertation">
+        <div class="form-group">
+          <label for="dissertation-type">Choisir la méthodologie</label>
+          <select id="dissertation-type" v-model="dissertationType" class="form-select">
+              <option value="type1">Type 1 </option>
+              <option value="type2">Type 2 (citation)</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="course-context">Choisir un cours comme contexte (optionnel)</label>
+          <select id="course-context" v-model="selectedCourse" class="form-select">
+            <option value="">-- Aucun cours en contexte --</option>
+            <option v-for="course in courses" :key="course.id" :value="course.id">
+              [[ course.title ]]
+            </option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="question">Entrez votre sujet de dissertation</label>
+          <textarea id="question" v-model="question" placeholder="Entrez votre sujet ou la citation à analyser ici..."></textarea>
+        </div>
+        <button type="submit" class="primary-button" :disabled="isLoading">
+          [[ isLoading ? 'Génération en cours...' : 'Générer la dissertation' ]]
+        </button>
+      </form>
     </div>
+    <div v-if="dissertation" class="download-container">
+      <button class="secondary-button" @click="generatePDF" :disabled="isDownloading">
+        [[ isDownloading ? 'Téléchargement...' : 'Télécharger la dissertation en PDF' ]]
+      </button>
+    </div>
+    <div v-if="isLoading" class="loader"></div>
+    <p v-if="errorMessage" class="error">[[ errorMessage ]]</p>
+    <div v-if="dissertation" id="dissertation-content" class="dissertation-paper">
+      <h2>Sujet : [[ dissertation.sujet ]]</h2>
+      <p class="prof">Prof : [[ dissertation.prof ]]</p>
+      <h3>Introduction</h3>
+      <p class="indented">[[ dissertation.introduction ]]</p>
+      <div v-for="partie in dissertation.parties" :key="partie.chapeau" class="avoid-page-break">
+        <div class="development-block">
+          <p class="indented">[[ partie.chapeau ]]</p>
+          <p v-for="(arg, idx) in partie.arguments" :key="idx" class="indented">
+            [[ arg.paragraphe_argumentatif ]]
+          </p>
+        </div>
+        <p v-if="partie.transition" class="indented transition">[[ partie.transition ]]</p>
+      </div>
+      <h3>Conclusion</h3>
+      <p class="indented">[[ dissertation.conclusion ]]</p>
+    </div>
+  </div>
+  <script>
+    const { createApp } = Vue;
+    const app = createApp({
+      data() {
+        return {
+          question: '',
+          dissertationType: 'type1',
+          courses: [],
+          selectedCourse: '',
+          isLoading: false,
+          isDownloading: false, // <-- NOUVEL état pour le bouton de téléchargement
+          errorMessage: null,
+          dissertation: null
+        }
+      },
+      computed: {
+        dissertationTypeLabel() {
+          return this.dissertationType === 'type1' ? 'Type 1' : 'Type 2';
+        }
+      },
+      mounted() {
+        this.fetchCourses();
+      },
+      methods: {
+        async fetchCourses() {
+          try {
+            const response = await fetch('/api/philosophy/courses');
+            if (!response.ok) throw new Error('Impossible de charger les cours.');
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            this.courses = data;
+          } catch (error) {
+            this.errorMessage = error.message;
+          }
+        },
+        async generateDissertation() {
+          if (!this.question.trim()) {
+            this.errorMessage = "Veuillez entrer un sujet de dissertation.";
+            return;
+          }
+          this.isLoading = true;
+          this.errorMessage = null;
+          this.dissertation = null;
+          try {
+            const response = await fetch('/api/generate_dissertation', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                question: this.question,
+                type: this.dissertationType,
+                courseId: this.selectedCourse
+              })
+            });
+            const data = await response.json();
+            if (!response.ok) {
+              throw new Error(data.error || "Une erreur inconnue est survenue.");
             }
+            this.dissertation = data;
+          } catch (error) {
+            this.errorMessage = error.message;
+          } finally {
+            this.isLoading = false;
+          }
+        },
+        // --- MÉTHODE generatePDF ENTIÈREMENT MISE À JOUR ---
+        async generatePDF() {
+          if (!this.dissertation) {
+            this.errorMessage = "Aucune dissertation à télécharger.";
+            return;
+          }
+          this.isDownloading = true;
+          this.errorMessage = null;
+          try {
+            const response = await fetch('/api/generate_pdf', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              // On envoie les données de la dissertation au serveur
+              body: JSON.stringify(this.dissertation),
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || "Le serveur n'a pas pu générer le PDF.");
             }
+            // Le serveur renvoie le PDF, on le traite pour le télécharger
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.style.display = 'none';
+            a.href = url;
+            a.download = 'dissertation-philosophie.pdf';
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            a.remove();
+          } catch (err) {
+            console.error('Erreur de téléchargement du PDF:', err);
+            this.errorMessage = "Erreur lors de la génération du PDF : " + err.message;
+          } finally {
+            this.isDownloading = false;
+          }
+        }
+      }
+    });
+    app.config.compilerOptions.delimiters = ['[[', ']]'];
+    app.mount('#app');
+  </script>
 </body>
 </html>