streamlit：如何快速构建一个应用，不会前端也能写出好看的界面 ...

通过本文你可以了解到：
  

• 如何安装streamlit，运行起来第一个demo
  
• 熟悉streamlit的基本语法，常用的一些组件
  
• 利用streamlit库构建应用
  

    大模型学习参考：
  

• 大模型学习资料整理：如何从0到1学习大模型，搭建个人或企业RAG系统，如何评估与优化（更新中…）
  

    欢迎大家访问个人博客网址：https://www.maogeshuo.com，博主积极更新中…
  
  
媒介

Streamlit是一个开源的Python框架，供数据科学家和AI/ML工程师利用，只需几行代码即可交付交互式数据应用步伐。
官方文档所在：streamlit doc
经验：

• 官方给出了非常多的组件利用案例，在编写代码时请结合官方文档+pycharm的代码提示+函数注释，函数注释中一班都给出了组件的详细利用
  
• 修改完结构后，刷新访问网站，可以实时查看更改后的结果，无需重新streamlite run demo.py
  

streamlit 安装

1. pip install streamlit
2. streamlit hello

复制代码

实行完streamlit hello后，点击 http://localhost:8501

查看demo

streamlit组件介绍

Streamlit是一个用于构建数据科学界面的Python库，它使得创建交互式应用步伐变得非常简单。
常用组件

Streamlit 提供了一系列常用组件，用于构建交互式应用步伐。以下是常见的 Streamlit 组件：

• st.write(): 用于在应用步伐中表现文本、数据框架、图表等内容。
  
• st.title(): 添加应用步伐的标题。
  
• st.header() 和 st.subheader(): 添加标题和子标题。
  
• st.text(): 表现纯文本。
  
• st.markdown(): 利用 Markdown 语法添加格式化文本。
  
• st.image(): 表现图像。
  
• st.pyplot(): 表现 Matplotlib 图表。
  
• st.altair_chart(): 表现 Altair 图表。
  
• st.dataframe(): 表现数据框。
  
• st.table(): 表现表格。
  
• st.selectbox(): 表现下拉框，用户可以从选项中进行选择。
  
• st.multiselect(): 表现多选框，用户可以从选项中进行多选。
  
• st.slider(): 表现滑块，用户可以调整数值。
  
• st.text_input(): 表现文本输入框，用户可以输入文本。
  
• st.number_input(): 表现数字输入框，用户可以输入数字。
  
• st.text_area(): 表现多行文本输入框。
  
• st.checkbox(): 表现复选框，用户可以勾选或取消勾选。
  
• st.radio(): 表现单选按钮，用户可以从选项中进行单选。
  
• st.button(): 表现按钮，用户可以点击实行相关操纵。
  
• st.file_uploader(): 表现文件上传器，用户可以上传文件。
  
• st.date_input() 和 st.time_input(): 表现日期和时间输入框。
  
• st.color_picker(): 表现颜色选择器，用户可以选择颜色。
  
• st.spinner(): 表现加载状态的旋转器。
  

这些组件可以资助你构建出功能丰富的交互式应用步伐，根据需要选择合适的组件来实现你的应用步伐功能。
下面是一些Streamlit中常用的组件及其简要介绍：

• st.title(): 用于添加应用步伐的标题。
  
  1. import streamlit as st
  2. st.title('My Streamlit App')

  复制代码
• st.write(): 可以将文本、数据框架、图表等内容写入应用步伐。
  
  1. st.write('Hello, world!')

  复制代码
• st.header() 和 st.subheader(): 用于添加标题和子标题。
  
  1. st.header('This is a header')
  2. st.subheader('This is a subheader')

  复制代码
• st.text(): 表现纯文本。
  
  1. st.text('This is some text.')

  复制代码
• st.markdown(): 可以利用Markdown语法添加格式化文本。
  
  1. st.markdown('**This** is some Markdown *text*.')

  复制代码
• st.image(): 表现图像。
  
  1. from PIL import Image
  2. image = Image.open('example.jpg')
  3. st.image(image, caption='Sunset', use_column_width=True)

  复制代码
• st.pyplot() 和 st.altair_chart(): 表现Matplotlib和Altair图表。
  
  1. import matplotlib.pyplot as plt
  2. plt.plot([1, 2, 3])
  3. st.pyplot()
  5. import altair as alt
  6. chart = alt.Chart(data).mark_bar().encode(
  7.     x='category',
  8.     y='count'
  9. )
  10. st.altair_chart(chart, use_container_width=True)

  复制代码
