Mastering Media Files in Streamlit

Introduction

Streamlit is a powerful Python library for creating interactive web applications with ease. One of its standout features is the ability to seamlessly integrate various media files into your apps. In this blog post, we'll explore how to work with images, audio, and video in Streamlit, enabling you to create rich, engaging user experiences.

Working with Images

Images are a crucial part of many applications, whether for data visualization or enhancing user interface. Streamlit offers several ways to display and manipulate images.

Displaying Images

To display an image in Streamlit, you can use the st.image() function:

import streamlit as st
from PIL import Image

# Load and display an image
image = Image.open('path/to/your/image.jpg')
st.image(image, caption='Your Image Caption', use_column_width=True)

This code snippet opens an image file using PIL (Python Imaging Library) and displays it in the Streamlit app. The caption parameter adds a description below the image, while use_column_width=True ensures the image fits within the app's layout.

Image Manipulation

Streamlit also allows for basic image manipulation. Here's an example of how to resize an image:

import streamlit as st
from PIL import Image

# Load the image
image = Image.open('path/to/your/image.jpg')

# Resize the image
resized_image = image.resize((300, 200))

# Display the original and resized images side by side
col1, col2 = st.columns(2)
with col1:
    st.image(image, caption='Original Image')
with col2:
    st.image(resized_image, caption='Resized Image')

This code creates two columns and displays the original and resized images side by side, allowing users to compare them easily.

Handling Audio Files

Streamlit supports audio playback, making it ideal for applications involving sound analysis or music streaming.

Playing Audio

To play an audio file in Streamlit, use the st.audio() function:

import streamlit as st

# Load and play an audio file
audio_file = open('path/to/your/audio.mp3', 'rb')
audio_bytes = audio_file.read()
st.audio(audio_bytes, format='audio/mp3')

This code reads an MP3 file and creates an audio player in your Streamlit app. Users can play, pause, and seek through the audio track.

Audio File Upload

You can also allow users to upload their own audio files:

import streamlit as st

uploaded_file = st.file_uploader("Choose an audio file", type="mp3")
if uploaded_file is not None:
    audio_bytes = uploaded_file.read()
    st.audio(audio_bytes, format='audio/mp3')

This code creates a file uploader specifically for MP3 files and plays the uploaded audio when a file is selected.

Working with Video

Video integration can significantly enhance your Streamlit applications, especially for tutorials or data visualizations involving motion.

Displaying Videos

To display a video in Streamlit, use the st.video() function:

import streamlit as st

# Display a video from a file
video_file = open('path/to/your/video.mp4', 'rb')
video_bytes = video_file.read()
st.video(video_bytes)

# Or display a video from a URL
st.video('https://www.youtube.com/watch?v=dQw4w9WgXcQ')

This code demonstrates two ways to display videos: from a local file and from a URL (in this case, a YouTube video).

Video File Upload

Similar to audio files, you can allow users to upload their own videos:

import streamlit as st

uploaded_file = st.file_uploader("Choose a video file", type=["mp4", "mov", "avi"])
if uploaded_file is not None:
    video_bytes = uploaded_file.read()
    st.video(video_bytes)

This code creates a file uploader for common video formats and displays the uploaded video when a file is selected.

Advanced Techniques

Combining Media Types

You can create more complex applications by combining different media types. For example, you could build an image gallery with audio descriptions:

import streamlit as st
from PIL import Image

# Create a dictionary of images and their audio descriptions
media_dict = {
    'image1.jpg': 'audio1.mp3',
    'image2.jpg': 'audio2.mp3',
    'image3.jpg': 'audio3.mp3'
}

# Create a selectbox for choosing an image
selected_image = st.selectbox('Choose an image', list(media_dict.keys()))

# Display the selected image
image = Image.open(f'path/to/images/{selected_image}')
st.image(image, use_column_width=True)

# Play the corresponding audio description
audio_file = open(f'path/to/audio/{media_dict[selected_image]}', 'rb')
audio_bytes = audio_file.read()
st.audio(audio_bytes, format='audio/mp3')

This code creates an interactive image gallery where users can select an image and hear its audio description.

Using Media for Data Visualization

Media files can also be used creatively for data visualization. For instance, you could use images to represent data points in a scatter plot:

import streamlit as st
import pandas as pd
import plotly.express as px
from PIL import Image

# Load your data
df = pd.read_csv('your_data.csv')

# Create a scatter plot
fig = px.scatter(df, x='x_column', y='y_column')

# Add images to the scatter plot
for i, row in df.iterrows():
    img = Image.open(f'path/to/images/{row["image_filename"]}')
    fig.add_layout_image(
        dict(
            source=img,
            xref="x",
            yref="y",
            x=row['x_column'],
            y=row['y_column'],
            sizex=0.1,
            sizey=0.1,
            sizing="stretch",
            opacity=0.8,
            layer="above"
        )
    )

# Display the plot in Streamlit
st.plotly_chart(fig)

This code creates a scatter plot where each data point is represented by an image, providing a visually rich representation of your data.

Conclusion

Working with media files in Streamlit opens up a world of possibilities for creating engaging and interactive web applications. By mastering these techniques, you can enhance your apps with images, audio, and video, providing a richer user experience and more effective data visualization.