| <!DOCTYPE html>
|
| <html lang="fr">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Analyse Croisée des Évaluations - ReflAgent</title>
|
|
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| font-family: 'Segoe UI', Arial, sans-serif;
|
| }
|
|
|
| body {
|
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
| color: #333;
|
| min-height: 100vh;
|
| padding: 20px;
|
| }
|
|
|
| .container {
|
| max-width: 1400px;
|
| margin: 0 auto;
|
| background: white;
|
| border-radius: 20px;
|
| padding: 30px;
|
| box-shadow: 0 10px 40px rgba(0,0,0,0.08);
|
| border: 1px solid #e0e0e0;
|
| }
|
|
|
| header {
|
| text-align: center;
|
| margin-bottom: 30px;
|
| padding-bottom: 20px;
|
| border-bottom: 2px solid #e3f2fd;
|
| }
|
|
|
| h1 {
|
| color: #1976D2;
|
| background: linear-gradient(90deg, #1976D2, #2196F3);
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| margin-bottom: 10px;
|
| }
|
|
|
| .subtitle {
|
| color: #666;
|
| font-size: 16px;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .back-btn {
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 8px;
|
| padding: 10px 20px;
|
| background: linear-gradient(135deg, #1976D2, #2196F3);
|
| color: white;
|
| text-decoration: none;
|
| border-radius: 10px;
|
| margin-bottom: 20px;
|
| font-weight: 600;
|
| transition: transform 0.3s, box-shadow 0.3s;
|
| }
|
|
|
| .back-btn:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 5px 15px rgba(25, 118, 210, 0.3);
|
| }
|
|
|
| .stats-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
| gap: 20px;
|
| margin-bottom: 30px;
|
| }
|
|
|
| .stat-card {
|
| background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
|
| padding: 20px;
|
| border-radius: 12px;
|
| text-align: center;
|
| transition: transform 0.3s;
|
| }
|
|
|
| .stat-card:hover {
|
| transform: translateY(-5px);
|
| box-shadow: 0 8px 20px rgba(0,0,0,0.1);
|
| }
|
|
|
| .stat-value {
|
| font-size: 36px;
|
| font-weight: bold;
|
| color: #1976D2;
|
| margin: 10px 0;
|
| }
|
|
|
| .stat-label {
|
| font-size: 14px;
|
| color: #666;
|
| font-weight: 500;
|
| }
|
|
|
| .section {
|
| margin: 30px 0;
|
| padding: 20px;
|
| background: #f8f9fa;
|
| border-radius: 15px;
|
| }
|
|
|
| .section h2 {
|
| color: #1976D2;
|
| margin-bottom: 20px;
|
| padding-bottom: 10px;
|
| border-bottom: 2px solid #e3f2fd;
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| }
|
|
|
| .filter-controls {
|
| display: flex;
|
| gap: 15px;
|
| margin-bottom: 20px;
|
| flex-wrap: wrap;
|
| align-items: center;
|
| }
|
|
|
| .filter-controls select, .filter-controls input {
|
| padding: 10px 15px;
|
| border: 2px solid #1976D2;
|
| border-radius: 8px;
|
| background: white;
|
| font-size: 14px;
|
| min-width: 200px;
|
| }
|
|
|
| .filter-controls label {
|
| font-weight: 600;
|
| color: #1976D2;
|
| }
|
|
|
| table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| margin: 20px 0;
|
| background: white;
|
| border-radius: 10px;
|
| overflow: hidden;
|
| box-shadow: 0 3px 15px rgba(0,0,0,0.05);
|
| }
|
|
|
| th {
|
| background: linear-gradient(135deg, #1976D2, #2196F3);
|
| color: white;
|
| padding: 15px;
|
| text-align: left;
|
| font-weight: 600;
|
| }
|
|
|
| td {
|
| padding: 12px 15px;
|
| border-bottom: 1px solid #e0e0e0;
|
| }
|
|
|
| tr:hover {
|
| background: #f5f5f5;
|
| }
|
|
|
| .scenario-badge {
|
| display: inline-block;
|
| padding: 5px 10px;
|
| border-radius: 20px;
|
| font-size: 12px;
|
| font-weight: bold;
|
| background: #e3f2fd;
|
| color: #1976D2;
|
| }
|
|
|
| .confidence-bar {
|
| height: 20px;
|
| background: #e0e0e0;
|
| border-radius: 10px;
|
| overflow: hidden;
|
| margin: 5px 0;
|
| }
|
|
|
| .confidence-fill {
|
| height: 100%;
|
| border-radius: 10px;
|
| transition: width 0.5s ease;
|
| }
|
|
|
| .high-confidence { background: linear-gradient(135deg, #43a047, #4caf50); }
|
| .medium-confidence { background: linear-gradient(135deg, #fb8c00, #ff9800); }
|
| .low-confidence { background: linear-gradient(135deg, #e53935, #f44336); }
|
|
|
| .metrics-container {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 5px;
|
| }
|
|
|
| .metric-item {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| padding: 3px 0;
|
| font-size: 12px;
|
| }
|
|
|
| .metric-name {
|
| color: #666;
|
| }
|
|
|
| .metric-value {
|
| font-weight: bold;
|
| color: #1976D2;
|
| }
|
|
|
| .conflict-indicator {
|
| display: inline-block;
|
| width: 12px;
|
| height: 12px;
|
| border-radius: 50%;
|
| margin-right: 5px;
|
| }
|
|
|
| .conflict-high {
|
| background: #e53935;
|
| animation: pulse 2s infinite;
|
| }
|
|
|
| .conflict-medium {
|
| background: #fb8c00;
|
| }
|
|
|
| .conflict-low {
|
| background: #43a047;
|
| }
|
|
|
| @keyframes pulse {
|
| 0% { transform: scale(1); }
|
| 50% { transform: scale(1.2); }
|
| 100% { transform: scale(1); }
|
| }
|
|
|
| .chart-container {
|
| height: 400px;
|
| margin: 20px 0;
|
| background: white;
|
| border-radius: 10px;
|
| padding: 20px;
|
| box-shadow: 0 3px 15px rgba(0,0,0,0.05);
|
| }
|
|
|
| .scenario-details {
|
| background: white;
|
| border-radius: 10px;
|
| padding: 20px;
|
| margin: 20px 0;
|
| box-shadow: 0 3px 15px rgba(0,0,0,0.05);
|
| display: none;
|
| }
|
|
|
| .scenario-details.active {
|
| display: block;
|
| animation: fadeIn 0.5s ease;
|
| }
|
|
|
| @keyframes fadeIn {
|
| from { opacity: 0; transform: translateY(10px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
|
|
| .details-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
| gap: 20px;
|
| margin-top: 20px;
|
| }
|
|
|
| .details-card {
|
| background: #f8f9fa;
|
| padding: 15px;
|
| border-radius: 8px;
|
| border-left: 4px solid #1976D2;
|
| }
|
|
|
| .details-card h4 {
|
| color: #1976D2;
|
| margin-bottom: 10px;
|
| }
|
|
|
| .comparison-chart {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| gap: 15px;
|
| margin: 20px 0;
|
| }
|
|
|
| .comparison-item {
|
| background: white;
|
| padding: 15px;
|
| border-radius: 8px;
|
| border: 1px solid #e0e0e0;
|
| text-align: center;
|
| }
|
|
|
| .loading {
|
| text-align: center;
|
| padding: 40px;
|
| color: #666;
|
| }
|
|
|
| .loading-spinner {
|
| display: inline-block;
|
| width: 40px;
|
| height: 40px;
|
| border: 4px solid #f3f3f3;
|
| border-top: 4px solid #1976D2;
|
| border-radius: 50%;
|
| animation: spin 1s linear infinite;
|
| margin-bottom: 20px;
|
| }
|
|
|
| @keyframes spin {
|
| 0% { transform: rotate(0deg); }
|
| 100% { transform: rotate(360deg); }
|
| }
|
|
|
|
|
| .stars-container {
|
| display: flex;
|
| gap: 2px;
|
| margin-top: 5px;
|
| }
|
|
|
| .star {
|
| font-size: 18px;
|
| color: #FFD700;
|
| }
|
|
|
| .star.empty {
|
| color: #e0e0e0;
|
| }
|
|
|
|
|
| .metric-detail {
|
| background: #f8f9fa;
|
| padding: 10px;
|
| border-radius: 8px;
|
| margin-bottom: 10px;
|
| border-left: 3px solid #1976D2;
|
| }
|
|
|
| .metric-question {
|
| font-size: 12px;
|
| color: #666;
|
| margin-top: 5px;
|
| font-style: italic;
|
| }
|
|
|
|
|
| .modal {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(0,0,0,0.5);
|
| z-index: 1000;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .modal-content {
|
| background: white;
|
| border-radius: 15px;
|
| padding: 30px;
|
| max-width: 600px;
|
| width: 90%;
|
| max-height: 80vh;
|
| overflow-y: auto;
|
| box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
| }
|
|
|
|
|
| .review-badge {
|
| display: inline-block;
|
| padding: 3px 8px;
|
| border-radius: 12px;
|
| font-size: 11px;
|
| font-weight: bold;
|
| margin-left: 5px;
|
| }
|
|
|
| .review-approved {
|
| background: #E8F5E9;
|
| color: #2E7D32;
|
| }
|
|
|
| .review-revision {
|
| background: #FFF3E0;
|
| color: #EF6C00;
|
| }
|
|
|
| .review-rejected {
|
| background: #FFEBEE;
|
| color: #C62828;
|
| }
|
|
|
|
|
| .metrics-table-cell {
|
| max-width: 350px;
|
| }
|
|
|
| .compact-metric {
|
| display: flex;
|
| align-items: center;
|
| margin-bottom: 3px;
|
| font-size: 11px;
|
| }
|
|
|
| .compact-metric-name {
|
| width: 30px;
|
| font-weight: bold;
|
| color: #1976D2;
|
| }
|
|
|
| .compact-stars {
|
| display: flex;
|
| gap: 1px;
|
| margin: 0 5px;
|
| }
|
|
|
| .compact-star {
|
| font-size: 10px;
|
| color: #FFD700;
|
| }
|
|
|
| .compact-star.empty {
|
| color: #e0e0e0;
|
| }
|
|
|
| .error-message {
|
| background: #FFEBEE;
|
| color: #C62828;
|
| padding: 20px;
|
| border-radius: 10px;
|
| margin: 20px 0;
|
| border-left: 4px solid #C62828;
|
| }
|
|
|
| .success-message {
|
| background: #E8F5E9;
|
| color: #2E7D32;
|
| padding: 15px;
|
| border-radius: 8px;
|
| margin: 10px 0;
|
| display: none;
|
| }
|
|
|
| .warning-message {
|
| background: #FFF3E0;
|
| color: #EF6C00;
|
| padding: 15px;
|
| border-radius: 8px;
|
| margin: 10px 0;
|
| border-left: 4px solid #EF6C00;
|
| }
|
|
|
| .test-data-btn {
|
| background: linear-gradient(135deg, #4CAF50, #8BC34A);
|
| color: white;
|
| border: none;
|
| padding: 10px 20px;
|
| border-radius: 8px;
|
| cursor: pointer;
|
| font-weight: 600;
|
| margin: 10px 0;
|
| text-decoration: none;
|
| display: inline-block;
|
| transition: transform 0.3s;
|
| }
|
|
|
| .test-data-btn:hover {
|
| transform: translateY(-2px);
|
| }
|
|
|
| @media (max-width: 768px) {
|
| .container {
|
| padding: 15px;
|
| }
|
|
|
| .filter-controls {
|
| flex-direction: column;
|
| align-items: stretch;
|
| }
|
|
|
| .filter-controls select, .filter-controls input {
|
| width: 100%;
|
| }
|
|
|
| table {
|
| display: block;
|
| overflow-x: auto;
|
| }
|
|
|
| .modal-content {
|
| width: 95%;
|
| padding: 15px;
|
| }
|
|
|
| .metric-detail {
|
| padding: 8px;
|
| font-size: 12px;
|
| }
|
|
|
| .star {
|
| font-size: 14px;
|
| }
|
| }
|
| </style>
|
|
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <a href="../index.html" class="back-btn">⬅️ Retour au Dashboard</a>
|
|
|
| <a href="consensus_building.html" class="btn-consensus">
|
| Consensus Building
|
| </a>
|
|
|
| <style>
|
| .btn-consensus {
|
| display: inline-block;
|
| padding: 14px 32px;
|
| background: linear-gradient(135deg, #4facfe, #00f2fe);
|
| color: #ffffff;
|
| text-decoration: none;
|
| font-size: 16px;
|
| font-weight: 600;
|
| border-radius: 30px;
|
| box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .btn-consensus:hover {
|
| transform: translateY(-3px);
|
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
| background: linear-gradient(135deg, #00f2fe, #4facfe);
|
| }
|
| </style>
|
|
|
| </a>
|
|
|
| <header>
|
| <h1>📊 Analyse Croisée des Évaluations</h1>
|
| <p class="subtitle">Analyse des niveaux de confiance contradictoires entre les évaluateurs</p>
|
| </header>
|
|
|
|
|
| <div id="successMessage" class="success-message"></div>
|
| <div id="warningMessage" class="warning-message" style="display:none;">
|
| <strong>⚠️ Données manquantes</strong>
|
| <p>Il semble qu'aucune donnée d'évaluation n'ait été trouvée.</p>
|
| <p>Vous pouvez générer des données de test pour commencer :</p>
|
| <button onclick="generateTestData()" class="test-data-btn">
|
| 🧪 Générer des données de test
|
| </button>
|
| </div>
|
|
|
|
|
| <div class="stats-grid" id="globalStats">
|
| <div class="stat-card">
|
| <div class="stat-label">Total d'évaluations</div>
|
| <div class="stat-value" id="totalEvaluations">0</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-label">Scénarios évalués</div>
|
| <div class="stat-value" id="totalScenarios">0</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-label">Évaluateurs uniques</div>
|
| <div class="stat-value" id="totalEvaluators">0</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-label">Taux de conflit</div>
|
| <div class="stat-value" id="conflictRate">0%</div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="section">
|
| <h2>🔍 Filtres d'analyse</h2>
|
| <div class="filter-controls">
|
| <div>
|
| <label for="scenarioFilter">Filtrer par scénario :</label>
|
| <select id="scenarioFilter" onchange="filterData()">
|
| <option value="all">Tous les scénarios</option>
|
| </select>
|
| </div>
|
| <div>
|
| <label for="confidenceFilter">Filtrer par niveau de conflit :</label>
|
| <select id="confidenceFilter" onchange="filterData()">
|
| <option value="all">Tous les niveaux</option>
|
| <option value="high">Conflit élevé (différence > 40%)</option>
|
| <option value="medium">Conflit moyen (20-40%)</option>
|
| <option value="low">Conflit faible (0-20%)</option>
|
| </select>
|
| </div>
|
| <div>
|
| <label for="sortBy">Trier par :</label>
|
| <select id="sortBy" onchange="filterData()">
|
| <option value="scenario">Scénario</option>
|
| <option value="conflict">Niveau de conflit</option>
|
| <option value="evaluations">Nombre d'évaluations</option>
|
| <option value="confidence">Confiance moyenne</option>
|
| </select>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="section">
|
| <h2>📋 Liste des évaluations par scénario</h2>
|
| <div id="evaluationsTable">
|
| <div class="loading">
|
| <div class="loading-spinner"></div>
|
| <p>Chargement des données d'évaluation...</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="section">
|
| <h2>📝 Toutes les évaluations détaillées</h2>
|
|
|
| <div class="filter-controls">
|
| <div>
|
| <label for="evaluatorFilter">Filtrer par évaluateur :</label>
|
| <select id="evaluatorFilter" onchange="filterAllEvaluations()">
|
| <option value="all">Tous les évaluateurs</option>
|
| </select>
|
| </div>
|
| <div>
|
| <label for="scoreFilter">Filtrer par score :</label>
|
| <select id="scoreFilter" onchange="filterAllEvaluations()">
|
| <option value="all">Tous les scores</option>
|
| <option value="high">Élevé (70-100%)</option>
|
| <option value="medium">Moyen (40-69%)</option>
|
| <option value="low">Faible (0-39%)</option>
|
| </select>
|
| </div>
|
| <div>
|
| <label for="sortEvaluations">Trier par :</label>
|
| <select id="sortEvaluations" onchange="filterAllEvaluations()">
|
| <option value="date_desc">Date (récent)</option>
|
| <option value="date_asc">Date (ancien)</option>
|
| <option value="score_desc">Score (haut)</option>
|
| <option value="score_asc">Score (bas)</option>
|
| <option value="scenario">Scénario</option>
|
| </select>
|
| </div>
|
| </div>
|
|
|
| <div id="allEvaluationsTable">
|
| <div class="loading">
|
| <div class="loading-spinner"></div>
|
| <p>Chargement des évaluations détaillées...</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="section">
|
| <h2>📈 Visualisations</h2>
|
| <div class="chart-container">
|
| <canvas id="confidenceChart"></canvas>
|
| </div>
|
| <div class="chart-container">
|
| <canvas id="conflictChart"></canvas>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="scenario-details" id="scenarioDetails">
|
| <h2>🔍 Détails du scénario <span id="detailScenarioTitle"></span></h2>
|
| <div id="scenarioContent"></div>
|
| </div>
|
|
|
|
|
| <div class="section" id="helpSection" style="display:none;">
|
| <h2>🆘 Aide et dépannage</h2>
|
| <p>Si aucune donnée n'apparaît, essayez :</p>
|
| <ol>
|
| <li>Vérifier que le serveur Flask est en cours d'exécution</li>
|
| <li>Générer des données de test avec le bouton ci-dessous</li>
|
| <li>Vérifier la console du navigateur pour les erreurs (F12 → Console)</li>
|
| </ol>
|
| <button onclick="generateTestData()" class="test-data-btn">
|
| 🧪 Générer des données de test
|
| </button>
|
| <button onclick="location.reload()" class="test-data-btn" style="background:linear-gradient(135deg, #2196F3, #1976D2);margin-left:10px;">
|
| 🔄 Recharger la page
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="reviewModal" class="modal">
|
| <div class="modal-content">
|
| <h2 style="color:#1976D2; margin-bottom:20px;">✍️ Ajouter un Review</h2>
|
|
|
| <div style="margin-bottom:20px; padding:15px; background:#f8f9fa; border-radius:8px;">
|
| <strong>Évaluateur :</strong> <span id="modalEvaluator"></span><br>
|
| <strong>Scénario :</strong> <span id="modalScenario"></span><br>
|
| <strong>Score :</strong> <span id="modalScore"></span>
|
| </div>
|
|
|
| <div style="margin-bottom:20px;">
|
| <label for="reviewDecision" style="display:block; margin-bottom:5px; font-weight:bold;">Décision :</label>
|
| <select id="reviewDecision" style="width:100%; padding:10px; border:2px solid #1976D2; border-radius:8px;">
|
| <option value="approved">✅ Approuvé</option>
|
| <option value="needs_revision">⚠️ Nécessite révision</option>
|
| <option value="rejected">❌ Rejeté</option>
|
| </select>
|
| </div>
|
|
|
| <div style="margin-bottom:20px;">
|
| <label for="reviewComment" style="display:block; margin-bottom:5px; font-weight:bold;">Commentaire du review :</label>
|
| <textarea id="reviewComment" rows="5" style="width:100%; padding:10px; border:2px solid #1976D2; border-radius:8px;"
|
| placeholder="Ajoutez vos commentaires sur cette évaluation..."></textarea>
|
| </div>
|
|
|
| <div style="display:flex; gap:10px; justify-content:flex-end;">
|
| <button onclick="closeReviewModal()" style="padding:10px 20px; background:#666; color:white; border:none; border-radius:8px; cursor:pointer;">
|
| Annuler
|
| </button>
|
| <button onclick="saveReview()" style="padding:10px 20px; background:#1976D2; color:white; border:none; border-radius:8px; cursor:pointer;">
|
| 💾 Sauvegarder
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="cross_readers.js"></script>
|
| </body>
|
| </html> |
