『玩转Streamlit』--图像与媒体组件
Streamlit中的图像与媒体组件,主要是st.image、st.audio和st.video。
它们是专为在Streamlit Web应用程序中嵌入和展示多媒体内容而设计的,这些组件不仅丰富了应用程序的呈现形式,还极大地提升了用户体验和互动性。
1. st.image
st.image函数用于在Streamlit应用程序中展示图像内容,增强视觉呈现效果。
比如,在数据可视化的场景中,通过st.image展示数据分析结果,如柱状图、折线图等;
在项目展示时,也可以通过在项目中嵌入产品图片、示意图等,提升用户理解。
它的主要参数有:
| 名称 | 类型 | 说明 |
|---|---|---|
| image | numpy.ndarray / [numpy.ndarray] / BytesIO / str / [str] | 要显示的图像,也可以指定一个图像URL或URL列表 |
| caption | str/[str] | 图像标题,如果显示多幅图像,应当是字符串列表 |
| width | int / None | 图像宽度,None表示使用图像自身宽度 |
| clamp | bool | 是否将图像的像素值压缩到有效域(0~255),仅对字节数组图像有效 |
| channels | "RGB" / "BGR" | 图像通道类型 |
| output_format | "JPEG" / "PNG" / "auto" | 图像格式 |
| use_container_width | bool | 如果设置为True,则使用列宽作为图像宽度 |
1.1. 使用示例
展示本地图像文件,通过image参数接受PIL图像对象,caption参数为图像添加标题,
width参数设置了图像的显示宽度。
import streamlit as st
from PIL import Image
# 读取本地图像文件
image = Image.open("path/to/your/image.jpg")
# 使用st.image展示图像,并设置标题和宽度
st.image(image, caption="这是一张本地图片", width=300)

展示URL图像,并使用use_column_width参数使图像宽度自适应Streamlit列的宽度。
# 图像URL
image_url = "http://xxx.com/xxx.jpeg"
# 使用st.image展示URL图像,并设置使用列宽
st.image(
image_url,
use_column_width=True,
caption="这是一张网络图片",
)

图片的宽度会随着浏览器窗口的大小自适应变化。
2. st.audio
st.audio函数用于在Streamlit应用程序中嵌入音频内容,为数据分析结果添加声音效果,增强表现力。
它的主要参数有:
| 名称 | 类型 | 说明 |
|---|---|---|
| data | str / bytes / BytesIO / numpy.ndarray / file | 要播放的音频数据,可以是字节码流、numpy.ndarray或打开的文件 |
| format | str | 音频文件的MIME类型,如'audio/ogg'、'audio/mp3'等 |
| start_time | int / float / timedelta / str / None | 指定音频播放的起始时间 |
| sample_rate | int / None | 音频的采样率,播放音频时,通常不需要直接设置这个参数 |
| end_time | int / float / timedelta / str / None | 指定音频播放的结束时间 |
| loop | bool | 是否循环播放音频 |
| autoplay | bool | 是否自动播放音频 |
2.1. 使用示例
播放本地音频文件,autoplay参数设置为True,使音频自动播放。
import streamlit as st
# 打开本地音频文件
audio_file = open("path/to/your/audio.mp3", "rb")
audio_bytes = audio_file.read()
# 使用st.audio播放音频,并自动播放
st.audio(
audio_bytes,
format="audio/mp3",
autoplay=True,
)

运行之后会自动播放。
和st.image一样,音频也可以传入URL,直接播放在线的音频。
3. st.video
st.video函数用于在Streamlit应用程序中嵌入视频内容,通过视频展示分析结果的特点或分析过程。
它的主要参数有:
| 名称 | 类型 | 说明 |
|---|---|---|
| data | str / bytes / BytesIO / numpy.ndarray / file | 要播放的视频数据,可以是URL字符串、字节码流、numpy.ndarray或打开的文件 |
| format | str | 视频文件的MIME类型,如'video/mp4',默认值为'video/mp4' |
| start_time | int / float / timedelta / str / None | 视频开始播放的时间 |
| subtitles | str / bytes / Path / io.BytesIO / dict | 视频字幕数据 |
| end_time | int / float / timedelta / str / None | 视频结束播放的时间 |
| loop | bool | 是否循环播放视频 |
| autoplay | bool | 是否自动播放视频 |
| muted | bool | 是否静音播放 |
3.1. 使用示例
播放本地视频文件, 通过start_time和end_time参数设置了视频播放开始和结束的时间(秒)。
import streamlit as st
# 打开本地视频文件
video_file = open('path/to/your/video.mp4', 'rb')
video_bytes = video_file.read()
# 使用st.video播放视频,并设置标题和开始时间
st.video(
video_bytes,
format="video/mp4",
start_time=5,
end_time=10,
)
运行之后,视频加载后停在5s的位置,点击播放,播放到10s时自动停止。

