Update app.py

app.py

@@ -1,159 +1,161 @@
+import spaces
 import gradio as gr
 import edge_tts
 import asyncio
-from typing import Optional
+import tempfile
 import os
+import re
+from pydub import AudioSegment
+import numpy as np
 
-# Global variables to manage playback
-current_playback_task = None
-current_position = 0
-stop_playback_flag = False
+# Get all available voices
+async def get_voices():
+    voices = await edge_tts.list_voices()
+    return {f"{v['ShortName']} - {v['Locale']} ({v['Gender']})": v['ShortName'] for v in voices}
 
-async def text_to_speech(text: str, play_from: int = 0, voice: str = "en-US-GuyNeural") -> tuple[str, str]:
-    global current_playback_task, current_position, stop_playback_flag
+# Text-to-speech function with word timing estimation
+async def text_to_speech(text, voice, rate, pitch):
+    if not text.strip():
+        return None, None, gr.Warning("Please enter text to convert.")
+    if not voice:
+        return None, None, gr.Warning("Please select a voice.")
     
-    # Stop any ongoing playback
-    stop_playback()
+    voice_short_name = voice.split(" - ")[0]
+    rate_str = f"{rate:+d}%"
+    pitch_str = f"{pitch:+d}Hz"
     
-    # Get only the text from the specified position
-    text_to_read = text[play_from:]
-    current_position = play_from
+    # Generate full audio
+    communicate = edge_tts.Communicate(text, voice_short_name, rate=rate_str, pitch=pitch_str)
+    with tempfile.NamedTemporaryFile(delete=False, suffix=".mp3") as tmp_file:
+        tmp_path = tmp_file.name
+        await communicate.save(tmp_path)
     
-    # Create a new playback task
-    current_playback_task = asyncio.create_task(play_audio(text_to_read, voice))
-    
-    return text, f"Playing from position {play_from}..."
-
-async def play_audio(text: str, voice: str):
-    try:
-        communicate = edge_tts.Communicate(text, voice)
-        async for chunk in communicate.stream():
-            if stop_playback_flag:
-                break
-    except Exception as e:
-        print(f"Playback error: {e}")
-
-def stop_playback():
-    global current_playback_task, stop_playback_flag
-    if current_playback_task:
-        stop_playback_flag = True
-        current_playback_task.cancel()
-        stop_playback_flag = False
-
-def handle_word_click(word_index: int, text: str, voice: str) -> tuple[str, str]:
-    global current_position
+    # Estimate word timings
+    audio = AudioSegment.from_file(tmp_path)
+    duration = len(audio) / 1000.0  # in seconds
+    words = re.findall(r'\b\w+\b', text)
+    n_words = len(words)
+    word_timings = []
     
-    # Convert word index to character position
-    words = text.split()
-    if word_index < len(words):
-        # Find the character position of the clicked word
-        char_pos = 0
+    if n_words > 0:
+        time_per_word = duration / n_words
         for i, word in enumerate(words):
-            if i == word_index:
-                break
-            char_pos += len(word) + 1  # +1 for the space
-        
-        # Start playback from this position
-        return asyncio.run(text_to_speech(text, char_pos, voice))
-    return text, "Invalid word selection"
-
-async def get_voices():
-    voices = await edge_tts.list_voices()
-    return [v["ShortName"] for v in voices if v["Locale"].startswith("en-")]
-
-# JavaScript for interactive text
-js = """
-function splitText(text) {
-    if (!text) return '';
-    const words = text.split(' ');
-    return words.map((word, index) => {
-        return `<span class="word" data-index="${index}" 
-                style="cursor:pointer; margin-right:5px;" 
-                onmouseover="this.style.backgroundColor='#f0f0f0'" 
-                onmouseout="this.style.backgroundColor='transparent'"
-                onclick="handleWordClick(this)">${word}</span>`;
-    }).join(' ');
-}
-
-function handleWordClick(element) {
-    const index = element.getAttribute('data-index');
-    document.getElementById('word-index').value = index;
-    document.getElementById('word-index').dispatchEvent(new Event('input'));
-}
-
-function updateTextDisplay(text) {
-    const container = document.getElementById('text-display');
-    container.innerHTML = splitText(text);
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    // Update display when text changes
-    const textInput = document.querySelector('#text-input textarea');
-    if (textInput) {
-        textInput.addEventListener('input', function() {
-            updateTextDisplay(this.value);
-        });
-    }
-});
-"""
-
-css = """
-.word:hover { background-color: #f0f0f0; }
-#text-display { 
-    padding: 10px; 
-    border: 1px solid #ccc; 
-    border-radius: 5px; 
-    min-height: 100px;
-    white-space: pre-wrap;
-}
-"""
-
-with gr.Blocks(js=js, css=css) as demo:
-    gr.Markdown("# Interactive TTS Service (edge-tts)")
-    gr.Markdown("Enter text below and click 'Speak' to hear it. Click on any word to start playback from that point.")
-    
-    with gr.Row():
-        text_input = gr.Textbox(label="Input Text", lines=5, elem_id="text-input")
-        word_index = gr.Number(visible=False, elem_id="word-index")
+            start_time = i * time_per_word
+            end_time = (i + 1) * time_per_word
+            word_timings.append({
+                "word": word,
+                "start": start_time,
+                "end": end_time
+            })
     
