当前位置: 首页 > news >正文

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

相关文章:

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

文章目录 1 前言2 显示HTML的内容3 显示Markdown内容4 显示代码块5 显示DataFrame的交互式表格6 显示音频和视频7 显示图表8 显示图片9 显示地图10 显示PDF文件11 显示文件下载链接12 结语 1 前言 在这篇博文中&#xff0c;我们将着重介绍Streamlit中一个核心而重要的函数&…...

LinAlgError: Singular matrix 问题解决

错误log&#xff1a; c:\Program Files\Python39\lib\site-packages\numpy\linalg\linalg.py in inv(a)543 signature D->D if isComplexType(t) else d->d544 extobj get_linalg_error_extobj(_raise_linalgerror_singular) --> 545 ainv _umath_lin…...

【ASP.NET MVC】使用动软(五)(13)

一、问题 前文完成的用户登录后的首页如下&#xff1a; 后续账单管理、人员管理等功能页面都有相同的头部&#xff0c;左边和下边&#xff0c;唯一不同的右边内容部分&#xff0c;所以要解决重复设计的问题。 二、解决方法——使用布局页 在Views上右键添加新建项&#xff…...

MongoDB面试题

1. NoSQL 数据库是什么意思?NoSQL 与 RDBMS 直接有什么区别?为什么要使用和不使用 NoSQL 数据库?说一说 NoSQL 数据库的几个优点? NoSQL 是非关系型数据库&#xff0c;NoSQL Not Only SQL。 关系型数据库采用的结构化的数据&#xff0c;NoSQL 采用的是键值对的方式存储数…...

Python Web 开发 Flask 介绍

WEB开发是现在程序必会的技能&#xff0c;因为大部分软件都以Web形式提供&#xff0c;及时制作后台开发&#xff0c;或者只做前台开发&#xff0c;也需要了解Web开发的概念和特点。由于Python是解释性脚本语言&#xff0c;用来做Web开发非常适合&#xff0c;而且Python有上百种…...

本地mvn仓库清理无用jar包

背景 开发java时间久了&#xff0c;本地的m2仓库就会产生很多过期的jar包&#xff0c;不清理的话比较占空间。 原理 是通过比较同一目录下&#xff0c;对应jar包的版本号的大小&#xff0c;保留最大版本号那个&#xff0c;删除其他的。 脚本 执行脚本见文章顶部 执行方式 …...

MySQL的常用函数大全

一、字符串函数 常用函数&#xff1a; 函数功能CONCAT(s1, s2, …, sn)字符串拼接&#xff0c;将s1, s2, …, sn拼接成一个字符串LOWER(str)将字符串全部转为小写UPPER(str)将字符串全部转为大写LPAD(str, n, pad)左填充&#xff0c;用字符串pad对str的左边进行填充&#xff0…...

一百四十三、Linux——Linux的CentOS 7系统语言由中文改成英文

一、目的 之前安装CentOS 7系统的时候把语言设置成中文&#xff0c;结果Linux文件夹命名出现中文乱码的问题&#xff0c;于是决定把Linux系统语言由中文改成英文 二、实施步骤 &#xff08;一&#xff09;到etc目录下&#xff0c;找到配置文件locale.conf # cd /etc/ # ls…...

一 关于idea如何在svn进行项目下载并运行成功

安装svn客户端 如图 安装时请选择该选项&#xff08;Will be installed on local hard drive&#xff09;并选择自己想要安装的目录路径 如图 svn安装成功 如图 注意 安装完成后&#xff0c;使用svn进行一次checkout的项目导出完成以上五步时&…...

python使用selenium 打开谷歌浏览器闪退, 怎么解决

问题描述&#xff1a; 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 使用 Selenium 操作 Chrome 浏览器&#xff0c; Chrome 浏览器闪退 问题解决&#xff1a; 可能是以下几个方面出现了问题&#xff1a; 1. Chromedriver 版本与 Chrome 浏览器版本不匹配 你需要确保你正在…...

.net 6 efcore一个model映射到多张表(非使用IEntityTypeConfiguration)

现在有两张表&#xff0c;结构一模一样&#xff0c;我又不想创建两个一模一样的model&#xff0c;就想一个model映射到两张表 废话不多说直接上代码 安装依赖包 创建model namespace oneModelMultiTable.Model {public class Test{public int id { get; set; }public string…...

CISCO MDS 9148 SAN Switch 交换机命令配置方法:

前言 CISCO MDS 9148 SAN 交换机已经停产&#xff0c;但还是要掌握一下配置的方法&#xff1a; 升级款后面 9148S 或者 9100系列&#xff0c;但配置方式基本都差不多&#xff0c;掌握一个就好&#xff1a; 高性能和极具吸引力的价值 Cisco MDS 9148S 16G 多层光纤交换机是下…...

图的深度、广度优先探索(数据结构)

深度&#xff1a; #include <stdio.h> #include <stdlib.h> #define MAX 20typedef struct ANode {int adjver,len;struct ANode*next; } ArcNode;typedef struct VNode {int data;ArcNode*firstarc; } VertexNode;typedef struct {VertexNode vers[MAX1];int ver…...

c语言小知识点

文章目录 int main()与int main(void)符号常量常变量无符号赋值将占字节多的赋值给字节少的类型赋初值 表达式预处理格式符e格式符 循环for 输入长度相关输出文件管理 int main()与int main(void) int main(void) 指的是此函数的参数为空&#xff0c;不能传入参数&#xff0c;…...

C++ - 模板分离编译

模板分离编译 我们先来看一个问题&#xff0c;我们用 stack 容器的声明定义分离的例子来引出这个问题&#xff1a; // stack.h // stack.h #pragma once #include<deque>namespace My_stack {template<class T, class Container std::deque<T>>class stack…...

如何把非1024的采样数放入aac编码器

一. aac对数据规格要求 二、代码实现 1.初始化 2.填入数据 3.取数据 三.图解 一. aac对放入的采样数要求 我们知道aac每次接受的字节数是固定的&#xff0c;在之前的文章里有介绍libfdk_aac音频采样数和编码字节数注意 它支持的采样数和编码字节数分别是&#xff1a; fdk_aac …...

linux安装nodejs和vue

下载nodejs 打开 下载地址页面中下载**Linux Binaries (x64)**的二进制包设置安装目录 sudo mkdir -p /usr/local/lib/nodejs # 解压 如下载的 node-v18.17.0-linux-x64.tar.xz sudo tar -xJvf node-v18.17.0-linux-x64.tar.xz -C /usr/local/lib/nodejs 加入到PATH #######…...

spring整合mybatis

所需配置&#xff1a; <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><dependency><groupId>m…...

Spring指定bean在哪个应用加载

1.背景 某项目,spring架构,有2个不同的WebAppApplication入口,大部分service类共用,小部分类有区别,只需要在一个应用中加载,不需要在另一个应用中加载. 2.实现代码 自定义限制注解 package mis.shared.annotation;import java.lang.annotation.ElementType; import java.lan…...

二维网格划分 LRU缓存设计

背景 有大量的二维矩形需要存储查看点在哪些矩形中给定一个矩形 查看与哪些矩阵相交项目背景与图形图像基本无关&#xff0c;只涉及大文件分块读取&#xff0c;所以不用实现游戏行业中的物理引擎 设计思路 使用空间划分算法&#xff1a;二维栅格将整个空间划分为多个小区域。…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...