探索Streamlit中强大而灵活的 st.write() 函数(五):构建丰富多样的应用界面

文章目录

  • 1 前言
  • 2 显示HTML的内容
  • 3 显示Markdown内容
  • 4 显示代码块
  • 5 显示DataFrame的交互式表格
  • 6 显示音频和视频
  • 7 显示图表
  • 8 显示图片
  • 9 显示地图
  • 10 显示PDF文件
  • 11 显示文件下载链接
  • 12 结语

1 前言

在这篇博文中,我们将着重介绍Streamlit中一个核心而重要的函数,那就是st.write()。在之前的三篇文章(《Streamlit初识(一)——安装以及初步应用》、《Streamlit的第一个应用(二)》和《Streamlit应用中构建多页面(三):两种方案》)中,我们已经对Streamlit的基础知识和应用开发流程有了一定的了解。

在初次接触Streamlit的文章中,我们首先介绍了Streamlit的安装步骤和基本应用方法。我们了解了如何使用st.write()函数快速呈现文本和数据,并探索了另外几个常用组件,如st.header()和st.code()等,为我们构建应用程序打下了基础。

接着,在第二篇文章中,我们展示了如何通过Streamlit构建一个简单的应用程序。我们使用了st.write()函数来显示数据、图表和多媒体内容。此外,我们了解了如何结合其他组件(如按钮和滑块)与st.write()函数一起使用,从而实现用户与应用程序的交互。

最后,在第三篇文章中,我们深入探讨了如何在Streamlit应用程序中构建多个页面。我们介绍了两种方案,一种是使用状态切换来实现页面切换,另一种是使用多个.py文件模块化构建多个页面。这些方案中的每个页面都使用了st.write()函数来呈现不同内容和交互界面。

在本篇博文中,我们将进一步探索st.write()的各种用法和技巧,通过实例演示和详细解释,帮助您更好地理解和应用这个核心函数。通过深入了解st.write()的灵活性和功能,您将能更加自如地构建和展示文本、数据、图表和媒体等内容,提升您的Streamlit应用程序的丰富度和交互性。

让我们一同深入探索st.write()的精彩用法,为您的Streamlit应用程序增添更多魅力!

2 显示HTML的内容

st.write()函数支持显示HTML标记语言的内容。可以通过传递包含HTML标签的字符串来实现。示例代码如下:

st.write("<h1 style='color: blue;'>这是HTML内容</h1>", unsafe_allow_html=True)

这样就可以在应用程序中显示带有HTML样式的标题。
在这里插入图片描述

3 显示Markdown内容

类似地,st.write()函数也支持显示Markdown格式的内容。可以通过传递包含Markdown语法的字符串来实现。示例代码如下:

st.write("这是一个列表:\n\n- 项目1\n- 项目2\n- 项目3")

这将在应用程序中显示一个项目列表。
在这里插入图片描述

4 显示代码块

st.write()函数支持显示代码块,并可以高亮显示代码。示例代码如下:

code = '''
def hello_world():print("Hello, World!")hello_world()
'''st.code(code, language='python')

这将在应用程序中显示一个Python代码块,并进行语法高亮显示。
在这里插入图片描述

5 显示DataFrame的交互式表格

除了简单地显示DataFrame,st.write()函数还支持将DataFrame转换为交互式表格。示例代码如下:

import pandas as pddata = {'姓名': ['张三', '李四', '王五'],'年龄': [25, 30, 28],'城市': ['北京', '上海', '广州']}df = pd.DataFrame(data)st.write(df)

这将在应用程序中显示一个交互式表格,可以对数据进行排序和过滤等操作。
在这里插入图片描述

6 显示音频和视频

st.write()函数还支持显示音频和视频文件。示例代码如下:

audio_file = open('audio.mp3', 'rb')
st.write("这是一段音频:")
st.audio(audio_file, format='audio/mp3')video_file = open('video.mp4', 'rb')
st.write("这是一段视频:")
st.video(video_file, format='video/mp4')

这将在应用程序中显示一段音频和视频。

7 显示图表

st.write()函数可以用于显示各种类型的图表,例如折线图、柱状图、散点图等。示例代码如下:

import matplotlib.pyplot as plt
import numpy as npx = np.linspace(0, 10, 100)
y = np.sin(x)fig, ax = plt.subplots()
ax.plot(x, y)st.write(fig)

这将在应用程序中显示一个正弦曲线的折线图。