• st.dataframe(): 表现数据框。
  
  1. import pandas as pd
  2. df = pd.DataFrame({'Column 1': [1, 2, 3], 'Column 2': [4, 5, 6]})
  3. st.dataframe(df)

  复制代码
• st.selectbox(): 表现下拉框，用户可以从选项中进行选择。
  
  1. option = st.selectbox('Choose an option', ['Option 1', 'Option 2', 'Option 3'])

  复制代码
• st.slider(): 表现滑块，用户可以调整数值。
  
  1. value = st.slider('Select a value', 0, 100, 50)

  复制代码
• st.button(): 表现按钮，用户可以点击实行相关操纵。
  
  1. if st.button('Click me'):
  2.     st.write('Button clicked!')

  复制代码

这些是Streamlit中常用的一些组件，可以资助你构建出功能丰富的交互式数据科学应用步伐。
如上常用组件，运行代码streamlit run streamlit_hello.py：

1. import numpy as npimport streamlit as stimport pandas as pdst.title('My Streamlit App')st.write('Hello, world!')
2. st.header('This is a header')
3. st.subheader('This is a subheader')
4. st.text('This is some text.')
5. st.markdown('**This** is some Markdown *text*.')
6. from PIL import Imageimage = Image.open('../data/stream_demo/onetwo.jpeg')st.image(image, caption='Sunset', use_column_width=True)import matplotlib.pyplot as pltplt.plot([1, 2, 3])st.pyplot()import altair as altchart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])chart = alt.Chart(chart_data).mark_bar().encode(    x='category',    y='count')c = (    alt.Chart(chart_data)        .mark_circle()        .encode(x="a", y="b", size="c", color="c", tooltip=["a", "b", "c"])        )st.altair_chart(c, use_container_width=True)df = pd.DataFrame({'Column 1': [1, 2, 3], 'Column 2': [4, 5, 6]})st.dataframe(df)option = st.selectbox('Choose an option', ['Option 1', 'Option 2', 'Option 3'])
7. value = st.slider('Select a value', 0, 100, 50)
8. if st.button('Click me'):
9.     st.write('Button clicked!')

复制代码

高级组件

在 Streamlit 中，除了 st.cache 之外，还有一些其他的缓存相关组件，如 st.cache_data 和 st.cache_resource，它们分别用于缓存数据和资源，以下是它们的介绍：

• st.cache_data:
  
  
  
  • st.cache_data 用于缓存数据，通常用于将数据加载到内存中，并在应用步伐的多个部门之间共享。这对于那些频仍访问的数据，例如配置文件、数据集等非常有用。
    
  • 利用方法与 st.cache 类似，你可以将需要缓存的数据加载函数与 @st.cache_data 装饰器一起利用。
    
  • 与 st.cache 不同，st.cache_data 并不会保存函数的输入参数，它只会缓存函数的输出结果。因此，如果数据的加载方式不依靠于函数的输入参数，则可以利用 st.cache_data 来缓存数据。
    
  
  
• st.cache_resource:
  
  
  
  • st.cache_resource 用于缓存外部资源，例如文件、图像、音频等，通常用于减少重复的网络请求或文件读取操纵。
    
  • 你可以利用 @st.cache_resource 装饰器来缓存资源加载函数，如许在多次访问同一资源时，Streamlit 将会从缓存中加载，而不是重新加载资源。
    
  • 与 st.cache 和 st.cache_data 类似，st.cache_resource 也可以接受参数，用于根据不同的参数值缓存不同的资源。
    
  
  

这些缓存组件提供了不同的功能，可以根据详细的需求选择合适的缓存方式。通过合理地利用缓存，可以明显提高 Streamlit 应用步伐的性能和相应速率，同时减少资源斲丧。
案例分享

搭建简单对话界面

1. import streamlit as st
3. if __name__ == '__main__':
4.     st.title('Chat with me :sunflower:')
6.     # 初始化history
7.     if "messages" not in st.session_state:
8.         st.session_state.messages = []
10.     # 展示对话
11.     for msg in st.session_state.messages:
12.         with st.chat_message(msg['role']):
13.             st.markdown(msg["content"])
15.     # React to user input
16.     if prompt := st.chat_input("Say something"):
17.         # Display user message in chat message container
18.         with st.chat_message("user"):
19.             st.markdown(prompt)
20.         # Add user message to chat history
21.         st.session_state.messages.append({"role": "user", "content": prompt})
23.     response = f"Echo: {prompt}"
24.     # Display assistant response in chat message container
25.     with st.chat_message("assistant"):
26.         st.markdown(response)
27.     # Add assistant response to chat history
28.     st.session_state.messages.append({"role": "assistant", "content": response})

