app.py

import streamlit as st
import time
from PIL import Image  # For better image handling

# Set page config (appears first)
st.set_page_config(
    page_title="Streamlit Components Demo",
    page_icon="🎈",
    layout="wide"
)

# Set page title
st.title("🎈 Streamlit Components Demo")

# Display text with st.write
st.write("""

""")

# File uploader in sidebar for better layout
with st.sidebar:
    st.header("Upload File")
    uploaded_file = st.file_uploader(
        "Choose an image (JPEG/PNG) or audio (MP3/WAV)",
        type=['jpg', 'jpeg', 'png', 'mp3', 'wav'],
        accept_multiple_files=False,
        key="file_uploader"
    )

# Main content area
if uploaded_file is not None:
    # Check if the file is an image
    if uploaded_file.type.startswith('image'):
        st.subheader("🖼️ Image Preview")
        
        # Display image with st.image
        try:
            image = Image.open(uploaded_file)
            st.image(image, caption="Uploaded Image", use_column_width=True)
            
            # Show spinner while processing
            with st.spinner("Processing image..."):
                time.sleep(2)  # Simulate processing time
                st.success("✅ Image processed successfully!")
        except Exception as e:
            st.error(f"Error loading image: {e}")
    
    # Check if the file is audio
    elif uploaded_file.type.startswith('audio'):
        st.subheader("🔊 Audio Player")
        
        # Display audio player with st.audio
        st.audio(uploaded_file)
        
        # Button to simulate action
        if st.button("▶️ Play Audio", type="primary"):
            with st.spinner("Playing audio..."):
                time.sleep(3)  # Simulate playback time
                st.success("🎵 Audio playback complete!")
    
    else:
        st.warning("⚠️ Unsupported file type")

# Button outside of upload context
col1, col2, col3 = st.columns(3)
with col2:
    if st.button("🎁 Click me for a surprise!", key="surprise_button"):
        st.balloons()
        st.success("🎉 You got balloons! 🎉")

# Footer
st.markdown("---")
st.caption("Built with Streamlit for Hugging Face Spaces")