4. 总结
总之,st.image、st.audio和st.video这三个组件共同构成了Streamlit中强大的多媒体展示工具集。
它们各自专注于图像、音频和视频的展示与播放,通过丰富的参数设置和灵活的嵌入方式,为开发者提供了极大的便利和创意空间。
无论是构建数据可视化应用、产品展示页面还是在线教育平台,这些组件都能帮助开发者轻松实现多媒体内容的嵌入与呈现。
『玩转Streamlit』--图像与媒体组件的更多相关文章
- Github 恶搞教程(一起『玩坏』自己的 Github 吧)
最近在伯乐在线读到一篇趣文,<如何在 Github『正确』做贡献>,里面各种能人恶搞 Github 的『Public contributions』,下面截取几个小伙伴的战绩: 顺藤摸瓜,发 ...
- 2018-2019-2 20165316 『网络对抗技术』Exp3:免杀原理与实践
2018-2019-2 20165316 『网络对抗技术』Exp3:免杀原理与实践 一 免杀原理与实践说明 (一).实验说明 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件, ...
- js实现『加载更多』功能实例
DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS:让自己的控件动起来
代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...
- 2018-2019-2 20165221『网络对抗技术』Exp4:恶意代码分析
2018-2019-2 20165221『网络对抗技术』Exp4:恶意代码分析 实验要求: 是监控你自己系统的运行状态,看有没有可疑的程序在运行. 是分析一个恶意软件,就分析Exp2或Exp3中生成后 ...
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌图片:自己的图片控件
代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...
- 『Asp.Net 组件』Asp.Net 服务器组件 的开发优势和劣势
在写<Asp.Net 服务器组件系列文档>之前,笔者不才,揣测微软战略用意: 微软利益诉求莫过于 微软产品和技术的市场份额: 因此,微软战略之一莫过于将 所有开发人员 团聚在 微软周围,以 ...
- 2017-2018-2 20155303『网络对抗技术』Exp6:信息收集与漏洞扫描
2017-2018-2 20155303『网络对抗技术』 Exp6:信息收集与漏洞扫描 --------CONTENTS-------- 一.原理与实践说明 1.实践内容 2.基础问题 二.实践过程记 ...
- 2018-2019-2 20165225『网络对抗技术』Exp2:后门原理与实践
2018-2019-2 20165225『网络对抗技术』Exp2:后门原理与实践 一.实验说明 任务一:使用netcat获取主机操作Shell,cron启动 (0.5分) 任务二:使用socat获取主 ...
- 20165308『网络对抗技术』Exp5 MSF基础应用
20165308『网络对抗技术』Exp5 MSF基础应用 一.原理与实践说明 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实 ...
随机推荐
- freertos学习笔记(十一)直接任务通知
直接任务通知 起源 队列和信号量是实时操作系统的典型功能,而FreeRTOS提供的直接任务通知比队列和信号量更小且速度更快(快45%) 开发人员应优先使用量身定制的功能:直接任务通知.消息缓冲区和流缓 ...
- 一文搞懂 == 、equals和hashCode
面试的时候,经常会被问到==和equals()的区别是什么?以及我们也知道重写equals()时候必须重新hashCode().这是为什么?既然有了hashCode()方法了,JDK又为什么要提供eq ...
- “java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/LoopTag”解决方法
在运行jsp项目的时候出现了这个java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/LoopTag报错,一直尝试更换jar文件等也没 ...
- SPSS25.0中文破解版安装教程及使用教程
目录 第一步,下载链接: 下载并解压,管理员身份运行SPSS 25 64bit.exe: 第二步,安装过程一路默认,安装路径可以改变,然后等待安装完成即可: 第三步,安装完成后,立即启动SPPS; 第 ...
- 《SpringBoot事务》单机mybatis事务控制
一.场景再现 我们同时操作两张表及以上,一张表操作成功后,第二张表操作失败,此时需要回滚上一次的操作. 或者两次操作都成功,但后续业务处理的时候异常,此时需要回滚前面的所有数据库操作. 二.代码 1 ...
- 支付宝小程序swiper video的坑
在使用uniapp 开发多端应用的时候,踩了一个坑,有一个页面,是使用swiper作为滑动容器,然后每个swiper-item 嵌套不同的内容, 代码示意: <template> < ...
- 手写一个Promise.all
Promise.all 特性: 1. 按顺序返回结果数组; 2. 当所有promise完成才返回; 3. 返回第一个报错的promise的信息; 直接上代码: Promise._all = funct ...
- 八字测算引流seo程序php网页版黄历/排盘/抽签/星座/生肖/解梦整站程序分享
2演示站: https://s31.yczfcn.com/ 2源码说明: 1.手机端和PC端共两套模板,手机端访问时候自动跳转至手机端模板和域名. 2.本程序包含文章系统,结合自身的免费测算功能,适合 ...
- iOS中UIlabel多行文本展示使用小结
最近在项目开发中遇到了一个新的需求,就是菜单标题最多两行展示,一行展示的标签顶部和两行展示的标签顶部对齐.看到要求后,第一反应是这是什么奇葩的设计,但是没办法谁让别人是产品经理呢.细细思索后,代码如下 ...
- 在Vue3中如何实现四种全局状态数据的统一管理?
四种全局状态数据 在实际开发当中,会遇到四种全局状态数据:异步数据(一般来自服务端).同步数据.同步数据又分为三种:localstorage.cookie.内存.在传统的 Vue3 当中,分别采用不同 ...