�� Add TREC IR metrics section to dashboard (Precision, Recall, MAP, NDCG, TF-IDF, MRR)

syscred/static/index.html

@@ -853,6 +853,42 @@
                 </div>
             </div>
 
+            <!-- TREC IR METRICS SECTION -->
+            <div class="trec-section" id="trecSection" style="display: none; background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem;">
+                <div class="summary-title" style="margin-bottom: 1rem; color: #8b5cf6;">
+                    📈 Métriques IR (TREC)
+                    <span class="help-icon" onclick="event.stopPropagation(); showTRECExplainer()" title="Information Retrieval metrics from TREC evaluation">?</span>
+                </div>
+                <p style="color: #8b8ba7; font-size: 0.9rem; margin-bottom: 1rem;">Métriques d'évaluation de recherche d'information</p>
+                
+                <div class="trec-metrics-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem;">
+                    <div class="trec-metric-card" style="background: rgba(255,255,255,0.02); border-radius: 10px; padding: 1rem; text-align: center;">
+                        <div style="font-size: 0.8rem; color: #8b8ba7; margin-bottom: 0.5rem;">Precision</div>
+                        <div id="trecPrecision" style="font-size: 1.5rem; font-weight: 700; color: #a78bfa;">--</div>
+                    </div>
+                    <div class="trec-metric-card" style="background: rgba(255,255,255,0.02); border-radius: 10px; padding: 1rem; text-align: center;">
+                        <div style="font-size: 0.8rem; color: #8b8ba7; margin-bottom: 0.5rem;">Recall</div>
+                        <div id="trecRecall" style="font-size: 1.5rem; font-weight: 700; color: #a78bfa;">--</div>
+                    </div>
+                    <div class="trec-metric-card" style="background: rgba(255,255,255,0.02); border-radius: 10px; padding: 1rem; text-align: center;">
+                        <div style="font-size: 0.8rem; color: #8b8ba7; margin-bottom: 0.5rem;">MAP</div>
+                        <div id="trecMAP" style="font-size: 1.5rem; font-weight: 700; color: #a78bfa;">--</div>
+                    </div>
+                    <div class="trec-metric-card" style="background: rgba(255,255,255,0.02); border-radius: 10px; padding: 1rem; text-align: center;">
+                        <div style="font-size: 0.8rem; color: #8b8ba7; margin-bottom: 0.5rem;">NDCG</div>
+                        <div id="trecNDCG" style="font-size: 1.5rem; font-weight: 700; color: #a78bfa;">--</div>
+                    </div>
+                    <div class="trec-metric-card" style="background: rgba(255,255,255,0.02); border-radius: 10px; padding: 1rem; text-align: center;">
+                        <div style="font-size: 0.8rem; color: #8b8ba7; margin-bottom: 0.5rem;">TF-IDF Score</div>
+                        <div id="trecTFIDF" style="font-size: 1.5rem; font-weight: 700; color: #a78bfa;">--</div>
+                    </div>
+                    <div class="trec-metric-card" style="background: rgba(255,255,255,0.02); border-radius: 10px; padding: 1rem; text-align: center;">
+                        <div style="font-size: 0.8rem; color: #8b8ba7; margin-bottom: 0.5rem;">MRR</div>
+                        <div id="trecMRR" style="font-size: 1.5rem; font-weight: 700; color: #a78bfa;">--</div>
+                    </div>
+                </div>
+            </div>
+
             <!-- GOOGLE-STYLE EXPLANATION -->
             <div class="why-section" id="whySection" style="display: none;">
                 <div class="summary-title" style="margin-bottom: 1rem; color: #f59e0b;">
@@ -1210,6 +1246,48 @@
                 eeatSection.style.display = 'none';
             }
             
+            // ========================================
+            // DISPLAY TREC IR METRICS
+            // ========================================
+            const trecSection = document.getElementById('trecSection');
+            const trecData = data.trec_metrics || data.ir_metrics || nlpAnalysis.ir_metrics || null;
+            
+            if (trecData) {
+                trecSection.style.display = 'block';
+                
+                // Precision
+                const precision = trecData.precision || trecData.P_10 || 0;
+                document.getElementById('trecPrecision').textContent = 
+                    typeof precision === 'number' ? (precision * 100).toFixed(1) + '%' : '--';
+                
+                // Recall
+                const recall = trecData.recall || trecData.recall_100 || 0;
+                document.getElementById('trecRecall').textContent = 
+                    typeof recall === 'number' ? (recall * 100).toFixed(1) + '%' : '--';
+                
+                // MAP
+                const map = trecData.map || trecData.MAP || 0;
+                document.getElementById('trecMAP').textContent = 
+                    typeof map === 'number' ? map.toFixed(3) : '--';
+                
+                // NDCG
+                const ndcg = trecData.ndcg || trecData.NDCG || 0;
+                document.getElementById('trecNDCG').textContent = 
+                    typeof ndcg === 'number' ? ndcg.toFixed(3) : '--';
+                
+                // TF-IDF
+                const tfidf = trecData.tfidf || trecData.tfidf_score || trecData.TF_IDF || 0;
+                document.getElementById('trecTFIDF').textContent = 
+                    typeof tfidf === 'number' ? tfidf.toFixed(3) : '--';
+                
+                // MRR (Mean Reciprocal Rank)
+                const mrr = trecData.mrr || trecData.recip_rank || trecData.MRR || 0;
+                document.getElementById('trecMRR').textContent = 
+                    typeof mrr === 'number' ? mrr.toFixed(3) : '--';
+            } else {
+                trecSection.style.display = 'none';
+            }
+            
             // ========================================
             // DISPLAY "WHY THIS RESULT?" EXPLANATION
             // ========================================