czj/GEOAgentArticleOptimizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接入后台架构标签与端到端验证

Browse Source
This commit is contained in:
czj
2026-07-16 13:14:27 +08:00
parent adbe9d129d
commit b2e06a2933
7 changed files with 411 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+27 -2
View File
@@ -7,6 +7,7 @@ import {
ArticleInputForm,
type ArticleInputPayload,
} from "../components/article-input-form";
import { ArchitectureObserverPanel } from "../components/architecture/architecture-observer-panel";
import { FactCardEditor } from "../components/fact-card-editor";
import { OptimizedPreview } from "../components/optimized-preview";
import { PerformanceCalibrationPanel } from "../components/performance-calibration-panel";
@@ -47,7 +48,7 @@ interface TimingSummary {
}
export default function Home() {
const [activeTab, setActiveTab] = useState<"geo" | "copy">("geo");
const [activeTab, setActiveTab] = useState<"geo" | "copy" | "architecture">("geo");
const [input, setInput] = useState(initialInput);
const [jobId, setJobId] = useState<string | null>(null);
const [factCard, setFactCard] = useState<OptimizationFactCard | null>(null);
@@ -61,6 +62,7 @@ export default function Home() {
const [elapsedSeconds, setElapsedSeconds] = useState(0);
const [lastTiming, setLastTiming] = useState<TimingSummary | null>(null);
const [streamActivity, setStreamActivity] = useState("");
const [architectureEvents, setArchitectureEvents] = useState<OptimizationStreamEvent[]>([]);
useEffect(() => {
if (!busyAction) return;
@@ -84,6 +86,7 @@ export default function Home() {
setOptimizedArticle(null);
setQaReport(null);
setStreamActivity("正在创建任务");
setArchitectureEvents([]);
try {
const payload: ArticleInputPayload & {
@@ -116,6 +119,9 @@ export default function Home() {
}
function handleStreamEvent(event: OptimizationStreamEvent) {
setArchitectureEvents((current) => event.type === "job_created"
? [event]
: [...current, event]);
switch (event.type) {
case "job_created":
setJobId(event.job.id);
@@ -157,6 +163,12 @@ export default function Home() {
: "优化完成。",
);
break;
case "llm_call_started":
case "llm_call_responded":
case "llm_call_validated":
case "llm_call_failed":
case "trace_warning":
break;
case "failed":
setStreamActivity("优化失败");
throw new Error(event.error);
@@ -200,6 +212,13 @@ export default function Home() {
>
普通文案优化
</button>
<button
className={activeTab === "architecture" ? "active-tab" : undefined}
onClick={() => setActiveTab("architecture")}
type="button"
>
后台架构
</button>
</nav>
{activeTab === "geo" ? (
<>
@@ -237,10 +256,16 @@ export default function Home() {
/>
</div>
</>
) : (
) : activeTab === "copy" ? (
<RenweiCopyOptimizerPanel
apiAccessKey={apiAccessKey}
/>
) : (
<ArchitectureObserverPanel
apiAccessKey={apiAccessKey}
currentJobId={jobId}
liveEvents={architectureEvents}
/>
)}
</main>
);
src/components/architecture/__tests__/trace-state.test.ts
+46
View File
@@ -6,6 +6,7 @@ import type {
LlmTraceRun,
} from "../../../lib/llm/trace-types";
import {
applyLiveOptimizationEvent,
applyLiveTraceEvent,
deriveArchitectureNodes,
formatCallLabel,
@@ -144,4 +145,49 @@ describe("architecture trace state", () => {
});
expect(manifest.calls[0].status).toBe("validated");
});
it("uses workflow events to finish the run and retain QA business status", () => {
const withQa = applyLiveOptimizationEvent(
{ run, calls: [call({ business_status: null })] },
{
type: "qa_ready",
job_id: "job_1",
qa_report: { overall_status: "fail", checks: [] } as never,
},
);
const completed = applyLiveOptimizationEvent(withQa, {
type: "final_ready",
job_id: "job_1",
optimized_article: {} as never,
qa_report: { overall_status: "fail", checks: [] } as never,
export_paths: {},
});
expect(withQa.calls[0].business_status).toBe("fail");
expect(completed.run).toMatchObject({
status: "completed",
current_stage: "final",
});
expect(deriveArchitectureNodes(completed.run, completed.calls).final.status)
.toBe("completed");
});
it("uses workflow failure events to mark the matching architecture stage", () => {
const failed = applyLiveOptimizationEvent(
{ run: { ...run, current_stage: "draft" }, calls: [] },
{
type: "failed",
job_id: "job_1",
stage: "qa",
error: "质量检查失败",
},
);
expect(failed.run).toMatchObject({
status: "failed",
current_stage: "qa",
error_stage: "qa",
error_summary: "质量检查失败",
});
});
});
src/components/architecture/architecture-observer-panel.tsx
+4 -4
View File
@@ -4,13 +4,13 @@ import { useEffect, useMemo, useState } from "react";
import type {
LlmTraceManifest,
LlmTraceStreamEvent,
} from "../../lib/llm/trace-types";
import type { OptimizationStreamEvent } from "../../lib/workflow/stream-events";
import { getJobTrace, getLatestTrace } from "./api-client";
import { ArchitectureFlow } from "./architecture-flow";
import { LlmCallDetail } from "./llm-call-detail";
import {
applyLiveTraceEvent,
applyLiveOptimizationEvent,
deriveArchitectureNodes,
formatCallLabel,
formatNodeStatus,
@@ -19,7 +19,7 @@ import {
interface ArchitectureObserverPanelProps {
apiAccessKey: string;
currentJobId: string | null;
liveEvents: LlmTraceStreamEvent[];
liveEvents: OptimizationStreamEvent[];
}
interface ManifestLoadState {
@@ -90,7 +90,7 @@ export function ArchitectureObserverPanel({
const manifest = useMemo(() => {
if (loadState?.key !== loadKey || !loadState.manifest) return null;
return liveEvents.reduce(applyLiveTraceEvent, loadState.manifest);
return liveEvents.reduce(applyLiveOptimizationEvent, loadState.manifest);
}, [liveEvents, loadKey, loadState]);
if (loadState?.key !== loadKey) {
src/components/architecture/trace-state.ts
+82
View File
@@ -5,6 +5,7 @@ import type {
LlmTraceStreamEvent,
LlmTraceWorkflowStage,
} from "../../lib/llm/trace-types";
import type { OptimizationStreamEvent } from "../../lib/workflow/stream-events";
export type ArchitectureNodeStatus =
| "waiting"
@@ -183,6 +184,87 @@ export function applyLiveTraceEvent(
};
}
function isTraceEvent(
event: OptimizationStreamEvent,
): event is LlmTraceStreamEvent {
return event.type === "llm_call_started"
|| event.type === "llm_call_responded"
|| event.type === "llm_call_validated"
|| event.type === "llm_call_failed"
|| event.type === "trace_warning";
}
function workflowStageForEvent(
event: OptimizationStreamEvent,
): LlmTraceWorkflowStage | null {
if (event.type === "fact_card_ready") return "fact_card";
if (event.type === "draft_started" || event.type === "draft_ready") return "draft";
if (event.type === "qa_started" || event.type === "qa_ready") return "qa";
if (event.type === "rewrite_started" || event.type === "rewrite_ready") return "rewrite";
if (event.type === "final_ready") return "final";
if (event.type === "failed") {
return event.stage === "job" ? "input" : event.stage;
}
return null;
}
export function applyLiveOptimizationEvent(
state: LlmTraceManifest,
event: OptimizationStreamEvent,
): LlmTraceManifest {
if (isTraceEvent(event)) return applyLiveTraceEvent(state, event);
if (event.type === "job_created") return state;
if (event.job_id !== state.run.job_id) return state;
const now = new Date().toISOString();
if (event.type === "qa_ready") {
const qaCalls = state.calls.filter((call) => call.task === "quality_inspector");
const latestQaCall = qaCalls.at(-1);
return {
run: { ...state.run, current_stage: "qa", updated_at: now },
calls: latestQaCall
? updateCall(state.calls, latestQaCall.call_id, (call) => ({
...call,
business_status: event.qa_report.overall_status,
}))
: state.calls,
};
}
const stage = workflowStageForEvent(event);
if (!stage) return state;
if (event.type === "final_ready") {
return {
...state,
run: {
...state.run,
status: "completed",
current_stage: "final",
finished_at: now,
updated_at: now,
},
};
}
if (event.type === "failed") {
return {
...state,
run: {
...state.run,
status: "failed",
current_stage: stage,
error_stage: event.stage,
error_summary: event.error,
finished_at: now,
updated_at: now,
},
};
}
return {
...state,
run: { ...state.run, current_stage: stage, updated_at: now },
};
}
function callDetail(call: LlmTraceCallPublic) {
if (call.status === "failed" || call.schema_valid === false) {
if (call.error_type === "provider") return "模型服务调用失败";
tests/e2e/architecture-observer.spec.ts
+179
View File
@@ -0,0 +1,179 @@
import { expect, test } from "@playwright/test";
const jobId = "job_architecture";
const callId = "llmcall_draft";
const run = {
job_id: jobId,
case_id: "case_architecture",
status: "completed",
current_stage: "final",
trace_completeness: "complete",
error_stage: null,
error_summary: null,
started_at: "2026-07-16T00:00:00.000Z",
finished_at: "2026-07-16T00:00:03.000Z",
updated_at: "2026-07-16T00:00:03.000Z",
};
const call = {
call_id: callId,
job_id: jobId,
sequence: 2,
task: "article_optimizer",
workflow_stage: "draft",
rewrite_round: null,
provider: "deepseek",
model: "deepseek-chat",
status: "validated",
token_usage: { prompt_tokens: 120, completion_tokens: 80, total_tokens: 200 },
schema_name: "optimizedArticleSchema",
schema_valid: true,
validation_issues: [],
business_status: null,
duration_ms: 1600,
started_at: "2026-07-16T00:00:01.000Z",
responded_at: "2026-07-16T00:00:02.500Z",
validated_at: "2026-07-16T00:00:02.600Z",
failed_at: null,
error_type: null,
error_summary: null,
request_available: true,
response_available: true,
};
const article = {
job_id: jobId,
revision: 1,
title: "可观测的 GEO 优化稿",
summary: "展示真实后台调用。",
body_markdown: "## 优化结果\n正文内容。",
image_suggestions: [],
changed_sections: ["title", "body"],
requires_user_confirmation: [],
};
const qaReport = {
job_id: jobId,
revision: 1,
overall_status: "pass",
checks: [],
};
test("后台架构标签按需展示完整 LLM 请求与响应", async ({ page }) => {
const payloadReads = { request: 0, response: 0 };
const streamEvents = [
{ type: "job_created", job: { id: jobId } },
{
type: "llm_call_started",
job_id: jobId,
call_id: callId,
sequence: 2,
task: "article_optimizer",
workflow_stage: "draft",
rewrite_round: null,
provider: "deepseek",
model: "deepseek-chat",
started_at: call.started_at,
request_available: true,
},
{
type: "llm_call_responded",
job_id: jobId,
call_id: callId,
duration_ms: call.duration_ms,
token_usage: call.token_usage,
responded_at: call.responded_at,
response_available: true,
},
{
type: "llm_call_validated",
job_id: jobId,
call_id: callId,
schema_name: call.schema_name,
schema_valid: true,
validation_issues: [],
validated_at: call.validated_at,
},
{
type: "final_ready",
job_id: jobId,
optimized_article: article,
qa_report: qaReport,
export_paths: {
markdown: `/api/jobs/${jobId}/exports/optimized.md`,
docx: `/api/jobs/${jobId}/exports/optimized.docx`,
qa_report: `/api/jobs/${jobId}/exports/qa_report.json`,
},
},
];
await page.route("**/api/jobs/optimize-stream", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/x-ndjson; charset=utf-8",
body: `${streamEvents.map((event) => JSON.stringify(event)).join("\n")}\n`,
});
});
await page.route(`**/api/jobs/${jobId}/llm-trace`, async (route) => {
await route.fulfill({ json: { run, calls: [call] } });
});
await page.route("**/api/llm-traces/latest", async (route) => {
await route.fulfill({ json: { run, calls: [call] } });
});
await page.route(`**/api/jobs/${jobId}/llm-trace/${callId}/request`, async (route) => {
payloadReads.request += 1;
await route.fulfill({
json: {
model: "deepseek-chat",
messages: [
{ role: "system", content: "你是 GEO 文章优化器。" },
{ role: "user", content: "优化这篇原始文章。" },
],
response_format: { type: "json_object" },
temperature: 0.2,
},
});
});
await page.route(`**/api/jobs/${jobId}/llm-trace/${callId}/response`, async (route) => {
payloadReads.response += 1;
await route.fulfill({
json: {
id: "chatcmpl_observer",
choices: [{ message: { role: "assistant", content: JSON.stringify(article) } }],
usage: call.token_usage,
},
});
});
await page.goto("/");
await page.getByLabel("访问密钥").fill("local-dev-key");
await page.getByLabel("文章内容").fill("这是一篇需要优化的原始文章。");
await page.getByRole("button", { name: "开始优化" }).click();
await page.getByRole("button", { name: "后台架构" }).click();
await expect(page.getByLabel("文章优化后台架构")).toBeVisible();
await expect(page.locator(".llm-call-list code", { hasText: "article_optimizer" }))
.toBeVisible();
await expect(page.locator('[data-node="final"]')).toContainText("已完成");
await page.getByRole("tab", { name: "请求" }).click();
await expect(page.locator(".llm-json-view"))
.toContainText("开启技术详情后按需读取完整正文。");
expect(payloadReads.request).toBe(0);
expect(payloadReads.response).toBe(0);
await page.getByLabel("技术详情").check();
await expect(page.locator(".llm-json-view")).toContainText("messages");
await expect(page.locator(".llm-json-view")).toContainText("你是 GEO 文章优化器。");
expect(payloadReads.request).toBe(1);
await page.getByRole("tab", { name: "响应" }).click();
await expect(page.locator(".llm-json-view")).toContainText("choices");
await expect(page.locator(".llm-json-view")).toContainText("chatcmpl_observer");
expect(payloadReads.response).toBe(1);
await page.getByRole("button", { name: "GEO 文章优化" }).click();
await expect(page.getByText("优化完成。", { exact: true })).toBeVisible();
await expect(page.getByRole("link", { name: "optimized.md" })).toBeVisible();
});
tests/e2e/mvp.spec.ts
+1 -16
View File
@@ -6,29 +6,14 @@ test("中文界面可以生成优化文章和导出链接", async ({ page }) =>
await page.goto("/");
await page.getByLabel("访问密钥").fill("local-dev-key");
await page.getByLabel("标题").fill("Example Technology Co., Ltd. GEO 指南");
await page
.getByLabel("正文")
.getByLabel("文章内容")
.fill(
"Example Technology Co., Ltd. has 8 years of GEO optimization experience. Example GEO 帮助市场团队优化内容结构。",
);
await page.getByLabel("图片描述或图片链接").fill("产品仪表盘截图");
await page.getByLabel("用户要求").fill("保持事实准确，语气自然。");
await page.getByRole("button", { name: "分析文章" }).click();
await expect(page.getByText("候选事实卡已生成")).toBeVisible({
timeout: 70_000,
});
const confirmUncertainItemButtons = page.getByRole("button", {
name: "采纳为核心事实",
});
while ((await confirmUncertainItemButtons.count()) > 0) {
await confirmUncertainItemButtons.first().click();
}
await page.getByRole("button", { name: "确认事实卡" }).click();
await expect(page.getByText("事实卡已确认。")).toBeVisible();
await page.getByRole("button", { name: "开始优化" }).click();
await expect(page.getByRole("link", { name: "optimized.md" })).toBeVisible({
timeout: 120_000,
tests/e2e/sample-flow/page-flow.ts
+72 -7
View File
@@ -37,6 +37,16 @@ interface QaReportJson {
checks?: Array<{ rule_id?: string; status?: "pass" | "warn" | "fail" }>;
}
interface TraceManifestJson {
run?: { job_id?: string; status?: string; trace_completeness?: string };
calls?: Array<{
task?: string;
status?: string;
request_available?: boolean;
response_available?: boolean;
}>;
}
export async function runSamplePageFlow({
page,
request,
@@ -87,17 +97,29 @@ export async function runSamplePageFlow({
jobId,
exportsDir,
});
const traceResult = await validateLlmTrace({
request,
baseURL,
apiAccessKey,
jobId,
});
const qa = readQaReport(exportsDir);
const finalScreenshot = join(sampleDir, "final.png");
await page.screenshot({ path: finalScreenshot, fullPage: true });
const failedExports = exportResults.filter((result) => result.status === "failed");
const failureMessage = [
...failedExports.map(
(result) => `${result.fileName}: ${result.error ?? result.statusCode}`,
),
...(traceResult.error ? [`LLM trace: ${traceResult.error}`] : []),
].join("; ");
return {
file: sample.filePath,
name: sample.name,
slug: sample.slug,
status: failedExports.length === 0 ? "passed" : "failed",
status: failedExports.length === 0 && !traceResult.error ? "passed" : "failed",
duration_ms: Date.now() - startedAt,
job_id: jobId,
qa_status: qa.overall_status,
@@ -108,18 +130,61 @@ export async function runSamplePageFlow({
exports: Object.fromEntries(
exportResults.map((result) => [result.fileName, result.status]),
),
llm_tasks: [],
failure_category: failedExports.length > 0 ? "export_failed" : undefined,
failure_message:
failedExports
.map((result) => `${result.fileName}: ${result.error ?? result.statusCode}`)
.join("; ") || undefined,
llm_tasks: traceResult.tasks,
failure_category: failedExports.length > 0
? "export_failed"
: traceResult.error
? "llm_failed"
: undefined,
failure_message: failureMessage || undefined,
artifacts: {
final_screenshot: finalScreenshot,
},
};
}
async function validateLlmTrace({
request,
baseURL,
apiAccessKey,
jobId,
}: {
request: APIRequestContext;
baseURL: string;
apiAccessKey: string;
jobId: string;
}) {
const headers: Record<string, string> | undefined = apiAccessKey
? { "x-api-key": apiAccessKey }
: undefined;
const response = await request.get(
`${baseURL}/api/jobs/${jobId}/llm-trace`,
{ headers },
);
if (!response.ok()) {
return { tasks: [], error: `metadata endpoint returned ${response.status()}` };
}
const manifest = await response.json() as TraceManifestJson;
const calls = manifest.calls ?? [];
const tasks = calls
.map((call) => call.task)
.filter((task): task is string => Boolean(task));
if (manifest.run?.job_id !== jobId) {
return { tasks, error: "run job_id does not match completed job" };
}
if (manifest.run.status !== "completed") {
return { tasks, error: `run status is ${manifest.run.status ?? "missing"}` };
}
if (calls.length === 0) {
return { tasks, error: "no LLM calls were recorded" };
}
if (calls.some((call) => !call.status || call.request_available !== true)) {
return { tasks, error: "call metadata is incomplete" };
}
return { tasks, error: undefined };
}
async function fillFirstAvailable(page: Page, labels: string[], value: string) {
for (const label of labels) {
const locator = page.getByLabel(label);