Update app.py

app.py

@@ -5,7 +5,6 @@ import asyncio
 import tempfile
 import os
 import re
-import json
 
 # Get all available voices
 async def get_voices():
@@ -16,10 +15,8 @@ async def get_voices():
 def split_text_into_words(text):
     if not text.strip():
         return []
-    
-    # Split by words while preserving spaces and punctuation
-    words = re.findall(r'\S+|\s+', text)
-    return [word for word in words if word.strip()]
+    words = re.findall(r'\S+', text)
+    return words
 
 # Create interactive HTML with clickable words
 def create_interactive_text(text):
@@ -29,100 +26,93 @@ def create_interactive_text(text):
     words = split_text_into_words(text)
     
     html = f"""
-    <div id="interactive-text-container" style="line-height: 2; font-size: 16px; padding: 20px; border: 2px solid #e1f5fe; border-radius: 12px; background: linear-gradient(135deg, #f8fdff 0%, #e3f2fd 100%); box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+    <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 anywhere in the text below to start reading from that position
+                🎯 Click on any word below to start reading from that position
             </p>
         </div>
-        <div id="clickable-text" style="cursor: text; user-select: text;">
+        <div id="clickable-text" style="line-height: 1.6;">
     """
     
-    for i, word in enumerate(words):
-        if word.strip():  # Only make actual words clickable, not spaces
-            html += f'''<span class="word-segment" data-index="{i}" 
-                style="cursor: pointer; padding: 2px 1px; border-radius: 3px; transition: all 0.2s ease; display: inline;" 
-                onmouseover="this.style.backgroundColor='#bbdefb'; this.style.transform='scale(1.05)';" 
-                onmouseout="this.style.backgroundColor='transparent'; this.style.transform='scale(1)';" 
-                onclick="playFromWord({i})">{word}</span>'''
-        else:
-            html += word  # Preserve spaces as-is
+    # Reconstruct text with clickable words
+    text_with_indices = ""
+    word_index = 0
+    current_pos = 0
+    
+    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>
     
     <script>
-        let allWords = [];
-        let currentVoice = '';
-        let currentRate = 0;
-        let currentPitch = 0;
-        let isGenerating = false;
+        const originalText = `""" + text.replace('`', '\\`').replace('\\', '\\\\') + """`;
         
-        function updateWordsData(words, voice, rate, pitch) {
-            allWords = words;
-            currentVoice = voice;
-            currentRate = rate;
-            currentPitch = pitch;
-            console.log('Updated words data:', words.length, 'words');
-        }
-        
-        function highlightFromWord(startIndex) {
-            // Remove previous highlights
-            const segments = document.querySelectorAll('.word-segment');
-            segments.forEach(s => {
-                s.style.backgroundColor = 'transparent';
-                s.style.fontWeight = 'normal';
-            });
-            
-            // Highlight from clicked word onwards
-            for (let i = startIndex; i < segments.length; i++) {
-                segments[i].style.backgroundColor = '#c8e6c9';
-                segments[i].style.fontWeight = 'bold';
-            }
-        }
-        
-        function playFromWord(startIndex) {
-            if (allWords.length === 0) {
-                alert('Please generate the full audio first!');
-                return;
-            }
-            
-            if (isGenerating) {
-                alert('Audio is being generated, please wait...');
-                return;
-            }
-            
-            console.log('Playing from word index:', startIndex);
-            
-            // Highlight the selected portion
-            highlightFromWord(startIndex);
+        function handleWordClick(position, wordIndex) {
+            console.log('Word clicked at position:', position, 'word index:', wordIndex);
             
-            // Get text from selected word onwards
-            const textFromWord = allWords.slice(startIndex).join('');
+            // Get text from clicked position
+            const textFromPosition = originalText.substring(position);
+            console.log('Text from position:', textFromPosition.substring(0, 50) + '...');
             
-            console.log('Text from word:', textFromWord.substring(0, 100) + '...');
+            // Visual feedback - highlight from clicked word onwards
+            const allWords = document.querySelectorAll('.clickable-word');
             
-            // Trigger the partial audio generation
-            isGenerating = true;
+            // 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';
+                }
+            });
             
