從0開始：用 Streamlit + LangChain 搭建個簡易ChatGPT
流式傳輸允許實(shí)時接收生成的文本，隨著文本的生成而接收。這樣，您就不必等到整個文本準(zhǔn)備好后才能開始向用戶展示。我們將使用 LangChain 與LLM進(jìn)行流式交互，并使用 Streamlit 創(chuàng)建應(yīng)用的前端。
1. 什么是 Streamlit？
2. 什么是 LangChain？
3. 什么是流式輸出？
4. 代碼實(shí)現(xiàn)
- 4.1 安裝依賴
- 4.2 導(dǎo)入必要的庫
- 4.3 初始化 OpenAI 語言模型
- 4.4 創(chuàng)建 Streamlit UI
- 4.5 實(shí)現(xiàn)流式輸出
- 4.6 管理聊天歷史
- 4.7 顯示聊天記錄
- 4.8 獲取用戶輸入并生成 AI 回復(fù)
5. 運(yùn)行項(xiàng)目
總結(jié)
流式傳輸允許實(shí)時接收生成的文本，隨著文本的生成而接收。這樣，您就不必等到整個文本準(zhǔn)備好后才能開始向用戶展示。我們將使用 LangChain 與LLM進(jìn)行流式交互，并使用 Streamlit 創(chuàng)建應(yīng)用的前端。
要構(gòu)建的聊天AI將具有以下功能：
- 在生成過程中實(shí)時流式傳輸來自LLM的響應(yīng)。
- 使用 LangChain 與 LLM 進(jìn)行交互。
- 使用 Streamlit 創(chuàng)建應(yīng)用的前端。
- 記住聊天記錄并向用戶顯示。
最終效果如下：
用戶輸入問題 → LLM 實(shí)時流式回復(fù) → 記錄歷史對話 → 支持用戶反饋（點(diǎn)贊/踩）
1. 什么是 Streamlit？
Streamlit 是一個快速搭建 Web 應(yīng)用的 Python 庫，特別適合機(jī)器學(xué)習(xí)和 AI 相關(guān)項(xiàng)目。
它允許開發(fā)者僅用幾行 Python 代碼，就能創(chuàng)建交互式的用戶界面。你不需要寫 HTML、CSS 或 JavaScript，也不需要進(jìn)行前端開發(fā)，從而可以專注于項(xiàng)目的核心功能。而且，Streamlit 已經(jīng)為創(chuàng)建 AI 聊天應(yīng)用提供了內(nèi)置支持。
Streamlit 主要特點(diǎn)
- 簡潔易用：用 Python 腳本就能創(chuàng)建 Web 應(yīng)用，無需 HTML、CSS 或 JavaScript。
- 自動刷新：修改代碼后，應(yīng)用會自動更新，無需手動刷新。
- 支持交互組件：提供按鈕、滑塊、文件上傳等組件，方便用戶與應(yīng)用交互。
- 數(shù)據(jù)可視化：支持Matplotlib、Plotly等數(shù)據(jù)可視化庫，直接在 Web 頁面展示圖表。
2. 什么是 LangChain？
LangChain的核心思想是通過模塊化能設(shè)計(jì)和力抽象，將不同的組件和功能“鏈”在一起，以創(chuàng)建更復(fù)雜和多功能的語言處理系統(tǒng)。
這些組件包括模型、聊天模型、文本嵌入模、型提示模板、索引、文檔加載器、文本分割器、向量存儲、檢索器、記憶功能、鏈和代理等。
這種設(shè)計(jì)不僅提高了系統(tǒng)的靈活性和可擴(kuò)展性，還使得開發(fā)者可以根據(jù)具體需求自由組合和調(diào)整各個模塊，從而實(shí)現(xiàn)更強(qiáng)大、更定制化的AI應(yīng)用
通俗來說，LangChain 是一種幫助開發(fā)者用大模型制作“應(yīng)用程序”的開發(fā)工具。它就像一個“搭建AI房子”的工具箱，里面有各種現(xiàn)成的積木，開發(fā)者只需要把這些積木拼起來，就可以實(shí)現(xiàn)很多強(qiáng)大的功能。
使用 LangChain，我們可以更容易地集成 OpenAI 的 GPT-4o，并專注于構(gòu)建 AI 對話的核心邏輯。
相關(guān)閱讀：?從0到1開發(fā)AI Agent（智能體）（四）| LangChain 的快速入門
3. 什么是流式輸出？
流式輸出是指在用戶輸入問題后，AI 并不是等待一段時間再一次性返回完整的答案，而是 邊生成邊顯示，逐步展示 AI 的思考過程。這種方式不僅減少了等待時間，而且讓 AI 的回答看起來更自然，仿佛它在思考時逐漸給出答案。這種交互體驗(yàn)顯得更加生動、真實(shí)，用戶可以感覺到 AI “在實(shí)時作答”。
如果不使用流式輸出，模型需要等到所有文本生成完畢后才返回結(jié)果，用戶可能會感到延遲很長。而流式調(diào)用能夠逐步生成輸出，減少等待時間，提升交互體驗(yàn)，類似于 ChatGPT 的打字效果。
普通 vs. 流式輸出
模式 | 特點(diǎn) |
普通輸出（非流式） | 用戶提交問題 → 等待幾秒 → 一次性返回完整答案 |
流式輸出（像 ChatGPT） | 用戶提交問題 → AI 邊生成邊顯示 → 逐步輸出答案 |
4. 代碼實(shí)現(xiàn)
4.1 安裝依賴
首先，我們需要安裝所需的 Python 庫。打開終端并執(zhí)行以下命令：
pip install streamlit langchain langchain-openai安裝完成后，我們可以開始編寫代碼。
4.2 導(dǎo)入必要的庫
在 Python 代碼中，我們需要導(dǎo)入 Streamlit 和 LangChain 的相關(guān)庫。具體如下：
# 導(dǎo)入必要的Python庫
import os # 用于處理操作系統(tǒng)相關(guān)的功能
# 設(shè)置OpenAI API密鑰
OPENAI_API_KEY = 'hk-iwta91e427'
os.environ['OpenAI_API_KEY'] = OPENAI_API_KEY # 將API密鑰添加到環(huán)境變量中
# 導(dǎo)入Streamlit庫用于創(chuàng)建Web界面，導(dǎo)入OpenAI聊天模型
import streamlit as st
from langchain_openai.chat_models import ChatOpenAI在這里， os? 是用來處理環(huán)境變量的， streamlit? 是我們創(chuàng)建前端界面的核心庫， ChatOpenAI 則是 LangChain 中與 OpenAI 進(jìn)行交互的模塊。
4.3 初始化 OpenAI 語言模型
我們將通過 LangChain 初始化 OpenAI 的 GPT 模型。以下代碼片段展示了如何配置 GPT-4o，并設(shè)置它的一些基本參數(shù)：
# 初始化ChatOpenAI模型
llm = ChatOpenAI(
model="gpt-4o-mini", # 指定使用的模型名稱
temperature=0, # 設(shè)置溫度為0，使模型輸出更加確定性（不那么隨機(jī)）
base_url="https://api.openai-hk.com/v1" # 設(shè)置API的基礎(chǔ)URL地址
)這里， model="gpt-4o-mini"? 是選擇使用 GPT-4o 的迷你版本， temperature=0? 表示我們希望模型輸出更加確定性，不那么隨機(jī)， base_url 則是一個代理 URL，適用于我們在某些地區(qū)需要通過代理訪問 OpenAI API 的情況。
4.4 創(chuàng)建 Streamlit UI
接下來，我們使用 Streamlit 創(chuàng)建一個簡單的用戶界面，允許用戶輸入問題并顯示 AI 的回答。
# 設(shè)置網(wǎng)頁標(biāo)題
st.title("從0開始：用 Streamlit + LangChain 搭建流式聊天 AI")
st.write("輸入你的問題，AI 將實(shí)時回答！")這段代碼會在頁面上顯示標(biāo)題，并寫下提示文字。
4.5 實(shí)現(xiàn)流式輸出
為了實(shí)現(xiàn)流式輸出，我們定義一個函數(shù)，使用 yield 逐步返回 AI 模型生成的回答。這是流式輸出的核心部分：
def chat_stream(prompt):
"""
使用流式方式獲取并返回AI模型的響應(yīng)。
Args:
prompt (str): 用戶輸入的提示文本
Yields:
str: AI模型響應(yīng)的文本片段
"""
for chunk in llm.stream(prompt):
if chunk.content:
yield chunk.content在這個函數(shù)中，我們通過 llm.stream() 向模型發(fā)送請求，并逐步返回其生成的內(nèi)容。每次返回一個小片段，直到完整的回答生成完畢。
4.6 管理聊天歷史
為了讓用戶能夠查看之前的聊天記錄，我們使用 Streamlit session_state 來存儲聊天歷史。這樣，即使刷新頁面，聊天記錄也不會丟失。
# 定義保存反饋的函數(shù)
def save_feedback(index):
"""
保存用戶對AI回復(fù)的反饋。
Args:
index (int): 消息在歷史記錄中的索引位置
"""
st.session_state.history[index]["feedback"] = st.session_state[f"feedback_{index}"]
# 初始化聊天歷史記錄
if "history" not in st.session_state:
st.session_state.history = []4.7 顯示聊天記錄
我們用以下代碼展示所有歷史對話消息。這里，用戶的消息和 AI 的回答會依次顯示，仿佛是在進(jìn)行真實(shí)的對話。
# 顯示歷史對話記錄
for i, message in enumerate(st.session_state.history):
with st.chat_message(message["role"]): # 創(chuàng)建聊天消息氣泡
st.write(message["content"]) # 顯示消息內(nèi)容
if message["role"] == "assistant": # 如果是AI助手的回復(fù)
feedback = message.get("feedback", None) # 獲取之前的反饋（如果有）
st.session_state[f"feedback_{i}"] = feedback # 存儲反饋狀態(tài)
# 添加反饋按鈕（贊/踩）
st.feedback(
"thumbs",
key=f"feedback_{i}",
disabled=feedback isnotNone, # 如果已有反饋則禁用按鈕
on_change=save_feedback, # 設(shè)置反饋?zhàn)兓瘯r的回調(diào)函數(shù)
args=[i], # 傳遞消息索引作為參數(shù)
)4.8 獲取用戶輸入并生成 AI 回復(fù)
當(dāng)用戶輸入一個問題時，我們將觸發(fā) AI 生成回答并通過流式輸出逐步顯示。以下代碼展示了如何處理用戶輸入并展示 AI 的流式回答：
# 創(chuàng)建聊天輸入框
if prompt := st.chat_input("說出你的故事"): # 如果用戶輸入了新消息
with st.chat_message("user"): # 顯示用戶消息
st.write(prompt)
# 將用戶消息添加到歷史記錄
st.session_state.history.append({"role": "user", "content": prompt})
with st.chat_message("assistant"): # 顯示AI助手的回復(fù)
full_response = ""# 用于存儲完整的回復(fù)內(nèi)容
# 調(diào)用大模型，使用流式輸出顯示AI的回復(fù)
for chunk in st.write_stream(chat_stream(prompt)):
full_response += chunk
# 為AI回復(fù)添加反饋按鈕
st.feedback(
"thumbs",
key=f"feedback_{len(st.session_state.history)}",
on_change=save_feedback,
args=[len(st.session_state.history)],
)
# 將AI的回復(fù)添加到歷史記錄
st.session_state.history.append({"role": "assistant", "content": full_response})在這段代碼中，當(dāng)用戶輸入問題時，應(yīng)用會先顯示用戶的問題，再通過流式輸出逐步展示 AI 的回答。
5. 運(yùn)行項(xiàng)目
最后，使用以下命令啟動應(yīng)用：
streamlit run app.py
You can now view your Streamlit app in your browser.
Local URL: http://localhost:8501
Network URL: http://198.18.0.1:8501打開瀏覽器，聊天AI就會運(yùn)行起來，用戶可以實(shí)時與 AI 進(jìn)行對話。
總結(jié)
我們使用 Streamlit 快速搭建了一個流式輸出的聊天應(yīng)用，并結(jié)合 LangChain 實(shí)現(xiàn)了與 GPT-4o 的交互。通過流式輸出，用戶能感受到 AI 更自然、即時的反饋，而聊天歷史也被保存在會話中，確保不會丟失。
這只是一個簡單的起步，未來你可以進(jìn)一步優(yōu)化 UI，添加更多功能，打造更加智能的聊天機(jī)器人！
本文轉(zhuǎn)載自 ??AI取經(jīng)路??，作者： AI取經(jīng)路
