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

lyrics_transcriber/frontend/src/components/ReferenceView.tsx

@@ -1,33 +1,9 @@
-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, '')
+import { useMemo } from 'react'
+import { Paper, Typography, Box } from '@mui/material'
+import { ReferenceViewProps } from './shared/types'
+import { calculateReferenceLinePositions } from './shared/utils/referenceLineCalculator'
+import { SourceSelector } from './shared/components/SourceSelector'
+import { HighlightedText } from './shared/components/HighlightedText'
 
 export default function ReferenceView({
     referenceTexts,
@@ -37,215 +13,19 @@ export default function ReferenceView({
     onWordClick,
     flashingType,
     corrected_segments,
-    highlightedWordIndex,
     currentSource,
     onSourceChange,
-    onDebugInfoUpdate
+    highlightInfo,
+    mode
 }: 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
-    }
+    const { linePositions } = useMemo(() =>
+        calculateReferenceLinePositions(
+            corrected_segments,
+            anchors,
+            currentSource
+        ),
+        [corrected_segments, anchors, currentSource]
+    )
 
     return (
         <Paper sx={{ p: 2 }}>
@@ -253,35 +33,26 @@ export default function ReferenceView({
                 <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>
+                <SourceSelector
+                    currentSource={currentSource}
+                    onSourceChange={onSourceChange}
+                />
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                <HighlightedText
+                    text={referenceTexts[currentSource]}
+                    anchors={anchors}
+                    gaps={gaps}
+                    onElementClick={onElementClick}
+                    onWordClick={onWordClick}
+                    flashingType={flashingType}
+                    highlightInfo={highlightInfo}
+                    mode={mode}
+                    isReference={true}
+                    currentSource={currentSource}
+                    linePositions={linePositions}
+                />
             </Box>
-            <Typography
-                component="pre"
-                sx={{
-                    fontFamily: 'monospace',
-                    whiteSpace: 'pre-wrap',
-                    margin: 0,
-                    lineHeight: 1.5,
-                }}
-            >
-                {renderHighlightedText()}
-            </Typography>
         </Paper>
     )
 } 

lyrics_transcriber/frontend/src/components/ReviewChangesModal.tsx

@@ -0,0 +1,232 @@
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Box,
+    Typography,
+    Paper,
+    Collapse,
+    IconButton,
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { CorrectionData } from '../types'
+import { useMemo, useState } from 'react'
+
+interface ReviewChangesModalProps {
+    open: boolean
+    onClose: () => void
+    originalData: CorrectionData
+    updatedData: CorrectionData
+    onSubmit: () => void
+}
+
+interface DiffResult {
+    type: 'added' | 'removed' | 'modified'
+    path: string
+    segmentIndex?: number
+    oldValue?: any
+    newValue?: any
+    wordChanges?: DiffResult[]
+}
+
+export default function ReviewChangesModal({
+    open,
+    onClose,
+    originalData,
+    updatedData,
+    onSubmit
+}: ReviewChangesModalProps) {
+    const [expandedSegments, setExpandedSegments] = useState<number[]>([])
+
+    const differences = useMemo(() => {
+        const diffs: DiffResult[] = []
+
+        // Compare corrected segments
+        originalData.corrected_segments.forEach((segment, index) => {
+            const updatedSegment = updatedData.corrected_segments[index]
+            if (!updatedSegment) {
+                diffs.push({
+                    type: 'removed',
+                    path: `Segment ${index}`,
+                    segmentIndex: index,
+                    oldValue: segment.text
+                })
+                return
+            }
+
+            const wordChanges: DiffResult[] = []
+
+            // Compare word-level changes
+            segment.words.forEach((word, wordIndex) => {
+                const updatedWord = updatedSegment.words[wordIndex]
+                if (!updatedWord) {
+                    wordChanges.push({
+                        type: 'removed',
+                        path: `Word ${wordIndex}`,
+                        oldValue: `"${word.text}" (${word.start_time.toFixed(4)} - ${word.end_time.toFixed(4)})`
+                    })
+                    return
+                }
+
+                if (word.text !== updatedWord.text ||
+                    Math.abs(word.start_time - updatedWord.start_time) > 0.0001 ||
+                    Math.abs(word.end_time - updatedWord.end_time) > 0.0001) {
+                    wordChanges.push({
+                        type: 'modified',
+                        path: `Word ${wordIndex}`,
+                        oldValue: `"${word.text}" (${word.start_time.toFixed(4)} - ${word.end_time.toFixed(4)})`,
+                        newValue: `"${updatedWord.text}" (${updatedWord.start_time.toFixed(4)} - ${updatedWord.end_time.toFixed(4)})`
+                    })
+                }
+            })
+
+            // Check for added words
+            if (updatedSegment.words.length > segment.words.length) {
+                for (let i = segment.words.length; i < updatedSegment.words.length; i++) {
+                    const word = updatedSegment.words[i]
+                    wordChanges.push({
+                        type: 'added',
+                        path: `Word ${i}`,
+                        newValue: `"${word.text}" (${word.start_time.toFixed(4)} - ${word.end_time.toFixed(4)})`
+                    })
+                }
+            }
+
+            if (segment.text !== updatedSegment.text ||
+                segment.start_time !== updatedSegment.start_time ||
+                segment.end_time !== updatedSegment.end_time ||
+                wordChanges.length > 0) {
+                diffs.push({
+                    type: 'modified',
+                    path: `Segment ${index}`,
+                    segmentIndex: index,
+                    oldValue: `"${segment.text}" (${segment.start_time.toFixed(4)} - ${segment.end_time.toFixed(4)})`,
+                    newValue: `"${updatedSegment.text}" (${updatedSegment.start_time.toFixed(4)} - ${updatedSegment.end_time.toFixed(4)})`,
+                    wordChanges: wordChanges.length > 0 ? wordChanges : undefined
+                })
+            }
+        })
+
+        return diffs
+    }, [originalData, updatedData])
+
+    const handleToggleSegment = (segmentIndex: number) => {
+        setExpandedSegments(prev =>
+            prev.includes(segmentIndex)
+                ? prev.filter(i => i !== segmentIndex)
+                : [...prev, segmentIndex]
+        )
+    }
+
+    const renderDiff = (diff: DiffResult) => {
+        const getColor = () => {
+            switch (diff.type) {
+                case 'added': return 'success.main'
+                case 'removed': return 'error.main'
+                case 'modified': return 'warning.main'
+                default: return 'text.primary'
+            }
+        }
+
+        const isExpanded = diff.segmentIndex !== undefined &&
+            expandedSegments.includes(diff.segmentIndex)
+
+        return (
+            <Paper key={diff.path} sx={{ p: 2, mb: 1 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <Box>
+                        <Typography color={getColor()} sx={{ fontWeight: 'bold' }}>
+                            {diff.type.toUpperCase()}: {diff.path}
+                        </Typography>
+                        {diff.oldValue && (
+                            <Typography color="error.main" sx={{ ml: 2 }}>
+                                - {diff.oldValue}
+                            </Typography>
+                        )}
+                        {diff.newValue && (
+                            <Typography color="success.main" sx={{ ml: 2 }}>
+                                + {diff.newValue}
+                            </Typography>
+                        )}
+                    </Box>
+                    {diff.wordChanges && (
+                        <IconButton
+                            onClick={() => handleToggleSegment(diff.segmentIndex!)}
+                            sx={{
+                                transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                                transition: 'transform 0.2s'
+                            }}
+                        >
+                            <ExpandMoreIcon />
+                        </IconButton>
+                    )}
+                </Box>
+
+                {diff.wordChanges && (
+                    <Collapse in={isExpanded}>
+                        <Box sx={{ mt: 2, ml: 4 }}>
+                            {diff.wordChanges.map((wordDiff, index) => (
+                                <Box key={index}>
+                                    <Typography color={getColor()} variant="body2">
+                                        {wordDiff.type.toUpperCase()}: {wordDiff.path}
+                                    </Typography>
+                                    {wordDiff.oldValue && (
+                                        <Typography color="error.main" variant="body2" sx={{ ml: 2 }}>
+                                            - {wordDiff.oldValue}
+                                        </Typography>
+                                    )}
+                                    {wordDiff.newValue && (
+                                        <Typography color="success.main" variant="body2" sx={{ ml: 2 }}>
+                                            + {wordDiff.newValue}
+                                        </Typography>
+                                    )}
+                                </Box>
+                            ))}
+                        </Box>
+                    </Collapse>
+                )}
+            </Paper>
+        )
+    }
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="md"
+            fullWidth
+        >
+            <DialogTitle>Review Changes</DialogTitle>
+            <DialogContent dividers>
+                {differences.length === 0 ? (
+                    <Box>
+                        <Typography color="text.secondary" sx={{ mb: 2 }}>
+                            No changes detected. You can still submit to continue processing.
+                        </Typography>
+                        <Typography variant="body2" color="text.secondary">
+                            Total segments: {updatedData.corrected_segments.length}
+                        </Typography>
+                    </Box>
+                ) : (
+                    <Box>
+                        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                            {differences.length} change{differences.length !== 1 ? 's' : ''} detected:
+                        </Typography>
+                        {differences.map(renderDiff)}
+                    </Box>
+                )}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>Cancel</Button>
+                <Button
+                    onClick={onSubmit}
+                    variant="contained"
+                >
+                    Submit to Server
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+} 

lyrics_transcriber/frontend/src/components/SegmentDetailsModal.tsx

@@ -0,0 +1,64 @@
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    IconButton, Box
+} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import { LyricsSegment } from '../types'
+
+interface SegmentDetailsModalProps {
+    open: boolean
+    onClose: () => void
+    segment: LyricsSegment | null
+    segmentIndex: number | null
+}
+
+export default function SegmentDetailsModal({
+    open,
+    onClose,
+    segment,
+    segmentIndex
+}: SegmentDetailsModalProps) {
+    if (!segment || segmentIndex === null) return null
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="sm"
+            fullWidth
+            PaperProps={{
+                sx: { position: 'relative' },
+            }}
+        >
+            <IconButton
+                onClick={onClose}
+                sx={{
+                    position: 'absolute',
+                    right: 8,
+                    top: 8,
+                }}
+            >
+                <CloseIcon />
+            </IconButton>
+            <DialogTitle>
+                Segment {segmentIndex} Details
+            </DialogTitle>
+            <DialogContent dividers>
+                <Box
+                    component="pre"
+                    sx={{
+                        margin: 0,
+                        fontFamily: 'monospace',
+                        fontSize: '0.875rem',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word'
+                    }}
+                >
+                    {JSON.stringify(segment, null, 2)}
+                </Box>
+            </DialogContent>
+        </Dialog>
+    )
+}