lyrics-transcriber 0.41.0__py3-none-any.whl → 0.42.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/EditModal.tsx

@@ -35,6 +35,8 @@ interface EditModalProps {
     onPlaySegment?: (startTime: number) => void
     currentTime?: number
     onDelete?: (segmentIndex: number) => void
+    onAddSegment?: (segmentIndex: number) => void
+    onSplitSegment?: (segmentIndex: number, afterWordIndex: number) => void
 }
 
 export default function EditModal({
@@ -47,6 +49,8 @@ export default function EditModal({
     onPlaySegment,
     currentTime = 0,
     onDelete,
+    onAddSegment,
+    onSplitSegment,
 }: EditModalProps) {
     const [editedSegment, setEditedSegment] = useState<LyricsSegment | null>(segment)
     const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null)
@@ -58,22 +62,36 @@ export default function EditModal({
         setEditedSegment(segment)
     }, [segment])
 
+    // Add a function to get safe time values
+    const getSafeTimeRange = (segment: LyricsSegment | null) => {
+        if (!segment) return { start: 0, end: 1 }; // Default 1-second range
+
+        const start = segment.start_time ?? 0;
+        const end = segment.end_time ?? (start + 1);
+        return { start, end };
+    }
+
     if (!segment || segmentIndex === null || !editedSegment || !originalSegment) return null
 
-    const handleWordChange = (index: number, field: keyof Word, value: string | number) => {
+    // Get safe time values for TimelineEditor
+    const timeRange = getSafeTimeRange(editedSegment)
+
+    const handleWordChange = (index: number, updates: Partial<Word>) => {
         const newWords = [...editedSegment.words]
         newWords[index] = {
             ...newWords[index],
-            [field]: field === 'start_time' || field === 'end_time'
-                ? parseFloat(Number(value).toFixed(4))
-                : value
+            ...updates
         }
         updateSegment(newWords)
     }
 
     const updateSegment = (newWords: Word[]) => {
-        const segmentStartTime = Math.min(...newWords.map(w => w.start_time))
-        const segmentEndTime = Math.max(...newWords.map(w => w.end_time))
+        // Filter out null values before finding min/max
+        const validStartTimes = newWords.map(w => w.start_time).filter((t): t is number => t !== null)
+        const validEndTimes = newWords.map(w => w.end_time).filter((t): t is number => t !== null)
+
+        const segmentStartTime = validStartTimes.length > 0 ? Math.min(...validStartTimes) : null
+        const segmentEndTime = validEndTimes.length > 0 ? Math.max(...validEndTimes) : null
 
         setEditedSegment({
             ...editedSegment,
@@ -91,11 +109,12 @@ export default function EditModal({
         if (index === undefined) {
             // Add at end
             const lastWord = newWords[newWords.length - 1]
+            const lastEndTime = lastWord.end_time ?? 0
             newWord = {
                 id: nanoid(),
                 text: '',
-                start_time: lastWord.end_time,
-                end_time: lastWord.end_time + 0.5,
+                start_time: lastEndTime,
+                end_time: lastEndTime + 0.5,
                 confidence: 1.0
             }
             newWords.push(newWord)
@@ -104,8 +123,11 @@ export default function EditModal({
             const prevWord = newWords[index]
             const nextWord = newWords[index + 1]
             const midTime = prevWord ?
-                (nextWord ? (prevWord.end_time + nextWord.start_time) / 2 : prevWord.end_time + 0.5) :
-                (nextWord ? nextWord.start_time - 0.5 : 0)
+                (nextWord ?
+                    ((prevWord.end_time ?? 0) + (nextWord.start_time ?? 0)) / 2 :
+                    (prevWord.end_time ?? 0) + 0.5
+                ) :
+                (nextWord ? (nextWord.start_time ?? 0) - 0.5 : 0)
 
             newWord = {
                 id: nanoid(),
@@ -122,7 +144,9 @@ export default function EditModal({
 
     const handleSplitWord = (index: number) => {
         const word = editedSegment.words[index]
-        const midTime = (word.start_time + word.end_time) / 2
+        const startTime = word.start_time ?? 0
+        const endTime = word.end_time ?? startTime + 0.5
+        const midTime = (startTime + endTime) / 2
         const words = word.text.split(/\s+/)
 
         if (words.length <= 1) {
@@ -138,7 +162,7 @@ export default function EditModal({
             {
                 id: nanoid(),
                 text: words[0],
-                start_time: word.start_time,
+                start_time: startTime,
                 end_time: midTime,
                 confidence: 1.0
             },
@@ -146,7 +170,7 @@ export default function EditModal({
                 id: nanoid(),
                 text: words[1],
                 start_time: midTime,
-                end_time: word.end_time,
+                end_time: endTime,
                 confidence: 1.0
             }
         )
@@ -164,8 +188,8 @@ export default function EditModal({
         newWords.splice(index, 2, {
             id: nanoid(),
             text: `${word1.text} ${word2.text}`.trim(),
-            start_time: word1.start_time,
-            end_time: word2.end_time,
+            start_time: word1.start_time ?? null,
+            end_time: word2.end_time ?? null,
             confidence: 1.0
         })
 
@@ -198,7 +222,7 @@ export default function EditModal({
                 originalText: segment?.text,
                 editedText: editedSegment.text,
                 wordCount: editedSegment.words.length,
-                timeRange: `${editedSegment.start_time.toFixed(4)} - ${editedSegment.end_time.toFixed(4)}`
+                timeRange: `${editedSegment.start_time?.toFixed(4) ?? 'N/A'} - ${editedSegment.end_time?.toFixed(4) ?? 'N/A'}`
             })
             onSave(editedSegment)
             onClose()
@@ -209,7 +233,9 @@ export default function EditModal({
         if (!editedSegment) return
 
         const newWords = replacementText.trim().split(/\s+/)
-        const segmentDuration = editedSegment.end_time - editedSegment.start_time
+        const startTime = editedSegment.start_time ?? 0
+        const endTime = editedSegment.end_time ?? (startTime + newWords.length) // Default to 1 second per word
+        const segmentDuration = endTime - startTime
 
         let updatedWords: Word[]
 
@@ -228,8 +254,8 @@ export default function EditModal({
             updatedWords = newWords.map((text, index) => ({
                 id: nanoid(),  // Generate new ID
                 text,
-                start_time: editedSegment.start_time + (index * avgWordDuration),
-                end_time: editedSegment.start_time + ((index + 1) * avgWordDuration),
+                start_time: startTime + (index * avgWordDuration),
+                end_time: startTime + ((index + 1) * avgWordDuration),
                 confidence: 1.0
             }))
         }
@@ -252,6 +278,13 @@ export default function EditModal({
         }
     }
 
+    const handleSplitSegment = (wordIndex: number) => {
+        if (segmentIndex !== null && editedSegment) {
+            handleSave()  // Save current changes first
+            onSplitSegment?.(segmentIndex, wordIndex)
+        }
+    }
+
     return (
         <Dialog
             open={open}
@@ -263,10 +296,10 @@ export default function EditModal({
             <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
                     Edit Segment {segmentIndex}
-                    {segment?.start_time !== undefined && onPlaySegment && (
+                    {segment?.start_time !== null && onPlaySegment && (
                         <IconButton
                             size="small"
-                            onClick={() => onPlaySegment(segment.start_time)}
+                            onClick={() => onPlaySegment(segment.start_time!)}
                             sx={{ padding: '4px' }}
                         >
                             <PlayCircleOutlineIcon />
@@ -281,22 +314,18 @@ export default function EditModal({
                 <Box sx={{ mb: 2 }}>
                     <TimelineEditor
                         words={editedSegment.words}
-                        startTime={editedSegment.start_time}
-                        endTime={editedSegment.end_time}
-                        onWordUpdate={(index, updates) => {
-                            const newWords = [...editedSegment.words]
-                            newWords[index] = { ...newWords[index], ...updates }
-                            updateSegment(newWords)
-                        }}
+                        startTime={timeRange.start}
+                        endTime={timeRange.end}
+                        onWordUpdate={handleWordChange}
                         currentTime={currentTime}
                         onPlaySegment={onPlaySegment}
                     />
                 </Box>
 
                 <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-                    Original Time Range: {originalSegment.start_time.toFixed(2)} - {originalSegment.end_time.toFixed(2)}
+                    Original Time Range: {originalSegment.start_time?.toFixed(2) ?? 'N/A'} - {originalSegment.end_time?.toFixed(2) ?? 'N/A'}
                     <br />
-                    Current Time Range: {editedSegment.start_time.toFixed(2)} - {editedSegment.end_time.toFixed(2)}
+                    Current Time Range: {editedSegment.start_time?.toFixed(2) ?? 'N/A'} - {editedSegment.end_time?.toFixed(2) ?? 'N/A'}
                 </Typography>
 
                 <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 3 }}>
@@ -305,14 +334,14 @@ export default function EditModal({
                             <TextField
                                 label={`Word ${index}`}
                                 value={word.text}
-                                onChange={(e) => handleWordChange(index, 'text', e.target.value)}
+                                onChange={(e) => handleWordChange(index, { text: e.target.value })}
                                 fullWidth
                                 size="small"
                             />
                             <TextField
                                 label="Start Time"
-                                value={word.start_time.toFixed(2)}
-                                onChange={(e) => handleWordChange(index, 'start_time', parseFloat(e.target.value))}
+                                value={word.start_time?.toFixed(2) ?? ''}
+                                onChange={(e) => handleWordChange(index, { start_time: parseFloat(e.target.value) })}
                                 type="number"
                                 inputProps={{ step: 0.01 }}
                                 sx={{ width: '150px' }}
@@ -320,13 +349,20 @@ export default function EditModal({
                             />
                             <TextField
                                 label="End Time"
-                                value={word.end_time.toFixed(2)}
-                                onChange={(e) => handleWordChange(index, 'end_time', parseFloat(e.target.value))}
+                                value={word.end_time?.toFixed(2) ?? ''}
+                                onChange={(e) => handleWordChange(index, { end_time: parseFloat(e.target.value) })}
                                 type="number"
                                 inputProps={{ step: 0.01 }}
                                 sx={{ width: '150px' }}
                                 size="small"
                             />
+                            <IconButton
+                                onClick={() => handleRemoveWord(index)}
+                                disabled={editedSegment.words.length <= 1}
+                                sx={{ color: 'error.main' }}
+                            >
+                                <DeleteIcon fontSize="small" />
+                            </IconButton>
                             <IconButton onClick={(e) => handleWordMenu(e, index)}>
                                 <MoreVertIcon />
                             </IconButton>
@@ -361,14 +397,22 @@ export default function EditModal({
                 >
                     Reset
                 </Button>
-                <Button
-                    startIcon={<DeleteIcon />}
-                    onClick={handleDelete}
-                    color="error"
-                    sx={{ mr: 'auto' }}
-                >
-                    Delete Segment
-                </Button>
+                <Box sx={{ mr: 'auto', display: 'flex', gap: 1 }}>
+                    <Button
+                        startIcon={<AddIcon />}
+                        onClick={() => segmentIndex !== null && onAddSegment?.(segmentIndex)}
+                        color="primary"
+                    >
+                        Add Segment Before
+                    </Button>
+                    <Button
+                        startIcon={<DeleteIcon />}
+                        onClick={handleDelete}
+                        color="error"
+                    >
+                        Delete Segment
+                    </Button>
+                </Box>
                 <Button onClick={onClose}>Cancel</Button>
                 <Button onClick={handleSave} variant="contained">
                     Save Changes
@@ -392,6 +436,12 @@ export default function EditModal({
                 }}>
                     <SplitIcon sx={{ mr: 1 }} /> Split Word
                 </MenuItem>
+                <MenuItem onClick={() => {
+                    handleSplitSegment(selectedWordIndex!)
+                    handleMenuClose()
+                }}>
+                    <SplitIcon sx={{ mr: 1 }} /> Split Segment After Word
+                </MenuItem>
                 <MenuItem
                     onClick={() => {
                         handleMergeWords(selectedWordIndex!)

lyrics_transcriber/frontend/src/components/FileUpload.tsx

@@ -1,10 +1,10 @@
 import { ChangeEvent, DragEvent, useState } from 'react'
 import { Paper, Typography } from '@mui/material'
 import CloudUploadIcon from '@mui/icons-material/CloudUpload'
-import { LyricsData } from '../types'
+import { CorrectionData } from '../types'
 
 interface FileUploadProps {
-    onUpload: (data: LyricsData) => void
+    onUpload: (data: CorrectionData) => void
 }
 
 export default function FileUpload({ onUpload }: FileUploadProps) {

lyrics_transcriber/frontend/src/components/Header.tsx

@@ -0,0 +1,251 @@
+import { Box, Button, Typography, useMediaQuery, useTheme, Switch, FormControlLabel, Tooltip, CircularProgress } from '@mui/material'
+import LockIcon from '@mui/icons-material/Lock'
+import UploadFileIcon from '@mui/icons-material/UploadFile'
+import { CorrectionData } from '../types'
+import CorrectionMetrics from './CorrectionMetrics'
+import ModeSelector from './ModeSelector'
+import AudioPlayer from './AudioPlayer'
+import { InteractionMode } from '../types'
+import { ApiClient } from '../api'
+import { findWordById } from './shared/utils/wordUtils'
+
+interface HeaderProps {
+    isReadOnly: boolean
+    onFileLoad: () => void
+    data: CorrectionData
+    onMetricClick: {
+        anchor: () => void
+        corrected: () => void
+        uncorrected: () => void
+    }
+    effectiveMode: InteractionMode
+    onModeChange: (mode: InteractionMode) => void
+    apiClient: ApiClient | null
+    audioHash: string
+    onTimeUpdate: (time: number) => void
+    onHandlerToggle: (handler: string, enabled: boolean) => void
+    isUpdatingHandlers: boolean
+    onHandlerClick?: (handler: string) => void
+}
+
+export default function Header({
+    isReadOnly,
+    onFileLoad,
+    data,
+    onMetricClick,
+    effectiveMode,
+    onModeChange,
+    apiClient,
+    audioHash,
+    onTimeUpdate,
+    onHandlerToggle,
+    isUpdatingHandlers,
+    onHandlerClick
+}: HeaderProps) {
+    const theme = useTheme()
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'))
+
+    // Get handlers with their correction counts
+    const handlerCounts = data.corrections?.reduce((counts: Record<string, number>, correction) => {
+        counts[correction.handler] = (counts[correction.handler] || 0) + 1
+        return counts
+    }, {}) || {}
+
+    // Get available handlers from metadata
+    const availableHandlers = data.metadata.available_handlers || []
+    const enabledHandlers = new Set(data.metadata.enabled_handlers || [])
+
+    // Create a map of gap IDs to their corrections
+    const gapCorrections = data.corrections.reduce((map: Record<string, number>, correction) => {
+        // Find the gap that contains this correction's word_id
+        const gap = data.gap_sequences.find(g =>
+            g.transcribed_word_ids.includes(correction.word_id)
+        )
+        if (gap) {
+            map[gap.id] = (map[gap.id] || 0) + 1
+        }
+        return map
+    }, {})
+
+    // Calculate metrics
+    const correctedGapCount = Object.keys(gapCorrections).length
+    const uncorrectedGapCount = data.gap_sequences.length - correctedGapCount
+
+    const uncorrectedGaps = data.gap_sequences
+        .filter(gap => !gapCorrections[gap.id] && gap.transcribed_word_ids.length > 0)
+        .map(gap => {
+            const firstWord = findWordById(data.corrected_segments, gap.transcribed_word_ids[0])
+            return {
+                position: firstWord?.id ?? '',
+                length: gap.transcribed_word_ids.length
+            }
+        })
+
+    // Calculate correction type counts
+    const replacedCount = data.corrections.filter(c => !c.is_deletion && !c.split_total).length
+    const addedCount = data.corrections.filter(c => c.split_total).length
+    const deletedCount = data.corrections.filter(c => c.is_deletion).length
+
+    console.log('Header: Render with isUpdatingHandlers =', isUpdatingHandlers)
+
+    return (
+        <>
+            {isReadOnly && (
+                <Box sx={{ display: 'flex', alignItems: 'center', mb: 2, color: 'text.secondary' }}>
+                    <LockIcon sx={{ mr: 1 }} />
+                    <Typography variant="body2">
+                        View Only Mode
+                    </Typography>
+                </Box>
+            )}
+
+            <Box sx={{
+                display: 'flex',
+                flexDirection: isMobile ? 'column' : 'row',
+                gap: 2,
+                justifyContent: 'space-between',
+                alignItems: isMobile ? 'stretch' : 'center',
+                mb: 3
+            }}>
+                <Typography variant="h4" sx={{ fontSize: isMobile ? '1.75rem' : '2.125rem' }}>
+                    Lyrics Correction Review
+                </Typography>
+                {isReadOnly && (
+                    <Button
+                        variant="outlined"
+                        startIcon={<UploadFileIcon />}
+                        onClick={onFileLoad}
+                        fullWidth={isMobile}
+                    >
+                        Load File
+                    </Button>
+                )}
+            </Box>
+
+            <Box sx={{
+                display: 'flex',
+                gap: 2,
+                mb: 3,
+                flexDirection: isMobile ? 'column' : 'row'
+            }}>
+                <Box sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 1,
+                    minWidth: '250px',
+                    position: 'relative'
+                }}>
+                    <Typography variant="subtitle2" color="text.secondary">
+                        Correction Handlers
+                    </Typography>
+
+                    {availableHandlers.map(handler => (
+                        <Tooltip
+                            key={handler.id}
+                            title={handler.description}
+                            placement="right"
+                        >
+                            <FormControlLabel
+                                control={
+                                    <Switch
+                                        checked={enabledHandlers.has(handler.id)}
+                                        onChange={(e) => onHandlerToggle(handler.id, e.target.checked)}
+                                        size="small"
+                                        disabled={isUpdatingHandlers}
+                                    />
+                                }
+                                label={`${handler.name} (${handlerCounts[handler.id] || 0})`}
+                                onClick={(e) => {
+                                    if ((e.target as HTMLElement).tagName !== 'INPUT') {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        onHandlerClick?.(handler.id);
+                                    }
+                                }}
+                                sx={{
+                                    ml: 0,
+                                    '& .MuiFormControlLabel-label': {
+                                        fontSize: '0.875rem',
+                                        cursor: 'pointer'
+                                    }
+                                }}
+                            />
+                        </Tooltip>
+                    ))}
+
+                    {isUpdatingHandlers && (
+                        <Box sx={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                            borderRadius: 1,
+                            zIndex: 1
+                        }}>
+                            <Box sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                padding: 2,
+                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                                borderRadius: 1,
+                                boxShadow: 1
+                            }}>
+                                <CircularProgress size={24} />
+                                <Typography variant="body2" color="text.secondary">
+                                    Updating corrections...
+                                </Typography>
+                            </Box>
+                        </Box>
+                    )}
+                </Box>
+                <Box sx={{ flexGrow: 1 }}>
+                    <CorrectionMetrics
+                        // Anchor metrics
+                        anchorCount={data.metadata.anchor_sequences_count}
+                        multiSourceAnchors={data.anchor_sequences?.filter(anchor =>
+                            anchor?.reference_word_ids &&
+                            Object.keys(anchor.reference_word_ids).length > 1
+                        ).length ?? 0}
+                        anchorWordCount={data.anchor_sequences?.reduce((sum, anchor) =>
+                            sum + (anchor.transcribed_word_ids?.length || 0), 0) ?? 0}
+                        // Updated gap metrics
+                        correctedGapCount={correctedGapCount}
+                        uncorrectedGapCount={uncorrectedGapCount}
+                        uncorrectedGaps={uncorrectedGaps}
+                        // Updated correction type counts
+                        replacedCount={replacedCount}
+                        addedCount={addedCount}
+                        deletedCount={deletedCount}
+                        onMetricClick={onMetricClick}
+                        totalWords={data.metadata.total_words}
+                    />
+                </Box>
+            </Box>
+
+            <Box sx={{
+                display: 'flex',
+                flexDirection: isMobile ? 'column' : 'row',
+                gap: 5,
+                alignItems: 'flex-start',
+                justifyContent: 'flex-start',
+                mb: 3
+            }}>
+                <ModeSelector
+                    effectiveMode={effectiveMode}
+                    onChange={onModeChange}
+                />
+                <AudioPlayer
+                    apiClient={apiClient}
+                    onTimeUpdate={onTimeUpdate}
+                    audioHash={audioHash}
+                />
+            </Box>
+        </>
+    )
+}