karaoke-gen 0.75.54__py3-none-any.whl

lyrics_transcriber/frontend/src/components/CorrectionDetailCard.tsx

@@ -0,0 +1,281 @@
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Box,
+    Typography,
+    Chip,
+    LinearProgress,
+    IconButton,
+    useMediaQuery,
+    useTheme,
+    Slide
+} from '@mui/material'
+import { TransitionProps } from '@mui/material/transitions'
+import CloseIcon from '@mui/icons-material/Close'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import { forwardRef } from 'react'
+
+interface CorrectionDetailCardProps {
+    open: boolean
+    onClose: () => void
+    originalWord: string
+    correctedWord: string
+    category: string | null
+    confidence: number
+    reason: string
+    handler: string
+    source: string
+    onRevert: () => void
+    onEdit: () => void
+    onAccept: () => void
+}
+
+// Slide transition for mobile
+const Transition = forwardRef(function Transition(
+    props: TransitionProps & {
+        children: React.ReactElement<any, any>
+    },
+    ref: React.Ref<unknown>
+) {
+    return <Slide direction="up" ref={ref} {...props} />
+})
+
+// Format category name for display
+const formatCategory = (category: string | null): string => {
+    if (!category) return 'Unknown'
+    return category
+        .split('_')
+        .map(word => word.charAt(0) + word.slice(1).toLowerCase())
+        .join(' ')
+}
+
+// Get emoji/icon for category
+const getCategoryIcon = (category: string | null): string => {
+    if (!category) return '📝'
+    const icons: Record<string, string> = {
+        'SOUND_ALIKE': '🎵',
+        'PUNCTUATION_ONLY': '✏️',
+        'BACKGROUND_VOCALS': '🎤',
+        'EXTRA_WORDS': '➕',
+        'REPEATED_SECTION': '🔁',
+        'COMPLEX_MULTI_ERROR': '🔧',
+        'AMBIGUOUS': '❓',
+        'NO_ERROR': '✅'
+    }
+    return icons[category] || '📝'
+}
+
+// Get confidence color
+const getConfidenceColor = (confidence: number): 'error' | 'warning' | 'success' => {
+    if (confidence < 0.6) return 'error'
+    if (confidence < 0.8) return 'warning'
+    return 'success'
+}
+
+export default function CorrectionDetailCard({
+    open,
+    onClose,
+    originalWord,
+    correctedWord,
+    category,
+    confidence,
+    reason,
+    handler,
+    source,
+    onRevert,
+    onEdit,
+    onAccept
+}: CorrectionDetailCardProps) {
+    const theme = useTheme()
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+    const fullScreen = isMobile
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            fullScreen={fullScreen}
+            maxWidth="sm"
+            fullWidth
+            TransitionComponent={isMobile ? Transition : undefined}
+            PaperProps={{
+                sx: {
+                    ...(isMobile && {
+                        position: 'fixed',
+                        bottom: 0,
+                        m: 0,
+                        borderRadius: '16px 16px 0 0',
+                        maxHeight: '85vh'
+                    })
+                }
+            }}
+        >
+            <DialogTitle sx={{ pb: 1 }}>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <Typography variant="h6" sx={{ fontSize: '1.1rem', fontWeight: 600 }}>
+                        Correction Details
+                    </Typography>
+                    <IconButton
+                        aria-label="close"
+                        onClick={onClose}
+                        size="small"
+                    >
+                        <CloseIcon />
+                    </IconButton>
+                </Box>
+            </DialogTitle>
+
+            <DialogContent>
+                {/* Original → Corrected */}
+                <Box sx={{ mb: 3 }}>
+                    <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}>
+                        Change
+                    </Typography>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                        <Box
+                            sx={{
+                                px: 2,
+                                py: 1,
+                                bgcolor: 'error.lighter',
+                                borderRadius: 1,
+                                textDecoration: 'line-through',
+                                flex: 1,
+                                textAlign: 'center'
+                            }}
+                        >
+                            <Typography variant="body1" sx={{ fontWeight: 500 }}>
+                                {originalWord}
+                            </Typography>
+                        </Box>
+                        <ArrowForwardIcon color="action" />
+                        <Box
+                            sx={{
+                                px: 2,
+                                py: 1,
+                                bgcolor: 'success.lighter',
+                                borderRadius: 1,
+                                flex: 1,
+                                textAlign: 'center'
+                            }}
+                        >
+                            <Typography variant="body1" sx={{ fontWeight: 600 }}>
+                                {correctedWord}
+                            </Typography>
+                        </Box>
+                    </Box>
+                </Box>
+
+                {/* Category */}
+                {category && (
+                    <Box sx={{ mb: 2 }}>
+                        <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}>
+                            Category
+                        </Typography>
+                        <Chip
+                            label={`${getCategoryIcon(category)} ${formatCategory(category)}`}
+                            size="small"
+                            variant="outlined"
+                            sx={{ fontSize: '0.875rem' }}
+                        />
+                    </Box>
+                )}
+
+                {/* Confidence */}
+                <Box sx={{ mb: 2 }}>
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
+                        <Typography variant="caption" color="text.secondary">
+                            Confidence
+                        </Typography>
+                        <Typography variant="caption" sx={{ fontWeight: 600 }}>
+                            {(confidence * 100).toFixed(0)}%
+                        </Typography>
+                    </Box>
+                    <LinearProgress
+                        variant="determinate"
+                        value={confidence * 100}
+                        color={getConfidenceColor(confidence)}
+                        sx={{ height: 8, borderRadius: 1 }}
+                    />
+                </Box>
+
+                {/* Reasoning */}
+                <Box sx={{ mb: 2 }}>
+                    <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}>
+                        Reasoning
+                    </Typography>
+                    <Typography
+                        variant="body2"
+                        sx={{
+                            p: 1.5,
+                            bgcolor: 'grey.50',
+                            borderRadius: 1,
+                            border: '1px solid',
+                            borderColor: 'grey.200',
+                            lineHeight: 1.6
+                        }}
+                    >
+                        {reason}
+                    </Typography>
+                </Box>
+
+                {/* Metadata */}
+                <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+                    <Chip
+                        label={`Handler: ${handler}`}
+                        size="small"
+                        variant="outlined"
+                        sx={{ fontSize: '0.7rem' }}
+                    />
+                    <Chip
+                        label={`Source: ${source}`}
+                        size="small"
+                        variant="outlined"
+                        sx={{ fontSize: '0.7rem' }}
+                    />
+                </Box>
+            </DialogContent>
+
+            <DialogActions sx={{ p: 2, gap: 1, flexDirection: isMobile ? 'column' : 'row' }}>
+                <Button
+                    onClick={() => {
+                        onRevert()
+                        onClose()
+                    }}
+                    variant="outlined"
+                    color="error"
+                    fullWidth={isMobile}
+                    sx={{ minHeight: isMobile ? '44px' : '36px' }}
+                >
+                    Revert to Original
+                </Button>
+                <Button
+                    onClick={() => {
+                        onEdit()
+                        onClose()
+                    }}
+                    variant="outlined"
+                    fullWidth={isMobile}
+                    sx={{ minHeight: isMobile ? '44px' : '36px' }}
+                >
+                    Edit Correction
+                </Button>
+                <Button
+                    onClick={() => {
+                        onAccept()
+                        onClose()
+                    }}
+                    variant="contained"
+                    color="success"
+                    fullWidth={isMobile}
+                    sx={{ minHeight: isMobile ? '44px' : '36px' }}
+                >
+                    Mark as Correct
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+