-            // Find the gradio interface elements and trigger the partial generation
-            const event = new CustomEvent('generatePartialAudio', {
+            // Trigger Gradio event by updating the textbox value
+            const event = new CustomEvent('wordClicked', {
                 detail: {
-                    text: textFromWord,
-                    voice: currentVoice,
-                    rate: currentRate,
-                    pitch: currentPitch,
-                    startIndex: startIndex
+                    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);
         }
         
-        // Reset generation flag when audio is ready
-        function resetGenerationFlag() {
-            isGenerating = false;
+        // Function to get clicked text (called by Gradio)
+        function getClickedText() {
+            return window.clickedText || '';
         }
     </script>
     """
@@ -137,7 +127,7 @@ async def text_to_speech(text, voice, rate, pitch):
         return None, "Please select a voice."
     
     try:
-        voice_short_name = voice.split(" - ")[0]
+        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)
@@ -146,220 +136,158 @@ async def text_to_speech(text, voice, rate, pitch):
             tmp_path = tmp_file.name
             await communicate.save(tmp_path)
         
-        return tmp_path, "Audio generated successfully!"
+        return tmp_path, "✅ Audio generated! Click any word in the text below to start from that position."
     except Exception as e:
-        return None, f"Error generating audio: {str(e)}"
+        return None, f"❌ Error: {str(e)}"
 
-# Main TTS interface
+# Generate full audio
 @spaces.GPU
 def generate_full_audio(text, voice, rate, pitch):
-    audio_path, message = asyncio.run(text_to_speech(text, voice, rate, pitch))
+    if not text.strip():
+        return None, "", "Please enter some text first."
+    if not voice:
+        return None, "", "Please select a voice."
     
-    # Create interactive text
+    audio_path, message = asyncio.run(text_to_speech(text, voice, rate, pitch))
     interactive_html = create_interactive_text(text)
     
-    # Prepare words data for JavaScript
-    words = split_text_into_words(text) if text.strip() else []
-    
-    # Add script to update JavaScript variables
-    if words and audio_path:
-        words_json = json.dumps(words).replace('"', '\\"')
-        interactive_html += f"""
-        <script>
-            setTimeout(() => {{
-                updateWordsData({json.dumps(words)}, "{voice}", {rate}, {pitch});
-                resetGenerationFlag();
-            }}, 500);
-        </script>
-        """
-    
     return audio_path, interactive_html, message
 
-# Partial audio generation (triggered by JavaScript)
-@spaces.GPU
-def generate_partial_audio(partial_text, voice, rate, pitch):
-    if not partial_text.strip():
-        return None, "No text to convert."
+# 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."
+    
+    print(f"Generating partial audio for: {clicked_text[:50]}...")  # Debug
+    
+    audio_path, message = asyncio.run(text_to_speech(clicked_text, voice, rate, pitch))
     
-    audio_path, message = asyncio.run(text_to_speech(partial_text, voice, rate, pitch))
-    return audio_path, message
+    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.Blocks(
-        title="Interactive Text-to-Speech", 
-        theme=gr.themes.Soft(),
-        css="""
-        .gradio-container {
-            max-width: 1200px !important;
-        }
-        #interactive-text-container {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        """
+        title="Interactive Text-to-Speech",
+        theme=gr.themes.Soft()
     ) as demo:
         
-        # Header
         gr.Markdown("""
-        # 🎤 Interactive Text-to-Speech System
-        ### Click anywhere in your text to start reading from that exact position!
+        # 🎤 Interactive Text-to-Speech
+        ## Click anywhere in your text to start reading from that position!
         """)
         
         with gr.Row():
             with gr.Column(scale=1):
-                # Input section
-                gr.Markdown("### 📝 Input Settings")
+                gr.Markdown("### 📝 Input")
                 text_input = gr.Textbox(
-                    label="Enter Your Text",
+                    label="Your Text",
                     lines=6,
-                    placeholder="Type or paste your text here. After generating audio, you'll be able to click anywhere in the text to start reading from that position...",
-                    value="Welcome to the interactive text-to-speech system. This amazing technology allows you to click on any word in this text and start playing the audio from that exact position. Try clicking anywhere after generating the audio!"
+                    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=list(voices.keys()),
-                    label="Select Voice",
-                    value=list(voices.keys())[0] if voices else ""
+                    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=1, label="Speed (%)")
-                    pitch_slider = gr.Slider(-20, 20, 0, step=1, label="Pitch (Hz)")
+                    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"
-                )
+                generate_btn = gr.Button("🎵 Generate Interactive Audio", variant="primary", size="lg")
                 
-                status_message = gr.Textbox(label="Status", interactive=False)
-            
             with gr.Column(scale=1):
-                # Output section
                 gr.Markdown("### 🔊 Audio Output")
-                full_audio = gr.Audio(label="Full Audio", type="filepath")
-                partial_audio = gr.Audio(label="Partial Audio (from clicked position)", type="filepath")
+                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)
         
-        # Interactive text display
-        gr.Markdown("### 🎯 Interactive Text")
+        gr.Markdown("### 🎯 Interactive Text (Click any word)")
         interactive_display = gr.HTML(
-            value="<p style='color: #666; font-style: italic; text-align: center; padding: 40px;'>Enter text above and click 'Generate Interactive Audio' to start!</p>"
+            value="<div style='text-align: center; padding: 40px; color: #666;'>📝 Generate audio first to see clickable text</div>"
         )
         
-        # Hidden components for partial audio generation
-        hidden_text = gr.Textbox(visible=False)
-        hidden_voice = gr.Textbox(visible=False)
-        hidden_rate = gr.Number(visible=False)
-        hidden_pitch = gr.Number(visible=False)
+        # 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_message]
+            outputs=[full_audio, interactive_display, status_box]
         )
         
