Upload folder using huggingface_hub

index.html

@@ -373,6 +373,12 @@
             border-radius: 50%;
             cursor: pointer;
             transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            font-size: 0.8rem;
         }
         
         .quality-dot:hover {
@@ -450,7 +456,7 @@
                 <div class="form-row">
                     <div class="form-col">
                         <label class="form-label"><i class="fas fa-language"></i> Compétence Cible</label>
-                        <select id="competence" class="form-control">
+                        <select id="competence" class="form-control" onchange="previewSM2Curve()">
                             <option value="">Sélectionnez une compétence...</option>
                         </select>
                     </div>
@@ -489,12 +495,12 @@
                 <div class="form-group">
                     <label class="form-label"><i class="fas fa-chart-line"></i> Qualité Estimée de Rétention</label>
                     <div class="quality-indicator">
-                        <div class="quality-dot quality-0 active" data-quality="0" onclick="selectQuality(0)"></div>
-                        <div class="quality-dot quality-1" data-quality="1" onclick="selectQuality(1)"></div>
-                        <div class="quality-dot quality-2" data-quality="2" onclick="selectQuality(2)"></div>
-                        <div class="quality-dot quality-3" data-quality="3" onclick="selectQuality(3)"></div>
+                        <div class="quality-dot quality-0" data-quality="0" onclick="selectQuality(0)">0</div>
+                        <div class="quality-dot quality-1" data-quality="1" onclick="selectQuality(1)">1</div>
+                        <div class="quality-dot quality-2 active" data-quality="2" onclick="selectQuality(2)">2</div>
+                        <div class="quality-dot quality-3" data-quality="3" onclick="selectQuality(3)">3</div>
                     </div>
-                    <small id="quality-description">Difficulté - Révision fréquente nécessaire</small>
+                    <small id="quality-description">Bon - Consolidation progressive</small>
                 </div>
                 
                 <button class="btn btn-primary btn-large" onclick="generatePlanner()">
@@ -564,9 +570,9 @@
                     <div class="quality-indicator">
                         <div class="quality-dot quality-0" onclick="setEvaluation(1)">1</div>
                         <div class="quality-dot quality-1" onclick="setEvaluation(2)">2</div>
-                        <div class="quality-dot quality-2" onclick="setEvaluation(3)">3</div>
+                        <div class="quality-dot quality-2 active" onclick="setEvaluation(3)">3</div>
                         <div class="quality-dot quality-3" onclick="setEvaluation(4)">4</div>
-                        <div class="quality-dot quality-3" onclick="setEvaluation(5)" style="background:linear-gradient(135deg, #8b5cf6, #7c3aed)">5</div>
+                        <div class="quality-dot" onclick="setEvaluation(5)" style="background:linear-gradient(135deg, #8b5cf6, #7c3aed)">5</div>
                     </div>
                     <input type="hidden" id="auto_eval" value="3">
                 </div>
@@ -655,15 +661,15 @@
     <script>
         // Variables globales
         let currentChart = null;
-        let currentQuality = 0;
-        let currentCompetence = '';
+        let currentQuality = 2; // Niveau 2 par défaut
+        let previewChart = null;
         
         // Initialisation
         document.addEventListener('DOMContentLoaded', function() {
             loadCompetences();
-            selectQuality(2); // Qualité moyenne par défaut
             refreshStats();
             loadSM2Explanation();
+            updateComparisonChart();
         });
         
         // Navigation
@@ -682,8 +688,17 @@
             document.getElementById(tabId).classList.add('active');
             
             // Activer l'onglet correspondant
+            const tabNames = {
+                'objectif': 'Objectif',
+                'planner': 'Planner',
+                'journal': 'Journal',
+                'notifications': 'Notifications',
+                'stats': 'Statistiques',
+                'learn': 'Apprendre'
+            };
+            
             document.querySelectorAll('.nav-tab').forEach(tab => {
-                if (tab.textContent.includes(getTabName(tabId))) {
+                if (tab.textContent.includes(tabNames[tabId])) {
                     tab.classList.add('active');
                 }
             });
@@ -696,18 +711,6 @@
             }
         }
         
