import streamlit as st

page_bg_img = f"""
<style>
[data-testid="stAppViewContainer"] > .main {{
background-image: url("https://i.postimg.cc/4xgNnkfX/Untitled-design.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: local;
}}
[data-testid="stHeader"] {{
background: rgba(0,0,0,0);
}}
[data-testid="stSidebar"] > div:first-child {{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
padding: 10px;
}}
[data-testid="stSidebar"] > div {{
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}}
.stTitle {{
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}}
.stSubheader {{
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}}
</style>
"""

st.markdown(page_bg_img, unsafe_allow_html=True)

audioldm_exmples_input_paths = []
audioldm_exmples_original_paths = []
exmples_prompts = ["wiwi", "pipi", "wifi"]

st.title('Drums Generation in Different Models')
st.sidebar.title("Settings")

# Sidebar elements
st.sidebar.selectbox('How would you like to be contacted?', ('Email', 'Home phone', 'Mobile phone'))
st.sidebar.slider('Select a range of values', 0.0, 100.0, (25.0, 75.0))

st.subheader('This is a subheader with a rainbow divider')

st.markdown("---")

st.header("Examples")

example_columns = st.columns(4)
example_titles = ["Original Audio", "Separated Audio", "AudioLDM2", "StableAudio"]

for col, title in zip(example_columns, example_titles):
    col.subheader(title)

for p in exmples_prompts:
    with st.container():
        st.write(f"Prompt: {p}")
        audio_columns = st.columns(4)
        for col in audio_columns:
            col.audio("goodres.wav", format="audio/mpeg", loop=False)
        st.markdown("<hr style='border: 1px solid #ddd;'>", unsafe_allow_html=True)