在上述示例代码中,我们创建了一个包含正弦曲线数据的折线图,并将其传递给st.write()函数。该函数将自动识别并显示传递的Matplotlib图形。

此外,对于其他常见的图表库,例如Seaborn、Plotly和Bokeh等,st.write()函数同样适用。只需将生成的图表对象传递给st.write()函数即可显示在Streamlit应用程序中。
在这里插入图片描述

8 显示图片

使用st.write()函数可以显示图片文件或URL链接中的图片。下面是使用两种方式显示图片的示例:

1.显示本地图片文件:

from PIL import Image
import streamlit as st# 加载本地图片文件
image = Image.open("image.jpg")# 使用st.write()函数显示图片
st.write("显示本地图片文件")
st.write(image)

2.显示URL链接中的图片:

import streamlit as st# 图片URL链接
image_url = "https://example.com/image.jpg"# 使用st.write()函数显示图片
st.write("显示URL链接中的图片")
st.write(f"![Image]({image_url})")

在这两个示例中,我们通过st.write()函数来显示图片。如果要显示本地图片文件,可以使用PIL库加载图片,并将图片对象传递给st.write()函数。如果要显示URL链接中的图片,可以使用Markdown语法,在st.write()中以[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MxVKelbh-1691231122939)({image_url})]的格式插入URL链接。

请注意,在Streamlit应用程序中使用st.write()来显示大型图像文件可能会导致加载时间较长。如果需要更好的性能和用户体验,推荐使用st.image()函数来显示图片,该函数支持本地图片文件和URL链接。

9 显示地图

使用 st.write() 函数来显示地理位置和地图是相对简单的。下面是一个使用 st.write() 函数显示地图的示例:

import streamlit as st# 获取地理位置的纬度和经度
latitude = 40.7128
longitude = -74.0060# 使用 st.write() 函数显示地图
st.write(f"纬度:{latitude}, 经度:{longitude}")
st.write(f"![Map](https://maps.googleapis.com/maps/api/staticmap?center={latitude},{longitude}&zoom=13&size=300x300&markers=color:red%7Clabel:C%7C{latitude},{longitude}&key=YOUR_API_KEY)")

在这个示例中,我们首先指定地理位置的纬度和经度。然后,使用 st.write() 函数显示地理位置的纬度和经度。最后,使用 Markdown 语法在 st.write() 中插入地图的静态图像URL链接。这里的示例使用了Google Maps的API来生成静态地图图像链接。

请注意,在代码中的URL链接中,你需要将 YOUR_API_KEY 替换为你的Google Maps API密钥,并确保你具有针对该API的有效访问权限。

有关更高级的地图功能,例如交互式地图和地图工具栏控件,建议使用专门的地图可视化库,如Folium或Plotly。但是,对于简单的静态地图显示,使用 st.write() 函数配合Markdown语法即可满足基本需求。

10 显示PDF文件

使用 st.write() 函数来嵌入和展示 PDF 文件是相对简单的。下面是一个使用 st.write() 函数显示 PDF 文件的示例:

import streamlit as st# 读取 PDF 文件的二进制数据
with open("document.pdf", "rb") as f:pdf_bytes = f.read()# 使用 st.write() 函数显示 PDF 文件
st.write(pdf_bytes, format="pdf")

在这个示例中,我们首先使用 open() 函数以二进制模式读取 PDF 文件,并将其保存到 pdf_bytes 变量中。然后,使用 st.write() 函数将 pdf_bytes 变量作为参数传递,并指定 format=“pdf” 来告诉 Streamlit 显示 PDF 文件。

请注意,在代码中的 open() 函数中需要指定正确的 PDF 文件路径。确保你的应用程序目录中存在指定的 PDF 文件。

这种方法适用于显示较小的 PDF 文件。如果需要处理较大的 PDF 文件或者需要更高级的 PDF 渲染和交互功能,建议使用专门的 PDF 处理库,如 PyMuPDF 或 pdf2image。

11 显示文件下载链接

要在 st.write() 中添加文件下载链接,以便用户可以方便地下载文件,可以使用 Markdown 语法来创建一个带有下载链接的文本。下面是一个示例:

import streamlit as st# 文件下载链接
file_url = "http://www.example.com/example_file.csv"# 在 st.write() 中添加文件下载链接
st.write(f"点击[此处]({file_url})下载文件")

在上述示例中,我们在 st.write() 中使用 Markdown 语法创建了一个带有下载链接的文本。点击用户在浏览器中点击该链接时,将会下载指定的文件。

