使用Streamlit構(gòu)建純LLM Chatbot WebUI傻瓜教程

大量的大語(yǔ)言模型的WebUI基于Streamlit構(gòu)建對(duì)話(huà)機(jī)器人Chatbot。Streamlit是一個(gè)用于構(gòu)建數(shù)據(jù)科學(xué)和機(jī)器學(xué)習(xí)應(yīng)用程序的開(kāi)源Python庫(kù)。它提供了一個(gè)簡(jiǎn)單的界面來(lái)快速創(chuàng)建交互式Web應(yīng)用程序。Streamlit可以幫助將大型語(yǔ)言模型集成到Web界面中，以構(gòu)建對(duì)話(huà)機(jī)器人Chatbot的WebUI。使用Streamlit API將大型語(yǔ)言模型集成到Web界面中，可以使用模型來(lái)回答用戶(hù)的問(wèn)題，并將回答顯示在界面上。還可以添加其他功能，例如按鈕、滑塊等，以提供更多交互選項(xiàng)。

下面是使用Streamlit構(gòu)建Chatbot WebUI的簡(jiǎn)單示例：

import streamlit as st# 導(dǎo)入大語(yǔ)言模型# 定義Chatbot的界面布局
st.title("Chatbot")
user_input = st.text_input("Ask a question")# 模型回答用戶(hù)的問(wèn)題
answer = model.predict(user_input)# 顯示模型的回答
st.text_area("Answer", answer, height=200)# 添加其他交互功能
# ...

代碼地址： https://gitcode.net/qq_39813001/Streamlit

開(kāi)發(fā)環(huán)境

本人在兩個(gè)開(kāi)發(fā)環(huán)境進(jìn)行了實(shí)踐，分別是aliyun PAI-DSW環(huán)境、InsCode環(huán)境。

hello Streatelit

import streamlit as stst.write("Hello streamlit")

顯示DataFrame數(shù)據(jù)

import streamlit as st
import numpy as np
import pandas as pdst.title("第一個(gè)streamlit應(yīng)用")
st.write("你好，streamlit")df = pd.DataFrame({'first column': [5, 6, 7, 8],'second column': [50, 60, 70, 80]
})df

顯示地圖

    map_data = pd.DataFrame(np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],columns=['lat', 'lon'])col2.map(map_data)

WebUI左右布局設(shè)置

#增加左側(cè)欄
st.sidebar.header('Streamlit cheat sheet')#右側(cè)欄，右側(cè)在分為兩列
col1, col2 = st.columns(2)

st.sidebar左側(cè)布局

使用st.sidebar的方法設(shè)置。

st.sidebar.title("第一個(gè)streamlit應(yīng)用")if st.sidebar.checkbox('顯示dataframe'):df = pd.DataFrame({'first column': [5, 6, 7, 8],'second column': [50, 60, 70, 80]})st.sidebar.write(df)option = st.sidebar.selectbox('Which number do you like best?',df['first column'])'You selected: ', option

st.columns右側(cè)布局

使用定義的col對(duì)象設(shè)置控件。

#繪制折線(xiàn)圖
if col1.checkbox('顯示折線(xiàn)圖'):chart_data = pd.DataFrame(np.random.randn(20, 3),columns=['a', 'b', 'c'])col1.line_chart(chart_data)#繪制一個(gè)地圖
col2.subheader('顯示地圖')
if col2.checkbox('顯示地圖'):map_data = pd.DataFrame(np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],columns=['lat', 'lon'])col2.map(map_data)

大語(yǔ)言模型LLM Chatbot WebUI

代碼地址： https://gitcode.net/qq_39813001/Streamlit

設(shè)置Chatbot頁(yè)面布局

st.sidebar.title("streamlit samples")中的sidebar會(huì)將頁(yè)面處理成左右布局。在左側(cè)頁(yè)中，定義5個(gè)菜單用于切換右側(cè)頁(yè)面內(nèi)容。通過(guò)if menu == menu1:響應(yīng)切換事件，在函數(shù)體內(nèi)

