karaoke-gen 0.103.1__py3-none-any.whl → 0.107.0__py3-none-any.whl

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

@@ -1,466 +0,0 @@
-import { Typography, Box, useMediaQuery, useTheme } from '@mui/material'
-import { WordComponent } from './Word'
-import { useWordClick } from '../hooks/useWordClick'
-import {
-    AnchorSequence,
-    GapSequence,
-    HighlightInfo,
-    InteractionMode,
-    LyricsSegment,
-    Word,
-    WordCorrection
-} from '../../../types'
-import { ModalContent } from '../../LyricsAnalyzer'
-import type { FlashType, LinePosition, TranscriptionWordPosition, WordClickInfo } from '../types'
-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
-    segments?: LyricsSegment[]
-    wordPositions: TranscriptionWordPosition[]
-    anchors: AnchorSequence[]
-    highlightInfo: HighlightInfo | null
-    mode: InteractionMode
-    onElementClick: (content: ModalContent) => void
-    onWordClick?: (info: WordClickInfo) => void
-    flashingType: FlashType
-    isReference?: boolean
-    currentSource?: string
-    preserveSegments?: boolean
-    linePositions?: LinePosition[]
-    currentTime?: number
-    referenceCorrections?: Map<string, string>
-    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({
-    text,
-    segments,
-    wordPositions = [] as TranscriptionWordPosition[],
-    anchors,
-    highlightInfo,
-    mode,
-    onElementClick,
-    onWordClick,
-    flashingType,
-    isReference,
-    currentSource = '',
-    preserveSegments = false,
-    linePositions = [],
-    currentTime = 0,
-    referenceCorrections = new Map(),
-    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,
-        onWordClick,
-        isReference,
-        currentSource,
-        gaps,
-        anchors,
-        corrections
-    })
-
-    const shouldWordFlash = (wordPos: TranscriptionWordPosition | { word: string; id: string }): boolean => {
-        if (!flashingType) {
-            return false;
-        }
-
-        if ('type' in wordPos) {
-            // Add handler-specific flashing
-            if (flashingType === 'handler' && flashingHandler) {
-                console.log('Checking handler flash for word:', wordPos.word.text);
-                console.log('Current flashingHandler:', flashingHandler);
-                console.log('Word ID:', wordPos.word.id);
-
-                const shouldFlash = corrections.some(correction =>
-                    correction.handler === flashingHandler &&
-                    (correction.corrected_word_id === wordPos.word.id ||
-                        correction.word_id === wordPos.word.id)
-                );
-
-                console.log('Should flash:', shouldFlash);
-                return shouldFlash;
-            }
-
-            const gap = wordPos.sequence as GapSequence
-            const isCorrected = (
-                // Check corrections array for this word
-                corrections.some(correction =>
-                    (correction.word_id === wordPos.word.id ||
-                        correction.corrected_word_id === wordPos.word.id) &&
-                    gap.transcribed_word_ids.includes(correction.word_id)
-                ) ||
-                // Also check if marked as corrected in wordPos
-                wordPos.isCorrected
-            )
-
-            return Boolean(
-                (flashingType === 'anchor' && wordPos.type === 'anchor') ||
-                (flashingType === 'corrected' && isCorrected) ||
-                (flashingType === 'uncorrected' && wordPos.type === 'gap' && !isCorrected) ||
-                (flashingType === 'word' && (
-                    // For anchors
-                    (highlightInfo?.type === 'anchor' && wordPos.type === 'anchor' &&
-                        (isReference && currentSource && highlightInfo.sequence
-                            ? getWordsFromIds(segments || [],
-                                (highlightInfo.sequence as AnchorSequence).reference_word_ids[currentSource] || []
-                            ).some(w => w.id === wordPos.word.id)
-                            : getWordsFromIds(segments || [],
-                                (highlightInfo.sequence as AnchorSequence).transcribed_word_ids
-                            ).some(w => w.id === wordPos.word.id)
-                        )) ||
-                    // For gaps
-                    (highlightInfo?.type === 'gap' && wordPos.type === 'gap' &&
-                        (isReference && currentSource && highlightInfo.sequence
-                            ? getWordsFromIds(segments || [],
-                                (highlightInfo.sequence as GapSequence).reference_word_ids[currentSource] || []
-                            ).some(w => w.id === wordPos.word.id)
-                            : getWordsFromIds(segments || [],
-                                (highlightInfo.sequence as GapSequence).transcribed_word_ids
-                            ).some(w => w.id === wordPos.word.id))
-                    ) ||
-                    // For corrections
-                    (highlightInfo?.type === 'correction' && isReference && currentSource &&
-                        highlightInfo.correction?.reference_positions?.[currentSource]?.toString() === wordPos.word.id)
-                ))
-            )
-        }
-        return false
-    }
-
-    const shouldHighlightWord = (wordPos: TranscriptionWordPosition | { word: string; id: string }): boolean => {
-        // Don't highlight words in reference view
-        if (isReference) return false
-
-        if ('type' in wordPos && currentTime !== undefined && 'start_time' in wordPos.word) {
-            const word = wordPos.word as Word
-            return word.start_time !== null &&
-                word.end_time !== null &&
-                currentTime >= word.start_time &&
-                currentTime <= word.end_time
-        }
-        return false
-    }
-
-    const handleCopyLine = (text: string) => {
-        navigator.clipboard.writeText(text);
-    };
-
-    const renderContent = () => {
-        if (wordPositions && !segments) {
-            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>
-                );
-            })
-        } else if (segments) {
-            return segments.map((segment) => (
-                <Box key={segment.id} sx={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    mb: 0
-                }}>
-                    <Box sx={{ flex: 1 }}>
-                        {segment.words.map((word, wordIndex) => {
-                            const wordPos = wordPositions.find((pos: TranscriptionWordPosition) =>
-                                pos.word.id === word.id
-                            );
-
-                            const anchor = wordPos?.type === 'anchor' ? anchors?.find(a =>
-                                (a.reference_word_ids[currentSource] || []).includes(word.id)
-                            ) : undefined;
-
-                            const hasCorrection = referenceCorrections.has(word.id);
-                            const isUncorrectedGap = wordPos?.type === 'gap' && !hasCorrection;
-
-                            const sequence = wordPos?.type === 'gap' ? wordPos.sequence as GapSequence : undefined;
-
-                            // 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,
-                                confidence: correction.confidence,
-                                source: correction.source,
-                                reason: correction.reason
-                            } : null;
-
-                            return (
-                                <React.Fragment key={word.id}>
-                                    <WordComponent
-                                        word={word.text}
-                                        shouldFlash={shouldWordFlash(wordPos || { word: word.text, id: word.id })}
-                                        isAnchor={Boolean(anchor)}
-                                        isCorrectedGap={hasCorrection}
-                                        isUncorrectedGap={isUncorrectedGap}
-                                        isCurrentlyPlaying={shouldHighlightWord(wordPos || { word: word.text, id: word.id })}
-                                        onClick={() => handleWordClick(word.text, word.id, anchor, sequence)}
-                                        correction={correctionInfo}
-                                    />
-                                    {wordIndex < segment.words.length - 1 && ' '}
-                                </React.Fragment>
-                            );
-                        })}
-                    </Box>
-                </Box>
-            ));
-        } else if (text) {
-            const lines = text.split('\n')
-            let wordCount = 0
-
-            return lines.map((line, lineIndex) => {
-                const currentLinePosition = linePositions?.find(pos => pos.position === wordCount)
-                if (currentLinePosition?.isEmpty) {
-                    wordCount++
-                    return (
-                        <Box key={`empty-${lineIndex}`} sx={{ 
-                            display: 'flex', 
-                            alignItems: 'flex-start',
-                            mb: 0,
-                            lineHeight: 1
-                        }}>
-                            <Typography
-                                component="span"
-                                sx={{
-                                    color: 'text.secondary',
-                                    width: '2em',
-                                    minWidth: '2em',
-                                    textAlign: 'right',
-                                    marginRight: 1,
-                                    userSelect: 'none',
-                                    fontFamily: 'monospace',
-                                    paddingTop: '1px',
-                                    fontSize: '0.8rem',
-                                    lineHeight: 1
-                                }}
-                            >
-                                {currentLinePosition.lineNumber}
-                            </Typography>
-                            <Box sx={{ width: '18px' }} />
-                            <Box sx={{ flex: 1, height: '1em' }} />
-                        </Box>
-                    )
-                }
-
-                const words = line.split(' ')
-                const lineWords: React.ReactNode[] = []
-                
-                words.forEach((word, wordIndex) => {
-                    if (word === '') return null
-                    if (/^\s+$/.test(word)) {
-                        return lineWords.push(<span key={`space-${lineIndex}-${wordIndex}`}> </span>)
-                    }
-
-                    const wordId = `${currentSource}-word-${wordCount}`
-                    wordCount++
-
-                    const anchor = currentSource ? anchors?.find(a =>
-                        a.reference_word_ids[currentSource]?.includes(wordId)
-                    ) : undefined
-
-                    const hasCorrection = referenceCorrections.has(wordId)
-
-                    lineWords.push(
-                        <WordComponent
-                            key={wordId}
-                            word={word}
-                            shouldFlash={shouldWordFlash({ word, id: wordId })}
-                            isAnchor={Boolean(anchor)}
-                            isCorrectedGap={hasCorrection}
-                            isUncorrectedGap={false}
-                            isCurrentlyPlaying={shouldHighlightWord({ word, id: wordId })}
-                            onClick={() => handleWordClick(word, wordId, anchor, undefined)}
-                        />
-                    )
-                })
-
-                return (
-                    <Box key={`line-${lineIndex}`} sx={{ 
-                        display: 'flex', 
-                        alignItems: 'flex-start',
-                        mb: 0,
-                        lineHeight: 1
-                    }}>
-                        <Typography
-                            component="span"
-                            sx={{
-                                color: 'text.secondary',
-                                width: '2em',
-                                minWidth: '2em',
-                                textAlign: 'right',
-                                marginRight: 1,
-                                userSelect: 'none',
-                                fontFamily: 'monospace',
-                                paddingTop: '1px',
-                                fontSize: '0.8rem',
-                                lineHeight: 1
-                            }}
-                        >
-                            {currentLinePosition?.lineNumber ?? lineIndex}
-                        </Typography>
-                        <IconButton
-                            size="small"
-                            onClick={() => handleCopyLine(line)}
-                            sx={{
-                                padding: '1px',
-                                marginRight: 0.5,
-                                height: '18px',
-                                width: '18px',
-                                minHeight: '18px',
-                                minWidth: '18px'
-                            }}
-                        >
-                            <ContentCopyIcon sx={{ fontSize: '0.9rem' }} />
-                        </IconButton>
-                        <Box sx={{ flex: 1 }}>
-                            {lineWords}
-                        </Box>
-                    </Box>
-                )
-            })
-        }
-        return null
-    }
-
-    return (
-        <Typography
-            component="div"
-            sx={{
-                fontFamily: 'monospace',
-                whiteSpace: preserveSegments ? 'normal' : 'pre-wrap',
-                margin: 0,
-                lineHeight: 1.5
-            }}
-        >
-            {renderContent()}
-        </Typography>
-    )
-} 

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