lyrics_transcriber/frontend/src/components/CorrectionMetrics.tsx

@@ -0,0 +1,162 @@
+import { Paper, Box, Typography } from '@mui/material'
+import { COLORS } from './shared/constants'
+
+interface MetricProps {
+    color?: string
+    label: string
+    value: string | number
+    description: string
+    details?: Array<{ label: string, value: string | number }>
+    onClick?: () => void
+}
+
+function Metric({ color, label, value, description, details, onClick }: MetricProps) {
+    return (
+        <Paper
+            sx={{
+                p: 0.8,
+                pt: 0,
+                height: '100%',
+                cursor: onClick ? 'pointer' : 'default',
+                '&:hover': onClick ? {
+                    bgcolor: 'action.hover'
+                } : undefined,
+                display: 'flex',
+                flexDirection: 'column'
+            }}
+            onClick={onClick}
+        >
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 0.5, mt: 0.8 }}>
+                {color && (
+                    <Box
+                        sx={{
+                            width: 12,
+                            height: 12,
+                            borderRadius: 1,
+                            bgcolor: color,
+                            mr: 0.5,
+                        }}
+                    />
+                )}
+                <Typography variant="subtitle2" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
+                    {label}
+                </Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, mb: 0.3 }}>
+                <Typography variant="h6" sx={{ fontSize: '1.1rem' }}>
+                    {value}
+                </Typography>
+            </Box>
+            <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
+                {description}
+            </Typography>
+            {details && (
+                <Box sx={{ mt: 0.5, flex: 1, overflow: 'auto' }}>
+                    {details.map((detail, index) => (
+                        <Box key={index} sx={{ display: 'flex', justifyContent: 'space-between', mt: 0.3 }}>
+                            <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
+                                {detail.label}
+                            </Typography>
+                            <Typography variant="caption" sx={{ fontSize: '0.7rem' }}>
+                                {detail.value}
+                            </Typography>
+                        </Box>
+                    ))}
+                </Box>
+            )}
+        </Paper>
+    )
+}
+
+interface CorrectionMetricsProps {
+    // Anchor metrics
+    anchorCount?: number
+    multiSourceAnchors?: number
+    anchorWordCount?: number
+    // Gap metrics
+    correctedGapCount?: number
+    uncorrectedGapCount?: number
+    uncorrectedGaps?: Array<{
+        position: string
+        length: number
+    }>
+    // Correction details
+    replacedCount?: number
+    addedCount?: number
+    deletedCount?: number
+    // Add total words count
+    totalWords?: number
+    onMetricClick?: {
+        anchor?: () => void
+        corrected?: () => void
+        uncorrected?: () => void
+    }
+}
+
+export default function CorrectionMetrics({
+    anchorCount,
+    multiSourceAnchors = 0,
+    anchorWordCount = 0,
+    correctedGapCount = 0,
+    uncorrectedGapCount = 0,
+    uncorrectedGaps = [],
+    replacedCount = 0,
+    addedCount = 0,
+    deletedCount = 0,
+    totalWords = 0,
+    onMetricClick
+}: CorrectionMetricsProps) {
+    // Calculate percentages based on word counts
+    const anchorPercentage = totalWords > 0 ? Math.round((anchorWordCount / totalWords) * 100) : 0
+    const uncorrectedWordCount = uncorrectedGaps?.reduce((sum, gap) => sum + gap.length, 0) ?? 0
+    const uncorrectedPercentage = totalWords > 0 ? Math.round((uncorrectedWordCount / totalWords) * 100) : 0
+    const correctedWordCount = replacedCount + addedCount
+    const correctedPercentage = totalWords > 0 ?
+        Math.round((correctedWordCount / totalWords) * 100) : 0
+
+    return (
+        <Box sx={{ height: '100%', display: 'flex' }}>
+            <Box sx={{ flex: 1, display: 'flex', flexDirection: 'row', gap: 1, height: '100%' }}>
+                <Box sx={{ flex: 1, height: '100%' }}>
+                    <Metric
+                        color={COLORS.anchor}
+                        label="Anchor Sequences"
+                        value={`${anchorCount ?? '-'} (${anchorPercentage}%)`}
+                        description="Matched sections between transcription and reference"
+                        details={[
+                            { label: 'Words in Anchors', value: anchorWordCount },
+                            { label: 'Multi-source Matches', value: multiSourceAnchors }
+                        ]}
+                        onClick={onMetricClick?.anchor}
+                    />
+                </Box>
+                <Box sx={{ flex: 1, height: '100%' }}>
+                    <Metric
+                        color={COLORS.corrected}
+                        label="Corrected Gaps"
+                        value={`${correctedGapCount} (${correctedPercentage}%)`}
+                        description="Successfully corrected sections"
+                        details={[
+                            { label: 'Words Replaced', value: replacedCount },
+                            { label: 'Words Added / Deleted', value: `+${addedCount} / -${deletedCount}` }
+                        ]}
+                        onClick={onMetricClick?.corrected}
+                    />
+                </Box>
+                <Box sx={{ flex: 1, height: '100%' }}>
+                    <Metric
+                        color={COLORS.uncorrectedGap}
+                        label="Uncorrected Gaps"
+                        value={`${uncorrectedGapCount} (${uncorrectedPercentage}%)`}
+                        description="Sections that may need manual review"
+                        details={[
+                            { label: 'Words Uncorrected', value: uncorrectedWordCount },
+                            { label: 'Number of Gaps', value: uncorrectedGaps.length }
+                        ]}
+                        onClick={onMetricClick?.uncorrected}
+                    />
+                </Box>
+            </Box>
+        </Box>
+    )
+} 

