Spaces:
Running
Running
| import gradio as gr | |
| import tempfile | |
| import openai | |
| import requests | |
| import os | |
| def tts(input_text: str, model: str, voice: str, api_key: str) -> str: | |
| # (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" | |
| ) | |
| if not input_text.strip(): | |
| raise gr.Error("Input text cannot be empty.") | |
| openai.api_key = api_key | |
| try: | |
| response = openai.Audio.create(text=input_text, voice=voice, model=model) | |
| except openai.OpenAIError as e: | |
| raise gr.Error(f"An OpenAI error occurred: {e}") | |
| except Exception as e: | |
| raise gr.Error(f"An unexpected error occurred: {e}") | |
| if not hasattr(response, "audio"): | |
| raise gr.Error( | |
| "Invalid response from OpenAI API. The response does not contain audio content." | |
| ) | |
| with tempfile.NamedTemporaryFile(suffix=".mp3", delete=False) as temp_file: | |
| temp_file.write(response.audio) | |
| temp_file_path = temp_file.name | |
| return temp_file_path | |
| def main(): | |
| MODEL_OPTIONS = ["tts-1", "tts-1-hd"] | |
| VOICE_OPTIONS = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"] | |
| # Predefine voice previews URLs | |
| VOICE_PREVIEW_URLS = { | |
| voice: f"https://cdn.openai.com/API/docs/audio/{voice}.wav" | |
| for voice in VOICE_OPTIONS | |
| } | |
| # Download audio previews to disk before initiating the interface | |
| PREVIEW_DIR = "voice_previews" | |
| os.makedirs(PREVIEW_DIR, exist_ok=True) | |
| VOICE_PREVIEW_FILES = {} | |
| for voice, url in VOICE_PREVIEW_URLS.items(): | |
| local_file_path = os.path.join(PREVIEW_DIR, f"{voice}.wav") | |
| if not os.path.exists(local_file_path): | |
| try: | |
| response = requests.get(url) | |
| response.raise_for_status() | |
| with open(local_file_path, "wb") as f: | |
| f.write(response.content) | |
| except requests.exceptions.RequestException as e: | |
| print(f"Failed to download {voice} preview: {e}") | |
| 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> | |
| """) | |
| with gr.Row(): | |
| with gr.Column(scale=1): | |
| api_key_input = gr.Textbox( | |
| label="OpenAI API Key", | |
| info="https://platform.openai.com/account/api-keys", | |
| type="password", | |
| placeholder="Enter your OpenAI API Key", | |
| ) | |
| model_dropdown = gr.Dropdown( | |
| choices=MODEL_OPTIONS, label="Model", value="tts-1" | |
| ) | |
| voice_dropdown = gr.Dropdown( | |
| choices=VOICE_OPTIONS, label="Voice Options", value="echo" | |
| ) | |
| # 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 custom HTML audio player | |
| 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> | |
| ''' | |
| gr.HTML(html_snippet) | |
| with gr.Column(scale=2): | |
| input_textbox = gr.Textbox( | |
| label="Input Text", lines=10, placeholder="Type your text here..." | |
| ) | |
| submit_button = gr.Button( | |
| "Convert Text to Speech", variant="primary" | |
| ) | |
| with gr.Column(scale=1): | |
| output_audio = gr.Audio(label="Output Audio") | |
| # Define the event handler for the submit button with error handling | |
| def on_submit(input_text, model, voice, api_key): | |
| audio_file = tts(input_text, model, voice, api_key) | |
| return audio_file | |
| # Trigger the conversion when the submit button is clicked | |
| submit_button.click( | |
| fn=on_submit, | |
| inputs=[input_textbox, model_dropdown, voice_dropdown, api_key_input], | |
| outputs=output_audio, | |
| ) | |
| # Launch the Gradio app with error display enabled | |
| demo.launch(show_error=True) | |
| if __name__ == "__main__": | |
| main() | |