快速搭建自己的chatGPT

上一篇简单介绍了如何构建自己的AI聊天应用，但实际功能还比较简单，接下来将介绍如何搭建自己完整的chatGPT应用整个过程也比简单：

构建聊天及对话列表的容器
显示聊天记录
加入聊天历史，支持多轮对话

在prompt中加入聊天记录

ini 复制代码

prompt = ChatPromptTemplate(
    messages=[
        SystemMessagePromptTemplate.from_template(
            "你是一个智能助手,请根据用户问题尽可能清晰，完整的回答用户的问题:{question},"
            "回答过程中请结合历史对话给出准确的回答信息history：{history}"),
    ],
    input_variables=["question", "history"])

设置页面显示

这个主要设置输入框和发送按钮的位置，以及聊天记录的显示方式，添加了handle_send函数，用于处理发送按钮点击事件

ini 复制代码

# 设置页面配置
st.set_page_config(page_title='聊天界面', layout='wide')
# 聊天历史界面
chat_history_container = st.empty()

# 输入框与发送按钮界面
input_col, button_col = st.columns([9, 1])
with input_col:
    #label_visibility 设置为隐藏label样式
    st.text_input(label="", placeholder="输入问题...", key="user_input", on_change=handle_send, label_visibility='collapsed')
with button_col:
    st.button(label="发送", on_click=handle_send, use_container_width=True)

处理聊天回答及历史记录

历史信息采用streamlit的session_state机制，每次用户发送问题后，将问题及回答信息保存到session_state中，并显示在页面上

ini 复制代码

# 如果不存在，初始化聊天历史session state
if 'chat_history' not in st.session_state:
    st.session_state.chat_history = []
if 'user_input' not in st.session_state:
    st.session_state.user_input = ''

定义bot_response方法和handle_send方法，bot_response方法用于获取机器人回答并添加到聊天历史中，handle_send方法用于处理用户发送问题；在handle_send方法中，首先将用户问题添加到聊天历史中，然后调用bot_response方法获取机器人回答并添加到聊天历史中，最后清空输入框。使用st.spinner方法，在获取机器人回答时，显示一个等待提示，避免用户在回答时输入问题。

csharp 复制代码

def bot_response(input_text):
    with st.spinner("思考中..."):
        llm = AzureChatOpenAI(deployment_name="gpt-4", model_name="gpt-4", temperature=0, max_tokens=1000)
        var = llm(
            prompt.format_prompt(question=input_text, history=st.session_state.chat_history).to_messages()).content
        st.session_state.chat_history.append({"sender": "bot", "message": var})
        return var

# 发送并处理用户消息
def handle_send():
    user_input = st.session_state.user_input
    if user_input:  # 如果用户输入非空
        # 将用户消息添加到聊天历史中
        st.session_state.chat_history.append({"sender": "user", "message": user_input})
        # 获取机器人回复并添加到聊天历史中
        bot_response(user_input)
        # 清空输入框
        st.session_state.user_input = ""

显示聊天历史

显示聊天历史，设置一点样式，使页面看上去更友好

ini 复制代码

# 使用HTML和CSS呈现聊天气泡
def display_chat_messages():
    html_str = ""
    for chat in st.session_state.chat_history:
        if chat["sender"] == "user":
            # 用户消息向右对齐
            html_str += f"<div style='text-align: left; margin: 5px;'>\
                            <strong>user:</br></strong>\
                            <span style='background-color: #dbf3fa; padding: 5px 10px; border-radius: 10px;'>\
                                {chat['message']}\
                            </span>\
                          </div></br>"
        else:
            # 机器人的消息向左对齐
            html_str += f"<div style='text-align: left; margin: 5px;'>\
                            <strong>bot:</br></strong>\
                            <span style='background-color: #ffffff; padding: 5px 10px; border-radius: 10px;'>\
                                {chat['message']}\
                            </span>\
                          </div></br>"
    chat_history_container.markdown(html_str, unsafe_allow_html=True)


# 显示聊天历史
display_chat_messages()
# 添加空白区以滚动到最底部（确保输入框和按钮始终显示在底部）
st.empty()

至此，整个chatGPT应用就完成了，启动应用后，可以看到如下效果：

更多精彩关注公众号：闲人张