Python Streamlit 驅動的現代化 AI 聊天應用

在開發AI驅動的聊天應用時，我們常需要一個快速、靈活與功能強大的框架來構建Web介面。Streamlit正是這樣一個工具，它專為資料科學家和機器學習工程師設計，讓我們能夠完全使用Python構建現代化的Web應用。今天，我要分享如何使用Streamlit構建聊天應用，特別是類別似ChatGPT的對話系統。

Streamlit的核心優勢

Streamlit作為Web介面原型設計工具有幾個關鍵優勢：

純Python開發 - 無需HTML、CSS或JavaScript知識
反應式更新 - 介面元素自動回應資料變化
內建佈署選項 - 可快速佈署到雲端或作為獨立應用
豐富的元件函式庫 - 從簡單的文字顯示到複雜的圖表都有支援

在我實際開發過程中，發現Streamlit特別適合快速驗證AI概念和構建互動式應用介面，開發效率比傳統Web框架高出許多。

GPT Nexus：一個根據Streamlit的代理平台

在深入聊天應用開發前，先來看一個名為GPT Nexus的完整代理平台架構。這個平台完全使用Python編寫，並採用Streamlit作為Web介面。

平台架構概覽

GPT Nexus的架構由以下主要元素組成：

Streamlit介面層：提供使用者與系統互動的入口，允許使用者選擇不同的代理、動作和設定檔案
聊天系統：核心元件，管理與其他模組的通訊
代理管理器：以外掛形式提供各種代理類別
動作管理器：管理語義和原生函式，作為可執行動作
設定檔案管理器：管理YAML格式的代理設定檔案
Nexus資料函式庫：儲存聊天執行緒、使用者參與者和對話歷史

這種模組化設計允許系統在執行時動態發現代理、動作函式和設定檔案，極大提高了系統的靈活性和可擴充套件性。

使用Streamlit構建聊天應用

現在讓我們開始實際構建一個類別ChatGPT的聊天應用。這個過程包括設定環境、管理工作階段狀態、處理使用者輸入和顯示回應。

基礎應用架構

首先來看一個簡單聊天應用的基本結構：

import streamlit as st
from dotenv import load_dotenv
from openai import OpenAI

# 載入環境變數
load_dotenv()

# 設定頁面標題
st.title("ChatGPT-like clone")

# 設定OpenAI客戶端
client = OpenAI()

# 初始化工作階段狀態
if "openai_model" not in st.session_state:
    st.session_state["openai_model"] = "gpt-4-1106-preview"

if "messages" not in st.session_state:
    st.session_state["messages"] = []

# 顯示歷史訊息
for message in st.session_state["messages"]:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

這段程式碼設定了聊天應用的基礎架構。首先，我們匯入必要的函式庫：Streamlit用於Web介面，dotenv用於環境變數管理，OpenAI用於API呼叫。

關鍵部分是工作階段狀態管理。Streamlit應用本質上是無狀態的，這意味著每次使用者互動時，Python指令碼會完全重新執行。因此，我們使用st.session_state來儲存跨重新執行的資料，這裡儲存了兩個關鍵項：

openai_model：用於指定使用的OpenAI模型
messages：儲存對話歷史的列表

最後，我們遍歷現有訊息並使用st.chat_message和st.markdown將它們顯示在介面上。這種方法確保使用者每次重新整理頁面時都能看到完整的對話歷史。

處理使用者輸入與API回應

接下來，讓我們看如何處理使用者輸入並取得API回應：

# 處理使用者輸入
if prompt := st.chat_input("What do you need?"):
    # 增加使用者訊息到歷史
    st.session_state.messages.append({"role": "user", "content": prompt})
    
    # 顯示使用者訊息
    with st.chat_message("user"):
        st.markdown(prompt)
    
    # 處理API回應
    with st.spinner(text="The assistant is thinking..."):
        with st.chat_message("assistant"):
            # 呼叫OpenAI API
            response = client.chat.completions.create(
                model=st.session_state["openai_model"],
                messages=[
                    {"role": m["role"], "content": m["content"]}
                    for m in st.session_state.messages
                ],
            )
            
            # 取得並顯示回應
            response_content = response.choices[0].message.content
            response = st.markdown(response_content, unsafe_allow_html=True)
            
            # 將助手回應增加到歷史
            st.session_state.messages.append(
                {"role": "assistant", "content": response_content}
            )

