Update app.py

app.py

@@ -5,257 +5,361 @@ import asyncio
 import tempfile
 import os
 import re
+import json
 
 # 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 sentences for interactive clicking
-def split_text_into_segments(text):
-    # Split by sentences, keeping punctuation
-    segments = re.split(r'([.!?]+)', text)
-    result = []
-    current_segment = ""
-    
-    for i, segment in enumerate(segments):
-        if segment.strip():
-            if re.match(r'^[.!?]+$', segment):
-                current_segment += segment
-                if current_segment.strip():
-                    result.append(current_segment.strip())
-                current_segment = ""
-            else:
-                current_segment += segment
-    
-    if current_segment.strip():
-        result.append(current_segment.strip())
+# Split text into words for precise clicking
+def split_text_into_words(text):
+    if not text.strip():
+        return []
     
-    return [seg for seg in result if seg.strip()]
+    # Split by words while preserving spaces and punctuation
+    words = re.findall(r'\S+|\s+', text)
+    return [word for word in words if word.strip()]
 
-# Create interactive HTML with clickable text segments
+# Create interactive HTML with clickable words
 def create_interactive_text(text):
     if not text.strip():
-        return ""
+        return "<p style='color: #666; font-style: italic;'>Enter text and generate audio to see interactive text here...</p>"
     
-    segments = split_text_into_segments(text)
-    html_parts = []
+    words = split_text_into_words(text)
     