@@ -1,56 +0,0 @@
-import { Box, Button } from '@mui/material'
-import AddIcon from '@mui/icons-material/Add'
-
-export interface SourceSelectorProps {
-    currentSource: string
-    onSourceChange: (source: string) => void
-    availableSources: string[]
-    onAddLyrics?: () => void
-}
-
-export function SourceSelector({ currentSource, onSourceChange, availableSources, onAddLyrics }: SourceSelectorProps) {
-    return (
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.3, alignItems: 'center' }}>
-            {availableSources.map((source) => (
-                <Button
-                    key={source}
-                    size="small"
-                    variant={currentSource === source ? 'contained' : 'outlined'}
-                    onClick={() => onSourceChange(source)}
-                    sx={{
-                        mr: 0,
-                        py: 0.2,
-                        px: 0.8,
-                        minWidth: 'auto',
-                        fontSize: '0.7rem',
-                        lineHeight: 1.2
-                    }}
-                >
-                    {/* Capitalize first letter of source */}
-                    {source.charAt(0).toUpperCase() + source.slice(1)}
-                </Button>
-            ))}
-            {onAddLyrics && (
-                <Button
-                    size="small"
-                    variant="outlined"
-                    onClick={onAddLyrics}
-                    startIcon={<AddIcon sx={{ fontSize: '0.9rem' }} />}
-                    sx={{
-                        mr: 0,
-                        py: 0.2,
-                        px: 0.8,
-                        minWidth: 'auto',
-                        fontSize: '0.7rem',
-                        lineHeight: 1.2,
-                        '& .MuiButton-startIcon': {
-                            marginLeft: '-5px',
-                            marginRight: '1px',
-                            marginTop: '-1px'
-                        }
-                    }}
-                >New</Button>
-            )}
-        </Box>
-    )
-} 

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

