Update app.py

app.py

@@ -19,37 +19,98 @@ def classify_audio(filepath):
 # Streamlit app layout
 st.title("Heartbeat Sound Classification")
 
-# Add custom CSS for styling
-st.markdown(
-    """
-    <style>
-    body {
-        background-color: #f0f4c3; /* Light green background */
-    }
-    .stApp {
-        color: #006064; /* Dark sea blue text */
-    }
-    .stButton > button {
-        background-color: #006064; /* Dark sea blue button background */
-        color: white; /* White text */
-    }
-    .stButton > button:hover {
-        background-color: #004d40; /* Darker sea blue on hover */
-    }
-    .stFileUpload > div {
-        background-color: #006064; /* Dark sea blue file uploader background */
-        color: white; /* White text */
-        border-radius: 5px;
-        padding: 10px;
-    }
-    .stFileUpload > div:hover {
-        background-color: #004d40; /* Darker sea blue on hover */
-    }
-    </style>
-    """,
-    unsafe_allow_html=True
+# Theme selection
+theme = st.sidebar.selectbox(
+    "Select Theme",
+    ["Light Green", "Light Blue", "Dark Green", "Dark Blue"]
 )
 
+# Add custom CSS for styling based on the selected theme
+if theme == "Light Green":
+    st.markdown(
+        """
+        <style>
+        body {
+            background-color: #e8f5e9; /* Light green background */
+        }
+        .stApp {
+            color: #004d40; /* Dark green text */
+        }
+        .stButton > button, .stFileUpload > div {
+            background-color: #004d40; /* Dark green button and file uploader background */
+            color: white; /* White text */
+        }
+        .stButton > button:hover, .stFileUpload > div:hover {
+            background-color: #00332c; /* Darker green on hover */
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+elif theme == "Light Blue":
+    st.markdown(
+        """
+        <style>
+        body {
+            background-color: #e0f7fa; /* Light blue background */
+        }
+        .stApp {
+            color: #006064; /* Dark blue text */
+        }
+        .stButton > button, .stFileUpload > div {
+            background-color: #006064; /* Dark blue button and file uploader background */
+            color: white; /* White text */
+        }
+        .stButton > button:hover, .stFileUpload > div:hover {
+            background-color: #004d40; /* Darker blue on hover */
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+elif theme == "Dark Green":
+    st.markdown(
+        """
+        <style>
+        body {
+            background-color: #1b5e20; /* Dark green background */
+        }
+        .stApp {
+            color: #a5d6a7; /* Light green text */
+        }
+        .stButton > button, .stFileUpload > div {
+            background-color: #004d40; /* Dark green button and file uploader background */
+            color: white; /* White text */
+        }
+        .stButton > button:hover, .stFileUpload > div:hover {
+            background-color: #00332c; /* Darker green on hover */
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+elif theme == "Dark Blue":
+    st.markdown(
+        """
+        <style>
+        body {
+            background-color: #0d47a1; /* Dark blue background */
+        }
+        .stApp {
+            color: #bbdefb; /* Light blue text */
+        }
+        .stButton > button, .stFileUpload > div {
+            background-color: #006064; /* Dark blue button and file uploader background */
+            color: white; /* White text */
+        }
+        .stButton > button:hover, .stFileUpload > div:hover {
+            background-color: #004d40; /* Darker blue on hover */
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
 # File uploader for audio files
 uploaded_file = st.file_uploader("Upload an audio file", type=["wav", "mp3"])
 
@@ -79,10 +140,8 @@ st.write("Audio Test Samples:")
 examples = ['normal.wav', 'murmur.wav', 'extra_systole.wav', 'extra_hystole.wav', 'artifact.wav']
 
 # Determine the number of columns based on the screen size
-if st.session_state.get("is_mobile", False):
-    num_columns = 1  # Single column for mobile view
-else:
-    num_columns = 3  # Multiple columns for desktop view
+is_mobile = st.session_state.get("is_mobile", False)
+num_columns = 1 if is_mobile else 3
 
 # Arrange buttons in the columns
 cols = st.columns(num_columns)
@@ -95,7 +154,7 @@ for idx, example in enumerate(examples):
         col.audio(audio_bytes, format='audio/wav')
         results = classify_audio(example)
         col.write("Results:")
-        results_str = "\n".join([f"{label}: {score:.2f}" for label, score in results.items()])
+        results_str = "\n.join([f"{label}: {score:.2f}" for label, score in results.items()])
         col.text(results_str)
 
 # JavaScript to detect if the user is on a mobile device