Streamlit 101 (9 Part Series)

1 Streamlit Part 1: Write and Text Elements
2 Streamlit Part 2: Mastering Data Elements for Interactive Dashboards
… 5 more parts…
3 Streamlit Part 3: Mastering Input Widgets
4 Streamlit Part 4: Mastering Media Elements – Logos, Images, Videos, and Audio
5 Streamlit Part 5: Mastering Data Visualization and Chart Types
6 Streamlit Part 6: Mastering Layouts
7 Streamlit Part 7: Build a Chat Interface
8 Streamlit Part 8: Status Elements
9 Streamlit Part 10: Page Navigation Simplified

Streamlit Part 4: Mastering Media Elements – Logos, Images, Videos, and Audio

Welcome back to our tutorial series on Streamlit! In this fifth installment, we dive into the exciting realm of media elements, focusing on how to integrate logos, images, videos, and audio into your Streamlit applications with ease.

Introduction

As we continue our journey through Streamlit’s capabilities, it’s time to elevate the visual and auditory experience of your apps. In this tutorial, we’ll start with logos and work our way through images, videos, and audio. By mastering these elements, you can create a more engaging and interactive interface for your users, making your Streamlit applications stand out.

Working with Logos

Logos serve as a visual anchor on your page, offering a quick and easy way to brand your app. Streamlit makes it simple to display logos with an effortless setup. Let’s start by adding a logo to our app:

<span>import</span> <span>streamlit</span> <span>as</span> <span>st</span>
<span>st</span><span>.</span><span>image</span><span>(</span><span>"</span><span><https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg></span><span>"</span><span>,</span>
         <span>width</span><span>=</span><span>200</span><span>,</span>
         <span>caption</span><span>=</span><span>"</span><span>YouTube Logo</span><span>"</span><span>)</span>
<span>import</span> <span>streamlit</span> <span>as</span> <span>st</span>

<span>st</span><span>.</span><span>image</span><span>(</span><span>"</span><span><https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg></span><span>"</span><span>,</span>
         <span>width</span><span>=</span><span>200</span><span>,</span>
         <span>caption</span><span>=</span><span>"</span><span>YouTube Logo</span><span>"</span><span>)</span>
import streamlit as st

st.image("<https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg>",
         width=200,
         caption="YouTube Logo")

Enter fullscreen mode Exit fullscreen mode

In this example, we’ve used the YouTube logo to illustrate how easy it is to embed logos. You can replace the URL with any logo of your choice. The width parameter allows you to control the size of the logo, while the caption adds a description below it.

To make your logo clickable, you can wrap it in a Markdown link:

<span>st</span><span>.</span><span>markdown</span><span>(</span><span>"""</span><span> [![YouTube Logo](<https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg>)](<https://www.youtube.com>) </span><span>"""</span><span>)</span>
<span>st</span><span>.</span><span>markdown</span><span>(</span><span>"""</span><span> [![YouTube Logo](<https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg>)](<https://www.youtube.com>) </span><span>"""</span><span>)</span>
st.markdown(""" [![YouTube Logo](<https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg>)](<https://www.youtube.com>) """)

Enter fullscreen mode Exit fullscreen mode

This code creates a clickable logo that directs users to YouTube when clicked.

Displaying Images

Images are not only aesthetic enhancements but can also provide informative visuals to your applications. In Streamlit, image elements work similarly to logos with some extended capabilities. Let’s add a scenic image to our app:

<span>st</span><span>.</span><span>image</span><span>(</span><span>"</span><span><https://images.unsplash.com/photo-1464822759023-fed622ff2c3b></span><span>"</span><span>,</span>
         <span>caption</span><span>=</span><span>"</span><span>Scenic mountain landscape</span><span>"</span><span>,</span>
         <span>use_column_width</span><span>=</span><span>True</span><span>)</span>
<span>st</span><span>.</span><span>image</span><span>(</span><span>"</span><span><https://images.unsplash.com/photo-1464822759023-fed622ff2c3b></span><span>"</span><span>,</span>
         <span>caption</span><span>=</span><span>"</span><span>Scenic mountain landscape</span><span>"</span><span>,</span>
         <span>use_column_width</span><span>=</span><span>True</span><span>)</span>
st.image("<https://images.unsplash.com/photo-1464822759023-fed622ff2c3b>",
         caption="Scenic mountain landscape",
         use_column_width=True)

Enter fullscreen mode Exit fullscreen mode

The use_column_width=True parameter ensures that the image fits the width of its container, which is useful for responsive layouts. You can also specify a custom width if needed.

For multiple images, you can use columns:

<span>col1</span><span>,</span> <span>col2</span> <span>=</span> <span>st</span><span>.</span><span>columns</span><span>(</span><span>2</span><span>)</span>
<span>with</span> <span>col1</span><span>:</span>
    <span>st</span><span>.</span><span>image</span><span>(</span><span>"</span><span>image1.jpg</span><span>"</span><span>,</span> <span>caption</span><span>=</span><span>"</span><span>Image 1</span><span>"</span><span>)</span>
<span>with</span> <span>col2</span><span>:</span>
    <span>st</span><span>.</span><span>image</span><span>(</span><span>"</span><span>image2.jpg</span><span>"</span><span>,</span> <span>caption</span><span>=</span><span>"</span><span>Image 2</span><span>"</span><span>)</span>
<span>col1</span><span>,</span> <span>col2</span> <span>=</span> <span>st</span><span>.</span><span>columns</span><span>(</span><span>2</span><span>)</span>
<span>with</span> <span>col1</span><span>:</span>
    <span>st</span><span>.</span><span>image</span><span>(</span><span>"</span><span>image1.jpg</span><span>"</span><span>,</span> <span>caption</span><span>=</span><span>"</span><span>Image 1</span><span>"</span><span>)</span>
