Python 也能做前端？用 Streamlit + LangChain 搭建 AI Chat 应用！

项目成果

1. 使用 LangChain 处理对话逻辑，包括消息存储、上下文管理。
2. 使用 Streamlit 构建前端 UI，实现流式输出对话体验。
3. 调用 OpenAI API 进行智能问答，使 AI 能够自然交互。
4. 支持对话历史存储，确保多轮对话的上下文连贯性。

项目目录

安装依赖

pip install streamlit langchain openai tiktoken

配置 OpenAI API

在 .env 文件中添加你的 OpenAI API Key：

# 这里使用的是通义模型
DASHSCOPE_API_KEY=***

然后在 Python 代码中加载它：

# 需安装 dashscope
from dotenv import load_dotenv
load_dotenv()

编写 Streamlit + LangChain 代码

新建 app.py，并编写以下代码：

初始化页面

import streamlit as st
st.set_page_config(
    page_title="Ai ChatBot",
    page_icon="🚀",
    layout="centered",
)
st.title("🎃 Ai助手")

from frontend.components.sidebar import render_sidebar
from frontend.pages.home import render_home

# 侧边栏
selected_model, upload_file = render_sidebar()
# 主页展示
render_home()

处理用户输入

# 用户输入处理
  if prompt := st.chat_input("输入您的问题..."):
      # 添加用户消息
      st.session_state.messages.append(HumanMessage(content=prompt))
      with st.chat_message("user"):
          st.markdown(f'<p class="user-layout">{prompt}<p>', unsafe_allow_html=True)
      
      # 生成AI回复
      with st.chat_message("assistant"):
          response_placeholder = st.empty()
          full_response = ""
          
          # 流式输出
          for chunk in generate_stream_response(prompt, st.session_state.messages[:-1]):
              full_response += chunk
              response_placeholder.markdown(full_response + "▌")
          
          response_placeholder.markdown(full_response)
          st.session_state.messages.append(AIMessage(content=full_response))

处理会话历史

# 初始化对话历史
  if "messages" not in st.session_state:
      st.session_state.messages = []

  # 显示历史消息
  for msg in st.session_state.messages:
      with st.chat_message("user" if isinstance(msg, HumanMessage) else "assistant"):
          if isinstance(msg, HumanMessage):
              st.markdown(f'<p class="user-layout">{msg.content}<p>', unsafe_allow_html=True)
          else:
              st.markdown(msg.content)

处理文件上传

# 文件保存
def save_uploaded_file(uploaded_file, save_dir="data/raw"):
    """
    将上传文件保存到指定目录
    参数：
        uploaded_file: streamlit上传文件对象
        save_dir: 保存目录
    返回：
        保存后的完整文件路径
    """
    try:
        # 创建保存目录（如果不存在）
        Path(save_dir).mkdir(parents=True, exist_ok=True)
        # 构建保存路径
        save_path = os.path.join(save_dir, uploaded_file.name)
        # 写入文件
        with open(save_path, "wb") as f:
            f.write(uploaded_file.getbuffer())
        
        return save_path
    except Exception as e:
        st.error(f"文件保存失败: {str(e)}")
        return None

Docker 运行

/app/dev/bin/streamlit app.py --server.port=8051

总结

LangChain 负责 AI 逻辑（会话管理 + OpenAI 交互）

Streamlit 负责 UI（用户输入、流式输出）

难点包括对话上下文管理、流式响应、提示词优化