Day 21 - Streamlit 快速入門 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 21

生成式 AI

初探 Langchain 與 LLM：打造簡易問診機器人系列第 21 篇

Day 21 - Streamlit 快速入門

16th鐵人賽 python3 langchain genai openai

熊熊工程師

團隊意蘭拉麵蔥基本五倍辣半熟鹽味蛋三片叉燒

2024-10-05 00:02:42

164 瀏覽

分享至

每天的專案會同步到 GitLab 上，可以前往 GitLab 查看，有興趣的朋友歡迎留言 or 來信討論，我的信箱是 nickchen1998@gmail.com。

這篇文章將帶大家透過 Streamlit 快速構建一個簡易的問答機器人，讓我們可以輕鬆地與模型互動。Streamlit 是一個專門用於快速構建資料應用和機器學習應用的開源框架，其最大特色在於不需要繁雜的前端設計，就可以用 Python 程式碼創建即時的互動式應用，非常適合原型開發和小型專案展示。

在開始之前，請先確保已經安裝了 Streamlit。如果尚未安裝，您可以使用以下命令來安裝：

pip install streamlit

這個範例分為三個主要部分：側邊選單、問答頁面以及對話紀錄。以下將逐步說明這三個部分的功能與邏輯。

Sidebar 側邊選單

首先，我們透過 st.sidebar 在應用程式的左側建立一個選單，讓使用者選擇不同的資料集，以決定問答的主題範疇。程式碼如下：

import streamlit as st

st.sidebar.title("選擇資料集")
dataset_option = st.sidebar.selectbox(
    "請選擇在問答時要使用的資料集...",
    ("肝膽腸胃", "家庭醫學")
)

這段程式碼使用 st.sidebar 建立了側邊欄標題，並使用 selectbox 讓使用者選擇不同的資料集。在實際應用中，可以根據選擇的資料集來決定 AI 回答的內容，讓系統能針對不同的醫學領域提供專業回答。這樣的選單可以讓問答系統更加靈活，適應不同的使用需求。

sidebar

問答頁面主體 (Main Chat Page)

主頁面展示了一個簡單的問答機器人界面，包含標題和訊息輸入欄位。當使用者輸入訊息後，程式會將訊息和 AI 回應保存至對話歷史中，並顯示在頁面上。以下是這部分的程式碼：

import streamlit as st

st.title("問答機器人")

prompt = st.chat_input("請輸入您的訊息...")

if prompt:
    st.session_state['history'].append({"role": "user", "content": prompt})
    ai_response = "Hello 👋"
    st.session_state['history'].append({"role": "ai", "content": ai_response})

這段程式碼包含三個主要功能：

標題設置：透過 st.title("問答機器人") 設定主頁面的標題為「問答機器人」。
訊息輸入框：st.chat_input("請輸入您的訊息...") 提供了一個輸入框讓使用者輸入問題或訊息。一旦輸入完成並發送後，輸入框會觸發下方的回應處理邏輯。
訊息處理與回應：當偵測到有新輸入 (if prompt:) 時，程式將該訊息添加至 st.session_state['history']，並將角色設為 user。接著生成一個簡單的 AI 回應（此處為固定的 "Hello 👋"），並將這段回應添加至對話歷史。每次的對話記錄都會保存在 st.session_state['history'] 中，確保每次輸入後的歷史對話都可以保留在畫面上。

透過這段程式碼，使用者可以輸入訊息並接收到機器人回應。未來若要擴充回應邏輯，可以在 ai_response 的部分進行更進階的 AI 模型集成。

qapage

Chat History 對話紀錄

最後一部分是對話紀錄管理，透過 st.session_state['history'] 來保存每次問答的歷史。每當使用者發送新訊息時，程式會將對話歷史更新並顯示：

import streamlit as st

if 'history' not in st.session_state:
    st.session_state['history'] = []

prompt = st.chat_input("請輸入您的訊息...")

if prompt:
    st.session_state['history'].append({"role": "user", "content": prompt})
    ai_response = "Hello 👋"
    st.session_state['history'].append({"role": "ai", "content": ai_response})

for message in st.session_state['history']:
    if message['role'] == 'user':
        with st.chat_message("user"):
            st.write(message['content'])
    elif message['role'] == 'ai':
        with st.chat_message("ai"):
            st.write(message['content'])

history qa

關於 st.session_state

st.session_state 是 Streamlit 提供的一個重要物件，用來在使用者每次互動或刷新畫面時，保持應用程式中的變數狀態。因為 Streamlit 每次刷新畫面都會重新運行程式碼，所以若沒有使用 st.session_state，對話紀錄等資訊將會被重置。透過將 history 存放於 st.session_state，我們可以保留每次的訊息紀錄，確保使用者與機器人的對話可以延續下去，而不會隨畫面刷新而消失。

這段程式碼首先檢查 session_state 中是否已有對話紀錄的 history，如果沒有則初始化空列表。當使用者輸入新訊息時，系統會將該訊息存入歷史中，並生成 AI 回應加入紀錄。最後使用 for 迴圈遍歷對話歷史，依據訊息角色（使用者或 AI）顯示不同的對話框，這樣能夠呈現整體對話的順序，讓畫面更加清晰。