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

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

@@ -1,4 +1,4 @@
-import { Typography, Box } from '@mui/material'
+import { Typography, Box, useMediaQuery, useTheme } from '@mui/material'
 import { WordComponent } from './Word'
 import { useWordClick } from '../hooks/useWordClick'
 import {
@@ -16,6 +16,7 @@ import React from 'react'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import IconButton from '@mui/material/IconButton'
 import { getWordsFromIds } from '../utils/wordUtils'
+import CorrectedWordWithActions from '../../CorrectedWordWithActions'
 
 export interface HighlightedTextProps {
     text?: string
@@ -36,6 +37,12 @@ export interface HighlightedTextProps {
     gaps?: GapSequence[]
     flashingHandler?: string | null
     corrections?: WordCorrection[]
+    // Review mode props for agentic corrections
+    reviewMode?: boolean
+    onRevertCorrection?: (wordId: string) => void
+    onEditCorrection?: (wordId: string) => void
+    onAcceptCorrection?: (wordId: string) => void
+    onShowCorrectionDetail?: (wordId: string) => void
 }
 
 export function HighlightedText({
@@ -57,7 +64,15 @@ export function HighlightedText({
     gaps = [],
     flashingHandler,
     corrections = [],
+    reviewMode = false,
+    onRevertCorrection,
+    onEditCorrection,
+    onAcceptCorrection,
+    onShowCorrectionDetail,
 }: HighlightedTextProps) {
+    const theme = useTheme()
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
     const { handleWordClick } = useWordClick({
         mode,
         onElementClick,
@@ -157,43 +172,83 @@ export function HighlightedText({
 
     const renderContent = () => {
         if (wordPositions && !segments) {
-            return wordPositions.map((wordPos, index) => (
-                <React.Fragment key={wordPos.word.id}>
-                    <WordComponent
-                        key={`${wordPos.word.id}-${index}`}
-                        word={wordPos.word.text}
-                        shouldFlash={shouldWordFlash(wordPos)}
-                        isAnchor={wordPos.type === 'anchor'}
-                        isCorrectedGap={wordPos.isCorrected}
-                        isUncorrectedGap={wordPos.type === 'gap' && !wordPos.isCorrected}
-                        isCurrentlyPlaying={shouldHighlightWord(wordPos)}
-                        onClick={() => handleWordClick(
-                            wordPos.word.text,
-                            wordPos.word.id,
-                            wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
-                            wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
-                        )}
-                        correction={(() => {
-                            const correction = corrections?.find(c => 
-                                c.corrected_word_id === wordPos.word.id || 
-                                c.word_id === wordPos.word.id
-                            );
-                            return correction ? {
+            return wordPositions.map((wordPos, index) => {
+                // Find correction for this word
+                const correction = corrections?.find(c =>
+                    c.corrected_word_id === wordPos.word.id ||
+                    c.word_id === wordPos.word.id
+                );
+
+                // Use CorrectedWordWithActions for agentic corrections
+                if (correction && correction.handler === 'AgenticCorrector') {
+                    return (
+                        <React.Fragment key={wordPos.word.id}>
+                            <CorrectedWordWithActions
+                                word={wordPos.word.text}
+                                originalWord={correction.original_word}
+                                correction={{
+                                    originalWord: correction.original_word,
+                                    handler: correction.handler,
+                                    confidence: correction.confidence,
+                                    source: correction.source,
+                                    reason: correction.reason
+                                }}
+                                shouldFlash={shouldWordFlash(wordPos)}
+                                showActions={reviewMode && !isMobile}
+                                onRevert={() => onRevertCorrection?.(wordPos.word.id)}
+                                onEdit={() => onEditCorrection?.(wordPos.word.id)}
+                                onAccept={() => onAcceptCorrection?.(wordPos.word.id)}
+                                onClick={() => {
+                                    if (isMobile) {
+                                        onShowCorrectionDetail?.(wordPos.word.id)
+                                    } else {
+                                        handleWordClick(
+                                            wordPos.word.text,
+                                            wordPos.word.id,
+                                            wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
+                                            wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
+                                        )
+                                    }
+                                }}
+                            />
+                            {index < wordPositions.length - 1 && ' '}
+                        </React.Fragment>
+                    );
+                }
+
+                // Default rendering with WordComponent
+                return (
+                    <React.Fragment key={wordPos.word.id}>
+                        <WordComponent
+                            key={`${wordPos.word.id}-${index}`}
+                            word={wordPos.word.text}
+                            shouldFlash={shouldWordFlash(wordPos)}
+                            isAnchor={wordPos.type === 'anchor'}
+                            isCorrectedGap={wordPos.isCorrected}
+                            isUncorrectedGap={wordPos.type === 'gap' && !wordPos.isCorrected}
+                            isCurrentlyPlaying={shouldHighlightWord(wordPos)}
+                            onClick={() => handleWordClick(
+                                wordPos.word.text,
+                                wordPos.word.id,
+                                wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
+                                wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
+                            )}
+                            correction={correction ? {
                                 originalWord: correction.original_word,
                                 handler: correction.handler,
                                 confidence: correction.confidence,
                                 source: correction.source,
                                 reason: correction.reason
-                            } : null;
-                        })()}
-                    />
-                    {index < wordPositions.length - 1 && ' '}
-                </React.Fragment>
-            ))
+                            } : null}
+                        />
+                        {index < wordPositions.length - 1 && ' '}
+                    </React.Fragment>
+                );
+            })
         } else if (segments) {
             return segments.map((segment) => (
-                <Box key={segment.id} sx={{ 
-                    display: 'flex', 
+                <Box key={segment.id} sx={{
+                    display: 'flex',
                     alignItems: 'flex-start',
                     mb: 0
                 }}>
@@ -212,12 +267,44 @@ export function HighlightedText({
 
                             const sequence = wordPos?.type === 'gap' ? wordPos.sequence as GapSequence : undefined;
 
-                            // Find correction information for the tooltip
-                            const correction = corrections?.find(c => 
-                                c.corrected_word_id === word.id || 
+                            // Find correction information
+                            const correction = corrections?.find(c =>
+                                c.corrected_word_id === word.id ||
                                 c.word_id === word.id
                             );
-                            
+
+                            // Use CorrectedWordWithActions for agentic corrections
+                            if (correction && correction.handler === 'AgenticCorrector') {
+                                return (
+                                    <React.Fragment key={word.id}>
+                                        <CorrectedWordWithActions
+                                            word={word.text}
+                                            originalWord={correction.original_word}
+                                            correction={{
+                                                originalWord: correction.original_word,
+                                                handler: correction.handler,
+                                                confidence: correction.confidence,
+                                                source: correction.source,
+                                                reason: correction.reason
+                                            }}
+                                            shouldFlash={shouldWordFlash(wordPos || { word: word.text, id: word.id })}
+                                            showActions={reviewMode && !isMobile}
+                                            onRevert={() => onRevertCorrection?.(word.id)}
+                                            onEdit={() => onEditCorrection?.(word.id)}
+                                            onAccept={() => onAcceptCorrection?.(word.id)}
+                                            onClick={() => {
+                                                if (isMobile) {
+                                                    onShowCorrectionDetail?.(word.id)
+                                                } else {
+                                                    handleWordClick(word.text, word.id, anchor, sequence)
+                                                }
+                                            }}
+                                        />
+                                        {wordIndex < segment.words.length - 1 && ' '}
+                                    </React.Fragment>
+                                );
+                            }
+
                             const correctionInfo = correction ? {
                                 originalWord: correction.original_word,
                                 handler: correction.handler,

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/components/shared/types.ts

@@ -85,6 +85,12 @@ export interface TranscriptionViewProps {
     anchors?: AnchorSequence[]
     flashingHandler?: string | null
     onDataChange?: (updatedData: CorrectionData) => void
+    // Review mode props for agentic corrections
+    reviewMode?: boolean
+    onRevertCorrection?: (wordId: string) => void
+    onEditCorrection?: (wordId: string) => void
+    onAcceptCorrection?: (wordId: string) => void
+    onShowCorrectionDetail?: (wordId: string) => void
 }
 
 // Add LinePosition type here since it's used in multiple places

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 />
 )