适合假期自学一战成名的必看秘籍-五板斧打造AgentScope应用

简介: 本文写给有一定编程基础的学习者,得以入门 源码级 开发Agentscope应用,并上线创空间,参加AgentScope的应用开发挑战赛。

欢迎关注AgentScope,在github上star 🌟。


本文写给有一定编程基础的学习者,得以入门 源码级 开发Agentscope应用,并上线创空间,参加AgentScope的应用开发挑战赛。


赛事详情可见


1. 小步快跑,开发不愁

大家可能跟我一样,经常产生很多有趣的想法,但在落地时会遇到很多一开始没有预料到的卡点,就很容易再而衰、三而竭,在这里我推荐给大家一个我常用的做事模式,能很方便地进入忘我状态:


umvm3uqpbgldm_859269af8e0d4a6c80df5579eba17ed1.png


即:小步快跑、确认可控的小目标,快速迭代和拿到反馈。翻译成Agentscope的应用开发可以是:


  1. 确定一个应用创作方向:问你自己想做个啥
  2. 解决UI设计问题:确定一个想模仿的UI,直接copy其UI代码
  3. 拆分功能:确定好UI各个按钮和组件分别是用来做啥的、预期效果是啥
  4. 实现功能Demo:东抄抄西抄抄,用AI帮忙写代码,把基础功能能力实现出来,跑通最小MVP、实现可运行和展示的demo
  5. 迭代和优化效果:跑通了demo之后,通过设计更好的Prompt、设计更多容错机制、不断测试和迭代效果
  6. 优化项目:通过更多的用户体验获得反馈,优化应用设计、优化UI


那么接下来,让我们正式进入应用开发步骤,带你沉浸式体验【开发Agentscope应用并上线创空间】五大步骤,享受专注开发应用的快乐~


在下文中,将以 ChatTests基础版、长梦、飞花令 三个项目为例,进行实操说明

主要分为五个步骤:创建一个创空间 👉🏻 梳理项目创意 👉🏻 编辑基本代码 👉🏻 调试优化效果 👉🏻 上线创空间展示



2. 创建一个创空间

登录后进入魔搭社区首页,点击【创建创空间】,填写内容,点击【创建创空间】即可创建成功

image.png

image.png




2.1 或者复制一个已有的创空间

此处以ChatTests的基础代码为例

image.png


image.png




3. 梳理项目创意


此处以【长梦】和【飞花令】为例

项目名称

项目创意简介

项目角色设计

长梦

长梦是一款心理游戏,假设玩家在做一个连环梦,梦的内容离奇古怪。

玩家在梦中需表达自己最真实的想法,与梦中的自己对话,话梦师先生帮你解梦,给玩家做一些启发性的指导。

旁白:介绍游戏与故事背景。

梦中的你:玩家在梦境中的投影,负责引导剧情。

话梦师:负责解梦、提供启发性指导。

飞花令

飞花令是一款利用AgentsSope开发框架,打造的中国古典诗词经典游戏。

古诗词类的知识游戏非常考验参与者(裁判、选手)的知识储备。

这些富有文化魅力和审美体验的活动,因为较高的门槛无法惠及更多爱好诗词的朋友。

飞花令能够给爱好古诗词的朋友带来一种全新的体验:摆脱场地和人员的限制,随时随地和Agent玩飞花令

主持人Agent:每轮游戏开始,从中国古典诗词常见意象的关键字中随机选择出题。

评审官Agent:根据主持人提供的关键字和用户提供的诗句,判断是否回答正确,游戏规则包括:

  1. 必须来自中国古诗词;
  2. 必须包含主持人提供的关键字;
  3. 不能和之前的诗句重复。

PS:游戏规则还需要进一步优化,比如我发现输入有错别字的诗句,评审官Agent目前还无法识别出来。

对手Agent:和用户对垒,确保回答来自中国古诗词且包含关键字,不能和之前重复。



4. 编辑基础代码

以使用gradio做简单前端为例,请确定本地已安装 Python ≥ 3.9,且可正常使用 pip


  1. 将创空间的代码克隆到开发环境(以本地环境 vscode IDE 为例)
  • 进入【空间文件】-【下载创空间】获取代码克隆命令

image.png


