前言
上篇我们实现了基础节点,并暴露出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往下捋就行了。
尾语
目前做的这版UI还是很简洁的,算是基本能用。
整个ai_agent
在设计思路上参考了BaaS Solution
,也就是说你在webui上设计好了流程后,最终拿到生产环境上用时就不需要webui的参与了,直接api调用。
当然如果你觉得界面实在丑陋到无法接受,那可以自己搞一套。