Expose evaluation agents in the web console

2026-06-30 14:55:46 +08:00
parent b913877929
commit 4d0c26be05
6 changed files with 189 additions and 9 deletions
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import {
  Activity,
  BarChart3,
+  Bot,
  Boxes,
  ClipboardCheck,
  Cpu,
@@ -231,6 +232,26 @@ type CapabilityPayload = {
  domains: CapabilityDomain[];
 };

+type AgentCheck = {
+  name: string;
+  passed: boolean;
+  detail?: unknown;
+  details?: unknown;
+};
+
+type EvaluationAgentPayload = {
+  agent: string;
+  score: number;
+  checks: AgentCheck[];
+  suggestions: string[];
+};
+
+type ValidationAgentPayload = {
+  agent: string;
+  passed: boolean;
+  checks: AgentCheck[];
+};
+
 async function api<T>(path: string, init?: RequestInit): Promise<T> {
  const res = await fetch(`${API_BASE}${path}`, {
    headers: { "Content-Type": "application/json" },
@@ -305,11 +326,12 @@ function useData() {
  const [deepAcceptance, setDeepAcceptance] = useState<DeepAcceptancePayload | null>(null);
  const [runtimeReadiness, setRuntimeReadiness] = useState<RuntimeReadinessPayload | null>(null);
  const [capabilities, setCapabilities] = useState<CapabilityPayload | null>(null);
+  const [agentEvaluation, setAgentEvaluation] = useState<EvaluationAgentPayload | null>(null);
  const [error, setError] = useState<string>("");

  async function refresh() {
    try {
-      const [catalogNext, gpusNext, readinessNext, capabilitiesNext, jobsNext, resultsNext, curvesNext, datasetsNext, coverageNext, acceptanceNext, deepAcceptanceNext] = await Promise.all([
+      const [catalogNext, gpusNext, readinessNext, capabilitiesNext, jobsNext, resultsNext, curvesNext, datasetsNext, coverageNext, acceptanceNext, deepAcceptanceNext, agentEvaluationNext] = await Promise.all([
        api<Catalog>("/api/catalog"),
        api<GpuPayload>("/api/system/gpus"),
        api<RuntimeReadinessPayload>("/api/system/readiness"),
@@ -320,7 +342,8 @@ function useData() {
        api<UploadedDataset[]>("/api/datasets"),
        api<CoveragePayload>("/api/coverage"),
        api<AcceptancePayload>("/api/acceptance/latest"),
-        api<DeepAcceptancePayload>("/api/acceptance/deep/latest")
+        api<DeepAcceptancePayload>("/api/acceptance/deep/latest"),
+        api<EvaluationAgentPayload>("/api/agents/evaluate")
      ]);
      setCatalog(catalogNext);
      setGpus(gpusNext);
@@ -345,6 +368,7 @@ function useData() {
      setCoverage(coverageNext);
      setAcceptance(acceptanceNext);
      setDeepAcceptance(deepAcceptanceNext);
+      setAgentEvaluation(agentEvaluationNext);
      setError("");
    } catch (err) {
      setError(String(err));
@@ -357,7 +381,7 @@ function useData() {
    return () => window.clearInterval(timer);
  }, []);

-  return { catalog, gpus, runtimeReadiness, capabilities, jobs, results, curves, datasets, datasetValidations, coverage, acceptance, deepAcceptance, error, refresh };
+  return { catalog, gpus, runtimeReadiness, capabilities, agentEvaluation, jobs, results, curves, datasets, datasetValidations, coverage, acceptance, deepAcceptance, error, refresh };
 }

 function StatusPill({ status }: { status: string }) {
@@ -380,7 +404,7 @@ function JobProgressBar({ progress }: { progress?: JobProgress }) {
 }

 function App() {
-  const { catalog, gpus, runtimeReadiness, capabilities, jobs, results, curves, datasets, datasetValidations, coverage, acceptance, deepAcceptance, error, refresh } = useData();
+  const { catalog, gpus, runtimeReadiness, capabilities, agentEvaluation, jobs, results, curves, datasets, datasetValidations, coverage, acceptance, deepAcceptance, error, refresh } = useData();
  const [taskType, setTaskType] = useState("mock.echo");
  const [params, setParams] = useState(JSON.stringify(defaultParams["mock.echo"], null, 2));
  const [selectedJob, setSelectedJob] = useState<Job | null>(null);
@@ -392,6 +416,8 @@ function App() {
  const [selectedCurvePath, setSelectedCurvePath] = useState("");
  const [uploadKind, setUploadKind] = useState<"images" | "labels" | "masks">("images");
  const [uploadFiles, setUploadFiles] = useState<FileList | null>(null);
+  const [agentValidation, setAgentValidation] = useState<ValidationAgentPayload | null>(null);
+  const [agentBusy, setAgentBusy] = useState(false);

  const runningCount = jobs.filter((job) => job.status === "running").length;
  const successCount = jobs.filter((job) => job.status === "success").length;
@@ -491,6 +517,16 @@ function App() {
    }
  }

+  async function runAgentValidation() {
+    setAgentBusy(true);
+    try {
+      const result = await api<ValidationAgentPayload>("/api/agents/validate?run_build=false&run_acceptance=false&run_deep=false");
+      setAgentValidation(result);
+    } finally {
+      setAgentBusy(false);
+    }
+  }
+
  async function createDataset() {
    setBusy(true);
    try {
@@ -575,6 +611,7 @@ function App() {
          <a href="#gpu"><Cpu size={18} />GPU</a>
          <a href="#runtime"><ShieldCheck size={18} />环境</a>
          <a href="#coverage"><ClipboardCheck size={18} />覆盖</a>
+          <a href="#agents"><Bot size={18} />Agent</a>
          <a href="#weights"><HardDrive size={18} />权重</a>
          <a href="#results"><BarChart3 size={18} />结果</a>
        </nav>
@@ -892,6 +929,45 @@ function App() {
          </div>
        </section>

+        <section className="grid two" id="agents">
+          <div className="panel agentPanel">
+            <div className="panelHead">
+              <div>
+                <p className="eyebrow">Evaluation Agent</p>
+                <h2>评价建议</h2>
+              </div>
+              <StatusPill status={(agentEvaluation?.score ?? 0) >= 1 ? "success" : "queued"} />
+            </div>
+            <div className="agentScore">
+              <strong>{Math.round((agentEvaluation?.score ?? 0) * 100)}%</strong>
+              <span>{agentEvaluation?.checks.filter((item) => item.passed).length ?? 0}/{agentEvaluation?.checks.length ?? 0} checks passed</span>
+            </div>
+            <div className="suggestionList">
+              {(agentEvaluation?.suggestions ?? ["等待评价 agent 返回建议。"]).slice(0, 6).map((item, index) => (
+                <div key={`${index}-${item}`}>{item}</div>
+              ))}
+            </div>
+            <AgentCheckList checks={agentEvaluation?.checks ?? []} limit={14} />
+          </div>
+
+          <div className="panel agentPanel">
+            <div className="panelHead">
+              <div>
+                <p className="eyebrow">Validation Agent</p>
+                <h2>运行验证</h2>
+              </div>
+              <button className="primary" disabled={agentBusy} onClick={runAgentValidation}>
+                <ClipboardCheck size={17} />验证
+              </button>
+            </div>
+            <div className="agentScore">
+              <strong>{agentValidation ? (agentValidation.passed ? "OK" : "Check") : "Ready"}</strong>
+              <span>{agentValidation ? `${agentValidation.checks.filter((item) => item.passed).length}/${agentValidation.checks.length} checks passed` : "轻量验证不会触发深度训练"}</span>
+            </div>
+            <AgentCheckList checks={agentValidation?.checks ?? []} limit={18} />
+          </div>
+        </section>
+
        <section className="grid four">
          <div className="panel" id="gpu">
            <div className="panelHead">
@@ -1047,6 +1123,22 @@ function App() {
  );
 }

+function AgentCheckList({ checks, limit }: { checks: AgentCheck[]; limit: number }) {
+  if (!checks.length) {
+    return <p className="muted">尚未运行验证。</p>;
+  }
+  return (
+    <div className="agentCheckList">
+      {checks.slice(0, limit).map((check) => (
+        <div key={check.name} className={check.passed ? "ok" : "bad"} title={check.name}>
+          <span>{check.name}</span>
+          <small>{check.passed ? "passed" : "needs attention"}</small>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function ResultPreview({ results }: { results: ResultItem[] }) {
  if (!results.length) {
    return <p className="muted">暂无结果</p>;
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -610,6 +610,82 @@ textarea {
  white-space: nowrap;
 }

+.agentPanel {
+  min-height: 360px;
+}
+
+.agentScore {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: end;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.agentScore strong {
+  font-size: 38px;
+  line-height: 1;
+}
+
+.agentScore span {
+  min-width: 0;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.suggestionList,
+.agentCheckList {
+  display: grid;
+  gap: 8px;
+}
+
+.suggestionList {
+  margin-bottom: 12px;
+}
+
+.suggestionList div,
+.agentCheckList div {
+  min-width: 0;
+  padding: 9px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: #101310;
+}
+
+.suggestionList div {
+  color: var(--ink);
+  line-height: 1.45;
+}
+
+.agentCheckList {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  max-height: 310px;
+  overflow: auto;
+}
+
+.agentCheckList div.ok {
+  border-color: rgba(157, 226, 111, 0.32);
+}
+
+.agentCheckList div.bad {
+  border-color: rgba(240, 113, 103, 0.55);
+}
+
+.agentCheckList span,
+.agentCheckList small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentCheckList small {
+  color: var(--muted);
+  margin-top: 2px;
+}
+
 .datasetCard {
  width: 100%;
  display: block;
@@ -1126,6 +1202,7 @@ meter {
  .opGrid,
  .sampleStrip,
  .taskCheckList,
+  .agentCheckList,
  .qualityStats,
  .qualityChecks {
    grid-template-columns: repeat(2, minmax(0, 1fr));