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

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx

@@ -1,21 +1,24 @@
+import {
+    CorrectionData,
+    HighlightInfo,
+    InteractionMode,
+    LyricsData,
+    LyricsSegment
+} from '../types'
 import LockIcon from '@mui/icons-material/Lock'
 import UploadFileIcon from '@mui/icons-material/UploadFile'
 import { Box, Button, Grid, Typography, useMediaQuery, useTheme } from '@mui/material'
-import { useCallback, useState } from 'react'
+import { useCallback, useState, useEffect } from 'react'
 import { ApiClient } from '../api'
-import { CorrectionData, LyricsData, HighlightInfo, AnchorMatchInfo, GapSequence, AnchorSequence, LyricsSegment, WordCorrection } from '../types'
 import CorrectionMetrics from './CorrectionMetrics'
 import DetailsModal from './DetailsModal'
+import ModeSelector from './ModeSelector'
 import ReferenceView from './ReferenceView'
 import TranscriptionView from './TranscriptionView'
-import DebugPanel from './DebugPanel'
-
-interface WordClickInfo {
-    wordIndex: number
-    type: 'anchor' | 'gap' | 'other'
-    anchor?: AnchorSequence
-    gap?: GapSequence
-}
+import { WordClickInfo, FlashType } from './shared/types'
+import EditModal from './EditModal'
+import ReviewChangesModal from './ReviewChangesModal'
+import AudioPlayer from './AudioPlayer'
 
 interface LyricsAnalyzerProps {
     data: CorrectionData
@@ -29,6 +32,7 @@ export type ModalContent = {
     type: 'anchor'
     data: LyricsData['anchor_sequences'][0] & {
         position: number
+        word?: string
     }
 } | {
     type: 'gap'
@@ -38,8 +42,6 @@ export type ModalContent = {
     }
 }
 
-export type FlashType = 'anchor' | 'corrected' | 'uncorrected' | 'word' | null
-
 function normalizeDataForSubmission(data: CorrectionData): CorrectionData {
     // Create a deep clone to avoid modifying the original
     const normalized = JSON.parse(JSON.stringify(data))
@@ -71,13 +73,96 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     const [flashingType, setFlashingType] = useState<FlashType>(null)
     const [highlightInfo, setHighlightInfo] = useState<HighlightInfo | null>(null)
     const [currentSource, setCurrentSource] = useState<'genius' | 'spotify'>('genius')
-    const [anchorMatchInfo, setAnchorMatchInfo] = useState<AnchorMatchInfo[]>([])
-    const [manualCorrections, setManualCorrections] = useState<Map<number, string[]>>(new Map())
     const [isReviewComplete, setIsReviewComplete] = useState(false)
     const [data, setData] = useState(initialData)
+    // Create deep copy of initial data for comparison later
+    const [originalData] = useState(() => JSON.parse(JSON.stringify(initialData)))
+    const [interactionMode, setInteractionMode] = useState<InteractionMode>('details')
+    const [isShiftPressed, setIsShiftPressed] = useState(false)
+    const [isCtrlPressed, setIsCtrlPressed] = useState(false)
+    const [editModalSegment, setEditModalSegment] = useState<{
+        segment: LyricsSegment
+        index: number
+        originalSegment: LyricsSegment
+    } | null>(null)
+    const [isReviewModalOpen, setIsReviewModalOpen] = useState(false)
+    const [currentAudioTime, setCurrentAudioTime] = useState(0)
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
+    // Add local storage handling
+    useEffect(() => {
+        // On mount, try to load saved data
+        const savedData = localStorage.getItem('lyrics_analyzer_data')
+        if (savedData) {
+            try {
+                const parsed = JSON.parse(savedData)
+                // Only restore if it's the same song (matching transcribed text)
+                if (parsed.transcribed_text === initialData.transcribed_text) {
+                    console.log('Restored saved progress from local storage')
+                    setData(parsed)
+                } else {
+                    // Clear old data if it's a different song
+                    localStorage.removeItem('lyrics_analyzer_data')
+                }
+            } catch (error) {
+                console.error('Failed to parse saved data:', error)
+                localStorage.removeItem('lyrics_analyzer_data')
+            }
+        }
+    }, [initialData.transcribed_text])
+
+    // Save to local storage whenever data changes
+    useEffect(() => {
+        if (!isReadOnly) {
+            localStorage.setItem('lyrics_analyzer_data', JSON.stringify(data))
+        }
+    }, [data, isReadOnly])
+
+    // Add keyboard event handlers
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            // Ignore if user is typing in an input or textarea
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+                return
+            }
+
+            if (e.key === 'Shift') {
+                setIsShiftPressed(true)
+                document.body.style.userSelect = 'none'
+            } else if (e.key === 'Meta') {
+                setIsCtrlPressed(true)
+            } else if (e.key === ' ' || e.code === 'Space') {
+                e.preventDefault() // Prevent page scroll
+                if ((window as any).toggleAudioPlayback) {
+                    (window as any).toggleAudioPlayback()
+                }
+            }
+        }
+
+        const handleKeyUp = (e: KeyboardEvent) => {
+            if (e.key === 'Shift') {
+                setIsShiftPressed(false)
+                document.body.style.userSelect = ''
+            } else if (e.key === 'Meta') {
+                setIsCtrlPressed(false)
+            }
+        }
+
+        window.addEventListener('keydown', handleKeyDown)
+        window.addEventListener('keyup', handleKeyUp)
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown)
+            window.removeEventListener('keyup', handleKeyUp)
+            document.body.style.userSelect = ''
+        }
+    }, [])
+
+    // Calculate effective mode based on modifier key states
+    const effectiveMode = isShiftPressed ? 'highlight' :
+        isCtrlPressed ? 'edit' :
+            interactionMode
+
     const handleFlash = useCallback((type: FlashType, info?: HighlightInfo) => {
         setFlashingType(null)
         setHighlightInfo(null)
@@ -97,229 +182,141 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     }, [])
 
     const handleWordClick = useCallback((info: WordClickInfo) => {
-        console.group('Word Click Debug Info')
-        console.log('Clicked word info:', JSON.stringify(info, null, 2))
-
-        if (info.type === 'gap' && info.gap) {
-            console.log('Gap sequence:', JSON.stringify(info.gap, null, 2))
-            const modalData = {
-                type: 'gap' as const,
-                data: {
-                    ...info.gap,
-                    position: info.gap.transcription_position + (info.wordIndex - info.gap.transcription_position),
-                    word: info.gap.words[info.wordIndex - info.gap.transcription_position]
+        if (effectiveMode === 'edit') {
+            let currentPosition = 0
+            const segmentIndex = data.corrected_segments.findIndex(segment => {
+                if (info.wordIndex >= currentPosition &&
+                    info.wordIndex < currentPosition + segment.words.length) {
+                    return true
                 }
-            }
-            setModalContent(modalData)
-            console.log('Set modal content:', JSON.stringify(modalData, null, 2))
-        }
-
-        console.groupEnd()
-    }, [])
-
-    const handleUpdateCorrection = useCallback((position: number, updatedWords: string[]) => {
-        console.group('handleUpdateCorrection Debug')
-        console.log('Position:', position)
-        console.log('Updated words:', updatedWords)
-
-        // Create a deep clone of the data
-        const newData = JSON.parse(JSON.stringify(data))
-
-        // Find the gap that contains this position
-        const gapIndex = newData.gap_sequences.findIndex(
-            (gap: GapSequence) =>
-                position >= gap.transcription_position &&
-                position < gap.transcription_position + gap.words.length
-        )
-
-        if (gapIndex !== -1) {
-            const originalGap = newData.gap_sequences[gapIndex]
-            const wordIndexInGap = position - originalGap.transcription_position
-            console.log('Found gap at index:', gapIndex, 'word index in gap:', wordIndexInGap)
-
-            // Update manual corrections
-            setManualCorrections(prev => {
-                const newCorrections = new Map(prev)
-                newCorrections.set(position, updatedWords)
-                return newCorrections
+                currentPosition += segment.words.length
+                return false
             })
 
-            // Create a new correction
-            const newCorrection: WordCorrection = {
-                original_word: originalGap.words[wordIndexInGap],
-                corrected_word: updatedWords.join(' '),
-                segment_index: 0,
-                original_position: position,
-                source: 'manual',
-                confidence: 1.0,
-                reason: 'Manual correction during review',
-                alternatives: {},
-                is_deletion: false,
-                length: updatedWords.length,
-                reference_positions: {}
+            if (segmentIndex !== -1) {
+                setEditModalSegment({
+                    segment: data.corrected_segments[segmentIndex],
+                    index: segmentIndex,
+                    originalSegment: originalData.corrected_segments[segmentIndex]
+                })
             }
-
-            // Find the corresponding segment by counting words
-            let currentPosition = 0
-            let segmentIndex = -1
-            let wordIndex = -1
-
-            for (let i = 0; i < newData.corrected_segments.length; i++) {
-                const segment = newData.corrected_segments[i]
-                if (position >= currentPosition && position < currentPosition + segment.words.length) {
-                    segmentIndex = i
-                    wordIndex = position - currentPosition
-                    break
-                }
-                currentPosition += segment.words.length
+        } else {
+            // Existing word click handling for other modes...
+            if (info.type === 'anchor' && info.anchor) {
+                handleFlash('word', {
+                    type: 'anchor',
+                    transcriptionIndex: info.anchor.transcription_position,
+                    transcriptionLength: info.anchor.length,
+                    referenceIndices: info.anchor.reference_positions,
+                    referenceLength: info.anchor.length
+                })
+            } else if (info.type === 'gap' && info.gap) {
+                handleFlash('word', {
+                    type: 'gap',
+                    transcriptionIndex: info.gap.transcription_position,
+                    transcriptionLength: info.gap.length,
+                    referenceIndices: {},
+                    referenceLength: info.gap.length
+                })
             }
+        }
+    }, [effectiveMode, data.corrected_segments, handleFlash, originalData.corrected_segments])
 
-            console.log('Segment search:', {
-                position,
-                segmentIndex,
-                wordIndex,
-                totalSegments: newData.corrected_segments.length
-            })
+    const handleUpdateSegment = useCallback((updatedSegment: LyricsSegment) => {
+        console.log('LyricsAnalyzer - handleUpdateSegment called:', {
+            editModalSegment,
+            updatedSegment,
+            currentSegmentsCount: data.corrected_segments.length
+        })
 
-            if (segmentIndex !== -1 && wordIndex !== -1) {
-                const segment = newData.corrected_segments[segmentIndex]
-                const timingWord = segment.words[wordIndex]
+        if (!editModalSegment) {
+            console.warn('LyricsAnalyzer - No editModalSegment found')
+            return
+        }
 
-                console.log('Found matching segment:', {
-                    text: segment.text,
-                    wordCount: segment.words.length,
-                    wordIndex,
-                    word: timingWord?.text
-                })
+        const newData = { ...data }
+        console.log('LyricsAnalyzer - Before update:', {
+            segmentIndex: editModalSegment.index,
+            oldText: newData.corrected_segments[editModalSegment.index].text,
+            newText: updatedSegment.text
+        })
 
-                if (!timingWord) {
-                    console.error('Could not find timing word in segment')
-                    console.groupEnd()
-                    return
-                }
+        newData.corrected_segments[editModalSegment.index] = updatedSegment
 
-                // Update gap sequence
-                const newWords = [...originalGap.words]
-                newWords[wordIndexInGap] = updatedWords[0]
-                newData.gap_sequences[gapIndex] = {
-                    ...originalGap,
-                    words: newWords,
-                    text: newWords.join(' '),
-                    corrections: originalGap.corrections
-                        .filter((c: WordCorrection) => c.source !== 'manual')
-                        .concat([newCorrection])
-                }
+        // Update corrected_text
+        newData.corrected_text = newData.corrected_segments
+            .map(segment => segment.text)
+            .join('\n')
 
-                // Update segment
-                const newSegmentWords = [...segment.words]
-                newSegmentWords[wordIndex] = {
-                    ...timingWord,
-                    text: updatedWords[0],
-                    confidence: 1.0
-                }
+        console.log('LyricsAnalyzer - After update:', {
+            segmentsCount: newData.corrected_segments.length,
+            updatedText: newData.corrected_text
+        })
 
-                newData.corrected_segments[segmentIndex] = {
-                    ...segment,
-                    words: newSegmentWords,
-                    text: newSegmentWords.map(word => word.text).join(' ')
-                }
+        setData(newData)
+        setEditModalSegment(null)  // Close the modal
+    }, [data, editModalSegment])
 
-                console.log('Updated both gap and segment')
-            } else {
-                console.error('Could not find matching segment for position:', position)
-            }
-        }
+    const handleDeleteSegment = useCallback((segmentIndex: number) => {
+        console.log('LyricsAnalyzer - handleDeleteSegment called:', {
+            segmentIndex,
+            currentSegmentsCount: data.corrected_segments.length
+        })
+
+        const newData = { ...data }
+        newData.corrected_segments = newData.corrected_segments.filter((_, index) => index !== segmentIndex)
 
-        // Update the corrected_text field
+        // Update corrected_text
         newData.corrected_text = newData.corrected_segments
-            .map((segment: LyricsSegment) => segment.text)
+            .map(segment => segment.text)
             .join('\n')
 
+        console.log('LyricsAnalyzer - After delete:', {
+            segmentsCount: newData.corrected_segments.length,
+            updatedText: newData.corrected_text
+        })
+
         setData(newData)
-        console.groupEnd()
     }, [data])
 
-    const handleFinishReview = useCallback(async () => {
+    const handleFinishReview = useCallback(() => {
+        setIsReviewModalOpen(true)
+    }, [])
+
+    const handleSubmitToServer = useCallback(async () => {
         if (!apiClient) return
 
-        let dataToSubmit: CorrectionData
-        if (manualCorrections.size > 0) {
-            console.log('Manual corrections found:', Array.from(manualCorrections.entries()))
-
-            // Only proceed with data modifications if there were manual corrections
-            const updatedData = JSON.parse(JSON.stringify(data))
-            console.log('Deep cloned data:', JSON.stringify(updatedData, null, 2))
-
-            // Only update the specific gaps that were manually corrected
-            updatedData.gap_sequences = updatedData.gap_sequences.map((gap: GapSequence) => {
-                const manualUpdate = manualCorrections.get(gap.transcription_position)
-                if (manualUpdate) {
-                    return {
-                        ...gap,
-                        words: manualUpdate,
-                        text: manualUpdate.join(' '),
-                        corrections: [
-                            ...gap.corrections,
-                            {
-                                original_word: gap.text,
-                                corrected_word: manualUpdate.join(' '),
-                                segment_index: 0,
-                                original_position: gap.transcription_position,
-                                source: 'manual',
-                                confidence: 1.0,
-                                reason: 'Manual correction during review',
-                                alternatives: {},
-                                is_deletion: false,
-                                length: manualUpdate.length,
-                                reference_positions: {}
-                            }
-                        ]
-                    }
-                }
-                return gap
-            })
+        try {
+            console.log('Submitting changes to server')
+            const dataToSubmit = normalizeDataForSubmission(data)
+            await apiClient.submitCorrections(dataToSubmit)
 
-            // Preserve original newline formatting in corrected_text
-            if (manualCorrections.size > 0) {
-                const lines: string[] = updatedData.corrected_text.split('\n')
-                let currentPosition = 0
-                const updatedLines = lines.map((line: string) => {
-                    const words = line.trim().split(/\s+/)
-                    const lineLength = words.length
-
-                    // Check if this line contains any corrections
-                    let lineUpdated = false
-                    for (const [position, updatedWords] of manualCorrections.entries()) {
-                        if (position >= currentPosition && position < currentPosition + lineLength) {
-                            const gapPosition = position - currentPosition
-                            const gap = updatedData.gap_sequences.find((g: GapSequence) =>
-                                g.transcription_position === position
-                            )
-                            if (gap) {
-                                words.splice(gapPosition, gap.length, ...updatedWords)
-                                lineUpdated = true
-                            }
-                        }
-                    }
-                    currentPosition += lineLength
-                    return lineUpdated ? words.join(' ') : line
-                })
-                updatedData.corrected_text = updatedLines.join('\n')
-            }
+            setIsReviewComplete(true)
+            setIsReviewModalOpen(false)
 
-            dataToSubmit = normalizeDataForSubmission(updatedData)
-            console.log('Submitting data with manual corrections:', dataToSubmit)
-        } else {
-            console.log('Original data:', initialData)
-            console.log('No manual corrections, submitting original data')
-            dataToSubmit = normalizeDataForSubmission(initialData)
+            // Close the browser tab
+            window.close()
+        } catch (error) {
+            console.error('Failed to submit corrections:', error)
+            alert('Failed to submit corrections. Please try again.')
         }
+    }, [apiClient, data])
 
-        console.log('Data being sent to API:', dataToSubmit)
-        await apiClient.submitCorrections(dataToSubmit)
-        setIsReviewComplete(true)
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [apiClient, initialData, manualCorrections])
+    const handlePlaySegment = useCallback((startTime: number) => {
+        // Access the globally exposed seekAndPlay method
+        if ((window as any).seekAndPlayAudio) {
+            (window as any).seekAndPlayAudio(startTime)
+        }
+    }, [])
+
+    const handleResetCorrections = useCallback(() => {
+        if (window.confirm('Are you sure you want to reset all corrections? This cannot be undone.')) {
+            // Clear local storage
+            localStorage.removeItem('lyrics_analyzer_data')
+            // Reset data to initial state
+            setData(JSON.parse(JSON.stringify(initialData)))
+        }
+    }, [initialData])
 
     return (
         <Box>
@@ -354,6 +351,13 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 )}
             </Box>
 
+            <Box sx={{ mb: 3 }}>
+                <AudioPlayer
+                    apiClient={apiClient}
+                    onTimeUpdate={setCurrentAudioTime}
+                />
+            </Box>
+
             <Box sx={{ mb: 3 }}>
                 <CorrectionMetrics
                     // Anchor metrics
@@ -394,20 +398,24 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 />
             </Box>
 
-            <DebugPanel
-                data={data}
-                currentSource={currentSource}
-                anchorMatchInfo={anchorMatchInfo}
-            />
+            <Box sx={{ mb: 3 }}>
+                <ModeSelector
+                    effectiveMode={effectiveMode}
+                    onChange={setInteractionMode}
+                />
+            </Box>
 
             <Grid container spacing={2} direction={isMobile ? 'column' : 'row'}>
                 <Grid item xs={12} md={6}>
                     <TranscriptionView
                         data={data}
+                        mode={effectiveMode}
                         onElementClick={setModalContent}
                         onWordClick={handleWordClick}
                         flashingType={flashingType}
                         highlightInfo={highlightInfo}
+                        onPlaySegment={handlePlaySegment}
+                        currentTime={currentAudioTime}
                     />
                 </Grid>
                 <Grid item xs={12} md={6}>
@@ -415,13 +423,14 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                         referenceTexts={data.reference_texts}
                         anchors={data.anchor_sequences}
                         gaps={data.gap_sequences}
+                        mode={effectiveMode}
                         onElementClick={setModalContent}
                         onWordClick={handleWordClick}
                         flashingType={flashingType}
-                        corrected_segments={data.corrected_segments}
+                        highlightInfo={highlightInfo}
                         currentSource={currentSource}
                         onSourceChange={setCurrentSource}
-                        onDebugInfoUpdate={setAnchorMatchInfo}
+                        corrected_segments={data.corrected_segments}
                     />
                 </Grid>
             </Grid>
@@ -430,12 +439,30 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 open={modalContent !== null}
                 content={modalContent}
                 onClose={() => setModalContent(null)}
-                onUpdateCorrection={handleUpdateCorrection}
-                isReadOnly={isReadOnly}
+            />
+
+            <EditModal
+                open={Boolean(editModalSegment)}
+                onClose={() => setEditModalSegment(null)}
+                segment={editModalSegment?.segment ?? null}
+                segmentIndex={editModalSegment?.index ?? null}
+                originalSegment={editModalSegment?.originalSegment ?? null}
+                onSave={handleUpdateSegment}
+                onDelete={handleDeleteSegment}
+                onPlaySegment={handlePlaySegment}
+                currentTime={currentAudioTime}
+            />
+
+            <ReviewChangesModal
+                open={isReviewModalOpen}
+                onClose={() => setIsReviewModalOpen(false)}
+                originalData={originalData}
+                updatedData={data}
+                onSubmit={handleSubmitToServer}
             />
 
             {!isReadOnly && apiClient && (
-                <Box sx={{ mt: 2 }}>
+                <Box sx={{ mt: 2, mb: 3, display: 'flex', gap: 2 }}>
                     <Button
                         variant="contained"
                         onClick={handleFinishReview}
@@ -443,6 +470,13 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                     >
                         {isReviewComplete ? 'Review Complete' : 'Finish Review'}
                     </Button>
+                    <Button
+                        variant="outlined"
+                        color="warning"
+                        onClick={handleResetCorrections}
+                    >
+                        Reset Corrections
+                    </Button>
                 </Box>
             )}
         </Box>

lyrics_transcriber/frontend/src/components/ModeSelector.tsx

@@ -0,0 +1,39 @@
+import { ToggleButton, ToggleButtonGroup, Box, Typography } from '@mui/material';
+import HighlightIcon from '@mui/icons-material/Highlight';
+import InfoIcon from '@mui/icons-material/Info';
+import EditIcon from '@mui/icons-material/Edit';
+import { InteractionMode } from '../types';
+
+interface ModeSelectorProps {
+    effectiveMode: InteractionMode;
+    onChange: (mode: InteractionMode) => void;
+}
+
+export default function ModeSelector({ effectiveMode, onChange }: ModeSelectorProps) {
+    return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Typography variant="body2" color="text.secondary">
+                Click Mode:
+            </Typography>
+            <ToggleButtonGroup
+                value={effectiveMode}
+                exclusive
+                onChange={(_, newMode) => newMode && onChange(newMode)}
+                size="small"
+            >
+                <ToggleButton value="details">
+                    <InfoIcon sx={{ mr: 1 }} />
+                    Details
+                </ToggleButton>
+                <ToggleButton value="highlight">
+                    <HighlightIcon sx={{ mr: 1 }} />
+                    Highlight
+                </ToggleButton>
+                <ToggleButton value="edit">
+                    <EditIcon sx={{ mr: 1 }} />
+                    Edit
+                </ToggleButton>
+            </ToggleButtonGroup>
+        </Box>
+    );
+}