ss

app.py

@@ -6,6 +6,7 @@ import numpy as np
 import re
 import pronouncing  # Add this to requirements.txt for syllable counting
 import functools  # Add this for lru_cache functionality
+import json  # Add this for JSON serialization
 from transformers import (
     AutoModelForAudioClassification,
     AutoFeatureExtractor,
@@ -2298,6 +2299,109 @@ Improved lyrics with fixed rhythm:
     
     return lyrics
 
+def prepare_beat_synced_lyrics(audio_data, lyrics, beats_info):
+    """
+    Prepare data for the beat-synced lyrics viewer
+    
+    Parameters:
+        audio_data: Dictionary containing audio features
+        lyrics: String containing generated lyrics
+        beats_info: Dictionary containing beat analysis data
+        
+    Returns:
+        Dictionary containing data for the beat-synced lyrics viewer
+    """
+    # Extract necessary data for visualization
+    beat_times = beats_info.get("beat_times", [])
+    beat_strengths = beats_info.get("beat_strengths", [1.0] * len(beat_times))
+    tempo = beats_info.get("tempo", 120)
+    
+    # Clean lyrics - remove section markers and annotations
+    clean_lyrics = lyrics
+    if isinstance(lyrics, str):
+        # Remove "[Verse]", "[Chorus]", etc.
+        clean_lyrics = re.sub(r'\[\w+\]', '', lyrics)
+        # Remove any rhythm analysis notes
+        if "[Note:" in clean_lyrics:
+            clean_lyrics = clean_lyrics.split("[Note:")[0].strip()
+        # Remove any rhythm analysis section
+        if "[RHYTHM_ANALYSIS_SECTION]" in clean_lyrics:
+            clean_lyrics = clean_lyrics.split("[RHYTHM_ANALYSIS_SECTION]")[0].strip()
+    
+    # Split into lines
+    lines = [line.strip() for line in clean_lyrics.split('\n') if line.strip()]
+    
+    # Split each line into words and estimate timing
+    lyrics_data = []
+    
+    # Estimate start time for lyrics - allow a small intro period
+    lyrics_start_time = beat_times[0] if len(beat_times) > 0 else 0
+    
+    # Simple approach: distribute lines evenly across available beats
+    if len(lines) > 0 and len(beat_times) > 0:
+        beats_per_line = max(1, len(beat_times) // len(lines))
+        
+        for i, line in enumerate(lines):
+            # Determine beat range for this line
+            start_beat_idx = min(i * beats_per_line, len(beat_times) - 1)
+            end_beat_idx = min(start_beat_idx + beats_per_line, len(beat_times) - 1)
+            
+            # Get time range
+            line_start_time = beat_times[start_beat_idx]
+            line_end_time = beat_times[end_beat_idx] if end_beat_idx < len(beat_times) else audio_data["duration"]
+            
+            # Split line into words
+            words = re.findall(r'\b\w+\b|-|\s+|[^\w\s]', line)
+            filtered_words = [w for w in words if w.strip()]
+            
+            if filtered_words:
+                # Distribute words across beats for this line
+                word_data = []
+                
+                # Get beat times for this line
+                line_beat_times = beat_times[start_beat_idx:end_beat_idx+1]
+                if len(line_beat_times) < 2:
+                    line_beat_times = [line_start_time, line_end_time]
+                
+                # Distribute words evenly if we have enough beats
+                if len(filtered_words) <= len(line_beat_times):
+                    for j, word in enumerate(filtered_words):
+                        beat_idx = min(j, len(line_beat_times) - 1)
+                        word_time = line_beat_times[beat_idx]
+                        word_data.append({
+                            "text": word,
+                            "time": word_time,
+                            "is_strong": j == 0 or word[0].isupper()  # Simple heuristic for strong beats
+                        })
+                else:
+                    # More words than beats, distribute evenly
+                    word_duration = (line_end_time - line_start_time) / len(filtered_words)
+                    for j, word in enumerate(filtered_words):
+                        word_time = line_start_time + j * word_duration
+                        word_data.append({
+                            "text": word,
+                            "time": word_time,
+                            "is_strong": j == 0 or word[0].isupper()
+                        })
+                
+                lyrics_data.append({
+                    "line": line,
+                    "start_time": line_start_time,
+                    "end_time": line_end_time,
+                    "words": word_data
+                })
+    
+    # Create visualization data
+    visualization_data = {
+        "duration": audio_data["duration"],
+        "tempo": tempo,
+        "beat_times": beat_times,
+        "beat_strengths": beat_strengths,
+        "lyrics_data": lyrics_data
+    }
+    
+    return visualization_data
+
 def process_audio(audio_file):
     """Main function to process audio file, classify genre, and generate lyrics with enhanced rhythm analysis."""
     if audio_file is None:
@@ -2524,7 +2628,17 @@ def process_audio(audio_file):
     except Exception as e:
         error_msg = f"Error processing audio: {str(e)}"
         print(error_msg)
-        return error_msg, None, []
+        
+        # Use a raw string literal to avoid f-string backslash issues
+        error_html = """<script>
+            document.getElementById('beat-sync-container').removeAttribute('data-sync-info');
+            document.getElementById('loading-message').style.display = 'block';
+            document.getElementById('loading-message').innerText = 'Error processing audio';
+            document.getElementById('beat-sync-timeline').style.display = 'none';
+            document.getElementById('lyrics-display').style.display = 'none';
+        </script>"""
+        
+        return error_msg, "Error in emotion analysis", "Error in audio classification", "No lyrics generated", "No rhythm analysis available", audio_file, error_html, "No syllable analysis available", "No prompt template available"
 
 # Create enhanced Gradio interface with tabs for better organization
 with gr.Blocks(title="Music Genre Classifier & Lyrics Generator") as demo:
@@ -2569,6 +2683,290 @@ with gr.Blocks(title="Music Genre Classifier & Lyrics Generator") as demo:
                 with gr.TabItem("Rhythm Analysis"):
                     rhythm_analysis_output = gr.Textbox(label="Syllable-Beat Alignment Analysis", lines=16)
                 
+                with gr.TabItem("Beat-Synced Lyrics"):
+                    # Create a container for the beat-synced lyrics viewer
+                    synced_audio_output = gr.Audio(label="Playback with Synced Lyrics", type="filepath")
+                    
+                    # Create a custom JavaScript component for the beat-synced lyrics viewer
+                    lyrics_viewer_html = gr.HTML(
+                        """
+                        <div id="beat-sync-container" style="width:100%; height:400px; position:relative;">
+                            <div id="loading-message">Please analyze audio to view beat-synced lyrics</div>
+                            <div id="beat-sync-timeline" style="display:none; width:100%; height:80px; background:#f0f0f0; position:relative; overflow:hidden; margin-bottom:10px;">
+                                <div id="playhead" style="position:absolute; width:2px; height:100%; background:red; top:0; left:0; z-index:10;"></div>
+                                <div id="beat-markers" style="position:absolute; width:100%; height:100%; top:0; left:0;"></div>
+                            </div>
+                            <div id="lyrics-display" style="display:none; width:100%; height:300px; overflow-y:auto; font-size:16px; line-height:1.6;"></div>
+                        </div>
+                        
+                        <script>
+                        let beatSyncData = null;
+                        let isPlaying = false;
+                        let audioElement = null;
+                        let playheadInterval = null;
+                        let lastHighlightedWord = -1;
+                        
+                        function initBeatSyncViewer(data) {
+                            beatSyncData = data;
+                            const container = document.getElementById('beat-sync-container');
+                            const timeline = document.getElementById('beat-sync-timeline');
+                            const beatMarkers = document.getElementById('beat-markers');
+                            const lyricsDisplay = document.getElementById('lyrics-display');
+                            const loadingMessage = document.getElementById('loading-message');
+                            
+                            // Clear previous content
+                            beatMarkers.innerHTML = '';
+                            lyricsDisplay.innerHTML = '';
+                            
+                            // Show the viewer elements, hide loading message
+                            loadingMessage.style.display = 'none';
+                            timeline.style.display = 'block';
+                            lyricsDisplay.style.display = 'block';
+                            
+                            // Create beat markers
+                            const duration = data.duration;
+                            const beatTimes = data.beat_times;
+                            const beatStrengths = data.beat_strengths;
+                            
+                            if (beatTimes && beatTimes.length > 0) {
+                                for (let i = 0; i < beatTimes.length; i++) {
+                                    const beatTime = beatTimes[i];
+                                    const beatStrength = beatStrengths && beatStrengths[i] ? beatStrengths[i] : 1.0;
+                                    const position = (beatTime / duration) * 100;
+                                    
+                                    // Create marker with height based on beat strength
+                                    const marker = document.createElement('div');
+                                    const height = 30 + (beatStrength * 50); // Scale between 30-80px
+                                    
+                                    marker.className = 'beat-marker';
+                                    marker.style.position = 'absolute';
+                                    marker.style.left = `${position}%`;
+                                    marker.style.top = `${(80 - height) / 2}px`;
+                                    marker.style.width = '2px';
+                                    marker.style.height = `${height}px`;
+                                    marker.style.background = beatStrength > 0.7 ? '#2d7dd2' : '#97c6e3';
+                                    marker.setAttribute('data-time', beatTime);
+                                    
+                                    beatMarkers.appendChild(marker);
+                                }
+                            }
+                            
+                            // Create lyrics display
+                            if (data.lyrics_data && data.lyrics_data.length > 0) {
+                                for (let i = 0; i < data.lyrics_data.length; i++) {
+                                    const line = data.lyrics_data[i];
+                                    const lineElement = document.createElement('div');
+                                    lineElement.className = 'lyric-line';
+                                    lineElement.style.marginBottom = '15px';
+                                    
+                                    // Create word elements for the line
+                                    line.words.forEach((word, j) => {
+                                        const wordSpan = document.createElement('span');
+                                        wordSpan.innerText = word.text + ' ';
+                                        wordSpan.className = 'lyric-word';
+                                        wordSpan.style.display = 'inline-block';
+                                        wordSpan.style.transition = 'color 0.1s, transform 0.1s';
+                                        wordSpan.setAttribute('data-time', word.time);
+                                        wordSpan.setAttribute('data-word-index', j);
+                                        wordSpan.setAttribute('data-line-index', i);
+                                        
+                                        if (word.is_strong) {
+                                            wordSpan.style.fontWeight = 'bold';
+                                        }
+                                        
+                                        lineElement.appendChild(wordSpan);
+                                    });
+                                    
+                                    lyricsDisplay.appendChild(lineElement);
+                                }
+                            } else {
+                                lyricsDisplay.innerHTML = '<p>No lyrics data available or could not align lyrics with beats.</p>';
+                            }
+                            
+                            // Add timeline click/drag handler for scrubbing
+                            timeline.addEventListener('click', function(e) {
+                                if (!audioElement) return;
+                                
+                                const rect = timeline.getBoundingClientRect();
+                                const clickPosition = (e.clientX - rect.left) / rect.width;
+                                const newTime = clickPosition * duration;
+                                
+                                // Set audio to new position
+                                audioElement.currentTime = newTime;
+                                
+                                // Update playhead and lyrics
+                                updatePlayhead(newTime);
+                                highlightLyricsAtTime(newTime);
+                            });
+                        }
+                        
+                        function connectAudio(audioSelector) {
+                            // Find the audio element from Gradio's component
+                            const audioContainer = document.querySelector(audioSelector);
+                            if (!audioContainer) return;
+                            
+                            audioElement = audioContainer.querySelector('audio');
+                            if (!audioElement) return;
+                            
+                            // Add event listeners to the audio element
+                            audioElement.addEventListener('play', startPlayheadMovement);
+                            audioElement.addEventListener('pause', stopPlayheadMovement);
+                            audioElement.addEventListener('ended', stopPlayheadMovement);
+                            audioElement.addEventListener('seeked', function() {
+                                updatePlayhead(audioElement.currentTime);
+                                highlightLyricsAtTime(audioElement.currentTime);
+                            });
+                        }
+                        
+                        function startPlayheadMovement() {
+                            isPlaying = true;
+                            if (playheadInterval) clearInterval(playheadInterval);
+                            
+                            playheadInterval = setInterval(() => {
+                                if (!audioElement || !isPlaying) return;
+                                updatePlayhead(audioElement.currentTime);
+                                highlightLyricsAtTime(audioElement.currentTime);
+                            }, 50); // Update every 50ms
+                        }
+                        
+                        function stopPlayheadMovement() {
+                            isPlaying = false;
+                            if (playheadInterval) {
+                                clearInterval(playheadInterval);
+                                playheadInterval = null;
+                            }
+                        }
+                        
+                        function updatePlayhead(currentTime) {
+                            if (!beatSyncData) return;
+                            
+                            const playhead = document.getElementById('playhead');
+                            const position = (currentTime / beatSyncData.duration) * 100;
+                            playhead.style.left = `${position}%`;
+                        }
+                        
+                        function highlightLyricsAtTime(currentTime) {
+                            if (!beatSyncData || !beatSyncData.lyrics_data) return;
+                            
+                            // Reset all word styling
+                            const words = document.querySelectorAll('.lyric-word');
+                            words.forEach(word => {
+                                word.style.color = 'black';
+                                word.style.transform = 'scale(1)';
+                            });
+                            
+                            // Find the current word to highlight
+                            let currentWordElement = null;
+                            let bestTimeDiff = Infinity;
+                            
+                            words.forEach(word => {
+                                const wordTime = parseFloat(word.getAttribute('data-time'));
+                                
+                                // Highlight words that have already been passed or are coming up soon
+                                if (wordTime <= currentTime + 0.2) {
+                                    const timeDiff = Math.abs(wordTime - currentTime);
+                                    
+                                    // Mark past words as "read"
+                                    if (wordTime < currentTime - 0.5) {
+                                        word.style.color = '#666666';
+                                    }
+                                    
+                                    // Find the closest word to current time
+                                    if (timeDiff < bestTimeDiff) {
+                                        bestTimeDiff = timeDiff;
+                                        currentWordElement = word;
+                                    }
+                                }
+                            });
+                            
+                            // Highlight current word
+                            if (currentWordElement) {
+                                currentWordElement.style.color = '#e63946';
+                                currentWordElement.style.transform = 'scale(1.1)';
+                                
+                                // Scroll to keep the current line visible
+                                const lineIndex = parseInt(currentWordElement.getAttribute('data-line-index'));
+                                const lineElement = document.querySelectorAll('.lyric-line')[lineIndex];
+                                
+                                if (lineElement) {
+                                    const lyricsDisplay = document.getElementById('lyrics-display');
+                                    const displayRect = lyricsDisplay.getBoundingClientRect();
+                                    const lineRect = lineElement.getBoundingClientRect();
+                                    
+                                    // Check if the line is outside the visible area
+                                    if (lineRect.top < displayRect.top || lineRect.bottom > displayRect.bottom) {
+                                        lineElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                    }
+                                }
+                            }
+                        }
+                        
+                        // Wait for Gradio to fully load the components
+                        function waitForGradio() {
+                            // Connect to the audio element when available
+                            setTimeout(() => {
+                                connectAudio('#component-17'); // Replace with the actual selector
+                                
+                                // Check for data updates from Gradio
+                                const observer = new MutationObserver((mutations) => {
+                                    for (const mutation of mutations) {
+                                        if (mutation.type === 'attributes' && 
+                                            mutation.target.id === 'beat-sync-container' && 
+                                            mutation.target.hasAttribute('data-sync-info')) {
+                                            
+                                            const dataStr = mutation.target.getAttribute('data-sync-info');
+                                            try {
+                                                const data = JSON.parse(dataStr);
+                                                initBeatSyncViewer(data);
+                                            } catch (e) {
+                                                console.error('Error parsing beat sync data:', e);
+                                            }
+                                        }
+                                    }
+                                });
+                                
+                                observer.observe(document.getElementById('beat-sync-container'), { 
+                                    attributes: true, 
+                                    attributeFilter: ['data-sync-info'] 
+                                });
+                                
+                                // Try to find all audio elements and add a more robust connection method
+                                function tryConnectAudio() {
+                                    const audioElements = document.querySelectorAll('audio');
+                                    for (const audio of audioElements) {
+                                        if (audio.parentElement.closest('#component-17') || 
+                                            audio.parentElement.closest('.beat-synced-lyrics-tab')) {
+                                            audioElement = audio;
+                                            audioElement.addEventListener('play', startPlayheadMovement);
+                                            audioElement.addEventListener('pause', stopPlayheadMovement);
+                                            audioElement.addEventListener('ended', stopPlayheadMovement);
+                                            audioElement.addEventListener('seeked', function() {
+                                                updatePlayhead(audioElement.currentTime);
+                                                highlightLyricsAtTime(audioElement.currentTime);
+                                            });
+                                            return true;
+                                        }
+                                    }
+                                    return false;
+                                }
+                                
+                                // Keep trying until we find the audio element
+                                if (!tryConnectAudio()) {
+                                    setTimeout(tryConnectAudio, 1000);  // Retry after 1 second
+                                }
+                            }, 2000);
+                        }
+                        
+                        // Initialize when DOM is ready
+                        if (document.readyState === 'loading') {
+                            document.addEventListener('DOMContentLoaded', waitForGradio);
+                        } else {
+                            waitForGradio();
+                        }
+                        </script>
+                        """
+                    )
+                
                 with gr.TabItem("Syllable Analysis"):
                     syllable_analysis_output = gr.Textbox(label="Detailed Syllable Analysis", lines=16)
                     prompt_template_output = gr.Textbox(label="Prompt Template", lines=16)
@@ -2576,7 +2974,12 @@ with gr.Blocks(title="Music Genre Classifier & Lyrics Generator") as demo:
     # Processing function with better handling of results
     def display_results(audio_file):
         if audio_file is None:
-            return "Please upload an audio file.", "No emotion analysis available.", "No audio classification available.", "No lyrics generated.", "No rhythm analysis available.", "No syllable analysis available.", "No prompt template available."
+            return "Please upload an audio file.", "No emotion analysis available.", "No audio classification available.", "No lyrics generated.", "No rhythm analysis available.", audio_file, """<script>
+                document.getElementById('beat-sync-container').removeAttribute('data-sync-info');
+                document.getElementById('loading-message').style.display = 'block';
+                document.getElementById('beat-sync-timeline').style.display = 'none';
+                document.getElementById('lyrics-display').style.display = 'none';
+            </script>""", "No syllable analysis available.", "No prompt template available."
         
         try:
             # Process audio and get results
@@ -2584,9 +2987,19 @@ with gr.Blocks(title="Music Genre Classifier & Lyrics Generator") as demo:
             
             # Check if we got an error message instead of results
             if isinstance(results, str) and "Error" in results:
-                return results, "Error in analysis", "Error in classification", "No lyrics generated", "No rhythm analysis available", "No syllable analysis available", "No prompt template available"
+                return results, "Error in analysis", "Error in classification", "No lyrics generated", "No rhythm analysis available", audio_file, """<script>
+                    document.getElementById('beat-sync-container').removeAttribute('data-sync-info');
+                    document.getElementById('loading-message').style.display = 'block';
+                    document.getElementById('beat-sync-timeline').style.display = 'none';
+                    document.getElementById('lyrics-display').style.display = 'none';
+                </script>""", "No syllable analysis available", "No prompt template available"
             elif isinstance(results, tuple) and isinstance(results[0], str) and "Error" in results[0]:
-                return results[0], "Error in analysis", "Error in classification", "No lyrics generated", "No rhythm analysis available", "No syllable analysis available", "No prompt template available"
+                return results[0], "Error in analysis", "Error in classification", "No lyrics generated", "No rhythm analysis available", audio_file, """<script>
+                    document.getElementById('beat-sync-container').removeAttribute('data-sync-info');
+                    document.getElementById('loading-message').style.display = 'block';
+                    document.getElementById('beat-sync-timeline').style.display = 'none';
+                    document.getElementById('lyrics-display').style.display = 'none';
+                </script>""", "No syllable analysis available", "No prompt template available"
             
             # For backwards compatibility, handle both dictionary and tuple returns
             if isinstance(results, dict):
@@ -2673,19 +3086,87 @@ with gr.Blocks(title="Music Genre Classifier & Lyrics Generator") as demo:
             else:
                 ast_text = "No valid audio classification results available."
             
+            # Prepare beat-synced lyrics visualization data
+            try:
+                audio_data = extract_audio_features(audio_file)
+                
+                # Get beat information
+                y, sr = load_audio(audio_file, SAMPLE_RATE)
+                beats_info = detect_beats(y, sr)
+                
+                # Prepare data for beat-synced lyrics
+                visualization_data = prepare_beat_synced_lyrics(audio_data, clean_lyrics, beats_info)
+                
+                # Convert to JSON for JavaScript
+                visualization_json = json.dumps(visualization_data)
+                
+                # Create HTML with the data injected - avoid using f-string for the entire HTML
+                # Handle string escaping separately to avoid f-string backslash issues
+                escaped_json = visualization_json.replace("'", "\\'")
+                
+                # Create HTML in parts to avoid f-string backslash issues
+                html_start = """<div id="beat-sync-container" data-sync-info='"""
+                html_middle = """' style="width:100%; height:400px; position:relative;">
+                    <div id="loading-message">Loading beat-synced lyrics viewer...</div>
+                    <div id="beat-sync-timeline" style="display:none; width:100%; height:80px; background:#f0f0f0; position:relative; overflow:hidden; margin-bottom:10px;">
+                        <div id="playhead" style="position:absolute; width:2px; height:100%; background:red; top:0; left:0; z-index:10;"></div>
+                        <div id="beat-markers" style="position:absolute; width:100%; height:100%; top:0; left:0;"></div>
+                    </div>
+                    <div id="lyrics-display" style="display:none; width:100%; height:300px; overflow-y:auto; font-size:16px; line-height:1.6;"></div>
+                </div>
+                <script>
+                    // Signal to the viewer that new data is available
+                    const container = document.getElementById('beat-sync-container');
+                    if (container) {
+                        // This will trigger the mutation observer
+                        container.setAttribute('data-sync-info', '"""
+                html_end = """');
+                    }
+                </script>"""
+                
+                # Combine parts without using f-strings in the parts that don't need variables
+                beat_sync_html = html_start + visualization_json + html_middle + escaped_json + html_end
+            except Exception as e:
+                print(f"Error creating beat-synced lyrics: {str(e)}")
+                # Handle string escaping separately to avoid f-string backslash issues
+                escaped_error = str(e).replace("'", "\\'")
+                
+                # Use regular strings instead of f-strings to avoid backslash issues
+                html_start = """<script>
+                    document.getElementById('beat-sync-container').removeAttribute('data-sync-info');
+                    document.getElementById('loading-message').style.display = 'block';
+                    document.getElementById('loading-message').innerText = 'Error creating beat-synced lyrics: """
+                html_end = """';
+                    document.getElementById('beat-sync-timeline').style.display = 'none';
+                    document.getElementById('lyrics-display').style.display = 'none';
+                </script>"""
+                
+                # Combine parts without using f-strings
+                beat_sync_html = html_start + escaped_error + html_end
+            
             # Return all results including new fields
-            return genre_results, emotion_text, ast_text, clean_lyrics, rhythm_analysis, syllable_analysis, prompt_template
+            return genre_results, emotion_text, ast_text, clean_lyrics, rhythm_analysis, audio_file, beat_sync_html, syllable_analysis, prompt_template
             
         except Exception as e:
             error_msg = f"Error: {str(e)}"
             print(error_msg)
-            return error_msg, "Error in emotion analysis", "Error in audio classification", "No lyrics generated", "No rhythm analysis available", "No syllable analysis available", "No prompt template available"
+            
+            # Use a raw string literal to avoid f-string backslash issues
+            error_html = """<script>
+                document.getElementById('beat-sync-container').removeAttribute('data-sync-info');
+                document.getElementById('loading-message').style.display = 'block';
+                document.getElementById('loading-message').innerText = 'Error processing audio';
+                document.getElementById('beat-sync-timeline').style.display = 'none';
+                document.getElementById('lyrics-display').style.display = 'none';
+            </script>"""
+            
+            return error_msg, "Error in emotion analysis", "Error in audio classification", "No lyrics generated", "No rhythm analysis available", audio_file, error_html, "No syllable analysis available", "No prompt template available"
     
     # Connect the button to the display function with updated outputs
     submit_btn.click(
         fn=display_results,
         inputs=[audio_input],
-        outputs=[genre_output, emotion_output, ast_output, lyrics_output, rhythm_analysis_output, syllable_analysis_output, prompt_template_output]
+        outputs=[genre_output, emotion_output, ast_output, lyrics_output, rhythm_analysis_output, synced_audio_output, lyrics_viewer_html, syllable_analysis_output, prompt_template_output]
     )
     
     # Enhanced explanation of how the system works
@@ -2722,6 +3203,12 @@ with gr.Blocks(title="Music Genre Classifier & Lyrics Generator") as demo:
            
         8. **Refinement**: If significant rhythm mismatches are detected, the system can automatically refine the lyrics for better alignment.
         
+        9. **Beat-Synced Visualization**: The beat-synced lyrics viewer shows you exactly how the lyrics align with the music:
+           - Beat markers show the song's rhythmic structure
+           - Words are highlighted in sync with the music
+           - Strong beats and stressed syllables are emphasized
+           - You can scrub through the song to see how lyrics and music match at any point
+        
         This multi-step process creates lyrics that feel naturally connected to the music, as if they were written specifically for it.
         """)