请注意,在示例代码中的 file_url 中,你需要将链接 http://www.example.com/example_file.csv 替换为你要提供给用户下载的文件的实际链接。

这种方法适用于在 Markdown 内容中添加下载链接,但用户点击链接后文件将在浏览器中打开。如果要强制浏览器下载文件而不是打开文件,你可以将链接的标记类型更改为 application/octet-stream,或者使用其他下载文件的技术(如 HTML 的 标签的 download 属性)。

尽管使用 st.write() 函数创建下载链接是一种方法,但 Streamlit 也提供了 st.download_button() 和 st.file_downloader() 等特定的函数来处理文件下载的需求。这些函数提供更多的灵活性和功能,适合处理复杂的文件下载需求。

12 结语

通过本篇博文,我们详细介绍了Streamlit中的st.write()函数的各种用法。使用st.write(),我们可以轻松地显示HTML和Markdown内容,展示交互式表格、图表、音频、视频,甚至嵌入和展示PDF文件。我们还学会了如何添加文件下载链接,方便用户获取所需文件。st.write()是一个非常实用、灵活且强大的函数,为展示和分享数据提供了很大的便利。希望这篇博文对你在Streamlit应用程序中的展示内容方面有所帮助!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/76873.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker 容器化学习

文章目录 前言Docker架构 1、 docker安装2、启动docker服务3、设置docker随机器一起启动4、docker体验5、docker常规命令5.1、容器操作docker [run|start|stop|restart|kill|rm|pause|unpause]docker [ps|inspect|exec|logs|export|import] 5.2、镜像操作docker images|rmi|tag…

数据结构--图的遍历 DFS

数据结构–图的遍历 DFS 树的深度优先遍历 //树的先根遍历 void PreOrder(TreeNode *R) {if(R ! NULL){visit(R); //访问根节点while(R还有下一个子树T)PreOrder(T);//先根遍历下一棵子树} }图的深度优先遍历 bool visited [MAX_VERTEX_NUM]; //访问标记数组 void DFS(Grap…

【雕爷学编程】MicroPython动手做(31)——物联网之Easy IoT 2

1、物联网的诞生 美国计算机巨头微软(Microsoft)创办人、世界首富比尔盖茨&#xff0c;在1995年出版的《未来之路》一书中&#xff0c;提及“物物互联”。1998年麻省理工学院提出&#xff0c;当时被称作EPC系统的物联网构想。2005年11月&#xff0c;国际电信联盟发布《ITU互联网…

医学影像PACS系统源码:多功能服务器和阅片系统

PACS系统是以最新的IT技术为基础&#xff0c;遵循医疗卫生行业IHE/DICOM3.0和HL7标准&#xff0c;开发的多功能服务器和阅片系统。通过简单高性能的阅片功能&#xff0c;支持繁忙时的影像诊断业务&#xff0c;拥有保存影像的院内Web传输及离线影像等功能&#xff0c;同时具有备…

DP(背包模型)

01背包问题 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 第一行两个整数&…

VMware Linux Centos 配置网络并设置为静态ip

在root用户下进行以下操作 1. 查看子网ip和网关 &#xff08;1&#xff09;进入虚拟网络编辑器 &#xff08;2&#xff09;进入NAT设置 &#xff08;3&#xff09;记录子网IP和子网掩码 2. 修改网络配置文件 &#xff08;1&#xff09;cd到网络配置文件路径下 [rootlo…

GB28181智慧可视化指挥控制系统之执法记录仪设计探讨

什么是智慧可视化指挥控制系统&#xff1f; 智慧可视化指挥控制平台通过4G/5G网络、WIFI实时传输视音频数据至指挥中心&#xff0c;特别是在有突发情况时&#xff0c;可以指定一台执法仪为现场视频监控器&#xff0c;实时传输当前画面到指挥中心&#xff0c;指挥中心工作人员可…

sentinel组件

目录 定义 4.加SentinelResource,blockHander是超过阈值之后执行的函数 5.设置阈值 6.springboot集成sentinel 定义 1.sentinel知道当前流量大小&#xff0c;在浏览器和后端之间加sentinel控制流量&#xff0c;避免大批量的瞬时请求都达到服务上&#xff0c;将服务压垮 2.…

LeetCode 热题 100 JavaScript--108. 将有序数组转换为二叉搜索树

给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树。 提示&#xff1a; 1 < nums.length < 104 -104 < n…

一百四十六、Xmanager——Xmanager5连接Xshell7并控制服务器桌面