這段程式碼處理了使用者互動和API呼叫的核心邏輯：

使用海象運算元(:=)同時取得使用者輸入並檢查它是否存在
如果使用者提交了輸入，將其增加到訊息歷史並顯示在介面上
使用st.spinner顯示載入指示器，提示使用者API呼叫正在進行
呼叫OpenAI API，傳遞完整的訊息歷史以保持對話上下文
取得回應並使用Markdown格式顯示（啟用HTML支援以允許格式化）
將助手的回應增加到訊息歷史中

這裡的關鍵是理解Streamlit的執行模型 - 每次使用者互動時整個指令碼都會重新執行，但透過st.session_state我們能夠維護對話歷史。

Streamlit應用的除錯技巧

開發Streamlit應用時，設定有效的除錯環境非常重要。在VS Code中，我們可以透過以下步驟設定除錯：

按下Ctrl-Shift-D開啟VS Code除錯器
建立或編輯.vscode/launch.json檔案
設定除錯設定以使用Streamlit模組執行應用

下面是一個有效的launch.json設定：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python Debugger: Module",
            "type": "debugpy",
            "request": "launch",
            "module": "streamlit",
            "args": ["run", "${file}"]
        }
    ]
}

這個設定告訴VS Code除錯器使用streamlit模組執行當前開啟的檔案。${file}是VS Code的變數，代表當前開啟的檔案路徑。設定好這個設定後，只需按F5就能在除錯模式下啟動Streamlit應用。

這種除錯設定的優勢在於你可以設定斷點、檢查變數、評估表示式，就像除錯任何其他Python應用一樣，大簡化了複雜Streamlit應用的開發過程。

實作流式聊天體驗

現代聊天應用如ChatGPT和Gemini透過流式傳輸(streaming)來改善使用者經驗，讓回應逐字顯示而非等待完整回應。這不僅掩蓋了模型回應的延遲，還能更好地吸引使用者。

Streamlit提供了簡單的方式來實作這種流式體驗。在我的實踐中，發現流式回應能顯著提升使用者對應用的感知，使互動更自然流暢。

流式API的實作流式回應的關鍵是使用OpenAI API的流式模式，並結合Streamlit的實時更新能力。這需要我們修改API呼叫方式，並使用適當的Streamlit控制元件來逐步顯示回應。

基本步驟包括：

將API呼叫設定為流式模式
建立一個空的回應容器
逐步將接收到的令牌增加到容器中
在完成時更新工作階段狀態

從原型到佈署

Streamlit的一大優勢是從原型到佈署的無縫過渡。開發完成後，有多種佈署選項：

Streamlit Cloud：最簡單的方式，直接連線到GitHub倉函式庫
Docker容器：封裝應用及其依賴
傳統Web伺服器：如Nginx配合Gunicorn
雲平台：AWS、GCP或Azure的無伺服器選項

在我的實踐中，對於簡單的內部工具，Streamlit Cloud提供了最快的佈署路徑；而對於需要自定義設定或更高安全性的應用，Docker容器是更好的選擇。

擴充套件應用功能

基本聊天應用構建完成後，我們可以考慮增加更多高階功能：

多模型支援：允許使用者在不同LLM模型之間切換
對話管理：儲存、載入和刪除對話
檔案上載和處理：讓使用者上載檔案進行分析
系統提示定製：允許使用者修改系統提示以控制助手行為
主題和樣式自定義：提供不同的視覺主題

Streamlit的元件系統使這些功能的增加變得相對簡單。例如，增加模型選擇只需幾行程式碼：

