/*@jsxRuntime automatic @jsxImportSource react*/ /* screenshot

Image

Display an image or list of images. ```python st.image(numpy_array) st.image(image_bytes) st.image(file) st.image("https://example.com/myimage.jpg") ```

Logo

Display a logo in the upper-left corner of your app and its sidebar. ```python st.logo("logo.jpg") ``` screenshot

PDF

Display a PDF file. ```python st.pdf("my_document.pdf") ``` screenshot

Audio

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

Video

Display a video player. ```python st.video(numpy_array) st.video(video_bytes) st.video(file) st.video("https://example.com/myvideo.mp4", format="video/mp4") ``` */ /* screenshot

Streamlit Webrtc

Handling and transmitting real-time video/audio streams with Streamlit. Created by [@whitphx](https://github.com/whitphx). ```python from streamlit_webrtc import webrtc_streamer webrtc_streamer(key="sample") ``` screenshot

Drawable Canvas

Provides a sketching canvas using [Fabric.js](http://fabricjs.com/). Created by [@andfanilo](https://github.com/andfanilo). ```python 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

Image Comparison

Compare images with a slider using [JuxtaposeJS](https://juxtapose.knightlab.com/). Created by [@fcakyon](https://github.com/fcakyon). ```python from streamlit_image_comparison import image_comparison image_comparison(img1="image1.jpg", img2="image2.jpg",) ``` screenshot

Streamlit Cropper

A simple image cropper for Streamlit. Created by [@turner-anderson](https://github.com/turner-anderson). ```python from streamlit_cropper import st_cropper st_cropper(img, realtime_update=realtime_update, box_color=box_color, aspect_ratio=aspect_ratio) ``` screenshot

Image Coordinates

Get the coordinates of clicks on an image. Created by [@blackary](https://github.com/blackary/). ```python from streamlit_image_coordinates import streamlit_image_coordinates streamlit_image_coordinates("https://placekitten.com/200/300") ``` screenshot

Streamlit Lottie

Integrate [Lottie](https://lottiefiles.com/) animations inside your Streamlit app. Created by [@andfanilo](https://github.com/andfanilo). ```python lottie_hello = load_lottieurl("https://assets5.lottiefiles.com/packages/lf20_V9t630.json") st_lottie(lottie_hello, key="hello") ``` */ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h1: "h1", a: "a", span: "span", p: "p", em: "em", strong: "strong" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "media-elements", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#media-elements", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Media elements"] }), "\n", _jsx(_components.p, { children: "It's easy to embed images, videos, and audio files directly into your Jeamlit apps." }), "\n", _jsx(_components.p, { children: _jsx(_components.em, { children: _jsx(_components.strong, { children: "Coming soon." }) }) }), "\n", "\n"] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

Media elements

Still have questions?