<span>with</span> <span>col2</span><span>:</span>
    <span>st</span><span>.</span><span>image</span><span>(</span><span>"</span><span>image2.jpg</span><span>"</span><span>,</span> <span>caption</span><span>=</span><span>"</span><span>Image 2</span><span>"</span><span>)</span>
col1, col2 = st.columns(2)
with col1:
    st.image("image1.jpg", caption="Image 1")
with col2:
    st.image("image2.jpg", caption="Image 2")

Enter fullscreen mode Exit fullscreen mode

This code displays two images side by side, each in its own column.

Embedding Videos

To further expand your application’s capabilities, let’s learn how to embed video content. Streamlit makes it easy to add videos from URLs or local files:

<span>st</span><span>.</span><span>video</span><span>(</span><span>"</span><span><https://www.youtube.com/watch?v=dQw4w9WgXcQ></span><span>"</span><span>,</span> <span>start_time</span><span>=</span><span>3</span><span>)</span>
<span>st</span><span>.</span><span>video</span><span>(</span><span>"</span><span><https://www.youtube.com/watch?v=dQw4w9WgXcQ></span><span>"</span><span>,</span> <span>start_time</span><span>=</span><span>3</span><span>)</span>
st.video("<https://www.youtube.com/watch?v=dQw4w9WgXcQ>", start_time=3)

Enter fullscreen mode Exit fullscreen mode

This code embeds a YouTube video in your app. The start_time parameter sets the video to begin playing at the 3-second mark.

For local video files, you can use:

<span>st</span><span>.</span><span>video</span><span>(</span><span>"</span><span>path/to/your/video.mp4</span><span>"</span><span>)</span>
<span>st</span><span>.</span><span>video</span><span>(</span><span>"</span><span>path/to/your/video.mp4</span><span>"</span><span>)</span>
st.video("path/to/your/video.mp4")

Enter fullscreen mode Exit fullscreen mode

Adding Audio

Rounding out our media journey is audio. Integrating sound into your apps can add layers of interaction and information. Here’s how to add an audio element to your Streamlit app:

<span>st</span><span>.</span><span>audio</span><span>(</span><span>"</span><span><https://upload.wikimedia.org/wikipedia/commons/c/c4/Muriel-Nguyen-Xuan-Chopin-valse-opus64-1.ogg></span><span>"</span><span>,</span>
         <span>format</span><span>=</span><span>'</span><span>audio/ogg</span><span>'</span><span>,</span>
         <span>start_time</span><span>=</span><span>0</span><span>)</span>
<span>st</span><span>.</span><span>audio</span><span>(</span><span>"</span><span><https://upload.wikimedia.org/wikipedia/commons/c/c4/Muriel-Nguyen-Xuan-Chopin-valse-opus64-1.ogg></span><span>"</span><span>,</span>
         <span>format</span><span>=</span><span>'</span><span>audio/ogg</span><span>'</span><span>,</span>
         <span>start_time</span><span>=</span><span>0</span><span>)</span>
st.audio("<https://upload.wikimedia.org/wikipedia/commons/c/c4/Muriel-Nguyen-Xuan-Chopin-valse-opus64-1.ogg>",
         format='audio/ogg',
         start_time=0)

Enter fullscreen mode Exit fullscreen mode

This code adds an audio player to your app. The format parameter specifies the audio format, and start_time determines where the playback begins.

For local audio files:

<span>st</span><span>.</span><span>audio</span><span>(</span><span>"</span><span>path/to/your/audio.mp3</span><span>"</span><span>)</span>
<span>st</span><span>.</span><span>audio</span><span>(</span><span>"</span><span>path/to/your/audio.mp3</span><span>"</span><span>)</span>
st.audio("path/to/your/audio.mp3")

Enter fullscreen mode Exit fullscreen mode

Conclusion and Next Steps

That concludes our discussion on media elements in Streamlit. Armed with the knowledge of integrating logos, images, videos, and audio, your applications can now offer a richer user interaction.

Here’s a quick recap of what we’ve covered:

• Adding and customizing logos
• Displaying and arranging images
• Embedding videos from URLs and local files
• Integrating audio elements

In the upcoming tutorials, we’ll explore more advanced topics and start building interactive applications. We’ll dive deeper into Streamlit’s widgets, state management, and how to create dynamic, data-driven apps.

Whether you’re new to Streamlit or a seasoned developer, incorporating these media elements will undoubtedly enhance your app’s functionality and appeal. Keep practicing and experimenting with these features to fully harness the power of Streamlit in your projects.

Stay tuned for our next installment, where we’ll take your Streamlit skills to the next level. Happy coding, and see you next time!

Get the Code: GitHub – jamesbmour/blog_tutorials
Related Streamlit Tutorials:JustCodeIt
Support my work: Buy Me a Coffee

Streamlit 101 (9 Part Series)

1 Streamlit Part 1: Write and Text Elements
2 Streamlit Part 2: Mastering Data Elements for Interactive Dashboards
… 5 more parts…
3 Streamlit Part 3: Mastering Input Widgets
4 Streamlit Part 4: Mastering Media Elements – Logos, Images, Videos, and Audio
5 Streamlit Part 5: Mastering Data Visualization and Chart Types
6 Streamlit Part 6: Mastering Layouts
7 Streamlit Part 7: Build a Chat Interface
8 Streamlit Part 8: Status Elements
9 Streamlit Part 10: Page Navigation Simplified

原文链接：Streamlit Part 4: Mastering Media Elements – Logos, Images, Videos, and Audio