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