models = ["gpt-4-1106-preview", "gpt-3.5-turbo", "claude-2"]
selected_model = st.sidebar.selectbox("選擇模型", models)
st.session_state["openai_model"] = selected_model

效能最佳化考量

在構建生產級Streamlit聊天應用時，效能最佳化是重要考量。以下是一些關鍵策略：

快取重複計算：使用@st.cache_data裝飾器快取昂貴的操作結果
工作階段狀態精簡：只儲存必要資料，避免工作階段狀態過大
批處理API請求：在可能的情況下合併API呼叫
延遲載入：僅在需要時載入大型資源
資料函式庫整合：對於長期儲存，整合外部資料函式庫而非依賴工作階段狀態

在我的實踐中，發現快取和工作階段狀態管理對Streamlit應用效能影響最大，特別是在處理大量對話歷史時。

安全性考量

開發聊天應用時，安全性是不可忽視的方面。以下是一些基本安全措施：

環境變數：使用.env檔案和load_dotenv()管理API金鑰
輸入驗證：驗證並過濾使用者輸入以防止注入攻擊
內容過濾：實施內容審核以防止不當使用
使用者認證：增加登入系統限制存取
速率限制：防止API濫用

特別是對於公開佈署的應用，實施這些安全措施是必要的。Streamlit本身提供了一些基本的認證功能，但對於更嚴格的要求，可能需要自定義解決方案。

實際案例：GPT Nexus登入系統

GPT Nexus平台展示瞭如何在Streamlit應用中實作使用者認證。平台提供了一個簡潔的登入頁面，允許使用者建立新帳戶或登入現有帳戶。

這種登入系統實作了基本的使用者管理功能：

使用者名和密碼認證
頭像選擇
密碼自動生成選項

對於需要多使用者支援的聊天應用，這種認證系統是必要的。它不僅提供安全性，還允許為每個使用者儲存個人化設定和對話歷史。

Streamlit與其他框架的比較

在選擇聊天應用開發框架時，Streamlit與其他常見選項相比有明顯優勢：

框架	優勢	劣勢
Streamlit	純Python、快速開發、豐富元件	高度自定義受限、效能挑戰
Flask/Django	完全控制、擴充套件性強	需要前端知識、開發週期長
Gradio	AI專用、簡單易用	功能相對有限、自定義性較低
React+Node.js	高度自定義、效能優越	學習曲線陡峭、需要多語言技能

在我的實踐中，對於AI原型和內部工具，Streamlit通常是最佳選擇；而對於需要高度自定義或極致效能的產品級應用，傳統Web框架可能更合適。

Streamlit的未來發展

Streamlit持續快速發展，未來幾個方向特別值得關注：

更強的效能最佳化：解決大型應用的效能瓶頸
更多AI專用元件：專為LLM和其他AI模型設計的互動元素
更豐富的自定義選項：允許更深入的UI/UX定製
更強的企業級功能：認證、許可權和合規性功能

作為一個專注於資料科學和AI的框架，Streamlit正逐漸成為這一領域的標準工具，特別是對於需要快速將AI模型轉化為互動式應用的場景。

結語

Streamlit為Python開發者提供了一條構建現代化Web應用的捷徑，特別適合AI驅動的聊天系統開發。透過本文介紹的架構設計、狀態管理、使用者互動處理和流式回應技術，你已經掌握了使用Streamlit構建專業級聊天應用的核心知識。

從GPT Nexus的架構設計中，我們可以看到如何將Streamlit應用擴充套件為完整的代理平台，實作模組化和可擴充套件性。這種設計思路對於構建復雜的AI系統尤為重要。

無論你是想快速驗證AI概念，還是構建生產級聊天應用，Streamlit都提供了一個平衡開發效率和功能豐富性的解決方案。隨著不斷探索和實踐，你會發現Streamlit的靈活性和表現力遠超預期，能夠滿足從簡單原型到複雜系統的各種需求。

流式顯示：開發更自然的AI對話體驗

