逐步掌握最佳Ai Agents框架-AutoGen 十 Web应用

AutoGen系列来到了第十篇,从入门AutoGen,到熟悉chat agent工作方式,再到深入把玩RAG文档AI助理应用。终于,我们要结合Streamlit来做智能Web应用了。

Streamlit

Streamlit是一款Web开发框架,适用于python快速完成一些大模型、数学科学计算的UI开发。

作为一位Web开发者,AutoGen系列的第十集来到Web应用开发,我们要做的就是将AutoGen的交互与反馈,在浏览器Web页面上呈现出来。

  • 最终效果

image.png

上图是项目的最终效果,它分为左右两栏。侧边栏为OpenAI的配置区域,表单的值,提供给AutoGen的config_list。 右边是类似chatgpt的聊天区域,我们在这里将message交给UserProxyAgent,之后由它与其它Agent的chat完成任务。

  • try Streamlit

首先,让我们跟着文档,将Streamlit玩起来。这里假设大家本地都安装好了python 环境。安装streamlit, 并使用streamlit 初始化hello 项目

python复制代码pip install streamlit
streamlit hello

image.png

上图是模板项目的效果。

  • 初始化项目

image.png  了解hello模板项目效果,心里有数。新建我们的的autogen-streamlit项目目录,并添加app.py入口文件。文件引入streamlit, 写入如图代码,执行命令streamlit run app.py,项目启动。
😝有需要的小伙伴,可以V扫描下方二维码免费领取🆓

- 侧边栏
python复制代码selected_model = None
selected_key = None
with st.sidebar:
    st.header("OpenAI Configuration")
    selected_model = st.selectbox("Model", ['gpt-3.5-turbo', 'gpt-4'], index=1)
    selected_key = st.text_input("API Key", type="password")

定义了selected_model、selected_key 两个变量,初始值为None。 with st.sidebar 设置侧边栏。st代表streamlit, st.sidebar 代表侧边栏,从语法看,streamlit只需要了解预设模块和语法,就可以快速完成开发。 st.header("OpenAI Configuration")侧边栏标题,selected_model = st.selectbox("Model", ['gpt-3.5-turbo', 'gpt-4'], index=1),添加下拉框,并交给selected_model,用户选择后,值可在selected_model里选择。    如果大家也跟我一样,目前还没有用上gpt-4, 可以将index设置为0…悲伤的故事。

  • 主栏
python复制代码with st.container():
    user_input = st.chat_input("Type something...")
    if user_input:
        if not selected_key or not selected_model:
            st.warning(
                'You must provide valid OpenAI API key and choose preferred model', icon="⚠️")
            st.stop()

类chatgpt的界面,主栏提供了一个聊天输入框,它会位于界面底部。当用户按下回车键时,流程会进入if user_input分支, 此时如果用户还未提供api_key或相应模型,会输出提示,st.stop,st的逻辑也会停掉。否则,即可进行config_list配置,selected_model、selected_key的值是config_list的一项配置

python复制代码llm_config = {
            "request_timeout": 600,
            "config_list": [
                {
                    "model": selected_model,
                    "api_key": selected_key
                }
            ]
        }
  • 初始化两个Agent
python复制代码class TrackableAssistantAgent(AssistantAgent):
    def _process_received_message(self, message, sender, silent):
        with st.chat_message(sender.name):
            st.markdown(message)
        return super()._process_received_message(message, sender, silent)

这里的AssistantAgent 比之前几篇要复杂。这里定义的TrackableAssistantAgentAssistantAgent为基类,对_process_received_message做了复盖。将接收到的消息,通过chat_message,将发送者的名字和消息,以markdown的格式显示在页面上,再调用基类的方法完成工作。   UserProxyAgent也一样。

python复制代码class TrackableUserProxyAgent(UserProxyAgent):
    def _process_received_message(self, message, sender, silent):
        with st.chat_message(sender.name):
            st.markdown(message)
        return super()._process_received_message(message, sender, silent)

有了这两个类后,我们实例化Agents, 这是AutoGen的常规操作。

python复制代码assistant = TrackableAssistantAgent(
            name="assistant", llm_config=llm_config)

# create a UserProxyAgent instance named "user"
user_proxy = TrackableUserProxyAgent(
    name="user", human_input_mode="NEVER", llm_config=llm_config)
  • asyncio   我们使用了asyncio, 异步的初始化了
python复制代码 # Create an event loop
loop = asyncio.new_event_loop()
asyncio.set_event_loop(loop)

# Define an asynchronous function
async def initiate_chat():
    await user_proxy.a_initiate_chat(
        assistant,
        message=user_input,
    )

# Run the asynchronous function within the event loop
loop.run_until_complete(initiate_chat())

Asyncio.new_event_loop()创建一个新的事件循环,asyncio.set_event_loop(loop)将新创建的事件循环设置为当前线程的事件循环,loop.run_until_complete(initiate_chat())在完成initiate_chat任务前会阻塞该线程。initiate_chat使用user_proxy开启会话,这和之前的就一样了。

  • 运行结果

image.png

在命令行中,从上图可以看出,用户代理接收到用户在输入框提出的问题(Generate a fibonacci sequence with 12 numbers and work out the sum)后, 交给assistantAgent。 assistant 生成了代码, 并完成了计算。

image.png

页面上,也显示了效果。

总结

通过Streamlist,快速完成了AutoGen AI助理的Web应用搭建, 让AutoGen 的chat work flow 更形象。

如何学习大模型 AI ?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值