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

今天我們要來把我們的 streamlit 網站刻出來，對話的功能我們保留到明天再串接，下面直接先附上刻完的結果，然後再分區塊解說：

資料集選擇

本次的站台筆者這邊爬了三個常見問題中的資料集來提供我們進行問答，依照前幾天的設計結果，我們要把這三個資料集放在 sidebar 上，提供給使用者進行選擇，看一下下方程式碼：

import streamlit as st

datasets = {
    "排便問題": {
        "dep": "肝膽腸胃科",
        "url": "https://sp1.hso.mohw.gov.tw/doctor/Often_question/type_detail.php?q_type=%B1%C6%ABK%B0%DD%C3D&UrlClass=%A8x%C1x%B8z%ADG%AC%EC"
    },
    "經痛": {
        "dep": "婦產科",
        "url": "https://sp1.hso.mohw.gov.tw/doctor/Often_question/type_detail.php?UrlClass=%B0%FC%B2%A3%AC%EC&q_like=0&q_type=%B8g%B5h"
    },
    "藥水": {
        "dep": "眼科",
        "url": "https://sp1.hso.mohw.gov.tw/doctor/Often_question/type_detail.php?UrlClass=%B2%B4%AC%EC&q_like=0&q_type=%C3%C4%A4%F4"
    }
}

with st.sidebar:
    st.title("選擇資料集")
    dataset_option = st.selectbox(
        "請選擇在問答時要使用的資料集...",
        [key for key in datasets.keys()]
    )

完成後 sidebar 就會出現選擇資料集的區塊：

我們直接把資料集塞在一個 dict 中，然後在 sidebar 中使用 st.selectbox 來讓使用者選擇要使用的資料集。

OpenAI API Key 設定

這邊我們要把 OpenAI 的 API Key 設定在 sidebar 中，這樣我們就可以直接在網頁上進行設定，看一下下方程式碼：

本站台不會儲存使用者的 Key，於每次重整後都需要重新輸入，請安心使用

with st.sidebar:
    ...

    st.title("請輸入 OpenAI Key")
    openai_key = st.text_input("請輸入您的 OpenAI Key...", type="password")

完成後 sidebar 就會出現這個區塊：

會出對話紀錄

同樣的，依照我們的站台規劃，我們需要設計一個下載對話紀錄的功能，我們一樣把它寫在 sidebar 當中：

with st.sidebar:
    ...

    st.title("下載對話紀錄")
    file_format_option = st.selectbox(
        "請選擇要下載的檔案格式...",
        ("CSV", "JSON")
    )
    st.download_button("下載", "dialogue.csv", file_format_option)

預設我們提供 CSV 以及 JSON 兩種格式，後面我們會再將這個功能實作出來。不過這邊要注意的是，可以看到在最後一行我們使用的 button 是 st.download_button 而不是 st.button 這是因為前者有直接替我們封裝好了下載的功能，我們最後只需要將檔案內容使用一個變數傳遞進去就可以達到下載的動作了，後面會提到。

下面附上完整的 sidebar 的區塊：

對話區塊

對話區塊的部分跟之前快速入門時差不多，我們直接看一下下方程式碼：

st.title("問答機器人")
st.write("本網站並非專業醫療諮詢網站，僅用於學習系統開發，請勿依賴本網站的資訊作為醫療建議。")
st.write(f"目前選擇的資料集為 ”{dataset_option}“，資料來源可以參考 [這個網址]({datasets[dataset_option]['url']})。")

可以看到我們的第二第三行分別撰寫了警語，以及告知使用者目前使用的資料集，並且提供來源網址：

而對話輸入框的部分，則是如同之前的範例，不過目前還沒有串接對話功能進來，因此會回穿一些簡單的訊息，不過這邊要注意的是，因為我們必須要取得使用者的 OpenAI API Key 才可以進行問答，因此我們要多做一個判斷，如果使用者沒有輸入 Key，我們就不會進行問答，而是回傳一個提示訊息：

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

if prompt and openai_key:
    with st.chat_message("ai"):
        st.write("Hello 👋")
elif prompt and not openai_key:
    with st.chat_message("ai"):
        st.write("請先輸入您的 OpenAI Key...🔐")

這樣就可以達到防呆的效果，下面是沒輸入 Key 的情況：

下面是有輸入 Key 的情況：

完整程式碼

import streamlit as st

datasets = {
    "排便問題": {
        "dep": "肝膽腸胃科",
        "url": "https://sp1.hso.mohw.gov.tw/doctor/Often_question/type_detail.php?q_type=%B1%C6%ABK%B0%DD%C3D&UrlClass=%A8x%C1x%B8z%ADG%AC%EC"
    },
    "經痛": {
        "dep": "婦產科",
        "url": "https://sp1.hso.mohw.gov.tw/doctor/Often_question/type_detail.php?UrlClass=%B0%FC%B2%A3%AC%EC&q_like=0&q_type=%B8g%B5h"
    },
    "藥水": {
        "dep": "眼科",
        "url": "https://sp1.hso.mohw.gov.tw/doctor/Often_question/type_detail.php?UrlClass=%B2%B4%AC%EC&q_like=0&q_type=%C3%C4%A4%F4"
    }
}

with st.sidebar:
    st.title("選擇資料集")
    dataset_option = st.selectbox(
        "請選擇在問答時要使用的資料集...",
        [key for key in datasets.keys()]
    )

    st.title("請輸入 OpenAI Key")
    openai_key = st.text_input("請輸入您的 OpenAI Key...", type="password")

    st.title("下載對話紀錄")
    file_format_option = st.selectbox(
        "請選擇要下載的檔案格式...",
        ("CSV", "JSON")
    )
    st.download_button("下載", "dialogue.csv", file_format_option)

st.title("問答機器人")
st.write("本網站並非專業醫療諮詢網站，僅用於學習系統開發，請勿依賴本網站的資訊作為醫療建議。")
st.write(f"目前選擇的資料集為 ”{dataset_option}“，資料來源可以參考 [這個網址]({datasets[dataset_option]['url']})。")

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

if prompt and openai_key:
    with st.chat_message("ai"):
        st.write("Hello 👋")
elif prompt and not openai_key:
    with st.chat_message("ai"):
        st.write("請先輸入您的 OpenAI Key...🔐")

內容預告

今天我們把站台以及 sidebar 的功能都實作完成了，明天我們要來正式的串接問答的功能！