-    html_parts.append("""
-    <div id="interactive-text" style="line-height: 1.8; font-size: 16px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #f9f9f9;">
-        <p style="margin-bottom: 15px; font-weight: bold; color: #555;">Click on any part of the text to start playback from that position:</p>
-    """)
+    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 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
+            </p>
+        </div>
+        <div id="clickable-text" style="cursor: text; user-select: text;">
+    """
     
-    for i, segment in enumerate(segments):
-        html_parts.append(
-            f'<span class="text-segment" data-index="{i}" style="cursor: pointer; padding: 2px 4px; margin: 1px; border-radius: 3px; transition: background-color 0.2s;" '
-            f'onmouseover="this.style.backgroundColor=\'#e3f2fd\'" '
-            f'onmouseout="this.style.backgroundColor=\'transparent\'" '
-            f'onclick="playFromSegment({i})">{segment} </span>'
-        )
+    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
     
-    html_parts.append("""
+    html += """
+        </div>
     </div>
+    
     <script>
-        let currentSegments = [];
-        let currentSettings = {};
+        let allWords = [];
+        let currentVoice = '';
+        let currentRate = 0;
+        let currentPitch = 0;
+        let isGenerating = false;
         
-        function updateSegments(segments, voice, rate, pitch) {
-            currentSegments = segments;
-            currentSettings = {voice: voice, rate: rate, pitch: pitch};
+        function updateWordsData(words, voice, rate, pitch) {
+            allWords = words;
+            currentVoice = voice;
+            currentRate = rate;
+            currentPitch = pitch;
+            console.log('Updated words data:', words.length, 'words');
         }
         
-        async function playFromSegment(startIndex) {
-            if (!currentSegments || currentSegments.length === 0) {
-                alert('Please generate the full audio first to enable interactive playback.');
+        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;
             }
             
-            // Highlight clicked segment
-            const segments = document.querySelectorAll('.text-segment');
-            segments.forEach(s => s.style.backgroundColor = 'transparent');
-            segments[startIndex].style.backgroundColor = '#bbdefb';
+            if (isGenerating) {
+                alert('Audio is being generated, please wait...');
+                return;
+            }
+            
+            console.log('Playing from word index:', startIndex);
+            
+            // Highlight the selected portion
+            highlightFromWord(startIndex);
             
-            // Get text from selected segment onwards
-            const textFromSegment = currentSegments.slice(startIndex).join(' ');
+            // Get text from selected word onwards
+            const textFromWord = allWords.slice(startIndex).join('');
             
-            // Trigger partial audio generation
-            const event = new CustomEvent('playFromSegment', {
+            console.log('Text from word:', textFromWord.substring(0, 100) + '...');
+            
+            // Trigger the partial audio generation
+            isGenerating = true;
+            
+            // Find the gradio interface elements and trigger the partial generation
+            const event = new CustomEvent('generatePartialAudio', {
                 detail: {
-                    text: textFromSegment,
-                    voice: currentSettings.voice,
-                    rate: currentSettings.rate,
-                    pitch: currentSettings.pitch,
+                    text: textFromWord,
+                    voice: currentVoice,
+                    rate: currentRate,
+                    pitch: currentPitch,
                     startIndex: startIndex
                 }
             });
+            
             document.dispatchEvent(event);
         }
+        
+        // Reset generation flag when audio is ready
+        function resetGenerationFlag() {
+            isGenerating = false;
+        }
     </script>
-    """)
+    """
     
-    return ''.join(html_parts)
+    return html
 
 # Text-to-speech function
 async def text_to_speech(text, voice, rate, pitch):
     if not text.strip():
-        return None, gr.Warning("Please enter text to convert.")
+        return None, "Please enter text to convert."
     if not voice:
-        return None, gr.Warning("Please select a voice.")
+        return None, "Please select a voice."
     
-    voice_short_name = voice.split(" - ")[0]
-    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, None
+    try:
+        voice_short_name = voice.split(" - ")[0]
+        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 successfully!"
+    except Exception as e:
+        return None, f"Error generating audio: {str(e)}"
 
-# Gradio interface function for full text
+# Main TTS interface
 @spaces.GPU
-def tts_interface(text, voice, rate, pitch):
-    audio, warning = asyncio.run(text_to_speech(text, voice, rate, pitch))
+def generate_full_audio(text, voice, rate, pitch):
+    audio_path, message = asyncio.run(text_to_speech(text, voice, rate, pitch))
     
-    # Create interactive text display
+    # Create interactive text
     interactive_html = create_interactive_text(text)
     
-    # Prepare segments for JavaScript
-    segments = split_text_into_segments(text) if text.strip() else []
+    # Prepare words data for JavaScript
+    words = split_text_into_words(text) if text.strip() else []
     
-    # Add JavaScript to update segments
-    if segments:
+    # Add script to update JavaScript variables
+    if words and audio_path:
+        words_json = json.dumps(words).replace('"', '\\"')
         interactive_html += f"""
         <script>
             setTimeout(() => {{
-                updateSegments({segments}, '{voice}', {rate}, {pitch});
-            }}, 100);
+                updateWordsData({json.dumps(words)}, "{voice}", {rate}, {pitch});
+                resetGenerationFlag();
+            }}, 500);
         </script>
         """
     
-    return audio, interactive_html, warning
+    return audio_path, interactive_html, message
 
-# Gradio interface function for partial text (from clicked segment)
+# Partial audio generation (triggered by JavaScript)
 @spaces.GPU
-def tts_partial_interface(text, voice, rate, pitch):
-    if not text or not voice:
-        return None, gr.Warning("Missing text or voice selection.")
+def generate_partial_audio(partial_text, voice, rate, pitch):
+    if not partial_text.strip():
+        return None, "No text to convert."
     
-    audio, warning = asyncio.run(text_to_speech(text, voice, rate, pitch))
-    return audio, warning
+    audio_path, message = asyncio.run(text_to_speech(partial_text, voice, rate, pitch))
+    return audio_path, message
 
-# Create Gradio application
+# Create the Gradio application
 async def create_demo():
     voices = await get_voices()
     
-    description = """
-    Experience the power of Voicecloning.be for text-to-speech conversion with interactive text playback.
-    
-    **How to use:**
-    1. Enter your text and select voice settings
-    2. Click "Generate Full Audio" to create the complete audio
-    3. Click on any part of the displayed text to start playback from that position
-    """
-    
-    with gr.Blocks(title="Interactive Text-to-Speech", theme=gr.themes.Soft()) as demo:
-        gr.Markdown("# 🎤 Interactive Text-to-Speech")
-        gr.Markdown(description)
+    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;
+        }
+        """
+    ) as demo:
+        
+        # Header
+        gr.Markdown("""
+        # 🎤 Interactive Text-to-Speech System
+        ### Click anywhere in your text to start reading from that exact position!
+        """)
         
         with gr.Row():
-            with gr.Column(scale=2):
+            with gr.Column(scale=1):
+                # Input section
+                gr.Markdown("### 📝 Input Settings")
                 text_input = gr.Textbox(
-                    label="Input Text", 
-                    lines=8, 
-                    placeholder="Enter the text you want to convert to speech..."
+                    label="Enter 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!"
                 )
                 
-                with gr.Row():
-                    voice_dropdown = gr.Dropdown(
-                        choices=[""] + list(voices.keys()), 
-                        label="Select Voice", 
-                        value=""
-                    )
+                voice_dropdown = gr.Dropdown(
+                    choices=list(voices.keys()),
+                    label="Select Voice",
+                    value=list(voices.keys())[0] if voices else ""
+                )
                 
                 with gr.Row():
