Update app.py

app.py

@@ -1,293 +1,159 @@
-import spaces
 import gradio as gr
 import edge_tts
 import asyncio
-import tempfile
+from typing import Optional
 import os
-import re
 
-# 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}
-
-# Split text into words for precise clicking
-def split_text_into_words(text):
-    if not text.strip():
-        return []
-    words = re.findall(r'\S+', text)
-    return words
+# Global variables to manage playback
+current_playback_task = None
+current_position = 0
+stop_playback_flag = False
 
-# Create interactive HTML with clickable words
-def create_interactive_text(text):
-    if not text.strip():
-        return "<p style='color: #666; font-style: italic;'>Enter text and generate audio to see interactive text here...</p>"
-    
-    words = split_text_into_words(text)
-    
-    html = f"""
-    <div id="interactive-text-container" style="line-height: 1.8; font-size: 16px; padding: 20px; border: 2px solid #2196f3; border-radius: 12px; background: linear-gradient(135deg, #f8fdff 0%, #e3f2fd 100%); margin: 10px 0;">
-        <div style="margin-bottom: 15px; padding: 10px; background: rgba(33, 150, 243, 0.1); border-radius: 8px; text-align: center;">
-            <p style="margin: 0; font-weight: bold; color: #1976d2; font-size: 14px;">
-                🎯 Click on any word below to start reading from that position
-            </p>
-        </div>
-        <div id="clickable-text" style="line-height: 1.6;">
-    """
+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
     
-    # Reconstruct text with clickable words
-    text_with_indices = ""
-    word_index = 0
-    current_pos = 0
+    # Stop any ongoing playback
+    stop_playback()
     
-    for match in re.finditer(r'(\S+)(\s*)', text):
-        word = match.group(1)
-        space = match.group(2)
-        
-        text_with_indices += f'''<span class="clickable-word" 
-            data-index="{word_index}" 
-            data-position="{current_pos}" 
-            style="cursor: pointer; padding: 1px 2px; border-radius: 3px; transition: all 0.2s; display: inline-block; margin: 1px;" 
-            onmouseover="this.style.backgroundColor='#bbdefb'; this.style.transform='scale(1.05)';" 
-            onmouseout="this.style.backgroundColor='transparent'; this.style.transform='scale(1)';" 
-            onclick="handleWordClick({current_pos}, {word_index})">{word}</span>{space}'''
-        
-        word_index += 1
-        current_pos = match.end()
-    
-    html += text_with_indices
-    html += """
-        </div>
-    </div>
+    # Get only the text from the specified position
+    text_to_read = text[play_from:]
+    current_position = play_from
     
-    <script>
-        const originalText = `""" + text.replace('`', '\\`').replace('\\', '\\\\') + """`;
-        
-        function handleWordClick(position, wordIndex) {
-            console.log('Word clicked at position:', position, 'word index:', wordIndex);
-            
-            // Get text from clicked position
-            const textFromPosition = originalText.substring(position);
-            console.log('Text from position:', textFromPosition.substring(0, 50) + '...');
-            
-            // Visual feedback - highlight from clicked word onwards
-            const allWords = document.querySelectorAll('.clickable-word');
-            
-            // Reset all highlights
-            allWords.forEach((word, index) => {
-                if (index >= wordIndex) {
-                    word.style.backgroundColor = '#c8e6c9';
-                    word.style.fontWeight = 'bold';
-                } else {
-                    word.style.backgroundColor = 'transparent';
-                    word.style.fontWeight = 'normal';
-                }
-            });
-            
-            // Trigger Gradio event by updating the textbox value
-            const event = new CustomEvent('wordClicked', {
-                detail: {
-                    text: textFromPosition,
-                    position: position,
-                    wordIndex: wordIndex
-                }
-            });
-            
-            // Store in window for access by Gradio
-            window.clickedText = textFromPosition;
-            window.clickedPosition = position;
-            
-            // Dispatch custom event
-            document.dispatchEvent(event);
-            
-            // Also try to find and update hidden textbox directly
-            setTimeout(() => {
-                const hiddenTextarea = document.querySelector('textarea[data-testid="textbox"]:not([style*="display: block"])');
-                if (hiddenTextarea) {
-                    hiddenTextarea.value = textFromPosition;
-                    hiddenTextarea.dispatchEvent(new Event('input', { bubbles: true }));
-                }
-            }, 100);
-        }
-        
-        // Function to get clicked text (called by Gradio)
-        function getClickedText() {
-            return window.clickedText || '';
-        }
-    </script>
-    """
+    # Create a new playback task
+    current_playback_task = asyncio.create_task(play_audio(text_to_read, voice))
     
