feat: voice preview

Author: dbccccccc

server/api.py

@@ -13,7 +13,7 @@
 import random
 from utils.config import load_config
 
-from server.handlers import handle_openai_speech, handle_queue_size, handle_static, process_tts_request
+from server.handlers import handle_openai_speech, handle_queue_size, handle_static, process_tts_request, handle_voice_sample
 
 # Configure logging
 logging.basicConfig(
@@ -72,6 +72,7 @@ def setup_routes(self):
         # OpenAI compatible endpoint
         self.app.router.add_post('/v1/audio/speech', self._handle_openai_speech)
         self.app.router.add_get('/api/queue-size', self._handle_queue_size)
+        self.app.router.add_get('/api/voice-sample/{voice}', handle_voice_sample)
         self.app.router.add_get('/{tail:.*}', handle_static)
 
     async def _handle_openai_speech(self, request):

server/handlers.py

@@ -30,6 +30,9 @@
 MAX_REQUESTS_PER_WINDOW = config['rate_limit_requests']
 ip_request_counts = defaultdict(list)
 
+# Voice samples directory
+VOICE_SAMPLES_DIR = Path('voices')
+
 def _get_headers() -> Dict[str, str]:
     """Generate more realistic browser headers with rotation"""
     browsers = [
@@ -364,4 +367,39 @@ async def handle_static(request: web.Request) -> web.Response:
 
     except Exception as e:
         logger.error(f"Error serving static file: {str(e)}")
-        return web.Response(text=str(e), status=500) 
+        return web.Response(text=str(e), status=500)
+
+async def handle_voice_sample(request: web.Request) -> web.Response:
+    """Handle GET requests for voice samples."""
+    try:
+        voice = request.match_info.get('voice')
+        if not voice:
+            return web.Response(
+                text=json.dumps({"error": "Voice parameter is required"}),
+                status=400,
+                content_type="application/json"
+            )
+            
+        sample_path = VOICE_SAMPLES_DIR / f"{voice}_sample.mp3"
+        if not sample_path.exists():
+            return web.Response(
+                text=json.dumps({"error": f"Sample not found for voice: {voice}"}),
+                status=404,
+                content_type="application/json"
+            )
+            
+        return web.FileResponse(
+            path=sample_path,
+            headers={
+                "Content-Type": "audio/mpeg",
+                "Access-Control-Allow-Origin": "*"
+            }
+        )
+        
+    except Exception as e:
+        logger.error(f"Error serving voice sample: {str(e)}")
+        return web.Response(
+            text=json.dumps({"error": str(e)}),
+            status=500,
+            content_type="application/json"
+        ) 

static/index.html

@@ -85,6 +85,10 @@ <h2>Try It Out</h2>
                             <label for="playground-text">Text to Convert</label>
                             <textarea id="playground-text" rows="4" placeholder="Enter the text you want to convert to speech..."></textarea>
                         </div>
+                        <div class="form-group">
+                            <label for="playground-instructions">Instructions</label>
+                            <textarea id="playground-instructions" rows="2" placeholder="e.g., Speak in a cheerful and upbeat tone"></textarea>
+                        </div>
                         <div class="form-group">
                             <label for="playground-voice">Voice</label>
                             <select id="playground-voice">
@@ -101,17 +105,20 @@ <h2>Try It Out</h2>
                                 <option value="verse">Verse</option>
                             </select>
                         </div>
-                        <div class="form-group">
-                            <label for="playground-instructions">Instructions (Optional)</label>
-                            <textarea id="playground-instructions" rows="2" placeholder="e.g., Speak in a cheerful and upbeat tone"></textarea>
-                        </div>
                         <button id="playground-submit" class="playground-button">
                             <i class="fas fa-play"></i> Generate Speech
                         </button>
                     </div>
                     <div class="playground-output">
-                        <div id="playground-status" class="playground-status"></div>
-                        <div id="playground-audio" class="playground-audio"></div>
+                        <div class="audio-section">
+                            <h3>Voice Preview</h3>
+                            <div id="preview-audio" class="audio-player"></div>
+                        </div>
+                        <div class="audio-section">
+                            <h3>Generated Result</h3>
+                            <div id="playground-status" class="playground-status"></div>
+                            <div id="playground-audio" class="audio-player"></div>
+                        </div>
                     </div>
                 </div>
             </section>

static/index_zh.html

@@ -85,6 +85,10 @@ <h2>立即体验</h2>
                             <label for="playground-text">要转换的文本</label>
                             <textarea id="playground-text" rows="4" placeholder="输入要转换为语音的文本..."></textarea>
                         </div>
+                        <div class="form-group">
+                            <label for="playground-instructions">指令</label>
+                            <textarea id="playground-instructions" rows="2" placeholder="例如：用欢快和兴奋的语气说话"></textarea>
+                        </div>
                         <div class="form-group">
                             <label for="playground-voice">语音</label>
                             <select id="playground-voice">
@@ -101,17 +105,20 @@ <h2>立即体验</h2>
                                 <option value="verse">Verse</option>
                             </select>
                         </div>
-                        <div class="form-group">
-                            <label for="playground-instructions">指令（可选）</label>
-                            <textarea id="playground-instructions" rows="2" placeholder="例如：用欢快和兴奋的语气说话"></textarea>
-                        </div>
                         <button id="playground-submit" class="playground-button">
                             <i class="fas fa-play"></i> 生成语音
                         </button>
                     </div>
                     <div class="playground-output">
-                        <div id="playground-status" class="playground-status"></div>
-                        <div id="playground-audio" class="playground-audio"></div>
+                        <div class="audio-section">
+                            <h3>语音预览</h3>
+                            <div id="preview-audio" class="audio-player"></div>
+                        </div>
+                        <div class="audio-section">
+                            <h3>生成结果</h3>
+                            <div id="playground-status" class="playground-status"></div>
+                            <div id="playground-audio" class="audio-player"></div>
+                        </div>
                     </div>
                 </div>
             </section>

static/script.js

@@ -260,4 +260,51 @@ document.addEventListener('DOMContentLoaded', function() {
         statusDiv.textContent = message;
         statusDiv.className = `playground-status ${type}`;
     }
+});
+
+// Voice sample functionality
+let currentSampleAudio = null;
+
+// Function to load and play voice sample
+async function loadVoiceSample(voice) {
+    const previewAudioDiv = document.getElementById('preview-audio');
+    
+    try {
+        // Create new audio element
+        const response = await fetch(`/api/voice-sample/${voice}`);
+        if (!response.ok) {
+            throw new Error(`Failed to load voice sample: ${response.statusText}`);
+        }
+        
+        const blob = await response.blob();
+        const audioUrl = URL.createObjectURL(blob);
+        
+        // Create and configure audio element
+        currentSampleAudio = document.createElement('audio');
+        currentSampleAudio.controls = true;
+        currentSampleAudio.src = audioUrl;
+        
+        // Clear previous audio and add new one
+        previewAudioDiv.innerHTML = '';
+        previewAudioDiv.appendChild(currentSampleAudio);
+        
+    } catch (error) {
+        console.error('Error loading voice sample:', error);
+        // Show error in status
+        const statusDiv = document.getElementById('playground-status');
+        statusDiv.innerHTML = `<div class="error-message">Error loading voice sample: ${error.message}</div>`;
+    }
+}
+
+// Add voice selection change handler
+document.getElementById('playground-voice').addEventListener('change', function() {
+    loadVoiceSample(this.value);
+});
+
+// Load initial voice sample when page loads
+document.addEventListener('DOMContentLoaded', function() {
+    const voiceSelect = document.getElementById('playground-voice');
+    if (voiceSelect) {
+        loadVoiceSample(voiceSelect.value);
+    }
 }); 

static/styles.css

@@ -1108,6 +1108,7 @@ code[class*="language-"] {
     justify-content: center;
     gap: 0.5rem;
     transition: background-color 0.2s ease;
+    margin-top: 1rem;
 }
 
 .playground-button:hover {
@@ -1122,13 +1123,41 @@ code[class*="language-"] {
 .playground-output {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 2rem;
 }
 
-.playground-status {
+.audio-section {
+    background-color: #f8fafc;
+    border-radius: 8px;
+    padding: 1.5rem;
+}
+
+.audio-section h3 {
+    color: #2c3e50;
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+}
+
+.audio-player {
+    background-color: white;
+    border-radius: 6px;
     padding: 1rem;
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e2e8f0;
+}
+
+.audio-player audio {
+    width: 100%;
+}
+
+.playground-status {
+    padding: 0.75rem;
     border-radius: 6px;
     font-size: 0.9rem;
+    margin-bottom: 1rem;
 }
 
 .playground-status.error {
@@ -1143,28 +1172,47 @@ code[class*="language-"] {
     border: 1px solid #dcfce7;
 }
 
-.playground-audio {
-    background-color: #f8fafc;
-    border-radius: 6px;
-    padding: 1rem;
-    min-height: 100px;
+.voice-select-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.voice-select-container select {
+    flex: 1;
+}
+
+.sample-button {
+    background-color: #4a90e2;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.playground-audio audio {
-    width: 100%;
-    max-width: 400px;
+.sample-button:hover {
+    background-color: #357abd;
+}
+
+.sample-button:active {
+    background-color: #2d6da3;
+}
+
+.sample-button i {
+    font-size: 14px;
 }
 
 @media (max-width: 768px) {
     .playground-container {
         grid-template-columns: 1fr;
     }
-}
-
-.indicator-error {
-    background-color: var(--error-color);
-    animation: pulse 2s infinite;
+    
+    .playground-output {
+        gap: 1.5rem;
+    }
 }