Update app.py

app.py

@@ -24,7 +24,7 @@ st.markdown(
     """
     <style>
     body {
-        background-color: #e0f7fa; /* Light sea blue background */
+        background-color: #f0f4c3; /* Light green background */
     }
     .stApp {
         color: #006064; /* Dark sea blue text */
@@ -36,6 +36,15 @@ st.markdown(
     .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
@@ -66,11 +75,20 @@ if uploaded_file is not None:
 
 # Audio Test Samples for classification
 st.write("Audio Test Samples:")
+
 examples = ['normal.wav', 'murmur.wav', 'extra_systole.wav', 'extra_hystole.wav', 'artifact.wav']
-cols = st.columns(3)
+
+# 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
+
+# Arrange buttons in the columns
+cols = st.columns(num_columns)
 
 for idx, example in enumerate(examples):
-    col = cols[idx % 3]  # Rotate columns for better arrangement
+    col = cols[idx % num_columns]  # Rotate columns for better arrangement
     if col.button(example):
         col.subheader(f"Sample Audio: {example}")
         audio_bytes = open(example, 'rb').read()
@@ -79,3 +97,14 @@ for idx, example in enumerate(examples):
         col.write("Results:")
         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
+st.markdown(
+    """
+    <script>
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    window.parent.postMessage({type: 'streamlit:storeSessionState', key: 'is_mobile', value: isMobile}, '*');
+    </script>
+    """,
+    unsafe_allow_html=True
+)