Upload cross_reading/consensus_building.html with huggingface_hub

cross_reading/consensus_building.html

@@ -477,6 +477,37 @@
                 grid-template-columns: 1fr;
             }
         }
+
+        /* Styles pour les messages d'erreur/absence de données */
+        .no-data-message {
+            text-align: center;
+            padding: 60px;
+            color: #7f8c8d;
+            background: #f8f9fa;
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+
+        .no-data-message h3 {
+            margin-bottom: 15px;
+            color: #2c3e50;
+        }
+
+        .no-data-message button {
+            margin-top: 15px;
+            padding: 10px 20px;
+            background: #3498db;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: background 0.3s;
+        }
+
+        .no-data-message button:hover {
+            background: #2980b9;
+        }
     </style>
     
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -625,7 +656,7 @@
             <!-- Graphique principal -->
             <div class="chart-container">
                 <h3>📊 Indice Global de Confiance: Avant vs Après</h3>
-                <div class="chart-wrapper">
+                <div class="chart-wrapper" id="mainTrustChartContainer">
                     <canvas id="mainTrustChart"></canvas>
                 </div>
             </div>
@@ -633,7 +664,7 @@
             <!-- Graphique détaillé des métriques -->
             <div class="chart-container">
                 <h3>📈 Détail des 5 Métriques (Moyenne)</h3>
-                <div class="chart-wrapper">
+                <div class="chart-wrapper" id="detailedMetricsChartContainer">
                     <canvas id="detailedMetricsChart"></canvas>
                 </div>
             </div>
@@ -641,7 +672,7 @@
             <!-- Graphique d'amélioration -->
             <div class="chart-container">
                 <h3>📈 Amélioration par Scénario</h3>
-                <div class="chart-wrapper">
+                <div class="chart-wrapper" id="improvementChartContainer">
                     <canvas id="improvementChart"></canvas>
                 </div>
             </div>
@@ -702,25 +733,17 @@
         // Scénarios - seront chargés depuis scenarios_list.json
         let scenariosList = [];
         
-        // Données initiales de confiance (simulées - trust_stats.json)
-        let trustStatsData = {
-            "S1": { AR: 68, AE: 72, ESR: 65, SDM: 70, SM: 60, moyenne: 67.0 },
-            "S2": { AR: 72, AE: 75, ESR: 70, SDM: 68, SM: 65, moyenne: 70.0 },
-            "S3": { AR: 56, AE: 60, ESR: 52, SDM: 55, SM: 50, moyenne: 54.6 },
-            "S4": { AR: 81, AE: 85, ESR: 78, SDM: 80, SM: 75, moyenne: 79.8 },
-            "S5": { AR: 65, AE: 68, ESR: 62, SDM: 64, SM: 60, moyenne: 63.8 },
-            "S6": { AR: 74, AE: 78, ESR: 70, SDM: 72, SM: 68, moyenne: 72.4 },
-            "S7": { AR: 59, AE: 62, ESR: 55, SDM: 58, SM: 52, moyenne: 57.2 },
-            "S8": { AR: 85, AE: 88, ESR: 82, SDM: 84, SM: 80, moyenne: 83.8 },
-            "S9": { AR: 48, AE: 52, ESR: 45, SDM: 48, SM: 42, moyenne: 47.0 },
-            "S10": { AR: 77, AE: 80, ESR: 75, SDM: 76, SM: 72, moyenne: 76.0 },
-            "S11": { AR: 69, AE: 72, ESR: 65, SDM: 68, SM: 64, moyenne: 67.6 },
-            "S12": { AR: 82, AE: 85, ESR: 80, SDM: 81, SM: 78, moyenne: 81.2 }
-        };
-        
-        // Données calibrées
+        // Données initiales de confiance (chargées depuis trust_stats.json)
+        let trustStatsData = {};
+        
+        // Données calibrées (depuis localStorage et calibration-trust.json)
         let calibrationData = JSON.parse(localStorage.getItem('calibration-trust')) || {};
         
+        // Variables pour stocker les instances de graphiques
+        let mainChart = null;
+        let improvementChart = null;
+        let detailedChart = null;
+        
         // ============================================
         // CHARGEMENT DES SCÉNARIOS DEPUIS JSON
         // ============================================
@@ -731,25 +754,139 @@
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
-                scenariosList = await response.json();
-                console.log('Scénarios chargés depuis scenarios_list.json:', scenariosList);
+                const data = await response.json();
+                
+                // Vérifier si c'est un tableau ou un objet avec une propriété
+                if (Array.isArray(data)) {
+                    scenariosList = data;
+                    console.log(`${scenariosList.length} scénarios chargés depuis scenarios_list.json (format tableau)`);
+                } else if (data.scenarios && Array.isArray(data.scenarios)) {
+                    scenariosList = data.scenarios;
+                    console.log(`${scenariosList.length} scénarios chargés depuis scenarios_list.json (format objet.scenarios)`);
+                } else {
+                    throw new Error('Format de fichier JSON invalide');
+                }
+                
+                // S'assurer que tous les scénarios ont les bons IDs
+                scenariosList.forEach((scenario, index) => {
+                    if (!scenario.id) {
+                        scenario.id = `S${index + 1}`;
+                    }
+                    // Normaliser l'ID au format S1, S2, etc.
+                    if (typeof scenario.id === 'number') {
+                        scenario.id = `S${scenario.id}`;
+                    }
+                });
+                
             } catch (error) {
-                console.error('Erreur de chargement de scenarios_list.json, utilisation des données par défaut:', error);
-                // Données par défaut si le fichier n'est pas trouvé
-                scenariosList = [
-                    { id: 'S1', name: 'Analyse de risque financier', description: 'Évaluation des risques de marché avec modèles prédictifs' },
-                    { id: 'S2', name: 'Diagnostic médical assisté', description: 'Interprétation d\'imagerie médicale avec IA' },
-                    { id: 'S3', name: 'Rédaction juridique', description: 'Rédaction de contrats avec vérification juridique' },
-                    { id: 'S4', name: 'Analyse sentiment client', description: 'Analyse des retours clients sur réseaux sociaux' },
-                    { id: 'S5', name: 'Optimisation logistique', description: 'Planification de chaîne d\'approvisionnement' },
-                    { id: 'S6', name: 'Tutorat personnalisé', description: 'Adaptation pédagogique basée sur le profil apprenant' },
-                    { id: 'S7', name: 'Recherche scientifique', description: 'Analyse de données expérimentales complexes' },
-                    { id: 'S8', name: 'Support technique', description: 'Résolution de problèmes techniques par étapes' },
-                    { id: 'S9', name: 'Création artistique', description: 'Génération d\'œuvres artistiques avec contraintes' },
-                    { id: 'S10', name: 'Audit de sécurité', description: 'Détection de vulnérabilités dans systèmes IT' },
-                    { id: 'S11', name: 'Traduction spécialisée', description: 'Traduction technique avec contexte métier' },
-                    { id: 'S12', name: 'Prédiction météo', description: 'Modélisation climatique à court terme' }
-                ];
+                console.error('Erreur de chargement de scenarios_list.json:', error);
+                // Générer des scénarios par défaut
+                scenariosList = generateDefaultScenarios();
+                console.log(`Utilisation de ${scenariosList.length} scénarios par défaut`);
+            }
+        }
+        
+        function generateDefaultScenarios() {
+            // Générer des scénarios par défaut S1 à S16
+            const scenarios = [];
+            for (let i = 1; i <= 16; i++) {
+                scenarios.push({
+                    id: `S${i}`,
+                    name: `Scénario ${i}`,
+                    description: `Description du scénario ${i}`
+                });
+            }
+            return scenarios;
+        }
+        
+        // ============================================
+        // CHARGEMENT DES DONNÉES RÉELLES DES FICHIERS JSON
+        // ============================================
+        
+        async function loadRealDataFromJSON() {
+            try {
+                // 1. Charger les données de trust_stats.json pour les valeurs initiales
+                const trustResponse = await fetch('trust_stats.json');
+                if (trustResponse.ok) {
+                    const trustData = await trustResponse.json();
+                    console.log('Données chargées depuis trust_stats.json:', trustData);
+                    
+                    // Convertir les données de trust_stats.json au bon format
+                    if (trustData.evaluations && Array.isArray(trustData.evaluations)) {
+                        trustStatsData = {};
+                        
+                        trustData.evaluations.forEach(eval => {
+                            const scenarioId = `S${eval.scenario_id}`;
+                            
+                            // Normaliser les métriques (RA -> AR, EA -> AE, etc.)
+                            const metricsData = eval.trust_metrics || {};
+                            const normalizedMetrics = {
+                                AR: (metricsData.RA || metricsData.AR || 0) * 20, // Convertir 0-5 à 0-100
+                                AE: (metricsData.EA || metricsData.AE || 0) * 20,
+                                ESR: (metricsData.RE || metricsData.ESR || 0) * 20,
+                                SDM: (metricsData.MCS || metricsData.SDM || 0) * 20,
+                                SM: (metricsData.MS || metricsData.SM || 0) * 20
+                            };
+                            
+                            // Calculer la moyenne
+                            const values = Object.values(normalizedMetrics);
+                            const moyenne = values.reduce((a, b) => a + b, 0) / values.length;
+                            
+                            trustStatsData[scenarioId] = {
+                                ...normalizedMetrics,
+                                moyenne: moyenne
+                            };
+                        });
+                        
+                        console.log('trustStatsData mis à jour:', trustStatsData);
+                    }
+                }
+                
+                // 2. Charger les données de calibration-trust.json
+                const calibrationResponse = await fetch('calibration-trust.json');
+                if (calibrationResponse.ok) {
+                    const calibrationJson = await calibrationResponse.json();
+                    console.log('Données chargées depuis calibration-trust.json:', calibrationJson);
+                    
+                    // Extraire les évaluations de tous les experts
+                    if (calibrationJson.experts && Array.isArray(calibrationJson.experts)) {
+                        calibrationJson.experts.forEach(expert => {
+                            if (expert.evaluations && Array.isArray(expert.evaluations)) {
+                                expert.evaluations.forEach(evaluation => {
+                                    if (evaluation.scenario) {
+                                        // Stocker la dernière évaluation pour chaque scénario
+                                        calibrationData[evaluation.scenario] = evaluation;
+                                    }
+                                });
+                            }
+                        });
+                    }
+                    
+                    console.log('calibrationData chargé depuis JSON:', calibrationData);
+                    
+                    // Mettre à jour localStorage avec les données du fichier
+                    localStorage.setItem('calibration-trust', JSON.stringify(calibrationData));
+                }
+                
+                // 3. S'assurer que tous les scénarios S1-S16 ont des données par défaut
+                for (let i = 1; i <= 16; i++) {
+                    const scenarioId = `S${i}`;
+                    if (!trustStatsData[scenarioId]) {
+                        trustStatsData[scenarioId] = {
+                            AR: 50, AE: 50, ESR: 50, SDM: 50, SM: 50, moyenne: 50
+                        };
+                    }
+                }
+                
+            } catch (error) {
+                console.error('Erreur de chargement des données JSON:', error);
+                // Initialiser avec des données par défaut
+                for (let i = 1; i <= 16; i++) {
+                    const scenarioId = `S${i}`;
+                    trustStatsData[scenarioId] = {
+                        AR: 50, AE: 50, ESR: 50, SDM: 50, SM: 50, moyenne: 50
+                    };
+                }
             }
         }
         