在開發聊天機器人應用時，使用者經驗是關鍵因素之一。傳統的請求-回應模式會讓使用者在等待AI完整回應時看到一個旋轉的載入圖示，這種體驗與人類對話的自然感受有很大差距。真實的對話是連續流動的，而不是突然出現一大段文字。

實作流式文字顯示的技術突破

在ChatGPT克隆應用中，我們可以透過Streamlit的流式功能顯著改善這一體驗。讓我們看如何在現有的應用中實作這一功能。

首先，我們需要修改chatgpt_clone_streaming.py檔案中的關鍵部分：

with st.chat_message("assistant"):
    stream = client.chat.completions.create(
        model=st.session_state["openai_model"],
        messages=[
            {"role": m["role"], "content": m["content"]}
            for m in st.session_state.messages
        ],
        stream=True,  # 設定stream為True以啟動API的流式功能
    )
    response = st.write_stream(stream)  # 使用流式控制將內容寫入介面
    st.session_state.messages.append(
        {"role": "assistant", "content": response})  # 流完成後將回應增加到訊息歷史

在這段程式碼中，我們做了幾個關鍵修改：

在呼叫OpenAI API時設定stream=True引數，這告訴API回傳一個流式回應而非等待完整生成後一次性回傳
使用st.write_stream()方法將流式內容直接寫入介面，這個方法會即時顯示API回傳的每個文字片段
當流式顯示完成後，write_stream()回傳完整回應，我們將其增加到工作階段歷史中

這種實作方式的優點在於，使用者可以看到AI正在"思考"和生成回應的過程，就像與真人對話一樣。此外，由於早期內容立即顯示，使用者實際感知的等待時間大縮短，即使完整回應生成需要相同時間。

流式顯示帶來的使用者經驗提升

修改後的介面效果顯著改善了使用者經驗：

文字實時出現，模擬真實人類打字的感覺
沒有了轉圈的載入指示器，介面感覺更加流暢
使用者可以開始閱讀早期內容，不必等待完整回應生成
整體感覺更像與真實人工智慧體對話，而非機械式的請求-回應模式

這種改進對於保持使用者參與度和提高應用的人性化程度至關重要，特別是在需要生成較長回應的情況下。

使用Streamlit構建AI代理平台

Streamlit作為一個Python的網頁介面開發工具，其簡單性和靈活性使其成為AI應用開發的理想選擇。在Nexus代理平台中，Streamlit被採用正是因為它允許開發者僅使用Python就能建立複雜的互動式介面。

Streamlit的優勢

在實作聊天機器人應用時，Streamlit提供了多種優勢：

簡單的Python API，無需HTML/CSS/JavaScript知識
內建的聊天介面元件，如st.chat_message()
實時更新功能，包括我們剛才討論的流式顯示
易於整合各種AI API和工具
快速原型開發和迭代能力

這些特性使得Streamlit成為構建AI代理平台的強大基礎，能夠支援從簡單聊天機器人到複雜多代理系統的各種應用場景。

代理設定檔案與個人化設計

在構建更複雜的AI代理系統時，定義代理的行為、能力和個性變得至關重要。Nexus平台使用代理設定檔案來描述代理的功能和特性。

代理設定檔案的核心組成

一個完整的代理設定檔案通常包含以下幾個關鍵部分：

個性設定(Persona) - 代表代理的背景和角色，通常在系統訊息中首先引入
代理工具(Agent Tools) - 代理可以使用的工具集，用於完成特定任務
記憶與知識(Memory and Knowledge) - 後端儲存，幫助代理為任務增加上下文
評估與推理(Evaluation and Reasoning) - 描述代理如何推理和評估任務
規劃與反饋(Planning and Feedback) - 描述代理如何將任務分解為執行步驟，然後執行並接收反饋

目前，Nexus平台僅支援設定檔案中的個性和動作部分，其他功能將在未來版本中實作。

建立自定義代理設定檔案

