Upload folder using huggingface_hub

app.py

@@ -2,6 +2,7 @@ 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:
@@ -59,12 +60,74 @@ def main():
     VOICE_OPTIONS = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"]
 
     # Predefine voice previews URLs
-    VOICE_PREVIEWS = {
+    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
+
+    # Map URLs to local file paths for Gradio to serve
+    static_file_mappings = {
+        f"/static/voice_previews/{voice}.wav": path
+        for voice, path in VOICE_PREVIEW_FILES.items()
+    }
+
     with gr.Blocks() as demo:
+        # Include global CSS styles for the audio elements
+        gr.HTML("""
+        <style>
+        /* Hide unnecessary controls in the audio player */
+        audio::-webkit-media-controls-enclosure {
+            overflow: hidden;
+        }
+        /* Hide specific controls in WebKit browsers (Chrome, Safari) */
+        audio::-webkit-media-controls-current-time-display,
+        audio::-webkit-media-controls-time-remaining-display,
+        audio::-webkit-media-controls-timeline,
+        audio::-webkit-media-controls-volume-slider-container,
+        audio::-webkit-media-controls-fullscreen-button,
+        audio::-webkit-media-controls-mute-button,
+        audio::-webkit-media-controls-volume-slider,
+        audio::-webkit-media-controls-timeline-container,
+        audio::-webkit-media-controls-seek-back-button,
+        audio::-webkit-media-controls-seek-forward-button,
+        audio::-webkit-media-controls-rewind-button,
+        audio::-webkit-media-controls-return-to-realtime-button,
+        audio::-webkit-media-controls-toggle-closed-captions-button {
+            display: none;
+        }
+        /* Hide specific controls in Mozilla Firefox */
+        audio:not([controls]) {
+            display: none;
+        }
+        audio::-moz-volume-slider,
+        audio::-moz-volume-box {
+            display: none;
+        }
+        /* Set the width of the play button */
+        audio {
+            width: 50px; /* Adjust as needed */
+            height: 30px; /* Adjust as needed */
+        }
+        </style>
+        """)
+
         with gr.Row():
             with gr.Column(scale=1):
                 api_key_input = gr.Textbox(
@@ -83,12 +146,12 @@ def main():
                 # Add voice previews using HTML for minimal audio interface
                 gr.Markdown("### Voice Previews")
                 for voice in VOICE_OPTIONS:
-                    audio_url = VOICE_PREVIEWS[voice]
+                    audio_url = f"/file/voice_previews/{voice}.wav"
                     # Create an HTML audio player with minimal controls
                     html_snippet = f'''
                     <div style="margin-bottom: 10px;">
                         <p><strong>{voice.capitalize()}</strong></p>
-                        <audio controls style="width: 100%;">
+                        <audio controls preload="auto" controlsList="nodownload nofullscreen noremoteplayback" style="width: 50px; height: 30px;">
                             <source src="{audio_url}" type="audio/wav">
                             Your browser does not support the audio element.
                         </audio>
@@ -118,9 +181,9 @@ def main():
             outputs=output_audio,
         )
 
-    # Launch the Gradio app with error display enabled
-    demo.launch(show_error=True)
+    # Launch the Gradio app with error display enabled and static file mappings
+    demo.launch(show_error=True, static_files=static_file_mappings)
 
 
 if __name__ == "__main__":
-    main()
+    main()