【ai_agent】从零写一个agent框架（五）基于egui制作一个agent/workflow在线编辑器

前言

上篇我们实现了基础节点，并暴露出grpc服务，但是手动编辑文本制作一个workflow实在强人所难。

所以本文我们做个webui自动生成workflow。

开搞之前先看看别人怎么做的。

Dify 的ui

效果如下图示：

支持多种功能节点
但只能打开一个节点的详细内容
提供debug能力，能看到执行细节

Coze的ui

界面算是dify的升级版，一样丝滑，效果如下图示：

能在编辑页直接看到每个节点的细节，但是当节点非常多的时候，非常难以操作，看的眼晕。
debug在每个节点中可以直接看到。

Stable diffusion 的comfyui

画风一转，是我喜欢的类型

更自由的节点设计，任意扩散
不再是节点间的流转，而是变量间相互链接
和coze一个毛病，节点多了极难维护。

设计和目标

能够看到整体节点的流转，但是每个界面可以单独打开关闭，参考dify。
必须提供debug功能。最好是和coze一样直接绑定到节点上。
节点的界面设计和comfyui一样是开放式的，可以随意定义。

效果预览

服务启动方法：【ai_agent】从零写一个agent框架(一)打造最强开放agent编辑框架，拳打dify，脚踩coze

操作方法：

顶边控制栏 project|setting|about ，点击会在左边生成控制界面，在project界面可以加载项目的service节点。
编辑窗口
- FlowChart LLM Script Workflow 都是具体的服务节点。
- 红色clean，清理所有的已经生成的节点
- 红色reset，重置整个界面
- 绿色save，保存配置，默认30s自动保存，时间在project界面可以调整。
- 绿色debug，debug一次流程。
右边上侧为所有节点列表，可以在这里打开关闭节点视图，也可以删除。
work-flow-view，查看节点间的流转关系
plan-text-view：查看执行计划，下载所有生成的节点，上传节点配置(会覆盖当前配置)。
底边为日志信息，可以展开

如下窗口：

关于窗口的设计

窗口的结构目前是固定的五部分，当然未来可能会更多。

节点编号，描述，service类型，
input，输入参数结构
output，输出参数结构
goto，向那些节点流转
debug，调试信息

我们看一下窗口的具体定义，以openai-llm为例。在线查看，我这里也贴一下：

{"plugin_list":[{"code":"openai-LLM","class":"LLM","desc":"openai LLM chat","ui_type":"window","service_type":"openai_llm","input_vars": {"model": {"type":"string","default":"gpt-3.5-turbo","ui_type": "enum","ui_extend_enum": ["gpt-4o","gpt-4-turbo","gpt-4","gpt-3.5-turbo"]},"temperature":{"type":"f32","default": 0.7,"desc":"The randomness of the model generated responses","ui_extend_slider": {"max": 2.0,"min": 0.0,"speed": 0.01}},"max_tokens":{"type":"number","default": 512,"desc":"answer max tokens","ui_extend_slider": {"max": 512,"min": 0,"speed": 1}},"prompt":{"type":"string","default":"","ui_type":"text_edit_multi"},"query":{"type":"string","default":"","required":true},"tools":{"type": "list"},"context": {"type": "list"},"extend":{"type": "object"}},"output_vars": {"answer": "this is text","tools": [{"function_name": "tool name","args": "function call args"}]}}]
}

那么它对应展示的效果如下。

如果自己定义了一个功能视图，应该放在哪里？

所有的视图配置都在webui/server/plugin目录下，当点击project->LOAD按钮时，会默认加载这个目录下的全部配置。

代码实现

仓库地址：ai_agent/webui at main · woshihaoren4/ai_agent

webui本身也是一个前后端分离的项目，webui/server这个文件是一个微小的服务端，提供插件加载，debug调用的功能，通过go run main.go启动
webui项目是跨端的，可以当做应用打开。
也可以在浏览器上打开，此时以wasm的模型运行，需要用trunk启动，trunk安装使用教程。

具体的实现就不贴了，用egui画的，顺着update往下捋就行了。