karaoke-gen 0.71.27__py3-none-any.whl → 0.75.16__py3-none-any.whl

lyrics_transcriber/frontend/package.json

@@ -2,7 +2,7 @@
   "name": "lyrics-transcriber-frontend",
   "private": true,
   "homepage": "https://nomadkaraoke.github.io/lyrics-transcriber-frontend",
-  "version": "0.80.0",
+  "version": "0.82.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

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'
@@ -7,6 +7,7 @@ import UndoIcon from '@mui/icons-material/Undo'
 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 { CorrectionData, InteractionMode } from '../types'
 import CorrectionMetrics from './CorrectionMetrics'
 import AgenticCorrectionMetrics from './AgenticCorrectionMetrics'
@@ -41,6 +42,8 @@ interface HeaderProps {
     onRedo: () => void
     canUndo: boolean
     canRedo: boolean
+    annotationsEnabled?: boolean
+    onAnnotationsToggle?: (enabled: boolean) => void
 }
 
 export default function Header({
@@ -65,6 +68,8 @@ export default function Header({
     onRedo,
     canUndo,
     canRedo,
+    annotationsEnabled = true,
+    onAnnotationsToggle,
 }: HeaderProps) {
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down('md'))
@@ -135,17 +140,38 @@ export default function Header({
                 <Typography variant="h4" sx={{ fontSize: isMobile ? '1.3rem' : '1.5rem' }}>
                     Nomad Karaoke: Lyrics Transcription Review
                 </Typography>
-                {isReadOnly && (
-                    <Button
-                        variant="outlined"
-                        size="small"
-                        startIcon={<UploadFileIcon />}
-                        onClick={onFileLoad}
-                        fullWidth={isMobile}
-                    >
-                        Load File
-                    </Button>
-                )}
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {!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={{

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx

@@ -200,6 +200,8 @@ interface MemoizedHeaderProps {
     canUndo: boolean
     canRedo: boolean
     onUnCorrectAll: () => void
+    annotationsEnabled: boolean
+    onAnnotationsToggle: (enabled: boolean) => void
 }
 
 // Create a memoized Header component
@@ -224,7 +226,9 @@ const MemoizedHeader = memo(function MemoizedHeader({
     onRedo,
     canUndo,
     canRedo,
-    onUnCorrectAll
+    onUnCorrectAll,
+    annotationsEnabled,
+    onAnnotationsToggle
 }: MemoizedHeaderProps) {
     return (
         <Header
@@ -249,6 +253,8 @@ const MemoizedHeader = memo(function MemoizedHeader({
             canUndo={canUndo}
             canRedo={canRedo}
             onUnCorrectAll={onUnCorrectAll}
+            annotationsEnabled={annotationsEnabled}
+            onAnnotationsToggle={onAnnotationsToggle}
         />
     );
 });
@@ -295,13 +301,18 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
         wordIdsAffected: string[]
         gapId?: string
     } | null>(null)
-    const [annotationsEnabled] = useState(() => {
+    const [annotationsEnabled, setAnnotationsEnabled] = useState(() => {
         // Check localStorage for user preference
         const saved = localStorage.getItem('annotationsEnabled')
         return saved !== null ? saved === 'true' : true // Default: enabled
-        // TODO: Add UI toggle to enable/disable via setAnnotationsEnabled
     })
     
+    // Persist annotation preference to localStorage
+    const handleAnnotationsToggle = useCallback((enabled: boolean) => {
+        setAnnotationsEnabled(enabled)
+        localStorage.setItem('annotationsEnabled', String(enabled))
+    }, [])
+    
     // Correction detail card state
     const [correctionDetailOpen, setCorrectionDetailOpen] = useState(false)
     const [selectedCorrection, setSelectedCorrection] = useState<{
@@ -1164,6 +1175,8 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 canUndo={canUndo}
                 canRedo={canRedo}
                 onUnCorrectAll={handleUnCorrectAll}
+                annotationsEnabled={annotationsEnabled}
+                onAnnotationsToggle={handleAnnotationsToggle}
             />
 
             <Grid container direction={isMobile ? 'column' : 'row'}>
@@ -1313,6 +1326,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 onPlaySegment={handlePlaySegment}
                 currentTime={currentAudioTime}
                 setModalSpacebarHandler={handleSetModalSpacebarHandler}
+                existingSegments={data.corrected_segments}
             />
             
             {pendingAnnotation && (

lyrics_transcriber/frontend/src/components/LyricsSynchronizer/SyncControls.tsx

@@ -0,0 +1,185 @@
+import { memo } from 'react'
+import {
+    Box,
+    Button,
+    Divider,
+    Stack
+} from '@mui/material'
+import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'
+import StopIcon from '@mui/icons-material/Stop'
+import PauseIcon from '@mui/icons-material/Pause'
+import PlayArrowIcon from '@mui/icons-material/PlayArrow'
+import ClearAllIcon from '@mui/icons-material/ClearAll'
+import EditNoteIcon from '@mui/icons-material/EditNote'
+import BlockIcon from '@mui/icons-material/Block'
+import EditIcon from '@mui/icons-material/Edit'
+import DeleteIcon from '@mui/icons-material/Delete'
+
+interface SyncControlsProps {
+    // Main buttons
+    isManualSyncing: boolean
+    isPaused: boolean
+    onStartSync: () => void
+    onPauseSync: () => void
+    onResumeSync: () => void
+    onClearSync: () => void
+    onEditLyrics: () => void
+    
+    // Playback controls
+    onPlay: () => void
+    onStop: () => void
+    isPlaying: boolean
+    
+    // Word action buttons
+    hasSelectedWords: boolean
+    selectedWordCount: number
+    onUnsyncFromCursor: () => void
+    onEditSelectedWord: () => void
+    onDeleteSelected: () => void
+    
+    // Additional state
+    canUnsyncFromCursor: boolean
+}
+
+const SyncControls = memo(function SyncControls({
+    isManualSyncing,
+    isPaused,
+    onStartSync,
+    onPauseSync,
+    onResumeSync,
+    onClearSync,
+    onEditLyrics,
+    onPlay,
+    onStop,
+    isPlaying,
+    hasSelectedWords,
+    selectedWordCount,
+    onUnsyncFromCursor,
+    onEditSelectedWord,
+    onDeleteSelected,
+    canUnsyncFromCursor
+}: SyncControlsProps) {
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+            {/* Row 1: Playback & Sync Mode Controls */}
+            <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap">
+                {/* Playback controls */}
+                <Button
+                    variant="outlined"
+                    color="primary"
+                    onClick={onPlay}
+                    startIcon={<PlayArrowIcon />}
+                    size="small"
+                    disabled={isPlaying}
+                >
+                    Play
+                </Button>
+                <Button
+                    variant="outlined"
+                    color="error"
+                    onClick={onStop}
+                    startIcon={<StopIcon />}
+                    size="small"
+                    disabled={!isPlaying}
+                >
+                    Stop
+                </Button>
+
+                <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
+
+                {/* Sync Mode controls */}
+                {isManualSyncing ? (
+                    <>
+                        <Button
+                            variant="contained"
+                            color="error"
+                            onClick={onStartSync}
+                            startIcon={<StopIcon />}
+                            size="small"
+                        >
+                            Stop Sync
+                        </Button>
+                        <Button
+                            variant="outlined"
+                            color={isPaused ? 'success' : 'warning'}
+                            onClick={isPaused ? onResumeSync : onPauseSync}
+                            startIcon={isPaused ? <PlayArrowIcon /> : <PauseIcon />}
+                            size="small"
+                        >
+                            {isPaused ? 'Resume' : 'Pause'}
+                        </Button>
+                    </>
+                ) : (
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={onStartSync}
+                        startIcon={<PlayCircleOutlineIcon />}
+                        size="small"
+                    >
+                        Start Sync
+                    </Button>
+                )}
+            </Stack>
+
+            {/* Row 2: Editing & Word Actions */}
+            <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap">
+                <Button
+                    variant="outlined"
+                    color="warning"
+                    onClick={onClearSync}
+                    startIcon={<ClearAllIcon />}
+                    size="small"
+                    disabled={isManualSyncing && !isPaused}
+                >
+                    Clear Sync
+                </Button>
+
+                <Button
+                    variant="outlined"
+                    onClick={onEditLyrics}
+                    startIcon={<EditNoteIcon />}
+                    size="small"
+                    disabled={isManualSyncing && !isPaused}
+                >
+                    Edit Lyrics
+                </Button>
+
+                <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
+
+                <Button
+                    variant="outlined"
+                    onClick={onUnsyncFromCursor}
+                    startIcon={<BlockIcon />}
+                    size="small"
+                    disabled={!canUnsyncFromCursor || (isManualSyncing && !isPaused)}
+                >
+                    Unsync from Cursor
+                </Button>
+
+                <Button
+                    variant="outlined"
+                    onClick={onEditSelectedWord}
+                    startIcon={<EditIcon />}
+                    size="small"
+                    disabled={!hasSelectedWords || selectedWordCount !== 1}
+                >
+                    Edit Word
+                </Button>
+
+                <Button
+                    variant="outlined"
+                    color="error"
+                    onClick={onDeleteSelected}
+                    startIcon={<DeleteIcon />}
+                    size="small"
+                    disabled={!hasSelectedWords || (isManualSyncing && !isPaused)}
+                >
+                    Delete{hasSelectedWords && selectedWordCount > 0 ? ` (${selectedWordCount})` : ''}
+                </Button>
+            </Stack>
+        </Box>
+    )
+})
+
+export default SyncControls