复制代码

利用Qwen大模型对话

采用了Qwen大模型量化后的q2版本，详细参考代码，注释也比力全。
对话方式两种：

• 平凡输出
  
• 流式输出
  

python库利用：

• 底子库：os、sys、time
  
• llama_cpp：加载大模型
  
• dotenv：加载.env配置的情况变量
  

代码

1. import os
2. import sys
3. import time
5. import streamlit as st
6. from llama_cpp import Llama
7. from dotenv import load_dotenv, find_dotenv
9. BASE_DIR = os.path.dirname(__file__)
10. sys.path.append(BASE_DIR)
12. # 加载env环境中内容
13. _ = load_dotenv(find_dotenv())
16. def get_llm_model(
17.         prompt: str = None,
18.         model: str = None,
19.         temperature: float = 0.0,
20.         max_token: int = 2048,
21.         n_ctx: int = 512,
22.         stream: bool = False):
23.     """
24.     根据模型名称去加载模型，返回response数据
25.     :param stream:
26.     :param prompt:
27.     :param model:
28.     :param temperature:
29.     :param max_token:
30.     :param n_ctx:
31.     :return:
32.     """
33.     if model in ['Qwen_q2']:
34.         model_path = os.environ[model]
35.         llm = Llama(model_path=model_path, n_ctx=n_ctx)
36.         start = time.time()
37.         response = llm.create_chat_completion(
38.             messages=[
39.                 {
40.                     "role": "system",
41.                     "content": "你是一个智能超级助手，请用专业的词语回答问题，整体上下文带有逻辑性，如果不知道，请不要乱说",
42.                 },
43.                 {
44.                     "role": "user",
45.                     "content": "{}".format(prompt)
46.                 },
47.             ],
48.             temperature=temperature,
49.             max_tokens=max_token,
50.             stream=stream
51.         )
52.         cost = time.time() - start
53.         print(f"模型生成时间：{cost}")
54.         print(f"大模型回复：\n{response}")
55.         if not stream:
56.             return response['choices'][0]['message']['content']
57.         else:
58.             return response
61. def get_llm_model_with_stream(
62.         prompt: str = None,
63.         model: str = None,
64.         temperature: float = 0.0,
65.         max_token: int = 2048,
66.         n_ctx: int = 512,
67.         stream: bool = True):
68.     """
69.     流式输出结果
70.     :param prompt:
71.     :param model:
72.     :param temperature:
73.     :param max_token:
74.     :param n_ctx:
75.     :param stream:
76.     :return:
77.     """
78.     response = ""
79.     start_time = time.time()
80.     stream_results = get_llm_model(prompt, model, temperature, max_token, n_ctx, stream)
81.     for res in stream_results:
82.         content = res["choices"][0].get("delta", {}).get("content", "")
83.         response += content
84.         yield content
85.     cost_time = time.time() - start_time
86.     print(f"cost_time: {cost_time}, response: {response}")
89. if __name__ == '__main__':
90.     st.title('Chat with Qwen :sunflower:')
92.     # 初始化history
93.     if "messages" not in st.session_state:
94.         st.session_state.messages = []
96.     # 展示对话
97.     for msg in st.session_state.messages:
98.         with st.chat_message(msg['role']):
99.             st.markdown(msg["content"])
101.     # React to user input
102.     if prompt := st.chat_input("Say something"):
103.         # Display user message in chat message container
104.         with st.chat_message("user"):
105.             st.markdown(prompt)
106.         # Add user message to chat history
107.         st.session_state.messages.append({"role": "user", "content": prompt})
109.     # 普通方式输出
110.     # if prompt is not None:
111.     #     response = get_llm_model(prompt=prompt, model="Qwen_q2")
112.     #     # Display assistant response in chat message container
113.     #     with st.chat_message("assistant"):
114.     #         st.markdown(response)
115.     #     # Add assistant response to chat history
116.     #     st.session_state.messages.append({"role": "assistant", "content": response})
118.     # 流式输出
119.     if prompt is not None:
120.         stream_res = get_llm_model_with_stream(prompt=prompt, model="Qwen_q2")
121.         with st.chat_message("assistant"):
122.             content = st.write_stream(stream_res)
123.         print("流式输出：", content)
124.         st.session_state.messages.append({"role": "assistant", "content": content})
127. # streamlit run chat_with_qwen.py

复制代码

结果展示

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。