image.png


  1. 拉取agentscope的代码,并安装agentscope
  • 为了确保代码一定能运行,推荐直接使用参考创空间上传的Agentscope文件夹进行安装

image.png


#确保运行前,在项目的第一级目录
pip install -e ./agentscope
  1. 复制appBot.css文件,这个是一些既定样式

(https://modelscope.cn/studios/aomferni/ChatTests_Question_AgentScope_basic/file/view/master/appBot.css?status=0)


  1. 新建文件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')

image.png


  1. 新建agent_configs.json文件,编写所需要的agent人设

这里核心需要确认各个Agent的model_config_name,代表着可调用的模型API

image.png


《长梦》中的设置如下:

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
        }
    }
]


  1. 新建文件app_run.py,编写自己的前端交互逻辑

如最简单的其实就是一个输入框和发送按钮,一个聊天记录框记录agents的对话详情


推荐直接复制合适的项目前端文件,如下代码是ChatTests基础代码app_run.py,


整体代码详见文件,依次是代码整理1,2

image.png

image.png


交互gradio相关

  • 不熟悉Gradio可以找一个你觉得还不错的项目界面,down下来依葫芦画瓢改一个,先把流程跑通,后面有时间再慢慢优化UI界面。


image.png


image.png


image.png


image.png


image.png

   

相关伪代码解释如下:

#导入相关库
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框架核心

image.png


需在终端/创空间设置环境变量,防止key在代码中泄露

  • Windows:setx DASHSCOPE_API_KEY sk-xxxxxx
  • Mac:export DASHSCOPE_API_KEY=sk-xxxxxx

image.png

image.png



一些周边代码

image.png


1.关于长梦的代码详解见

2.关于飞花令的代码详解见


5. 调试优化效果

1.优化代码逻辑和功能效果

在开发环境使用python app_run.py命令,直接运行你的代码逻辑,有问题改问题,修改问题的思路大致有这几种:

  • 通过 AI编码工具插件 进行报错信息理解(很看具体工具的效果)
  • 通过 搜索引擎 搜索报错信息,尝试搜索到的解决方案(一般能搜到就比较准确)
  • 截图发在交流群提问


2.优化UI交互设计

  • 下面以飞花令的UI优化为例

首先,clone ModelScope项目-睡前故事小助手的界面设计,核心代码为其中的./app_run.py,不过这个前端设计的缺陷是:多个Agent之间无法区分,因为单个Chatbot中只能包含两个角色。

image.png


然后,继续查看其他项目的界面设计,发现谜馔:寻找招财猫(千问)这个项目的界面设计和逻辑非常适合“飞花令”这个游戏,主要启发是可以设计两个Chatbot,拿来改造一番,核心代码可参考:./app_game.py。这一版分别设计了两个界面:

  • 欢迎界面:介绍游戏规则;这里预留了tab页,用于后续添加更多古诗词游戏类型。
  • 这里的游戏logo设计采用了锦书 - 创新艺术字,非常优秀的一个艺术字生成项目,在此向项目团队致谢!


  • 游戏界面:分两栏,左侧Chatbot是答题区-对应的角色是对手Agent和我,右侧Chatbot是系统区,对应的角色是主持人Agent和评审官Agent;同样这里预留了tab页,用于后续添加更多古诗词游戏类型。


image.png


image.png




6. 上线空间展示


每次完成一定量的工作,即可同步代码至创空间,并【重启空间展示】

  1. 使用如下命令将代码push到创空间
cd 相应目录名
 git add .
 git status(此命令选用,是用于查看状态的,可能显示一堆信息)
 git commit -m "随便写点啥"
 git push

image.png


image.png


  1. 再刷新创空间,在【设置】里【重启空间展示】即可

image.png


这里需要注意的点有:

  • 添加环境变量:在环境变量管理中添加:"DASHSCOPE_API_KEY"。

image.png


恭喜你!看完全文我相信你对于如何去开发一个Agentscope应用已经有了初步了解


Talk is cheap,Show me the Demo!

那么接下来,舞台交给你,快来给大家展示展示属于你的创意吧!


完成比完美更重要,先完成最小MVP,然后不断迭代精益求精,你就是未来的AI原生应用大师!


点击一起参赛吧!

Create @ AI 创客松第四季 (aliyun.com)

作者介绍
目录