PyPI - lyrics-transcriber - Versions diffs - 0.37.0__py3-none-any.whl → 0.40.0__py3-none-any.whl - Mend

lyrics-transcriber 0.37.0py3-none-any.whl → 0.40.0py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

lyrics_transcriber/frontend/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Lyrics Transcriber Analyzer</title>
-    <script type="module" crossorigin src="/assets/index-BNNbsbVN.js"></script>
+    <script type="module" crossorigin src="/assets/index-DKnNJHRK.js"></script>
   </head>
   <body>
     <div id="root"></div>

lyrics_transcriber/frontend/package.json CHANGED Viewed

@@ -6,10 +6,11 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b && vite build --mode development",
+    "build-prod": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "predeploy": "npm run build",
+    "predeploy": "npm run build-prod",
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {

lyrics_transcriber/frontend/src/components/EditModal.tsx CHANGED Viewed

@@ -289,6 +289,7 @@ export default function EditModal({
                             updateSegment(newWords)
                         }}
                         currentTime={currentTime}
+                        onPlaySegment={onPlaySegment}
                     />
                 </Box>

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx CHANGED Viewed

@@ -91,7 +91,6 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     // Add local storage handling
     useEffect(() => {
-        // On mount, try to load saved data
         const storageKey = generateStorageKey(initialData.transcribed_text);
         const savedDataStr = localStorage.getItem('lyrics_analyzer_data');
         const savedDataObj = savedDataStr ? JSON.parse(savedDataStr) : {};
@@ -99,25 +98,42 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
         if (savedDataObj[storageKey]) {
             try {
                 const parsed = savedDataObj[storageKey];
-                // Verify it's the same song (extra safety check)
                 if (parsed.transcribed_text === initialData.transcribed_text) {
-                    if (window.confirm('Found saved progress for this song. Would you like to restore it?')) {
-                        console.log('Restored saved progress from local storage');
+                    const stripIds = (obj: CorrectionData): LyricsSegment[] => {
+                        const clone = JSON.parse(JSON.stringify(obj));
+                        return clone.corrected_segments.map((segment: LyricsSegment) => {
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            const { id: _id, ...strippedSegment } = segment;
+                            return {
+                                ...strippedSegment,
+                                words: segment.words.map(word => {
+                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                    const { id: _wordId, ...strippedWord } = word;
+                                    return strippedWord;
+                                })
+                            };
+                        });
+                    };
+                    const strippedSaved = stripIds(parsed);
+                    const strippedInitial = stripIds(initialData);
+                    const hasChanges = JSON.stringify(strippedSaved) !== JSON.stringify(strippedInitial);
+                    if (hasChanges && window.confirm('Found saved progress for this song. Would you like to restore it?')) {
                         setData(parsed);
-                    } else {
-                        // User declined to restore - remove the saved data
+                    } else if (!hasChanges) {
                         delete savedDataObj[storageKey];
                         localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj));
                     }
                 }
             } catch (error) {
                 console.error('Failed to parse saved data:', error);
-                // Remove only this song's data
                 delete savedDataObj[storageKey];
                 localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj));
             }
         }
-    }, [initialData.transcribed_text]);
+    }, [initialData]);
     // Save to local storage whenever data changes
     useEffect(() => {
@@ -315,8 +331,15 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
             delete savedDataObj[storageKey];
             localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj));
-            // Reset data to initial state
-            setData(JSON.parse(JSON.stringify(initialData)));
+            // Reset data to initial state with proper initialization
+            const freshData = initializeDataWithIds(JSON.parse(JSON.stringify(initialData)));
+            setData(freshData);
+            // Reset any UI state that might affect highlights
+            setModalContent(null);
+            setFlashingType(null);
+            setHighlightInfo(null);
+            setInteractionMode('details');
         }
     }, [initialData]);
