karaoke-gen 0.76.20__py3-none-any.whl → 0.81.1__py3-none-any.whl

lyrics_transcriber/frontend/src/components/CorrectedWordWithActions.tsx

@@ -23,6 +23,7 @@ interface CorrectedWordWithActionsProps {
     onClick?: () => void
     backgroundColor?: string
     shouldFlash?: boolean
+    showActions?: boolean  // Controls whether inline action buttons are visible
 }
 
 const WordContainer = styled(Box, {
@@ -98,7 +99,8 @@ export default function CorrectedWordWithActions({
     onAccept,
     onClick,
     backgroundColor,
-    shouldFlash
+    shouldFlash,
+    showActions = true
 }: CorrectedWordWithActionsProps) {
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
@@ -115,7 +117,7 @@ export default function CorrectedWordWithActions({
             onClick={onClick}
         >
             <OriginalWordLabel>{originalWord}</OriginalWordLabel>
-            
+
             <Box
                 component="span"
                 sx={{
@@ -127,40 +129,42 @@ export default function CorrectedWordWithActions({
                 {word}
             </Box>
 
-            <ActionsContainer>
-                <Tooltip title="Revert to original" placement="top" arrow>
-                    <ActionButton
-                        size="small"
-                        onClick={(e) => handleAction(e, onRevert)}
-                        aria-label="revert correction"
-                    >
-                        <UndoIcon />
-                    </ActionButton>
-                </Tooltip>
-
-                <Tooltip title="Edit correction" placement="top" arrow>
-                    <ActionButton
-                        size="small"
-                        onClick={(e) => handleAction(e, onEdit)}
-                        aria-label="edit correction"
-                    >
-                        <EditIcon />
-                    </ActionButton>
-                </Tooltip>
+            {showActions && (
+                <ActionsContainer>
+                    <Tooltip title="Revert to original" placement="top" arrow>
+                        <ActionButton
+                            size="small"
+                            onClick={(e) => handleAction(e, onRevert)}
+                            aria-label="revert correction"
+                        >
+                            <UndoIcon />
+                        </ActionButton>
+                    </Tooltip>
 
-                {!isMobile && (
-                    <Tooltip title="Accept correction" placement="top" arrow>
+                    <Tooltip title="Edit correction" placement="top" arrow>
                         <ActionButton
                             size="small"
-                            onClick={(e) => handleAction(e, onAccept)}
-                            aria-label="accept correction"
-                            sx={{ color: 'success.main' }}
+                            onClick={(e) => handleAction(e, onEdit)}
+                            aria-label="edit correction"
                         >
-                            <CheckCircleOutlineIcon />
+                            <EditIcon />
                         </ActionButton>
                     </Tooltip>
-                )}
-            </ActionsContainer>
+
+                    {!isMobile && (
+                        <Tooltip title="Accept correction" placement="top" arrow>
+                            <ActionButton
+                                size="small"
+                                onClick={(e) => handleAction(e, onAccept)}
+                                aria-label="accept correction"
+                                sx={{ color: 'success.main' }}
+                            >
+                                <CheckCircleOutlineIcon />
+                            </ActionButton>
+                        </Tooltip>
+                    )}
+                </ActionsContainer>
+            )}
         </WordContainer>
     )
 }

lyrics_transcriber/frontend/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Typography, useMediaQuery, useTheme, Switch, FormControlLabel, Tooltip, Paper, IconButton } from '@mui/material'
+import { Box, Button, Typography, useMediaQuery, useTheme, Switch, FormControlLabel, Tooltip, Paper, IconButton, Chip } from '@mui/material'
 import LockIcon from '@mui/icons-material/Lock'
 import UploadFileIcon from '@mui/icons-material/UploadFile'
 import FindReplaceIcon from '@mui/icons-material/FindReplace'
@@ -8,6 +8,9 @@ import RedoIcon from '@mui/icons-material/Redo'
 import TimerIcon from '@mui/icons-material/Timer'
 import RestoreIcon from '@mui/icons-material/Restore'
 import RateReviewIcon from '@mui/icons-material/RateReview'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import HighlightOffIcon from '@mui/icons-material/HighlightOff'
 import { CorrectionData, InteractionMode } from '../types'
 import CorrectionMetrics from './CorrectionMetrics'
 import AgenticCorrectionMetrics from './AgenticCorrectionMetrics'
@@ -44,6 +47,13 @@ interface HeaderProps {
     canRedo: boolean
     annotationsEnabled?: boolean
     onAnnotationsToggle?: (enabled: boolean) => void
+    // Review mode props
+    reviewMode?: boolean
+    onReviewModeToggle?: (enabled: boolean) => void
+    // Batch action props
+    onAcceptAllCorrections?: () => void
+    onAcceptHighConfidenceCorrections?: () => void
+    onRevertAllCorrections?: () => void
 }
 
 export default function Header({
@@ -70,6 +80,11 @@ export default function Header({
     canRedo,
     annotationsEnabled = true,
     onAnnotationsToggle,
+    reviewMode = false,
+    onReviewModeToggle,
+    onAcceptAllCorrections,
+    onAcceptHighConfidenceCorrections,
+    onRevertAllCorrections,
 }: HeaderProps) {
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down('md'))
@@ -129,19 +144,69 @@ export default function Header({
                 </Box>
             )}
 
-            {isReadOnly && (
-                <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1 }}>
-                    <Button
-                        variant="outlined"
-                        size="small"
-                        startIcon={<UploadFileIcon />}
-                        onClick={onFileLoad}
-                        fullWidth={isMobile}
-                    >
-                        Load File
-                    </Button>
+            <Box sx={{
+                display: 'flex',
+                flexDirection: isMobile ? 'column' : 'row',
+                gap: 1,
+                justifyContent: 'space-between',
+                alignItems: isMobile ? 'stretch' : 'center',
+                mb: 1
+            }}>
+                <Typography variant="h4" sx={{ fontSize: isMobile ? '1.3rem' : '1.5rem' }}>
+                    Nomad Karaoke: Lyrics Transcription Review
+                </Typography>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {!isReadOnly && isAgenticMode && onReviewModeToggle && (
+                        <Tooltip title={reviewMode
+                            ? "Hide inline correction actions"
+                            : "Show inline actions on all corrections for quick review"
+                        }>
+                            <Chip
+                                icon={<VisibilityIcon />}
+                                label={reviewMode ? "Review Mode" : "Review Off"}
+                                onClick={() => onReviewModeToggle(!reviewMode)}
+                                color={reviewMode ? "secondary" : "default"}
+                                variant={reviewMode ? "filled" : "outlined"}
+                                size="small"
+                                sx={{
+                                    cursor: 'pointer',
+                                    '& .MuiChip-icon': { fontSize: '1rem' }
+                                }}
+                            />
+                        </Tooltip>
+                    )}
+                    {!isReadOnly && onAnnotationsToggle && (
+                        <Tooltip title={annotationsEnabled
+                            ? "Click to disable annotation prompts when editing"
+                            : "Click to enable annotation prompts when editing"
+                        }>
+                            <Chip
+                                icon={<RateReviewIcon />}
+                                label={annotationsEnabled ? "Feedback On" : "Feedback Off"}
+                                onClick={() => onAnnotationsToggle(!annotationsEnabled)}
+                                color={annotationsEnabled ? "primary" : "default"}
+                                variant={annotationsEnabled ? "filled" : "outlined"}
+                                size="small"
+                                sx={{
+                                    cursor: 'pointer',
+                                    '& .MuiChip-icon': { fontSize: '1rem' }
+                                }}
+                            />
+                        </Tooltip>
+                    )}
+                    {isReadOnly && (
+                        <Button
+                            variant="outlined"
+                            size="small"
+                            startIcon={<UploadFileIcon />}
+                            onClick={onFileLoad}
+                            fullWidth={isMobile}
+                        >
+                            Load File
+                        </Button>
+                    )}
                 </Box>
-            )}
+            </Box>
 
             <Box sx={{
                 display: 'flex',
@@ -250,6 +315,65 @@ export default function Header({
                 </Box>
             </Box>
 
+            {/* Batch Actions Panel - shown when review mode is enabled */}
+            {!isReadOnly && reviewMode && isAgenticMode && data.corrections?.length > 0 && (
+                <Paper sx={{ p: 0.8, mb: 1, backgroundColor: 'action.hover' }}>
+                    <Box sx={{
+                        display: 'flex',
+                        flexDirection: isMobile ? 'column' : 'row',
+                        gap: 1,
+                        alignItems: isMobile ? 'stretch' : 'center',
+                        justifyContent: 'space-between'
+                    }}>
+                        <Typography variant="subtitle2" sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
+                            Batch Actions ({data.corrections.length} corrections)
+                        </Typography>
+                        <Box sx={{
+                            display: 'flex',
+                            gap: 1,
+                            flexWrap: 'wrap'
+                        }}>
+                            {onAcceptHighConfidenceCorrections && (
+                                <Button
+                                    variant="contained"
+                                    size="small"
+                                    color="success"
+                                    startIcon={<CheckCircleIcon />}
+                                    onClick={onAcceptHighConfidenceCorrections}
+                                    sx={{ fontSize: '0.75rem', py: 0.5 }}
+                                >
+                                    Accept High Confidence ({data.corrections.filter(c => c.confidence >= 0.8).length})
+                                </Button>
+                            )}
+                            {onAcceptAllCorrections && (
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    color="success"
+                                    startIcon={<CheckCircleIcon />}
+                                    onClick={onAcceptAllCorrections}
+                                    sx={{ fontSize: '0.75rem', py: 0.5 }}
+                                >
+                                    Accept All
+                                </Button>
+                            )}
+                            {onRevertAllCorrections && (
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    color="error"
+                                    startIcon={<HighlightOffIcon />}
+                                    onClick={onRevertAllCorrections}
+                                    sx={{ fontSize: '0.75rem', py: 0.5 }}
+                                >
+                                    Revert All
+                                </Button>
+                            )}
+                        </Box>
+                    </Box>
+                </Paper>
+            )}
+
             <Paper sx={{ p: 0.8, mb: 1 }}>
                 <Box sx={{
                     display: 'flex',
@@ -356,10 +480,10 @@ export default function Header({
                                     Timing Offset
                                 </Button>
                                 {timingOffsetMs !== 0 && (
-                                    <Typography
-                                        variant="body2"
-                                        sx={{
-                                            ml: 1,
+                                    <Typography 
+                                        variant="body2" 
+                                        sx={{ 
+                                            ml: 1, 
                                             fontWeight: 'bold',
                                             color: theme.palette.secondary.main
                                         }}
@@ -369,23 +493,6 @@ export default function Header({
                                 )}
                             </Box>
                         )}
-                        {!isReadOnly && onAnnotationsToggle && (
-                            <Tooltip title={annotationsEnabled
-                                ? "Click to disable annotation prompts when editing"
-                                : "Click to enable annotation prompts when editing"
-                            }>
-                                <Button
-                                    variant="outlined"
-                                    size="small"
-                                    onClick={() => onAnnotationsToggle(!annotationsEnabled)}
-                                    startIcon={<RateReviewIcon />}
-                                    color={annotationsEnabled ? "primary" : "inherit"}
-                                    sx={{ minWidth: 'fit-content', height: '32px' }}
-                                >
-                                    {annotationsEnabled ? "Feedback On" : "Feedback Off"}
-                                </Button>
-                            </Tooltip>
-                        )}
                         <AudioPlayer
                             apiClient={apiClient}
                             onTimeUpdate={onTimeUpdate}

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx

@@ -88,6 +88,12 @@ interface MemoizedTranscriptionViewProps {
     anchors: AnchorSequence[]
     disableHighlighting: boolean
     onDataChange?: (updatedData: CorrectionData) => void
+    // Review mode props
+    reviewMode: boolean
+    onRevertCorrection: (wordId: string) => void
+    onEditCorrection: (wordId: string) => void
+    onAcceptCorrection: (wordId: string) => void
+    onShowCorrectionDetail: (wordId: string) => void
 }
 
 // Create a memoized TranscriptionView component
@@ -103,7 +109,12 @@ const MemoizedTranscriptionView = memo(function MemoizedTranscriptionView({
     currentTime,
     anchors,
     disableHighlighting,
-    onDataChange
+    onDataChange,
+    reviewMode,
+    onRevertCorrection,
+    onEditCorrection,
+    onAcceptCorrection,
+    onShowCorrectionDetail
 }: MemoizedTranscriptionViewProps) {
     return (
         <TranscriptionView
@@ -118,6 +129,11 @@ const MemoizedTranscriptionView = memo(function MemoizedTranscriptionView({
             currentTime={disableHighlighting ? undefined : currentTime}
             anchors={anchors}
             onDataChange={onDataChange}
+            reviewMode={reviewMode}
+            onRevertCorrection={onRevertCorrection}
+            onEditCorrection={onEditCorrection}
+            onAcceptCorrection={onAcceptCorrection}
+            onShowCorrectionDetail={onShowCorrectionDetail}
         />
     );
 });
@@ -202,6 +218,13 @@ interface MemoizedHeaderProps {
     onUnCorrectAll: () => void
     annotationsEnabled: boolean
     onAnnotationsToggle: (enabled: boolean) => void
+    // Review mode props
+    reviewMode: boolean
+    onReviewModeToggle: (enabled: boolean) => void
+    // Batch action props
+    onAcceptAllCorrections: () => void
+    onAcceptHighConfidenceCorrections: () => void
+    onRevertAllCorrections: () => void
 }
 
 // Create a memoized Header component
@@ -228,7 +251,12 @@ const MemoizedHeader = memo(function MemoizedHeader({
     canRedo,
     onUnCorrectAll,
     annotationsEnabled,
-    onAnnotationsToggle
+    onAnnotationsToggle,
+    reviewMode,
+    onReviewModeToggle,
+    onAcceptAllCorrections,
+    onAcceptHighConfidenceCorrections,
+    onRevertAllCorrections
 }: MemoizedHeaderProps) {
     return (
         <Header
@@ -255,6 +283,11 @@ const MemoizedHeader = memo(function MemoizedHeader({
             onUnCorrectAll={onUnCorrectAll}
             annotationsEnabled={annotationsEnabled}
             onAnnotationsToggle={onAnnotationsToggle}
+            reviewMode={reviewMode}
+            onReviewModeToggle={onReviewModeToggle}
+            onAcceptAllCorrections={onAcceptAllCorrections}
+            onAcceptHighConfidenceCorrections={onAcceptHighConfidenceCorrections}
+            onRevertAllCorrections={onRevertAllCorrections}
         />
     );
 });
@@ -291,6 +324,9 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     const [isFindReplaceModalOpen, setIsFindReplaceModalOpen] = useState(false)
     const [isTimingOffsetModalOpen, setIsTimingOffsetModalOpen] = useState(false)
     const [timingOffsetMs, setTimingOffsetMs] = useState(0)
+
+    // Review mode state for agentic corrections
+    const [reviewMode, setReviewMode] = useState(false)
     
     // Annotation collection state
     const [annotations, setAnnotations] = useState<Omit<CorrectionAnnotation, 'annotation_id' | 'timestamp'>[]>([])
@@ -793,11 +829,82 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
         // For now, just log acceptance
         // In the future, this could be tracked in the annotation system
         console.log('Accepted correction for word:', wordId)
-        
+
         // TODO: Track acceptance in annotation system
         // This could be used to build confidence in the AI's corrections over time
     }, [])
 
+    // Batch action handlers for review mode
+    const handleAcceptAllCorrections = useCallback(() => {
+        // Accept all corrections - for now just log, could track in annotation system
+        data.corrections?.forEach(c => {
+            console.log('Batch accepted correction:', c.corrected_word_id || c.word_id)
+        })
+        console.log(`Accepted all ${data.corrections?.length || 0} corrections`)
+    }, [data.corrections])
+
+    const handleAcceptHighConfidenceCorrections = useCallback(() => {
+        // Accept corrections with confidence >= 80%
+        const highConfidence = data.corrections?.filter(c => c.confidence >= 0.8) || []
+        highConfidence.forEach(c => {
+            console.log('Batch accepted high-confidence correction:', c.corrected_word_id || c.word_id)
+        })
+        console.log(`Accepted ${highConfidence.length} high-confidence corrections`)
+    }, [data.corrections])
+
+    const handleRevertAllCorrections = useCallback(() => {
+        if (!window.confirm(`Are you sure you want to revert all ${data.corrections?.length || 0} corrections? This cannot be undone.`)) {
+            return
+        }
+
+        // Revert all corrections by reverting each one
+        // Process in reverse order to avoid ID conflicts
+        const corrections = [...(data.corrections || [])].reverse()
+
+        let newData = data
+        for (const correction of corrections) {
+            const wordId = correction.corrected_word_id || correction.word_id
+
+            // Find the segment containing the corrected word
+            const segmentIndex = newData.corrected_segments.findIndex(segment =>
+                segment.words.some(w => w.id === wordId)
+            )
+
+            if (segmentIndex === -1) continue
+
+            const segment = newData.corrected_segments[segmentIndex]
+
+            // Replace the corrected word with the original
+            const newWords = segment.words.map(word => {
+                if (word.id === wordId) {
+                    return {
+                        ...word,
+                        text: correction.original_word,
+                        id: correction.word_id
+                    }
+                }
+                return word
+            })
+
+            const newText = newWords.map(w => w.text).join(' ')
+            const newSegment = { ...segment, words: newWords, text: newText }
+            const newSegments = newData.corrected_segments.map((seg, idx) =>
+                idx === segmentIndex ? newSegment : seg
+            )
+
+            newData = {
+                ...newData,
+                corrected_segments: newSegments,
+                corrections: newData.corrections?.filter(c =>
+                    c.corrected_word_id !== wordId && c.word_id !== wordId
+                ) || []
+            }
+        }
+
+        updateDataWithHistory(newData, 'revert all corrections')
+        console.log(`Reverted all ${corrections.length} corrections`)
+    }, [data, updateDataWithHistory])
+
     const handleShowCorrectionDetail = useCallback((wordId: string) => {
         // Find the correction for this word
         const correction = data.corrections?.find(c => 
@@ -1177,6 +1284,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 onUnCorrectAll={handleUnCorrectAll}
                 annotationsEnabled={annotationsEnabled}
                 onAnnotationsToggle={handleAnnotationsToggle}
+                reviewMode={reviewMode}
+                onReviewModeToggle={setReviewMode}
+                onAcceptAllCorrections={handleAcceptAllCorrections}
+                onAcceptHighConfidenceCorrections={handleAcceptHighConfidenceCorrections}
+                onRevertAllCorrections={handleRevertAllCorrections}
             />
 
             <Grid container direction={isMobile ? 'column' : 'row'}>
@@ -1198,6 +1310,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                             // needs to update history
                             updateDataWithHistory(updatedData, 'direct data change');
                         }}
+                        reviewMode={reviewMode}
+                        onRevertCorrection={handleRevertCorrection}
+                        onEditCorrection={handleEditCorrection}
+                        onAcceptCorrection={handleAcceptCorrection}
+                        onShowCorrectionDetail={handleShowCorrectionDetail}
                     />
                     {!isReadOnly && apiClient && (
                         <Box sx={{

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -54,7 +54,12 @@ export default function TranscriptionView({
     onPlaySegment,
     currentTime = 0,
     anchors = [],
-    onDataChange
+    onDataChange,
+    reviewMode = false,
+    onRevertCorrection,
+    onEditCorrection,
+    onAcceptCorrection,
+    onShowCorrectionDetail
 }: TranscriptionViewProps) {
     const [selectedSegmentIndex, setSelectedSegmentIndex] = useState<number | null>(null)
     const [viewMode, setViewMode] = useState<'text' | 'duration'>('text')
@@ -237,6 +242,11 @@ export default function TranscriptionView({
                                     currentTime={currentTime}
                                     gaps={data.gap_sequences}
                                     corrections={data.corrections}
+                                    reviewMode={reviewMode}
+                                    onRevertCorrection={onRevertCorrection}
+                                    onEditCorrection={onEditCorrection}
+                                    onAcceptCorrection={onAcceptCorrection}
+                                    onShowCorrectionDetail={onShowCorrectionDetail}
                                 />
                             </TextContainer>
                         </Box>