@@ -800,25 +937,38 @@
                 const scenario = scenariosList.find(s => s.id === selectedId);
                 
                 if (scenario) {
-                    document.getElementById('scenarioDescription').textContent = scenario.description;
+                    document.getElementById('scenarioDescription').textContent = scenario.description || 'Aucune description disponible';
                     document.getElementById('metricsEvaluation').style.display = 'block';
                     loadMetricsForScenario(selectedId);
                 } else {
                     document.getElementById('metricsEvaluation').style.display = 'none';
+                    document.getElementById('scenarioDescription').textContent = 'Scénario non trouvé';
                 }
             });
+            
+            // Sélectionner le premier scénario par défaut
+            if (scenariosList.length > 0) {
+                setTimeout(() => {
+                    select.value = scenariosList[0].id;
+                    select.dispatchEvent(new Event('change'));
+                }, 500);
+            }
         }
         
         function loadMetricsForScenario(scenarioId) {
             const metricsGrid = document.getElementById('metricsGrid');
             metricsGrid.innerHTML = '';
             
-            const previousCalibration = calibrationData[scenarioId];
+            // S'assurer que l'ID est au bon format
+            const normalizedId = typeof scenarioId === 'number' ? `S${scenarioId}` : scenarioId;
+            
+            const previousCalibration = calibrationData[normalizedId];
+            const initialData = trustStatsData[normalizedId];
             
             metrics.forEach(metric => {
-                const initialValue = trustStatsData[scenarioId] ? trustStatsData[scenarioId][metric.id] : 50;
+                const initialValue = initialData ? initialData[metric.id] : 50;
                 const previousValue = previousCalibration ? previousCalibration[metric.id] : null;
-                const currentValue = previousValue || initialValue;
+                const currentValue = previousValue !== null && previousValue !== undefined ? previousValue : initialValue;
                 
                 const metricCard = document.createElement('div');
                 metricCard.className = 'metric-card';
@@ -832,7 +982,7 @@
                         <span style="color: #e74c3c; font-weight: bold;">
                             Initial: ${initialValue}%
                         </span>
-                        ${previousValue ? 
+                        ${previousValue !== null && previousValue !== undefined ? 
                             `<span style="color: #27ae60; font-weight: bold;">
                                 Précédent: ${previousValue}%
                             </span>` : ''
@@ -868,14 +1018,14 @@
                 previousMetricsDiv.innerHTML = `
                     <p><strong>Date:</strong> ${previousCalibration.date || 'Non spécifiée'}</p>
                     <p><strong>Expert:</strong> ${previousCalibration.expert || 'Anonyme'}</p>
-                    <p><strong>Indice Global:</strong> ${previousCalibration.moyenne || calculateAverage(scenarioId, previousCalibration)}%</p>
+                    <p><strong>Indice Global:</strong> ${previousCalibration.moyenne || calculateAverage(normalizedId, previousCalibration)}%</p>
                     <div class="metric-details">
                         ${metrics.map(m => `
                             <div style="margin: 5px 0;">
                                 <span>${m.name}:</span>
-                                <span style="float: right; font-weight: bold;">${previousCalibration[m.id]}%</span>
+                                <span style="float: right; font-weight: bold;">${previousCalibration[m.id] || 0}%</span>
                                 <div class="metric-bar">
-                                    <div class="metric-fill" style="width: ${previousCalibration[m.id]}%; background: ${m.color};"></div>
+                                    <div class="metric-fill" style="width: ${previousCalibration[m.id] || 0}%; background: ${m.color};"></div>
                                 </div>
                             </div>
                         `).join('')}
@@ -903,10 +1053,17 @@
         function updateGlobalIndex() {
             const sliders = document.querySelectorAll('.metric-slider');
             let sum = 0;
+            let validSliders = 0;
+            
             sliders.forEach(slider => {
-                sum += parseInt(slider.value);
+                const value = parseInt(slider.value);
+                if (!isNaN(value)) {
+                    sum += value;
+                    validSliders++;
+                }
             });
-            const average = sliders.length > 0 ? sum / sliders.length : 0;
+            
+            const average = validSliders > 0 ? sum / validSliders : 0;
             
             document.getElementById('globalIndexValue').textContent = `${average.toFixed(1)}%`;
             document.getElementById('globalIndexBar').style.width = `${average}%`;
@@ -934,7 +1091,11 @@
             return (sum / values.length).toFixed(1);
         }
         
-        function saveCalibration() {
+        // ============================================
+        // SAUVEGARDE DE CALIBRATION DANS calibration-trust.json
+        // ============================================
+        
+        async function saveCalibration() {
             const scenarioId = document.getElementById('scenarioSelect').value;
             
             if (!scenarioId) {
@@ -942,86 +1103,249 @@
                 return;
             }
             
-            // Récupérer les valeurs
+            // Normaliser l'ID du scénario
+            const normalizedId = scenarioId;
+            
+            // Demander le nom de l'expert
+            const expertName = prompt('Votre nom (obligatoire pour la sauvegarde):', 'Expert');
+            if (!expertName || expertName.trim() === '') {
+                showNotification('Le nom de l\'expert est obligatoire', 'error');
+                return;
+            }
+            
+            // Récupérer les valeurs des sliders
             const calibration = {
-                scenario: scenarioId,
+                scenario: normalizedId,
                 date: new Date().toISOString().split('T')[0],
                 time: new Date().toTimeString().split(' ')[0],
-                expert: prompt('Votre nom (optionnel):', 'Expert') || 'Anonyme'
+                expert: expertName.trim(),
+                expert_id: generateExpertId(expertName)
             };
             
+            // Récupérer les valeurs des métriques
             metrics.forEach(metric => {
                 const slider = document.querySelector(`[data-metric="${metric.id}"]`);
                 calibration[metric.id] = parseInt(slider.value);
             });
             
             // Calculer l'indice global
-            calibration.moyenne = calculateAverage(scenarioId, calibration);
+            calibration.moyenne = calculateAverage(normalizedId, calibration);
             
             // Afficher le chargement
             document.getElementById('loadingExpert').style.display = 'block';
             
-            setTimeout(() => {
-                // Sauvegarder
-                calibrationData[scenarioId] = calibration;
+            try {
+                // 1. Sauvegarder dans localStorage (pour l'interface immédiate)
+                calibrationData[normalizedId] = calibration;
                 localStorage.setItem('calibration-trust', JSON.stringify(calibrationData));
                 
-                // Mettre à jour trustStatsData si nécessaire
-                if (!trustStatsData[scenarioId]) {
-                    trustStatsData[scenarioId] = {};
+                // 2. Sauvegarder dans le fichier calibration-trust.json
+                await saveCalibrationToJSON(calibration);
+                
+                // 3. Mettre à jour trustStatsData si nécessaire
+                if (!trustStatsData[normalizedId]) {
+                    trustStatsData[normalizedId] = {};
                 }
                 
                 document.getElementById('loadingExpert').style.display = 'none';
-                showNotification(`Calibration enregistrée pour ${scenarioId}`, 'success');
-                loadMetricsForScenario(scenarioId);
+                showNotification(`✅ Calibration enregistrée pour ${normalizedId}`, 'success');
+                loadMetricsForScenario(normalizedId);
                 
+                // 4. Recharger les données si on est sur l'onglet consensus
                 if (document.getElementById('consensus').classList.contains('active')) {
                     loadConsensusData();
                 }
-            }, 1500);
+                
+            } catch (error) {
+                document.getElementById('loadingExpert').style.display = 'none';
+                showNotification(`❌ Erreur: ${error.message}`, 'error');
+                console.error('Erreur sauvegarde calibration:', error);
+            }
+        }
+        
+        async function saveCalibrationToJSON(newCalibration) {
+            try {
+                // 1. Charger le fichier existant
+                let existingData = { experts: [] };
+                try {
+                    const response = await fetch('calibration-trust.json');
+                    if (response.ok) {
+                        existingData = await response.json();
+                    }
+                } catch (error) {
+                    console.log('Fichier calibration-trust.json non trouvé, création d\'un nouveau');
+                }
+                
+                // 2. Chercher l'expert existant ou en créer un nouveau
+                const expertName = newCalibration.expert;
+                const expertId = newCalibration.expert_id;
+                let expert = existingData.experts.find(e => 
+                    e.expert_id === expertId || e.expert_name === expertName
+                );
+                
+                if (!expert) {
+                    // Créer un nouvel expert
+                    expert = {
+                        expert_id: expertId,
+                        expert_name: expertName,
+                        evaluations: [],
+                        last_updated: new Date().toISOString()
+                    };
+                    existingData.experts.push(expert);
+                }
+                
+                // 3. Chercher si une évaluation existe déjà pour ce scénario
+                const existingEvaluationIndex = expert.evaluations.findIndex(
+                    eval => eval.scenario === newCalibration.scenario
+                );
+                
+                // Générer un ID d'évaluation unique
+                const evaluationId = generateEvaluationId();
+                
+                if (existingEvaluationIndex !== -1) {
+                    // Mettre à jour l'évaluation existante
+                    expert.evaluations[existingEvaluationIndex] = {
+                        evaluation_id: evaluationId,
+                        ...newCalibration
+                    };
+                } else {
+                    // Ajouter une nouvelle évaluation
+                    expert.evaluations.push({
+                        evaluation_id: evaluationId,
+                        ...newCalibration
+                    });
+                }
+                
+                // 4. Mettre à jour la date de dernière modification
+                expert.last_updated = new Date().toISOString();
+                
+                // 5. Sauvegarder le fichier
+                await saveJSONToFile('calibration-trust.json', existingData);
+                
+                console.log('Calibration sauvegardée dans calibration-trust.json:', newCalibration);
+                
+            } catch (error) {
+                console.error('Erreur sauvegarde dans JSON:', error);
+                throw new Error('Impossible de sauvegarder dans le fichier JSON');
+            }
+        }
+        
+        function generateExpertId(expertName) {
+            // Générer un ID d'expert basé sur le nom et la date
+            const cleanName = expertName.toLowerCase()
+                .replace(/\s+/g, '_')
+                .replace(/[^a-z0-9_]/g, '');
+            return `expert_${cleanName}_${Date.now()}`;
+        }
+        
+        function generateEvaluationId() {
+            return `eval_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        }
+        
+        async function saveJSONToFile(filename, data) {
+            // Dans un environnement réel, cela enverrait les données au serveur
+            // Pour le moment, nous allons simuler la sauvegarde et offrir un téléchargement
+            
+            try {
+                // Tentative d'envoi au serveur (si une API existe)
+                const response = await fetch('/api/save_calibration', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ filename: filename, data: data })
+                });
+                
+                if (response.ok) {
+                    const result = await response.json();
+                    console.log('Sauvegarde réussie via API:', result);
+                    return;
+                }
+            } catch (error) {
+                console.log('API non disponible, sauvegarde locale');
+            }
+            
+            // Fallback: Offrir le téléchargement du fichier
+            const dataStr = JSON.stringify(data, null, 2);
+            const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
+            
+            const linkElement = document.createElement('a');
+            linkElement.setAttribute('href', dataUri);
+            linkElement.setAttribute('download', filename);
+            linkElement.style.display = 'none';
+            
+            document.body.appendChild(linkElement);
+            linkElement.click();
+            document.body.removeChild(linkElement);
+            
+            // Afficher un message d'information
+            showNotification(
+                '📥 Fichier calibration-trust.json téléchargé. ' +
+                'Pour une sauvegarde automatique, ajoutez un endpoint /api/save_calibration à votre backend.',
+                'success'
+            );
         }
         
         // ============================================
         // PARTIE 2 : DASHBOARD CONSENSUS
         // ============================================
         
-        function loadConsensusData() {
+        async function loadConsensusData() {
             document.getElementById('loadingConsensus').style.display = 'block';
             
+            // Charger les données réelles des fichiers JSON
+            await loadRealDataFromJSON();
+            
+            // GÉNÉRER DES DONNÉES DE DÉMONSTRATION SI AUCUNE CALIBRATION N'EXISTE
+            if (Object.keys(calibrationData).length === 0) {
+                console.log('Aucune donnée de calibration, génération de données de démonstration...');
+                calibrationData = generateDemoDataFromRealStats();
+            }
+            
+            // S'assurer que scenariosList est chargé
+            if (scenariosList.length === 0) {
+                await loadScenariosFromJSON();
+            }
+            
             const calibratedScenarios = Object.keys(calibrationData);
             const totalScenarios = scenariosList.length;
             
-            // Calculer les statistiques globales
+            // Calculer les statistiques globales BASÉES SUR LES DONNÉES RÉELLES
             let totalImprovement = 0;
             let scenariosAbove80 = 0;
             let maxImprovement = 0;
             let maxScenario = '';
+            let scenariosWithData = 0;
             
             calibratedScenarios.forEach(scenarioId => {
                 const before = trustStatsData[scenarioId] ? trustStatsData[scenarioId].moyenne : 0;
                 const after = calibrationData[scenarioId].moyenne;
-                const improvement = after - before;
-                
-                totalImprovement += improvement;
                 
-                if (after >= 80) scenariosAbove80++;
-                
-                if (improvement > maxImprovement) {
-                    maxImprovement = improvement;
-                    maxScenario = scenarioId;
+                // Vérifier que les données existent
+                if (before !== undefined && after !== undefined) {
+                    const improvement = after - before;
+                    totalImprovement += improvement;
+                    scenariosWithData++;
+                    
+                    if (after >= 80) scenariosAbove80++;
+                    
+                    if (improvement > maxImprovement) {
+                        maxImprovement = improvement;
+                        maxScenario = scenarioId;
+                    }
                 }
             });
             
-            const avgImprovement = calibratedScenarios.length > 0 
-                ? (totalImprovement / calibratedScenarios.length).toFixed(1)
+            const avgImprovement = scenariosWithData > 0 
+                ? (totalImprovement / scenariosWithData).toFixed(1)
                 : 0;
             
             // Mettre à jour les statistiques
             document.getElementById('statsOverview').innerHTML = `
                 <div class="stat-card">
                     <div class="stat-label">Scénarios calibrés</div>
-                    <div class="stat-value">${calibratedScenarios.length}/${totalScenarios}</div>
-                    <div class="stat-label">(${Math.round(calibratedScenarios.length/totalScenarios*100)}%)</div>
+                    <div class="stat-value">${scenariosWithData}/${totalScenarios}</div>
+                    <div class="stat-label">(${Math.round(scenariosWithData/totalScenarios*100)}%)</div>
                 </div>
                 <div class="stat-card">
                     <div class="stat-label">Indice Global Moyen</div>
@@ -1030,7 +1354,7 @@
                 </div>
                 <div class="stat-card highlight">
                     <div class="stat-label">Scénarios >80%</div>
-                    <div class="stat-value">${scenariosAbove80}/${calibratedScenarios.length || 0}</div>
+                    <div class="stat-value">${scenariosAbove80}/${scenariosWithData || 0}</div>
                     <div class="stat-label">après calibration</div>
                 </div>
                 <div class="stat-card">
@@ -1049,13 +1373,73 @@
             document.getElementById('loadingConsensus').style.display = 'none';
         }
         
+        function generateDemoDataFromRealStats() {
+            // Générer des données de démonstration BASÉES SUR LES DONNÉES RÉELLES
+            const demoData = {};
+            
+            // Prendre les scénarios qui ont des données dans trustStatsData
+            const scenariosWithData = Object.keys(trustStatsData).filter(id => 
+                trustStatsData[id] && trustStatsData[id].moyenne !== undefined
+            );
+            
+            // Si pas assez de données, prendre les 8 premiers scénarios
+            const demoScenarios = scenariosWithData.length > 0 
+                ? scenariosWithData.slice(0, 8) 
+                : scenariosList.slice(0, 8).map(s => s.id);
+            
+            demoScenarios.forEach(scenarioId => {
+                const baseData = trustStatsData[scenarioId];
+                
+                if (baseData) {
+                    // Amélioration réaliste basée sur les données existantes
+                    const improvementFactor = 0.05 + (Math.random() * 0.2);
+                    
+                    const demoMetrics = {};
+                    metrics.forEach(metric => {
+                        const baseValue = baseData[metric.id] || 50;
+                        demoMetrics[metric.id] = Math.min(100, Math.round(baseValue * (1 + improvementFactor)));
+                    });
+                    
+                    const avg = metrics.reduce((sum, metric) => sum + (demoMetrics[metric.id] || 0), 0) / metrics.length;
+                    
+                    demoData[scenarioId] = {
+                        scenario: scenarioId,
+                        date: new Date().toISOString().split('T')[0],
+                        expert: "Expert Démo",
+                        expert_id: "expert_demo_1",
+                        ...demoMetrics,
+                        moyenne: avg.toFixed(1)
+                    };
+                }
+            });
+            
+            console.log('Données de démonstration générées à partir des stats réelles:', demoData);
+            return demoData;
+        }
+        
         function generateConsensusCharts() {
             const calibratedScenarios = Object.keys(calibrationData);
             
+            // Détruire les anciens graphiques s'ils existent
+            if (mainChart) mainChart.destroy();
+            if (improvementChart) improvementChart.destroy();
+            if (detailedChart) detailedChart.destroy();
+            
             if (calibratedScenarios.length === 0) {
-                document.getElementById('mainTrustChart').innerHTML = '<p style="text-align: center; color: #7f8c8d;">Aucune donnée de calibration disponible</p>';
-                document.getElementById('improvementChart').innerHTML = '<p style="text-align: center; color: #7f8c8d;">Aucune donnée de calibration disponible</p>';
-                document.getElementById('detailedMetricsChart').innerHTML = '<p style="text-align: center; color: #7f8c8d;">Aucune donnée de calibration disponible</p>';
+                // Afficher un message dans chaque conteneur de graphique
+                const noDataHTML = `
+                    <div class="no-data-message">
+                        <h3>📊 Aucune donnée disponible</h3>
+                        <p>Effectuez des calibrations dans l'onglet "Évaluation Expert" pour voir les graphiques ici.</p>
+                        <button onclick="switchTab('expert')">
+                            Aller à l'évaluation Expert
+                        </button>
+                    </div>
+                `;
+                
+                document.getElementById('mainTrustChartContainer').innerHTML = noDataHTML;
+                document.getElementById('improvementChartContainer').innerHTML = noDataHTML;
+                document.getElementById('detailedMetricsChartContainer').innerHTML = noDataHTML;
                 return;
             }
             
@@ -1067,8 +1451,7 @@
             
             // Graphique 1: Indice Global Avant/Après
             const trustCtx = document.getElementById('mainTrustChart').getContext('2d');
-            if (window.mainChart) window.mainChart.destroy();
-            window.mainChart = new Chart(trustCtx, {
+            mainChart = new Chart(trustCtx, {
                 type: 'bar',
                 data: {
                     labels: labels,
@@ -1117,8 +1500,7 @@
             
             // Graphique 2: Amélioration par scénario
             const improvementCtx = document.getElementById('improvementChart').getContext('2d');
-            if (window.improvementChart) window.improvementChart.destroy();
-            window.improvementChart = new Chart(improvementCtx, {
+            improvementChart = new Chart(improvementCtx, {
                 type: 'bar',
                 data: {
                     labels: labels,
@@ -1169,8 +1551,7 @@
                 return values.reduce((a, b) => a + b, 0) / values.length;
             });
             
-            if (window.detailedChart) window.detailedChart.destroy();
-            window.detailedChart = new Chart(detailedCtx, {
+            detailedChart = new Chart(detailedCtx, {
                 type: 'bar',
                 data: {
                     labels: metrics.map(m => m.id),
@@ -1210,66 +1591,106 @@
         
         function generateDetailedComparison() {
             const calibratedScenarios = Object.keys(calibrationData);
+            console.log('Scénarios calibrés pour la comparaison détaillée:', calibratedScenarios);
+            
             let html = '';
             
-            calibratedScenarios.forEach(scenarioId => {
-                const scenario = scenariosList.find(s => s.id === scenarioId);
-                const before = trustStatsData[scenarioId] || {};
-                const after = calibrationData[scenarioId] || {};
-                
-                html += `
-                    <div style="background: white; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.05);">
-                        <h4 style="color: #2c3e50; margin-bottom: 15px;">${scenarioId}: ${scenario ? scenario.name : 'Inconnu'}</h4>
-                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
+            if (calibratedScenarios.length === 0) {
+                html = `
+                    <div class="no-data-message">
+                        <h3>📋 Aucune donnée disponible</h3>
+                        <p>Effectuez des calibrations dans l'onglet "Évaluation Expert" pour voir les comparaisons détaillées.</p>
+                        <button onclick="switchTab('expert')">
+                            Aller à l'évaluation Expert
+                        </button>
+                    </div>
                 `;
+            } else {
+                // Trier les scénarios par ID
+                calibratedScenarios.sort((a, b) => {
+                    const numA = parseInt(a.replace('S', ''));
+                    const numB = parseInt(b.replace('S', ''));
+                    return numA - numB;
+                });
                 
-                metrics.forEach(metric => {
-                    const beforeValue = before[metric.id] || 0;
-                    const afterValue = after[metric.id] || 0;
-                    const improvement = afterValue - beforeValue;
+                calibratedScenarios.forEach(scenarioId => {
+                    const scenario = scenariosList.find(s => s.id === scenarioId);
+                    const before = trustStatsData[scenarioId] || {};
+                    const after = calibrationData[scenarioId] || {};
+                    
+                    console.log(`Génération pour ${scenarioId}:`, {before, after});
                     
                     html += `
-                        <div style="padding: 15px; border-radius: 8px; border-left: 4px solid ${metric.color}; background: #f8f9fa;">
-                            <div style="font-weight: bold; margin-bottom: 5px;">${metric.id}</div>
-                            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-                                <span style="color: #e74c3c; font-size: 14px;">${beforeValue}%</span>
-                                <span style="color: #27ae60; font-size: 14px;">${afterValue}%</span>
-                            </div>
-                            <div style="height: 6px; background: #e9ecef; border-radius: 3px; margin-bottom: 5px; overflow: hidden;">
-                                <div style="height: 100%; width: ${beforeValue}%; background: ${metric.color}; opacity: 0.5; float: left;"></div>
-                                <div style="height: 100%; width: ${afterValue - beforeValue}%; background: ${metric.color}; float: left;"></div>
+                        <div style="background: white; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.05);">
+                            <h4 style="color: #2c3e50; margin-bottom: 15px;">${scenarioId}: ${scenario ? scenario.name : 'Inconnu'}</h4>
+                            <p style="color: #666; margin-bottom: 15px; font-style: italic;">${scenario ? scenario.description : 'Pas de description'}</p>
+                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
+                    `;
+                    
+                    metrics.forEach(metric => {
+                        // Récupérer les valeurs avec des valeurs par défaut
+                        const beforeValue = before[metric.id] || 0;
+                        const afterValue = after[metric.id] || 0;
+                        const improvement = afterValue - beforeValue;
+                        
+                        // Assurer que les valeurs sont des nombres
+                        const safeBeforeValue = Number(beforeValue) || 0;
+                        const safeAfterValue = Number(afterValue) || 0;
+                        const safeImprovement = safeAfterValue - safeBeforeValue;
+                        
+                        // Calculer les largeurs pour les barres
+                        const beforeWidth = Math.min(100, Math.max(0, safeBeforeValue));
+                        const improvementWidth = Math.min(100 - beforeWidth, Math.max(0, safeImprovement));
+                        
+                        html += `
+                            <div style="padding: 15px; border-radius: 8px; border-left: 4px solid ${metric.color}; background: #f8f9fa;">
+                                <div style="font-weight: bold; margin-bottom: 5px; color: ${metric.color};">${metric.id} - ${metric.name.split('(')[0].trim()}</div>
+                                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+                                    <span style="color: #e74c3c; font-size: 14px;">${safeBeforeValue.toFixed(0)}%</span>
+                                    <span style="color: #27ae60; font-size: 14px;">${safeAfterValue.toFixed(0)}%</span>
+                                </div>
+                                <div style="height: 6px; background: #e9ecef; border-radius: 3px; margin-bottom: 5px; overflow: hidden;">
+                                    <div style="height: 100%; width: ${beforeWidth}%; background: ${metric.color}; opacity: 0.5; float: left;"></div>
+                                    <div style="height: 100%; width: ${improvementWidth}%; background: ${metric.color}; float: left;"></div>
+                                </div>
+                                <div style="text-align: right; font-size: 12px; color: ${safeImprovement > 0 ? '#27ae60' : '#e74c3c'}; font-weight: bold;">
+                                    ${safeImprovement > 0 ? '+' : ''}${safeImprovement.toFixed(1)}%
+                                </div>
                             </div>
-                            <div style="text-align: right; font-size: 12px; color: ${improvement > 0 ? '#27ae60' : '#e74c3c'};">
-                                ${improvement > 0 ? '+' : ''}${improvement.toFixed(1)}%
+                        `;
+                    });
+                    
+                    // Calculer les moyennes
+                    const beforeAvg = before.moyenne || 0;
+                    const afterAvg = after.moyenne || 0;
+                    const avgImprovement = afterAvg - beforeAvg;
+                    
+                    html += `
                             </div>
-                        </div>
-                    `;
-                });
-                
-                const beforeAvg = before.moyenne || 0;
-                const afterAvg = after.moyenne || 0;
-                const avgImprovement = afterAvg - beforeAvg;
-                
-                html += `
-                        </div>
-                        <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee;">
-                            <div style="display: flex; justify-content: space-between; align-items: center;">
-                                <div>
-                                    <strong>Indice Global:</strong>
-                                    <span style="color: #e74c3c; margin-left: 10px;">${beforeAvg.toFixed(1)}%</span>
-                                    <span style="margin: 0 10px;">→</span>
-                                    <span style="color: #27ae60;">${afterAvg.toFixed(1)}%</span>
+                            <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee;">
+                                <div style="display: flex; justify-content: space-between; align-items: center;">
+                                    <div>
+                                        <strong>Indice Global:</strong>
+                                        <span style="color: #e74c3c; margin-left: 10px; font-weight: bold;">${Number(beforeAvg).toFixed(1)}%</span>
+                                        <span style="margin: 0 10px; font-weight: bold;">→</span>
+                                        <span style="color: #27ae60; font-weight: bold;">${Number(afterAvg).toFixed(1)}%</span>
+                                    </div>
+                                    <div style="padding: 8px 15px; border-radius: 20px; background: ${avgImprovement > 0 ? '#d4edda' : '#f8d7da'}; color: ${avgImprovement > 0 ? '#155724' : '#721c24'}; font-weight: bold;">
+                                        ${avgImprovement > 0 ? '+' : ''}${Number(avgImprovement).toFixed(1)}%
+                                    </div>
                                 </div>
-                                <div style="padding: 5px 10px; border-radius: 15px; background: ${avgImprovement > 0 ? '#d4edda' : '#f8d7da'}; color: ${avgImprovement > 0 ? '#155724' : '#721c24'};">
-                                    ${avgImprovement > 0 ? '+' : ''}${avgImprovement.toFixed(1)}%
+                                <div style="margin-top: 10px; font-size: 12px; color: #666;">
+                                    <strong>Expert:</strong> ${after.expert || 'Non spécifié'} | 
+                                    <strong>Date:</strong> ${after.date || 'Non spécifiée'}
                                 </div>
                             </div>
                         </div>
-                    </div>
-                `;
-            });
+                    `;
+                });
+            }
             
-            document.getElementById('detailedComparison').innerHTML = html || '<p style="text-align: center; color: #7f8c8d;">Aucune donnée de calibration disponible</p>';
+            document.getElementById('detailedComparison').innerHTML = html;
+            console.log('HTML généré pour la comparaison détaillée');
         }
         
         // ============================================
@@ -1290,38 +1711,22 @@
             }, 3000);
         }
         
-        // Initialiser l'application
-        document.addEventListener('DOMContentLoaded', async function() {
-            // Initialiser les onglets
-            document.querySelectorAll('.tab-button').forEach(button => {
-                button.addEventListener('click', function() {
-                    switchTab(this.getAttribute('data-tab'));
-                });
-            });
-            
-            // Charger les scénarios depuis JSON
-            await loadScenarios();
-            
-            // Si on est sur l'onglet consensus, charger les données
-            if (document.getElementById('consensus').classList.contains('active')) {
-                loadConsensusData();
-            }
-        });
+        // ============================================
+        // FONCTIONS D'EXPORT/IMPORT
+        // ============================================
         
-        // Exporter les données
         function exportCalibrationData() {
             const dataStr = JSON.stringify(calibrationData, null, 2);
             const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
             
             const linkElement = document.createElement('a');
             linkElement.setAttribute('href', dataUri);
-            linkElement.setAttribute('download', 'calibration-trust.json');
+            linkElement.setAttribute('download', 'calibration-data-export.json');
             linkElement.click();
             
             showNotification('Données exportées en JSON', 'success');
         }
         
-        // Importer des données
         function importCalibrationData() {
             const input = document.createElement('input');
             input.type = 'file';
@@ -1352,6 +1757,115 @@
             
             input.click();
         }
+        
+        function showCalibrationStructure() {
+            const exampleStructure = {
+                "experts": [
+                    {
+                        "expert_id": "expert_jean_dupont_1234567890",
+                        "expert_name": "Jean Dupont",
+                        "evaluations": [
+                            {
+                                "evaluation_id": "eval_1234567890_abc123",
+                                "scenario": "S1",
+                                "date": "2024-01-16",
+                                "time": "14:30:00",
+                                "expert": "Jean Dupont",
+                                "expert_id": "expert_jean_dupont_1234567890",
+                                "AR": 85,
+                                "AE": 82,
+                                "ESR": 78,
+                                "SDM": 80,
+                                "SM": 76,
+                                "moyenne": 80.2
+                            }
+                        ],
+                        "last_updated": "2024-01-16T14:30:00.000Z"
+                    }
+                ]
+            };
+            
+            alert(`Structure de calibration-trust.json :
+    
+Le fichier doit contenir un tableau "experts" avec :
+1. expert_id : Identifiant unique de l'expert
+2. expert_name : Nom de l'expert
+3. evaluations : Tableau des évaluations
+4. last_updated : Date de dernière modification
+
+Chaque évaluation contient :
+- evaluation_id : ID unique
+- scenario : ID du scénario (ex: "S1")
+- date, time : Date et heure
+- expert : Nom de l'expert
+- AR, AE, ESR, SDM, SM : Scores 0-100%
+- moyenne : Moyenne des 5 métriques
+
+Voir la console pour un exemple complet.`);
+            
+            console.log('Exemple de structure calibration-trust.json:', exampleStructure);
+        }
+        
+        // ============================================
+        // AJOUT DES BOUTONS D'UTILITAIRE
+        // ============================================
+        
+        function addUtilityButtons() {
+            const expertHeader = document.querySelector('#expert header');
+            const consensusHeader = document.querySelector('#consensus header');
+            
+            const buttonsHTML = `
+                <div style="margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap;">
+                    <button onclick="showCalibrationStructure()" style="padding: 10px 20px; background: #9b59b6; color: white; border: none; border-radius: 5px; cursor: pointer;">
+                        📋 Voir la structure JSON
+                    </button>
+                    <button onclick="exportCalibrationData()" style="padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">
+                        📥 Exporter les données
+                    </button>
+                    <button onclick="importCalibrationData()" style="padding: 10px 20px; background: #2ecc71; color: white; border: none; border-radius: 5px; cursor: pointer;">
+                        📤 Importer des données
+                    </button>
+                    <button onclick="location.reload()" style="padding: 10px 20px; background: #e74c3c; color: white; border: none; border-radius: 5px; cursor: pointer;">
+                        🔄 Rafraîchir
+                    </button>
+                </div>
+            `;
+            
+            if (expertHeader) {
+                expertHeader.insertAdjacentHTML('beforeend', buttonsHTML);
+            }
+            
+            if (consensusHeader) {
+                consensusHeader.insertAdjacentHTML('beforeend', buttonsHTML);
+            }
+        }
+        
+        // ============================================
+        // INITIALISATION DE L'APPLICATION
+        // ============================================
+        
+        document.addEventListener('DOMContentLoaded', async function() {
+            // Initialiser les onglets
+            document.querySelectorAll('.tab-button').forEach(button => {
+                button.addEventListener('click', function() {
+                    switchTab(this.getAttribute('data-tab'));
+                });
+            });
+            
+            // Charger les données réelles AVANT de charger les scénarios
+            await loadRealDataFromJSON();
+            
+            // Charger les scénarios depuis JSON
+            await loadScenarios();
+            
+            // Ajouter les boutons d'utilitaire
+            setTimeout(addUtilityButtons, 1000);
+            
+            // Si on est sur l'onglet consensus, charger les données
+            if (document.getElementById('consensus').classList.contains('active')) {
+                loadConsensusData();
+            }
+        });
     </script>
 </body>
 </html>