import streamlit as st

# Sidebar
st.sidebar.image("https://via.placeholder.com/150", width=150)  # Placeholder for logo
st.sidebar.markdown("## Home")
st.sidebar.markdown("## Create")
st.sidebar.markdown("## Library")
st.sidebar.markdown("## Explore")
st.sidebar.markdown("## 2360 credits")
st.sidebar.markdown("## Subscription")
st.sidebar.markdown("## What's New")
st.sidebar.markdown("## Community")
st.sidebar.markdown("## Help")
st.sidebar.markdown("## About")

# Main Content Area
st.title("Create")

# Form
st.checkbox("Custom Mode")
st.text_area("Song Description", "a futuristic anime song about a literal banana")
st.checkbox("Instrumental")
st.selectbox("Version", ["v3"])
st.button("Create 🎵")

# List of items
items = [
    {"title": "Dance Under The Moonlight", "description": "acoustic guitar flamenco dance beat kizomba soaring vocalist progressive house", "version": "v3"},
    {"title": "The Tale of Yggdrasil", "description": "folk acoustic storytelling", "version": "v3"},
    {"title": "The Song of Yggdrasil", "description": "tropical latin acoustic", "version": "v3"},
    {"title": "Sacred Frequencies", "description": "progressive edm uplifting", "version": "v3"},
    {"title": "Let's Get Jokin'", "description": "progressive house electronic dubstep", "version": "v3"},
    {"title": "Jokes That Make You Dance", "description": "marching band progressive house dance", "version": "v3"},
    {"title": "Joke Parade", "description": "progressive house dance 128bpm marching band bass drum dubstep", "version": "v3"},
    {"title": "Laughing On The Dancefloor", "description": "128bpm progressive house dance", "version": "v3"},
]

for item in items:
    st.image("https://via.placeholder.com/50", width=50)  # Placeholder for image
    st.markdown(f"### {item['title']} v{item['version']}")
    st.markdown(f"{item['description']}")
    col1, col2, col3, col4, col5 = st.columns([1, 1, 1, 1, 1])
    with col1:
        st.button("👍")
    with col2:
        st.button("👎")
    with col3:
        st.button("Extend")
    with col4:
        st.checkbox("Public")
    with col5:
        st.button("🔗")

# Footer
st.markdown("---")
col1, col2, col3, col4, col5 = st.columns([1, 1, 1, 1, 1])
with col1:
    st.button("⏮️")
with col2:
    st.button("⏯️")
with col3:
    st.button("⏭️")
with col4:
    st.slider("Volume", 0, 100, 50)
with col5:
    st.text("0:00")



# Inject process methods steps and input
st.image("Suno.png")
st.write('This example tests AIPP and GPT4o text and image prompts to take a screenshot and produce a one shot app using streamlit and python app.  Prompt:  Provide a development analysis of the layout of this html5 web app and create a streamlit python UI that duplicates exactly the layout features and text of each UI element.')