highlight: androidstudio theme: smartblue

前言

上篇我们实现了基础节点，并暴露出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调用。

当然如果你觉得界面实在丑陋到无法接受，那可以自己搞一套。