ss

app.py

@@ -6,7 +6,6 @@ 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,
@@ -2299,109 +2298,6 @@ 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:
@@ -2628,17 +2524,296 @@ def process_audio(audio_file):
     except Exception as e:
         error_msg = f"Error processing audio: {str(e)}"
         print(error_msg)
+        return error_msg, None, []
+
+def format_beat_timeline(audio_file, lyrics=None):
+    """Creates a formatted timeline showing beat timings and their syllable patterns"""
+    if audio_file is None:
+        return "Please upload an audio file to see beat timeline."
+    
+    try:
+        # Extract audio data
+        y, sr = load_audio(audio_file, SAMPLE_RATE)
         
-        # 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>"""
+        # Get beat information
+        beats_info = detect_beats(y, sr)
+        
+        # Format the timeline
+        timeline = "=== BEAT & SYLLABLE TIMELINE ===\n\n"
+        timeline += f"Tempo: {beats_info['tempo']:.1f} BPM\n"
+        timeline += f"Time Signature: {beats_info['time_signature']}/4\n"
+        timeline += f"Total Beats: {beats_info['beat_count']}\n\n"
+        
+        # Create a table header
+        timeline += "| Beat # | Time (s) | Beat Strength | Syllable Pattern |\n"
+        timeline += "|--------|----------|--------------|------------------|\n"
+        
+        # Add beat-by-beat information
+        for i, (time, strength) in enumerate(zip(beats_info['beat_times'], beats_info['beat_strengths'])):
+            # Determine beat type based on strength
+            if strength >= 0.8:
+                beat_type = "STRONG"
+            elif strength >= 0.5:
+                beat_type = "medium"
+            else:
+                beat_type = "weak"
+                
+            # Create beat pattern indicator
+            if i % beats_info['time_signature'] == 0:
+                pattern = "S"  # Strong beat at start of measure
+            elif i % beats_info['time_signature'] == beats_info['time_signature'] // 2 and beats_info['time_signature'] > 3:
+                pattern = "m"  # Medium beat (3rd beat in 4/4)
+            else:
+                pattern = "w"  # Weak beat
+                
+            # Add row to table
+            timeline += f"| {i+1:<6} | {time:.2f}s | {beat_type:<12} | {pattern}:{1.5 if pattern=='S' else 1.0} |\n"
+            
+            # Keep table to a reasonable size
+            if i >= 29:
+                timeline += f"... and {beats_info['beat_count'] - 30} more beats ...\n"
+                break
+        
+        # Add a visual timeline of beats
+        timeline += "\n=== VISUAL BEAT TIMELINE ===\n\n"
+        timeline += "Each character represents 0.5 seconds. Beats are marked as:\n"
+        timeline += "S = Strong beat | m = Medium beat | w = Weak beat | · = No beat\n\n"
+        
+        # Calculate total duration and create time markers
+        if beats_info['beat_times']:
+            total_duration = max(beats_info['beat_times']) + 2  # Add 2 seconds of padding
+        else:
+            total_duration = 30  # Default duration if no beats found
+        
+        time_markers = ""
+        for i in range(0, int(total_duration) + 1, 5):
+            time_markers += f"{i:<5}"
+        timeline += time_markers + " (seconds)\n"
+        
+        # Create a ruler for easier time tracking
+        ruler = ""
+        for i in range(0, int(total_duration) + 1):
+            if i % 5 == 0:
+                ruler += "+"
+            else:
+                ruler += "-"
+            ruler += "-" * 9  # Each second is 10 characters wide
+        timeline += ruler + "\n"
+        
+        # Create a visualization of beats with symbols
+        beat_line = ["·"] * int(total_duration * 2)  # 2 characters per second
+        
+        for i, time in enumerate(beats_info['beat_times']):
+            if i >= len(beats_info['beat_strengths']):
+                break
+                
+            # Determine position in the timeline
+            pos = int(time * 2)  # Convert to position in the beat_line
+            if pos >= len(beat_line):
+                continue
+                
+            # Determine beat type based on strength and position
+            strength = beats_info['beat_strengths'][i]
+            if i % beats_info['time_signature'] == 0:
+                beat_line[pos] = "S"  # Strong beat at start of measure
+            elif strength >= 0.8:
+                beat_line[pos] = "S"  # Strong beat
+            elif i % beats_info['time_signature'] == beats_info['time_signature'] // 2 and beats_info['time_signature'] > 3:
+                beat_line[pos] = "m"  # Medium beat (3rd beat in 4/4)
+            elif strength >= 0.5:
+                beat_line[pos] = "m"  # Medium beat
+            else:
+                beat_line[pos] = "w"  # Weak beat
+        
+        # Format and add to timeline
+        beat_visualization = ""
+        for i in range(0, len(beat_line), 10):
+            beat_visualization += "".join(beat_line[i:i+10])
+            if i + 10 < len(beat_line):
+                beat_visualization += " "  # Add space every 5 seconds
+        timeline += beat_visualization + "\n\n"
+        
+        # Add measure markers
+        timeline += "=== MEASURE MARKERS ===\n\n"
+        
+        # Create a list to track measure start times
+        measure_starts = []
+        for i, time in enumerate(beats_info['beat_times']):
+            if i % beats_info['time_signature'] == 0:  # Start of measure
+                measure_starts.append((i // beats_info['time_signature'] + 1, time))
+        
+        # Format measure information
+        if measure_starts:
+            timeline += "| Measure # | Start Time | Duration |\n"
+            timeline += "|-----------|------------|----------|\n"
+            
+            for i in range(len(measure_starts)):
+                measure_num, start_time = measure_starts[i]
+                
+                # Calculate end time (start of next measure or end of song)
+                if i < len(measure_starts) - 1:
+                    end_time = measure_starts[i+1][1]
+                elif beats_info['beat_times']:
+                    end_time = beats_info['beat_times'][-1]
+                else:
+                    end_time = start_time + 2.0  # Default 2 seconds if no next measure
+                    
+                duration = end_time - start_time
+                
+                timeline += f"| {measure_num:<9} | {start_time:.2f}s | {duration:.2f}s |\n"
+                
+                # Limit to reasonable size
+                if i >= 9:
+                    timeline += f"... and {len(measure_starts) - 10} more measures ...\n"
+                    break
+        
+        # Add phrase information
+        if beats_info['phrases']:
+            timeline += "\n=== MUSICAL PHRASES ===\n\n"
+            for i, phrase in enumerate(beats_info['phrases']):
+                if i < 10:  # Limit to first 10 phrases
+                    if not phrase:
+                        continue
+                        
+                    start_beat = phrase[0]
+                    end_beat = phrase[-1]
+                    if start_beat >= len(beats_info['beat_times']) or end_beat >= len(beats_info['beat_times']):
+                        continue
+                        
+                    phrase_start = beats_info['beat_times'][start_beat]
+                    phrase_end = beats_info['beat_times'][end_beat]
+                    
+                    timeline += f"Phrase {i+1}: Beats {start_beat+1}-{end_beat+1} ({phrase_start:.2f}s - {phrase_end:.2f}s)\n"
+                    
+                    # Create syllable template for this phrase
+                    phrase_beats = {
+                        "beat_times": [beats_info['beat_times'][j] for j in phrase if j < len(beats_info['beat_times'])],
+                        "beat_strengths": [beats_info['beat_strengths'][j] for j in phrase if j < len(beats_info['beat_strengths'])],
+                        "tempo": beats_info['tempo'],
+                        "time_signature": beats_info['time_signature'],
+                        "phrases": [list(range(len(phrase)))]
+                    }
+                    
+                    template = create_flexible_syllable_templates(phrase_beats)
+                    timeline += f"  Syllable Template: {template}\n"
+                    
+                    # Create a visual representation of this phrase
+                    if phrase_start < total_duration and phrase_end < total_duration:
+                        # Create a timeline for this phrase
+                        phrase_visualization = ["·"] * int(total_duration * 2)
+                        
+                        # Mark the phrase boundaries
+                        start_pos = int(phrase_start * 2)
+                        end_pos = int(phrase_end * 2)
+                        
+                        if start_pos < len(phrase_visualization):
+                            phrase_visualization[start_pos] = "["
+                        
+                        if end_pos < len(phrase_visualization):
+                            phrase_visualization[end_pos] = "]"
+                        
+                        # Mark the beats in this phrase
+                        for j in phrase:
+                            if j < len(beats_info['beat_times']):
+                                beat_time = beats_info['beat_times'][j]
+                                beat_pos = int(beat_time * 2)
+                                
+                                if beat_pos < len(phrase_visualization) and beat_pos != start_pos and beat_pos != end_pos:
+                                    # Determine beat type
+                                    if j % beats_info['time_signature'] == 0:
+                                        phrase_visualization[beat_pos] = "S"
+                                    elif j % beats_info['time_signature'] == beats_info['time_signature'] // 2:
+                                        phrase_visualization[beat_pos] = "m"
+                                    else:
+                                        phrase_visualization[beat_pos] = "w"
+                        
+                        # Format and add visualization
+                        phrase_visual = ""
+                        for k in range(0, len(phrase_visualization), 10):
+                            phrase_visual += "".join(phrase_visualization[k:k+10])
+                            if k + 10 < len(phrase_visualization):
+                                phrase_visual += " "
+                                
+                        timeline += f"  Timeline: {phrase_visual}\n\n"
+            
+            if len(beats_info['phrases']) > 10:
+                timeline += f"... and {len(beats_info['phrases']) - 10} more phrases ...\n"
+        
+        # Add a section showing alignment if lyrics were generated
+        if lyrics and isinstance(lyrics, str):
+            timeline += "\n=== LYRICS-BEAT ALIGNMENT ===\n\n"
+            # Remove rhythm analysis notes from lyrics if present
+            if "[Note:" in lyrics:
+                clean_lyrics = lyrics.split("[Note:")[0].strip()
+            else:
+                clean_lyrics = lyrics
+                
+            lines = clean_lyrics.strip().split('\n')
+            
+            # Show alignment for first few lines
+            for i, line in enumerate(lines[:10]):
+                if not line.strip() or line.startswith('['):
+                    continue
+                    
+                timeline += f"Line: \"{line}\"\n"
+                
+                # Count syllables
+                syllable_count = count_syllables(line)
+                timeline += f"  Syllables: {syllable_count}\n"
+                
+                # Show ideal timing (if we have enough phrases)
+                if beats_info['phrases'] and i < len(beats_info['phrases']):
+                    phrase = beats_info['phrases'][i]
+                    if phrase and phrase[0] < len(beats_info['beat_times']) and phrase[-1] < len(beats_info['beat_times']):
+                        start_beat = phrase[0]
+                        end_beat = phrase[-1]
+                        start_time = beats_info['beat_times'][start_beat]
+                        end_time = beats_info['beat_times'][end_beat]
+                        timeline += f"  Timing: {start_time:.2f}s - {end_time:.2f}s\n"
+                        
+                        # Create a visualization of syllable alignment
+                        timeline += "  Alignment: "
+                        
+                        # Create a timeline focused on just this phrase
+                        phrase_duration = end_time - start_time
+                        syllable_viz = []
+                        
+                        # Initialize with beat markers for this phrase
+                        for j in phrase:
+                            if j < len(beats_info['beat_times']):
+                                beat_time = beats_info['beat_times'][j]
+                                relative_pos = int((beat_time - start_time) / phrase_duration * syllable_count)
+                                
+                                while len(syllable_viz) <= relative_pos:
+                                    syllable_viz.append("·")
+                                
+                                if j % beats_info['time_signature'] == 0:
+                                    syllable_viz[relative_pos] = "S"
+                                elif j % beats_info['time_signature'] == beats_info['time_signature'] // 2:
+                                    syllable_viz[relative_pos] = "m"
+                                else:
+                                    syllable_viz[relative_pos] = "w"
+                        
+                        # Fill in any gaps
+                        while len(syllable_viz) < syllable_count:
+                            syllable_viz.append("·")
+                            
+                        # Trim if too long
+                        syllable_viz = syllable_viz[:syllable_count]
+                        
+                        # Now map to the line
+                        timeline += "".join(syllable_viz) + "\n"
+                
+                timeline += "\n"
+                
+            if len(lines) > 10:
+                timeline += f"... and {len(lines) - 10} more lines ...\n"
+                
+        return timeline
         
-        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"
+    except Exception as e:
+        print(f"Error generating beat timeline: {str(e)}")
+        return f"Error generating beat timeline: {str(e)}"
 
 # Create enhanced Gradio interface with tabs for better organization
 with gr.Blocks(title="Music Genre Classifier & Lyrics Generator") as demo:
@@ -2683,303 +2858,17 @@ 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)
+                
+                with gr.TabItem("Beat & Syllable Timeline"):
+                    beat_timeline_output = gr.Textbox(label="Beat Timings & Syllable Patterns", lines=16)
     
     # 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.", 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."
+            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.", "No beat timeline available."
         
         try:
             # Process audio and get results
@@ -2987,19 +2876,9 @@ 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", 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"
+                return results, "Error in analysis", "Error in classification", "No lyrics generated", "No rhythm analysis available", "No syllable analysis available", "No prompt template available", "No beat timeline 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", 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"
+                return results[0], "Error in analysis", "Error in classification", "No lyrics generated", "No rhythm analysis available", "No syllable analysis available", "No prompt template available", "No beat timeline available"
             
             # For backwards compatibility, handle both dictionary and tuple returns
             if isinstance(results, dict):
@@ -3035,6 +2914,9 @@ with gr.Blocks(title="Music Genre Classifier & Lyrics Generator") as demo:
                 syllable_analysis = "No syllable analysis available"
                 prompt_template = "No prompt template available"
             
+            # Generate beat timeline data
+            beat_timeline = format_beat_timeline(audio_file, clean_lyrics)
+            
             # Format emotion analysis results
             try:
                 emotion_results = music_analyzer.analyze_music(audio_file)
@@ -3046,7 +2928,52 @@ with gr.Blocks(title="Music Genre Classifier & Lyrics Generator") as demo:
                 # Add detailed song structure information if available
                 try:
                     audio_data = extract_audio_features(audio_file)
-                    song_structure = calculate_detailed_song_structure(audio_data)
+                    # Use the existing information rather than a function that doesn't exist
+                    y, sr = load_audio(audio_file, SAMPLE_RATE)
+                    beats_info = detect_beats(y, sr)
+                    sections_info = detect_sections(y, sr)
+                    
+                    # Create a simple song structure from the available data
+                    song_structure = {
+                        "beats": beats_info,
+                        "sections": sections_info,
+                        "syllables": []
+                    }
+                    
+                    # Add syllable counts to each section
+                    for section in sections_info:
+                        # Create syllable templates for sections
+                        section_beats_info = {
+                            "beat_times": [beat for beat in beats_info["beat_times"] 
+                                          if section["start"] <= beat < section["end"]],
+                            "tempo": beats_info.get("tempo", 120)
+                        }
+                        if "beat_strengths" in beats_info:
+                            section_beats_info["beat_strengths"] = [
+                                strength for i, strength in enumerate(beats_info["beat_strengths"])
+                                if i < len(beats_info["beat_times"]) and
+                                section["start"] <= beats_info["beat_times"][i] < section["end"]
+                            ]
+                        
+                        # Get a syllable count based on section duration and tempo
+                        syllable_count = int(section["duration"] * (beats_info.get("tempo", 120) / 60) * 1.5)
+                        
+                        section_info = {
+                            "type": section["type"],
+                            "start": section["start"],
+                            "end": section["end"],
+                            "duration": section["duration"],
+                            "syllable_count": syllable_count,
+                            "beat_count": len(section_beats_info["beat_times"])
+                        }
+                        
+                        # Try to create a more detailed syllable template
+                        if len(section_beats_info["beat_times"]) >= 2:
+                            section_info["syllable_template"] = create_flexible_syllable_templates(
+                                section_beats_info
+                            )
+                        
+                        song_structure["syllables"].append(section_info)
                     
                     emotion_text += "\n\nSong Structure:\n"
                     for section in song_structure["syllables"]:
@@ -3086,87 +3013,19 @@ 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, audio_file, beat_sync_html, syllable_analysis, prompt_template
+            return genre_results, emotion_text, ast_text, clean_lyrics, rhythm_analysis, syllable_analysis, prompt_template, beat_timeline
             
         except Exception as e:
             error_msg = f"Error: {str(e)}"
             print(error_msg)
-            
-            # 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"
+            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", "No beat timeline 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, synced_audio_output, lyrics_viewer_html, syllable_analysis_output, prompt_template_output]
+        outputs=[genre_output, emotion_output, ast_output, lyrics_output, rhythm_analysis_output, syllable_analysis_output, prompt_template_output, beat_timeline_output]
     )
     
     # Enhanced explanation of how the system works
@@ -3203,12 +3062,6 @@ 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.
         """)