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

lyrics_transcriber/frontend/src/components/DurationTimelineView.tsx

@@ -30,7 +30,7 @@ const SegmentTimeline = styled(Box)({
 const TimelineRuler = styled(Box)({
     position: 'relative',
     height: '20px',
-    borderBottom: '1px solid #ccc',
+    borderBottom: '1px solid #2a2a2a', // slate-700 for dark mode
     marginBottom: '4px'
 })
 
@@ -38,14 +38,14 @@ const TimelineMark = styled(Box)({
     position: 'absolute',
     width: '1px',
     height: '8px',
-    backgroundColor: '#999',
+    backgroundColor: '#666666', // slate-500 for dark mode
     bottom: 0
 })
 
 const TimelineLabel = styled(Typography)({
     position: 'absolute',
     fontSize: '0.65rem',
-    color: '#666',
+    color: '#888888', // slate-400 for dark mode
     bottom: '10px',
     transform: 'translateX(-50%)',
     whiteSpace: 'nowrap'
@@ -58,7 +58,7 @@ const WordsBar = styled(Box)({
     alignItems: 'stretch',
     minWidth: '100%',
     touchAction: 'pan-y', // Better mobile scrolling
-    backgroundColor: '#f5f5f5',
+    backgroundColor: '#0f0f0f', // slate-900 for dark mode
     borderRadius: '4px',
     marginBottom: '8px'
 })
@@ -84,7 +84,7 @@ const WordBar = styled(Box, {
                 ? COLORS.corrected
                 : isGap
                     ? COLORS.uncorrectedGap
-                    : '#e0e0e0',
+                    : '#2a2a2a', // slate-700 for dark mode default
         border: isLong ? '2px solid #f44336' : 'none',
         boxShadow: isLong ? '0 0 4px rgba(244, 67, 54, 0.5)' : 'none',
         '&:hover': {
@@ -101,13 +101,13 @@ const WordBar = styled(Box, {
 
 const OriginalWordLabel = styled(Typography)({
     fontSize: '0.65rem',
-    color: '#888',
+    color: '#888888', // slate-400 for dark mode
     lineHeight: 1.1,
     marginBottom: '3px',
     textDecoration: 'line-through',
     opacity: 0.85,
     fontWeight: 500,
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    backgroundColor: 'rgba(15, 23, 42, 0.8)', // slate-900 with opacity for dark mode
     padding: '1px 3px',
     borderRadius: '2px'
 })
@@ -226,7 +226,7 @@ export default function DurationTimelineView({
                                                 whiteSpace: 'nowrap',
                                                 width: '100%',
                                                 textAlign: 'center',
-                                                color: correction ? '#1b5e20' : 'inherit'
+                                                color: correction ? '#4ade80' : '#e5e5e5' // green-400 or slate-50 for dark mode
                                             }}
                                         >
                                             {word.text}
@@ -235,7 +235,7 @@ export default function DurationTimelineView({
                                             <Typography
                                                 sx={{
                                                     fontSize: '0.6rem',
-                                                    color: 'rgba(0,0,0,0.6)',
+                                                    color: 'rgba(248, 250, 252, 0.6)', // slate-50 with opacity for dark mode
                                                     lineHeight: 1,
                                                     marginTop: '3px',
                                                     fontWeight: 600

lyrics_transcriber/frontend/src/components/EditModal.tsx

@@ -624,7 +624,7 @@ export default function EditModal({
                         position: 'absolute',
                         top: 0,
                         left: 0,
-                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                        backgroundColor: 'rgba(30, 41, 59, 0.95)', // slate-800 with opacity for dark mode
                         zIndex: 10
                     }}>
                         <CircularProgress size={60} thickness={4} />

lyrics_transcriber/frontend/src/components/EditWordList.tsx

@@ -312,7 +312,7 @@ export default function EditWordList({
                     width: '8px',
                 },
                 '&::-webkit-scrollbar-thumb': {
-                    backgroundColor: 'rgba(0,0,0,0.2)',
+                    backgroundColor: 'rgba(248, 250, 252, 0.2)', // slate-50 for dark mode
                     borderRadius: '4px',
                 },
                 scrollbarWidth: 'thin',

lyrics_transcriber/frontend/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Typography, useMediaQuery, useTheme, Switch, FormControlLabel, Tooltip, Paper, IconButton, Chip } from '@mui/material'
+import { Box, Button, Typography, useMediaQuery, useTheme, Switch, FormControlLabel, Tooltip, Paper, IconButton } from '@mui/material'
 import LockIcon from '@mui/icons-material/Lock'
 import UploadFileIcon from '@mui/icons-material/UploadFile'
 import FindReplaceIcon from '@mui/icons-material/FindReplace'
@@ -129,50 +129,19 @@ export default function Header({
                 </Box>
             )}
 
-            <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 && 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>
-                    )}
+            {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>
-            </Box>
+            )}
 
             <Box sx={{
                 display: 'flex',
@@ -387,10 +356,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
                                         }}
@@ -400,6 +369,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/LyricsSynchronizer/TimelineCanvas.tsx

@@ -33,16 +33,17 @@ const CANVAS_PADDING = 8
 const TEXT_ABOVE_BLOCK = 14
 const RESIZE_HANDLE_SIZE = 8
 const RESIZE_HANDLE_HITAREA = 12
-const PLAYHEAD_COLOR = '#ffffff'
-const WORD_BLOCK_COLOR = '#d32f2f'
-const WORD_BLOCK_SELECTED_COLOR = '#b71c1c'
-const WORD_BLOCK_CURRENT_COLOR = '#f44336'
-const WORD_TEXT_CURRENT_COLOR = '#d32f2f'
-const UPCOMING_WORD_BG = '#fff9c4'
-const UPCOMING_WORD_TEXT = '#000000'
-const TIME_BAR_BG = '#f5f5f5'
-const TIME_BAR_TEXT = '#666666'
-const TIMELINE_BG = '#e0e0e0'
+// Dark theme colors matching karaoke-gen
+const PLAYHEAD_COLOR = '#f97316' // orange-500 for better visibility
+const WORD_BLOCK_COLOR = '#dc2626' // red-600 for dark mode
+const WORD_BLOCK_SELECTED_COLOR = '#b91c1c' // red-700 for dark mode
+const WORD_BLOCK_CURRENT_COLOR = '#ef4444' // red-500 for dark mode
+const WORD_TEXT_CURRENT_COLOR = '#fca5a5' // red-300 for dark mode
+const UPCOMING_WORD_BG = '#2a2a2a' // slate-700 for dark mode
+const UPCOMING_WORD_TEXT = '#e5e5e5' // slate-50 for dark mode
+const TIME_BAR_BG = '#1a1a1a' // slate-800 for dark mode
+const TIME_BAR_TEXT = '#888888' // slate-400 for dark mode
+const TIMELINE_BG = '#0f0f0f' // slate-900 for dark mode
 
 // Drag modes
 type DragMode = 'none' | 'selection' | 'resize' | 'move'
@@ -268,7 +269,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
             const x = timeToX(t)
             
             ctx.beginPath()
-            ctx.strokeStyle = '#999999'
+            ctx.strokeStyle = '#64748b' // slate-500 for dark mode
             ctx.lineWidth = 1
             ctx.moveTo(x, TIME_BAR_HEIGHT - 6)
             ctx.lineTo(x, TIME_BAR_HEIGHT)
@@ -280,7 +281,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
         }
 
         ctx.beginPath()
-        ctx.strokeStyle = '#cccccc'
+        ctx.strokeStyle = '#2a2a2a' // slate-700 for dark mode
         ctx.lineWidth = 1
         ctx.moveTo(0, TIME_BAR_HEIGHT)
         ctx.lineTo(canvasWidth, TIME_BAR_HEIGHT)
@@ -314,20 +315,20 @@ const TimelineCanvas = memo(function TimelineCanvas({
 
             // Draw selection border
             if (isSelected) {
-                ctx.strokeStyle = '#ffffff'
+                ctx.strokeStyle = '#f97316' // orange-500 for dark mode selection
                 ctx.lineWidth = 2
                 ctx.strokeRect(bounds.startX, bounds.y, bounds.blockWidth, WORD_BLOCK_HEIGHT)
-                
-                // Draw resize handle (white dot on right edge) for selected words when hovered
+
+                // Draw resize handle (orange dot on right edge) for selected words when hovered
                 if (isHovered || selectedWordIds.size === 1) {
                     const handleX = bounds.startX + bounds.blockWidth - RESIZE_HANDLE_SIZE / 2
                     const handleY = bounds.y + WORD_BLOCK_HEIGHT / 2
-                    
+
                     ctx.beginPath()
-                    ctx.fillStyle = '#ffffff'
+                    ctx.fillStyle = '#f97316' // orange-500 for dark mode
                     ctx.arc(handleX, handleY, RESIZE_HANDLE_SIZE / 2, 0, Math.PI * 2)
                     ctx.fill()
-                    ctx.strokeStyle = '#666666'
+                    ctx.strokeStyle = '#0f0f0f' // slate-900 for dark mode
                     ctx.lineWidth = 1
                     ctx.stroke()
                 }
@@ -368,7 +369,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
                 
                 if (textStartX < canvasWidth - 10) {
                     const isCurrent = word.id === currentWordId
-                    ctx.fillStyle = isCurrent ? WORD_TEXT_CURRENT_COLOR : '#333333'
+                    ctx.fillStyle = isCurrent ? WORD_TEXT_CURRENT_COLOR : '#f8fafc' // slate-50 for dark mode
                     ctx.fillText(word.text, textStartX, textY)
                     rightmostTextEnd = textStartX + textWidth
                 }
@@ -405,7 +406,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
             
             ctx.beginPath()
             ctx.fillStyle = PLAYHEAD_COLOR
-            ctx.strokeStyle = '#333333'
+            ctx.strokeStyle = '#0f0f0f' // slate-900 for dark mode
             ctx.lineWidth = 1
             ctx.moveTo(playheadX - 6, 2)
             ctx.lineTo(playheadX + 6, 2)
@@ -422,7 +423,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
             ctx.stroke()
 
             ctx.beginPath()
-            ctx.strokeStyle = 'rgba(0,0,0,0.4)'
+            ctx.strokeStyle = 'rgba(0,0,0,0.6)' // Darker shadow for dark mode visibility
             ctx.lineWidth = 1
             ctx.moveTo(playheadX + 1, TIME_BAR_HEIGHT)
             ctx.lineTo(playheadX + 1, height)

lyrics_transcriber/frontend/src/components/ReferenceView.tsx

@@ -221,7 +221,7 @@ export default function ReferenceView({
                             width: '100%', 
                             mb: 0,
                             '&:hover': {
-                                backgroundColor: 'rgba(0, 0, 0, 0.03)'
+                                backgroundColor: 'rgba(248, 250, 252, 0.04)' // slate-50 hover for dark mode
                             }
                         }}
                     >

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -182,7 +182,7 @@ export default function TranscriptionView({
                             width: '100%',
                             mb: 0,
                             '&:hover': {
-                                backgroundColor: 'rgba(0, 0, 0, 0.03)'
+                                backgroundColor: 'rgba(248, 250, 252, 0.04)' // slate-50 hover for dark mode
                             }
                         }}>
                             <SegmentControls>

lyrics_transcriber/frontend/src/components/WordDivider.tsx

@@ -18,7 +18,7 @@ interface WordDividerProps {
 }
 
 const buttonTextStyle = {
-    color: 'rgba(0, 0, 0, 0.6)',
+    color: 'rgba(248, 250, 252, 0.8)', // slate-50 with opacity for dark mode
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
     fontWeight: 400,
     fontSize: '0.7rem',
@@ -58,7 +58,7 @@ export default function WordDivider({
                 height: '20px',
                 my: -0.5,
                 width: '50%',
-                backgroundColor: '#fff',
+                backgroundColor: '#1a1a1a', // slate-800 for dark mode
                 ...sx
             }}
         >
@@ -66,7 +66,7 @@ export default function WordDivider({
                 display: 'flex',
                 alignItems: 'center',
                 gap: 1,
-                backgroundColor: '#fff',
+                backgroundColor: '#1a1a1a', // slate-800 for dark mode
                 padding: '0 8px',
                 zIndex: 1
             }}>

lyrics_transcriber/frontend/src/components/shared/components/Word.tsx

@@ -41,14 +41,14 @@ export const WordComponent = React.memo(function Word({
                 borderRadius: '2px',
                 color: isCurrentlyPlaying ? '#ffffff' : 'inherit',
                 textDecoration: correction ? 'underline dotted' : 'none',
-                textDecorationColor: correction ? '#666' : 'inherit',
+                textDecorationColor: correction ? '#666666' : 'inherit', // slate-500 for dark mode
                 textUnderlineOffset: '2px',
                 fontSize: '0.85rem',
                 lineHeight: 1.2
             }}
             sx={{
                 '&:hover': {
-                    backgroundColor: '#e0e0e0'
+                    backgroundColor: 'rgba(248, 250, 252, 0.08)' // slate-50 hover for dark mode
                 }
             }}
             onClick={onClick}

lyrics_transcriber/frontend/src/components/shared/constants.ts

@@ -1,11 +1,21 @@
 import { keyframes } from '@mui/system'
 
+// Dark theme colors matching karaoke-gen globals.css
 export const COLORS = {
-    anchor: '#e3f2fd', // Pale blue
-    corrected: '#e8f5e9', // Pale green
-    uncorrectedGap: '#fff3e0', // Pale orange
-    highlighted: '#ffeb3b',  // or any color you prefer for highlighting
-    playing: '#1976d2', // Blue
+    anchor: 'rgba(59, 130, 246, 0.25)', // Blue tint for dark mode
+    corrected: 'rgba(34, 197, 94, 0.25)', // Green tint for dark mode
+    uncorrectedGap: 'rgba(249, 115, 22, 0.25)', // Orange tint for dark mode
+    highlighted: 'rgba(251, 191, 36, 0.4)',  // Amber highlight for dark mode
+    playing: '#3b82f6', // Blue-500
+    // Text colors (matching karaoke-gen)
+    textPrimary: '#e5e5e5', // matches karaoke-gen --text
+    textSecondary: '#888888', // matches karaoke-gen --text-muted
+    textMuted: '#666666',
+    // Background colors (matching karaoke-gen globals.css)
+    background: '#0f0f0f', // matches karaoke-gen --bg
+    backgroundPaper: '#1a1a1a', // matches karaoke-gen --card
+    backgroundElevated: '#252525', // matches karaoke-gen --secondary
+    border: '#2a2a2a', // matches karaoke-gen --card-border
 } as const
 
 export const flashAnimation = keyframes`

lyrics_transcriber/frontend/src/main.tsx

@@ -1,8 +1,5 @@
 import ReactDOM from 'react-dom/client'
-import { ThemeProvider } from '@mui/material/styles'
-import CssBaseline from '@mui/material/CssBaseline'
 import App from './App'
-import theme from './theme'
 // Import version from package.json
 import packageJson from '../package.json'
 
@@ -10,8 +7,5 @@ import packageJson from '../package.json'
 console.log(`🎵 Lyrics Transcriber Frontend v${packageJson.version}`)
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <ThemeProvider theme={theme}>
-    <CssBaseline />
-    <App />
-  </ThemeProvider>
+  <App />
 )