-    with gr.Row():
-        text_display = gr.HTML(elem_id="text-display")
+    # Create clickable transcript HTML
+    transcript_html = ""
+    for i, wt in enumerate(word_timings):
+        transcript_html += f'<span class="word" data-start="{wt["start"]}" data-end="{wt["end"]}" data-index="{i}">{wt["word"]}</span> '
     
-    with gr.Row():
-        voice_dropdown = gr.Dropdown(label="Voice", choices=asyncio.run(get_voices()), value="en-US-GuyNeural")
-        rate_slider = gr.Slider(50, 200, value=100, label="Speed (%)")
-    
-    with gr.Row():
-        speak_btn = gr.Button("Speak", variant="primary")
-        stop_btn = gr.Button("Stop")
+    return tmp_path, transcript_html, None
+
+# Gradio interface function
+@spaces.GPU
+def tts_interface(text, voice, rate, pitch):
+    audio_file, transcript, warning = asyncio.run(text_to_speech(text, voice, rate, pitch))
+    return audio_file, transcript, warning
+
+# Create Gradio application
+async def create_demo():
+    voices = await get_voices()
     
-    status = gr.Textbox(label="Status", interactive=False)
+    description = """
+    Experience the power of Voicecloning.be for text-to-speech conversion.
+    <br><b>NEW:</b> Click on any word in the transcript to start playback from that position!
+    """
     
-    # Event handlers - updated syntax for Gradio 5.32.0
-    text_input.change(
-        lambda x: x,
-        inputs=text_input,
-        outputs=text_display,
-        js="(x) => { updateTextDisplay(x); return x; }"
-    )
+    # JavaScript for interactive transcript
+    js = """
+    <script>
+        function handleWordClick(event) {
+            const audio = document.querySelector('#audio-player audio');
+            const start = parseFloat(event.target.dataset.start);
+            if (!isNaN(start) && audio) {
+                audio.currentTime = start;
+                audio.play();
+                
+                // Highlight clicked word
+                document.querySelectorAll('.word').forEach(w => 
+                    w.style.backgroundColor = 'transparent');
+                event.target.style.backgroundColor = '#e6f7ff';
+            }
+        }
+        
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelectorAll('.word').forEach(word => {
+                word.addEventListener('click', handleWordClick);
+            });
+        });
+    </script>
+    """
     
-    word_index.input(
-        handle_word_click,
-        inputs=[word_index, text_input, voice_dropdown],
-        outputs=[text_input, status]
-    )
+    css = """
+    .word {
+        cursor: pointer;
+        padding: 2px 4px;
+        border-radius: 4px;
+        transition: background-color 0.3s;
+    }
+    .word:hover {
+        background-color: #f0f0f0;
+    }
+    #transcript-container {
+        max-height: 200px;
+        overflow-y: auto;
+        border: 1px solid #e0e0e0;
+        padding: 10px;
+        border-radius: 4px;
+        margin-top: 10px;
+    }
+    """
     
-    speak_btn.click(
-        lambda text, voice: asyncio.run(text_to_speech(text, 0, voice)),
-        inputs=[text_input, voice_dropdown],
-        outputs=[text_input, status]
-    )
+    with gr.Blocks(css=css) as demo:
+        gr.Markdown("# Voicecloning.be Text-to-Speech")
+        gr.Markdown(description)
+        
+        with gr.Row():
+            with gr.Column():
+                text_input = gr.Textbox(label="Input Text", lines=5)
+                voice_dropdown = gr.Dropdown(
+                    choices=[""] + list(voices.keys()), 
+                    label="Select Voice", 
+                    value=""
+                )
+                rate_slider = gr.Slider(
+                    minimum=-50, maximum=50, value=0, 
+                    label="Speech Rate Adjustment (%)", step=1
+                )
+                pitch_slider = gr.Slider(
+                    minimum=-20, maximum=20, value=0, 
+                    label="Pitch Adjustment (Hz)", step=1
+                )
+                submit_btn = gr.Button("Generate Speech", variant="primary")
+                
+            with gr.Column():
+                audio_output = gr.Audio(label="Generated Audio", elem_id="audio-player")
+                transcript_output = gr.HTML(
+                    label="Interactive Transcript", 
+                    elem_id="transcript-container"
+                )
+                warning_output = gr.Markdown(visible=False)
+        
+        submit_btn.click(
+            fn=tts_interface,
+            inputs=[text_input, voice_dropdown, rate_slider, pitch_slider],
+            outputs=[audio_output, transcript_output, warning_output]
+        )
+        
+        gr.HTML(js)
     
-    stop_btn.click(
-        stop_playback,
-        outputs=status,
-        js="() => { return 'Playback stopped'; }"
-    )
+    return demo
 
+# Run the application
 if __name__ == "__main__":
+    demo = asyncio.run(create_demo())
     demo.launch()