Update app.py

app.py

@@ -50,91 +50,204 @@ def tts_interface(*args):
         return None, gr.update(value=f"<span style='color:red;'>{warning}</span>", visible=True)
     return audio, gr.update(visible=False)
 
-# Custom CSS
-custom_css = """
-body {
-    background: linear-gradient(45deg, #ff7e5f, #feb47b);
-    animation: gradient 15s ease infinite;
-    font-family: 'Arial', sans-serif;
-}
-
-@keyframes gradient {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
-}
-
-.gradio-container {
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-}
-
-button {
-    background: linear-gradient(45deg, #ff7e5f, #feb47b);
-    border: none;
-    color: white;
-    padding: 10px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 4px 2px;
-    cursor: pointer;
-    border-radius: 5px;
-    transition: background 0.3s;
-}
-
-button:hover {
-    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: 10px;
-    border-radius: 5px;
-    transition: background 0.3s;
-}
-
-textarea:focus, select:focus, input[type="range"]:focus {
-    background-color: rgba(255, 255, 255, 0.3);
-}
-
-.warning {
-    color: red;
-}
-"""
-
 # Create Gradio application
 async def create_demo():
     voices = await get_voices()
     
     description = """
-    <p style="color: white;">This is a simple text-to-speech application using Microsoft Edge TTS.</p>
-    <p style="color: white;">You can enter any text and select the voice you want to use.</p>
-    <p style="color: white;">Adjust the speech rate and pitch according to your preference.</p>
+    <div class="gradient-text">
+        This is a simple text-to-speech application using Microsoft Edge TTS.
+        You can enter any text and select the voice you want to use.
+        Adjust the speech rate and pitch according to your preference.
+    </div>
     """
+    
+    css_style = """
+    <style>
+        body {
+            background: linear-gradient(135deg, #FF4E50, #EC9F05, #FF4E50);
+            background-size: 600% 600%;
+            color: white;
+            font-family: 'Arial', sans-serif;
+            animation: gradient 15s ease infinite;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #FF4E50, #EC9F05, #FF4E50);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: text-gradient 15s ease infinite;
+        }
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        @keyframes text-gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .gr-button {
+            background: linear-gradient(135deg, #FF4E50, #EC9F05);
+            border: none;
+            color: white;
+            padding: 15px 30px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            outline: none;
+            position: relative;
+            overflow: hidden;
+        }
+        .gr-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, #FF4E50, #EC9F05);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: -1;
+        }
+        .gr-button:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(255, 78, 80, 0.5);
+        }
+        .gr-button:hover::before {
+            opacity: 0.5;
+        }
+        .gr-button:active {
+            transform: translateY(0);
+            box-shadow: 0 5px 10px rgba(255, 78, 80, 0.3);
+        }
+        .loading-spinner {
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-top: 4px solid #FF4E50;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .gr-box {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s ease;
+            margin-bottom: 10px;
+        }
+        .gr-box:hover {
+            transform: translateY(-5px);
+        }
+        .gr-slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 10px;
+            background: linear-gradient(135deg, #FF4E50, #EC9F05);
+            outline: none;
+            border-radius: 5px;
+            transition: background 0.3s ease;
+        }
+        .gr-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 25px;
+            height: 25px;
+            background: white;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .gr-slider::-webkit-slider-thumb:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 10px rgba(255, 78, 80, 0.8);
+        }
+        .gr-slider::-moz-range-thumb {
+            width: 25px;
+            height: 25px;
+            background: white;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .gr-slider::-moz-range-thumb:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 10px rgba(255, 78, 80, 0.8);
+        }
+        .gr-slider::-moz-range-track {
+            background: linear-gradient(135deg, #FF4E50, #EC9F05);
+            border-radius: 5px;
+        }
+        .gr-slider::-ms-track {
+            width: 100%;
+            height: 10px;
+            background: transparent;
+            border-color: transparent;
+            color: transparent;
+        }
+        .gr-slider::-ms-fill-lower {
+            background: linear-gradient(135deg, #FF4E50, #EC9F05);
+            border-radius: 5px;
+        }
+        .gr-slider::-ms-fill-upper {
+            background: linear-gradient(135deg, #FF4E50, #EC9F05);
+            border-radius: 5px;
+        }
+        .gr-slider::-ms-thumb {
+            width: 25px;
+            height: 25px;
+            background: white;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .gr-slider::-ms-thumb:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 10px rgba(255, 78, 80, 0.8);
+        }
+        .gr-label {
+            color: white;
+            font-size: 16px;
+            margin-bottom: 10px;
+        }
+        .gr-markdown {
+            color: white;
+            font-size: 14px;
+        }
+    </style>
+    """
+    
     demo = gr.Interface(
         fn=tts_interface,
         inputs=[
-            gr.Textbox(label="Input Text", lines=5),
-            gr.Dropdown(choices=[""] + list(voices.keys()), label="Select Voice", value=""),
-            gr.Slider(minimum=-50, maximum=50, value=0, label="Speech Rate Adjustment (%)", step=1),
-            gr.Slider(minimum=-20, maximum=20, value=0, label="Pitch Adjustment (Hz)", step=1)
+            gr.Textbox(label="Input Text", lines=5, elem_classes=["gr-box", "gr-label"]),
+            gr.Dropdown(choices=[""] + list(voices.keys()), label="Select Voice", value="", elem_classes=["gr-box", "gr-label"]),
+            gr.Slider(minimum=-50, maximum=50, value=0, label="Speech Rate Adjustment (%)", step=1, elem_classes=["gr-slider", "gr-label"]),
+            gr.Slider(minimum=-20, maximum=20, value=0, label="Pitch Adjustment (Hz)", step=1, elem_classes=["gr-slider", "gr-label"])
         ],
         outputs=[
             gr.Audio(label="Generated Audio", type="filepath"),
-            gr.HTML(label="Warning", visible=False)
+            gr.Markdown(label="Warning", visible=False, elem_classes=["gr-markdown"])
         ],
-        title="Edge TTS Text-to-Speech",
+        title="<div class='gradient-text'>Edge TTS Text-to-Speech</div>",
         description=description,
-        article="",
+        article=css_style,
         analytics_enabled=False,
         allow_flagging="manual",
-        css=custom_css
+        theme="compact"
     )
     return demo