探索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 pd

data = {'姓名': ['张三', '李四', '王五'],
        '年龄': [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 np

x = 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应用程序中的展示内容方面有所帮助!
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java序列化框架全集讲解

一、简介 Java序列化框架是一种用于在Java应用程序中将对象转换为字节流或从字节流反序列化为对象的工具。序列化是将对象的状态转换为字节流的过程&#xff0c;以便可以将其存储在文件中、通过网络传输或在不同的系统之间共享。反序列化是将字节流转换回对象的过程。 Java序列…

【黑马头条之kafka及异步通知文章上下架】

本笔记内容为黑马头条项目的kafka及异步通知文章上下架部分 目录 一、kafka概述 二、kafka安装配置 三、kafka入门 四、kafka高可用设计 1、集群 2、备份机制(Replication&#xff09; 五、kafka生产者详解 1、发送类型 2、参数详解 六、kafka消费者详解 1、消费者…

Django实现音乐网站 ⑹

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是在添加编辑过程中对后台歌手功能优化及表模型名称修改、模型继承内容。 目录 表模型名称修改 模型继承 创建抽象基类 其他模型继承 更新表结构 歌手新增、编辑优化 表字段名称修改 隐藏单曲数和专辑数 姓…

复制带随机指针的链表【构造链表深拷贝】

复制带随机指针的链表 文章目录 复制带随机指针的链表 链表复制要求 解题思路 1、拷贝所有节点&#xff0c;并放在对应原节点的后面 2.将每个 random 指向对应的位置。 3.将复制的链表解下来&#xff0c;尾插到一起&#xff0c;并将原链表恢复 源码 先导知识点&#…

C语言手撕单链表

一、链表的概念 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;也就是内存存储不是像顺序表那么连续存储&#xff0c;而是以结点的形式一块一块存储在堆上的&#xff08;用动态内存开辟&#xff09;。 既然在内存上不是连续存储&#xff0c;那我们如何将这一…

第28天-Kubernetes架构,集群部署,Ingress,项目部署,Dashboard

1.K8S集群部署 1.1.k8s快速入门 1.1.1.简介 Kubernetes简称k8s&#xff0c;是用于自动部署&#xff0c;扩展和管理容器化应用程序的开源系统。 中文官网&#xff1a;https://kubernetes.io/zh/中文社区&#xff1a;https://www.kubernetes.org.cn/官方文档&#xff1a;https…

保护模式中段选择子权限校验逻辑详解

保护模式中段选择子权限校验逻辑详解 CPLRPLDPL权限校验逻辑测试 CPL CPL是当前进程的权限级别(Current Privilege Level)&#xff0c;是当前正在执行的代码所在的段的特权级&#xff0c;存在于cs段选择子的后两位的低两位。 段选择子可见部分的数据结构如下&#xff1a; 举例…

基于SpringBoot+Vue的漫画网站设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

智能指针shared_ptr:自定义删除器

重点&#xff1a; 1.普通指针转化成智能指针。 2.智能指针创建的时候&#xff0c;第二个参数是自定义删除器&#xff0c;默认情况下&#xff0c;shared_ptr调用delete()函数。 class A { public:void Get() { cout << b << endl; }; private:int b{ 10 }; };clas…

在排序数组中查找元素的第一个和最后一个位置——力扣34

文章目录 题目描述法一 二分查找 题目描述 法一 二分查找 int bsearch_1(int l, int r) {while (l < r){int mid (l r)/2;if (check(mid)) r mid;else l mid 1;}return l; }int bsearch_2(int l, int r) {while (l < r){int mid ( l r 1 ) /2;if (check(mid)) l …

MobPush iOS SDK iOS实时活动

开发工具&#xff1a;Xcode 功能需要: SwiftUI实现UI页面&#xff0c;iOS16.1以上系统使用 功能使用: 需应用为启动状态 功能说明 iOS16.1 系统支持实时活动功能&#xff0c;可以在锁定屏幕上实时获知各种事情的进展&#xff0c;MobPushSDK iOS 4.0.3版本已完成适配&#xf…

序列建模简史(DIN/DIEN/DSIN/BST/MIMN/SIM/ETA/SDIM/TWIN)

序列建模简史(DIN/DIEN/DSIN/BST/MIMN/SIM/ETA/SDIM/TWIN) 史前史 在用户序列专门用于建模之前&#xff0c;一般对序列的建模的处理就是将所有序列行为进行sum/avg pooling操作&#xff0c;将用户的多个序列行为简单聚合成一个Embedding&#xff0c;然后和其他特征一起拼接。…

ansible-playbook roles模块编写lnmp剧本

目录 一&#xff1a;集中式编写lnmp剧本 二&#xff1a;分布式安装lnmp 1、nginx 配置 2、mysql配置 3、php配置 4、运行剧本 一&#xff1a;集中式编写lnmp剧本 vim /etc/ansible/lnmp.yml- name: lnmp playhosts: dbserversremote_user: roottasks:- name: perpare condif…

谷歌云 | 电子商务 | 如何更好地管理客户身份以支持最佳的用户体验

【本文由Cloud Ace整理发布。Cloud Ace是谷歌云全球战略合作伙伴&#xff0c;拥有 300 多名工程师&#xff0c;也是谷歌最高级别合作伙伴&#xff0c;多次获得 Google Cloud 合作伙伴奖。作为谷歌托管服务商&#xff0c;我们提供谷歌云、谷歌地图、谷歌办公套件、谷歌云认证培训…

嵌入式开发学习(STC51-10-直流电机)

内容 直流电机工作约5S后停止 直流电机简介 直流电机是指能将直流电能转换成机械能&#xff08;直流电动机&#xff09;或将机械能转换成直流电能&#xff08;直流发电机&#xff09;的旋转电机&#xff1b; 直流电机的结构应由定子和转子两大部分组成&#xff1b; 直流电…

k8s概念-pv和pvc

回到目录 kubernetes存储卷的分类太丰富了,每种类型都要写相应的接口与参数才行&#xff0c;这就让维护与管理难度加大。 persistenvolume(PV) 是配置好的一段存储(可以是任意类型的存储卷) 也就是说将网络存储共享出来,配置定义成PV。 PersistentVolumeClaim(PVC)是用户pod使…

麦肯锡战略思维四大原则

麦肯锡战略思维四大原则 曾任职麦肯锡、安永等国家国际知名咨询机构的周正元&#xff0c;在其著作《麦肯锡结构化战略思维》将其系统的整理呈现出来&#xff0c;便于学习和使用。 模型介绍 工作中的你&#xff0c;是不是经常遇到复杂问题&#xff0c;六神无主&#xff1f; 专业…

【树形DP+换根思想】2022牛客多校加赛 H

登录—专业IT笔试面试备考平台_牛客网 题意&#xff1a; 思路&#xff1a; 这个虽然是树形DP&#xff0c;却用了换根的思想.... 首先&#xff0c;后缀0的个数可以转化成min(cnt2,cnt5)&#xff0c;其中cnt2为2的因子个数&#xff0c;cnt5为5的因子个数 然后进行DP 设dp[u]…

openGauss学习笔记-31 openGauss 高级数据管理-索引

文章目录 openGauss学习笔记-31 openGauss 高级数据管理-索引31.1 语法格式31.2 参数说明31.3 示例 openGauss学习笔记-31 openGauss 高级数据管理-索引 索引是一个指向表中数据的指针。一个数据库中的索引与一本书的索引目录是非常相似的。 索引可以用来提高数据库查询性能&…

解决:树莓派VNC连接屏幕显示不全

目录 前导&#xff1a;我在重新烧录玩树莓派系统&#xff0c;开启完VNC并连接后&#xff0c;发现我的树莓派远程桌面屏幕显示不全&#xff0c;看着很难受&#xff01; PS&#xff1a;开启VNC服务的过程 问题如下现象&#xff1a; 问题分析&#xff1a;当树莓派通过VNC连接时&…