karaoke-gen 0.90.1__py3-none-any.whl → 0.99.3__py3-none-any.whl

lyrics_transcriber/frontend/src/components/EditWordList.tsx

@@ -4,7 +4,9 @@ import {
     IconButton,
     Button,
     Pagination,
-    Typography
+    Typography,
+    useMediaQuery,
+    useTheme
 } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import SplitIcon from '@mui/icons-material/CallSplit'
@@ -34,7 +36,8 @@ const WordRow = memo(function WordRow({
     onSplitWord,
     onRemoveWord,
     wordsLength,
-    onTabNavigation
+    onTabNavigation,
+    isMobile
 }: {
     word: Word
     index: number
@@ -43,11 +46,10 @@ const WordRow = memo(function WordRow({
     onRemoveWord: (index: number) => void
     wordsLength: number
     onTabNavigation: (currentIndex: number) => void
+    isMobile: boolean
 }) {
     const handleKeyDown = (e: React.KeyboardEvent) => {
-        // console.log('KeyDown event:', e.key, 'Shift:', e.shiftKey, 'Index:', index);
         if (e.key === 'Tab' && !e.shiftKey) {
-            // console.log('Tab key detected, preventing default and navigating');
             e.preventDefault();
             onTabNavigation(index);
         }
@@ -56,54 +58,99 @@ const WordRow = memo(function WordRow({
     return (
         <Box sx={{
             display: 'flex',
-            gap: 2,
-            alignItems: 'center',
+            flexDirection: isMobile ? 'column' : 'row',
+            gap: isMobile ? 1 : 2,
+            alignItems: isMobile ? 'stretch' : 'center',
             padding: '4px 0',
         }}>
-            <TextField
-                label={`Word ${index}`}
-                value={word.text}
-                onChange={(e) => onWordUpdate(index, { text: e.target.value })}
-                onKeyDown={handleKeyDown}
-                fullWidth
-                size="small"
-                id={`word-text-${index}`}
-            />
-            <TextField
-                label="Start Time"
-                value={word.start_time?.toFixed(2) ?? ''}
-                onChange={(e) => onWordUpdate(index, { start_time: parseFloat(e.target.value) })}
-                type="number"
-                inputProps={{ step: 0.01 }}
-                sx={{ width: '150px' }}
-                size="small"
-            />
-            <TextField
-                label="End Time"
-                value={word.end_time?.toFixed(2) ?? ''}
-                onChange={(e) => onWordUpdate(index, { end_time: parseFloat(e.target.value) })}
-                type="number"
-                inputProps={{ step: 0.01 }}
-                sx={{ width: '150px' }}
-                size="small"
-            />
-            <IconButton
-                onClick={() => onSplitWord(index)}
-                title="Split Word"
-                sx={{ color: 'primary.main' }}
-                size="small"
-            >
-                <SplitIcon fontSize="small" />
-            </IconButton>
-            <IconButton
-                onClick={() => onRemoveWord(index)}
-                disabled={wordsLength <= 1}
-                title="Remove Word"
-                sx={{ color: 'error.main' }}
-                size="small"
-            >
-                <DeleteIcon fontSize="small" />
-            </IconButton>
+            {/* Word text field - full width on mobile */}
+            <Box sx={{
+                display: 'flex',
+                gap: 1,
+                alignItems: 'center',
+                flex: isMobile ? 'none' : 1
+            }}>
+                <TextField
+                    label={`Word ${index}`}
+                    value={word.text}
+                    onChange={(e) => onWordUpdate(index, { text: e.target.value })}
+                    onKeyDown={handleKeyDown}
+                    fullWidth
+                    size="small"
+                    id={`word-text-${index}`}
+                />
+                {/* Action buttons inline with word on mobile */}
+                {isMobile && (
+                    <>
+                        <IconButton
+                            onClick={() => onSplitWord(index)}
+                            title="Split Word"
+                            sx={{ color: 'primary.main' }}
+                            size="small"
+                        >
+                            <SplitIcon fontSize="small" />
+                        </IconButton>
+                        <IconButton
+                            onClick={() => onRemoveWord(index)}
+                            disabled={wordsLength <= 1}
+                            title="Remove Word"
+                            sx={{ color: 'error.main' }}
+                            size="small"
+                        >
+                            <DeleteIcon fontSize="small" />
+                        </IconButton>
+                    </>
+                )}
+            </Box>
+
+            {/* Time fields - row on desktop, separate row on mobile */}
+            <Box sx={{
+                display: 'flex',
+                gap: 1,
+                alignItems: 'center',
+                justifyContent: isMobile ? 'flex-start' : 'flex-end'
+            }}>
+                <TextField
+                    label="Start"
+                    value={word.start_time?.toFixed(2) ?? ''}
+                    onChange={(e) => onWordUpdate(index, { start_time: parseFloat(e.target.value) })}
+                    type="number"
+                    inputProps={{ step: 0.01 }}
+                    sx={{ width: isMobile ? '80px' : '100px' }}
+                    size="small"
+                />
+                <TextField
+                    label="End"
+                    value={word.end_time?.toFixed(2) ?? ''}
+                    onChange={(e) => onWordUpdate(index, { end_time: parseFloat(e.target.value) })}
+                    type="number"
+                    inputProps={{ step: 0.01 }}
+                    sx={{ width: isMobile ? '80px' : '100px' }}
+                    size="small"
+                />
+                {/* Action buttons on desktop only */}
+                {!isMobile && (
+                    <>
+                        <IconButton
+                            onClick={() => onSplitWord(index)}
+                            title="Split Word"
+                            sx={{ color: 'primary.main' }}
+                            size="small"
+                        >
+                            <SplitIcon fontSize="small" />
+                        </IconButton>
+                        <IconButton
+                            onClick={() => onRemoveWord(index)}
+                            disabled={wordsLength <= 1}
+                            title="Remove Word"
+                            sx={{ color: 'error.main' }}
+                            size="small"
+                        >
+                            <DeleteIcon fontSize="small" />
+                        </IconButton>
+                    </>
+                )}
+            </Box>
         </Box>
     );
 });
@@ -122,7 +169,8 @@ const WordItem = memo(function WordItem({
     onMergeSegment,
     wordsLength,
     isGlobal,
-    onTabNavigation
+    onTabNavigation,
+    isMobile
 }: {
     word: Word
     index: number
@@ -137,6 +185,7 @@ const WordItem = memo(function WordItem({
     wordsLength: number
     isGlobal: boolean
     onTabNavigation: (currentIndex: number) => void
+    isMobile: boolean
 }) {
     return (
         <Box key={word.id}>
@@ -148,6 +197,7 @@ const WordItem = memo(function WordItem({
                 onRemoveWord={onRemoveWord}
                 wordsLength={wordsLength}
                 onTabNavigation={onTabNavigation}
+                isMobile={isMobile}
             />
 
             {/* Word divider with merge/split functionality */}
@@ -168,16 +218,14 @@ const WordItem = memo(function WordItem({
                     }
                     canMerge={index < wordsLength - 1}
                     isLast={index === wordsLength - 1}
-                    sx={{ ml: 15 }}
-                />
+                                    />
             )}
             {isGlobal && (
                 <WordDivider
                     onAddWord={() => onAddWord(index)}
                     onMergeWords={index < wordsLength - 1 ? () => onMergeWords(index) : undefined}
                     canMerge={index < wordsLength - 1}
-                    sx={{ ml: 15 }}
-                />
+                                    />
             )}
         </Box>
     );
@@ -195,6 +243,9 @@ export default function EditWordList({
     onMergeSegment,
     isGlobal = false
 }: EditWordListProps) {
+    const theme = useTheme()
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
     const [replacementText, setReplacementText] = useState('')
     const [page, setPage] = useState(1)
     const pageSize = isGlobal ? 50 : words.length // Use pagination only in global mode
@@ -289,14 +340,12 @@ export default function EditWordList({
                     onAddSegmentBefore={() => onAddSegment?.(0)}
                     onMergeSegment={() => onMergeSegment?.(false)}
                     isFirst={true}
-                    sx={{ ml: 15 }}
-                />
+                                    />
             )}
             {isGlobal && (
                 <WordDivider
                     onAddWord={() => onAddWord(-1)}
-                    sx={{ ml: 15 }}
-                />
+                                    />
             )}
             
             {/* Word list with scrolling */}
@@ -312,7 +361,9 @@ export default function EditWordList({
                     width: '8px',
                 },
                 '&::-webkit-scrollbar-thumb': {
-                    backgroundColor: 'rgba(248, 250, 252, 0.2)', // slate-50 for dark mode
+                    backgroundColor: (theme) => theme.palette.mode === 'dark'
+                        ? 'rgba(248, 250, 252, 0.2)'  // light scrollbar for dark mode
+                        : 'rgba(30, 41, 59, 0.3)',    // dark scrollbar for light mode
                     borderRadius: '4px',
                 },
                 scrollbarWidth: 'thin',
@@ -336,6 +387,7 @@ export default function EditWordList({
                             wordsLength={words.length}
                             isGlobal={isGlobal}
                             onTabNavigation={handleTabNavigation}
+                            isMobile={isMobile}
                         />
                     );
                 })}

lyrics_transcriber/frontend/src/components/Header.tsx

@@ -39,6 +39,7 @@ interface HeaderProps {
     onFindReplace?: () => void
     onEditAll?: () => void
     onUnCorrectAll?: () => void
+    onResetCorrections?: () => void
     onTimingOffset?: () => void
     timingOffsetMs?: number
     onUndo: () => void
@@ -72,6 +73,7 @@ export default function Header({
     onFindReplace,
     onEditAll,
     onUnCorrectAll,
+    onResetCorrections,
     onTimingOffset,
     timingOffsetMs = 0,
     onUndo,
@@ -144,68 +146,44 @@ export default function Header({
                 </Box>
             )}
 
+            {/* Review Mode toggle and Load File button */}
             <Box sx={{
                 display: 'flex',
-                flexDirection: isMobile ? 'column' : 'row',
                 gap: 1,
-                justifyContent: 'space-between',
-                alignItems: isMobile ? 'stretch' : 'center',
+                justifyContent: 'flex-end',
+                alignItems: '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"
+                {!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"
-                            startIcon={<UploadFileIcon />}
-                            onClick={onFileLoad}
-                            fullWidth={isMobile}
-                        >
-                            Load File
-                        </Button>
-                    )}
-                </Box>
+                            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 sx={{
@@ -213,12 +191,14 @@ export default function Header({
                 gap: 1,
                 mb: 1,
                 flexDirection: isMobile ? 'column' : 'row',
-                height: '140px'
+                height: isMobile ? 'auto' : '140px',
+                minHeight: isMobile ? 'auto' : '140px'
             }}>
                 <Box sx={{
-                    width: '280px',
+                    width: isMobile ? '100%' : '280px',
+                    minWidth: isMobile ? '100%' : '280px',
                     position: 'relative',
-                    height: '100%'
+                    height: isMobile ? 'auto' : '100%'
                 }}>
                     {isAgenticMode ? (
                         <AgenticCorrectionMetrics
@@ -385,15 +365,30 @@ export default function Header({
                 }}>
                     <Box sx={{
                         display: 'flex',
-                        gap: 1,
-                        flexDirection: isMobile ? 'column' : 'row',
-                        alignItems: isMobile ? 'flex-start' : 'center',
-                        height: '32px'
+                        gap: 0.5,
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        alignItems: 'center',
+                        minHeight: '32px'
                     }}>
                         <ModeSelector
                             effectiveMode={effectiveMode}
                             onChange={onModeChange}
                         />
+                        {!isReadOnly && onResetCorrections && (
+                            <Tooltip title="Undo all your changes">
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    color="warning"
+                                    onClick={onResetCorrections}
+                                    startIcon={<UndoIcon />}
+                                    sx={{ minWidth: 'fit-content', height: '32px' }}
+                                >
+                                    Undo All
+                                </Button>
+                            </Tooltip>
+                        )}
                         {!isReadOnly && (
                             <Box sx={{ display: 'flex', height: '32px' }}>
                                 <Tooltip title="Undo">
@@ -457,15 +452,17 @@ export default function Header({
                             </Button>
                         )}
                         {!isReadOnly && onUnCorrectAll && (
-                            <Button
-                                variant="outlined"
-                                size="small"
-                                onClick={onUnCorrectAll}
-                                startIcon={<RestoreIcon />}
-                                sx={{ minWidth: 'fit-content', height: '32px' }}
-                            >
-                                Un-Correct All
-                            </Button>
+                            <Tooltip title="Revert only automatic AI corrections (keeps your manual edits)">
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    onClick={onUnCorrectAll}
+                                    startIcon={<RestoreIcon />}
+                                    sx={{ minWidth: 'fit-content', height: '32px' }}
+                                >
+                                    Undo Auto Corrections
+                                </Button>
+                            </Tooltip>
                         )}
                         {!isReadOnly && onTimingOffset && (
                             <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -480,10 +477,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
                                         }}
@@ -493,6 +490,23 @@ 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

@@ -10,7 +10,7 @@ import {
     WordCorrection,
     CorrectionAnnotation
 } from '../types'
-import { Box, Button, Grid, useMediaQuery, useTheme } from '@mui/material'
+import { Box, Button, Grid, Typography, useMediaQuery, useTheme } from '@mui/material'
 import { ApiClient } from '../api'
 import ReferenceView from './ReferenceView'
 import TranscriptionView from './TranscriptionView'
@@ -33,7 +33,7 @@ import { setupKeyboardHandlers, setModalHandler, getModalState } from './shared/
 import Header from './Header'
 import { getWordsFromIds } from './shared/utils/wordUtils'
 import AddLyricsModal from './AddLyricsModal'
-import { RestoreFromTrash, OndemandVideo } from '@mui/icons-material'
+import { OndemandVideo } from '@mui/icons-material'
 import FindReplaceModal from './FindReplaceModal'
 import TimingOffsetModal from './TimingOffsetModal'
 import { applyOffsetToCorrectionData, applyOffsetToSegment } from './shared/utils/timingUtils'
@@ -216,6 +216,7 @@ interface MemoizedHeaderProps {
     canUndo: boolean
     canRedo: boolean
     onUnCorrectAll: () => void
+    onResetCorrections: () => void
     annotationsEnabled: boolean
     onAnnotationsToggle: (enabled: boolean) => void
     // Review mode props
@@ -250,6 +251,7 @@ const MemoizedHeader = memo(function MemoizedHeader({
     canUndo,
     canRedo,
     onUnCorrectAll,
+    onResetCorrections,
     annotationsEnabled,
     onAnnotationsToggle,
     reviewMode,
@@ -281,6 +283,7 @@ const MemoizedHeader = memo(function MemoizedHeader({
             canUndo={canUndo}
             canRedo={canRedo}
             onUnCorrectAll={onUnCorrectAll}
+            onResetCorrections={onResetCorrections}
             annotationsEnabled={annotationsEnabled}
             onAnnotationsToggle={onAnnotationsToggle}
             reviewMode={reviewMode}
@@ -1255,8 +1258,6 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     
     return (
         <Box sx={{
-            p: 1,
-            pb: 3,
             maxWidth: '100%',
             overflowX: 'hidden'
         }}>
@@ -1282,6 +1283,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 canUndo={canUndo}
                 canRedo={canRedo}
                 onUnCorrectAll={handleUnCorrectAll}
+                onResetCorrections={handleResetCorrections}
                 annotationsEnabled={annotationsEnabled}
                 onAnnotationsToggle={handleAnnotationsToggle}
                 reviewMode={reviewMode}
@@ -1291,7 +1293,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 onRevertAllCorrections={handleRevertAllCorrections}
             />
 
-            <Grid container direction={isMobile ? 'column' : 'row'}>
+            <Grid container direction={isMobile ? 'column' : 'row'} spacing={1}>
                 <Grid item xs={12} md={6}>
                     <MemoizedTranscriptionView
                         data={displayData}
@@ -1316,32 +1318,6 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                         onAcceptCorrection={handleAcceptCorrection}
                         onShowCorrectionDetail={handleShowCorrectionDetail}
                     />
-                    {!isReadOnly && apiClient && (
-                        <Box sx={{
-                            mt: 2,
-                            mb: 3,
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            width: '100%'
-                        }}>
-                            <Button
-                                variant="outlined"
-                                color="warning"
-                                onClick={handleResetCorrections}
-                                startIcon={<RestoreFromTrash />}
-                            >
-                                Reset Corrections
-                            </Button>
-                            <Button
-                                variant="contained"
-                                onClick={handleFinishReview}
-                                disabled={isReviewComplete}
-                                endIcon={<OndemandVideo />}
-                            >
-                                {isReviewComplete ? 'Review Complete' : 'Preview Video'}
-                            </Button>
-                        </Box>
-                    )}
                 </Grid>
                 <Grid item xs={12} md={6}>
                     <MemoizedReferenceView
@@ -1362,6 +1338,52 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 </Grid>
             </Grid>
 
+            {/* Spacer for sticky footer */}
+            {!isReadOnly && apiClient && <Box sx={{ height: 64 }} />}
+
+            {/* Sticky footer bar with Preview Video button */}
+            {!isReadOnly && apiClient && (
+                <Box
+                    sx={{
+                        position: 'fixed',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        bgcolor: 'background.paper',
+                        borderTop: 1,
+                        borderColor: 'divider',
+                        boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+                        py: 1.5,
+                        px: 2,
+                        zIndex: 1100,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        gap: 2
+                    }}
+                >
+                    <Typography
+                        variant="body2"
+                        sx={{ color: 'text.secondary' }}
+                    >
+                        Lyrics look good?
+                    </Typography>
+                    <Button
+                        variant="contained"
+                        onClick={handleFinishReview}
+                        disabled={isReviewComplete}
+                        endIcon={<OndemandVideo />}
+                        sx={{
+                            px: 2.5,
+                            py: 0.75,
+                            fontWeight: 500
+                        }}
+                    >
+                        {isReviewComplete ? 'Review Complete' : 'Preview Video'}
+                    </Button>
+                </Box>
+            )}
+
 
 
             <EditModal