Update app.py

app.py

@@ -86,6 +86,24 @@ def text_to_speech(text, formula):
         
 
 custom_css = """
+/* Main title */
+.heading {
+    color: rgb(76, 175, 147) !important;
+    font-size: 2em !important;
+    font-weight: 600 !important;
+    text-align: center !important;
+    margin: 20px 0 10px 0 !important;
+}
+
+/* Description text */
+.description {
+    color: rgba(76, 175, 147, 0.7) !important;
+    text-align: center !important;
+    max-width: 800px !important;
+    margin: 0 auto 30px auto !important;
+    font-size: 0.9em !important;
+    line-height: 1.6 !important;
+}
 .container-wrap {
     display: flex !important;
     gap: 5px !important;
@@ -93,13 +111,11 @@ custom_css = """
     margin: 0 auto !important;
     max-width: 1400px !important;  /* Increased max-width */
 }
-
 .vert-group {
     min-width: 100px !important;   /* Increased from 80px */
     width: 120px !important;       /* Increased from 90px */
     flex: 0 0 auto !important;
 }
-
 .vert-group label {
     white-space: nowrap !important;
     overflow: visible !important;
@@ -114,13 +130,16 @@ custom_css = """
     margin-bottom: 5px !important;
     padding: 0 5px !important;     /* Added padding */
 }
-
 .vert-group .wrap label {
     text-align: center !important;
     width: 100% !important;
     display: block !important;
 }
-
+/* Hover effect */
+.vert-group:hover {
+    transform: translateY(-5px) !important;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
+}
 .slider_input_container {
     height: 200px !important;
     position: relative !important;
@@ -128,7 +147,6 @@ custom_css = """
     margin: 0 auto !important;
     overflow: hidden !important;
 }
-
 .slider_input_container input[type="range"] {
     position: absolute !important;
     width: 200px !important;
@@ -136,52 +154,62 @@ custom_css = """
     top: 100px !important;
     transform: rotate(90deg) !important;
 }
-
 .min_value {
     position: absolute !important;
     bottom: 0 !important;
     left: 10px !important;
 }
-
 .max_value {
     position: absolute !important;
     top: 0 !important;
     left: 10px !important;
 }
-
 .tab-like-container {
     transform: scale(0.8) !important;
 }
-
 .gradio-row, .gradio-column {
     background: none !important;
     border: none !important;
     min-width: unset !important;
 }
-
 .heading {
     text-align: center !important;
     margin-bottom: 1rem !important;
 }
-
 .description {
     text-align: center !important;
     margin-bottom: 2rem !important;
     color: rgba(255, 255, 255, 0.7) !important;
 }
+
+/* Generate button */
+#generate-btn {
+    background: linear-gradient(90deg, rgb(76, 175, 147), rgb(76, 147, 175)) !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    transition: transform 0.2s, box-shadow 0.2s !important;
+}
+
+#generate-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 15px rgba(76, 175, 147, 0.3) !important;
+}
 """
 
 with gr.Blocks(css=custom_css, theme="ocean") as demo:
     gr.Markdown(
         """
-        # 🎙️ Voice Mixer - Kokoro TTS
-        ### Mix and match different voices to create your perfect text-to-speech voice
-        
-        This app lets you combine multiple voices with different weights to create custom voice combinations. 
-        Select voices using checkboxes and adjust their weights using the sliders below.
+        <div class="heading">🎙️ AI Voice Mixer Studio - Kokoro TTS</div>
+        <div class="description">
+            <b>Mix and match different voices to create your perfect text-to-speech voice.</b><br>Each slider represents a unique voice with distinct
+            characteristics. This app lets you combine multiple voices with different weights to create custom voice combinations. Select voices using checkboxes and adjust their weights using the sliders below!
+        </div>
         """
     )
-    
+
     with gr.Row(variant="default", equal_height=True, elem_classes="container-wrap"):
         checkboxes = []
         sliders = []
@@ -224,7 +252,7 @@ with gr.Blocks(css=custom_css, theme="ocean") as demo:
             lines=2, 
             scale=4
         )
-        button_tts = gr.Button("🎙️ Generate Voice", scale=2, min_width=100)
+        button_tts = gr.Button("🎙️ Generate Voice", scale=2, min_width=100, elem_id="generate-btn")
 
     # Generate speech from the selected custom voice
     with gr.Row(equal_height=True):