Upload folder using huggingface_hub

app.py

@@ -4,8 +4,23 @@ import openai
 import requests
 import os
 
+
 def tts(input_text: str, model: str, voice: str, api_key: str) -> str:
-    # (Same as before)
+    """
+    Convert input text to speech using OpenAI's Text-to-Speech API.
+
+    Parameters:
+        input_text (str): The text to be converted to speech.
+        model (str): The model to use for synthesis (e.g., 'tts-1', 'tts-1-hd').
+        voice (str): The voice profile to use (e.g., 'alloy', 'echo', 'fable', etc.).
+        api_key (str): OpenAI API key.
+
+    Returns:
+        str: File path to the generated audio file.
+
+    Raises:
+        gr.Error: If input parameters are invalid or API call fails.
+    """
     if not api_key.strip():
         raise gr.Error(
             "API key is required. Get an API key at: https://platform.openai.com/account/api-keys"
@@ -19,8 +34,10 @@ def tts(input_text: str, model: str, voice: str, api_key: str) -> str:
     try:
         response = openai.Audio.create(text=input_text, voice=voice, model=model)
     except openai.OpenAIError as e:
+        # Catch-all for OpenAI exceptions
         raise gr.Error(f"An OpenAI error occurred: {e}")
     except Exception as e:
+        # Catch any other exceptions
         raise gr.Error(f"An unexpected error occurred: {e}")
 
     if not hasattr(response, "audio"):
@@ -34,7 +51,11 @@ def tts(input_text: str, model: str, voice: str, api_key: str) -> str:
 
     return temp_file_path
 
+
 def main():
+    """
+    Main function to create and launch the Gradio interface.
+    """
     MODEL_OPTIONS = ["tts-1", "tts-1-hd"]
     VOICE_OPTIONS = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"]
 
@@ -62,99 +83,10 @@ def main():
         VOICE_PREVIEW_FILES[voice] = local_file_path
 
     # Set static paths for Gradio to serve
-    gr.static(PREVIEW_DIR)
-
-    with gr.Blocks(theme=gr.themes.Default()) as demo:
-        # Include global CSS styles for the audio elements
-        gr.HTML("""
-        <style>
-            .audio-player {
-                width: 5rem;
-                height: 5rem;
-                margin-bottom: 10px;
-                cursor: pointer;
-            }
-
-            .icon-container {
-                width: 100%;
-                height: 100%;
-                background-color: var(--color-background-secondary);
-                color: var(--color-text-inverse);
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                border-radius: 50%;
-                position: relative;
-            }
-
-            .audio-icon {
-                width: 50%;
-                height: 50%;
-            }
-
-            .audio-player.playing .icon-container {
-                background-color: var(--color-brand-primary);
-            }
-
-            .voice-preview {
-                display: flex;
-                align-items: center;
-                margin-bottom: 1rem;
-            }
-
-            .voice-preview p {
-                margin-left: 10px;
-                font-weight: bold;
-                color: var(--color-text-primary);
-            }
-        </style>
-        """)
-
-        # Add JavaScript for handling play/pause
-        gr.HTML("""
-        <script>
-            function togglePlay(voice) {
-                const player = document.getElementById('audio-player-' + voice);
-                const container = document.getElementById('icon-container-' + voice);
-                const icon = document.getElementById('audio-icon-' + voice);
-                if (player.paused) {
-                    // Pause any other playing audios
-                    const audios = document.querySelectorAll('audio');
-                    audios.forEach(function(audio) {
-                        if (audio !== player) {
-                            audio.pause();
-                            audio.currentTime = 0;
-                            const otherVoice = audio.id.replace('audio-player-', '');
-                            document.getElementById('icon-container-' + otherVoice).classList.remove('playing');
-                            document.getElementById('audio-icon-' + otherVoice).innerHTML = playIcon;
-                        }
-                    });
-                    player.play();
-                    container.classList.add('playing');
-                    icon.innerHTML = pauseIcon;
-                } else {
-                    player.pause();
-                    container.classList.remove('playing');
-                    icon.innerHTML = playIcon;
-                }
-                player.onended = function() {
-                    container.classList.remove('playing');
-                    icon.innerHTML = playIcon;
-                };
-            }
-
-            const playIcon = `
-            <svg class="audio-icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M6.5 5.5v9l7-4.5-7-4.5z"/>
-            </svg>`;
-
-            const pauseIcon = `
-            <svg class="audio-icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M6 5h3v10H6V5zm5 0h3v10h-3V5z"/>
-            </svg>`;
-        </script>
-        """)
+    # This needs to be done before creating the Gradio app
+    gr.set_static_paths([PREVIEW_DIR])
 
+    with gr.Blocks() as demo:
         with gr.Row():
             with gr.Column(scale=1):
                 api_key_input = gr.Textbox(
@@ -170,29 +102,19 @@ def main():
                     choices=VOICE_OPTIONS, label="Voice Options", value="echo"
                 )
 
-                # Add voice previews using custom HTML audio players
+                # Add voice previews using HTML for minimal audio interface
                 gr.Markdown("### Voice Previews")
                 for voice in VOICE_OPTIONS:
                     # Use the relative path for the audio file
                     audio_url = f"file/{PREVIEW_DIR}/{voice}.wav"
-                    # Create custom HTML audio player
+                    # Create an HTML audio player with minimal controls
                     html_snippet = f'''
-                    <div class="voice-preview">
-                        <div class="audio-player" onclick="togglePlay('{voice}')">
-                            <div class="icon-container" id="icon-container-{voice}">
-                                <div id="audio-icon-{voice}">
-                                    <!-- Heroicon Play Button SVG -->
-                                    <svg class="audio-icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                        <path d="M6.5 5.5v9l7-4.5-7-4.5z"/>
-                                    </svg>
-                                </div>
-                            </div>
-                            <audio id="audio-player-{voice}" style="display:none;">
-                                <source src="{audio_url}" type="audio/wav">
-                                Your browser does not support the audio element.
-                            </audio>
-                        </div>
-                        <p>{voice.capitalize()}</p>
+                    <div>
+                        <p><strong>{voice.capitalize()}</strong></p>
+                        <audio controls preload="auto">
+                            <source src="{audio_url}" type="audio/wav">
+                            Your browser does not support the audio element.
+                        </audio>
                     </div>
                     '''
                     gr.HTML(html_snippet)
@@ -224,4 +146,4 @@ def main():
 
 
 if __name__ == "__main__":
-    main()
+    main()