-        # JavaScript for handling partial audio generation
+        # 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 setupPartialAudioGeneration() {
-            let partialAudioComponent = null;
-            let statusComponent = null;
-            
-            // Find components
-            setTimeout(() => {
-                const audioElements = document.querySelectorAll('audio');
-                if (audioElements.length > 1) {
-                    partialAudioComponent = audioElements[1]; // Second audio component
-                }
-                
-                const textInputs = document.querySelectorAll('textarea');
-                statusComponent = textInputs[textInputs.length - 1]; // Status textbox
-            }, 1000);
+        function setupClickHandler() {
+            console.log('Setting up click handler...');
             
-            document.addEventListener('generatePartialAudio', async function(e) {
-                const detail = e.detail;
-                console.log('Generating partial audio for:', detail.text.substring(0, 50) + '...');
+            // Function to update the hidden textbox when text is clicked
+            document.addEventListener('wordClicked', function(e) {
+                console.log('Word clicked event received:', e.detail);
                 
-                try {
-                    // Show status
-                    if (statusComponent) {
-                        statusComponent.value = `🎵 Generating audio from selected position...`;
-                    }
-                    
-                    // Make API call to generate partial audio
-                    const response = await fetch('/api/predict', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            data: [detail.text, detail.voice, detail.rate, detail.pitch],
-                            fn_index: 1 // Index for partial audio generation function
-                        })
-                    });
+                // 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 (response.ok) {
-                        const result = await response.json();
-                        console.log('Partial audio generated successfully');
-                        
-                        // Update status
-                        if (statusComponent) {
-                            statusComponent.value = `✅ Audio generated from selected position!`;
-                        }
+                    if (hiddenTextarea) {
+                        console.log('Found hidden textarea, updating with:', e.detail.text.substring(0, 50));
+                        hiddenTextarea.value = e.detail.text;
                         
-                        // Trigger audio update
-                        const audioUpdateEvent = new CustomEvent('updatePartialAudio', {
-                            detail: { audioPath: result.data[0] }
-                        });
-                        document.dispatchEvent(audioUpdateEvent);
+                        // 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.error('Failed to generate partial audio');
-                        if (statusComponent) {
-                            statusComponent.value = `❌ Failed to generate audio from selected position`;
-                        }
+                        console.log('Hidden textarea not found');
                     }
-                } catch (error) {
-                    console.error('Error:', error);
-                    if (statusComponent) {
-                        statusComponent.value = `❌ Error: ${error.message}`;
-                    }
-                }
-                
-                // Reset generation flag
-                resetGenerationFlag();
+                }, 200);
             });
         }
         
-        setupPartialAudioGeneration();
+        setupClickHandler();
         """)
-        
-        # Add a second function for partial audio generation
-        def handle_partial_generation(text, voice, rate, pitch):
-            return generate_partial_audio(text, voice, rate, pitch)
-        
-        # Create a hidden interface for partial audio generation
-        partial_interface = gr.Interface(
-            fn=handle_partial_generation,
-            inputs=[
-                gr.Textbox(visible=False),
-                gr.Textbox(visible=False), 
-                gr.Number(visible=False),
-                gr.Number(visible=False)
-            ],
-            outputs=[
-                gr.Audio(visible=False),
-                gr.Textbox(visible=False)
-            ],
-            live=False,
-            allow_flagging=False
-        )
     
     return demo
 
 # Run the application
 if __name__ == "__main__":
     demo = asyncio.run(create_demo())
-    demo.launch(share=True)
+    demo.launch(share=True, debug=True)