@@ -370,10 +393,10 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                     uncorrectedGapCount={data.gap_sequences?.filter(gap =>
                         !gap.corrections?.length).length ?? 0}
                     uncorrectedGaps={data.gap_sequences
-                        ?.filter(gap => !gap.corrections?.length)
+                        ?.filter(gap => !gap.corrections?.length && gap.word_ids)
                         .map(gap => ({
-                            position: gap.word_ids[0],
-                            length: gap.length
+                            position: gap.word_ids?.[0] ?? '',
+                            length: gap.length ?? 0
                         })) ?? []}
                     // Correction details
                     replacedCount={data.gap_sequences?.reduce((count, gap) =>

lyrics_transcriber/frontend/src/components/ReferenceView.tsx CHANGED Viewed

@@ -4,6 +4,7 @@ import { ReferenceViewProps } from './shared/types'
 import { calculateReferenceLinePositions } from './shared/utils/referenceLineCalculator'
 import { SourceSelector } from './shared/components/SourceSelector'
 import { HighlightedText } from './shared/components/HighlightedText'
+import { WordCorrection } from '@/types'
 export default function ReferenceView({
     referenceTexts,
@@ -15,7 +16,8 @@ export default function ReferenceView({
     currentSource,
     onSourceChange,
     highlightInfo,
-    mode
+    mode,
+    gaps
 }: ReferenceViewProps) {
     // Get available sources from referenceTexts object
     const availableSources = useMemo(() =>
@@ -32,6 +34,42 @@ export default function ReferenceView({
         [corrected_segments, anchors, currentSource]
     )
+    // Create a mapping of reference words to their corrections
+    const referenceCorrections = useMemo(() => {
+        const corrections = new Map<string, string>();
+        console.log('Building referenceCorrections map:', {
+            gapsCount: gaps.length,
+            currentSource,
+        });
+        gaps.forEach(gap => {
+            gap.corrections.forEach((correction: WordCorrection) => {
+                // Get the reference position for this correction
+                const referencePosition = correction.reference_positions?.[currentSource];
+                if (typeof referencePosition === 'number') {
+                    const wordId = `${currentSource}-word-${referencePosition}`;
+                    corrections.set(wordId, correction.corrected_word);
+                    console.log('Adding correction mapping:', {
+                        wordId,
+                        correctedWord: correction.corrected_word,
+                        referencePosition,
+                        correction
+                    });
+                }
+            });
+        });
+        console.log('Final referenceCorrections map:', {
+            size: corrections.size,
+            entries: Array.from(corrections.entries())
+        });
+        return corrections;
+    }, [gaps, currentSource]);
     return (
         <Paper sx={{ p: 2 }}>
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
@@ -56,6 +94,8 @@ export default function ReferenceView({
                     isReference={true}
                     currentSource={currentSource}
                     linePositions={linePositions}
+                    referenceCorrections={referenceCorrections}
+                    gaps={gaps}
                 />
             </Box>
         </Paper>

lyrics_transcriber/frontend/src/components/ReviewChangesModal.tsx CHANGED Viewed

@@ -31,6 +31,35 @@ interface DiffResult {
     wordChanges?: DiffResult[]
 }
+// Add interfaces for the word and segment structures
+interface Word {
+    text: string
+    start_time: number
+    end_time: number
+    id?: string
+}
+interface Segment {
+    text: string
+    start_time: number
+    end_time: number
+    words: Word[]
+    id?: string
+}
+const normalizeWordForComparison = (word: Word): Omit<Word, 'id'> => ({
+    text: word.text,
+    start_time: word.start_time,
+    end_time: word.end_time
+})
+const normalizeSegmentForComparison = (segment: Segment): Omit<Segment, 'id'> => ({
+    text: segment.text,
+    start_time: segment.start_time,
+    end_time: segment.end_time,
+    words: segment.words.map(normalizeWordForComparison)
+})
 export default function ReviewChangesModal({
     open,
     onClose,
@@ -44,27 +73,29 @@ export default function ReviewChangesModal({
         const diffs: DiffResult[] = []
         // Compare corrected segments
-        originalData.corrected_segments.forEach((segment, index) => {
+        originalData.corrected_segments.forEach((originalSegment, index) => {
             const updatedSegment = updatedData.corrected_segments[index]
             if (!updatedSegment) {
                 diffs.push({
                     type: 'removed',
                     path: `Segment ${index}`,
                     segmentIndex: index,
-                    oldValue: segment.text
+                    oldValue: originalSegment.text
                 })
                 return
             }
+            const normalizedOriginal = normalizeSegmentForComparison(originalSegment)
+            const normalizedUpdated = normalizeSegmentForComparison(updatedSegment)
             const wordChanges: DiffResult[] = []
-            // Compare word-level changes using word IDs
-            segment.words.forEach((word) => {
-                const updatedWord = updatedSegment.words.find(w => w.id === word.id)
+            // Compare word-level changes based on position rather than IDs
+            normalizedOriginal.words.forEach((word: Omit<Word, 'id'>, wordIndex: number) => {
+                const updatedWord = normalizedUpdated.words[wordIndex]
                 if (!updatedWord) {
                     wordChanges.push({
                         type: 'removed',
-                        path: `Word ${word.id}`,
+                        path: `Word ${wordIndex}`,
                         oldValue: `"${word.text}" (${word.start_time.toFixed(4)} - ${word.end_time.toFixed(4)})`
                     })
                     return
@@ -75,7 +106,7 @@ export default function ReviewChangesModal({
                     Math.abs(word.end_time - updatedWord.end_time) > 0.0001) {
                     wordChanges.push({
                         type: 'modified',
-                        path: `Word ${word.id}`,
+                        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)})`
                     })
@@ -83,26 +114,27 @@ export default function ReviewChangesModal({
             })
             // Check for added words
-            updatedSegment.words.forEach((word) => {
-                if (!segment.words.find(w => w.id === word.id)) {
+            if (normalizedUpdated.words.length > normalizedOriginal.words.length) {
+                for (let i = normalizedOriginal.words.length; i < normalizedUpdated.words.length; i++) {
+                    const word = normalizedUpdated.words[i]
                     wordChanges.push({
                         type: 'added',
-                        path: `Word ${word.id}`,
+                        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 ||
+            if (normalizedOriginal.text !== normalizedUpdated.text ||
+                Math.abs(normalizedOriginal.start_time - normalizedUpdated.start_time) > 0.0001 ||
+                Math.abs(normalizedOriginal.end_time - normalizedUpdated.end_time) > 0.0001 ||
                 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)})`,
+                    oldValue: `"${normalizedOriginal.text}" (${normalizedOriginal.start_time.toFixed(4)} - ${normalizedOriginal.end_time.toFixed(4)})`,
+                    newValue: `"${normalizedUpdated.text}" (${normalizedUpdated.start_time.toFixed(4)} - ${normalizedUpdated.end_time.toFixed(4)})`,
                     wordChanges: wordChanges.length > 0 ? wordChanges : undefined
                 })
             }

lyrics_transcriber/frontend/src/components/TimelineEditor.tsx CHANGED Viewed

@@ -8,11 +8,12 @@ interface TimelineEditorProps {
     endTime: number
     onWordUpdate: (index: number, updates: Partial<Word>) => void
     currentTime?: number
+    onPlaySegment?: (time: number) => void
 }
 const TimelineContainer = styled(Box)(({ theme }) => ({
     position: 'relative',
-    height: '60px',
+    height: '80px',
     backgroundColor: theme.palette.grey[200],
     borderRadius: theme.shape.borderRadius,
     margin: theme.spacing(2, 0),
@@ -24,30 +25,38 @@ const TimelineRuler = styled(Box)(({ theme }) => ({
     top: 0,
     left: 0,
     right: 0,
-    height: '16px',
+    height: '40px',
     borderBottom: `1px solid ${theme.palette.grey[300]}`,
+    cursor: 'pointer',
 }))
 const TimelineMark = styled(Box)(({ theme }) => ({
     position: 'absolute',
-    top: '10px',
+    top: '20px',
     width: '1px',
-    height: '6px',
-    backgroundColor: theme.palette.grey[400],
+    height: '18px',
+    backgroundColor: theme.palette.grey[700],
+    '&.subsecond': {
+        top: '25px',
+        height: '13px',
+        backgroundColor: theme.palette.grey[500],
+    }
 }))
 const TimelineLabel = styled(Box)(({ theme }) => ({
     position: 'absolute',
-    top: 0,
+    top: '5px',
     transform: 'translateX(-50%)',
-    fontSize: '0.6rem',
-    color: theme.palette.grey[600],
+    fontSize: '0.8rem',
+    color: theme.palette.text.primary,
+    fontWeight: 700,
+    backgroundColor: theme.palette.grey[200],
 }))
 const TimelineWord = styled(Box)(({ theme }) => ({
     position: 'absolute',
     height: '30px',
-    top: '22px',
+    top: '40px',
     backgroundColor: theme.palette.primary.main,
     borderRadius: theme.shape.borderRadius,
     color: theme.palette.primary.contrastText,
@@ -57,6 +66,7 @@ const TimelineWord = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     fontSize: '0.875rem',
+    fontFamily: 'sans-serif',
     transition: 'background-color 0.1s ease',
     '&.highlighted': {
         backgroundColor: theme.palette.secondary.main,
@@ -75,7 +85,19 @@ const ResizeHandle = styled(Box)(({ theme }) => ({
     },
 }))
-export default function TimelineEditor({ words, startTime, endTime, onWordUpdate, currentTime = 0 }: TimelineEditorProps) {
+// Add new styled component for the cursor
+const TimelineCursor = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    top: 0,
+    width: '2px',
+    height: '100%', // Full height of container
+    backgroundColor: theme.palette.error.main, // Red color
+    pointerEvents: 'none', // Ensure it doesn't interfere with clicks
+    transition: 'left 0.1s linear', // Smooth movement
+    zIndex: 1, // Ensure it's above other elements
+}))
+export default function TimelineEditor({ words, startTime, endTime, onWordUpdate, currentTime = 0, onPlaySegment }: TimelineEditorProps) {
     const containerRef = useRef<HTMLDivElement>(null)
     const [dragState, setDragState] = useState<{
         wordIndex: number
@@ -142,15 +164,23 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
         const startSecond = Math.floor(startTime)
         const endSecond = Math.ceil(endTime)
-        for (let time = startSecond; time <= endSecond; time++) {
+        // Generate marks for each 0.1 second interval
+        for (let time = startSecond; time <= endSecond; time += 0.1) {
             if (time >= startTime && time <= endTime) {
                 const position = timeToPosition(time)
+                const isFullSecond = Math.abs(time - Math.round(time)) < 0.001
                 marks.push(
                     <Box key={time}>
-                        <TimelineMark sx={{ left: `${position}%` }} />
-                        <TimelineLabel sx={{ left: `${position}%` }}>
-                            {time}s
-                        </TimelineLabel>
+                        <TimelineMark
+                            className={isFullSecond ? '' : 'subsecond'}
+                            sx={{ left: `${position}%` }}
+                        />
+                        {isFullSecond && (
+                            <TimelineLabel sx={{ left: `${position}%` }}>
+                                {Math.round(time)}s
+                            </TimelineLabel>
+                        )}
                     </Box>
                 )
             }
@@ -266,6 +296,22 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
         return currentTime >= word.start_time && currentTime <= word.end_time
     }
+    const handleTimelineClick = (e: React.MouseEvent) => {
+        const rect = containerRef.current?.getBoundingClientRect()
+        if (!rect || !onPlaySegment) return
+        const x = e.clientX - rect.left
+        const clickedPosition = (x / rect.width) * (endTime - startTime) + startTime
+        console.log('Timeline clicked:', {
+            x,
+            width: rect.width,
+            clickedTime: clickedPosition
+        })
+        onPlaySegment(clickedPosition)
+    }
     return (
         <TimelineContainer
             ref={containerRef}
@@ -273,9 +319,18 @@ export default function TimelineEditor({ words, startTime, endTime, onWordUpdate
             onMouseUp={handleMouseUp}
             onMouseLeave={handleMouseUp}
         >
-            <TimelineRuler>
+            <TimelineRuler onClick={handleTimelineClick}>
                 {generateTimelineMarks()}
             </TimelineRuler>
+            {/* Add cursor line */}
+            <TimelineCursor
+                sx={{
+                    left: `${timeToPosition(currentTime)}%`,
+                    display: currentTime >= startTime && currentTime <= endTime ? 'block' : 'none'
+                }}
+            />
             {words.map((word, index) => {
                 const leftPosition = timeToPosition(word.start_time)
                 const rightPosition = timeToPosition(word.end_time)

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx CHANGED Viewed

@@ -55,18 +55,21 @@ export default function TranscriptionView({
             </Typography>
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                 {data.corrected_segments.map((segment, segmentIndex) => {
-                    // Convert segment words to TranscriptionWordPosition format
                     const segmentWords: TranscriptionWordPosition[] = segment.words.map(word => {
-                        // Find if this word belongs to an anchor sequence
-                        const anchor = data.anchor_sequences.find(a =>
-                            a.word_ids.includes(word.id)
+                        const anchor = data.anchor_sequences?.find(a =>
+                            a?.word_ids?.includes(word.id)
                         )
                         // If not in an anchor, check if it belongs to a gap sequence
-                        const gap = !anchor ? data.gap_sequences.find(g =>
-                            g.word_ids.includes(word.id)
+                        const gap = !anchor ? data.gap_sequences?.find(g =>
+                            g?.word_ids?.includes(word.id)
                         ) : undefined
+                        // Check if this specific word has been corrected
+                        const isWordCorrected = gap?.corrections?.some(
+                            correction => correction.word_id === word.id
+                        )
                         return {
                             word: {
                                 id: word.id,
@@ -76,7 +79,8 @@ export default function TranscriptionView({
                             },
                             type: anchor ? 'anchor' : gap ? 'gap' : 'other',
                             sequence: anchor || gap,
-                            isInRange: true
+                            isInRange: true,
+                            isCorrected: isWordCorrected
                         }
                     })

lyrics_transcriber/frontend/src/components/shared/components/HighlightedText.tsx CHANGED Viewed

@@ -25,6 +25,8 @@ export interface HighlightedTextProps {
     preserveSegments?: boolean
     linePositions?: LinePosition[]
     currentTime?: number
+    referenceCorrections?: Map<string, string>
+    gaps?: GapSequence[]
 }
 export function HighlightedText({
@@ -40,14 +42,17 @@ export function HighlightedText({
     currentSource,
     preserveSegments = false,
     linePositions = [],
-    currentTime = 0
+    currentTime = 0,
+    referenceCorrections = new Map(),
+    gaps = []
 }: HighlightedTextProps) {
     const { handleWordClick } = useWordClick({
         mode,
         onElementClick,
         onWordClick,
         isReference,
-        currentSource
+        currentSource,
+        gaps
     })
     const shouldWordFlash = (wordPos: TranscriptionWordPosition | { word: string; id: string }): boolean => {
@@ -65,9 +70,14 @@ export function HighlightedText({
                 (flashingType === 'anchor' && wordPos.type === 'anchor') ||
                 (flashingType === 'corrected' && isCorrected) ||
                 (flashingType === 'uncorrected' && wordPos.type === 'gap' && !isCorrected) ||
-                (flashingType === 'word' && highlightInfo?.type === 'anchor' &&
-                    wordPos.type === 'anchor' && wordPos.sequence &&
-                    highlightInfo.word_ids?.includes(wordPos.word.id))
+                (flashingType === 'word' && (
+                    // Handle anchor highlighting
+                    (highlightInfo?.type === 'anchor' && wordPos.type === 'anchor' &&
+                        wordPos.sequence && highlightInfo.word_ids?.includes(wordPos.word.id)) ||
+                    // Handle gap highlighting - only highlight the specific word
+                    (highlightInfo?.type === 'gap' && wordPos.type === 'gap' &&
+                        highlightInfo.word_ids?.includes(wordPos.word.id))
+                ))
             )
         } else {
             // Handle reference word
@@ -77,10 +87,32 @@ export function HighlightedText({
                 a?.reference_word_ids?.[currentSource]?.includes(wordPos.id)
             )
+            // Check if this word should flash as part of a gap
+            const shouldFlashGap = flashingType === 'word' &&
+                highlightInfo?.type === 'gap' &&
+                // Check if this reference word corresponds to the clicked word
+                gaps?.some(gap =>
+                    gap.corrections.some(correction => {
+                        // Only flash if this correction corresponds to the clicked word
+                        if (!highlightInfo.word_ids?.includes(correction.word_id)) {
+                            return false;
+                        }
+                        const refPosition = correction.reference_positions?.[currentSource];
+                        const wordPosition = parseInt(wordPos.id.split('-').pop() || '', 10);
+                        return typeof refPosition === 'number' && refPosition === wordPosition;
+                    })
+                )
             return Boolean(
                 (flashingType === 'anchor' && anchor) ||
-                (flashingType === 'word' && highlightInfo?.type === 'anchor' &&
-                    highlightInfo.reference_word_ids?.[currentSource]?.includes(wordPos.id))
+                (flashingType === 'word' && (
+                    // Handle anchor highlighting
+                    (highlightInfo?.type === 'anchor' &&
+                        highlightInfo.reference_word_ids?.[currentSource]?.includes(wordPos.id)) ||
+                    // Handle gap highlighting
+                    shouldFlashGap
+                ))
             )
         }
     }
@@ -103,8 +135,8 @@ export function HighlightedText({
                         shouldFlash={shouldWordFlash(wordPos)}
                         isCurrentlyPlaying={shouldHighlightWord(wordPos)}
                         isAnchor={wordPos.type === 'anchor'}
-                        isCorrectedGap={wordPos.type === 'gap' && Boolean((wordPos.sequence as GapSequence)?.corrections?.length)}
-                        isUncorrectedGap={wordPos.type === 'gap' && !(wordPos.sequence as GapSequence)?.corrections?.length}
+                        isCorrectedGap={wordPos.type === 'gap' && wordPos.isCorrected}
+                        isUncorrectedGap={wordPos.type === 'gap' && !wordPos.isCorrected}
                         onClick={() => handleWordClick(
                             wordPos.word.text,
                             wordPos.word.id,
@@ -183,22 +215,23 @@ export function HighlightedText({
                                     return <span key={`space-${lineIndex}-${wordIndex}`}> </span>
                                 }
-                                // Generate word ID based on position in the reference text
                                 const wordId = `${currentSource}-word-${wordCount}`
                                 wordCount++
-                                // Find if this word is part of any anchor sequence
                                 const anchor = currentSource ? anchors?.find(a =>
                                     a?.reference_word_ids?.[currentSource]?.includes(wordId)
                                 ) : undefined
+                                // Check if this word has a correction
+                                const hasCorrection = referenceCorrections.has(wordId)
                                 return (
                                     <Word
                                         key={wordId}
                                         word={word}
                                         shouldFlash={shouldWordFlash({ word, id: wordId })}
                                         isAnchor={Boolean(anchor)}
-                                        isCorrectedGap={false}
+                                        isCorrectedGap={hasCorrection}
                                         isUncorrectedGap={false}
                                         onClick={() => handleWordClick(word, wordId, anchor, undefined)}
                                     />

lyrics-transcriber 0.37.0__py3-none-any.whl → 0.40.0__py3-none-any.whl

lyrics-transcriber 0.37.0py3-none-any.whl → 0.40.0py3-none-any.whl