Media elements

将图像、视频和音频文件直接嵌入到您的Streamlit应用程序中非常容易。

screenshot

图像

显示一张图片或图片列表。

st.image(numpy_array) st.image(image_bytes) st.image(file) st.image("https://example.com/myimage.jpg")
screenshot

标志

在应用程序及其侧边栏的左上角显示一个徽标。

st.logo("logo.jpg")
screenshot

音频

显示一个音频播放器。

st.audio(numpy_array) st.audio(audio_bytes) st.audio(file) st.audio("https://example.com/myaudio.mp3", format="audio/mp3")
screenshot

视频

显示一个视频播放器。

st.video(numpy_array) st.video(video_bytes) st.video(file) st.video("https://example.com/myvideo.mp4", format="video/mp4")

第三方组件

这些是由我们可爱的社区创建的精选组件。更多示例和灵感,请查看我们的 组件库 Streamlit 扩展

screenshot

Streamlit Webrtc

使用Streamlit处理和传输实时视频/音频流。由@whitphx创建。

from streamlit_webrtc import webrtc_streamer webrtc_streamer(key="sample")
screenshot

可绘制画布

提供一个使用Fabric.js的绘图画布。由@andfanilo创建。

from streamlit_drawable_canvas import st_canvas st_canvas(fill_color="rgba(255, 165, 0, 0.3)", stroke_width=stroke_width, stroke_color=stroke_color, background_color=bg_color, background_image=Image.open(bg_image) if bg_image else None, update_streamlit=realtime_update, height=150, drawing_mode=drawing_mode, point_display_radius=point_display_radius if drawing_mode == 'point' else 0, key="canvas",)
screenshot

图像比较

使用JuxtaposeJS通过滑块比较图像。由@fcakyon创建。

from streamlit_image_comparison import image_comparison image_comparison(img1="image1.jpg", img2="image2.jpg",)
forum

还有问题吗?

我们的 论坛 充满了有用的信息和Streamlit专家。