欢迎关注AgentScope,在github上star 🌟。
本文写给有一定编程基础的学习者,得以入门 源码级 开发Agentscope应用,并上线创空间,参加AgentScope的应用开发挑战赛。
赛事详情可见
1. 小步快跑,开发不愁
大家可能跟我一样,经常产生很多有趣的想法,但在落地时会遇到很多一开始没有预料到的卡点,就很容易再而衰、三而竭,在这里我推荐给大家一个我常用的做事模式,能很方便地进入忘我状态:
即:小步快跑、确认可控的小目标,快速迭代和拿到反馈。翻译成Agentscope的应用开发可以是:
- 确定一个应用创作方向:问你自己想做个啥
- 解决UI设计问题:确定一个想模仿的UI,直接copy其UI代码
- 拆分功能:确定好UI各个按钮和组件分别是用来做啥的、预期效果是啥
- 实现功能Demo:东抄抄西抄抄,用AI帮忙写代码,把基础功能能力实现出来,跑通最小MVP、实现可运行和展示的demo
- 迭代和优化效果:跑通了demo之后,通过设计更好的Prompt、设计更多容错机制、不断测试和迭代效果
- 优化项目:通过更多的用户体验获得反馈,优化应用设计、优化UI
那么接下来,让我们正式进入应用开发步骤,带你沉浸式体验【开发Agentscope应用并上线创空间】五大步骤,享受专注开发应用的快乐~
在下文中,将以 ChatTests基础版、长梦、飞花令 三个项目为例,进行实操说明
主要分为五个步骤:创建一个创空间 👉🏻 梳理项目创意 👉🏻 编辑基本代码 👉🏻 调试优化效果 👉🏻 上线创空间展示
2. 创建一个创空间
登录后进入魔搭社区首页,点击【创建创空间】,填写内容,点击【创建创空间】即可创建成功
2.1 或者复制一个已有的创空间
此处以ChatTests的基础代码为例
3. 梳理项目创意
此处以【长梦】和【飞花令】为例
项目名称 |
项目创意简介 |
项目角色设计 |
长梦 |
长梦是一款心理游戏,假设玩家在做一个连环梦,梦的内容离奇古怪。 玩家在梦中需表达自己最真实的想法,与梦中的自己对话,话梦师先生帮你解梦,给玩家做一些启发性的指导。 |
旁白:介绍游戏与故事背景。 梦中的你:玩家在梦境中的投影,负责引导剧情。 话梦师:负责解梦、提供启发性指导。 |
飞花令 |
飞花令是一款利用AgentsSope开发框架,打造的中国古典诗词经典游戏。 古诗词类的知识游戏非常考验参与者(裁判、选手)的知识储备。 这些富有文化魅力和审美体验的活动,因为较高的门槛无法惠及更多爱好诗词的朋友。 飞花令能够给爱好古诗词的朋友带来一种全新的体验:摆脱场地和人员的限制,随时随地和Agent玩飞花令! |
主持人Agent:每轮游戏开始,从中国古典诗词常见意象的关键字中随机选择出题。 评审官Agent:根据主持人提供的关键字和用户提供的诗句,判断是否回答正确,游戏规则包括:
PS:游戏规则还需要进一步优化,比如我发现输入有错别字的诗句,评审官Agent目前还无法识别出来。 对手Agent:和用户对垒,确保回答来自中国古诗词且包含关键字,不能和之前重复。 |
4. 编辑基础代码
以使用gradio做简单前端为例,请确定本地已安装 Python ≥ 3.9,且可正常使用 pip
- 将创空间的代码克隆到开发环境(以本地环境 vscode IDE 为例)
- 进入【空间文件】-【下载创空间】获取代码克隆命令
- 拉取agentscope的代码,并安装agentscope
- 为了确保代码一定能运行,推荐直接使用参考创空间上传的Agentscope文件夹进行安装
#确保运行前,在项目的第一级目录 pip install -e ./agentscope
- 复制appBot.css文件,这个是一些既定样式
(https://modelscope.cn/studios/aomferni/ChatTests_Question_AgentScope_basic/file/view/master/appBot.css?status=0)
- 新建文件app.py,这个是gradio创空间启动的文件
- 文件直接写为下面的代码,
- 代码的大致含义为,执行终端命令pip install -e ./agentscope
- 安装agentscope,并运行app_run.py文件
import os os.system('pip install -e ./agentscope') os.system('python app_run.py')
- 新建agent_configs.json文件,编写所需要的agent人设
这里核心需要确认各个Agent的model_config_name,代表着可调用的模型API
《长梦》中的设置如下:
agent_configs = [ { "class": "DialogAgent", "args": { "name": "pangbai", "sys_prompt": "你是一个故事旁白,需要对玩家进行游戏背景介绍。这个游戏关于玩家的梦境。需要你给足玩家压力,需要通过本次测试帮玩家分析自己的内心", "model_config_name": "qwen", "use_memory": True } }, { "class": "UserAgent", "args": { "name": "user" } }, { "class": "DialogAgent", "args": { "name": "dreamNPC1", "sys_prompt": f"你是玩家梦境里的另一个自己,你需要根据旁白描述的场景与玩家对话。你需要提示玩家快跑,并根据自己想象不断描述{key1},他们在一步步逼近你,想要杀死你。", "model_config_name": "qwen", "use_memory": True } }, { "class": "DialogAgent", "args": { "name": "dreamAna1", "sys_prompt": "你是一个梦境分析师,你需要通过梦境的场景和玩家的对话进行分析。任务1:你需要告诉玩家为什么会做这样的梦。任务2:你需要根据玩家的对话判断玩家性格是否是外向还是内向。任务3:你需要借助一句古语告诉玩家要有勇气。", "model_config_name": "qwen", "use_memory": True } } ]
飞花令中的设置如下:
[ { "class": "DialogAgent", "args": { "name": "host", "sys_prompt": "作为中国古诗词经典游戏飞花令的主持人,您会从'风 花 雪 月'四个字中随机选择一个关键字,限制:你仅需说出一个关键字,其他的话不需要说", "model_config_name": "qwen", "use_memory": true } }, { "class": "DialogAgent", "args": { "name": "judge", "sys_prompt": "作为中国古诗词经典游戏飞花令的评审官,根据主持人提供的关键字和用户提供的诗句,您的任务是判断用户提供的诗句中是否包含主持人提供的关键字。你必须严格遵守以下三条评审规则:1.用户提供的诗句必须来自中国古诗词;2.用户提供的诗句必须包含主持人提供的关键字;3.不能和之前提供的诗句重复。假定用户的初始分score=5,如果用户回答正确,需要给出用户提供诗句的出处,给score加1分并回答'恭喜你,回答正确,加1分,当前得分是{score}'同时鼓励用户继续加油,如果用户回答错误则给score减1分并回答'很遗憾,回答错误,减1分,当前得分是{score}',同时给出用户违反的具体是哪一条评审规则。如果用户得分达到10分,则恭喜用户取得游戏胜利,本轮游戏结束。", "model_config_name": "qwen", "use_memory": true } }, { "class": "DialogAgent", "args": { "name": "participant", "sys_prompt": "作为的中国古诗词经典游戏飞花令的参与者,您的任务是根据主持人给出的关键字,给出包含该关键字的一句中国古诗词,比如主持人给的关键字是'花',你可以说'烟花三月下扬州'。限制:请确保您的回答来自中国古诗词,且必须包含关键字,不能和之前的重复。", "model_config_name": "qwen", "use_memory": true } } ]
- 新建文件app_run.py,编写自己的前端交互逻辑
如最简单的其实就是一个输入框和发送按钮,一个聊天记录框记录agents的对话详情
推荐直接复制合适的项目前端文件,如下代码是ChatTests基础代码app_run.py,
整体代码详见文件,依次是代码整理1,2
交互gradio相关
- 不熟悉Gradio可以找一个你觉得还不错的项目界面,down下来依葫芦画瓢改一个,先把流程跑通,后面有时间再慢慢优化UI界面。
相关伪代码解释如下:
#导入相关库 import gradio as gr from gradio.components import Chatbot #用html写个介绍页 def format_cover_html(): image_src = './pics/logo.png' return f""" <div class="bot_cover"> ...代码略 </div> """ #创建 Gradio 界面 风格 customTheme = gr.themes.Default(primary_hue=gr.themes.utils.colors.blue, radius_size=gr.themes.utils.sizes.radius_none) #创建gradio界面实例 demo,并且设置里面的组件 demo = gr.Blocks(css='appBot.css', theme=customTheme) with demo: #一个信息markdown gr.Markdown('# <center> \N{fire} Powered by Agentscope</center>') with gr.Row(elem_classes='container'): #右边的互动页 with gr.Column(scale=4): #上面是聊天记录 with gr.Column(): user_chatbot = Chatbot(代码略) #下面是输入框 + 发送按钮 with gr.Row(): with gr.Column(scale=12): preview_chat_input = gr.Textbox(代码略) with gr.Column(min_width=70, scale=1): preview_send_button = gr.Button('发送', variant='primary') with gr.Column(scale=1): #左边的介绍页 user_chat_bot_cover = gr.HTML(format_cover_html()) #加载demo示例的初始状态 demo.load(init_user, inputs=[state], outputs=[state]) #启动demo这个gradio界面 demo.queue() demo.launch()
Agent框架核心
需在终端/创空间设置环境变量,防止key在代码中泄露
- Windows:setx DASHSCOPE_API_KEY sk-xxxxxx
- Mac:export DASHSCOPE_API_KEY=sk-xxxxxx
一些周边代码
5. 调试优化效果
1.优化代码逻辑和功能效果
在开发环境使用python app_run.py命令,直接运行你的代码逻辑,有问题改问题,修改问题的思路大致有这几种:
- 通过 AI编码工具插件 进行报错信息理解(很看具体工具的效果)
- 通过 搜索引擎 搜索报错信息,尝试搜索到的解决方案(一般能搜到就比较准确)
- 截图发在交流群提问
2.优化UI交互设计
- 下面以飞花令的UI优化为例
首先,clone ModelScope项目-睡前故事小助手的界面设计,核心代码为其中的./app_run.py,不过这个前端设计的缺陷是:多个Agent之间无法区分,因为单个Chatbot中只能包含两个角色。
然后,继续查看其他项目的界面设计,发现谜馔:寻找招财猫(千问)这个项目的界面设计和逻辑非常适合“飞花令”这个游戏,主要启发是可以设计两个Chatbot,拿来改造一番,核心代码可参考:./app_game.py。这一版分别设计了两个界面:
- 欢迎界面:介绍游戏规则;这里预留了tab页,用于后续添加更多古诗词游戏类型。
- 这里的游戏logo设计采用了锦书 - 创新艺术字,非常优秀的一个艺术字生成项目,在此向项目团队致谢!
- 游戏界面:分两栏,左侧Chatbot是答题区-对应的角色是对手Agent和我,右侧Chatbot是系统区,对应的角色是主持人Agent和评审官Agent;同样这里预留了tab页,用于后续添加更多古诗词游戏类型。
6. 上线空间展示
每次完成一定量的工作,即可同步代码至创空间,并【重启空间展示】
- 使用如下命令将代码push到创空间
cd 相应目录名 git add . git status(此命令选用,是用于查看状态的,可能显示一堆信息) git commit -m "随便写点啥" git push
- 再刷新创空间,在【设置】里【重启空间展示】即可
这里需要注意的点有:
- 添加环境变量:在环境变量管理中添加:"DASHSCOPE_API_KEY"。
恭喜你!看完全文我相信你对于如何去开发一个Agentscope应用已经有了初步了解
Talk is cheap,Show me the Demo!
那么接下来,舞台交给你,快来给大家展示展示属于你的创意吧!
完成比完美更重要,先完成最小MVP,然后不断迭代精益求精,你就是未来的AI原生应用大师!
点击一起参赛吧!