lyrics-transcriber 0.43.1__py3-none-any.whl → 0.45.0__py3-none-any.whl

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

@@ -173,13 +173,28 @@ export function HighlightedText({
                             wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
                             wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
                         )}
+                        correction={(() => {
+                            const correction = corrections?.find(c => 
+                                c.corrected_word_id === wordPos.word.id || 
+                                c.word_id === wordPos.word.id
+                            );
+                            return correction ? {
+                                originalWord: correction.original_word,
+                                handler: correction.handler,
+                                confidence: correction.confidence
+                            } : null;
+                        })()}
                     />
                     {index < wordPositions.length - 1 && ' '}
                 </React.Fragment>
             ))
         } else if (segments) {
             return segments.map((segment) => (
-                <Box key={segment.id} sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                <Box key={segment.id} sx={{ 
+                    display: 'flex', 
+                    alignItems: 'flex-start',
+                    mb: 0
+                }}>
                     <Box sx={{ flex: 1 }}>
                         {segment.words.map((word, wordIndex) => {
                             const wordPos = wordPositions.find((pos: TranscriptionWordPosition) =>
@@ -195,6 +210,18 @@ export function HighlightedText({
 
                             const sequence = wordPos?.type === 'gap' ? wordPos.sequence as GapSequence : undefined;
 
+                            // Find correction information for the tooltip
+                            const correction = corrections?.find(c => 
+                                c.corrected_word_id === word.id || 
+                                c.word_id === word.id
+                            );
+                            
+                            const correctionInfo = correction ? {
+                                originalWord: correction.original_word,
+                                handler: correction.handler,
+                                confidence: correction.confidence
+                            } : null;
+
                             return (
                                 <React.Fragment key={word.id}>
                                     <WordComponent
@@ -205,6 +232,7 @@ export function HighlightedText({
                                         isUncorrectedGap={isUncorrectedGap}
                                         isCurrentlyPlaying={shouldHighlightWord(wordPos || { word: word.text, id: word.id })}
                                         onClick={() => handleWordClick(word.text, word.id, anchor, sequence)}
+                                        correction={correctionInfo}
                                     />
                                     {wordIndex < segment.words.length - 1 && ' '}
                                 </React.Fragment>
@@ -222,7 +250,12 @@ export function HighlightedText({
                 if (currentLinePosition?.isEmpty) {
                     wordCount++
                     return (
-                        <Box key={`empty-${lineIndex}`} sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                        <Box key={`empty-${lineIndex}`} sx={{ 
+                            display: 'flex', 
+                            alignItems: 'flex-start',
+                            mb: 0,
+                            lineHeight: 1
+                        }}>
                             <Typography
                                 component="span"
                                 sx={{
@@ -233,20 +266,58 @@ export function HighlightedText({
                                     marginRight: 1,
                                     userSelect: 'none',
                                     fontFamily: 'monospace',
-                                    paddingTop: '4px',
+                                    paddingTop: '1px',
+                                    fontSize: '0.8rem',
+                                    lineHeight: 1
                                 }}
                             >
                                 {currentLinePosition.lineNumber}
                             </Typography>
-                            <Box sx={{ width: '28px' }} /> {/* Space for copy button */}
-                            <Box sx={{ flex: 1, height: '1.5em' }} />
+                            <Box sx={{ width: '18px' }} />
+                            <Box sx={{ flex: 1, height: '1em' }} />
                         </Box>
                     )
                 }
 
-                const lineContent = line.split(/(\s+)/)
+                const words = line.split(' ')
+                const lineWords: React.ReactNode[] = []
+                
+                words.forEach((word, wordIndex) => {
+                    if (word === '') return null
+                    if (/^\s+$/.test(word)) {
+                        return lineWords.push(<span key={`space-${lineIndex}-${wordIndex}`}> </span>)
+                    }
+
+                    const wordId = `${currentSource}-word-${wordCount}`
+                    wordCount++
+
+                    const anchor = currentSource ? anchors?.find(a =>
+                        a.reference_word_ids[currentSource]?.includes(wordId)
+                    ) : undefined
+
+                    const hasCorrection = referenceCorrections.has(wordId)
+
+                    lineWords.push(
+                        <WordComponent
+                            key={wordId}
+                            word={word}
+                            shouldFlash={shouldWordFlash({ word, id: wordId })}
+                            isAnchor={Boolean(anchor)}
+                            isCorrectedGap={hasCorrection}
+                            isUncorrectedGap={false}
+                            isCurrentlyPlaying={shouldHighlightWord({ word, id: wordId })}
+                            onClick={() => handleWordClick(word, wordId, anchor, undefined)}
+                        />
+                    )
+                })
+
                 return (
-                    <Box key={`line-${lineIndex}`} sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                    <Box key={`line-${lineIndex}`} sx={{ 
+                        display: 'flex', 
+                        alignItems: 'flex-start',
+                        mb: 0,
+                        lineHeight: 1
+                    }}>
                         <Typography
                             component="span"
                             sx={{
@@ -257,7 +328,9 @@ export function HighlightedText({
                                 marginRight: 1,
                                 userSelect: 'none',
                                 fontFamily: 'monospace',
-                                paddingTop: '4px',
+                                paddingTop: '1px',
+                                fontSize: '0.8rem',
+                                lineHeight: 1
                             }}
                         >
                             {currentLinePosition?.lineNumber ?? lineIndex}
@@ -266,43 +339,18 @@ export function HighlightedText({
                             size="small"
                             onClick={() => handleCopyLine(line)}
                             sx={{
-                                padding: '2px',
-                                marginRight: 1,
-                                height: '24px',
-                                width: '24px'
+                                padding: '1px',
+                                marginRight: 0.5,
+                                height: '18px',
+                                width: '18px',
+                                minHeight: '18px',
+                                minWidth: '18px'
                             }}
                         >
-                            <ContentCopyIcon sx={{ fontSize: '1rem' }} />
+                            <ContentCopyIcon sx={{ fontSize: '0.9rem' }} />
                         </IconButton>
                         <Box sx={{ flex: 1 }}>
-                            {lineContent.map((word, wordIndex) => {
-                                if (word === '') return null
-                                if (/^\s+$/.test(word)) {
-                                    return <span key={`space-${lineIndex}-${wordIndex}`}> </span>
-                                }
-
-                                const wordId = `${currentSource}-word-${wordCount}`
-                                wordCount++
-
-                                const anchor = currentSource ? anchors?.find(a =>
-                                    a.reference_word_ids[currentSource]?.includes(wordId)
-                                ) : undefined
-
-                                const hasCorrection = referenceCorrections.has(wordId)
-
-                                return (
-                                    <WordComponent
-                                        key={wordId}
-                                        word={word}
-                                        shouldFlash={shouldWordFlash({ word, id: wordId })}
-                                        isAnchor={Boolean(anchor)}
-                                        isCorrectedGap={hasCorrection}
-                                        isUncorrectedGap={false}
-                                        isCurrentlyPlaying={shouldHighlightWord({ word, id: wordId })}
-                                        onClick={() => handleWordClick(word, wordId, anchor, undefined)}
-                                    />
-                                )
-                            })}
+                            {lineWords}
                         </Box>
                     </Box>
                 )

lyrics_transcriber/frontend/src/components/shared/components/SourceSelector.tsx

@@ -8,14 +8,21 @@ export interface SourceSelectorProps {
 
 export function SourceSelector({ currentSource, onSourceChange, availableSources }: SourceSelectorProps) {
     return (
-        <Box>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.3 }}>
             {availableSources.map((source) => (
                 <Button
                     key={source}
                     size="small"
                     variant={currentSource === source ? 'contained' : 'outlined'}
                     onClick={() => onSourceChange(source)}
-                    sx={{ mr: 1 }}
+                    sx={{ 
+                        mr: 0,
+                        py: 0.2,
+                        px: 0.8,
+                        minWidth: 'auto',
+                        fontSize: '0.7rem',
+                        lineHeight: 1.2
+                    }}
                 >
                     {/* Capitalize first letter of source */}
                     {source.charAt(0).toUpperCase() + source.slice(1)}

lyrics_transcriber/frontend/src/components/shared/components/Word.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { COLORS } from '../constants'
 import { HighlightedWord } from '../styles'
 import { WordProps } from '../types'
+import { Tooltip } from '@mui/material'
 
 export const WordComponent = React.memo(function Word({
     word,
@@ -10,8 +11,9 @@ export const WordComponent = React.memo(function Word({
     isCorrectedGap,
     isUncorrectedGap,
     isCurrentlyPlaying,
-    padding = '2px 4px',
+    padding = '1px 3px',
     onClick,
+    correction
 }: WordProps) {
     if (/^\s+$/.test(word)) {
         return word
@@ -29,15 +31,20 @@ export const WordComponent = React.memo(function Word({
                         ? COLORS.uncorrectedGap
                         : 'transparent'
 
-    return (
+    const wordElement = (
         <HighlightedWord
             shouldFlash={shouldFlash}
             style={{
                 backgroundColor,
                 padding,
                 cursor: 'pointer',
-                borderRadius: '3px',
+                borderRadius: '2px',
                 color: isCurrentlyPlaying ? '#ffffff' : 'inherit',
+                textDecoration: correction ? 'underline dotted' : 'none',
+                textDecorationColor: correction ? '#666' : 'inherit',
+                textUnderlineOffset: '2px',
+                fontSize: '0.85rem',
+                lineHeight: 1.2
             }}
             sx={{
                 '&:hover': {
@@ -49,4 +56,21 @@ export const WordComponent = React.memo(function Word({
             {word}
         </HighlightedWord>
     )
+
+    if (correction) {
+        const tooltipContent = (
+            <>
+                <strong>Original:</strong> "{correction.originalWord}"<br />
+                <strong>Corrected by:</strong> {correction.handler}
+            </>
+        )
+        
+        return (
+            <Tooltip title={tooltipContent} arrow placement="top">
+                {wordElement}
+            </Tooltip>
+        )
+    }
+
+    return wordElement
 }) 

lyrics_transcriber/frontend/src/components/shared/types.ts

@@ -58,6 +58,11 @@ export interface WordProps {
     isCurrentlyPlaying?: boolean
     padding?: string
     onClick?: () => void
+    correction?: {
+        originalWord: string
+        handler: string
+        confidence: number
+    } | null
 }
 
 // Text segment props
@@ -100,11 +105,21 @@ export interface ReferenceViewProps extends BaseViewProps {
 // Update HighlightedTextProps to include linePositions
 export interface HighlightedTextProps extends BaseViewProps {
     text?: string
-    wordPositions?: TranscriptionWordPosition[]
+    segments?: LyricsSegment[]
+    wordPositions: TranscriptionWordPosition[] | ReferenceWordPosition[]
     anchors: AnchorSequence[]
-    gaps: GapSequence[]
+    highlightInfo: HighlightInfo | null
+    mode: InteractionMode
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    flashingType: FlashType
     isReference?: boolean
     currentSource?: string
     preserveSegments?: boolean
     linePositions?: LinePosition[]
+    currentTime?: number
+    referenceCorrections?: Map<string, string>
+    gaps?: GapSequence[]
+    flashingHandler?: string | null
+    corrections?: WordCorrection[]
 } 

lyrics_transcriber/frontend/src/components/shared/utils/keyboardHandlers.ts

@@ -1,10 +1,11 @@
 // Add a global ref for the modal handler
 let currentModalHandler: ((e: KeyboardEvent) => void) | undefined
 let isModalOpen = false
+const debugLog = false
 
 type KeyboardState = {
     setIsShiftPressed: (value: boolean) => void
-    setIsCtrlPressed: (value: boolean) => void
+    setIsCtrlPressed?: (value: boolean) => void
     modalHandler?: {
         isOpen: boolean
         onSpacebar?: (e: KeyboardEvent) => void
@@ -13,17 +14,45 @@ type KeyboardState = {
 
 // Add functions to update the modal handler state
 export const setModalHandler = (handler: ((e: KeyboardEvent) => void) | undefined, open: boolean) => {
+    if (debugLog) {
+        console.log('setModalHandler called', {
+            hasHandler: !!handler,
+            open,
+            previousState: {
+                hadHandler: !!currentModalHandler,
+                wasOpen: isModalOpen
+            }
+        })
+    }
+
     currentModalHandler = handler
     isModalOpen = open
 }
 
 export const setupKeyboardHandlers = (state: KeyboardState) => {
     const handlerId = Math.random().toString(36).substr(2, 9)
-    console.log(`Setting up keyboard handlers [${handlerId}]`)
+    if (debugLog) {
+        console.log(`Setting up keyboard handlers [${handlerId}]`)
+    }
 
     const handleKeyDown = (e: KeyboardEvent) => {
+        if (debugLog) {
+            console.log(`Keyboard event captured [${handlerId}]`, {
+                key: e.key,
+                code: e.code,
+                type: e.type,
+                target: e.target,
+                currentTarget: e.currentTarget,
+                eventPhase: e.eventPhase,
+                isModalOpen,
+                hasModalHandler: !!currentModalHandler
+            })
+        }
+
         if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
-            console.log(`[${handlerId}] Ignoring keydown in input/textarea`)
+            if (debugLog) {
+                console.log(`[${handlerId}] Ignoring keydown in input/textarea`)
+            }
             return
         }
 
@@ -31,37 +60,79 @@ export const setupKeyboardHandlers = (state: KeyboardState) => {
             state.setIsShiftPressed(true)
             document.body.style.userSelect = 'none'
         } else if (e.key === 'Meta') {
-            state.setIsCtrlPressed(true)
+            state.setIsCtrlPressed?.(true)
         } else if (e.key === ' ' || e.code === 'Space') {
-            console.log(`[${handlerId}] Spacebar pressed:`, {
-                modalOpen: isModalOpen,
-                hasModalHandler: !!currentModalHandler,
-                hasGlobalToggle: !!window.toggleAudioPlayback
-            })
-            
+            if (debugLog) {
+                console.log('Keyboard handler - Spacebar pressed down', {
+                    modalOpen: isModalOpen,
+                    hasModalHandler: !!currentModalHandler,
+                    hasGlobalToggle: !!window.toggleAudioPlayback,
+                    target: e.target,
+                    eventPhase: e.eventPhase,
+                    handlerFunction: currentModalHandler?.toString().slice(0, 100)
+                })
+            }
+
             e.preventDefault()
-            
-            // If modal is open and has a handler, use that
+
             if (isModalOpen && currentModalHandler) {
-                console.log(`[${handlerId}] Using modal spacebar handler`)
+                if (debugLog) {
+                    console.log('Keyboard handler - Delegating to modal handler')
+                }
                 currentModalHandler(e)
-            } 
-            // Otherwise use global audio control
-            else if (window.toggleAudioPlayback && !isModalOpen) {
-                console.log(`[${handlerId}] Using global audio toggle`)
+            } else if (window.toggleAudioPlayback && !isModalOpen) {
+                if (debugLog) {
+                    console.log('Keyboard handler - Using global audio toggle')
+                }
                 window.toggleAudioPlayback()
             }
         }
     }
 
     const handleKeyUp = (e: KeyboardEvent) => {
+        if (debugLog) {
+            console.log(`Keyboard up event captured [${handlerId}]`, {
+                key: e.key,
+                code: e.code,
+                type: e.type,
+                target: e.target,
+                eventPhase: e.eventPhase,
+                isModalOpen,
+                hasModalHandler: !!currentModalHandler
+            })
+        }
+
         if (e.key === 'Shift') {
             state.setIsShiftPressed(false)
             document.body.style.userSelect = ''
         } else if (e.key === 'Meta') {
-            state.setIsCtrlPressed(false)
+            state.setIsCtrlPressed?.(false)
+        } else if (e.key === ' ' || e.code === 'Space') {
+            if (debugLog) {
+                console.log('Keyboard handler - Spacebar released', {
+                    modalOpen: isModalOpen,
+                    hasModalHandler: !!currentModalHandler,
+                    target: e.target,
+                    eventPhase: e.eventPhase
+                })
+            }
+
+            e.preventDefault()
+
+            if (isModalOpen && currentModalHandler) {
+                if (debugLog) {
+                    console.log('Keyboard handler - Delegating keyup to modal handler')
+                }
+                currentModalHandler(e)
+            }
         }
     }
 
     return { handleKeyDown, handleKeyUp }
-} 
+}
+
+// Export these for external use
+export const getModalState = () => ({
+    currentModalHandler,
+    isModalOpen
+}) 

lyrics_transcriber/frontend/src/components/shared/utils/segmentOperations.ts

@@ -117,5 +117,197 @@ export const updateSegment = (
 
     newData.corrected_segments[segmentIndex] = updatedSegment
 
+    return newData
+}
+
+export function mergeSegment(data: CorrectionData, segmentIndex: number, mergeWithNext: boolean): CorrectionData {
+    const segments = [...data.corrected_segments]
+    const targetIndex = mergeWithNext ? segmentIndex + 1 : segmentIndex - 1
+
+    // Check if target segment exists
+    if (targetIndex < 0 || targetIndex >= segments.length) {
+        return data
+    }
+
+    const baseSegment = segments[segmentIndex]
+    const targetSegment = segments[targetIndex]
+    
+    // Create merged segment
+    const mergedSegment: LyricsSegment = {
+        id: nanoid(),
+        words: mergeWithNext 
+            ? [...baseSegment.words, ...targetSegment.words]
+            : [...targetSegment.words, ...baseSegment.words],
+        text: mergeWithNext
+            ? `${baseSegment.text} ${targetSegment.text}`
+            : `${targetSegment.text} ${baseSegment.text}`,
+        start_time: Math.min(
+            baseSegment.start_time ?? Infinity,
+            targetSegment.start_time ?? Infinity
+        ),
+        end_time: Math.max(
+            baseSegment.end_time ?? -Infinity,
+            targetSegment.end_time ?? -Infinity
+        )
+    }
+
+    // Replace the two segments with the merged one
+    const minIndex = Math.min(segmentIndex, targetIndex)
+    segments.splice(minIndex, 2, mergedSegment)
+
+    return {
+        ...data,
+        corrected_segments: segments
+    }
+}
+
+export function findAndReplace(
+    data: CorrectionData,
+    findText: string,
+    replaceText: string,
+    options: { caseSensitive: boolean, useRegex: boolean, fullTextMode?: boolean } = { 
+        caseSensitive: false, 
+        useRegex: false,
+        fullTextMode: false
+    }
+): CorrectionData {
+    const newData = { ...data }
+    
+    // If full text mode is enabled, perform replacements across word boundaries
+    if (options.fullTextMode) {
+        newData.corrected_segments = data.corrected_segments.map(segment => {
+            // Create a pattern for the full segment text
+            let pattern: RegExp
+            
+            if (options.useRegex) {
+                pattern = new RegExp(findText, options.caseSensitive ? 'g' : 'gi')
+            } else {
+                const escapedFindText = findText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+                pattern = new RegExp(escapedFindText, options.caseSensitive ? 'g' : 'gi')
+            }
+            
+            // Get the full segment text
+            const segmentText = segment.text
+            
+            // If no matches, return the segment unchanged
+            if (!pattern.test(segmentText)) {
+                return segment
+            }
+            
+            // Reset pattern for replacement
+            pattern.lastIndex = 0
+            
+            // Replace in the full segment text
+            const newSegmentText = segmentText.replace(pattern, replaceText)
+            
+            // Split the new text into words
+            const newWordTexts = newSegmentText.trim().split(/\s+/).filter(text => text.length > 0)
+            
+            // Create new word objects
+            // We'll try to preserve original word IDs and timing info where possible
+            const newWords = []
+            
+            // If we have the same number of words, we can preserve IDs and timing
+            if (newWordTexts.length === segment.words.length) {
+                for (let i = 0; i < newWordTexts.length; i++) {
+                    newWords.push({
+                        ...segment.words[i],
+                        text: newWordTexts[i]
+                    })
+                }
+            } 
+            // If we have fewer words than before, some words were removed
+            else if (newWordTexts.length < segment.words.length) {
+                // Try to map new words to old words
+                let oldWordIndex = 0
+                for (let i = 0; i < newWordTexts.length; i++) {
+                    // Find the next non-empty old word
+                    while (oldWordIndex < segment.words.length && 
+                           segment.words[oldWordIndex].text.trim() === '') {
+                        oldWordIndex++
+                    }
+                    
+                    if (oldWordIndex < segment.words.length) {
+                        newWords.push({
+                            ...segment.words[oldWordIndex],
+                            text: newWordTexts[i]
+                        })
+                        oldWordIndex++
+                    } else {
+                        // If we run out of old words, create new ones
+                        newWords.push({
+                            id: nanoid(),
+                            text: newWordTexts[i],
+                            start_time: null,
+                            end_time: null
+                        })
+                    }
+                }
+            }
+            // If we have more words than before, some words were added
+            else {
+                // Try to preserve original words where possible
+                for (let i = 0; i < newWordTexts.length; i++) {
+                    if (i < segment.words.length) {
+                        newWords.push({
+                            ...segment.words[i],
+                            text: newWordTexts[i]
+                        })
+                    } else {
+                        // For new words, create new IDs
+                        newWords.push({
+                            id: nanoid(),
+                            text: newWordTexts[i],
+                            start_time: null,
+                            end_time: null
+                        })
+                    }
+                }
+            }
+            
+            return {
+                ...segment,
+                words: newWords,
+                text: newSegmentText
+            }
+        })
+    } 
+    // Word-level replacement (original implementation)
+    else {
+        newData.corrected_segments = data.corrected_segments.map(segment => {
+            // Replace in each word
+            let newWords = segment.words.map(word => {
+                let pattern: RegExp
+                
+                if (options.useRegex) {
+                    // Create regex with or without case sensitivity
+                    pattern = new RegExp(findText, options.caseSensitive ? 'g' : 'gi')
+                } else {
+                    // Escape special regex characters for literal search
+                    const escapedFindText = findText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+                    pattern = new RegExp(escapedFindText, options.caseSensitive ? 'g' : 'gi')
+                }
+                
+                return {
+                    ...word,
+                    text: word.text.replace(pattern, replaceText)
+                }
+            });
+
+            // Filter out words that have become empty
+            newWords = newWords.filter(word => word.text.trim() !== '');
+
+            // Update segment text
+            return {
+                ...segment,
+                words: newWords,
+                text: newWords.map(w => w.text).join(' ')
+            }
+        });
+    }
+
+    // Filter out segments that have no words left
+    newData.corrected_segments = newData.corrected_segments.filter(segment => segment.words.length > 0);
+
     return newData
 }