Feature: Explainability dashboard + Google Fact Check API

syscred/.env

@@ -0,0 +1,15 @@
+# SysCRED Environment Configuration
+# (c) Dominique S. Loyer
+
+# === Google Fact Check API ===
+SYSCRED_GOOGLE_API_KEY=AIzaSyBiuY4AxuPgHcrViQJQ6BcKs1wOIqsiz74
+
+# === Server Configuration ===
+SYSCRED_PORT=5001
+SYSCRED_HOST=127.0.0.1
+
+# === Environment Mode ===
+SYSCRED_ENV=development
+
+# === ML Models ===
+SYSCRED_LOAD_ML_MODELS=true

syscred/static/index.html

@@ -396,6 +396,143 @@
         }
         .backend-status.local { color: #22c55e; }
         .backend-status.remote { color: #a855f7; }
+        
+        /* === EXPLAINABILITY MODAL === */
+        .explainer-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        .explainer-modal.visible { display: flex; }
+        .explainer-content {
+            background: linear-gradient(135deg, #1a1a3e 0%, #0f0f23 100%);
+            border: 1px solid rgba(124, 58, 237, 0.5);
+            border-radius: 20px;
+            max-width: 600px;
+            width: 90%;
+            max-height: 80vh;
+            overflow-y: auto;
+            padding: 2rem;
+            animation: slideUp 0.3s ease;
+        }
+        @keyframes slideUp {
+            from { transform: translateY(50px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        .explainer-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            padding-bottom: 1rem;
+        }
+        .explainer-title {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #fff;
+        }
+        .explainer-close {
+            background: none;
+            border: none;
+            color: #8b8ba7;
+            font-size: 2rem;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+        .explainer-close:hover { color: #fff; transform: none; box-shadow: none; }
+        .metric-explain {
+            background: rgba(255,255,255,0.03);
+            border-radius: 12px;
+            padding: 1.25rem;
+            margin-bottom: 1rem;
+            border-left: 4px solid #7c3aed;
+        }
+        .metric-explain-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 0.75rem;
+        }
+        .metric-explain-icon {
+            font-size: 1.5rem;
+        }
+        .metric-explain-name {
+            font-weight: 600;
+            color: #fff;
+            font-size: 1.1rem;
+        }
+        .metric-explain-value {
+            background: rgba(124, 58, 237, 0.2);
+            padding: 0.25rem 0.5rem;
+            border-radius: 6px;
+            font-weight: 700;
+            color: #a855f7;
+            margin-left: auto;
+        }
+        .metric-explain-simple {
+            color: #e0e0e0;
+            font-size: 1rem;
+            line-height: 1.6;
+            margin-bottom: 0.5rem;
+        }
+        .metric-explain-detail {
+            color: #8b8ba7;
+            font-size: 0.85rem;
+            font-style: italic;
+        }
+        .score-clickable {
+            cursor: pointer;
+            transition: transform 0.2s ease;
+        }
+        .score-clickable:hover {
+            transform: scale(1.05);
+        }
+        .help-icon {
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+            background: rgba(124, 58, 237, 0.3);
+            border-radius: 50%;
+            text-align: center;
+            line-height: 18px;
+            font-size: 12px;
+            color: #a855f7;
+            cursor: pointer;
+            margin-left: 0.5rem;
+            vertical-align: middle;
+        }
+        .help-icon:hover {
+            background: rgba(124, 58, 237, 0.6);
+            color: #fff;
+        }
+        .verdict-bar {
+            height: 8px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 4px;
+            overflow: hidden;
+            margin: 0.5rem 0;
+        }
+        .verdict-fill {
+            height: 100%;
+            border-radius: 4px;
+            transition: width 0.5s ease;
+        }
+        .verdict-labels {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.75rem;
+            color: #6b6b8a;
+        }
     </style>
 </head>
 
@@ -436,9 +573,10 @@
 
         <div class="results" id="results">
             <div class="score-card">
-                <div class="score-label">Score de Crédibilité</div>
-                <div class="score-value" id="scoreValue">0.00</div>
+                <div class="score-label">Score de Crédibilité <span class="help-icon" onclick="event.stopPropagation(); openExplainer()">?</span></div>
+                <div class="score-value score-clickable" id="scoreValue" onclick="openExplainer()" title="Cliquez pour comprendre ce score">0.00</div>
                 <div class="credibility-badge" id="credibilityBadge">-</div>
+                <small style="color: #6b6b8a; margin-top: 0.5rem; display: block;">👆 Cliquez sur le score pour comprendre</small>
             </div>
 
             <div class="summary-box">
@@ -459,6 +597,19 @@
             </div>
         </div>
 
+        <!-- EXPLAINER MODAL -->
+        <div class="explainer-modal" id="explainerModal" onclick="if(event.target === this) closeExplainer()">
+            <div class="explainer-content">
+                <div class="explainer-header">
+                    <div class="explainer-title">🔍 Comprendre votre score</div>
+                    <button class="explainer-close" onclick="closeExplainer()">×</button>
+                </div>
+                <div id="explainerBody">
+                    <!-- Content filled dynamically -->
+                </div>
+            </div>
+        </div>
+
         <footer>
             <p>SysCRED v2.0 - Prototype de recherche doctorale</p>
             <p>© Dominique S. Loyer - UQAM | <a href="https://doi.org/10.5281/zenodo.17943226" target="_blank">DOI:
@@ -943,6 +1094,216 @@
                 analyzeUrl();
             }
         });
+        
+        // === EXPLAINABILITY DASHBOARD ===
+        let lastAnalysisData = null; // Store last analysis for explainer
+        
+        // Store data after analysis
+        const originalDisplayResults = displayResults;
+        displayResults = function(data) {
+            lastAnalysisData = data;
+            originalDisplayResults(data);
+        };
+        
+        function openExplainer() {
+            if (!lastAnalysisData) {
+                alert('Analysez d\'abord une URL pour voir les explications.');
+                return;
+            }
+            
+            const modal = document.getElementById('explainerModal');
+            const body = document.getElementById('explainerBody');
+            
+            const score = lastAnalysisData.scoreCredibilite || 0;
+            const ruleResults = lastAnalysisData.reglesAppliquees || {};
+            const nlpAnalysis = lastAnalysisData.analyseNLP || {};
+            const sourceAnalysis = ruleResults.source_analysis || {};
+            
+            // Determine verdict color and message
+            let verdictColor, verdictText, verdictEmoji;
+            if (score >= 0.7) {
+                verdictColor = '#22c55e';
+                verdictText = 'Vous pouvez faire confiance à cette source.';
+                verdictEmoji = '✅';
+            } else if (score >= 0.4) {
+                verdictColor = '#eab308';
+                verdictText = 'Soyez prudent, vérifiez avec d\'autres sources.';
+                verdictEmoji = '⚠️';
+            } else {
+                verdictColor = '#ef4444';
+                verdictText = 'Méfiez-vous, cette source semble peu fiable.';
+                verdictEmoji = '❌';
+            }
+            
+            let html = `
+                <!-- Score Global -->
+                <div class="metric-explain" style="border-left-color: ${verdictColor}; background: rgba(${verdictColor === '#22c55e' ? '34,197,94' : verdictColor === '#eab308' ? '234,179,8' : '239,68,68'}, 0.1);">
+                    <div class="metric-explain-header">
+                        <span class="metric-explain-icon">${verdictEmoji}</span>
+                        <span class="metric-explain-name">Score Global</span>
+                        <span class="metric-explain-value" style="color: ${verdictColor}; font-size: 1.5rem;">${(score * 100).toFixed(0)}%</span>
+                    </div>
+                    <div class="metric-explain-simple">
+                        <strong>${verdictText}</strong><br><br>
+                        C'est comme une note à l'école :<br>
+                        • <span style="color:#22c55e">70-100%</span> = Excellent, source fiable<br>
+                        • <span style="color:#eab308">40-69%</span> = Moyen, à vérifier<br>
+                        • <span style="color:#ef4444">0-39%</span> = Faible, méfiance recommandée
+                    </div>
+                    <div class="verdict-bar">
+                        <div class="verdict-fill" style="width: ${score * 100}%; background: ${verdictColor};"></div>
+                    </div>
+                    <div class="verdict-labels">
+                        <span>⚠️ Pas fiable</span>
+                        <span>✅ Très fiable</span>
+                    </div>
+                </div>
+            `;
+            
+            // Reputation
+            if (sourceAnalysis.reputation) {
+                const rep = sourceAnalysis.reputation;
+                const repEmoji = rep === 'High' ? '🏆' : rep === 'Medium' ? '👍' : rep === 'Low' ? '⚠️' : '❓';
+                const repText = rep === 'High' ? 'Source reconnue et respectée (ex: Le Monde, BBC)' 
+                    : rep === 'Medium' ? 'Source correcte mais à vérifier' 
+                    : rep === 'Low' ? 'Source peu fiable ou inconnue' 
+                    : 'Nous ne connaissons pas cette source';
+                    
+                html += `
+                    <div class="metric-explain">
+                        <div class="metric-explain-header">
+                            <span class="metric-explain-icon">${repEmoji}</span>
+                            <span class="metric-explain-name">Réputation de la Source</span>
+                            <span class="metric-explain-value">${rep}</span>
+                        </div>
+                        <div class="metric-explain-simple">
+                            ${repText}
+                        </div>
+                        <div class="metric-explain-detail">
+                            Nous comparons le site à une base de données de médias connus et vérifions s'il est cité par des journalistes.
+                        </div>
+                    </div>
+                `;
+            }
+            
+            // Coherence
+            if (nlpAnalysis.coherence_score !== undefined) {
+                const coh = nlpAnalysis.coherence_score;
+                const cohPercent = (coh * 100).toFixed(0);
+                const cohEmoji = coh >= 0.6 ? '📝' : coh >= 0.4 ? '📄' : '❓';
+                
+                html += `
+                    <div class="metric-explain">
+                        <div class="metric-explain-header">
+                            <span class="metric-explain-icon">${cohEmoji}</span>
+                            <span class="metric-explain-name">Cohérence du Texte</span>
+                            <span class="metric-explain-value">${cohPercent}%</span>
+                        </div>
+                        <div class="metric-explain-simple">
+                            Le texte est-il logique et bien écrit ?<br>
+                            Un texte bien structuré avec des phrases claires est généralement plus fiable.
+                        </div>
+                        <div class="metric-explain-detail">
+                            Notre intelligence artificielle analyse si les phrases sont cohérentes entre elles et si le texte suit une logique.
+                        </div>
+                    </div>
+                `;
+            }
+            
+            // PageRank
+            if (lastAnalysisData.pageRankEstimation && lastAnalysisData.pageRankEstimation.estimatedPR) {
+                const pr = lastAnalysisData.pageRankEstimation.estimatedPR;
+                const prEmoji = pr >= 0.4 ? '🌟' : pr >= 0.2 ? '⭐' : '💫';
+                
+                html += `
+                    <div class="metric-explain">
+                        <div class="metric-explain-header">
+                            <span class="metric-explain-icon">${prEmoji}</span>
+                            <span class="metric-explain-name">PageRank (Popularité)</span>
+                            <span class="metric-explain-value">${pr.toFixed(3)}</span>
+                        </div>
+                        <div class="metric-explain-simple">
+                            Plus un site est populaire et cité par d'autres sites importants, plus il est probablement fiable.<br>
+                            C'est comme le bouche-à-oreille : si beaucoup de gens recommandent quelqu'un, c'est bon signe.
+                        </div>
+                        <div class="metric-explain-detail">
+                            Nous estimons combien de sites importants font des liens vers cette page (algorithme inspiré de Google).
+                        </div>
+                    </div>
+                `;
+            }
+            
+            // SEO
+            if (lastAnalysisData.seoAnalysis && lastAnalysisData.seoAnalysis.seoScore) {
+                const seo = parseFloat(lastAnalysisData.seoAnalysis.seoScore);
+                const seoEmoji = seo >= 0.7 ? '🔧' : seo >= 0.5 ? '🛠️' : '⚙️';
+                
+                html += `
+                    <div class="metric-explain">
+                        <div class="metric-explain-header">
+                            <span class="metric-explain-icon">${seoEmoji}</span>
+                            <span class="metric-explain-name">Qualité Technique (SEO)</span>
+                            <span class="metric-explain-value">${seo.toFixed(2)}</span>
+                        </div>
+                        <div class="metric-explain-simple">
+                            Le site est-il bien construit ?<br>
+                            Un site professionnel bien structuré inspire plus confiance qu'un site mal fait.
+                        </div>
+                        <div class="metric-explain-detail">
+                            Nous vérifions si le site a un titre, une description, des balises correctes, etc.
+                        </div>
+                    </div>
+                `;
+            }
+            
+            // Fact-Checks
+            const factChecks = ruleResults.fact_checking || [];
+            html += `
+                <div class="metric-explain" style="border-left-color: #f472b6;">
+                    <div class="metric-explain-header">
+                        <span class="metric-explain-icon">🕵️</span>
+                        <span class="metric-explain-name">Vérification des Faits</span>
+                        <span class="metric-explain-value">${factChecks.length} trouvé(s)</span>
+                    </div>
+                    <div class="metric-explain-simple">
+                        Nous cherchons si des fact-checkers professionnels ont déjà vérifié des informations similaires.<br>
+                        ${factChecks.length > 0 
+                            ? '✅ Des vérifications existent - consultez-les !'
+                            : 'Aucune vérification trouvée - cela ne veut pas dire que c\'est faux.'}
+                    </div>
+                    <div class="metric-explain-detail">
+                        Source : Google Fact Check Tools API - vérifie auprès de PolitiFact, Snopes, AFP, etc.
+                    </div>
+                </div>
+            `;
+            
+            // How it's calculated
+            html += `
+                <div style="margin-top: 1.5rem; padding: 1rem; background: rgba(124, 58, 237, 0.1); border-radius: 12px; border: 1px dashed rgba(124, 58, 237, 0.3);">
+                    <strong style="color: #a855f7;">📊 Comment le score est calculé ?</strong>
+                    <p style="margin-top: 0.5rem; color: #8b8ba7; font-size: 0.9rem;">
+                        Le score combine plusieurs facteurs :<br>
+                        • Réputation de la source (22%)<br>
+                        • Cohérence du texte (12%)<br>
+                        • Qualité technique (15%)<br>
+                        • Vérifications de faits (17%)<br>
+                        • Âge du domaine et autres (34%)
+                    </p>
+                </div>
+            `;
+            
+            body.innerHTML = html;
+            modal.classList.add('visible');
+        }
+        
+        function closeExplainer() {
+            document.getElementById('explainerModal').classList.remove('visible');
+        }
+        
+        // Close modal with Escape key
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') closeExplainer();
+        });
     </script>
 </body>