Spaces:

OUAREDAEK
/

VCC

Sleeping

App Files Files Community

OUAREDAEK commited on Apr 23

Commit

fd562ae

verified ·

1 Parent(s): 8045dd9

Upload cross_reading/cross_readers.html with huggingface_hub

Browse files

Files changed (1) hide show

cross_reading/cross_readers.html +755 -0

cross_reading/cross_readers.html ADDED Viewed

	@@ -0,0 +1,755 @@

+<!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); }
+        }
+        /* Styles pour les étoiles */
+        .stars-container {
+            display: flex;
+            gap: 2px;
+            margin-top: 5px;
+        }
+        .star {
+            font-size: 18px;
+            color: #FFD700;
+        }
+        .star.empty {
+            color: #e0e0e0;
+        }
+        /* Styles pour les métriques détaillées */
+        .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;
+        }
+        /* Styles pour le modal */
+        .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);
+        }
+        /* Badge pour le review */
+        .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;
+        }
+        /* Styles pour les métriques dans les tableaux */
+        .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>
+    <!-- Chart.js pour les visualisations -->
+    <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>
+        <!-- Messages d'information -->
+        <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>
+        <!-- Statistiques globales -->
+        <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>
+        <!-- Contrôles de filtrage -->
+        <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>
+        <!-- Tableau des évaluations par scénario -->
+        <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>
+        <!-- Section : Toutes les évaluations détaillées -->
+        <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>
+        <!-- Graphiques -->
+        <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>
+        <!-- Détails d'un scénario -->
+        <div class="scenario-details" id="scenarioDetails">
+            <h2>🔍 Détails du scénario <span id="detailScenarioTitle"></span></h2>
+            <div id="scenarioContent"></div>
+        </div>
+        <!-- Section d'aide -->
+        <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>
+    <!-- Modale pour ajouter un review -->
+    <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>