@@ -1,89 +0,0 @@
-import React from 'react'
-import { COLORS } from '../constants'
-import { HighlightedWord } from '../styles'
-import { WordProps } from '../types'
-import { Tooltip } from '@mui/material'
-
-export const WordComponent = React.memo(function Word({
-    word,
-    shouldFlash,
-    isAnchor,
-    isCorrectedGap,
-    isUncorrectedGap,
-    isCurrentlyPlaying,
-    padding = '1px 3px',
-    onClick,
-    correction
-}: WordProps) {
-    if (/^\s+$/.test(word)) {
-        return word
-    }
-
-    const backgroundColor = isCurrentlyPlaying
-        ? COLORS.playing
-        : shouldFlash
-            ? COLORS.highlighted
-            : isAnchor
-                ? COLORS.anchor
-                : isCorrectedGap
-                    ? COLORS.corrected
-                    : isUncorrectedGap
-                        ? COLORS.uncorrectedGap
-                        : 'transparent'
-
-    const wordElement = (
-        <HighlightedWord
-            shouldFlash={shouldFlash}
-            style={{
-                backgroundColor,
-                padding,
-                cursor: 'pointer',
-                borderRadius: '2px',
-                color: isCurrentlyPlaying ? '#ffffff' : 'inherit',
-                textDecoration: correction ? 'underline dotted' : 'none',
-                textUnderlineOffset: '2px',
-                fontSize: '0.85rem',
-                lineHeight: 1.2
-            }}
-            sx={{
-                textDecorationColor: correction ? 'text.disabled' : 'inherit', // Theme-aware underline color
-                '&:hover': {
-                    backgroundColor: (theme) => theme.palette.mode === 'dark'
-                        ? 'rgba(248, 250, 252, 0.08)'  // light hover for dark mode
-                        : 'rgba(30, 41, 59, 0.08)'    // dark hover for light mode
-                }
-            }}
-            onClick={onClick}
-        >
-            {word}
-        </HighlightedWord>
-    )
-
-    if (correction) {
-        const tooltipContent = (
-            <>
-                <strong>Original:</strong> "{correction.originalWord}"<br />
-                <strong>Corrected by:</strong> {correction.handler}<br />
-                <strong>Source:</strong> {correction.source}<br />
-                {correction.reason && (
-                    <>
-                        <strong>Reason:</strong> {correction.reason}<br />
-                    </>
-                )}
-                {correction.confidence !== undefined && correction.confidence > 0 && (
-                    <>
-                        <strong>Confidence:</strong> {(correction.confidence * 100).toFixed(0)}%<br />
-                    </>
-                )}
-            </>
-        )
-        
-        return (
-            <Tooltip title={tooltipContent} arrow placement="top">
-                {wordElement}
-            </Tooltip>
-        )
-    }
-
-    return wordElement
-}) 

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

@@ -1,30 +0,0 @@
-import { keyframes } from '@mui/system'
-
-// Dark theme colors matching karaoke-gen globals.css
-export const COLORS = {
-    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`
-  0%, 100% { 
-    opacity: 1;
-    background-color: inherit;
-  }
-  50% { 
-    opacity: 0.6;
-    background-color: ${COLORS.highlighted};
-  }
-`