Upload cross_reading/cross_readers.js with huggingface_hub

cross_reading/cross_readers.js

@@ -0,0 +1,1229 @@
+// ================= VARIABLES GLOBALES =================
+let allEvaluations = [];
+let scenariosData = [];
+let filteredEvaluations = [];
+let reviewsData = [];
+let currentReviewEvalId = null;
+let chart1 = null;
+let chart2 = null;
+
+// ================= INITIALISATION =================
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Initialisation de l\'analyse croisée...');
+    loadData();
+});
+
+// ================= CHARGEMENT DES DONNÉES =================
+function loadData() {
+    console.log('Début du chargement des données...');
+    
+    // Afficher le statut de chargement
+    showLoadingMessage('Chargement des données...');
+    
+    // Masquer la section d'aide
+    document.getElementById('helpSection').style.display = 'none';
+    
+    // Charger les évaluations
+    fetch('/api/evaluations')
+        .then(response => {
+            if (!response.ok) {
+                console.warn('API /api/evaluations non disponible, utilisation des données locales');
+                // Charger depuis le fichier local
+                return fetch('trust_stats.json').then(r => r.json());
+            }
+            return response.json();
+        })
+        .then(data => {
+            allEvaluations = data.evaluations || [];
+            console.log(`${allEvaluations.length} évaluations chargées`);
+            
+            if (allEvaluations.length === 0) {
+                console.warn('Aucune évaluation trouvée');
+                showWarningMessage('Aucune donnée d\'évaluation trouvée. Générer des données de test pour commencer.');
+                document.getElementById('helpSection').style.display = 'block';
+            } else {
+                document.getElementById('warningMessage').style.display = 'none';
+            }
+            
+            // Charger les scénarios
+            return fetch('/api/scenarios')
+                .then(r => r.ok ? r.json() : fetch('scenarios.json').then(r2 => r2.json()))
+                .catch(() => fetch('scenarios.json').then(r => r.json()));
+        })
+        .then(data => {
+            scenariosData = data.scenarios || [];
+            console.log(`${scenariosData.length} scénarios chargés`);
+            
+            // Charger les reviews
+            return fetch('/api/reviews')
+                .then(r => r.ok ? r.json() : fetch('review.json').then(r2 => r2.json()))
+                .catch(() => fetch('review.json').then(r => r.json()));
+        })
+        .then(data => {
+            reviewsData = data.reviews || [];
+            console.log(`${reviewsData.length} reviews chargés`);
+            
+            // Traiter les données
+            processEvaluations();
+            showSuccessMessage('Données chargées avec succès !');
+        })
+        .catch(error => {
+            console.error('Erreur de chargement:', error);
+            showErrorMessage(`Erreur de chargement: ${error.message}<br>
+                <br>
+                <strong>Solutions possibles :</strong><br>
+                1. Vérifiez que les fichiers JSON existent<br>
+                2. Générez des données de test avec le bouton ci-dessous<br>
+                3. Vérifiez la console du navigateur (F12) pour plus de détails<br>
+                <br>
+                <button onclick="generateTestData()" style="margin-top:10px;padding:10px 20px;background:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer;font-weight:bold;">
+                    🧪 Générer des données de test
+                </button>
+                <button onclick="location.reload()" style="margin-top:10px;margin-left:10px;padding:10px 20px;background:#2196F3;color:white;border:none;border-radius:5px;cursor:pointer;">
+                    🔄 Réessayer
+                </button>`);
+            
+            // Afficher la section d'aide
+            document.getElementById('helpSection').style.display = 'block';
+        });
+}
+
+// ================= GÉNÉRATION DE DONNÉES DE TEST =================
+function generateTestData() {
+    console.log('Génération de données de test...');
+    
+    showLoadingMessage('Génération des données de test...');
+    
+    // Essayer d'abord l'API
+    fetch('/api/generate_test_data')
+        .then(response => {
+            if (!response.ok) {
+                // Si l'API n'est pas disponible, générer localement
+                return generateLocalTestData();
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log('Données de test générées:', data);
+            showSuccessMessage(`✅ Données de test générées avec succès !<br>
+                - ${data.evaluations || 5} évaluations<br>
+                - ${data.scenarios || scenariosData.length} scénarios<br>
+                - ${data.reviews || 3} reviews`);
+            
+            // Recharger les données
+            setTimeout(() => {
+                location.reload();
+            }, 2000);
+        })
+        .catch(error => {
+            console.error('Erreur génération données test:', error);
+            generateLocalTestData();
+        });
+}
+
+function generateLocalTestData() {
+    // Générer des évaluations de test
+    const testEvaluations = [];
+    const evaluators = ['Expert A', 'Expert B', 'Expert C', 'Anonyme'];
+    const roles = ['Professeur', 'Psychologue', 'Tuteur', 'Chercheur'];
+    
+    for (let i = 0; i < 10; i++) {
+        const scenarioId = Math.floor(Math.random() * 16) + 1;
+        const evaluatorIndex = Math.floor(Math.random() * evaluators.length);
+        
+        const metrics = {
+            AR: Math.floor(Math.random() * 6),
+            AE: Math.floor(Math.random() * 6),
+            ESR: Math.floor(Math.random() * 6),
+            SDM: Math.floor(Math.random() * 6),
+            SM: Math.floor(Math.random() * 6)
+        };
+        
+        const totalScore = (metrics.AR + metrics.AE + metrics.ESR + metrics.SDM + metrics.SM) * 4;
+        
+        testEvaluations.push({
+            id: `test_eval_${Date.now()}_${i}`,
+            scenario_id: scenarioId,
+            evaluator_name: evaluators[evaluatorIndex],
+            evaluator_role: roles[evaluatorIndex],
+            trust_metrics: metrics,
+            trust_score: totalScore,
+            comment: 'Évaluation générée automatiquement pour test',
+            timestamp: new Date(Date.now() - Math.random() * 10000000000).toISOString(),
+            cross_reading: Math.random() > 0.7
+        });
+    }
+    
+    // Générer des reviews de test
+    const testReviews = [];
+    for (let i = 0; i < 5; i++) {
+        if (testEvaluations[i]) {
+            const decisions = ['approved', 'needs_revision', 'rejected'];
+            const decision = decisions[Math.floor(Math.random() * decisions.length)];
+            
+            testReviews.push({
+                id: `test_review_${Date.now()}_${i}`,
+                evaluation_id: testEvaluations[i].id,
+                scenario_id: testEvaluations[i].scenario_id,
+                evaluator_name: testEvaluations[i].evaluator_name,
+                evaluator_role: testEvaluations[i].evaluator_role,
+                original_score: testEvaluations[i].trust_score,
+                original_comment: testEvaluations[i].comment,
+                decision: decision,
+                review_comment: `Review automatique - ${decision === 'approved' ? 'Approuvé' : decision === 'needs_revision' ? 'Nécessite révision' : 'Rejeté'}`,
+                reviewer: 'Système de test',
+                timestamp: new Date().toISOString()
+            });
+        }
+    }
+    
+    // Sauvegarder localement
+    try {
+        // Ajouter aux évaluations existantes
+        allEvaluations = [...allEvaluations, ...testEvaluations];
+        
+        // Ajouter aux reviews existants
+        reviewsData = [...reviewsData, ...testReviews];
+        
+        // Mettre à jour l'affichage
+        processEvaluations();
+        filterAllEvaluations();
+        
+        showSuccessMessage(`✅ Données de test générées localement !<br>
+            - ${testEvaluations.length} nouvelles évaluations<br>
+            - ${testReviews.length} nouveaux reviews`);
+        
+        return {
+            evaluations: testEvaluations.length,
+            reviews: testReviews.length,
+            scenarios: scenariosData.length
+        };
+    } catch (error) {
+        console.error('Erreur génération locale:', error);
+        showErrorMessage('Erreur lors de la génération des données de test');
+        throw error;
+    }
+}
+
+// ================= TRAITEMENT DES DONNÉES =================
+function processEvaluations() {
+    console.log('Traitement des évaluations...');
+    
+    // Vérifier s'il y a des données
+    if (allEvaluations.length === 0) {
+        showWarningMessage('Aucune évaluation à afficher. Utilisez le bouton "Générer des données de test" pour commencer.');
+        document.getElementById('helpSection').style.display = 'block';
+        return;
+    }
+    
+    // Nettoyer les données
+    allEvaluations.forEach((eval, index) => {
+        // Assurer un ID unique
+        if (!eval.id) {
+            eval.id = `eval_${Date.now()}_${index}_${Math.random().toString(36).substr(2, 9)}`;
+        }
+        
+        // Normaliser les noms de métriques
+        if (eval.trust_metrics) {
+            const normalizedMetrics = {};
+            Object.keys(eval.trust_metrics).forEach(key => {
+                const normalizedKey = key.trim().toUpperCase();
+                if (normalizedKey === 'RA' || normalizedKey === 'AR') normalizedMetrics.AR = eval.trust_metrics[key];
+                else if (normalizedKey === 'EA' || normalizedKey === 'AE') normalizedMetrics.AE = eval.trust_metrics[key];
+                else if (normalizedKey === 'RE' || normalizedKey === 'ESR') normalizedMetrics.ESR = eval.trust_metrics[key];
+                else if (normalizedKey === 'MCS' || normalizedKey === 'SDM') normalizedMetrics.SDM = eval.trust_metrics[key];
+                else if (normalizedKey === 'MS' || normalizedKey === 'SM') normalizedMetrics.SM = eval.trust_metrics[key];
+                else normalizedMetrics[key] = eval.trust_metrics[key];
+            });
+            eval.trust_metrics = normalizedMetrics;
+        }
+        
+        // Assurer que les métriques existent
+        if (!eval.trust_metrics) {
+            eval.trust_metrics = {
+                AR: 0, AE: 0, ESR: 0, SDM: 0, SM: 0
+            };
+        }
+        
+        // Assurer un score par défaut
+        if (eval.trust_score === undefined || eval.trust_score === null) {
+            // Calculer le score moyen des métriques
+            const metrics = eval.trust_metrics;
+            const sum = (metrics.AR || 0) + (metrics.AE || 0) + (metrics.ESR || 0) + (metrics.SDM || 0) + (metrics.SM || 0);
+            eval.trust_score = Math.round((sum / 5) * 20); // Convertir 0-5 en 0-100
+        }
+        
+        // Assurer un nom d'évaluateur
+        if (!eval.evaluator_name) {
+            eval.evaluator_name = 'Anonyme';
+        }
+        
+        // Assurer une date
+        if (!eval.timestamp) {
+            eval.timestamp = new Date().toISOString();
+        }
+        
+        // Assurer un scénario ID
+        if (!eval.scenario_id && eval.scenario_id !== 0) {
+            eval.scenario_id = Math.floor(Math.random() * 16) + 1;
+        }
+    });
+    
+    // Calculer les statistiques globales
+    updateGlobalStats();
+    
+    // Créer la liste des scénarios pour le filtre
+    populateScenarioFilter();
+    
+    // Créer la liste des évaluateurs pour le filtre
+    populateEvaluatorFilter();
+    
+    // Afficher les données initiales
+    filterData();
+    filterAllEvaluations();
+}
+
+// ================= STATISTIQUES GLOBALES =================
+function updateGlobalStats() {
+    const totalEvaluations = allEvaluations.length;
+    
+    // Compter les scénarios uniques
+    const uniqueScenarios = [...new Set(allEvaluations.map(e => e.scenario_id))].filter(id => id !== undefined && id !== null);
+    
+    // Compter les évaluateurs uniques
+    const uniqueEvaluators = [...new Set(allEvaluations.map(e => e.evaluator_name || 'Anonyme'))];
+    
+    // Calculer le taux de conflit global
+    let totalConflict = 0;
+    let analyzedScenarios = 0;
+    
+    uniqueScenarios.forEach(scenarioId => {
+        const scenarioEvals = allEvaluations.filter(e => e.scenario_id === scenarioId);
+        if (scenarioEvals.length > 1) {
+            const avgScore = scenarioEvals.reduce((sum, e) => sum + (e.trust_score || 0), 0) / scenarioEvals.length;
+            const variance = scenarioEvals.reduce((sum, e) => sum + Math.pow((e.trust_score || 0) - avgScore, 2), 0) / scenarioEvals.length;
+            const stdDev = Math.sqrt(variance);
+            totalConflict += stdDev;
+            analyzedScenarios++;
+        }
+    });
+    
+    const avgConflict = analyzedScenarios > 0 ? (totalConflict / analyzedScenarios) : 0;
+    const conflictRate = Math.min(100, Math.round(avgConflict));
+    
+    // Mettre à jour l'interface
+    document.getElementById('totalEvaluations').textContent = totalEvaluations;
+    document.getElementById('totalScenarios').textContent = uniqueScenarios.length;
+    document.getElementById('totalEvaluators').textContent = uniqueEvaluators.length;
+    document.getElementById('conflictRate').textContent = `${conflictRate}%`;
+}
+
+// ================= FILTRES =================
+function populateScenarioFilter() {
+    const filter = document.getElementById('scenarioFilter');
+    filter.innerHTML = '<option value="all">Tous les scénarios</option>';
+    
+    // Trier les scénarios par ID
+    const uniqueScenarios = [...new Set(allEvaluations.map(e => e.scenario_id))]
+        .filter(id => id !== undefined && id !== null)
+        .sort((a, b) => a - b);
+    
+    // Ajouter les options
+    uniqueScenarios.forEach(scenarioId => {
+        const scenario = scenariosData.find(s => s.id === scenarioId);
+        const option = document.createElement('option');
+        option.value = scenarioId;
+        option.textContent = scenario ? `Scénario ${scenarioId} - ${scenario.title}` : `Scénario ${scenarioId}`;
+        filter.appendChild(option);
+    });
+}
+
+function populateEvaluatorFilter() {
+    const filter = document.getElementById('evaluatorFilter');
+    filter.innerHTML = '<option value="all">Tous les évaluateurs</option>';
+    
+    // Récupérer tous les évaluateurs uniques
+    const uniqueEvaluators = [...new Set(allEvaluations.map(e => e.evaluator_name || 'Anonyme'))]
+        .filter(name => name && name.trim() !== '')
+        .sort();
+    
+    // Ajouter les options
+    uniqueEvaluators.forEach(evaluator => {
+        const option = document.createElement('option');
+        option.value = evaluator;
+        option.textContent = evaluator;
+        filter.appendChild(option);
+    });
+}
+
+function filterData() {
+    const scenarioFilter = document.getElementById('scenarioFilter').value;
+    const confidenceFilter = document.getElementById('confidenceFilter').value;
+    const sortBy = document.getElementById('sortBy').value;
+    
+    // Filtrer par scénario
+    if (scenarioFilter === 'all') {
+        filteredEvaluations = allEvaluations;
+    } else {
+        filteredEvaluations = allEvaluations.filter(e => e.scenario_id === parseInt(scenarioFilter));
+    }
+    
+    // Grouper les évaluations par scénario
+    const groupedByScenario = {};
+    filteredEvaluations.forEach(eval => {
+        if (eval.scenario_id === undefined) return;
+        if (!groupedByScenario[eval.scenario_id]) {
+            groupedByScenario[eval.scenario_id] = [];
+        }
+        groupedByScenario[eval.scenario_id].push(eval);
+    });
+    
+    // Calculer les métriques pour chaque scénario
+    const scenarioMetrics = Object.keys(groupedByScenario).map(scenarioId => {
+        const evaluations = groupedByScenario[scenarioId];
+        const scenario = scenariosData.find(s => s.id === parseInt(scenarioId));
+        
+        // Calculer la confiance moyenne
+        const avgScore = evaluations.reduce((sum, e) => sum + (e.trust_score || 0), 0) / evaluations.length;
+        
+        // Calculer l'écart-type (niveau de conflit)
+        let stdDev = 0;
+        if (evaluations.length > 1) {
+            const variance = evaluations.reduce((sum, e) => sum + Math.pow((e.trust_score || 0) - avgScore, 2), 0) / evaluations.length;
+            stdDev = Math.sqrt(variance);
+        }
+        
+        // Déterminer le niveau de conflit
+        let conflictLevel = 'low';
+        if (stdDev > 40) conflictLevel = 'high';
+        else if (stdDev > 20) conflictLevel = 'medium';
+        
+        // Filtrer par niveau de conflit
+        if (confidenceFilter !== 'all' && conflictLevel !== confidenceFilter) {
+            return null;
+        }
+        
+        return {
+            scenarioId: parseInt(scenarioId),
+            scenario: scenario,
+            evaluations: evaluations,
+            avgScore: avgScore,
+            stdDev: stdDev,
+            conflictLevel: conflictLevel,
+            minScore: Math.min(...evaluations.map(e => e.trust_score || 0)),
+            maxScore: Math.max(...evaluations.map(e => e.trust_score || 0)),
+            dateRange: {
+                min: new Date(Math.min(...evaluations.map(e => new Date(e.timestamp).getTime()))),
+                max: new Date(Math.max(...evaluations.map(e => new Date(e.timestamp).getTime())))
+            }
+        };
+    }).filter(metric => metric !== null);
+    
+    // Trier selon le critère
+    scenarioMetrics.sort((a, b) => {
+        switch(sortBy) {
+            case 'scenario':
+                return a.scenarioId - b.scenarioId;
+            case 'conflict':
+                return b.stdDev - a.stdDev;
+            case 'evaluations':
+                return b.evaluations.length - a.evaluations.length;
+            case 'confidence':
+                return b.avgScore - a.avgScore;
+            default:
+                return a.scenarioId - b.scenarioId;
+        }
+    });
+    
+    // Mettre à jour l'affichage
+    displayScenarioTable(scenarioMetrics);
+    updateCharts(scenarioMetrics);
+}
+
+// ================= AFFICHAGE DU TABLEAU PAR SCÉNARIO =================
+function displayScenarioTable(scenarioMetrics) {
+    const tableContainer = document.getElementById('evaluationsTable');
+    
+    if (scenarioMetrics.length === 0) {
+        tableContainer.innerHTML = `
+            <div style="text-align: center; padding: 40px; background: #FFF3E0; border-radius: 10px; color: #EF6C00;">
+                <p style="font-size: 18px;">Aucune évaluation correspondant aux filtres sélectionnés</p>
+                <p>Essayez de modifier vos critères de recherche</p>
+            </div>
+        `;
+        return;
+    }
+    
+    let html = `
+        <table>
+            <thead>
+                <tr>
+                    <th>Scénario</th>
+                    <th>Évaluations</th>
+                    <th>Confiance moyenne</th>
+                    <th>Niveau de conflit</th>
+                    <th>Plage de scores</th>
+                    <th>Période</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+    `;
+    
+    scenarioMetrics.forEach(metric => {
+        const conflictClass = `conflict-${metric.conflictLevel}`;
+        const conflictText = metric.conflictLevel === 'high' ? 'Élevé' : 
+                           metric.conflictLevel === 'medium' ? 'Moyen' : 'Faible';
+        
+        html += `
+            <tr>
+                <td>
+                    <strong>Scénario ${metric.scenarioId}</strong><br>
+                    <small style="color:#666;">${metric.scenario ? metric.scenario.title : 'Non trouvé'}</small>
+                </td>
+                <td>
+                    <div style="font-weight:bold;color:#1976D2;">${metric.evaluations.length}</div>
+                    <small>${metric.evaluations.slice(0, 3).map(e => e.evaluator_name || 'Anonyme').join(', ')}${metric.evaluations.length > 3 ? '...' : ''}</small>
+                </td>
+                <td>
+                    <div style="font-weight:bold;font-size:18px;color:#1976D2;">${Math.round(metric.avgScore)}%</div>
+                    <div class="confidence-bar">
+                        <div class="confidence-fill ${getConfidenceClass(metric.avgScore)}" 
+                             style="width: ${metric.avgScore}%"></div>
+                    </div>
+                </td>
+                <td>
+                    <div><span class="conflict-indicator ${conflictClass}"></span> ${conflictText}</div>
+                    <small>Écart-type: ${metric.stdDev.toFixed(1)}%</small>
+                </td>
+                <td>
+                    <div>${Math.round(metric.minScore)}% - ${Math.round(metric.maxScore)}%</div>
+                    <small>Différence: ${Math.round(metric.maxScore - metric.minScore)}%</small>
+                </td>
+                <td>
+                    <div>${formatDate(metric.dateRange.min)}</div>
+                    <div>à ${formatDate(metric.dateRange.max)}</div>
+                </td>
+                <td>
+                    <button onclick="showScenarioDetails(${metric.scenarioId})" 
+                            style="padding:5px 10px;background:#1976D2;color:white;border:none;border-radius:5px;cursor:pointer;">
+                        Détails
+                    </button>
+                </td>
+            </tr>
+        `;
+    });
+    
+    html += `</tbody></table>`;
+    tableContainer.innerHTML = html;
+}
+
+// ================= TOUTES LES ÉVALUATIONS DÉTAILLÉES =================
+function filterAllEvaluations() {
+    const evaluatorFilter = document.getElementById('evaluatorFilter').value;
+    const scoreFilter = document.getElementById('scoreFilter').value;
+    const sortBy = document.getElementById('sortEvaluations').value;
+    
+    let filteredEvals = [...allEvaluations];
+    
+    // Filtrer par évaluateur
+    if (evaluatorFilter !== 'all') {
+        filteredEvals = filteredEvals.filter(e => 
+            (e.evaluator_name || 'Anonyme') === evaluatorFilter
+        );
+    }
+    
+    // Filtrer par score
+    if (scoreFilter !== 'all') {
+        filteredEvals = filteredEvals.filter(e => {
+            const score = e.trust_score || 0;
+            if (scoreFilter === 'high') return score >= 70;
+            if (scoreFilter === 'medium') return score >= 40 && score < 70;
+            if (scoreFilter === 'low') return score < 40;
+            return true;
+        });
+    }
+    
+    // Trier
+    filteredEvals.sort((a, b) => {
+        switch(sortBy) {
+            case 'date_desc':
+                return new Date(b.timestamp) - new Date(a.timestamp);
+            case 'date_asc':
+                return new Date(a.timestamp) - new Date(b.timestamp);
+            case 'score_desc':
+                return (b.trust_score || 0) - (a.trust_score || 0);
+            case 'score_asc':
+                return (a.trust_score || 0) - (b.trust_score || 0);
+            case 'scenario':
+                return (a.scenario_id || 0) - (b.scenario_id || 0);
+            default:
+                return new Date(b.timestamp) - new Date(a.timestamp);
+        }
+    });
+    
+    // Mettre à jour l'affichage
+    displayAllEvaluations(filteredEvals);
+}
+
+function displayAllEvaluations(evaluations) {
+    const container = document.getElementById('allEvaluationsTable');
+    
+    if (evaluations.length === 0) {
+        container.innerHTML = `
+            <div style="text-align: center; padding: 40px; background: #FFF3E0; border-radius: 10px; color: #EF6C00;">
+                <p style="font-size: 18px;">Aucune évaluation correspondant aux filtres</p>
+                <p>Essayez de modifier les critères de filtrage</p>
+            </div>
+        `;
+        return;
+    }
+    
+    let html = `
+        <table>
+            <thead>
+                <tr>
+                    <th>Évaluateur</th>
+                    <th>Scénario</th>
+                    <th>Score</th>
+                    <th class="metrics-table-cell">Métriques</th>
+                    <th>Commentaire</th>
+                    <th>Review</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+    `;
+    
+    evaluations.forEach(eval => {
+        const scenario = scenariosData.find(s => s.id === eval.scenario_id);
+        const review = reviewsData.find(r => r.evaluation_id === eval.id);
+        
+        // Vérifier si c'est une évaluation standard ou cross-reading
+        const isCrossReading = eval.cross_reading === true;
+        
+        html += `
+            <tr style="${isCrossReading ? 'background: #E3F2FD;' : ''}">
+                <td>
+                    <strong>${eval.evaluator_name || 'Anonyme'}</strong><br>
+                    <small>${eval.evaluator_role || ''}</small><br>
+                    <small style="color:#666;">${formatDate(new Date(eval.timestamp))}</small>
+                </td>
+                <td>
+                    <strong>Scénario ${eval.scenario_id || 'N/A'}</strong><br>
+                    <small style="color:#666;">${scenario ? scenario.title : 'Non trouvé'}</small>
+                    ${isCrossReading ? '<div class="scenario-badge" style="background:#4CAF50;color:white;margin-top:3px;">Cross-Reading</div>' : ''}
+                </td>
+                <td>
+                    <div style="font-weight:bold;font-size:18px;color:#1976D2;">${eval.trust_score || 0}%</div>
+                    <div class="confidence-bar">
+                        <div class="confidence-fill ${getConfidenceClass(eval.trust_score || 0)}" 
+                             style="width: ${eval.trust_score || 0}%"></div>
+                    </div>
+                </td>
+                <td class="metrics-table-cell">
+                    ${displayDetailedMetrics(eval.trust_metrics || {})}
+                </td>
+                <td style="max-width: 200px;">
+                    <small style="color:#666;">${eval.comment || 'Aucun commentaire'}</small>
+                </td>
+                <td>
+                    ${displayReviewStatus(review)}
+                </td>
+                <td>
+                    <button onclick="openReviewModal('${eval.id}')" 
+                            style="padding:5px 10px;background:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer;font-size:12px;">
+                        ✍️ Review
+                    </button>
+                </td>
+            </tr>
+        `;
+    });
+    
+    html += `</tbody></table>`;
+    container.innerHTML = html;
+}
+
+function displayDetailedMetrics(metrics) {
+    const metricDefinitions = {
+        'AR': {
+            name: 'AR',
+            fullName: 'Authenticité Réflexive',
+            question: 'L\'analyse reflète-t-elle fidèlement la situation réelle de l\'étudiant ?'
+        },
+        'AE': {
+            name: 'AE',
+            fullName: 'Alignement Empathique',
+            question: 'L\'agent comprend-il les émotions, motivations et difficultés de l\'étudiant ?'
+        },
+        'ESR': {
+            name: 'ESR',
+            fullName: 'Encouragement Sensible au Risque',
+            question: 'Les encouragements tiennent-ils compte des risques et difficultés identifiés ?'
+        },
+        'SDM': {
+            name: 'SDM',
+            fullName: 'Support aux Défis Mentaux',
+            question: 'L\'agent aide-t-il l\'étudiant à développer sa pensée critique et ses compétences cognitives ?'
+        },
+        'SM': {
+            name: 'SM',
+            fullName: 'Support Métacognitif',
+            question: 'L\'agent aide-t-il l\'étudiant à réfléchir sur ses propres stratégies d\'apprentissage ?'
+        }
+    };
+    
+    let html = '';
+    
+    Object.entries(metricDefinitions).forEach(([code, def]) => {
+        const value = metrics[code] || 0;
+        const stars = getStarsHTML(value);
+        
+        html += `
+            <div class="metric-detail">
+                <div style="font-weight:bold;color:#1976D2;">${def.fullName} (${def.name})</div>
+                <div class="stars-container">${stars}</div>
+                <div class="metric-question">${def.question}</div>
+                <div style="font-size:11px;color:#666;margin-top:3px;">
+                    Score: ${value}/5
+                </div>
+            </div>
+        `;
+    });
+    
+    return html;
+}
+
+function getStarsHTML(value) {
+    let stars = '';
+    const normalizedValue = Math.min(5, Math.max(0, value)); // S'assurer que c'est entre 0 et 5
+    for (let i = 1; i <= 5; i++) {
+        stars += `<span class="star ${i <= normalizedValue ? '' : 'empty'}">★</span>`;
+    }
+    return stars;
+}
+
+function displayReviewStatus(review) {
+    if (!review) {
+        return '<small style="color:#666;">Non reviewé</small>';
+    }
+    
+    const decisionText = {
+        'approved': '✅ Approuvé',
+        'needs_revision': '⚠️ Révision',
+        'rejected': '❌ Rejeté'
+    };
+    
+    const decisionClass = {
+        'approved': 'review-approved',
+        'needs_revision': 'review-revision',
+        'rejected': 'review-rejected'
+    };
+    
+    return `
+        <div>
+            <span class="review-badge ${decisionClass[review.decision]}">
+                ${decisionText[review.decision]}
+            </span><br>
+            <small style="font-size:10px;">${formatDate(new Date(review.timestamp))}</small><br>
+            <small style="color:#666;font-size:10px;">${review.reviewer || 'Anonyme'}</small>
+        </div>
+    `;
+}
+
+// ================= GESTION DES REVIEWS =================
+function openReviewModal(evaluationId) {
+    const evaluation = allEvaluations.find(e => e.id === evaluationId);
+    if (!evaluation) {
+        alert('Évaluation non trouvée');
+        return;
+    }
+    
+    const scenario = scenariosData.find(s => s.id === evaluation.scenario_id);
+    currentReviewEvalId = evaluationId;
+    
+    document.getElementById('modalEvaluator').textContent = 
+        `${evaluation.evaluator_name || 'Anonyme'} (${evaluation.evaluator_role || ''})`;
+    document.getElementById('modalScenario').textContent = 
+        `Scénario ${evaluation.scenario_id || 'N/A'} - ${scenario ? scenario.title : 'Non trouvé'}`;
+    document.getElementById('modalScore').textContent = `${evaluation.trust_score || 0}%`;
+    
+    // Charger le review existant s'il existe
+    const existingReview = reviewsData.find(r => r.evaluation_id === evaluationId);
+    if (existingReview) {
+        document.getElementById('reviewDecision').value = existingReview.decision;
+        document.getElementById('reviewComment').value = existingReview.review_comment || '';
+    } else {
+        document.getElementById('reviewDecision').value = 'approved';
+        document.getElementById('reviewComment').value = '';
+    }
+    
+    document.getElementById('reviewModal').style.display = 'flex';
+}
+
+function closeReviewModal() {
+    document.getElementById('reviewModal').style.display = 'none';
+    currentReviewEvalId = null;
+}
+
+function saveReview() {
+    if (!currentReviewEvalId) return;
+    
+    const decision = document.getElementById('reviewDecision').value;
+    const reviewComment = document.getElementById('reviewComment').value.trim();
+    
+    const evaluation = allEvaluations.find(e => e.id === currentReviewEvalId);
+    if (!evaluation) return;
+    
+    // Créer l'objet review
+    const reviewData = {
+        evaluation_id: currentReviewEvalId,
+        scenario_id: evaluation.scenario_id,
+        evaluator_name: evaluation.evaluator_name,
+        evaluator_role: evaluation.evaluator_role,
+        original_score: evaluation.trust_score,
+        original_comment: evaluation.comment,
+        decision: decision,
+        review_comment: reviewComment,
+        reviewer: 'Expert Reviewer',
+        timestamp: new Date().toISOString()
+    };
+    
+    // Envoyer au serveur via API
+    fetch('/api/save_review', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(reviewData)
+    })
+    .then(response => {
+        // Vérifier si la réponse est en HTML (erreur) au lieu de JSON
+        const contentType = response.headers.get("content-type");
+        if (!contentType || !contentType.includes("application/json")) {
+            return response.text().then(text => {
+                throw new Error(`Le serveur a renvoyé du HTML au lieu du JSON. Vérifiez que l'API /api/save_review existe.`);
+            });
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (data.status === 'ok') {
+            // Ajouter le review localement
+            const reviewId = `review_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+            reviewsData.push({
+                id: reviewId,
+                ...reviewData
+            });
+            
+            // Mettre à jour l'affichage
+            filterAllEvaluations();
+            
+            // Fermer la modale
+            closeReviewModal();
+            
+            showSuccessMessage(`✅ Review sauvegardé avec succès ! (${reviewsData.length} reviews au total)`);
+        } else {
+            throw new Error(data.error || 'Erreur inconnue');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur sauvegarde review:', error);
+        
+        // Sauvegarde locale en cas d'erreur API
+        const reviewId = `review_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        const localReview = {
+            id: reviewId,
+            ...reviewData
+        };
+        
+        reviewsData.push(localReview);
+        
+        // Mettre à jour l'affichage
+        filterAllEvaluations();
+        
+        // Fermer la modale
+        closeReviewModal();
+        
+        showSuccessMessage(`✅ Review sauvegardé localement (API non disponible). (${reviewsData.length} reviews)`);
+        
+        // Afficher un avertissement
+        showWarningMessage(`Le review a été sauvegardé localement. Pour une sauvegarde permanente, 
+            ajoutez l'endpoint /api/save_review à votre backend Flask.`);
+    });
+}
+
+// ================= GRAPHIQUES =================
+function updateCharts(scenarioMetrics) {
+    // Détruire les anciens graphiques s'ils existent
+    if (chart1) chart1.destroy();
+    if (chart2) chart2.destroy();
+    
+    if (scenarioMetrics.length === 0) {
+        document.querySelectorAll('.chart-container').forEach(container => {
+            container.innerHTML = '<p style="text-align:center;color:#666;padding:40px;">Aucune donnée à afficher</p>';
+        });
+        return;
+    }
+    
+    // Données pour les graphiques
+    const labels = scenarioMetrics.map(m => `Scénario ${m.scenarioId}`);
+    const avgScores = scenarioMetrics.map(m => Math.round(m.avgScore));
+    const stdDevs = scenarioMetrics.map(m => Math.round(m.stdDev));
+    const evaluationCounts = scenarioMetrics.map(m => m.evaluations.length);
+    
+    // Graphique 1 : Scores moyens par scénario
+    const ctx1 = document.getElementById('confidenceChart').getContext('2d');
+    chart1 = new Chart(ctx1, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Confiance moyenne (%)',
+                data: avgScores,
+                backgroundColor: avgScores.map(score => 
+                    score >= 70 ? 'rgba(67, 160, 71, 0.7)' :
+                    score >= 40 ? 'rgba(251, 140, 0, 0.7)' :
+                    'rgba(229, 57, 53, 0.7)'
+                ),
+                borderColor: avgScores.map(score => 
+                    score >= 70 ? '#43A047' :
+                    score >= 40 ? '#FB8C00' :
+                    '#E53935'
+                ),
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Confiance moyenne par scénario',
+                    font: { size: 16 }
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const scenario = scenarioMetrics[context.dataIndex];
+                            return [
+                                `Confiance: ${context.parsed.y}%`,
+                                `Évaluations: ${scenario.evaluations.length}`,
+                                `Min: ${Math.round(scenario.minScore)}%, Max: ${Math.round(scenario.maxScore)}%`,
+                                `Conflit: ${scenario.conflictLevel === 'high' ? 'Élevé' : 
+                                          scenario.conflictLevel === 'medium' ? 'Moyen' : 'Faible'}`
+                            ];
+                        }
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    max: 100,
+                    title: {
+                        display: true,
+                        text: 'Score de confiance (%)'
+                    }
+                }
+            }
+        }
+    });
+    
+    // Graphique 2 : Niveau de conflit
+    const ctx2 = document.getElementById('conflictChart').getContext('2d');
+    chart2 = new Chart(ctx2, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Écart-type (conflit)',
+                    data: stdDevs,
+                    borderColor: '#E53935',
+                    backgroundColor: 'rgba(229, 57, 53, 0.1)',
+                    borderWidth: 2,
+                    fill: true,
+                    tension: 0.4
+                },
+                {
+                    label: 'Nombre d\'évaluations',
+                    data: evaluationCounts,
+                    borderColor: '#1976D2',
+                    backgroundColor: 'rgba(25, 118, 210, 0.1)',
+                    borderWidth: 2,
+                    fill: true,
+                    tension: 0.4,
+                    yAxisID: 'y1'
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Niveau de conflit et nombre d\'évaluations',
+                    font: { size: 16 }
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Écart-type (%)'
+                    }
+                },
+                y1: {
+                    beginAtZero: true,
+                    position: 'right',
+                    title: {
+                        display: true,
+                        text: 'Nombre d\'évaluations'
+                    },
+                    grid: {
+                        drawOnChartArea: false
+                    }
+                }
+            }
+        }
+    });
+}
+
+// ================= DÉTAILS D'UN SCÉNARIO =================
+function showScenarioDetails(scenarioId) {
+    const scenario = scenariosData.find(s => s.id === scenarioId);
+    const evaluations = allEvaluations.filter(e => e.scenario_id === scenarioId);
+    
+    if (!scenario) {
+        alert('Scénario non trouvé');
+        return;
+    }
+    
+    // Mettre à jour le titre
+    document.getElementById('detailScenarioTitle').textContent = `${scenarioId} - ${scenario.title}`;
+    
+    // Calculer les métriques détaillées
+    const avgScore = evaluations.reduce((sum, e) => sum + (e.trust_score || 0), 0) / evaluations.length;
+    const metricsAvg = {};
+    const metricsStdDev = {};
+    
+    // Initialiser les moyennes
+    const metricKeys = ['AR', 'AE', 'ESR', 'SDM', 'SM'];
+    metricKeys.forEach(key => {
+        const values = evaluations.map(e => e.trust_metrics[key] || 0);
+        metricsAvg[key] = values.reduce((sum, v) => sum + v, 0) / values.length;
+        
+        // Calculer l'écart-type
+        if (values.length > 1) {
+            const variance = values.reduce((sum, v) => sum + Math.pow(v - metricsAvg[key], 2), 0) / values.length;
+            metricsStdDev[key] = Math.sqrt(variance);
+        } else {
+            metricsStdDev[key] = 0;
+        }
+    });
+    
+    // Préparer le contenu HTML
+    let html = `
+        <div style="margin-bottom: 20px;">
+            <h3>${scenario.manifest?.manifeste || 'Pas de manifeste'}</h3>
+            <p><strong>Type:</strong> ${scenario.manifest?.type || 'Non spécifié'}</p>
+            <p><strong>Description:</strong> ${scenario.manifest?.description || 'Pas de description'}</p>
+        </div>
+        
+        <div class="details-grid">
+            <div class="details-card">
+                <h4>📊 Résumé des évaluations</h4>
+                <p><strong>Nombre d'évaluations:</strong> ${evaluations.length}</p>
+                <p><strong>Confiance moyenne:</strong> ${Math.round(avgScore)}%</p>
+                <p><strong>Plage de scores:</strong> ${Math.round(Math.min(...evaluations.map(e => e.trust_score || 0)))}% - 
+                   ${Math.round(Math.max(...evaluations.map(e => e.trust_score || 0)))}%</p>
+                <p><strong>Période:</strong> ${formatDate(new Date(Math.min(...evaluations.map(e => new Date(e.timestamp).getTime()))))} 
+                   à ${formatDate(new Date(Math.max(...evaluations.map(e => new Date(e.timestamp).getTime()))))}</p>
+            </div>
+            
+            <div class="details-card">
+                <h4>🎯 Métriques moyennes</h4>
+                ${metricKeys.map(key => `
+                    <div style="margin: 5px 0;">
+                        <span style="display:inline-block;width:100px;">${getMetricName(key)}:</span>
+                        <span style="font-weight:bold;color:#1976D2;">${metricsAvg[key].toFixed(1)}/5</span>
+                        <div style="display:inline-block;width:100px;height:10px;background:#e0e0e0;border-radius:5px;margin-left:10px;">
+                            <div style="height:100%;width:${metricsAvg[key] * 20}%;background:#1976D2;border-radius:5px;"></div>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+        
+        <h3 style="margin-top:30px;">📋 Détail des évaluations</h3>
+    `;
+    
+    // Tableau des évaluations individuelles
+    html += `
+        <table style="margin-top:20px;">
+            <thead>
+                <tr>
+                    <th>Évaluateur</th>
+                    <th>Date</th>
+                    <th>Score global</th>
+                    ${metricKeys.map(key => `<th>${getMetricName(key)}</th>`).join('')}
+                    <th>Commentaire</th>
+                </tr>
+            </thead>
+            <tbody>
+    `;
+    
+    evaluations.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)).forEach(eval => {
+        html += `
+            <tr>
+                <td><strong>${eval.evaluator_name || 'Anonyme'}</strong><br>
+                    <small>${eval.evaluator_role || ''}</small></td>
+                <td>${formatDate(new Date(eval.timestamp))}</td>
+                <td>
+                    <div style="font-weight:bold;color:#1976D2;">${eval.trust_score || 0}%</div>
+                    <div class="confidence-bar">
+                        <div class="confidence-fill ${getConfidenceClass(eval.trust_score || 0)}" 
+                             style="width: ${eval.trust_score || 0}%"></div>
+                    </div>
+                </td>
+                ${metricKeys.map(key => `
+                    <td>
+                        <div style="text-align:center;font-weight:bold;color:#1976D2;">${eval.trust_metrics[key] || 0}/5</div>
+                        <div style="display:flex;justify-content:center;gap:2px;margin-top:5px;">
+                            ${[1,2,3,4,5].map(i => `
+                                <div style="width:12px;height:12px;border-radius:50%;
+                                     background:${i <= (eval.trust_metrics[key] || 0) ? '#1976D2' : '#e0e0e0'}"></div>
+                            `).join('')}
+                        </div>
+                    </td>
+                `).join('')}
+                <td><small style="color:#666;">${eval.comment || 'Aucun commentaire'}</small></td>
+            </tr>
+        `;
+    });
+    
+    html += `</tbody></table>`;
+    
+    // Analyse des divergences
+    if (evaluations.length > 1) {
+        html += `
+            <h3 style="margin-top:30px;">🔍 Analyse des divergences</h3>
+            <div class="comparison-chart">
+        `;
+        
+        metricKeys.forEach(key => {
+            const values = evaluations.map(e => e.trust_metrics[key] || 0);
+            const maxDiff = Math.max(...values) - Math.min(...values);
+            
+            html += `
+                <div class="comparison-item">
+                    <h4>${getMetricName(key)}</h4>
+                    <p style="font-size:24px;font-weight:bold;color:${maxDiff >= 3 ? '#E53935' : 
+                                                                maxDiff >= 2 ? '#FB8C00' : '#43A047'}">
+                        ${maxDiff} pts
+                    </p>
+                    <p><small>Différence maximale</small></p>
+                    <p>Moyenne: ${metricsAvg[key].toFixed(1)}/5</p>
+                    <p>Écart-type: ${metricsStdDev[key].toFixed(1)}</p>
+                </div>
+            `;
+        });
+        
+        html += `</div>`;
+    }
+    
+    // Mettre à jour le contenu et afficher
+    document.getElementById('scenarioContent').innerHTML = html;
+    document.getElementById('scenarioDetails').classList.add('active');
+    
+    // Scroll vers les détails
+    document.getElementById('scenarioDetails').scrollIntoView({ behavior: 'smooth' });
+}
+
+// ================= FONCTIONS UTILITAIRES =================
+function getMetricName(code) {
+    const names = {
+        'AR': 'Authenticité Réflexive',
+        'AE': 'Alignement Empathique',
+        'ESR': 'Encouragement Sensible au Risque',
+        'SDM': 'Support aux Défis Mentaux',
+        'SM': 'Support Métacognitif'
+    };
+    return names[code] || code;
+}
+
+function getConfidenceClass(score) {
+    if (score >= 70) return 'high-confidence';
+    if (score >= 40) return 'medium-confidence';
+    return 'low-confidence';
+}
+
+function formatDate(date) {
+    if (!date || isNaN(date.getTime())) {
+        return 'Date invalide';
+    }
+    return date.toLocaleDateString('fr-FR', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}
+
+// ================= GESTION DES MESSAGES =================
+function showLoadingMessage(message) {
+    const loadingDiv = document.querySelector('.loading p') || document.createElement('p');
+    loadingDiv.textContent = message;
+}
+
+function showSuccessMessage(message) {
+    const successDiv = document.getElementById('successMessage');
+    if (successDiv) {
+        successDiv.innerHTML = `✅ ${message}`;
+        successDiv.style.display = 'block';
+        setTimeout(() => {
+            successDiv.style.display = 'none';
+        }, 5000);
+    }
+}
+
+function showErrorMessage(message) {
+    const tableContainer = document.getElementById('evaluationsTable');
+    if (tableContainer) {
+        tableContainer.innerHTML = `
+            <div class="error-message">
+                <h3>⚠️ Erreur de chargement</h3>
+                <div>${message}</div>
+            </div>
+        `;
+    }
+}
+
+function showWarningMessage(message) {
+    const warningDiv = document.getElementById('warningMessage');
+    if (warningDiv) {
+        warningDiv.innerHTML = `
+            <strong>⚠️ Aucune donnée trouvée</strong>
+            <p>${message}</p>
+            <button onclick="generateTestData()" class="test-data-btn">
+                🧪 Générer des données de test
+            </button>
+        `;
+        warningDiv.style.display = 'block';
+    }
+}
+
+// ================= EXPOSITION DES FONCTIONS GLOBALES =================
+window.filterData = filterData;
+window.filterAllEvaluations = filterAllEvaluations;
+window.showScenarioDetails = showScenarioDetails;
+window.openReviewModal = openReviewModal;
+window.closeReviewModal = closeReviewModal;
+window.saveReview = saveReview;
+window.generateTestData = generateTestData;
+window.loadData = loadData;