文章目录
使用Streamlit构建纯LLM Chatbot WebUI傻瓜教程开发环境hello Streatelit显示DataFrame数据显示地图WebUI左右布局设置st.sidebar左侧布局st.columns右侧布局 大语言模型LLM Chatbot WebUI设置Chatbot页面布局showdataframe()显示dataframeshowLineChart()显示折线图showMap()显示地图showProgress()显示进度条showLLMChatbot()聊天机器人
使用Streamlit构建纯LLM Chatbot WebUI傻瓜教程
大量的大语言模型的WebUI基于Streamlit构建对话机器人Chatbot。Streamlit是一个用于构建数据科学和机器学习应用程序的开源Python库。它提供了一个简单的界面来快速创建交互式Web应用程序。Streamlit可以帮助将大型语言模型集成到Web界面中，以构建对话机器人Chatbot的WebUI。使用Streamlit API将大型语言模型集成到Web界面中，可以使用模型来回答用户的问题，并将回答显示在界面上。还可以添加其他功能，例如按钮、滑块等，以提供更多交互选项。
下面是使用Streamlit构建Chatbot WebUI的简单示例：
import streamlit as st# 导入大语言模型# 定义Chatbot的界面布局st.title("Chatbot")user_input = st.text_input("Ask a question")# 模型回答用户的问题answer = model.predict(user_input)# 显示模型的回答st.text_area("Answer", answer, height=200)# 添加其他交互功能# ...代码地址： https://gitcode.net/qq_39813001/Streamlit
开发环境
本人在两个开发环境进行了实践，分别是aliyun PAI-DSW环境、InsCode环境。
hello Streatelit
import streamlit as stst.write("Hello streamlit")显示DataFrame数据
import streamlit as stimport numpy as npimport pandas as pdst.title("第一个streamlit应用")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左右布局设置
#增加左侧栏st.sidebar.header('Streamlit cheat sheet')#右侧栏，右侧在分为两列col1, col2 = st.columns(2)st.sidebar左侧布局
使用st.sidebar的方法设置。
st.sidebar.title("第一个streamlit应用")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右侧布局
使用定义的col对象设置控件。
#绘制折线图if col1.checkbox('显示折线图'): chart_data = pd.DataFrame( np.random.randn(20, 3), columns=['a', 'b', 'c']) col1.line_chart(chart_data)#绘制一个地图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)大语言模型LLM Chatbot WebUI
代码地址： https://gitcode.net/qq_39813001/Streamlit
设置Chatbot页面布局
st.sidebar.title("streamlit samples")中的sidebar会将页面处理成左右布局。在左侧页中，定义5个菜单用于切换右侧页面内容。通过if menu == menu1:响应切换事件，在函数体内
import streamlit as stfrom streamlit_option_menu import option_menuimport numpy as npimport pandas as pdimport timest.set_page_config(page_title="streamlit WebUI", layout="wide")st.sidebar.title("streamlit samples")st.write("你好，streamlit。请大家点个赞，给个关注。谢谢！博客：northd.blog.csdn.net")menu1="显示dataframe"menu2="显示折线图"menu3="显示地图"menu4="显示进度条"menu5="大语言模型LLM对话框"with st.sidebar: menu = option_menu("功能分类", [menu1, menu2,menu3,menu4,menu5], icons=['house', "list-task"], menu_icon="cast", default_index=0) def main(): if menu == menu1: st.subheader("数据列表") showdataframe() if menu == menu2: st.subheader("折线图") showLineChart() if menu == menu3: st.subheader("地图") showMap() if menu == menu4: st.subheader("显示进度条") showProgress() if menu == menu5: st.subheader("大语言模型LLM对话框") showLLMChatbot() if __name__ == '__main__': main()showdataframe()显示dataframe
def showdataframe(): df = pd.DataFrame({ 'first column': [5, 6, 7, 8], 'second column': [50, 60, 70, 80] }) df option = st.selectbox( 'Which number do you like best?', df['first column']) '你的选择项: ', option st.code(''' df = pd.DataFrame({ 'first column': [5, 6, 7, 8], 'second column': [50, 60, 70, 80] }) df option = st.selectbox( 'Which number do you like best?', df['first column']) '你的选择项: ', option ''')showLineChart()显示折线图
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()显示进度条
def showProgress(): # Show a spinner during a process with st.spinner(text='In progress'): time.sleep(3) #st.success('进度执行中') # Show and update progress bar bar = st.progress(50) time.sleep(3) bar.progress(100) st.balloons() st.snow() st.toast('进度信息：Mr Stay-Puft') st.error('进度信息：Error message') st.warning('进度信息：Warning message') st.info('进度信息：Info message') st.success('进度信息：Success message') #st.exception(e) st.code( ''' with st.spinner(text='In progress'): time.sleep(3) # Show and update progress bar bar = st.progress(50) time.sleep(3) bar.progress(100) st.balloons() st.snow() st.toast('进度信息：Mr Stay-Puft') st.error('进度信息：Error message') st.warning('进度信息：Warning message') st.info('进度信息：Info message') st.success('进度信息：Success message') ''' )showLLMChatbot()聊天机器人
def showLLMChatbot(): st.title("? 大语言LLM聊天机器人") st.caption("? A streamlit chatbot") info = st.chat_input() st.chat_message('user').write(info) st.chat_message("assistant").write("请大家点个赞，给个关注。谢谢！博客：northd.blog.csdn.net") st.code( ''' st.title("? 大语言LLM聊天机器人") st.caption("? A streamlit chatbot") info = st.chat_input() st.chat_message('user').write(info) st.chat_message("assistant").write("请大家点个赞，给个关注。谢谢！博客：northd.blog.csdn.net") ''' )代码地址： https://gitcode.net/qq_39813001/Streamlit