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

最新推荐文章于 2024-08-31 23:13:29 发布

雪碧没气阿

最新推荐文章于 2024-08-31 23:13:29 发布

阅读量1.5k

点赞数 27

文章标签：人工智能大语言模型 ai大模型 Agent LLM 大模型训练计算机技术

本文链接：https://blog.csdn.net/xxue345678/article/details/140709231

版权

前言

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

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

如何学习大模型 AI ？

由于新岗位的生产效率，要优于被取代岗位的生产效率，所以实际上整个社会的生产效率是提升的。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

在这里插入图片描述

第一阶段（10天）：初阶应用

该阶段让大家对大模型 AI有一个最前沿的认识，对大模型 AI 的理解超过 95% 的人，可以在相关讨论时发表高级、不跟风、又接地气的见解，别人只会和 AI 聊天，而你能调教 AI，并能用代码将大模型和业务衔接。

大模型 AI 能干什么？
大模型是怎样获得「智能」的？
用好 AI 的核心心法
大模型应用业务架构
大模型应用技术架构
代码示例：向 GPT-3.5 灌入新知识
提示工程的意义和核心思想
Prompt 典型构成
指令调优方法论
思维链和思维树
Prompt 攻击和防范
…

第二阶段（30天）：高阶应用

该阶段我们正式进入大模型 AI 进阶实战学习，学会构造私有知识库，扩展 AI 的能力。快速开发一个完整的基于 agent 对话机器人。掌握功能最强的大模型开发框架，抓住最新的技术进展，适合 Python 和 JavaScript 程序员。

为什么要做 RAG
搭建一个简单的 ChatPDF
检索的基础概念
什么是向量表示（Embeddings）
向量数据库与向量检索
基于向量检索的 RAG
搭建 RAG 系统的扩展知识
混合检索与 RAG-Fusion 简介
向量模型本地部署
…

第三阶段（30天）：模型训练

恭喜你，如果学到这里，你基本可以找到一份大模型 AI相关的工作，自己也能训练 GPT 了！通过微调，训练自己的垂直大模型，能独立训练开源多模态大模型，掌握更多技术方案。

到此为止，大概2个月的时间。你已经成为了一名“AI小子”。那么你还想往下探索吗？

为什么要做 RAG
什么是模型
什么是模型训练
求解器 & 损失函数简介
小实验2：手写一个简单的神经网络并训练它
什么是训练/预训练/微调/轻量化微调
Transformer结构简介
轻量化微调
实验数据集的构建
…

第四阶段（20天）：商业闭环

对全球大模型从性能、吞吐量、成本等方面有一定的认知，可以在云端和本地等多种环境下部署大模型，找到适合自己的项目/创业方向，做一名被 AI 武装的产品经理。

硬件选型
带你了解全球大模型
使用国产大模型服务
搭建 OpenAI 代理
热身：基于阿里云 PAI 部署 Stable Diffusion
在本地计算机运行大模型
大模型的私有化部署
基于 vLLM 部署大模型
案例：如何优雅地在阿里云私有部署开源大模型
部署一套开源 LLM 项目
内容安全
互联网信息服务算法备案
…

学习是一个过程，只要学习就会有挑战。天道酬勤，你越努力，就会成为越优秀的自己。

如果你能在15天内完成所有的任务，那你堪称天才。然而，如果你能完成 60-70% 的内容，你就已经开始具备成为一名大模型 AI 的正确特征了。

这份完整版的大模型 AI 学习资料已经上传CSDN，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【`保证100%免费`】

雪碧没气阿

关注

27
点赞
踩
47

收藏

觉得还不错? 一键收藏
0
评论
【AI_agent】从零写一个agent框架（五）基于egui制作一个agent/workflow在线编辑器

上篇我们实现了基础节点，并暴露出grpc服务，但是手动编辑文本制作一个workflow实在强人所难。所以本文我们做个webui自动生成workflow。开搞之前先看看别人怎么做的。
复制链接

扫一扫