Update theme configuration and clean up app.py

src/app.py

@@ -12,6 +12,7 @@ Users can compare the outputs in an interactive UI.
 from concurrent.futures import ThreadPoolExecutor
 from functools import partial
 import random
+from typing import Union
 # Third-Party Library Imports
 import gradio as gr
 # Local Application Imports
@@ -19,11 +20,13 @@ from src.config import logger
 from src.constants import (
     OPTION_ONE, 
     OPTION_TWO,
-    VOTE_FOR_OPTION_ONE,
-    VOTE_FOR_OPTION_TWO,
     PROMPT_MAX_LENGTH, 
     PROMPT_MIN_LENGTH, 
-    SAMPLE_PROMPTS
+    SAMPLE_PROMPTS,
+    TROPHY_EMOJI,
+    UNKNOWN_PROVIDER,
+    VOTE_FOR_OPTION_ONE,
+    VOTE_FOR_OPTION_TWO
 )
 from src.integrations import (
     generate_text_with_claude, 
@@ -34,19 +37,22 @@ from src.theme import CustomTheme
 from src.utils import truncate_text, validate_prompt_length
 
 
-def generate_text(prompt: str):
+def generate_text(prompt: str) -> Union[str, gr.update]:
     """
-    Generates text from Claude API.
+    Generates text using the Claude API.
 
     Args:
         prompt (str): User-provided text prompt.
+
+    Returns:
+        Union[str, gr.update]: The generated text wrapped in `gr.update` for Gradio UI,
+        or an error message as a string if validation fails.
     """
     logger.info(f'Generating text with prompt: {truncate_text(prompt, max_length=100)}')
     try:
         # Validate prompt length
         validate_prompt_length(prompt, PROMPT_MAX_LENGTH, PROMPT_MIN_LENGTH)
 
-
         # Generate text
         generated_text = generate_text_with_claude(prompt)
         logger.info(f'Generated text ({len(generated_text)} characters).')
@@ -57,15 +63,29 @@ def generate_text(prompt: str):
         logger.warning(f'Validation error: {ve}')
         return str(ve)
 
-def text_to_speech(prompt: str, generated_text: str):
+def text_to_speech(prompt: str, generated_text: str) -> tuple[gr.update, gr.update, dict, str | None]:
+    """
+    Converts generated text to speech using Hume AI and ElevenLabs APIs.
+
+    Args:
+        prompt (str): The original user-provided prompt.
+        generated_text (str): The generated text that will be converted to speech.
+
+    Returns:
+        tuple[gr.update, gr.update, dict, Union[str, None]]:
+            - `gr.update(value=option_1_audio, autoplay=True)`: Updates the first audio player.
+            - `gr.update(value=option_2_audio)`: Updates the second audio player.
+            - `options_map`: A dictionary mapping OPTION_ONE and OPTION_TWO to their providers.
+            - `option_2_audio`: The second audio file path or `None` if an error occurs.
+    """
     try:
         # Generate TTS output in parallel
         with ThreadPoolExecutor(max_workers=2) as executor:
-            hume_audio, elevenlabs_audio = executor.map(
-                lambda func: func(),
-                [partial(text_to_speech_with_hume, prompt, generated_text),
-                partial(text_to_speech_with_elevenlabs, generated_text)]
-            )
+            future_hume = executor.submit(text_to_speech_with_hume, prompt, generated_text)
+            future_elevenlabs = executor.submit(text_to_speech_with_elevenlabs, generated_text)
+            
+            hume_audio = future_hume.result()
+            elevenlabs_audio = future_elevenlabs.result()
 
         logger.info(
             f'TTS generated: Hume={len(hume_audio)} bytes, ElevenLabs={len(elevenlabs_audio)} bytes'
@@ -95,45 +115,55 @@ def text_to_speech(prompt: str, generated_text: str):
         return None, None, {}
 
 
-def vote(option_mapping: dict, selected_button: str):
+def vote(
+    vote_submitted: bool, 
+    option_mapping: dict, 
+    selected_button: str
+) -> tuple[bool, gr.update, gr.update, gr.update]:
     """
-    Updates both vote buttons to reflect the user's choice.
+    Handles user voting and updates the UI to reflect the selected choice.
 
     Args:
-        option_mapping (dict): Maps "Option 1" and "Option 2" to their TTS providers.
-        selected_button (str): The label of the button that was clicked.
+        vote_submitted (bool): Indicates if a vote has already been submitted.
+        option_mapping (dict): Maps "Option 1" and "Option 2" to their respective TTS providers.
+        selected_button (str): The button that was clicked by the user.
 
     Returns:
-        tuple[gr.update, gr.update]: Updated properties for both vote buttons.
+        tuple[bool, gr.update, gr.update, gr.update]:
+            - `True`: Indicates the vote has been submitted.
+            - `gr.update`: Updates the selected vote button.
+            - `gr.update`: Updates the unselected vote button.
+            - `gr.update(interactive=True)`: Enables the "Generate" button after voting.
     """
-    if not option_mapping:
-        return gr.update(), gr.update()  # No updates if mapping is missing
+    if not option_mapping or vote_submitted:
+        return True, gr.update(), gr.update(), gr.update()  # No updates if mapping is missing
 
     # Determine selected option
     is_option_1 = selected_button == VOTE_FOR_OPTION_ONE
     selected_option, other_option = (OPTION_ONE, OPTION_TWO) if is_option_1 else (OPTION_TWO, OPTION_ONE)
 
     # Get provider names
-    selected_provider = option_mapping.get(selected_option, "Unknown")
-    other_provider = option_mapping.get(other_option, "Unknown")
+    selected_provider = option_mapping.get(selected_option, UNKNOWN_PROVIDER)
+    other_provider = option_mapping.get(other_option, UNKNOWN_PROVIDER)
 
     # Return updated button states
     return (
-        gr.update(value=f'{selected_provider} ✔', interactive=False, variant='primary') if is_option_1 else gr.update(value=other_provider, interactive=False, variant='secondary'),
-        gr.update(value=other_provider, interactive=False, variant='secondary') if is_option_1 else gr.update(value=f'{selected_provider} ✔', interactive=False, variant='primary'),
+        True,
+        gr.update(value=f'{selected_provider} {TROPHY_EMOJI}', variant='primary') if is_option_1 else gr.update(value=other_provider, variant='secondary'),
+        gr.update(value=other_provider, variant='secondary') if is_option_1 else gr.update(value=f'{selected_provider} {TROPHY_EMOJI}', variant='primary'),
         gr.update(interactive=True, variant='primary')
     )
 
 
 def build_gradio_interface() -> gr.Blocks:
     """
-    Constructs the Gradio user interface.
+    Builds and configures the Gradio user interface.
 
     Returns:
-        gr.Blocks: The Gradio UI layout.
+        gr.Blocks: The fully constructed Gradio UI layout.
     """
     custom_theme = CustomTheme()
-    with gr.Blocks(title='Expressive TTS Arena', theme=custom_theme) as demo:
+    with gr.Blocks(title='Expressive TTS Arena', theme=custom_theme, fill_width=True) as demo:
         # Title
         gr.Markdown('# Expressive TTS Arena')
 
@@ -154,8 +184,8 @@ def build_gradio_interface() -> gr.Blocks:
 
             # Prompt input
             prompt_input = gr.Textbox(
-                label='Enter your prompt',
-                placeholder='Or type your own...',
+                show_label=False,
+                placeholder='Enter your prompt...',
                 lines=2,
                 max_lines=2,
                 show_copy_button=True,
@@ -177,8 +207,16 @@ def build_gradio_interface() -> gr.Blocks:
 
             # Audio players 
             with gr.Row():
-                option1_audio_player = gr.Audio(label=OPTION_ONE, type='filepath', interactive=False)
-                option2_audio_player = gr.Audio(label=OPTION_TWO, type='filepath', interactive=False)
+                option1_audio_player = gr.Audio(
+                    label=OPTION_ONE, 
+                    type='filepath', 
+                    interactive=False
+                )
+                option2_audio_player = gr.Audio(
+                    label=OPTION_TWO, 
+                    type='filepath', 
+                    interactive=False
+                )
 
             # Vote buttons
             with gr.Row():
@@ -186,9 +224,10 @@ def build_gradio_interface() -> gr.Blocks:
                 vote_button_2 = gr.Button(VOTE_FOR_OPTION_TWO, interactive=False)
 
         # UI state components
-        option_mapping_state = gr.State()
-        option2_audio_state = gr.State()
-        generated_text_state = gr.State()
+        option_mapping_state = gr.State() # Track option map (option 1 and option 2 are randomized)
+        option2_audio_state = gr.State() # Track generated audio for option 2 for playing automatically after option 1 audio finishes
+        generated_text_state = gr.State() # Track the text which was generated from the user's prompt
+        vote_submitted_state = gr.State(False) # Track whether the user has voted on an option
 
         # Event handlers
         sample_prompt_dropdown.change(
@@ -198,35 +237,69 @@ def build_gradio_interface() -> gr.Blocks:
         )
 
         generate_button.click(
+            # Reset UI
             fn=lambda _: (
                 gr.update(interactive=False), 
                 gr.update(interactive=False, value=VOTE_FOR_OPTION_ONE, variant='secondary'),
                 gr.update(interactive=False, value=VOTE_FOR_OPTION_TWO, variant='secondary'),
                 None,
                 None,
+                False
             ),
             inputs=[],
-            outputs=[generate_button, vote_button_1, vote_button_2, option_mapping_state, option2_audio_state]
+            outputs=[
+                generate_button, 
+                vote_button_1, 
+                vote_button_2, 
+                option_mapping_state, 
+                option2_audio_state, 
+                vote_submitted_state
+            ]
         ).then(
+            # Generate text from user prompt
             fn=generate_text,
             inputs=[prompt_input],
             outputs=[generated_text]
         ).then(
+            # Synthesize text to speech and trigger playback of generated audio
             fn=text_to_speech,
             inputs=[prompt_input, generated_text],
-            outputs=[option1_audio_player, option2_audio_player, option_mapping_state, option2_audio_state]
+            outputs=[
+                option1_audio_player, 
+                option2_audio_player, 
+                option_mapping_state, 
+                option2_audio_state
+            ]
         )
 
         vote_button_1.click(
             fn=vote,
-            inputs=[option_mapping_state, vote_button_1],
-            outputs=[vote_button_1, vote_button_2, generate_button]
+            inputs=[
+                vote_submitted_state, 
+                option_mapping_state, 
+                vote_button_1
+            ],
+            outputs=[
+                vote_submitted_state, 
+                vote_button_1, 
+                vote_button_2, 
+                generate_button
+            ]
         )
 
         vote_button_2.click(
             fn=vote,
-            inputs=[option_mapping_state, vote_button_2],
-            outputs=[vote_button_1, vote_button_2, generate_button]
+            inputs=[
+                vote_submitted_state, 
+                option_mapping_state, 
+                vote_button_2
+            ],
+            outputs=[
+                vote_submitted_state, 
+                vote_button_1, 
+                vote_button_2, 
+                generate_button
+            ]
         )
 
         # Auto-play second audio after first finishes

src/constants.py

@@ -11,6 +11,8 @@ PROMPT_MAX_LENGTH: int = 300
 # Vote button constants
 OPTION_ONE: str = "Option 1"
 OPTION_TWO: str = "Option 2"
+TROPHY_EMOJI = "🏆"
+UNKNOWN_PROVIDER = "Unknown"
 VOTE_FOR_OPTION_ONE: str = "Vote for option 1"
 VOTE_FOR_OPTION_TWO: str = "Vote for option 2"
 

src/integrations/hume_api.py

@@ -36,7 +36,7 @@ class HumeConfig:
     """Immutable configuration for interacting with the Hume TTS API."""
     tts_endpoint_url: str = 'https://api.hume.ai/v0/tts'
     api_key: str = validate_env_var('HUME_API_KEY')
-    voices: List[str] = ('ITO', 'KORA', 'DACHER')  # List of available Hume voices
+    voices: List[str] = ('ITO', 'KORA', 'STELLA')  # List of available Hume voices
     audio_format: str = 'wav'
     headers: dict = None  # Headers for the API requests
 

src/theme.py

@@ -1,32 +1,47 @@
+"""
+custom_theme.py
+
+Defines a custom Gradio theme.
+
+This module creates a `CustomTheme` class, inheriting from `gradio.themes.base.Base`,
+and overrides default styling variables. It uses CSS variables for consistency
+with the application's styling.
+
+Key Features:
+- Defines a color palette using CSS variables.
+- Customizes styling for Gradio components (buttons, inputs, etc.).
+- Adjusts shadows, borders, and gradients.
+- Supports light and dark modes.
+"""
+
+# Standard Library Imports
 from __future__ import annotations
 from collections.abc import Iterable
+# Third-Party Library Imports
 from gradio.themes.base import Base
 from gradio.themes.utils import colors, fonts, sizes
 
-# TODO: Update theme styling
-
-# Custom theme
 class CustomTheme(Base):
     def __init__(
         self,
         *,
-        primary_hue: colors.Color | str = colors.orange,
-        secondary_hue: colors.Color | str = colors.blue,
-        neutral_hue: colors.Color | str = colors.zinc,
+        primary_hue: colors.Color | str = colors.purple,  
+        secondary_hue: colors.Color | str = colors.stone,  
+        neutral_hue: colors.Color | str = colors.neutral,  
         spacing_size: sizes.Size | str = sizes.spacing_md,
         radius_size: sizes.Size | str = sizes.radius_md,
         text_size: sizes.Size | str = sizes.text_md,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Source Sans Pro"),
-            "ui-sans-serif",
-            "system-ui",
-            "sans-serif",
+            fonts.GoogleFont('Source Sans Pro'),
+            'ui-sans-serif',
+            'system-ui',
+            'sans-serif',
         ),
         font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.LocalFont("IBM Plex Mono"),
-            "ui-monospace",
-            "Consolas",
-            "monospace",
+            fonts.GoogleFont('IBM Plex Mono'),
+            'ui-monospace',
+            'Consolas',
+            'monospace',
         ),
     ):
         super().__init__(
@@ -39,53 +54,60 @@ class CustomTheme(Base):
             font=font,
             font_mono=font_mono,
         )
-        self.name = "custom_theme"
+        self.name = 'custom_theme'
         super().set(
             # Colors
-            input_background_fill_dark="*neutral_800",
-            error_background_fill=colors.red.c50,
-            error_background_fill_dark="*neutral_900",
-            error_border_color=colors.red.c700,
-            error_border_color_dark=colors.red.c500,
-            error_icon_color=colors.red.c700,
-            error_icon_color_dark=colors.red.c500,
+            input_background_fill_dark='#262626',  
+            error_background_fill='#EF4444',  
+            error_background_fill_dark='#171717',  
+            error_border_color='#B91C1C',  
+            error_border_color_dark='#EF4444',  
+            error_icon_color='#B91C1C',  
+            error_icon_color_dark='#EF4444',  
+
             # Shadows
-            input_shadow_focus="0 0 0 *shadow_spread *secondary_50, *shadow_inset",
-            input_shadow_focus_dark="0 0 0 *shadow_spread *neutral_700, *shadow_inset",
+            input_shadow_focus='0 0 0 *shadow_spread #7C3AED80, *shadow_inset',  
+            input_shadow_focus_dark='0 0 0 *shadow_spread #40404080, *shadow_inset',  
+
             # Button borders
-            button_border_width="0px",
-            input_border_width="1px",
-            input_background_fill="white",
+            button_border_width='0px',
+            input_border_width='1px',
+            input_background_fill='#F9FAFB',  
+
             # Gradients
-            stat_background_fill="linear-gradient(to right, *primary_400, *primary_200)",
-            stat_background_fill_dark="linear-gradient(to right, *primary_400, *primary_600)",
-            checkbox_label_background_fill="*background_fill_primary",
-            checkbox_label_background_fill_dark="*neutral_800",
-            checkbox_label_background_fill_hover="*background_fill_secondary",
-            checkbox_label_background_fill_hover_dark="*checkbox_label_background_fill",
+            stat_background_fill='linear-gradient(to right, #7C3AED, #D8B4FE)',
+            stat_background_fill_dark='linear-gradient(to right, #7C3AED, #5B21B6)',
+            checkbox_label_background_fill='#F3F4F6',
+            checkbox_label_background_fill_dark='#1F2937',
+            checkbox_label_background_fill_hover='#E5E7EB',
+            checkbox_label_background_fill_hover_dark='#374151',
+
             # Primary Button
-            button_primary_background_fill="*primary_500",
-            button_primary_background_fill_dark="*primary_600",
-            button_primary_background_fill_hover="*primary_600",
-            button_primary_background_fill_hover_dark="*primary_700",
-            button_primary_text_color="white",
-            button_primary_text_color_dark="white",
+            button_primary_background_fill='#111111',  
+            button_primary_background_fill_dark='#171717',  
+            button_primary_background_fill_hover='#3F3F3F',
+            button_primary_background_fill_hover_dark='#3F3F3F',  
+            button_primary_text_color='#FFFFFF',  
+            button_primary_text_color_dark='#FFFFFF',  
+
             # Secondary Button
-            button_secondary_background_fill="*neutral_200",
-            button_secondary_background_fill_dark="*neutral_600",
-            button_secondary_background_fill_hover="*neutral_300",
-            button_secondary_background_fill_hover_dark="*neutral_700",
-            button_secondary_text_color="black",
-            button_secondary_text_color_dark="white",
+            button_secondary_background_fill='#E5E7EB',  
+            button_secondary_background_fill_dark='#4B5563',  
+            button_secondary_background_fill_hover='#D1D5DB',  
+            button_secondary_background_fill_hover_dark='#374151',  
+            button_secondary_text_color='#111827',  
+            button_secondary_text_color_dark='#FFFFFF',  
+
             # Cancel Button
-            button_cancel_background_fill=colors.red.c500,
-            button_cancel_background_fill_dark=colors.red.c700,
-            button_cancel_background_fill_hover=colors.red.c600,
-            button_cancel_background_fill_hover_dark=colors.red.c800,
-            button_cancel_text_color="white",
-            button_cancel_text_color_dark="white",
-            button_cancel_text_color_hover="white",
-            button_cancel_text_color_hover_dark="white",
+            button_cancel_background_fill='#EF4444',  
+            button_cancel_background_fill_dark='#B91C1C',  
+            button_cancel_background_fill_hover='#DC2626',  
+            button_cancel_background_fill_hover_dark='#991B1B',  
+            button_cancel_text_color='#FFFFFF',  
+            button_cancel_text_color_dark='#FFFFFF',  
+            button_cancel_text_color_hover='#FFFFFF',  
+            button_cancel_text_color_hover_dark='#FFFFFF',  
+
             # Other
-            border_color_accent_subdued="*primary_200",
+            border_color_accent_subdued='#A78BFA',  
         )

src/utils.py

@@ -96,24 +96,26 @@ def validate_prompt_length(prompt: str, max_length: int, min_length: int) -> Non
         >>> validate_prompt_length("Hello world", max_length=500, min_length=5)
         # Passes validation
 
-        >>> validate_prompt_length("", max_length=500, min_length=1)
-        # Raises ValueError: "Prompt must be at least 1 character(s) long."
+        >>> validate_prompt_length("", max_length=300, min_length=10)
+        # Raises ValueError: "Prompt must be at least 10 characters long."
     """
-    logger.debug(f'Prompt length being validated: {len(prompt)} characters')
-
-    # Check if prompt is empty or too short
     stripped_prompt = prompt.strip()
-    if len(stripped_prompt) < min_length:
+    prompt_length = len(stripped_prompt)
+    
+    logger.debug(f'Prompt length being validated: {prompt_length} characters')
+
+    # Check if prompt is too short
+    if prompt_length < min_length:
         raise ValueError(
             f'Prompt must be at least {min_length} character(s) long. '
-            f'Received only {len(stripped_prompt)}.'
+            f'Received only {prompt_length}.'
         )
 
-    # Check if prompt is too long
-    if len(stripped_prompt) > max_length:
+    # Check if prompt exceeds max length
+    if prompt_length > max_length:
         raise ValueError(
             f'The prompt exceeds the maximum allowed length of {max_length} characters. '
-            f'Your prompt contains {len(stripped_prompt)} characters.'
+            f'Your prompt contains {prompt_length} characters.'
         )
 
     logger.debug(f'Prompt length validation passed for prompt: {truncate_text(stripped_prompt)}')