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

2024-06-10 11:44
文章标签 构建 应用 快速 界面 前端 frontend 不会 好看 写出 streamlit

本文主要是介绍streamlit：如何快速构建一个应用，不会前端也能写出好看的界面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

通过本文你可以了解到：

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

大模型学习参考：

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

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

文章目录

  • 前言
  • streamlit 安装
  • streamlit组件介绍
    • 常用组件
    • 高级组件
  • 案例分享
    • 搭建简单对话界面
    • 使用Qwen大模型对话
      • 代码
      • 结果展示

前言

在这里插入图片描述

Streamlit是一个开源的Python框架，供数据科学家和AI/ML工程师使用，只需几行代码即可交付交互式数据应用程序。

官方文档地址：streamlit doc

经验：

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

streamlit 安装

pip install streamlit
streamlit hello

执行完streamlit hello后，点击 http://localhost:8501
在这里插入图片描述
查看demo
在这里插入图片描述

streamlit组件介绍

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

常用组件

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

  1. st.write(): 用于在应用程序中显示文本、数据框架、图表等内容。

  2. st.title(): 添加应用程序的标题。

  3. st.header() 和 st.subheader(): 添加标题和子标题。

  4. st.text(): 显示纯文本。

  5. st.markdown(): 使用 Markdown 语法添加格式化文本。

  6. st.image(): 显示图像。

  7. st.pyplot(): 显示 Matplotlib 图表。

  8. st.altair_chart(): 显示 Altair 图表。

  9. st.dataframe(): 显示数据框。

  10. st.table(): 显示表格。

  11. st.selectbox(): 显示下拉框，用户可以从选项中进行选择。

  12. st.multiselect(): 显示多选框，用户可以从选项中进行多选。

  13. st.slider(): 显示滑块，用户可以调整数值。

  14. st.text_input(): 显示文本输入框，用户可以输入文本。

  15. st.number_input(): 显示数字输入框，用户可以输入数字。

  16. st.text_area(): 显示多行文本输入框。

  17. st.checkbox(): 显示复选框，用户可以勾选或取消勾选。

  18. st.radio(): 显示单选按钮，用户可以从选项中进行单选。

  19. st.button(): 显示按钮，用户可以点击执行相关操作。

  20. st.file_uploader(): 显示文件上传器，用户可以上传文件。

  21. st.date_input() 和 st.time_input(): 显示日期和时间输入框。

  22. st.color_picker(): 显示颜色选择器，用户可以选择颜色。

  23. st.spinner(): 显示加载状态的旋转器。

这些组件可以帮助你构建出功能丰富的交互式应用程序，根据需要选择合适的组件来实现你的应用程序功能。

下面是一些Streamlit中常用的组件及其简要介绍：

  1. st.title(): 用于添加应用程序的标题。

    import streamlit as st
st.title('My Streamlit App')

  2. st.write(): 可以将文本、数据框架、图表等内容写入应用程序。

    st.write('Hello, world!')

  3. st.header() 和 st.subheader(): 用于添加标题和子标题。

    st.header('This is a header')
st.subheader('This is a subheader')

  4. st.text(): 显示纯文本。

    st.text('This is some text.')

  5. st.markdown(): 可以使用Markdown语法添加格式化文本。

    st.markdown('**This** is some Markdown *text*.')

  6. st.image(): 显示图像。

    from PIL import Image
image = Image.open('example.jpg')
st.image(image, caption='Sunset', use_column_width=True)

  7. st.pyplot() 和 st.altair_chart(): 显示Matplotlib和Altair图表。

    import matplotlib.pyplot as plt
plt.plot([1, 2, 3])
st.pyplot()import altair as alt
chart = alt.Chart(data).mark_bar().encode(x='category',y='count'
)
st.altair_chart(chart, use_container_width=True)

  8. st.dataframe(): 显示数据框。

    import pandas as pd
df = pd.DataFrame({'Column 1': [1, 2, 3], 'Column 2': [4, 5, 6]})
st.dataframe(df)

  9. st.selectbox(): 显示下拉框，用户可以从选项中进行选择。

    option = st.selectbox('Choose an option', ['Option 1', 'Option 2', 'Option 3'])

  10. st.slider(): 显示滑块，用户可以调整数值。

    value = st.slider('Select a value', 0, 100, 50)

  11. st.button(): 显示按钮，用户可以点击执行相关操作。

    if st.button('Click me'):st.write('Button clicked!')

这些是Streamlit中常用的一些组件，可以帮助你构建出功能丰富的交互式数据科学应用程序。

如上常用组件，运行代码streamlit run streamlit_hello.py：

import numpy as np
import streamlit as st
import pandas as pdst.title('My Streamlit App')st.write('Hello, world!')st.header('This is a header')
st.subheader('This is a subheader')st.text('This is some text.')st.markdown('**This** is some Markdown *text*.')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 alt
chart_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'])value = st.slider('Select a value', 0, 100, 50)if st.button('Click me'):st.write('Button clicked!')

在这里插入图片描述
在这里插入图片描述

