buttons css

app.py

@@ -479,51 +479,54 @@ description = (
     "recognises the expression dimensions arousal, dominance, and valence. "
 )
 
-with gr.Blocks() as demo:
+css_buttons = """
+            .cool-button {
+            background-color: #1a2a40; /* Slightly lighter dark blue */
+            color: white;
+            padding: 15px 32px;
+            text-align: center;
+            font-size: 16px;
+            border-radius: 12px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+            transition: all 0.3s ease-in-out;
+            border: none;
+            cursor: pointer;
+        }
+        .cool-button:hover {
+            background-color: #1a2a40; /* Slightly lighter dark blue */
+            transform: scale(1.05);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+        }
+        .cool-row {
+            margin-bottom: 10px;
+        }
+        """
+
+with gr.Blocks(theme='huggingface', css=css_buttons) as demo:
     with gr.Tab(label="other TTS"):
-
-        selected_voice = gr.State(value='wav/en_US_m-ailabs_mary_ann.wav')
-
-        with gr.Row():
-            voice_info = gr.Markdown(f'TTS vox : `{selected_voice.value}`')
-
-        # Main input and output components
+        selected_voice = gr.State(value='en_US_m-ailabs_mary_ann.wav')
         with gr.Row():
-            text_input = gr.Textbox(
-                label="Enter text for TTS:",
-                placeholder="Type your message here...",
-                lines=4,
-                value="Farover the misty mountains cold too dungeons deep and caverns old.",
-            )
-            generate_button = gr.Button("Generate Audio", variant="primary")
-
+            text_input = gr.Textbox(label=f"Text for TTS: Voice={selected_voice.value}",
+                                    placeholder="Type your message here...",
+                                    lines=4,
+                                    value="Farover the misty mountains cold too dungeons deep and caverns old.")
+            generate_button = gr.Button("Generate Audio",
+                                        variant="primary")
         output_audio = gr.Audio(label="TTS Output")
-
         with gr.Column():
             voice_buttons = []
             for i in range(0, len(VOICES), 7):
-                with gr.Row():
+                with gr.Row(elem_classes=["cool-row"]):
                     for voice_filename in VOICES[i:i+7]:
                         voice_filename = voice_filename[4:-4]  # drop wav/ for visibility
-                        button = gr.Button(voice_filename)
-
-                        button.click(
-                            fn=update_selected_voice,
-                            inputs=[gr.Textbox(value=voice_filename, visible=False)],
-                            outputs=[selected_voice]
-                        )
-                        button.click(
-                            fn=lambda v=voice_filename: f"TTS Vox = `{v}`",
-                            inputs=None,
-                            outputs=voice_info
-                        )
+                        button = gr.Button(voice_filename, elem_classes=["cool-button"])
+                        button.click(fn=update_selected_voice,
+                                     inputs=[gr.Textbox(value=voice_filename, visible=False)],
+                                     outputs=[selected_voice, text_input])
                         voice_buttons.append(button)
-
-        generate_button.click(
-            fn=other_tts,
-            inputs=[text_input, selected_voice],
-            outputs=output_audio
-        )
+        generate_button.click(fn=other_tts,
+                              inputs=[text_input, selected_voice],
+                              outputs=output_audio)
 
     with gr.Tab(label="Speech Analysis"):
         with gr.Row():