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

从LangChain使用Agent的懵懵懂懂，到AutoGen的"放肆"Agents,这周的学习和写作实在太幸福了。假如您是第一次接触AugoGen,请先要查看AutoGen官方文档，或翻阅AutoGen系列的前几篇。

[逐步掌握最佳Ai Agents框架-AutoGen 四 多代理群聊实例](https://juejin.cn/post/7301948815752790054 "https://juejin.cn/post/7301948815752790054")

逐步掌握最佳Ai Agents框架-AutoGen 五与LangChain手拉手 - 掘金 (juejin.cn)

逐步掌握最佳Ai Agents框架-AutoGen 六语音AI代理 - 掘金 (juejin.cn)

逐步掌握最佳Ai Agents框架-AutoGen 七低代码AI助理 - 掘金 (juejin.cn)

逐步掌握最佳Ai Agents框架-AutoGen 八开源模型 - 掘金 (juejin.cn)

逐步掌握最佳Ai Agents框架-AutoGen 九 RAG应用 - 掘金 (juejin.cn)

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

Streamlit

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

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

最终效果

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

try Streamlit

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

python 复制代码

pip install streamlit
streamlit hello

上图是模板项目的效果。

初始化项目

了解hello模板项目效果，心里有数。新建我们的的autogen-streamlit项目目录，并添加app.py入口文件。文件引入streamlit, 写入如图代码，执行命令streamlit run app.py,项目启动。

侧边栏

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 比之前几篇要复杂。这里定义的TrackableAssistantAgent 以AssistantAgent为基类，对_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开启会话，这和之前的就一样了。

运行结果

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

页面上，也显示了效果。

总结

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

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

Streamlit

总结

参考资料