mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-05-02 02:00:45 +08:00
feat: re-implement MultiAgentVisualization
This commit is contained in:
Li Xin
183
web/src/app/landing/store/graph.ts
Normal file
183
web/src/app/landing/store/graph.ts
Normal file
@@ -0,0 +1,183 @@
|
||||
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import type { Edge, Node } from "@xyflow/react";
|
||||
import {
|
||||
Brain,
|
||||
FilePen,
|
||||
MessageSquareQuote,
|
||||
Microscope,
|
||||
SquareTerminal,
|
||||
UserCheck,
|
||||
Users,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
export type GraphNode = Node<{
|
||||
label: string;
|
||||
icon?: LucideIcon;
|
||||
active?: boolean;
|
||||
}>;
|
||||
|
||||
export type Graph = {
|
||||
nodes: GraphNode[];
|
||||
edges: Edge[];
|
||||
};
|
||||
|
||||
const ROW_HEIGHT = 85;
|
||||
const ROW_1 = 0;
|
||||
const ROW_2 = ROW_HEIGHT;
|
||||
const ROW_3 = ROW_HEIGHT * 2;
|
||||
const ROW_4 = ROW_HEIGHT * 2;
|
||||
const ROW_5 = ROW_HEIGHT * 3;
|
||||
const ROW_6 = ROW_HEIGHT * 4;
|
||||
|
||||
export const graph: Graph = {
|
||||
nodes: [
|
||||
{
|
||||
id: "Start",
|
||||
type: "circle",
|
||||
data: { label: "Start" },
|
||||
position: { x: -75, y: ROW_1 },
|
||||
},
|
||||
{
|
||||
id: "Coordinator",
|
||||
data: { icon: MessageSquareQuote, label: "Coordinator" },
|
||||
position: { x: 150, y: ROW_1 },
|
||||
},
|
||||
{
|
||||
id: "Planner",
|
||||
data: { icon: Brain, label: "Planner" },
|
||||
position: { x: 150, y: ROW_2 },
|
||||
},
|
||||
{
|
||||
id: "Reporter",
|
||||
data: { icon: FilePen, label: "Reporter" },
|
||||
position: { x: 275, y: ROW_3 },
|
||||
},
|
||||
{
|
||||
id: "HumanFeedback",
|
||||
data: { icon: UserCheck, label: "Human Feedback" },
|
||||
position: { x: 25, y: ROW_4 },
|
||||
},
|
||||
{
|
||||
id: "ResearchTeam",
|
||||
data: { icon: Users, label: "Research Team" },
|
||||
position: { x: 25, y: ROW_5 },
|
||||
},
|
||||
{
|
||||
id: "Researcher",
|
||||
data: { icon: Microscope, label: "Researcher" },
|
||||
position: { x: -75, y: ROW_6 },
|
||||
},
|
||||
{
|
||||
id: "Coder",
|
||||
data: { icon: SquareTerminal, label: "Coder" },
|
||||
position: { x: 125, y: ROW_6 },
|
||||
},
|
||||
{
|
||||
id: "End",
|
||||
type: "circle",
|
||||
data: { label: "End" },
|
||||
position: { x: 330, y: ROW_6 },
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: "Start->Coordinator",
|
||||
source: "Start",
|
||||
target: "Coordinator",
|
||||
sourceHandle: "right",
|
||||
targetHandle: "left",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "Coordinator->Planner",
|
||||
source: "Coordinator",
|
||||
target: "Planner",
|
||||
sourceHandle: "bottom",
|
||||
targetHandle: "top",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "Planner->Reporter",
|
||||
source: "Planner",
|
||||
target: "Reporter",
|
||||
sourceHandle: "right",
|
||||
targetHandle: "top",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "Planner->HumanFeedback",
|
||||
source: "Planner",
|
||||
target: "HumanFeedback",
|
||||
sourceHandle: "left",
|
||||
targetHandle: "top",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "HumanFeedback->Planner",
|
||||
source: "HumanFeedback",
|
||||
target: "Planner",
|
||||
sourceHandle: "right",
|
||||
targetHandle: "bottom",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "HumanFeedback->ResearchTeam",
|
||||
source: "HumanFeedback",
|
||||
target: "ResearchTeam",
|
||||
sourceHandle: "bottom",
|
||||
targetHandle: "top",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "Reporter->End",
|
||||
source: "Reporter",
|
||||
target: "End",
|
||||
sourceHandle: "bottom",
|
||||
targetHandle: "top",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "ResearchTeam->Researcher",
|
||||
source: "ResearchTeam",
|
||||
target: "Researcher",
|
||||
sourceHandle: "left",
|
||||
targetHandle: "top",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "ResearchTeam->Coder",
|
||||
source: "ResearchTeam",
|
||||
target: "Coder",
|
||||
sourceHandle: "bottom",
|
||||
targetHandle: "left",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "ResearchTeam->Planner",
|
||||
source: "ResearchTeam",
|
||||
target: "Planner",
|
||||
sourceHandle: "right",
|
||||
targetHandle: "bottom",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "Researcher->ResearchTeam",
|
||||
source: "Researcher",
|
||||
target: "ResearchTeam",
|
||||
sourceHandle: "right",
|
||||
targetHandle: "bottom",
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: "Coder->ResearchTeam",
|
||||
source: "Coder",
|
||||
target: "ResearchTeam",
|
||||
sourceHandle: "top",
|
||||
targetHandle: "right",
|
||||
animated: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
5
web/src/app/landing/store/index.ts
Normal file
5
web/src/app/landing/store/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
export * from "./graph";
|
||||
export * from "./playbook";
|
||||
@@ -0,0 +1,111 @@
|
||||
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { create } from "zustand";
|
||||
|
||||
import { sleep } from "~/core/utils";
|
||||
|
||||
import { graph, type Graph } from "./graph";
|
||||
import { playbook } from "./playbook";
|
||||
|
||||
// Store for MAV(Multi-Agent Visualization)
|
||||
export const useMAVStore = create<{
|
||||
graph: Graph;
|
||||
activeStepIndex: number;
|
||||
playing: boolean;
|
||||
}>(() => ({
|
||||
graph,
|
||||
activeStepIndex: -1,
|
||||
playing: false,
|
||||
}));
|
||||
|
||||
export function activateStep(stepIndex: number) {
|
||||
const nextStep = playbook.steps[stepIndex]!;
|
||||
const currentGraph = useMAVStore.getState().graph;
|
||||
const nextGraph: Graph = {
|
||||
nodes: currentGraph.nodes.map((node) => ({
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
active: nextStep.activeNodes.includes(node.id),
|
||||
stepDescription:
|
||||
nextStep.activeNodes.indexOf(node.id) ===
|
||||
nextStep.activeNodes.length - 1 && nextStep.description,
|
||||
stepTooltipPosition:
|
||||
nextStep.activeNodes.indexOf(node.id) ===
|
||||
nextStep.activeNodes.length - 1 && nextStep.tooltipPosition,
|
||||
},
|
||||
})),
|
||||
edges: currentGraph.edges.map((edge) => ({
|
||||
...edge,
|
||||
animated: nextStep.activeEdges.includes(edge.id),
|
||||
})),
|
||||
};
|
||||
useMAVStore.setState({
|
||||
activeStepIndex: stepIndex,
|
||||
graph: nextGraph,
|
||||
});
|
||||
}
|
||||
|
||||
export function nextStep() {
|
||||
let stepIndex = useMAVStore.getState().activeStepIndex;
|
||||
if (stepIndex >= playbook.steps.length - 1) {
|
||||
stepIndex = 0;
|
||||
} else {
|
||||
stepIndex++;
|
||||
}
|
||||
activateStep(stepIndex);
|
||||
}
|
||||
|
||||
export function prevStep() {
|
||||
let stepIndex = useMAVStore.getState().activeStepIndex;
|
||||
if (stepIndex <= 0) {
|
||||
stepIndex = playbook.steps.length - 1;
|
||||
} else {
|
||||
stepIndex--;
|
||||
}
|
||||
activateStep(stepIndex);
|
||||
}
|
||||
|
||||
export async function play() {
|
||||
const state = useMAVStore.getState();
|
||||
const activeStepIndex = state.activeStepIndex;
|
||||
if (activeStepIndex >= playbook.steps.length - 1) {
|
||||
if (state.playing) {
|
||||
stop();
|
||||
return;
|
||||
}
|
||||
}
|
||||
useMAVStore.setState({
|
||||
playing: true,
|
||||
});
|
||||
nextStep();
|
||||
await sleep(4000);
|
||||
const playing = useMAVStore.getState().playing;
|
||||
if (playing) {
|
||||
await play();
|
||||
}
|
||||
}
|
||||
|
||||
export function pause() {
|
||||
useMAVStore.setState({
|
||||
playing: false,
|
||||
});
|
||||
}
|
||||
|
||||
export async function togglePlay() {
|
||||
const playing = useMAVStore.getState().playing;
|
||||
if (playing) {
|
||||
pause();
|
||||
} else {
|
||||
await play();
|
||||
}
|
||||
}
|
||||
|
||||
export function stop() {
|
||||
useMAVStore.setState({
|
||||
playing: false,
|
||||
activeStepIndex: -1,
|
||||
graph,
|
||||
});
|
||||
}
|
||||
|
||||
78
web/src/app/landing/store/playbook.ts
Normal file
78
web/src/app/landing/store/playbook.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
export const playbook = {
|
||||
steps: [
|
||||
{
|
||||
description:
|
||||
"The Coordinator is responsible for engaging with the user to understand their problem and requirements.",
|
||||
activeNodes: ["Start", "Coordinator"],
|
||||
activeEdges: ["Start->Coordinator"],
|
||||
tooltipPosition: "right",
|
||||
},
|
||||
{
|
||||
description:
|
||||
"If the user's problem is clearly defined, the Coordinator will hand it over to the Planner.",
|
||||
activeNodes: ["Coordinator", "Planner"],
|
||||
activeEdges: ["Coordinator->Planner"],
|
||||
tooltipPosition: "left",
|
||||
},
|
||||
{
|
||||
description: "Awaiting human feedback to refine the plan.",
|
||||
activeNodes: ["Planner", "HumanFeedback"],
|
||||
activeEdges: ["Planner->HumanFeedback"],
|
||||
tooltipPosition: "left",
|
||||
},
|
||||
{
|
||||
description: "Updating the plan based on human feedback.",
|
||||
activeNodes: ["HumanFeedback", "Planner"],
|
||||
activeEdges: ["HumanFeedback->Planner"],
|
||||
tooltipPosition: "left",
|
||||
},
|
||||
{
|
||||
description:
|
||||
"The Research Team is responsible for conducting the core research tasks.",
|
||||
activeNodes: ["HumanFeedback", "ResearchTeam"],
|
||||
activeEdges: [
|
||||
"HumanFeedback->ResearchTeam",
|
||||
"ResearchTeam->HumanFeedback",
|
||||
],
|
||||
tooltipPosition: "left",
|
||||
},
|
||||
{
|
||||
description:
|
||||
"The Researcher is responsible for gathering information using search and crawling tools.",
|
||||
activeNodes: ["ResearchTeam", "Researcher"],
|
||||
activeEdges: ["ResearchTeam->Researcher", "Researcher->ResearchTeam"],
|
||||
tooltipPosition: "left",
|
||||
},
|
||||
{
|
||||
description:
|
||||
"The Coder is responsible for writing Python code to solve math problems, data analysis, and more.",
|
||||
tooltipPosition: "right",
|
||||
activeNodes: ["ResearchTeam", "Coder"],
|
||||
activeEdges: ["ResearchTeam->Coder", "Coder->ResearchTeam"],
|
||||
},
|
||||
{
|
||||
description:
|
||||
"Once the research tasks are completed, the Researcher will hand over to the Planner.",
|
||||
activeNodes: ["ResearchTeam", "Planner"],
|
||||
activeEdges: ["ResearchTeam->Planner"],
|
||||
tooltipPosition: "left",
|
||||
},
|
||||
{
|
||||
description:
|
||||
"If no additional information is required, the Planner will handoff to the Reporter.",
|
||||
activeNodes: ["Reporter", "Planner"],
|
||||
activeEdges: ["Planner->Reporter"],
|
||||
tooltipPosition: "right",
|
||||
},
|
||||
{
|
||||
description:
|
||||
"The Reporter will prepare a report summarizing the results.",
|
||||
activeNodes: ["End", "Reporter"],
|
||||
activeEdges: ["Reporter->End"],
|
||||
tooltipPosition: "bottom",
|
||||
},
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user