-    return html
+    return text, f"Playing from position {play_from}..."
 
-# Text-to-speech function
-async def text_to_speech(text, voice, rate, pitch):
-    if not text.strip():
-        return None, "Please enter text to convert."
-    if not voice:
-        return None, "Please select a voice."
-    
+async def play_audio(text: str, voice: str):
     try:
-        voice_short_name = voice.split(" - ")[0] if " - " in voice else voice
-        rate_str = f"{rate:+d}%"
-        pitch_str = f"{pitch:+d}Hz"
-        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)
-        
-        return tmp_path, "✅ Audio generated! Click any word in the text below to start from that position."
+        communicate = edge_tts.Communicate(text, voice)
+        async for chunk in communicate.stream():
+            if stop_playback_flag:
+                break
     except Exception as e:
-        return None, f"❌ Error: {str(e)}"
+        print(f"Playback error: {e}")
 
-# Generate full audio
-@spaces.GPU
-def generate_full_audio(text, voice, rate, pitch):
-    if not text.strip():
-        return None, "", "Please enter some text first."
-    if not voice:
-        return None, "", "Please select a voice."
-    
-    audio_path, message = asyncio.run(text_to_speech(text, voice, rate, pitch))
-    interactive_html = create_interactive_text(text)
+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
     
-    return audio_path, interactive_html, message
+    # 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
+        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(' ');
+}
 
-# Generate partial audio - this will be called when text is clicked
-@spaces.GPU 
-def generate_partial_audio(clicked_text, voice, rate, pitch):
-    if not clicked_text or not clicked_text.strip():
-        return None, "No text was clicked."
+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.")
     
-    print(f"Generating partial audio for: {clicked_text[:50]}...")  # Debug
+    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")
     
-    audio_path, message = asyncio.run(text_to_speech(clicked_text, voice, rate, pitch))
+    with gr.Row():
+        text_display = gr.HTML(elem_id="text-display")
     