-                    rate_slider = gr.Slider(
-                        minimum=-50, 
-                        maximum=50, 
-                        value=0, 
-                        label="Speech Rate (%)", 
-                        step=1
-                    )
-                    pitch_slider = gr.Slider(
-                        minimum=-20, 
-                        maximum=20, 
-                        value=0, 
-                        label="Pitch (Hz)", 
-                        step=1
-                    )
+                    rate_slider = gr.Slider(-50, 50, 0, step=1, label="Speed (%)")
+                    pitch_slider = gr.Slider(-20, 20, 0, step=1, label="Pitch (Hz)")
                 
                 generate_btn = gr.Button(
-                    "🎵 Generate Full Audio", 
-                    variant="primary", 
+                    "🎵 Generate Interactive Audio",
+                    variant="primary",
                     size="lg"
                 )
+                
+                status_message = gr.Textbox(label="Status", interactive=False)
             
-            with gr.Column(scale=2):
-                full_audio_output = gr.Audio(
-                    label="🔊 Full Audio", 
-                    type="filepath"
-                )
-                partial_audio_output = gr.Audio(
-                    label="🎯 Partial Audio (from clicked position)", 
-                    type="filepath"
-                )
+            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")
         
         # Interactive text display
-        interactive_text_display = gr.HTML(
-            label="📝 Interactive Text (Click to play from position)",
-            value="<p style='color: #666; font-style: italic;'>Generate audio first to see interactive text here...</p>"
+        gr.Markdown("### 🎯 Interactive Text")
+        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>"
         )
         
-        # Warning display
-        warning_display = gr.Markdown(visible=False)
-        
         # Hidden components for partial audio generation
-        partial_text = gr.Textbox(visible=False)
-        partial_voice = gr.Textbox(visible=False)
-        partial_rate = gr.Number(visible=False)
-        partial_pitch = gr.Number(visible=False)
+        hidden_text = gr.Textbox(visible=False)
+        hidden_voice = gr.Textbox(visible=False)
+        hidden_rate = gr.Number(visible=False)
+        hidden_pitch = gr.Number(visible=False)
         
         # Event handlers
         generate_btn.click(
-            fn=tts_interface,
+            fn=generate_full_audio,
             inputs=[text_input, voice_dropdown, rate_slider, pitch_slider],
-            outputs=[full_audio_output, interactive_text_display, warning_display]
+            outputs=[full_audio, interactive_display, status_message]
         )
         
-        # JavaScript to handle segment clicks
+        # JavaScript for handling partial audio generation
         demo.load(js="""
-        function setupInteractiveText() {
-            document.addEventListener('playFromSegment', async function(e) {
-                const detail = e.detail;
+        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
+                }
                 
-                // Update hidden inputs
-                const partialTextInput = document.querySelector('textarea[data-testid="textbox"]').parentElement.parentElement.parentElement.querySelector('textarea');
-                const partialVoiceInput = document.querySelector('input[type="text"]');
+                const textInputs = document.querySelectorAll('textarea');
+                statusComponent = textInputs[textInputs.length - 1]; // Status textbox
+            }, 1000);
+            
+            document.addEventListener('generatePartialAudio', async function(e) {
+                const detail = e.detail;
+                console.log('Generating partial audio for:', detail.text.substring(0, 50) + '...');
                 
-                // Trigger partial audio generation through Gradio
-                // This is a simplified approach - in a full implementation, you'd need to properly integrate with Gradio's state management system
-                console.log('Playing from segment:', detail.startIndex);
-                console.log('Text:', detail.text);
+                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
+                        })
+                    });
+                    
+                    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!`;
+                        }
+                        
+                        // Trigger audio update
+                        const audioUpdateEvent = new CustomEvent('updatePartialAudio', {
+                            detail: { audioPath: result.data[0] }
+                        });
+                        document.dispatchEvent(audioUpdateEvent);
+                        
+                    } else {
+                        console.error('Failed to generate partial audio');
+                        if (statusComponent) {
+                            statusComponent.value = `❌ Failed to generate audio from selected position`;
+                        }
+                    }
+                } catch (error) {
+                    console.error('Error:', error);
+                    if (statusComponent) {
+                        statusComponent.value = `❌ Error: ${error.message}`;
+                    }
+                }
                 
-                // For now, show an alert with the functionality
-                alert(`Playing from segment ${detail.startIndex + 1}:\\n\\n"${detail.text.substring(0, 100)}${detail.text.length > 100 ? '...' : ''}"`);
+                // Reset generation flag
+                resetGenerationFlag();
             });
         }
         
-        setTimeout(setupInteractiveText, 1000);
+        setupPartialAudioGeneration();
         """)
+        
+        # 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()
+    demo.launch(share=True)