Update app.py

app.py

@@ -12,6 +12,23 @@ 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>
 """
 
@@ -19,87 +36,31 @@ st.markdown(page_bg_img, unsafe_allow_html=True)
 
 audioldm_exmples_input_paths = []
 audioldm_exmples_original_paths = []
-exmples_prompts = ["wiwi", "pipi","wifi"]
+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.title('Drums generation in different models')
-add_selectbox = st.sidebar.selectbox(
-    'How would you like to be contacted?',
-    ('Email', 'Home phone', 'Mobile phone')
-)
+st.markdown("---")
 
-# Add a slider to the sidebar:
-add_slider = st.sidebar.slider(
-    'Select a range of values',
-    0.0, 100.0, (25.0, 75.0)
-)
-st.subheader('This is a subheader with a divider', divider='rainbow')
-with st.container(border = True, height=len(exmples_prompts)*200):
-    st.title("Examples")
-    col1, col2, col3, col4 = st.columns(4)
-    with col1:
-        st.subheader("original audio")
-        # with st.container(border = True,height=120):
+st.header("Examples")
 
-            # st.write("some prompts...")
-            # st.audio("goodres.wav", format="audio/mpeg", loop=False)
-            # st.write("some prompts...")
-            # st.audio("goodres.wav", format="audio/mpeg", loop=False)
-    with col2:
-        st.subheader("Separated Audio")
-        # with st.container(border = True,height=120):
+example_columns = st.columns(4)
+example_titles = ["Original Audio", "Separated Audio", "AudioLDM2", "StableAudio"]
 
-        #     # st.write("some prompts...")
-        #     st.audio("goodres.wav", format="audio/mpeg", loop=False)
-        #     # st.write("some prompts...")
-        #     st.audio("goodres.wav", format="audio/mpeg", loop=False)
-    with col3:
-        st.subheader("AudioLDM2")
-        # with st.container(border = True,height=120):
+for col, title in zip(example_columns, example_titles):
+    col.subheader(title)
 
-        #     st.write("some prompts...")
-        #     st.audio("goodres.wav", format="audio/mpeg", loop=False)
-        #     st.write("some prompts...")
-        #     st.audio("goodres.wav", format="audio/mpeg", loop=False)
-    with col4:
-        st.subheader("StableAudio")
-        # with st.container(border = True,height=120):
-        #     st.write("some prompts...")
-        #     st.audio("goodres.wav", format="audio/mpeg", loop=False)
-        #     st.write("some prompts...")
-        #     st.audio("goodres.wav", format="audio/mpeg", loop=False)
-    for p in exmples_prompts:    
-        with st.container(border = True,height=120):
-            st.write(p)
-            col1, col2, col3, col4 = st.columns(4)
-            with col1:
-                # st.write("some prompts...")
-                st.audio("goodres.wav", format="audio/mpeg", loop=False)
-                # st.write("some prompts...")
-                # st.audio("goodres.wav", format="audio/mpeg", loop=False)
-            with col2:
-                # st.subheader("Separated Audio")
-                # with st.container(border = True,height=120):
-        
-                    # st.write("some prompts...")
-                st.audio("goodres.wav", format="audio/mpeg", loop=False)
-                    # st.write("some prompts...")
-                    # st.audio("goodres.wav", format="audio/mpeg", loop=False)
-            with col3:
-                # st.subheader("AudioLDM2")
-                # with st.container(border = True,height=120):
-        
-                    # st.write("some prompts...")
-                st.audio("goodres.wav", format="audio/mpeg", loop=False)
-                    # st.write("some prompts...")
-                    # st.audio("goodres.wav", format="audio/mpeg", loop=False)
-            with col4:
-                # st.subheader("StableAudio")
-                # with st.container(border = True,height=120):
-                    # st.write("some prompts...")
-                st.audio("goodres.wav", format="audio/mpeg", loop=False)
-                    # st.write("some prompts...")
-                    # st.audio("goodres.wav", format="audio/mpeg", loop=False)
-        
-        
-        
+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)