-    if audio_path:
-        return audio_path, f"🎵 Playing from clicked position: '{clicked_text[:30]}...'"
-    else:
-        return None, f"❌ Failed to generate audio: {message}"
-
-# Function to handle click events (bridge between JS and Python)
-def handle_text_click(full_text, voice, rate, pitch):
-    # This function will be called by JavaScript
-    # JavaScript will pass the clicked text through a hidden component
-    return "Click detected - processing..."
-
-# Create the Gradio application
-async def create_demo():
-    voices = await get_voices()
-    voice_choices = list(voices.keys())
+    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.Blocks(
-        title="Interactive Text-to-Speech",
-        theme=gr.themes.Soft()
-    ) as demo:
-        
-        gr.Markdown("""
-        # 🎤 Interactive Text-to-Speech
-        ## Click anywhere in your text to start reading from that position!
-        """)
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("### 📝 Input")
-                text_input = gr.Textbox(
-                    label="Your Text",
-                    lines=6,
-                    value="Hello and welcome to the interactive text-to-speech system. This incredible technology allows you to click on any word in this sentence and the system will start reading from exactly that position. Try it out by first generating the audio, then clicking anywhere in this text to hear it read from that point!"
-                )
-                
-                voice_dropdown = gr.Dropdown(
-                    choices=voice_choices,
-                    label="Voice",
-                    value=voice_choices[0] if voice_choices else None
-                )
-                
-                with gr.Row():
-                    rate_slider = gr.Slider(-50, 50, 0, step=5, label="Speed (%)")
-                    pitch_slider = gr.Slider(-20, 20, 0, step=2, label="Pitch (Hz)")
-                
-                generate_btn = gr.Button("🎵 Generate Interactive Audio", variant="primary", size="lg")
-                
-            with gr.Column(scale=1):
-                gr.Markdown("### 🔊 Audio Output")
-                full_audio = gr.Audio(label="Full Audio")
-                partial_audio = gr.Audio(label="Audio from Clicked Position")
-                status_box = gr.Textbox(label="Status", interactive=False, lines=2)
-        
-        gr.Markdown("### 🎯 Interactive Text (Click any word)")
-        interactive_display = gr.HTML(
-            value="<div style='text-align: center; padding: 40px; color: #666;'>📝 Generate audio first to see clickable text</div>"
-        )
-        
-        # Hidden textbox to capture clicked text
-        clicked_text_box = gr.Textbox(visible=False, interactive=True)
-        
-        # Create a polling mechanism to check for clicks
-        def check_for_clicks(current_clicked_text, voice, rate, pitch):
-            if current_clicked_text and current_clicked_text.strip():
-                # Generate audio for the clicked text
-                return generate_partial_audio(current_clicked_text, voice, rate, pitch)
-            return None, "Waiting for text click..."
-        
-        # Event handlers
-        generate_btn.click(
-            fn=generate_full_audio,
-            inputs=[text_input, voice_dropdown, rate_slider, pitch_slider],
-            outputs=[full_audio, interactive_display, status_box]
-        )
-        
-        # Monitor the hidden textbox for changes (when JavaScript updates it)
-        clicked_text_box.change(
-            fn=check_for_clicks,
-            inputs=[clicked_text_box, voice_dropdown, rate_slider, pitch_slider],
-            outputs=[partial_audio, status_box]
-        )
-        
-        # Add JavaScript to bridge the gap
-        demo.load(js="""
-        function setupClickHandler() {
-            console.log('Setting up click handler...');
-            
-            // Function to update the hidden textbox when text is clicked
-            document.addEventListener('wordClicked', function(e) {
-                console.log('Word clicked event received:', e.detail);
-                
-                // Find the hidden textbox and update its value
-                setTimeout(() => {
-                    const textareas = document.querySelectorAll('textarea');
-                    const hiddenTextarea = Array.from(textareas).find(ta => 
-                        ta.style.display === 'none' || 
-                        ta.parentElement.style.display === 'none' ||
-                        ta.closest('[style*="display: none"]')
-                    );
-                    
-                    if (hiddenTextarea) {
-                        console.log('Found hidden textarea, updating with:', e.detail.text.substring(0, 50));
-                        hiddenTextarea.value = e.detail.text;
-                        
-                        // Trigger the change event
-                        const event = new Event('input', { bubbles: true });
-                        hiddenTextarea.dispatchEvent(event);
-                        
-                        // Also try blur event
-                        setTimeout(() => {
-                            hiddenTextarea.dispatchEvent(new Event('blur', { bubbles: true }));
-                        }, 100);
-                    } else {
-                        console.log('Hidden textarea not found');
-                    }
-                }, 200);
-            });
-        }
-        
-        setupClickHandler();
-        """)
+    with gr.Row():
+        speak_btn = gr.Button("Speak", variant="primary")
+        stop_btn = gr.Button("Stop")
+    
+    status = gr.Textbox(label="Status", interactive=False)
+    
+    # Event handlers
+    text_input.change(
+        fn=lambda x: x,
+        inputs=text_input,
+        outputs=text_display,
+        _js="(x) => { updateTextDisplay(x); return x; }"
+    )
+    
+    word_index.change(
+        fn=handle_word_click,
+        inputs=[word_index, text_input, voice_dropdown],
+        outputs=[text_input, status]
+    )
+    
+    speak_btn.click(
+        fn=lambda text, voice: asyncio.run(text_to_speech(text, 0, voice)),
+        inputs=[text_input, voice_dropdown],
+        outputs=[text_input, status]
+    )
     
-    return demo
+    stop_btn.click(
+        fn=stop_playback,
+        outputs=status,
+        _js="() => { return 'Playback stopped'; }"
+    )
 
-# Run the application
 if __name__ == "__main__":
-    demo = asyncio.run(create_demo())
-    demo.launch(share=True, debug=True)
+    demo.launch()