lyrics-transcriber 0.34.0__py3-none-any.whl → 0.34.2__py3-none-any.whl

lyrics_transcriber/frontend/src/components/ReferenceView.tsx

@@ -0,0 +1,287 @@
+import { useEffect, useMemo, useRef } from 'react'
+import { Paper, Typography, Box, Button } from '@mui/material'
+import { AnchorMatchInfo, LyricsData, LyricsSegment } from '../types'
+import { FlashType, ModalContent } from './LyricsAnalyzer'
+import { COLORS } from './constants'
+import { HighlightedWord } from './styles'
+
+interface WordClickInfo {
+    wordIndex: number
+    type: 'anchor' | 'gap' | 'other'
+    anchor?: LyricsData['anchor_sequences'][0]
+    gap?: LyricsData['gap_sequences'][0]
+}
+
+interface ReferenceViewProps {
+    referenceTexts: Record<string, string>
+    anchors: LyricsData['anchor_sequences']
+    gaps: LyricsData['gap_sequences']
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    flashingType: FlashType
+    corrected_segments: LyricsSegment[]
+    highlightedWordIndex?: number
+    currentSource: 'genius' | 'spotify'
+    onSourceChange: (source: 'genius' | 'spotify') => void
+    onDebugInfoUpdate?: (info: AnchorMatchInfo[]) => void
+}
+
+const normalizeWord = (word: string): string =>
+    word.toLowerCase().replace(/[.,!?']/g, '')
+
+export default function ReferenceView({
+    referenceTexts,
+    anchors,
+    gaps,
+    onElementClick,
+    onWordClick,
+    flashingType,
+    corrected_segments,
+    highlightedWordIndex,
+    currentSource,
+    onSourceChange,
+    onDebugInfoUpdate
+}: ReferenceViewProps) {
+    // Create a ref to store debug info to avoid dependency cycles
+    const debugInfoRef = useRef<AnchorMatchInfo[]>([])
+
+    const { newlineIndices } = useMemo(() => {
+        debugInfoRef.current = corrected_segments.map(segment => ({
+            segment: segment.text.trim(),
+            lastWord: '',
+            normalizedLastWord: '',
+            overlappingAnchors: [],
+            matchingGap: null,
+            debugLog: []
+        }));
+
+        const newlineIndices = new Set(
+            corrected_segments.slice(0, -1).map((segment, segmentIndex) => {
+                const segmentText = segment.text.trim()
+                const segmentWords = segmentText.split(/\s+/)
+                const lastWord = segmentWords[segmentWords.length - 1]
+                const normalizedLastWord = normalizeWord(lastWord)
+
+                debugInfoRef.current[segmentIndex].debugLog?.push(
+                    `Processing segment: "${segmentText}"\n` +
+                    `  Words: ${segmentWords.join('|')}\n` +
+                    `  Last word: "${lastWord}"\n` +
+                    `  Normalized last word: "${normalizedLastWord}"`
+                )
+
+                // Calculate word position
+                const segmentStartWord = corrected_segments
+                    .slice(0, segmentIndex)
+                    .reduce((acc, s) => acc + s.text.trim().split(/\s+/).length, 0)
+                const lastWordPosition = segmentStartWord + segmentWords.length - 1
+
+                // Try to find the anchor containing this word
+                const matchingAnchor = anchors.find(a => {
+                    const start = a.transcription_position
+                    const end = start + a.length - 1
+                    const isMatch = lastWordPosition >= start && lastWordPosition <= end
+
+                    debugInfoRef.current[segmentIndex].debugLog?.push(
+                        `Checking anchor: "${a.text}"\n` +
+                        `  Position range: ${start}-${end}\n` +
+                        `  Last word position: ${lastWordPosition}\n` +
+                        `  Is in range: ${isMatch}\n` +
+                        `  Words: ${a.words.join('|')}`
+                    )
+
+                    return isMatch
+                })
+
+                if (matchingAnchor?.reference_positions[currentSource] !== undefined) {
+                    const anchorWords = matchingAnchor.words
+                    const wordIndex = anchorWords.findIndex(w => {
+                        const normalizedAnchorWord = normalizeWord(w)
+                        const matches = normalizedAnchorWord === normalizedLastWord
+
+                        debugInfoRef.current[segmentIndex].debugLog?.push(
+                            `Comparing words:\n` +
+                            `  Anchor word: "${w}" (normalized: "${normalizedAnchorWord}")\n` +
+                            `  Segment word: "${lastWord}" (normalized: "${normalizedLastWord}")\n` +
+                            `  Matches: ${matches}`
+                        )
+
+                        return matches
+                    })
+
+                    if (wordIndex !== -1) {
+                        const position = matchingAnchor.reference_positions[currentSource] + wordIndex
+
+                        debugInfoRef.current[segmentIndex].debugLog?.push(
+                            `Found match:\n` +
+                            `  Word index in anchor: ${wordIndex}\n` +
+                            `  Reference position: ${matchingAnchor.reference_positions[currentSource]}\n` +
+                            `  Final position: ${position}`
+                        )
+
+                        // Update debug info with word matching details
+                        debugInfoRef.current[segmentIndex] = {
+                            ...debugInfoRef.current[segmentIndex],
+                            lastWord,
+                            normalizedLastWord,
+                            overlappingAnchors: [{
+                                text: matchingAnchor.text,
+                                range: [matchingAnchor.transcription_position, matchingAnchor.transcription_position + matchingAnchor.length - 1],
+                                words: anchorWords,
+                                hasMatchingWord: true
+                            }],
+                            wordPositionDebug: {
+                                anchorWords,
+                                wordIndex,
+                                referencePosition: matchingAnchor.reference_positions[currentSource],
+                                finalPosition: position,
+                                normalizedWords: {
+                                    anchor: normalizeWord(anchorWords[wordIndex]),
+                                    segment: normalizedLastWord
+                                }
+                            }
+                        }
+
+                        return position
+                    }
+                }
+
+                return null
+            }).filter((pos): pos is number => pos !== null && pos >= 0)
+        )
+        return { newlineIndices }
+    }, [corrected_segments, anchors, currentSource])
+
+    // Update debug info whenever it changes
+    useEffect(() => {
+        onDebugInfoUpdate?.(debugInfoRef.current)
+    }, [onDebugInfoUpdate])
+
+    const renderHighlightedText = () => {
+        const elements: React.ReactNode[] = []
+        const words = referenceTexts[currentSource].split(/\s+/)
+        let currentIndex = 0
+
+        words.forEach((word, index) => {
+            // Add the word element
+            const thisWordIndex = currentIndex
+            const anchor = anchors.find(a => {
+                const position = a.reference_positions[currentSource]
+                if (position === undefined) return false
+                return thisWordIndex >= position && thisWordIndex < position + a.length
+            })
+            const correctedGap = gaps.find(g => {
+                if (!g.corrections.length) return false
+                const correction = g.corrections[0]
+                const position = correction.reference_positions?.[currentSource]
+                if (position === undefined) return false
+                return thisWordIndex >= position && thisWordIndex < position + correction.length
+            })
+
+            elements.push(
+                <HighlightedWord
+                    key={`${word}-${index}`}
+                    shouldFlash={flashingType === 'word' && highlightedWordIndex === thisWordIndex}
+                    style={{
+                        backgroundColor: flashingType === 'word' && highlightedWordIndex === thisWordIndex
+                            ? COLORS.highlighted
+                            : anchor
+                                ? COLORS.anchor
+                                : correctedGap
+                                    ? COLORS.corrected
+                                    : 'transparent',
+                        padding: (anchor || correctedGap) ? '2px 4px' : '0',
+                        borderRadius: '3px',
+                        cursor: 'pointer',
+                    }}
+                    onClick={(e) => {
+                        if (e.detail === 1) {
+                            setTimeout(() => {
+                                if (!e.defaultPrevented) {
+                                    onWordClick?.({
+                                        wordIndex: thisWordIndex,
+                                        type: anchor ? 'anchor' : correctedGap ? 'gap' : 'other',
+                                        anchor,
+                                        gap: correctedGap
+                                    })
+                                }
+                            }, 200)
+                        }
+                    }}
+                    onDoubleClick={(e) => {
+                        e.preventDefault()  // Prevent single-click from firing
+                        if (anchor) {
+                            onElementClick({
+                                type: 'anchor',
+                                data: {
+                                    ...anchor,
+                                    position: thisWordIndex
+                                }
+                            })
+                        } else if (correctedGap) {
+                            onElementClick({
+                                type: 'gap',
+                                data: {
+                                    ...correctedGap,
+                                    position: thisWordIndex,
+                                    word: word
+                                }
+                            })
+                        }
+                    }}
+                >
+                    {word}
+                </HighlightedWord>
+            )
+
+            // Check if we need to add a newline after this word
+            if (newlineIndices.has(thisWordIndex)) {
+                elements.push(<br key={`br-${index}`} />)
+            } else {
+                // Only add space if not adding newline
+                elements.push(' ')
+            }
+
+            currentIndex++
+        })
+
+        return elements
+    }
+
+    return (
+        <Paper sx={{ p: 2 }}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+                <Typography variant="h6">
+                    Reference Text
+                </Typography>
+                <Box>
+                    <Button
+                        size="small"
+                        variant={currentSource === 'genius' ? 'contained' : 'outlined'}
+                        onClick={() => onSourceChange('genius')}
+                        sx={{ mr: 1 }}
+                    >
+                        Genius
+                    </Button>
+                    <Button
+                        size="small"
+                        variant={currentSource === 'spotify' ? 'contained' : 'outlined'}
+                        onClick={() => onSourceChange('spotify')}
+                    >
+                        Spotify
+                    </Button>
+                </Box>
+            </Box>
+            <Typography
+                component="pre"
+                sx={{
+                    fontFamily: 'monospace',
+                    whiteSpace: 'pre-wrap',
+                    margin: 0,
+                    lineHeight: 1.5,
+                }}
+            >
+                {renderHighlightedText()}
+            </Typography>
+        </Paper>
+    )
+} 

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -0,0 +1,157 @@
+import { Paper, Typography } from '@mui/material'
+import { CorrectionData, AnchorSequence, HighlightInfo } from '../types'
+import { FlashType, ModalContent } from './LyricsAnalyzer'
+import { COLORS } from './constants'
+import { HighlightedWord } from './styles'
+
+interface WordClickInfo {
+    wordIndex: number
+    type: 'anchor' | 'gap' | 'other'
+    anchor?: AnchorSequence
+    gap?: CorrectionData['gap_sequences'][0]
+}
+
+interface TranscriptionViewProps {
+    data: CorrectionData
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    flashingType: FlashType
+    highlightInfo: HighlightInfo | null
+}
+
+export default function TranscriptionView({
+    data,
+    onElementClick,
+    onWordClick,
+    flashingType,
+    highlightInfo
+}: TranscriptionViewProps) {
+    const renderHighlightedText = () => {
+        const normalizedText = data.corrected_text.replace(/\n\n+/g, '\n')
+        const words = normalizedText.split(/(\s+)/)
+        let wordIndex = 0  // Track actual word positions, ignoring whitespace
+
+        // Build a map of original positions to their corrections
+        const correctionMap = new Map()
+        data.gap_sequences.forEach(gap => {
+            gap.corrections.forEach(c => {
+                correctionMap.set(c.original_position, {
+                    original: c.original_word,
+                    corrected: c.corrected_word,
+                    is_deletion: c.is_deletion,
+                    split_total: c.split_total
+                })
+            })
+        })
+
+        return words.map((word, index) => {
+            if (/^\s+$/.test(word)) {
+                return word
+            }
+
+            const currentWordIndex = wordIndex
+            const anchor = data.anchor_sequences.find(anchor => {
+                const start = anchor.transcription_position
+                const end = start + anchor.length
+                return currentWordIndex >= start && currentWordIndex < end
+            })
+
+            const gap = data.gap_sequences.find(g => {
+                const start = g.transcription_position
+                const end = start + g.length
+                return currentWordIndex >= start && currentWordIndex < end
+            })
+
+            const hasCorrections = gap ? gap.corrections.length > 0 : false
+
+            const shouldFlash = Boolean(
+                (flashingType === 'anchor' && anchor) ||
+                (flashingType === 'corrected' && hasCorrections) ||
+                (flashingType === 'uncorrected' && gap && !hasCorrections) ||
+                (flashingType === 'word' && highlightInfo?.type === 'anchor' && anchor && (
+                    anchor.transcription_position === highlightInfo.transcriptionIndex &&
+                    currentWordIndex >= anchor.transcription_position &&
+                    currentWordIndex < anchor.transcription_position + anchor.length
+                ))
+            )
+
+            const wordElement = (
+                <HighlightedWord
+                    key={`${word}-${index}-${shouldFlash}`}
+                    shouldFlash={shouldFlash}
+                    style={{
+                        backgroundColor: anchor
+                            ? COLORS.anchor
+                            : hasCorrections
+                                ? COLORS.corrected
+                                : gap
+                                    ? COLORS.uncorrectedGap
+                                    : 'transparent',
+                        padding: anchor || gap ? '2px 4px' : '0',
+                        borderRadius: '3px',
+                        cursor: 'pointer',
+                    }}
+                    onClick={(e) => {
+                        if (e.detail === 1) {
+                            setTimeout(() => {
+                                if (!e.defaultPrevented) {
+                                    onWordClick?.({
+                                        wordIndex: currentWordIndex,
+                                        type: anchor ? 'anchor' : gap ? 'gap' : 'other',
+                                        anchor,
+                                        gap
+                                    })
+                                }
+                            }, 200)
+                        }
+                    }}
+                    onDoubleClick={(e) => {
+                        e.preventDefault()  // Prevent single-click from firing
+                        if (anchor) {
+                            onElementClick({
+                                type: 'anchor',
+                                data: {
+                                    ...anchor,
+                                    position: currentWordIndex
+                                }
+                            })
+                        } else if (gap) {
+                            onElementClick({
+                                type: 'gap',
+                                data: {
+                                    ...gap,
+                                    position: currentWordIndex,
+                                    word: word
+                                }
+                            })
+                        }
+                    }}
+                >
+                    {word}
+                </HighlightedWord>
+            )
+
+            wordIndex++
+            return wordElement
+        })
+    }
+
+    return (
+        <Paper sx={{ p: 2 }}>
+            <Typography variant="h6" gutterBottom>
+                Corrected Transcription
+            </Typography>
+            <Typography
+                component="pre"
+                sx={{
+                    fontFamily: 'monospace',
+                    whiteSpace: 'pre-wrap',
+                    margin: 0,
+                    lineHeight: 1.5,
+                }}
+            >
+                {renderHighlightedText()}
+            </Typography>
+        </Paper>
+    )
+} 

lyrics_transcriber/frontend/src/components/constants.ts

@@ -0,0 +1,19 @@
+import { keyframes } from '@mui/system'
+
+export const COLORS = {
+    anchor: '#e3f2fd', // Pale blue
+    corrected: '#e8f5e9', // Pale green
+    uncorrectedGap: '#fff3e0', // Pale orange
+    highlighted: '#ffeb3b',  // or any color you prefer for highlighting
+} as const
+
+export const flashAnimation = keyframes`
+  0%, 100% { 
+    opacity: 1;
+    background-color: inherit;
+  }
+  50% { 
+    opacity: 0.6;
+    background-color: ${COLORS.highlighted};
+  }
+` 

lyrics_transcriber/frontend/src/components/styles.ts

@@ -0,0 +1,13 @@
+import { styled } from '@mui/system'
+import { flashAnimation } from './constants'
+
+export const HighlightedWord = styled('span')<{ shouldFlash: boolean }>(
+    ({ shouldFlash }) => ({
+        display: 'inline-block',
+        marginRight: '0.25em',
+        transition: 'background-color 0.2s ease',
+        ...(shouldFlash && {
+            animation: `${flashAnimation} 0.4s ease-in-out 3`,
+        }),
+    })
+)

lyrics_transcriber/frontend/src/main.tsx

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <App />
+)

lyrics_transcriber/frontend/src/types.ts

@@ -0,0 +1,158 @@
+export interface Word {
+    text: string
+    start_time: number
+    end_time: number
+    confidence?: number
+}
+
+export interface LyricsSegment {
+    text: string
+    words: Word[]
+    start_time: number
+    end_time: number
+}
+
+export interface WordCorrection {
+    original_word: string
+    corrected_word: string
+    segment_index: number
+    original_position: number
+    source: string
+    confidence: number
+    reason: string
+    alternatives: Record<string, number>
+    is_deletion: boolean
+    split_index?: number
+    split_total?: number
+    reference_positions?: Record<string, number>
+    length: number
+}
+
+export interface PhraseScore {
+    phrase_type: string
+    natural_break_score: number
+    length_score: number
+    total_score: number
+}
+
+export interface AnchorSequence {
+    words: string[]
+    text: string
+    length: number
+    transcription_position: number
+    reference_positions: Record<string, number>
+    confidence: number
+    phrase_score: PhraseScore
+    total_score: number
+}
+
+export interface GapSequence {
+    words: string[]
+    text: string
+    length: number
+    transcription_position: number
+    preceding_anchor: AnchorSequence | null
+    following_anchor: AnchorSequence | null
+    reference_words: {
+        spotify?: string[]
+        genius?: string[]
+    }
+    reference_words_original?: {
+        spotify?: string[]
+        genius?: string[]
+    }
+    corrections: WordCorrection[]
+}
+
+export interface LyricsData {
+    transcribed_text: string
+    corrected_text: string
+    original_segments: LyricsSegment[]
+    metadata: {
+        anchor_sequences_count: number
+        gap_sequences_count: number
+        total_words: number
+        correction_ratio: number
+    }
+    anchor_sequences: AnchorSequence[]
+    gap_sequences: GapSequence[]
+    corrected_segments: LyricsSegment[]
+    corrections_made: number
+    confidence: number
+    corrections: WordCorrection[]
+    reference_texts: Record<string, string>
+}
+
+export interface CorrectionData {
+    transcribed_text: string
+    original_segments: LyricsSegment[]
+    reference_texts: Record<string, string>
+    anchor_sequences: AnchorSequence[]
+    gap_sequences: GapSequence[]
+    resized_segments: LyricsSegment[]
+    corrected_text: string
+    corrections_made: number
+    confidence: number
+    corrections: WordCorrection[]
+    corrected_segments: LyricsSegment[]
+    metadata: {
+        anchor_sequences_count: number
+        gap_sequences_count: number
+        total_words: number
+        correction_ratio: number
+    }
+}
+
+export interface HighlightInfo {
+    transcriptionIndex?: number
+    transcriptionLength?: number
+    referenceIndices: {
+        genius?: number
+        spotify?: number
+    }
+    referenceLength?: number
+    type: 'single' | 'gap' | 'anchor'
+}
+
+export interface AnchorMatchInfo {
+    segment: string
+    lastWord: string
+    normalizedLastWord: string
+    overlappingAnchors: Array<{
+        text: string
+        range: [number, number]
+        words: string[]
+        hasMatchingWord: boolean
+    }>
+    matchingGap: {
+        text: string
+        position: number
+        length: number
+        corrections: Array<{
+            word: string
+            referencePosition: number | undefined
+        }>
+        followingAnchor: {
+            text: string
+            position: number | undefined
+        } | null
+    } | null
+    highlightDebug?: Array<{
+        wordIndex: number
+        refPos: number | undefined
+        highlightPos: number | undefined
+        anchorLength: number
+        isInRange: boolean
+    }>
+    wordPositionDebug?: {
+        anchorWords: string[]
+        wordIndex: number
+        referencePosition: number
+        finalPosition: number
+        normalizedWords: {
+            anchor: string
+            segment: string
+        }
+    }
+    debugLog?: string[]
+}

lyrics_transcriber/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

lyrics_transcriber/frontend/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}