lyrics_transcriber/frontend/src/components/DurationTimelineView.tsx

@@ -0,0 +1,257 @@
+import { Box, Typography, styled } from '@mui/material'
+import { LyricsSegment, WordCorrection, AnchorSequence, GapSequence } from '../types'
+import { COLORS } from './shared/constants'
+import WarningIcon from '@mui/icons-material/Warning'
+
+interface DurationTimelineViewProps {
+    segments: LyricsSegment[]
+    corrections: WordCorrection[]
+    anchors: AnchorSequence[]
+    gaps: GapSequence[]
+    onWordClick?: (wordId: string) => void
+}
+
+const TimelineContainer = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+    padding: '8px',
+    overflowX: 'auto',
+    minWidth: '100%'
+})
+
+const SegmentTimeline = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    minWidth: '100%'
+})
+
+const TimelineRuler = styled(Box)({
+    position: 'relative',
+    height: '20px',
+    borderBottom: '1px solid #ccc',
+    marginBottom: '4px'
+})
+
+const TimelineMark = styled(Box)({
+    position: 'absolute',
+    width: '1px',
+    height: '8px',
+    backgroundColor: '#999',
+    bottom: 0
+})
+
+const TimelineLabel = styled(Typography)({
+    position: 'absolute',
+    fontSize: '0.65rem',
+    color: '#666',
+    bottom: '10px',
+    transform: 'translateX(-50%)',
+    whiteSpace: 'nowrap'
+})
+
+const WordsBar = styled(Box)({
+    position: 'relative',
+    height: '60px', // Increased from 48px for better readability
+    display: 'flex',
+    alignItems: 'stretch',
+    minWidth: '100%',
+    touchAction: 'pan-y', // Better mobile scrolling
+    backgroundColor: '#f5f5f5',
+    borderRadius: '4px',
+    marginBottom: '8px'
+})
+
+const WordBar = styled(Box, {
+    shouldForwardProp: (prop) => !['isLong', 'isCorrected', 'isGap', 'isAnchor'].includes(prop as string)
+})<{ isLong?: boolean; isCorrected?: boolean; isGap?: boolean; isAnchor?: boolean }>(
+    ({ isLong, isCorrected, isGap, isAnchor }) => ({
+        position: 'absolute',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '2px 4px',
+        borderRight: '1px solid rgba(255,255,255,0.3)',
+        fontSize: '0.75rem',
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+        backgroundColor: isAnchor 
+            ? COLORS.anchor
+            : isCorrected
+                ? COLORS.corrected
+                : isGap
+                    ? COLORS.uncorrectedGap
+                    : '#e0e0e0',
+        border: isLong ? '2px solid #f44336' : 'none',
+        boxShadow: isLong ? '0 0 4px rgba(244, 67, 54, 0.5)' : 'none',
+        '&:hover': {
+            opacity: 0.8,
+            transform: 'scale(1.02)',
+            zIndex: 10
+        },
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        minWidth: '20px' // Ensure very short words are still tappable
+    })
+)
+
+const OriginalWordLabel = styled(Typography)({
+    fontSize: '0.65rem',
+    color: '#888',
+    lineHeight: 1.1,
+    marginBottom: '3px',
+    textDecoration: 'line-through',
+    opacity: 0.85,
+    fontWeight: 500,
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    padding: '1px 3px',
+    borderRadius: '2px'
+})
+
+const LongWordWarning = styled(WarningIcon)({
+    position: 'absolute',
+    top: '-2px',
+    right: '-2px',
+    fontSize: '16px',
+    color: '#f44336'
+})
+
+export default function DurationTimelineView({
+    segments,
+    corrections,
+    anchors,
+    gaps,
+    onWordClick
+}: DurationTimelineViewProps) {
+    
+    const timeToPosition = (time: number, startTime: number, endTime: number): number => {
+        const duration = endTime - startTime
+        if (duration === 0) return 0
+        const position = ((time - startTime) / duration) * 100
+        return Math.max(0, Math.min(100, position))
+    }
+
+    const generateTimelineMarks = (startTime: number, endTime: number) => {
+        const marks = []
+        const startSecond = Math.floor(startTime)
+        const endSecond = Math.ceil(endTime)
+
+        // Generate marks roughly every 2 seconds for readability
+        for (let time = startSecond; time <= endSecond; time += 2) {
+            if (time >= startTime && time <= endTime) {
+                const position = timeToPosition(time, startTime, endTime)
+                marks.push(
+                    <Box key={time}>
+                        <TimelineMark sx={{ left: `${position}%` }} />
+                        <TimelineLabel sx={{ left: `${position}%` }}>
+                            {time}s
+                        </TimelineLabel>
+                    </Box>
+                )
+            }
+        }
+        return marks
+    }
+
+    return (
+        <TimelineContainer>
+            {segments.map((segment) => {
+                // Calculate segment time range
+                const segmentWords = segment.words.filter(w => w.start_time !== null && w.end_time !== null)
+                if (segmentWords.length === 0) return null
+
+                const startTime = Math.min(...segmentWords.map(w => w.start_time!))
+                const endTime = Math.max(...segmentWords.map(w => w.end_time!))
+
+                return (
+                    <SegmentTimeline key={segment.id}>
+                        <TimelineRuler>
+                            {generateTimelineMarks(startTime, endTime)}
+                        </TimelineRuler>
+                        <WordsBar>
+                            {segment.words.map((word, wordIndex) => {
+                                if (word.start_time === null || word.end_time === null) return null
+
+                                const leftPosition = timeToPosition(word.start_time, startTime, endTime)
+                                const rightPosition = timeToPosition(word.end_time, startTime, endTime)
+                                const width = rightPosition - leftPosition
+                                const duration = word.end_time - word.start_time
+                                const isLong = duration > 2.0
+
+                                // Check if this word is corrected
+                                const correction = corrections.find(c =>
+                                    c.corrected_word_id === word.id || c.word_id === word.id
+                                )
+
+                                // Check if anchor
+                                const isAnchor = anchors.some(a =>
+                                    a.transcribed_word_ids.includes(word.id)
+                                )
+
+                                // Check if uncorrected gap
+                                const isGap = gaps.some(g =>
+                                    g.transcribed_word_ids.includes(word.id)
+                                ) && !correction
+
+                                return (
+                                    <WordBar
+                                        key={`${segment.id}-${wordIndex}`}
+                                        sx={{
+                                            left: `${leftPosition}%`,
+                                            width: `${width}%`
+                                        }}
+                                        isLong={isLong}
+                                        isCorrected={!!correction}
+                                        isGap={isGap}
+                                        isAnchor={isAnchor}
+                                        onClick={() => onWordClick?.(word.id)}
+                                    >
+                                        {isLong && <LongWordWarning />}
+                                        {correction && (
+                                            <OriginalWordLabel>
+                                                {correction.original_word}
+                                            </OriginalWordLabel>
+                                        )}
+                                        <Typography
+                                            sx={{
+                                                fontSize: correction ? '0.85rem' : '0.75rem',
+                                                fontWeight: correction ? 700 : 500,
+                                                lineHeight: 1.2,
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                                width: '100%',
+                                                textAlign: 'center',
+                                                color: correction ? '#1b5e20' : 'inherit'
+                                            }}
+                                        >
+                                            {word.text}
+                                        </Typography>
+                                        {duration > 0.1 && (
+                                            <Typography
+                                                sx={{
+                                                    fontSize: '0.6rem',
+                                                    color: 'rgba(0,0,0,0.6)',
+                                                    lineHeight: 1,
+                                                    marginTop: '3px',
+                                                    fontWeight: 600
+                                                }}
+                                            >
+                                                {duration.toFixed(1)}s
+                                            </Typography>
+                                        )}
+                                    </WordBar>
+                                )
+                            })}
+                        </WordsBar>
+                    </SegmentTimeline>
+                )
+            })}
+        </TimelineContainer>
+    )
+}
+