2569718930@qq.com
486 lines
19 KiB
TypeScript
486 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import { RefreshCcw, TrendingUp, TrendingDown, Target, Activity } from "lucide-react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { buildDebRecentRankingRows } from "@/lib/deb-training-ranking";
|
|
import { opsApi } from "@/lib/ops-api";
|
|
import type { SystemStatusPayload } from "@/types/ops";
|
|
import Link from "next/link";
|
|
|
|
const TrainingAccuracyCharts = dynamic(
|
|
() => import("./TrainingAccuracyCharts").then((mod) => mod.TrainingAccuracyCharts),
|
|
{
|
|
ssr: false,
|
|
loading: () => <div className="h-[400px] animate-pulse rounded-lg bg-slate-100" />,
|
|
},
|
|
);
|
|
|
|
function StatRow({ label, value }: { label: string; value: React.ReactNode }) {
|
|
return (
|
|
<div className="flex justify-between py-1.5 border-b border-white/5 text-sm">
|
|
<span className="text-slate-400">{label}</span>
|
|
<span className="text-white font-medium">{value}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function KpiCard({ label, value, sub, icon: Icon, color }: {
|
|
label: string; value: string | number; sub?: string;
|
|
icon: React.ComponentType<{ className?: string }>; color: string;
|
|
}) {
|
|
return (
|
|
<Card className="bg-slate-900/60 border-white/5">
|
|
<CardContent className="p-4 flex items-center gap-4">
|
|
<div className={`p-3 rounded-xl ${color}`}>
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-white">{value}</div>
|
|
<div className="text-xs text-slate-400">{label}</div>
|
|
{sub ? <div className="text-[10px] text-slate-500 mt-0.5">{sub}</div> : null}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
interface CityAccuracy {
|
|
city_id: string;
|
|
name: string;
|
|
deb?: {
|
|
hit_rate: number;
|
|
mae: number;
|
|
total_days: number;
|
|
details_str: string;
|
|
} | null;
|
|
deb_recent?: {
|
|
recent_7d?: {
|
|
hit_rate?: number | null;
|
|
samples?: number;
|
|
mae?: number | null;
|
|
};
|
|
recent_14d?: {
|
|
hit_rate?: number | null;
|
|
samples?: number;
|
|
mae?: number | null;
|
|
};
|
|
trust_tier?: string;
|
|
recommendation?: string;
|
|
bias_direction?: string;
|
|
reason?: string;
|
|
} | null;
|
|
mu?: {
|
|
mae: number;
|
|
hit_rate: number;
|
|
brier_score: number | null;
|
|
total_days: number;
|
|
details_str: string;
|
|
} | null;
|
|
}
|
|
|
|
interface DebSummary {
|
|
historical?: {
|
|
avg_hit_rate?: number | null;
|
|
weighted_hit_rate?: number | null;
|
|
avg_mae?: number | null;
|
|
sample_days?: number;
|
|
city_count?: number;
|
|
};
|
|
usable_recent?: {
|
|
window?: string;
|
|
city_count?: number;
|
|
samples?: number;
|
|
hits?: number;
|
|
hit_rate?: number | null;
|
|
avg_mae?: number | null;
|
|
recommendations?: {
|
|
primary?: number;
|
|
supporting?: number;
|
|
};
|
|
};
|
|
recent_7d?: {
|
|
hit_rate?: number | null;
|
|
mae?: number | null;
|
|
samples?: number;
|
|
hits?: number;
|
|
};
|
|
recent_14d?: {
|
|
hit_rate?: number | null;
|
|
mae?: number | null;
|
|
samples?: number;
|
|
hits?: number;
|
|
};
|
|
}
|
|
|
|
function debTrustBadgeClass(tier?: string) {
|
|
if (tier === "high") return "bg-emerald-500/15 text-emerald-300 border-emerald-500/30";
|
|
if (tier === "medium") return "bg-amber-500/15 text-amber-300 border-amber-500/30";
|
|
if (tier === "low") return "bg-rose-500/15 text-rose-300 border-rose-500/30";
|
|
return "bg-slate-500/15 text-slate-300 border-slate-500/30";
|
|
}
|
|
|
|
function debTrustLabel(tier?: string) {
|
|
if (tier === "high") return "高可信";
|
|
if (tier === "medium") return "中可信";
|
|
if (tier === "low") return "低可信";
|
|
return "样本少";
|
|
}
|
|
|
|
function debRecommendationLabel(recommendation?: string) {
|
|
if (recommendation === "primary") return "主用";
|
|
if (recommendation === "supporting") return "辅助";
|
|
if (recommendation === "context_only") return "仅参考";
|
|
return "不足";
|
|
}
|
|
|
|
function formatPct(value: number | null | undefined) {
|
|
return value == null ? "—" : `${value.toFixed(0)}%`;
|
|
}
|
|
|
|
export function TrainingPageClient() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [status, setStatus] = useState<SystemStatusPayload | null>(null);
|
|
const [accuracy, setAccuracy] = useState<CityAccuracy[] | null>(null);
|
|
const [debSummary, setDebSummary] = useState<DebSummary | null>(null);
|
|
|
|
const load = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [s, accData] = await Promise.all([
|
|
opsApi.systemStatus() as Promise<SystemStatusPayload>,
|
|
opsApi.trainingAccuracy().catch(() => ({ accuracy: [] as CityAccuracy[], deb_summary: null })),
|
|
]);
|
|
setStatus(s);
|
|
setAccuracy((accData as { accuracy: CityAccuracy[] }).accuracy ?? []);
|
|
setDebSummary((accData as { deb_summary?: DebSummary | null }).deb_summary ?? null);
|
|
} catch { /* */ }
|
|
setLoading(false);
|
|
};
|
|
|
|
useEffect(() => { void load(); }, []);
|
|
|
|
const kpis = useMemo(() => {
|
|
if (!accuracy?.length) return null;
|
|
const debCities = accuracy.filter((c) => c.deb);
|
|
const avgHit = debCities.reduce((s, c) => s + (c.deb?.hit_rate ?? 0), 0) / debCities.length;
|
|
const avgMae = debCities.reduce((s, c) => s + (c.deb?.mae ?? 0), 0) / debCities.length;
|
|
const best = debCities.reduce((a, b) => ((a.deb?.hit_rate ?? 0) > (b.deb?.hit_rate ?? 0) ? a : b));
|
|
const worst = debCities.reduce((a, b) => ((a.deb?.mae ?? 0) > (b.deb?.mae ?? 0) ? a : b));
|
|
return {
|
|
avgHit: debSummary?.historical?.avg_hit_rate ?? avgHit,
|
|
avgMae: debSummary?.historical?.avg_mae ?? avgMae,
|
|
usableRecent: debSummary?.usable_recent,
|
|
recent7Hit: debSummary?.recent_7d?.hit_rate,
|
|
recent14Hit: debSummary?.recent_14d?.hit_rate,
|
|
best,
|
|
worst,
|
|
};
|
|
}, [accuracy, debSummary]);
|
|
|
|
const usableWindowLabel = (window?: string) =>
|
|
window === "recent_14d" ? "DEB 可用近 14 天命中" : "DEB 可用近 7 天命中";
|
|
|
|
const debRecentRanked = useMemo(() => buildDebRecentRankingRows(accuracy || []), [accuracy]);
|
|
const debRecentRankIndex = useMemo(
|
|
() => new Map(debRecentRanked.map((row, index) => [row.cityId, index])),
|
|
[debRecentRanked],
|
|
);
|
|
|
|
const debChartData = useMemo(() => {
|
|
return debRecentRanked
|
|
.slice(0, 24)
|
|
.map((c) => ({
|
|
name: c.name,
|
|
cityId: c.cityId,
|
|
hitRate: c.hitRate,
|
|
mae: c.mae,
|
|
days: c.samples,
|
|
}));
|
|
}, [debRecentRanked]);
|
|
|
|
const muChartData = useMemo(() => {
|
|
if (!accuracy?.length) return [];
|
|
return accuracy
|
|
.filter((c) => c.mu && c.mu.total_days >= 5 && c.mu.brier_score !== null)
|
|
.sort((a, b) => ((a.mu?.brier_score ?? 1) - (b.mu?.brier_score ?? 1)))
|
|
.map((c) => ({
|
|
name: c.name,
|
|
cityId: c.city_id,
|
|
brierScore: Number((c.mu?.brier_score ?? 0).toFixed(4)),
|
|
hitRate: Number((c.mu?.hit_rate ?? 0).toFixed(1)),
|
|
mae: Number((c.mu?.mae ?? 0).toFixed(1)),
|
|
days: c.mu?.total_days ?? 0,
|
|
}));
|
|
}, [accuracy]);
|
|
|
|
const sortedAccuracy = useMemo(() => {
|
|
if (!accuracy?.length) return [];
|
|
return [...accuracy].sort((a, b) => {
|
|
const aDebRank = debRecentRankIndex.get(a.city_id) ?? 9999;
|
|
const bDebRank = debRecentRankIndex.get(b.city_id) ?? 9999;
|
|
if (aDebRank !== bDebRank) return aDebRank - bDebRank;
|
|
const aMax = Math.max(a.deb?.hit_rate ?? 0, a.mu?.hit_rate ?? 0);
|
|
const bMax = Math.max(b.deb?.hit_rate ?? 0, b.mu?.hit_rate ?? 0);
|
|
return bMax - aMax;
|
|
});
|
|
}, [accuracy, debRecentRankIndex]);
|
|
|
|
if (loading) return <div className="text-slate-400 animate-pulse">加载中...</div>;
|
|
if (!status) return <div className="text-red-400">加载失败</div>;
|
|
|
|
const td = status.training_data;
|
|
const truth = td?.truth_records;
|
|
const features = td?.training_features;
|
|
const coverage = td?.city_coverage;
|
|
const modelCities = td?.model_cities;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold text-white">训练数据</h1>
|
|
<Button variant="outline" size="sm" onClick={load} className="gap-1.5">
|
|
<RefreshCcw className="h-3.5 w-3.5" /> 刷新
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Data volume KPIs */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<Card>
|
|
<CardHeader><CardTitle>真值记录</CardTitle></CardHeader>
|
|
<CardContent className="space-y-1">
|
|
<StatRow label="行数" value={truth?.row_count ?? "—"} />
|
|
<StatRow label="城市数" value={truth?.cities_count ?? "—"} />
|
|
<StatRow label="日期范围" value={truth?.min_date && truth?.max_date ? `${truth.min_date} ~ ${truth.max_date}` : "—"} />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader><CardTitle>训练特征</CardTitle></CardHeader>
|
|
<CardContent className="space-y-1">
|
|
<StatRow label="行数" value={features?.row_count ?? "—"} />
|
|
<StatRow label="城市数" value={features?.cities_count ?? "—"} />
|
|
<StatRow label="日期范围" value={features?.min_date && features?.max_date ? `${features.min_date} ~ ${features.max_date}` : "—"} />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader><CardTitle>城市覆盖</CardTitle></CardHeader>
|
|
<CardContent className="space-y-1">
|
|
<StatRow label="城市总数" value={coverage?.total_cities ?? "—"} />
|
|
<StatRow label="有真值" value={coverage?.with_truth_rows ?? "—"} />
|
|
<StatRow label="有特征" value={coverage?.with_feature_rows ?? "—"} />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Accuracy KPI row */}
|
|
{kpis ? (
|
|
<div className="grid grid-cols-2 md:grid-cols-6 gap-4">
|
|
<KpiCard
|
|
icon={Target} color="bg-cyan-500/20 text-cyan-400"
|
|
label={usableWindowLabel(kpis.usableRecent?.window)}
|
|
value={kpis.usableRecent?.hit_rate == null ? "—" : `${kpis.usableRecent.hit_rate.toFixed(1)}%`}
|
|
sub={`可用城市 ${kpis.usableRecent?.city_count ?? 0} · 样本 ${kpis.usableRecent?.samples ?? 0} · 历史 ${kpis.avgHit.toFixed(1)}%`}
|
|
/>
|
|
<KpiCard
|
|
icon={Target} color="bg-emerald-500/20 text-emerald-400"
|
|
label="近 7 天命中" value={kpis.recent7Hit == null ? "—" : `${kpis.recent7Hit.toFixed(1)}%`}
|
|
/>
|
|
<KpiCard
|
|
icon={Activity} color="bg-violet-500/20 text-violet-400"
|
|
label="近 14 天命中" value={kpis.recent14Hit == null ? "—" : `${kpis.recent14Hit.toFixed(1)}%`}
|
|
/>
|
|
<KpiCard
|
|
icon={Activity} color="bg-blue-500/20 text-blue-400"
|
|
label="DEB 平均 MAE" value={`${kpis.avgMae.toFixed(1)}°`}
|
|
/>
|
|
<KpiCard
|
|
icon={TrendingUp} color="bg-emerald-500/20 text-emerald-400"
|
|
label="最佳城市" value={kpis.best.name}
|
|
sub={`命中 ${kpis.best.deb?.hit_rate.toFixed(0)}% · MAE ${kpis.best.deb?.mae.toFixed(1)}°`}
|
|
/>
|
|
<KpiCard
|
|
icon={TrendingDown} color="bg-rose-500/20 text-rose-400"
|
|
label="最大偏差" value={kpis.worst.name}
|
|
sub={`MAE ${kpis.worst.deb?.mae.toFixed(1)}° · ${kpis.worst.deb?.total_days}天`}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
<TrainingAccuracyCharts debChartData={debChartData} muChartData={muChartData} />
|
|
|
|
{/* City coverage */}
|
|
{modelCities ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardHeader><CardTitle>最强城市</CardTitle></CardHeader>
|
|
<CardContent>
|
|
{modelCities.strongest?.length ? (
|
|
<ul className="space-y-1">
|
|
{modelCities.strongest.map((c, i) => (
|
|
<li key={i} className="text-sm text-slate-300">
|
|
<span className="text-white font-medium">{c.city}</span>
|
|
<span className="text-slate-500 ml-3">真值:{c.truth_rows ?? "—"} 特征:{c.feature_rows ?? "—"}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : <span className="text-slate-500 text-sm">无数据</span>}
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader><CardTitle>覆盖缺口</CardTitle></CardHeader>
|
|
<CardContent>
|
|
{modelCities.gaps?.length ? (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{modelCities.gaps.map((c) => (
|
|
<Badge key={c} variant="secondary">{c}</Badge>
|
|
))}
|
|
</div>
|
|
) : <span className="text-slate-500 text-sm">无缺口</span>}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
) : null}
|
|
|
|
{/* Detail table */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>模型融合与预测准确率详情</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm text-left text-slate-300">
|
|
<thead className="text-xs uppercase bg-slate-800/50 text-slate-400">
|
|
<tr>
|
|
<th scope="col" className="px-4 py-3">城市</th>
|
|
<th scope="col" className="px-4 py-3 text-center">DEB 策略</th>
|
|
<th scope="col" className="px-4 py-3 text-center">近 7 / 14 天</th>
|
|
<th scope="col" className="px-4 py-3 text-center">DEB 命中</th>
|
|
<th scope="col" className="px-4 py-3 text-center">DEB MAE</th>
|
|
<th scope="col" className="px-4 py-3 text-center">DEB 天数</th>
|
|
<th scope="col" className="px-4 py-3 text-center">μ 命中</th>
|
|
<th scope="col" className="px-4 py-3 text-center">μ MAE</th>
|
|
<th scope="col" className="px-4 py-3 text-center">Brier</th>
|
|
<th scope="col" className="px-4 py-3 text-center">μ 天数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-white/5">
|
|
{sortedAccuracy.length > 0 ? (
|
|
sortedAccuracy.map((row) => (
|
|
<tr key={row.city_id} className="hover:bg-white/5 transition-colors">
|
|
<td className="px-4 py-3 font-medium text-white capitalize">
|
|
{row.name}
|
|
<span className="text-xs text-slate-500 block font-mono">{row.city_id}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
{row.deb_recent ? (
|
|
<span
|
|
title={row.deb_recent.reason}
|
|
className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold ${debTrustBadgeClass(row.deb_recent.trust_tier)}`}
|
|
>
|
|
{debTrustLabel(row.deb_recent.trust_tier)} · {debRecommendationLabel(row.deb_recent.recommendation)}
|
|
</span>
|
|
) : (
|
|
<span className="text-slate-600">—</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-center font-mono text-xs text-slate-300">
|
|
{row.deb_recent ? (
|
|
<span>
|
|
{formatPct(row.deb_recent.recent_7d?.hit_rate)}
|
|
<span className="mx-1 text-slate-600">/</span>
|
|
{formatPct(row.deb_recent.recent_14d?.hit_rate)}
|
|
</span>
|
|
) : (
|
|
"—"
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
{row.deb ? (
|
|
<span className={`px-2 py-0.5 rounded-full text-xs font-semibold ${
|
|
row.deb.hit_rate >= 80
|
|
? "bg-green-500/15 text-green-400"
|
|
: row.deb.hit_rate >= 60
|
|
? "bg-yellow-500/15 text-yellow-400"
|
|
: "bg-red-500/15 text-red-400"
|
|
}`}>
|
|
{row.deb.hit_rate.toFixed(0)}%
|
|
</span>
|
|
) : (
|
|
<span className="text-slate-600">—</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-center font-mono">
|
|
{row.deb ? `${row.deb.mae.toFixed(1)}°` : "—"}
|
|
</td>
|
|
<td className="px-4 py-3 text-center text-slate-400">
|
|
{row.deb ? row.deb.total_days : "—"}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
{row.mu ? (
|
|
<span className={`px-2 py-0.5 rounded-full text-xs font-semibold ${
|
|
row.mu.hit_rate >= 80
|
|
? "bg-green-500/15 text-green-400"
|
|
: row.mu.hit_rate >= 60
|
|
? "bg-yellow-500/15 text-yellow-400"
|
|
: "bg-red-500/15 text-red-400"
|
|
}`}>
|
|
{row.mu.hit_rate.toFixed(0)}%
|
|
</span>
|
|
) : (
|
|
<span className="text-slate-600">—</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-center font-mono">
|
|
{row.mu ? `${row.mu.mae.toFixed(1)}°` : "—"}
|
|
</td>
|
|
<td className="px-4 py-3 text-center font-mono">
|
|
{row.mu && row.mu.brier_score !== null ? (
|
|
<span className={`${
|
|
row.mu.brier_score <= 0.1
|
|
? "text-green-400 font-bold"
|
|
: row.mu.brier_score <= 0.25
|
|
? "text-yellow-400"
|
|
: "text-red-400"
|
|
}`}>
|
|
{row.mu.brier_score.toFixed(3)}
|
|
</span>
|
|
) : (
|
|
"—"
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-center text-slate-400">
|
|
{row.mu ? row.mu.total_days : "—"}
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={10} className="px-4 py-8 text-center text-slate-500">
|
|
无有效准确率记录
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>真值历史浏览</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-slate-400 mb-3">按城市和日期筛选查看历史真值记录。</p>
|
|
<Link href="/ops/truth-history" className="inline-flex items-center gap-1.5 rounded-lg bg-cyan-500/15 px-3 py-2 text-xs font-bold text-cyan-200 hover:bg-cyan-500/25 transition-colors">
|
|
打开真值历史 →
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|