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

前言

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

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

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

Dify 的ui

效果如下图示:

  • 支持多种功能节点

  • 但只能打开一个节点的详细内容

  • 提供debug能力,能看到执行细节

image.png

Coze的ui

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

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

image.png

Stable diffusion 的comfyui

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

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

image.png

设计和目标

  • 能够看到整体节点的流转,但是每个界面可以单独打开关闭,参考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:查看执行计划,下载所有生成的节点,上传节点配置(会覆盖当前配置)。

  • 底边为日志信息,可以展开

如下窗口: image.png

关于窗口的设计

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

  • 节点编号,描述,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"}]}}]
}

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

image.png

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

所有的视图配置都在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调用。

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

本文转自 https://juejin.cn/post/7383201975733796891,如有侵权,请联系删除。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/42952.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【spark】Exception in thread “main“ ExitCodeException exitCode=-1073741701

在window上运行spark程序写到本地文件的时候报错。 val rdd sc.sparkContext.parallelize(list)val arr rdd.collect()arr.foreach(println)rdd.saveAsTextFile("test1")sc.close()错误信息: zhangsan lisi wangwu Exception in thread "main" ExitCode…

如何在电子文件上加盖印章

在电子文件上加盖印章,可以通过多种方法实现,主要包括使用专业软件、在线工具以及图片编辑软件等。以下是一些具体步骤和方法: 一、使用专业软件 PDF编辑工具: 启动常用的PDF编辑软件,如Adobe Acrobat、PhantomPDF等…

红日靶场----(三)漏洞利用

上期已经信息收集阶段已经完成,接下来是漏洞利用。 靶场思路 通过信息收集得到两个吧靶场的思路 1、http://192.168.195.33/phpmyadmin/(数据库的管理界面) root/root 2、http://192.168.195.33/yxcms/index.php?radmin/index/login&am…

阿里云通义千问开源两款语音基座模型分别是SenseVoice和CosyVoice

阿里巴巴近期发布了开源语音大模型项目FunAudioLLM,该项目包含了两个核心模型:SenseVoice和CosyVoice。可以精准多语言识别并且进行语音克隆。 SenseVoice:精准多语言识别与情感辨识 SenseVoice主要致力于高精度多语言语音识别、情感辨识和…

使用八股搭建神经网络

神经网络搭建八股 使用tf.keras 六步法搭建模型 1.import 2.train, test 指定输入特征/标签 3.model tf.keras.model.Sequential 在Squential,搭建神经网络 4.model.compile 配置训练方法,选择哪种优化器、损失函数、评测指标 5.model.fit 执行训练过程&a…

送给我亲爱的Python

亲爱的 Python, 在万物皆代码的世界里,你是我最优雅、最高效的算法。自从第一次遇见你,在那行“Hello, World!”之后,我的世界就被点亮了。你的简洁性和强大的功能,让我深深着迷,就像一个精心设计的函数&am…

数据结构双向循环链表

主程序 #include "fun.h" int main(int argc, const char *argv[]) { double_p Hcreate_head(); insert_head(H,10); insert_head(H,20); insert_head(H,30); insert_head(H,40); insert_tail(H,50); show_link(H); del_tail(H); …

Python 传递参数和返回值

Python是一种功能强大的编程语言,它以其简洁和易用性而广受欢迎。在Python编程中,参数传递和返回值是函数调用中两个非常重要的概念。理解这些概念对于编写高效且可维护的代码至关重要。 一、参数传递 在Python中,函数参数可以通过以下几种…

Linux 网络时间同步:NTP 与 Chrony 的终极对决

Linux 网络时间同步:NTP 与 Chrony 的终极对决 在网络世界中,时间同步是一项至关重要的任务。无论是确保分布式系统的一致性,还是维护安全协议的完整性,准确的时间同步都是必不可少的。网络时间协议(NTP)和…

Golang期末作业之电子商城(源码)

作品介绍 1.网页作品简介方面 :主要有:首页 商品详情 购物车 订单 评价 支付 总共 5个页面 2.作品使用的技术:这个作品基于Golang语言,并且结合一些前端的知识,例如:HTML、CSS、JS、AJAX等等知识点,同时连接数据库的&…

统信UOS软件包标识化工具deepin-sbom-tools使用

原文链接:统信UOS上使用软件包标识化工具deepin-sbom-tools Hello,大家好啊!今天给大家带来一篇关于在统信UOS上使用软件包标识化工具deepin-sbom-tools的文章。deepin-sbom-tools是一个强大的工具,可以帮助开发者和系统管理员更好…

Linux初始化新的git仓库

1.在git服务器上找到项目常部署的git地址可以根据其他项目的git地址确认 例如ssh://git192.168.10.100/opt/git/repository.git 用户名:git(前面的是用户) 服务器地址:192.168.10.100 git仓库路径:/opt/git/ 2.在服务器…

数据结构之折半查找

折半查找的算法思想: 折半查找又称二分查找,它仅仅适用于有序的顺表。 折半查找的基本思想:首先将给定值key与表中中间位置的元素(mid的指向元素)比较。midlowhigh/2(向下取整) 若key与中间元…

C#—Json序列化和反序列化

C#—Json序列化和反序列化 在C#中,可以使用System.Web.Script.Serialization.JavaScriptSerializer类来序列化和反序列化JSON数据。 可以使用Newtonsoft.Json库进行JSON的序列化。 可以使用.NET内置的System.Text.Json库来进行JSON的序列化。 json文件格式 [ { …

搜索引擎优化培训机构怎么选?这篇文章告诉你答案

搜索引擎优化(SEO)已成为网络生存必备技能。然而面对众多培训机构,如何选择优秀者?本文将为您揭晓此事,助您找到腾飞之地。 一、培训机构的多样性:琳琅满目的选择 当前SEO培训市场繁芜复杂,既…

C++ 八股(1)

C语言中strcpy为什么不安全?如何解决? 主要原因是缺乏对输入长度的边界检查,容易导致缓冲区溢出漏洞。 解决:可以使用strncpy函数替代,或者在程序最顶端加入代码段 #define _CRT_SECURE_NO_WARNINGS 缓冲区溢出 …

javascript高级部分笔记

javascript高级部分 Function方法 与 函数式编程 call 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明:call 方法可以用来代替另一个对象调用一个方法。cal…

MySQL运维实战之ProxySQL(9.5)proxysql和MySQL Group Replication配合使用

作者:俊达 如果后端MySQL使用了Group Replication,可通过配置mysql_group_replication_hostgroups表来实现高可用 1 mysql_group_replication_hostgroups 字段描述writer_hostgroup写hostgroup。read_only和super_read_only OFF的节点。backup_writer…

Vue3 pdf.js将二进制文件流转成pdf预览

好久没写东西,19年之前写过一篇Vue2将pdf二进制文件流转换成pdf文件,如果Vue2换成Vue3了,顺带来一篇文章,pdf.js这个东西用来解决内网pdf预览,是个不错的选择。 首先去pdfjs官网,下载需要的文件 然后将下载…

第4章 IT服务规划设计

第4章 IT服务规划设计 4.1 概述 规划设计处于整个IT服务生命周期中的前端,可以帮助IT服务供方了解客户的需求,并对其进行全面的需求分析,然后通过对服务要素(包括人员、资源、技术和过程)、服务模式和服务方案的具体…