【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往下捋就行了。