文章目录

• 使用Streamlit构建纯LLM Chatbot WebUI傻瓜教程
• • 开发环境
  • hello Streatelit
  • 显示DataFrame数据
  • 显示地图
  • WebUI左右布局设置
  • • st.sidebar左侧布局
    • st.columns右侧布局
  • 大语言模型LLM Chatbot WebUI
  • • 设置Chatbot页面布局
    • showdataframe()显示dataframe
    • showLineChart()显示折线图
    • 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 st  st.write("Hello streamlit") 

显示DataFrame数据

import streamlit as st import numpy as np import pandas as pd  st.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 st from streamlit_option_menu import option_menu import numpy as np import pandas as pd import time  st.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