Update app.py

app.py

@@ -4,7 +4,6 @@ import asyncio
 import tempfile
 import re
 import emoji
-
 # Функция для очистки текста от нежелательных символов и эмодзи
 def clean_text(text):
     # Удаление указанных символов
@@ -12,12 +11,10 @@ def clean_text(text):
     # Удаление эмодзи
     text = emoji.replace_emoji(text, replace='')
     return text
-
 # Get all available voices
 async def get_voices():
     voices = await edge_tts.list_voices()
     return {f"{v['ShortName']} - {v['Locale']} ({v['Gender']})": v['ShortName'] for v in voices}
-
 # Text-to-speech function
 async def text_to_speech(text, voice, rate, pitch):
     if not text.strip():
@@ -39,7 +36,6 @@ async def text_to_speech(text, voice, rate, pitch):
         except Exception as e:
             return None, f"An error occurred during text-to-speech conversion: {str(e)}"
     return tmp_path, None
-
 # Gradio interface function
 def tts_interface(*args):
     loop = asyncio.new_event_loop()
@@ -49,13 +45,10 @@ def tts_interface(*args):
     if warning:
         return None, gr.update(value=f"<span style='color:red;'>{warning}</span>", visible=True)
     return audio, gr.update(visible=False)
-
 # Custom CSS
 custom_css = """
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
-
 body {
-    background: linear-gradient(135deg, #ff7e5f, #feb47b);
+    background: linear-gradient(45deg, #ff7e5f, #feb47b);
     animation: gradient 15s ease infinite;
     font-family: 'Arial', sans-serif;
 }
@@ -66,105 +59,42 @@ body {
 }
 .gradio-container {
     background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 15px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-    padding: 30px;
-    max-width: 600px;
-    margin: 0 auto;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
 }
 button {
-    background: linear-gradient(135deg, #ff7e5f, #feb47b);
+    background: linear-gradient(45deg, #ff7e5f, #feb47b);
     border: none;
     color: white;
-    padding: 15px 30px;
+    padding: 10px 20px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
-    font-size: 18px;
-    margin: 10px 0;
+    font-size: 16px;
+    margin: 4px 2px;
     cursor: pointer;
-    border-radius: 10px;
-    transition: background 0.3s, transform 0.2s;
+    border-radius: 5px;
+    transition: background 0.3s;
 }
 button:hover {
-    background: linear-gradient(135deg, #feb47b, #ff7e5f);
-    transform: scale(1.05);
+    background: linear-gradient(45deg, #feb47b, #ff7e5f);
 }
 textarea, select, input[type="range"] {
     background-color: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: white;
-    padding: 15px;
-    border-radius: 10px;
-    width: 100%;
-    box-sizing: border-box;
-    transition: background 0.3s, transform 0.2s;
+    padding: 10px;
+    border-radius: 5px;
+    transition: background 0.3s;
 }
 textarea:focus, select:focus, input[type="range"]:focus {
     background-color: rgba(255, 255, 255, 0.3);
-    transform: scale(1.02);
-}
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    background: linear-gradient(135deg, #ff7e5f, #feb47b);
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background 0.3s;
-}
-input[type="range"]::-webkit-slider-thumb:hover {
-    background: linear-gradient(135deg, #feb47b, #ff7e5f);
-}
-input[type="range"]::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: linear-gradient(135deg, #ff7e5f, #feb47b);
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background 0.3s;
-}
-input[type="range"]::-moz-range-thumb:hover {
-    background: linear-gradient(135deg, #feb47b, #ff7e5f);
 }
 .warning {
     color: red;
-    margin-top: 10px;
-}
-.audio-controls {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-}
-.audio-controls button {
-    margin: 0 10px;
-    padding: 15px;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.3s, transform 0.2s;
-    font-size: 20px;
-}
-.audio-controls button:hover {
-    background: linear-gradient(135deg, #feb47b, #ff7e5f);
-    transform: scale(1.1);
-}
-.audio-controls .play-icon {
-    font-size: 24px;
-}
-.audio-controls .pause-icon {
-    font-size: 24px;
-}
-.audio-controls .volume-icon {
-    font-size: 24px;
 }
 """
-
 # Create Gradio application
 async def create_demo():
     voices = await get_voices()
@@ -194,7 +124,6 @@ async def create_demo():
         css=custom_css
     )
     return demo
-
 # Run the application
 if __name__ == "__main__":
     demo = asyncio.run(create_demo())