Streamlit中的图像与媒体组件,主要是st.imagest.audiost.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_timeend_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.imagest.audiost.video这三个组件共同构成了Streamlit中强大的多媒体展示工具集。

它们各自专注于图像、音频和视频的展示与播放,通过丰富的参数设置和灵活的嵌入方式,为开发者提供了极大的便利和创意空间。

无论是构建数据可视化应用、产品展示页面还是在线教育平台,这些组件都能帮助开发者轻松实现多媒体内容的嵌入与呈现。

『玩转Streamlit』--图像与媒体组件的更多相关文章

  1. Github 恶搞教程(一起『玩坏』自己的 Github 吧)

    最近在伯乐在线读到一篇趣文,<如何在 Github『正确』做贡献>,里面各种能人恶搞 Github 的『Public contributions』,下面截取几个小伙伴的战绩: 顺藤摸瓜,发 ...

  2. 2018-2019-2 20165316 『网络对抗技术』Exp3:免杀原理与实践

    2018-2019-2 20165316 『网络对抗技术』Exp3:免杀原理与实践 一 免杀原理与实践说明 (一).实验说明 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件, ...

  3. js实现『加载更多』功能实例

    DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...

  4. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS:让自己的控件动起来

    代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...

  5. 2018-2019-2 20165221『网络对抗技术』Exp4:恶意代码分析

    2018-2019-2 20165221『网络对抗技术』Exp4:恶意代码分析 实验要求: 是监控你自己系统的运行状态,看有没有可疑的程序在运行. 是分析一个恶意软件,就分析Exp2或Exp3中生成后 ...

  6. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌图片:自己的图片控件

    代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...

  7. 『Asp.Net 组件』Asp.Net 服务器组件 的开发优势和劣势

    在写<Asp.Net 服务器组件系列文档>之前,笔者不才,揣测微软战略用意: 微软利益诉求莫过于 微软产品和技术的市场份额: 因此,微软战略之一莫过于将 所有开发人员 团聚在 微软周围,以 ...

  8. 2017-2018-2 20155303『网络对抗技术』Exp6:信息收集与漏洞扫描

    2017-2018-2 20155303『网络对抗技术』 Exp6:信息收集与漏洞扫描 --------CONTENTS-------- 一.原理与实践说明 1.实践内容 2.基础问题 二.实践过程记 ...

  9. 2018-2019-2 20165225『网络对抗技术』Exp2:后门原理与实践

    2018-2019-2 20165225『网络对抗技术』Exp2:后门原理与实践 一.实验说明 任务一:使用netcat获取主机操作Shell,cron启动 (0.5分) 任务二:使用socat获取主 ...

  10. 20165308『网络对抗技术』Exp5 MSF基础应用

    20165308『网络对抗技术』Exp5 MSF基础应用 一.原理与实践说明 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实 ...

随机推荐

  1. C++性能优化——能用array就不要用unordered_map作为查询表

    unordered_map需要哈希值计算和表查询的开销,当key值为整数且连续,直接用数组作为查询表具有更高的效率. #include <iostream> #include <ch ...

  2. k8s 中的 Service 简介【k8s 系列之二】

    〇.前言 k8s 集群中的每一个 Pod 都有自己的 IP 地址,那么是不是有 IP 了,访问起来就简单了呢,其实不然. 因为在 k8s 中 Pod 不是持久性的,摧毁重建将获得新的 IP,客户端通过 ...

  3. Angular 18+ 高级教程 – Change Detection & Ivy rendering engine

    前言 不熟悉 Angular 的朋友可能不了解 Change Detection 和目前当火的 Signal 之间的关系,以至于认为现在应该要学习新潮流 Signal 而不是已经过时的 Change ...

  4. SQL Server 冗余维护

    介绍 冗余是维护的魔鬼, 是性能优化的天使 常见的冗余有 1. computed column 2. principal 的识别字段 3. cross computed 4. cascade soft ...

  5. ScanFormer:逐层抵达目标,基于特征金字塔的指代表达理解框架 | CVPR'24

    指代表达理解(REC)旨在在图像中定位由自由形式自然语言描述指定的目标对象.尽管最先进的方法取得了令人印象深刻的性能,但它们对图像进行了密集感知,包含与语言查询无关的多余视觉区域,导致额外的计算开销. ...

  6. kali系统安装和CVE-2017-12615测试

    1 安装kali系统 1.1 下载VMware压缩包 kali-linux-2022.1 默认的用户和密码是kali 1.2 初始化系统 sudo apt update -y #kali sudo a ...

  7. JS时间对象与字符串相互转换

    1.Date => String 代码 /** * 函数描述:时间格式化工具 * @param format {String} 格式(y-年,M-月,d-日,H-时[24],h-时[12],m- ...

  8. Nuxt.js 应用中的 app:redirected 钩子详解

    title: Nuxt.js 应用中的 app:redirected 钩子详解 date: 2024/10/3 updated: 2024/10/3 author: cmdragon excerpt: ...

  9. 从SQL Server过渡到PostgreSQL:理解模式的差异

    从SQL Server过渡到PostgreSQL:理解模式的差异 前言 随着越来越多的企业转向开源技术,商业数据库管理员和开发者也逐渐面临向PostgreSQL迁移的需求. 虽然SQL Server和 ...

  10. composer 执行脚本时报错:Error: You made a reference to a non-existent script @php artisan package:discover

    composer 执行脚本时报错:Error: You made a reference to a non-existent script @php artisan package:discover. ...