一、目的 由于kettle安装在Linux上&#xff0c;Xshell启动后需要Xmanager。而Xmanager7版本受限、没有免费版&#xff0c;所以就用Xmanager5去连接Xshell7 二、Xmanager5安装包来源 &#xff08;一&#xff09;注册码 注册码&#xff1a;101210-450789-147200 &#xff08…

FasterTransformer :transformer类模型的三种结构

Transformer是一种基于注意力机制的深度神经网络结构&#xff0c;常用于文本生成、机器翻译等NLP任务。目前常用的Transformer类模型架构主要有三种: 结构例子–仅编码器&#xff08;EncoderOnly&#xff09;bert,T5输入为一整个句子仅解码器&#xff08;DecoderOnly&#xff…

常微分方程建模R包ecode(二)——绘制相速矢量场

本节中我们考虑一个更为复杂的常微分方程模型&#xff0c; d X C d t ν ( X A Y A ) − β ⋅ X C ⋅ ( Y C Y A ) − ( μ g ) ⋅ X C , ( 1 ) d Y C d t β ⋅ X C ⋅ ( Y C Y A ) − ( μ g ρ ) ⋅ Y C , ( 2 ) d X A d t g ⋅ X C − β ⋅ X A ⋅ ( Y C Y A …

决策树的划分依据之:信息增益率

在上面的介绍中&#xff0c;我们有意忽略了"编号"这一列.若把"编号"也作为一个候选划分属性&#xff0c;则根据信息增益公式可计算出它的信息增益为 0.9182&#xff0c;远大于其他候选划分属性。 计算每个属性的信息熵过程中,我们发现,该属性的值为0, 也就…

selenium官网文档阅读总结(day 2)

1.selenium元素定位方法 1.1selenium命令 当我们使用chormdriver打开网页后&#xff0c;接下来就要用python操作元素&#xff0c;模拟用户会作出的操作&#xff0c;这些操作元素的方法就是命令。比如 (1) click&#xff1a;点击&#xff08;按钮&#xff0c;单选框&#xff…

【Java】UWB高精度工业人员安全定位系统源码

基于VueSpring boot前后端分离架构开发的一套UWB技术高精度定位系统源码。 UWB高精度人员定位系统提供实时定位、电子围栏、轨迹回放等基础功能以及各种拓展功能,用户可根据实际需要任意选择搭配拓展功能。该系统简易部署&#xff0c;方便使用&#xff0c;实时响应。UWB高精度定…

skywalking全链路追踪

文章目录 一、介绍二、全链路追踪1. 测试1 - 正常请求2. 测试2 - 异常请求 三、过滤非业务请求链路1. 链路忽略插件2. 配置3. 测试 一、介绍 在上一篇文章skywalking安装教程中我们介绍了skywalking的作用以及如何将其集成到我们的微服务项目中。本篇文章我们介绍在微服务架构…

张量Tensor 深度学习

1 张量的定义 张量tensor理论是数学的一个分支学科&#xff0c;在力学中有重要的应用。张量这一术语源于力学&#xff0c;最初是用来表示弹性介质中各点应力状态的&#xff0c;后来张量理论发展成为力学和物理学的一个有力数学工具。 张量&#xff08;Tensor&#xff09;是一个…

基于总线加锁和缓存锁(CPU实现原子操作的两种方式)

总线锁 总线锁就是使用处理器提供的一个LOCK#信号&#xff0c;当一个处理器在总线上输出此信号时&#xff0c;其他处理器的请求将被阻塞住&#xff0c;那么该处理器可以独占共享内存。 CPU和内存之间的通信被锁&#xff01;&#xff01; 如果多个处理器同时对共享变量进行读写…

解决一个Sqoop抽数慢的问题,yarn的ATSv2嵌入式HBASE崩溃引起

新搭建的一个Hadoop环境&#xff0c;用Sqoop批量抽数的时候发现特别慢&#xff0c;我们正常情况下是一个表一分钟左右&#xff0c;批量抽十几个表&#xff0c;也就是10分钟的样子&#xff0c;结果发现用了2个小时&#xff1a; 查看yarn日志 发现有如下情况&#xff1a; 主要有两…

【java安全】原生反序列化利用链JDK7u21

文章目录 【java安全】原生反序列化利用链JDK7u21前言原理equalsImpl()如何调用equalsImpl()&#xff1f;HashSet通过反序列化间接执行equals()方法如何使hash相等&#xff1f; 思路整理POCGadget为什么在HashSet#add()前要将HashMap的value设为其他值&#xff1f; 【java安全】…