高级组件

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

  1. st.cache_data:

    • st.cache_data 用于缓存数据，通常用于将数据加载到内存中，并在应用程序的多个部分之间共享。这对于那些频繁访问的数据，例如配置文件、数据集等非常有用。
    • 使用方法与 st.cache 类似，你可以将需要缓存的数据加载函数与 @st.cache_data 装饰器一起使用。
    • 与 st.cache 不同，st.cache_data 并不会保存函数的输入参数，它只会缓存函数的输出结果。因此，如果数据的加载方式不依赖于函数的输入参数，则可以使用 st.cache_data 来缓存数据。

  2. st.cache_resource:

    • st.cache_resource 用于缓存外部资源，例如文件、图像、音频等，通常用于减少重复的网络请求或文件读取操作。
    • 你可以使用 @st.cache_resource 装饰器来缓存资源加载函数，这样在多次访问同一资源时，Streamlit 将会从缓存中加载，而不是重新加载资源。
    • 与 st.cache 和 st.cache_data 类似，st.cache_resource 也可以接受参数，用于根据不同的参数值缓存不同的资源。

这些缓存组件提供了不同的功能，可以根据具体的需求选择合适的缓存方式。通过合理地使用缓存，可以显著提高 Streamlit 应用程序的性能和响应速度，同时减少资源消耗。

案例分享

搭建简单对话界面

import streamlit as stif __name__ == '__main__':st.title('Chat with me :sunflower:')# 初始化historyif "messages" not in st.session_state:st.session_state.messages = []# 展示对话for msg in st.session_state.messages:with st.chat_message(msg['role']):st.markdown(msg["content"])# React to user inputif prompt := st.chat_input("Say something"):# Display user message in chat message containerwith st.chat_message("user"):st.markdown(prompt)# Add user message to chat historyst.session_state.messages.append({"role": "user", "content": prompt})response = f"Echo: {prompt}"# Display assistant response in chat message containerwith st.chat_message("assistant"):st.markdown(response)# Add assistant response to chat historyst.session_state.messages.append({"role": "assistant", "content": response})

在这里插入图片描述

使用Qwen大模型对话

采用了Qwen大模型量化后的q2版本，具体参考代码，注释也比较全。

对话方式两种：

  • 普通输出
  • 流式输出

python库使用：

  • 基础库：os、sys、time
  • llama_cpp：加载大模型
  • dotenv：加载.env配置的环境变量

代码

import os
import sys
import timeimport streamlit as st
from llama_cpp import Llama
from dotenv import load_dotenv, find_dotenvBASE_DIR = os.path.dirname(__file__)
sys.path.append(BASE_DIR)# 加载env环境中内容
_ = load_dotenv(find_dotenv())def get_llm_model(prompt: str = None,model: str = None,temperature: float = 0.0,max_token: int = 2048,n_ctx: int = 512,stream: bool = False):"""根据模型名称去加载模型，返回response数据:param stream::param prompt::param model::param temperature::param max_token::param n_ctx::return:"""if model in ['Qwen_q2']:model_path = os.environ[model]llm = Llama(model_path=model_path, n_ctx=n_ctx)start = time.time()response = llm.create_chat_completion(messages=[{"role": "system","content": "你是一个智能超级助手，请用专业的词语回答问题，整体上下文带有逻辑性，如果不知道，请不要乱说",},{"role": "user","content": "{}".format(prompt)},],temperature=temperature,max_tokens=max_token,stream=stream)cost = time.time() - startprint(f"模型生成时间：{cost}")print(f"大模型回复：\n{response}")if not stream:return response['choices'][0]['message']['content']else:return responsedef get_llm_model_with_stream(prompt: str = None,model: str = None,temperature: float = 0.0,max_token: int = 2048,n_ctx: int = 512,stream: bool = True):"""流式输出结果:param prompt::param model::param temperature::param max_token::param n_ctx::param stream::return:"""response = ""start_time = time.time()stream_results = get_llm_model(prompt, model, temperature, max_token, n_ctx, stream)for res in stream_results:content = res["choices"][0].get("delta", {}).get("content", "")response += contentyield contentcost_time = time.time() - start_timeprint(f"cost_time: {cost_time}, response: {response}")if __name__ == '__main__':st.title('Chat with Qwen :sunflower:')# 初始化historyif "messages" not in st.session_state:st.session_state.messages = []# 展示对话for msg in st.session_state.messages:with st.chat_message(msg['role']):st.markdown(msg["content"])# React to user inputif prompt := st.chat_input("Say something"):# Display user message in chat message containerwith st.chat_message("user"):st.markdown(prompt)# Add user message to chat historyst.session_state.messages.append({"role": "user", "content": prompt})# 普通方式输出# if prompt is not None:#     response = get_llm_model(prompt=prompt, model="Qwen_q2")#     # Display assistant response in chat message container#     with st.chat_message("assistant"):#         st.markdown(response)#     # Add assistant response to chat history#     st.session_state.messages.append({"role": "assistant", "content": response})# 流式输出if prompt is not None:stream_res = get_llm_model_with_stream(prompt=prompt, model="Qwen_q2")with st.chat_message("assistant"):content = st.write_stream(stream_res)print("流式输出：", content)st.session_state.messages.append({"role": "assistant", "content": content})# streamlit run chat_with_qwen.py

结果展示

在这里插入图片描述
在这里插入图片描述

这篇关于streamlit：如何快速构建一个应用，不会前端也能写出好看的界面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1048069。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

在日常使用电脑的过程中，我们经常会遇到这样的情况：一不小心，桌面上的某个重要文件被删除了。这时，大多数人可能会感到惊慌失措，不知所措。 其实，不必过于担心，因为有很多方法可以帮助我们找回被删除的桌面文件。下面，就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件，并且还没有进行其他操作，那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C
阅读更多...
hdu1394(线段树点更新的应用)

hdu1394(线段树点更新的应用)

题意：求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质，在0到n-1这些数字组成的乱序排列，将第一个数字A移到最后一位，得到的逆序数为res-a+(n-a-1) 知道上面的知识点后，可以用暴力来解 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2