import streamlit as st




# Inject process methods steps and input
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.')
st.image("Suno.png")
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.  Generate unique keys for repeating elements like the thumbs up emoji which shows on multiple content lines.  For content lines as well use st.columns or a table to  align UI elements in rows to match image'
st.write('Prompt:   ' + prompt)


# --------------------------------------------



# Sidebar
st.sidebar.title("Suno")
st.sidebar.markdown("### Home")
st.sidebar.markdown("### Create")
st.sidebar.markdown("### Library")
st.sidebar.markdown("### Explore (BETA)")
st.sidebar.markdown("---")
st.sidebar.markdown("2360 credits")
st.sidebar.markdown("### Subscription")
st.sidebar.markdown("### What's New? 5")
st.sidebar.markdown("### Community")
st.sidebar.markdown("### Help")
st.sidebar.markdown("### About")

# Main Content Area
st.title("Create")
st.checkbox("Custom Mode", key="custom_mode")
st.text_area("Song Description", "a futuristic anime song about a literal banana", key="song_description")
st.radio("Instrumental", ["Yes", "No"], key="instrumental")
st.selectbox("Version", ["v1", "v2", "v3"], key="version")
st.button("Create 🎵")

# Song List
songs = [
    {"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 i, song in enumerate(songs):
    cols = st.columns([1, 3, 1, 1, 1, 1])
    with cols[0]:
        st.image("https://via.placeholder.com/50", width=50)
    with cols[1]:
        st.markdown(f"**{song['title']}**")
        st.markdown(f"*{song['description']}*")
    with cols[2]:
        st.markdown(f"v{song['version']}")
    with cols[3]:
        st.button("Extend", key=f"extend_{i}")
    with cols[4]:
        st.markdown("Public")
        st.checkbox("", key=f"public_{i}")
    with cols[5]:
        st.button("👍", key=f"like_{i}")
        st.button("👎", key=f"dislike_{i}")

# Right Panel
st.markdown("---")
st.markdown("### Select a song to preview.")

# Preview section
st.sidebar.markdown("---")
st.sidebar.write("Select a song to preview.")