Update app.py

app.py

@@ -2,56 +2,59 @@ import streamlit as st
 
 # Sidebar
 st.sidebar.title("Suno")
-st.sidebar.button("Home")
-st.sidebar.button("Create")
-st.sidebar.button("Library")
-st.sidebar.button("Explore (BETA)")
+st.sidebar.markdown("### Home")
+st.sidebar.markdown("### Create")
+st.sidebar.markdown("### Library")
+st.sidebar.markdown("### Explore (BETA)")
 st.sidebar.markdown("---")
-st.sidebar.write("2360 credits")
-st.sidebar.button("Subscription")
-st.sidebar.button("What's New?")
-st.sidebar.button("Community")
-st.sidebar.button("Help")
-st.sidebar.button("About")
+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
+# Main Content Area
 st.title("Create")
-
-# Form
-st.subheader("Custom Mode")
-custom_mode = st.checkbox("Custom Mode")
-
-st.subheader("Song Description")
-song_description = st.text_area("Song Description", "a futuristic anime song about a literal banana")
-
-instrumental = st.checkbox("Instrumental")
-
-version = st.selectbox("Version", ["v3", "v2", "v1"])
+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
+# 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": "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": "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):
-    st.image("https://via.placeholder.com/50", width=50)  # Placeholder for song image
-    st.write(f"**{song['title']}**")
-    st.write(song['description'])
-    st.write(f"Version: {song['version']}")
-    st.button("Extend", key=f"extend_{i}")
-    st.checkbox("Public", key=f"public_{i}")
-    st.button("👍", key=f"thumbs_up_{i}")
-    st.button("👎", key=f"thumbs_down_{i}")
+    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("---")
@@ -61,5 +64,7 @@ st.sidebar.write("Select a song to preview.")
 
 # 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.')
+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('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.write('Prompt:   ' + prompt)