Add RAGAS evaluation web console (FastAPI + vanilla JS)
- webapp/: FastAPI backend with runs/scenarios/evaluations API routers; services for run_reader, report_builder, scenario_scanner, task_manager (lazy ragas import — server boots even without ragas); Pydantic models - webapp/static/: single-page console (layout A: left-nav + main area); report detail with metric cards, Chart.js distribution histogram, grouping table, lowest-score sample review; trigger evaluation + log polling - webmain.py: uvicorn entry point (alongside existing main.py CLI) - start.bat: Windows one-click launcher with env checks and auto-browser open - rag_eval/datasets/: implement missing loader + normalizer modules (load_dataset_records, normalize_records) required by evaluator - scripts/seed_sample_run.py: generate realistic demo run artifacts - .gitignore: exclude datasets/ data files but keep rag_eval/datasets/ source Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
This commit is contained in:
258
webapp/static/js/report.js
Normal file
258
webapp/static/js/report.js
Normal file
@@ -0,0 +1,258 @@
|
||||
// report.js — 报告详情页渲染：元信息、指标卡片、分布图、分组表、低分样本复核。
|
||||
|
||||
const Report = {
|
||||
distChart: null,
|
||||
currentDetail: null,
|
||||
activeGrouping: null,
|
||||
|
||||
// 加载并渲染指定运行的完整报告。
|
||||
async render(runId) {
|
||||
const empty = document.getElementById("report-empty");
|
||||
const content = document.getElementById("report-content");
|
||||
if (!runId) {
|
||||
empty.hidden = false;
|
||||
content.hidden = true;
|
||||
return;
|
||||
}
|
||||
empty.hidden = true;
|
||||
content.hidden = false;
|
||||
content.style.opacity = "0.4";
|
||||
|
||||
try {
|
||||
const detail = await API.runDetail(runId);
|
||||
Report.currentDetail = detail;
|
||||
Report.renderMeta(detail.summary);
|
||||
Report.renderMetricCards(detail.summary, detail.report);
|
||||
Report.renderDistribution(detail.report);
|
||||
Report.renderGroupings(detail.report);
|
||||
Report.renderLowest(detail.report);
|
||||
content.style.opacity = "1";
|
||||
} catch (err) {
|
||||
empty.hidden = false;
|
||||
content.hidden = true;
|
||||
empty.innerHTML = `<p>加载报告失败：${App.escape(err.message)}</p>`;
|
||||
}
|
||||
},
|
||||
|
||||
// 顶部元信息条。
|
||||
renderMeta(summary) {
|
||||
const el = document.getElementById("report-meta");
|
||||
el.innerHTML = `
|
||||
<div>
|
||||
<div class="report-meta-title">${App.escape(summary.scenario_name || summary.run_id)}
|
||||
<span class="status-pill completed">● completed</span></div>
|
||||
<div class="report-meta-info">run_id: ${App.escape(summary.run_id)}</div>
|
||||
</div>
|
||||
<div class="report-meta-info">
|
||||
${App.escape(summary.mode || "—")} · judge: ${App.escape(summary.judge_model || "—")}
|
||||
· ${summary.total_samples} 样本 (${summary.valid_samples} 有效 / ${summary.invalid_samples} 无效)
|
||||
· ${App.escape(App.shortTime(summary.finished_at))}
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
|
||||
// ① 指标均值卡片。
|
||||
renderMetricCards(summary, report) {
|
||||
const wrap = document.getElementById("metric-cards");
|
||||
wrap.innerHTML = "";
|
||||
const metrics = report.metrics && report.metrics.length ? report.metrics : summary.metrics;
|
||||
metrics.forEach((metric) => {
|
||||
const value = report.metric_means ? report.metric_means[metric] : null;
|
||||
const cls = App.scoreClass(value);
|
||||
const text = value === null || value === undefined ? "n/a" : value.toFixed(2);
|
||||
const card = document.createElement("div");
|
||||
card.className = "metric-card";
|
||||
card.innerHTML = `
|
||||
<div class="metric-value ${cls}">${text}</div>
|
||||
<div class="metric-name">${App.escape(metric)}</div>
|
||||
`;
|
||||
wrap.appendChild(card);
|
||||
});
|
||||
},
|
||||
|
||||
// ② 分数分布直方图（可切换指标）。
|
||||
renderDistribution(report) {
|
||||
const select = document.getElementById("dist-metric-select");
|
||||
const distributions = report.distributions || {};
|
||||
const metricsWithDist = Object.keys(distributions);
|
||||
|
||||
select.innerHTML = "";
|
||||
if (metricsWithDist.length === 0) {
|
||||
Report._drawDistChart([], []);
|
||||
return;
|
||||
}
|
||||
metricsWithDist.forEach((metric) => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = metric;
|
||||
opt.textContent = metric;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
select.onchange = () => Report._updateDistChart(select.value);
|
||||
Report._updateDistChart(metricsWithDist[0]);
|
||||
},
|
||||
|
||||
// 用选定指标的分箱数据刷新直方图。
|
||||
_updateDistChart(metric) {
|
||||
const distributions = Report.currentDetail.report.distributions || {};
|
||||
const bins = distributions[metric] || [];
|
||||
const labels = bins.map((b) => b.label);
|
||||
const counts = bins.map((b) => b.count);
|
||||
const colors = bins.map((b) => Report._binColor(b.lower));
|
||||
Report._drawDistChart(labels, counts, colors);
|
||||
},
|
||||
|
||||
// 低分箱偏红、高分箱偏绿，直观暴露长尾。
|
||||
_binColor(lower) {
|
||||
if (lower >= 0.8) return "#16a34a";
|
||||
if (lower >= 0.6) return "#84cc16";
|
||||
if (lower >= 0.4) return "#eab308";
|
||||
if (lower >= 0.2) return "#f97316";
|
||||
return "#dc2626";
|
||||
},
|
||||
|
||||
// 实际绘制 Chart.js 柱状图。
|
||||
_drawDistChart(labels, counts, colors) {
|
||||
const canvas = document.getElementById("dist-chart");
|
||||
if (Report.distChart) Report.distChart.destroy();
|
||||
Report.distChart = new Chart(canvas, {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels,
|
||||
datasets: [{ data: counts, backgroundColor: colors || "#009999", borderRadius: 4 }],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: true, ticks: { precision: 0 }, grid: { color: "#f1f5f9" } },
|
||||
x: { grid: { display: false } },
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// ③ 分组均值（difficulty / question_type / language）。
|
||||
renderGroupings(report) {
|
||||
const tabsEl = document.getElementById("grouping-tabs");
|
||||
const tableEl = document.getElementById("grouping-table");
|
||||
const groupings = report.groupings || {};
|
||||
const fields = Object.keys(groupings);
|
||||
|
||||
tabsEl.innerHTML = "";
|
||||
if (fields.length === 0) {
|
||||
tableEl.innerHTML = '<p class="muted tiny">数据集未包含可分组字段（difficulty / question_type）。</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const fieldLabels = { difficulty: "难度", question_type: "类型", language: "语言" };
|
||||
Report.activeGrouping = fields[0];
|
||||
fields.forEach((field) => {
|
||||
const tab = document.createElement("button");
|
||||
tab.className = "grouping-tab" + (field === Report.activeGrouping ? " active" : "");
|
||||
tab.textContent = fieldLabels[field] || field;
|
||||
tab.onclick = () => {
|
||||
Report.activeGrouping = field;
|
||||
tabsEl.querySelectorAll(".grouping-tab").forEach((t) => t.classList.remove("active"));
|
||||
tab.classList.add("active");
|
||||
Report._drawGroupTable(report, field);
|
||||
};
|
||||
tabsEl.appendChild(tab);
|
||||
});
|
||||
Report._drawGroupTable(report, Report.activeGrouping);
|
||||
},
|
||||
|
||||
// 渲染单个分组字段的均值表。
|
||||
_drawGroupTable(report, field) {
|
||||
const tableEl = document.getElementById("grouping-table");
|
||||
const stats = report.groupings[field] || [];
|
||||
const metrics = report.metrics || [];
|
||||
|
||||
let head = "<tr><th>组</th><th>样本</th>";
|
||||
metrics.forEach((m) => (head += `<th>${App.escape(App.shortMetric(m))}</th>`));
|
||||
head += "</tr>";
|
||||
|
||||
let body = "";
|
||||
stats.forEach((stat) => {
|
||||
body += `<tr><td>${App.escape(stat.key)}</td><td>${stat.count}</td>`;
|
||||
metrics.forEach((m) => {
|
||||
const v = stat.means ? stat.means[m] : null;
|
||||
const cls = App.scoreClass(v);
|
||||
const text = v === null || v === undefined ? "—" : v.toFixed(2);
|
||||
body += `<td class="${cls}">${text}</td>`;
|
||||
});
|
||||
body += "</tr>";
|
||||
});
|
||||
tableEl.innerHTML = `<table class="group-table">${head}${body}</table>`;
|
||||
},
|
||||
|
||||
// ④ 最低分样本逐条复核表（点击展开）。
|
||||
renderLowest(report) {
|
||||
const wrap = document.getElementById("lowest-table");
|
||||
const samples = report.lowest_samples || [];
|
||||
wrap.innerHTML = "";
|
||||
if (samples.length === 0) {
|
||||
wrap.innerHTML = '<div class="lowest-detail-inner" style="padding:16px">暂无可复核样本。</div>';
|
||||
return;
|
||||
}
|
||||
const metrics = report.metrics || [];
|
||||
samples.forEach((sample, idx) => {
|
||||
const row = document.createElement("div");
|
||||
row.className = "lowest-row";
|
||||
const scoreBadges = metrics
|
||||
.map((m) => {
|
||||
const v = sample.metrics ? sample.metrics[m] : null;
|
||||
const cls = App.scoreClass(v);
|
||||
const text = v === null || v === undefined ? "—" : v.toFixed(2);
|
||||
return `<span class="score-badge ${cls}" title="${App.escape(m)}">${text}</span>`;
|
||||
})
|
||||
.join("");
|
||||
row.innerHTML = `
|
||||
<span class="sid">${App.escape(sample.sample_id)}</span>
|
||||
<span class="q">${App.escape(sample.question || "—")}</span>
|
||||
<span class="scores">${scoreBadges}</span>
|
||||
`;
|
||||
|
||||
const detail = document.createElement("div");
|
||||
detail.className = "lowest-detail";
|
||||
detail.hidden = true;
|
||||
detail.innerHTML = Report._detailHtml(sample);
|
||||
|
||||
row.addEventListener("click", () => {
|
||||
detail.hidden = !detail.hidden;
|
||||
});
|
||||
wrap.appendChild(row);
|
||||
wrap.appendChild(detail);
|
||||
});
|
||||
},
|
||||
|
||||
// 单条样本的展开详情：question / contexts / answer / ground_truth。
|
||||
_detailHtml(sample) {
|
||||
const contexts = (sample.contexts || [])
|
||||
.map((c, i) => `<div class="ctx-item">[${i + 1}] ${App.escape(c)}</div>`)
|
||||
.join("");
|
||||
const errorBlock = sample.error
|
||||
? `<div class="detail-field"><div class="detail-label">错误 error</div><div style="color:#dc2626">${App.escape(sample.error)}</div></div>`
|
||||
: "";
|
||||
return `
|
||||
<div class="lowest-detail-inner">
|
||||
<div class="detail-field">
|
||||
<div class="detail-label">问题 question</div>
|
||||
<div>${App.escape(sample.question || "—")}</div>
|
||||
</div>
|
||||
<div class="detail-field">
|
||||
<div class="detail-label">检索片段 contexts</div>
|
||||
<div class="detail-context">${contexts || "（空）"}</div>
|
||||
</div>
|
||||
<div class="detail-field">
|
||||
<div class="detail-label">生成答案 answer</div>
|
||||
<div>${App.escape(sample.answer || "—")}</div>
|
||||
</div>
|
||||
<div class="detail-field">
|
||||
<div class="detail-label">标准答案 ground_truth</div>
|
||||
<div class="detail-gt">${App.escape(sample.ground_truth || "—")}</div>
|
||||
</div>
|
||||
${errorBlock}
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user