-        function getTabName(tabId) {
-            const names = {
-                'objectif': 'Objectif',
-                'planner': 'Planner',
-                'journal': 'Journal',
-                'notifications': 'Notifications',
-                'stats': 'Statistiques',
-                'learn': 'Apprendre'
-            };
-            return names[tabId] || tabId;
-        }
-        
         // Charger les compétences
         async function loadCompetences() {
             try {
@@ -749,32 +752,65 @@
             
             document.getElementById('quality-description').textContent = descriptions[level];
             
-            // Générer un aperçu si une compétence est sélectionnée
-            if (document.getElementById('competence').value) {
-                previewSM2Curve();
-            }
+            // Mettre à jour l'aperçu
+            previewSM2Curve();
         }
         
         // Prévisualiser la courbe SM-2
         async function previewSM2Curve() {
             const competence = document.getElementById('competence').value;
-            if (!competence) return;
+            if (!competence) {
+                document.getElementById('preview').style.display = 'none';
+                return;
+            }
             
             try {
                 const response = await fetch(`/api/planner/visualize?competence=${encodeURIComponent(competence)}&quality=${currentQuality}`);
+                const data = await response.json();
                 
-                if (response.ok) {
+                if (data.success) {
                     document.getElementById('preview').style.display = 'block';
                     
-                    const blob = await response.blob();
-                    const img = document.createElement('img');
-                    img.src = URL.createObjectURL(blob);
-                    img.style.width = '100%';
-                    img.style.borderRadius = '10px';
+                    const ctx = document.getElementById('intervalChart').getContext('2d');
+                    
+                    if (previewChart) {
+                        previewChart.destroy();
+                    }
+                    
+                    const labels = data.intervals.map((_, i) => `Répétition ${i + 1}`);
                     
-                    const container = document.getElementById('intervalChart').parentElement;
-                    container.innerHTML = '';
-                    container.appendChild(img);
+                    previewChart = new Chart(ctx, {
+                        type: 'bar',
+                        data: {
+                            labels: labels,
+                            datasets: [{
+                                label: 'Intervalle (jours)',
+                                data: data.intervals,
+                                backgroundColor: '#3b82f6',
+                                borderColor: '#2563eb',
+                                borderWidth: 2
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            plugins: {
+                                title: {
+                                    display: true,
+                                    text: `Courbe SM-2 - Niveau ${currentQuality}`
+                                }
+                            },
+                            scales: {
+                                y: {
+                                    beginAtZero: true,
+                                    title: {
+                                        display: true,
+                                        text: 'Jours'
+                                    }
+                                }
+                            }
+                        }
+                    });
                 }
             } catch (error) {
                 console.error('Erreur génération preview:', error);
@@ -785,11 +821,10 @@
         async function generatePlanner() {
             const competence = document.getElementById('competence').value;
             const startDate = document.getElementById('start').value;
-            const endDate = document.getElementById('end').value;
             const duration = document.getElementById('duration').value;
             
-            if (!competence || !startDate || !endDate) {
-                alert('Veuillez remplir tous les champs obligatoires');
+            if (!competence || !startDate) {
+                alert('Veuillez sélectionner une compétence et une date de début');
                 return;
             }
             
@@ -800,8 +835,8 @@
                     body: JSON.stringify({
                         competence: competence,
                         start_date: startDate,
-                        end_date: endDate,
                         session_duration: duration,
+                        repetitions: 6,
                         quality_level: currentQuality
                     })
                 });
@@ -809,7 +844,7 @@
                 const data = await response.json();
                 
                 if (data.success) {
-                    displayPlanner(data.plan, data.visual_data);
+                    displayPlanner(data.plan, data.intervals);
                     showTab('planner');
                 } else {
                     alert('Erreur: ' + data.error);
@@ -825,6 +860,9 @@
             const container = document.getElementById('plannerContent');
             const statsContainer = document.getElementById('plannerStats');
             
+            // Calculer le total des jours
+            const totalDays = intervals.reduce((a, b) => a + b, 0);
+            
             // Statistiques
             statsContainer.innerHTML = `
                 <div class="stat-card">
@@ -832,7 +870,7 @@
                     <div class="stat-label">Sessions Planifiées</div>
                 </div>
                 <div class="stat-card">
-                    <div class="stat-value">${intervals[intervals.length - 1]}</div>
+                    <div class="stat-value">${totalDays}</div>
                     <div class="stat-label">Jours Totaux</div>
                 </div>
                 <div class="stat-card">
@@ -880,7 +918,7 @@
                         </div>
                     </div>
                     <div style="margin-top: 15px; padding: 10px; background: #f1f5f9; border-radius: 8px; font-size: 0.9rem;">
-                        <i class="fas fa-bell"></i> ${session.reminder}
+                        <i class="fas fa-bell"></i> ${session.reminder || ''}
                     </div>
                 `;
                 container.appendChild(card);
@@ -899,7 +937,6 @@
             }
             
             const labels = intervals.map((_, i) => `Répétition ${i + 1}`);
-            const dataPoints = intervals;
             
             currentChart = new Chart(ctx, {
                 type: 'line',
@@ -907,7 +944,7 @@
                     labels: labels,
                     datasets: [{
                         label: 'Intervalle (jours)',
-                        data: dataPoints,
+                        data: intervals,
                         borderColor: '#3b82f6',
                         backgroundColor: 'rgba(59, 130, 246, 0.1)',
                         borderWidth: 3,
@@ -956,7 +993,7 @@
             document.getElementById('auto_eval').value = score;
             
             // Mettre à jour les indicateurs
-            document.querySelectorAll('.quality-dot').forEach((dot, index) => {
+            document.querySelectorAll('.quality-indicator .quality-dot').forEach((dot, index) => {
                 dot.classList.toggle('active', index === score - 1);
             });
         }
@@ -1052,9 +1089,9 @@
                 
                 card.innerHTML = `
                     <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px;">
-                        <div style="font-size: 2rem;">${icons[data.type]}</div>
+                        <div style="font-size: 2rem;">${icons[data.type] || '🔔'}</div>
                         <div>
-                            <div style="font-weight: bold; color: #1e293b;">${data.type.charAt(0).toUpperCase() + data.type.slice(1)}</div>
+                            <div style="font-weight: bold; color: #1e293b;">${data.type ? data.type.charAt(0).toUpperCase() + data.type.slice(1).replace('_', ' ') : 'Notification'}</div>
                             <div style="font-size: 0.9rem; color: #64748b;">
                                 Efficacité: ${(data.effectiveness_score * 100).toFixed(1)}%
                             </div>
@@ -1068,80 +1105,11 @@
                 
                 container.insertBefore(card, container.firstChild);
                 
-                // Mettre à jour le graphique
-                updateNotificationChart();
-                
             } catch (error) {
                 console.error('Erreur notification:', error);
             }
         }
         
-        async function updateNotificationChart() {
-            try {
-                const response = await fetch('/api/learner/stats');
-                const stats = await response.json();
-                
-                const ctx = document.getElementById('notificationChart').getContext('2d');
-                
-                if (window.notificationChart) {
-                    window.notificationChart.destroy();
-                }
-                
-                const labels = Object.keys(stats.notification_effectiveness);
-                const data = Object.values(stats.notification_effectiveness);
-                
-                window.notificationChart = new Chart(ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: labels.map(l => l.replace('_', ' ')),
-                        datasets: [{
-                            label: 'Taux de Réussite',
-                            data: data,
-                            backgroundColor: [
-                                'rgba(59, 130, 246, 0.7)',
-                                'rgba(16, 185, 129, 0.7)',
-                                'rgba(139, 92, 246, 0.7)',
-                                'rgba(245, 158, 11, 0.7)'
-                            ],
-                            borderColor: [
-                                'rgb(59, 130, 246)',
-                                'rgb(16, 185, 129)',
-                                'rgb(139, 92, 246)',
-                                'rgb(245, 158, 11)'
-                            ],
-                            borderWidth: 2
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        scales: {
-                            y: {
-                                beginAtZero: true,
-                                max: 1,
-                                ticks: {
-                                    callback: function(value) {
-                                        return (value * 100) + '%';
-                                    }
-                                }
-                            }
-                        },
-                        plugins: {
-                            tooltip: {
-                                callbacks: {
-                                    label: function(context) {
-                                        return (context.raw * 100).toFixed(1) + '%';
-                                    }
-                                }
-                            }
-                        }
-                    }
-                });
-            } catch (error) {
-                console.error('Erreur graphique notifications:', error);
-            }
-        }
-        
         // Statistiques
         async function refreshStats() {
             try {
@@ -1308,10 +1276,10 @@
             
             // Données des différents niveaux de qualité
             const intervals = {
-                'Difficulté (N0)': [1, 1, 3, 7, 16, 35],
+                'Difficulté (N0)': [1, 2, 4, 8, 16, 32],
                 'Moyen (N1)': [1, 3, 7, 14, 30, 60],
-                'Bon (N2)': [1, 7, 16, 35, 90, 180],
-                'Excellent (N3)': [1, 14, 30, 90, 180, 365]
+                'Bon (N2)': [2, 7, 16, 35, 70, 140],
+                'Excellent (N3)': [3, 10, 25, 60, 120, 240]
             };
             
             const labels = ['R1', 'R2', 'R3', 'R4', 'R5', 'R6'];
@@ -1342,8 +1310,7 @@
                             title: {
                                 display: true,
                                 text: 'Intervalle (jours)'
-                            },
-                            type: 'logarithmic'
+                            }
                         }
                     },
                     plugins: {