Update app.py

app.py

@@ -246,20 +246,26 @@ for voice_name, voice_code in language_dict.items():
         language_groups[language] = []
     language_groups[language].append(voice_name)
 
-# CSS for centering elements
+# CSS for centering elements and dark styling
 st.markdown("""
     <style>
-    .main { 
-        display: flex; 
-        flex-direction: column; 
-        align-items: center; 
-        justify-content: center; 
-        text-align: center; 
+    .main {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        background-color: #000000;
+        padding: 20px;
+        border-radius: 8px;
     }
     .stButton > button {
         display: block;
         margin-left: auto;
         margin-right: auto;
+        background-color: #1f77b4;
+        color: #ffffff;
+        border-radius: 8px;
     }
     .stAudio {
         display: flex;
@@ -269,6 +275,19 @@ st.markdown("""
         display: block;
         margin-left: auto;
         margin-right: auto;
+        background-color: #1f77b4;
+        color: #ffffff;
+        border-radius: 8px;
+    }
+    .stTextArea > div > div > textarea {
+        background-color: #262730;
+        color: #ffffff;
+        border-radius: 8px;
+    }
+    .stSelectbox > div > div > select {
+        background-color: #262730;
+        color: #ffffff;
+        border-radius: 8px;
     }
     </style>
 """, unsafe_allow_html=True)
@@ -281,9 +300,9 @@ async def text_to_speech_edge(text, voice):
     return tmp_path
 
 def main():
-    # Center the title and description
-    st.markdown("<h1 style='text-align: center;'>Text-to-Speech Converter</h1>", unsafe_allow_html=True)
-    st.markdown("<p style='text-align: center;'>Enter text and select a language and voice to generate an MP3 audio file.</p>", unsafe_allow_html=True)
+    # Center the title and description with dark styling
+    st.markdown("<h1 style='text-align: center; color: #ffffff;'>Text-to-Speech Converter</h1>", unsafe_allow_html=True)
+    st.markdown("<p style='text-align: center; color: #ffffff;'>Enter text and select a language and voice to generate an MP3 audio file.</p>", unsafe_allow_html=True)
 
     # Input text area, centered
     with st.container():
@@ -298,11 +317,11 @@ def main():
         voices = language_groups.get(selected_language, [])
         selected_voice = st.selectbox("Select Voice", voices, index=0)
 
-    # Center the button
+    # Center the button with container width
     with st.container():
-        if st.button("Generate Audio"):
+        if st.button("Generate Audio", use_container_width=True):
             if input_text and selected_voice:
-                with st.spinner("Generating audio..."):
+                with st.spinner("Generating audio... Please wait!"):
                     voice_code = language_dict.get(selected_voice, "en-US-JennyNeural")
                     try:
                         loop = asyncio.new_event_loop()
@@ -318,7 +337,8 @@ def main():
                                 label="Download MP3",
                                 data=file,
                                 file_name="output.mp3",
-                                mime="audio/mp3"
+                                mime="audio/mp3",
+                                use_container_width=True
                             )
                         
                         # Clean up temporary file