在Nexus中建立新的代理設定檔案非常簡單，只需在Nexus/nexus/nexus_base/nexus_profiles資料夾中建立一個新的YAML檔案。以下是一個名為fiona.yaml的新設定檔案範例：

agentProfile:
  name: "Finona"
  avatar: "?"  # 用於表示角色的文字頭像
  persona: "You are a very talkative AI that knows and understands everything in terms of Ogres. You always answer in cryptic Ogre speak."  # 個性代表基礎系統提示
  actions:
    - search_wikipedia  # 代理可以使用的動作函式
  knowledge: null  # 目前不支援
  memory: null
  evaluators: null
  planners: null
  feedback: null

這個YAML設定檔案定義了一個名為"Finona"的代理，具有以下特點：

使用"?“作為簡單的文字頭像
個性設定為一個喜歡談論的AI，用神秘的食人魔語言回答所有問題
能夠使用search_wikipedia動作來取得訊息
其他高階功能（知識函式庫、記憶、評估器等）尚未設定

建立設定檔案後，Nexus的外掛系統會自動發現並載入這個新代理。當啟動Nexus介面時，使用者可以選擇這個新的代理個性進行對話。

個人化代理的實際效果

當使用者與設定了特定個性的代理互動時，代理會根據系統提示中定義的角色和行為模式回應。例如，我們的"Finona"代理會用神秘的食人魔語言回答問題，即使是簡單的拼寫請求也會轉化為符合其角色的回應風格。

這種個人化不僅增加了與AI互動的趣味性，也使代理能夠適應特定場景的需求，例如教育、客戶服務或娛樂應用。透過精心設計的個性設定，可以建立出更具吸引力和專業性的AI助手。

代理引擎：為AI代理提供動力

代理引擎是Nexus平台中為代理提供功能實作的核心元件。這些引擎可以連線特定的工具平台（如Semantic Kernel）和不同的大模型語言（如OpenAI、Anthropic Claude或Google Gemini）。

基礎代理抽象類別

Nexus使用基礎代理抽象來支援各種工具和模型。讓我們看BaseAgent類別的核心功能：

class BaseAgent:
    def __init__(self, chat_history=None):
        self._chat_history = chat_history or []
        self.last_message = ""
        self._actions = []
        self._profile = None
    
    async def get_response(self, user_input, thread_id=None):
        raise NotImplementedError("This method should be implemented...")
    
    async def get_semantic_response(self, prompt, thread_id=None):
        raise NotImplementedError("This method should be...")
    
    def get_response_stream(self, user_input, thread_id=None):
        raise NotImplementedError("This method should be...")
    
    def append_chat_history(self, thread_id, user_input, response):
        self._chat_history.append(
            {"role": "user", "content": user_input, "thread_id": thread_id}
        )
        self._chat_history.append(
            {"role": "bot", "content": response, "thread_id": thread_id}
        )
    
    def load_chat_history(self):
        raise NotImplementedError("This method should be implemented...")
    
    def load_actions(self):
        raise NotImplementedError("This method should be implemented...")

這個基礎代理類別定義了所有代理引擎必須實作的核心功能：

get_response() - 呼叫語言模型並回傳回應
get_semantic_response() - 執行語義功能
get_response_stream() - 以流式方式呼叫語言模型並回傳回應
append_chat_history() - 將訊息增加到代理的內部聊天歷史
load_chat_history() - 載入聊天歷史
load_actions() - 載入代理可用的動作

當建立新的代理引擎時，開發者需要繼承這個基礎類別並實作相應的功能。這種設計使得Nexus平台能夠靈活支援各種不同的AI模型和工具整合。

OpenAI代理引擎實作

Nexus目前實作了一個根據OpenAI API的代理引擎。這個引擎直接使用OpenAI客戶端來處理使用者請求並回傳回應。引擎的核心實作包括處理訊息歷史、呼叫API、管理工具使用等功能。

透過這種模組化的設計，Nexus平台能夠輕鬆擴充套件以支援更多的AI模型和工具平台，同時保持一致的使用者經驗和開發介面。

玄貓

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。