Upload folder using huggingface_hub

app.py

@@ -4,23 +4,8 @@ import openai
 import requests
 import os
 
-
 def tts(input_text: str, model: str, voice: str, api_key: str) -> str:
-    """
-    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.
-    """
+    # (Same as before)
     if not api_key.strip():
         raise gr.Error(
             "API key is required. Get an API key at: https://platform.openai.com/account/api-keys"
@@ -34,10 +19,8 @@ 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"):
@@ -51,11 +34,7 @@ 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"]
 
@@ -83,10 +62,99 @@ def main():
         VOICE_PREVIEW_FILES[voice] = local_file_path
 
     # Set static paths for Gradio to serve
-    # This needs to be done before creating the Gradio app
-    gr.set_static_paths([PREVIEW_DIR])
+    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>
+        """)
 
-    with gr.Blocks() as demo:
         with gr.Row():
             with gr.Column(scale=1):
                 api_key_input = gr.Textbox(
@@ -102,19 +170,29 @@ def main():
                     choices=VOICE_OPTIONS, label="Voice Options", value="echo"
                 )
 
-                # Add voice previews using HTML for minimal audio interface
+                # Add voice previews using custom HTML audio players
                 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 an HTML audio player with minimal controls
+                    # Create custom HTML audio player
                     html_snippet = f'''
-                    <div style="margin-bottom: 10px;">
-                        <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 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>
                     '''
                     gr.HTML(html_snippet)
@@ -146,4 +224,4 @@ def main():
 
 
 if __name__ == "__main__":
-    main()
+    main()