import streamlit as st
from streamlit_option_menu import option_menu
import numpy as np
import pandas as pd
import timest.set_page_config(page_title="streamlit WebUI", layout="wide")
st.sidebar.title("streamlit samples")
st.write("你好，streamlit。請(qǐng)大家點(diǎn)個(gè)贊，給個(gè)關(guān)注。謝謝！博客：northd.blog.csdn.net")
menu1="顯示dataframe"
menu2="顯示折線(xiàn)圖"
menu3="顯示地圖"
menu4="顯示進(jìn)度條"
menu5="大語(yǔ)言模型LLM對(duì)話(huà)框"with st.sidebar:menu = option_menu("功能分類(lèi)", [menu1, menu2,menu3,menu4,menu5],icons=['house', "list-task"],menu_icon="cast", default_index=0)def main():if menu == menu1:st.subheader("數(shù)據(jù)列表")showdataframe()if menu == menu2:st.subheader("折線(xiàn)圖")showLineChart()if menu == menu3:st.subheader("地圖")showMap()if menu == menu4:st.subheader("顯示進(jìn)度條")showProgress()if menu == menu5:st.subheader("大語(yǔ)言模型LLM對(duì)話(huà)框")showLLMChatbot()if __name__ == '__main__':main()

showdataframe()顯示dataframe

def showdataframe():df = pd.DataFrame({'first column': [5, 6, 7, 8],'second column': [50, 60, 70, 80]})dfoption = st.selectbox('Which number do you like best?',df['first column'])'你的選擇項(xiàng): ', optionst.code('''df = pd.DataFrame({'first column': [5, 6, 7, 8],'second column': [50, 60, 70, 80]})dfoption = st.selectbox('Which number do you like best?',df['first column'])'你的選擇項(xiàng): ', option''')

showLineChart()顯示折線(xiàn)圖

def showLineChart():chart_data = pd.DataFrame(np.random.randn(20, 3),columns=['a', 'b', 'c'])st.line_chart(chart_data)st.code('''chart_data = pd.DataFrame(np.random.randn(20, 3),columns=['a', 'b', 'c'])st.line_chart(chart_data)''')

showMap()顯示地圖

def showMap():map_data = pd.DataFrame(np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],columns=['lat', 'lon'])st.map(map_data)st.code('''map_data = pd.DataFrame(np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],columns=['lat', 'lon'])col2.map(map_data)''')

showProgress()顯示進(jìn)度條

def showProgress():# Show a spinner during a processwith st.spinner(text='In progress'):time.sleep(3)#st.success('進(jìn)度執(zhí)行中')# Show and update progress barbar = st.progress(50)time.sleep(3)bar.progress(100)st.balloons()st.snow()st.toast('進(jìn)度信息：Mr Stay-Puft')st.error('進(jìn)度信息：Error message')st.warning('進(jìn)度信息：Warning message')st.info('進(jìn)度信息：Info message')st.success('進(jìn)度信息：Success message')#st.exception(e)st.code('''with st.spinner(text='In progress'):time.sleep(3)# Show and update progress barbar = st.progress(50)time.sleep(3)bar.progress(100)st.balloons()st.snow()st.toast('進(jìn)度信息：Mr Stay-Puft')st.error('進(jìn)度信息：Error message')st.warning('進(jìn)度信息：Warning message')st.info('進(jìn)度信息：Info message')st.success('進(jìn)度信息：Success message')''')

showLLMChatbot()聊天機(jī)器人

def showLLMChatbot():st.title("💬 大語(yǔ)言L(fǎng)LM聊天機(jī)器人")st.caption("🚀 A streamlit chatbot")info = st.chat_input()st.chat_message('user').write(info)st.chat_message("assistant").write("請(qǐng)大家點(diǎn)個(gè)贊，給個(gè)關(guān)注。謝謝！博客：northd.blog.csdn.net")st.code('''st.title("💬 大語(yǔ)言L(fǎng)LM聊天機(jī)器人")st.caption("🚀 A streamlit chatbot")info = st.chat_input()st.chat_message('user').write(info)st.chat_message("assistant").write("請(qǐng)大家點(diǎn)個(gè)贊，給個(gè)關(guān)注。謝謝！博客：northd.blog.csdn.net")''')

代碼地址： https://gitcode.net/qq_39813001/Streamlit