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

lyrics_transcriber/frontend/src/components/CorrectedWordWithActions.tsx

@@ -1,175 +0,0 @@
-import { Box, IconButton, Tooltip, useMediaQuery, useTheme } from '@mui/material'
-import UndoIcon from '@mui/icons-material/Undo'
-import EditIcon from '@mui/icons-material/Edit'
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
-import { COLORS } from './shared/constants'
-import { styled } from '@mui/material/styles'
-
-interface CorrectionInfo {
-    originalWord: string
-    handler: string
-    confidence: number
-    source: string
-    reason?: string
-}
-
-interface CorrectedWordWithActionsProps {
-    word: string
-    originalWord: string
-    correction: CorrectionInfo
-    onRevert: () => void
-    onEdit: () => void
-    onAccept: () => void
-    onClick?: () => void
-    backgroundColor?: string
-    shouldFlash?: boolean
-    showActions?: boolean  // Controls whether inline action buttons are visible
-}
-
-const WordContainer = styled(Box, {
-    shouldForwardProp: (prop) => !['shouldFlash'].includes(prop as string)
-})<{ shouldFlash?: boolean }>(({ shouldFlash }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: '2px',
-    padding: '1px 3px',
-    borderRadius: '2px',
-    cursor: 'pointer',
-    position: 'relative',
-    backgroundColor: COLORS.corrected,
-    animation: shouldFlash ? 'flash 1s ease-in-out infinite' : 'none',
-    '@keyframes flash': {
-        '0%, 100%': { opacity: 1 },
-        '50%': { opacity: 0.5 }
-    },
-    '&:hover': {
-        backgroundColor: 'rgba(34, 197, 94, 0.35)' // green tint hover - works for both modes
-    }
-}))
-
-const OriginalWordLabel = styled(Box)(({ theme }) => ({
-    position: 'absolute',
-    top: '-14px',
-    left: '0',
-    fontSize: '0.6rem',
-    color: theme.palette.text.secondary, // Theme-aware text color
-    textDecoration: 'line-through',
-    opacity: 0.7,
-    whiteSpace: 'nowrap',
-    pointerEvents: 'none'
-}))
-
-const ActionsContainer = styled(Box)({
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: '1px',
-    marginLeft: '2px'
-})
-
-const ActionButton = styled(IconButton)(({ theme }) => ({
-    padding: '2px',
-    minWidth: '20px',
-    minHeight: '20px',
-    width: '20px',
-    height: '20px',
-    backgroundColor: theme.palette.mode === 'dark'
-        ? 'rgba(30, 41, 59, 0.9)'   // slate-800 with opacity for dark mode
-        : 'rgba(241, 245, 249, 0.9)', // slate-100 for light mode
-    border: `1px solid ${theme.palette.divider}`,
-    '&:hover': {
-        backgroundColor: theme.palette.mode === 'dark'
-            ? 'rgba(51, 65, 85, 1)'   // slate-700 for dark mode
-            : 'rgba(226, 232, 240, 1)', // slate-200 for light mode
-        transform: 'scale(1.1)'
-    },
-    '& .MuiSvgIcon-root': {
-        fontSize: '0.875rem'
-    },
-    // Ensure minimum touch target on mobile
-    [theme.breakpoints.down('sm')]: {
-        minWidth: '28px',
-        minHeight: '28px',
-        width: '28px',
-        height: '28px',
-        padding: '4px'
-    }
-}))
-
-export default function CorrectedWordWithActions({
-    word,
-    originalWord,
-    onRevert,
-    onEdit,
-    onAccept,
-    onClick,
-    backgroundColor,
-    shouldFlash,
-    showActions = true
-}: CorrectedWordWithActionsProps) {
-    const theme = useTheme()
-    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-
-    const handleAction = (e: React.MouseEvent, action: () => void) => {
-        e.stopPropagation()
-        action()
-    }
-
-    return (
-        <WordContainer
-            shouldFlash={shouldFlash}
-            sx={{ backgroundColor: backgroundColor || COLORS.corrected }}
-            onClick={onClick}
-        >
-            <OriginalWordLabel>{originalWord}</OriginalWordLabel>
-
-            <Box
-                component="span"
-                sx={{
-                    fontSize: '0.85rem',
-                    lineHeight: 1.2,
-                    fontWeight: 600
-                }}
-            >
-                {word}
-            </Box>
-
-            {showActions && (
-                <ActionsContainer>
-                    <Tooltip title="Revert to original" placement="top" arrow>
-                        <ActionButton
-                            size="small"
-                            onClick={(e) => handleAction(e, onRevert)}
-                            aria-label="revert correction"
-                        >
-                            <UndoIcon />
-                        </ActionButton>
-                    </Tooltip>
-
-                    <Tooltip title="Edit correction" placement="top" arrow>
-                        <ActionButton
-                            size="small"
-                            onClick={(e) => handleAction(e, onEdit)}
-                            aria-label="edit correction"
-                        >
-                            <EditIcon />
-                        </ActionButton>
-                    </Tooltip>
-
-                    {!isMobile && (
-                        <Tooltip title="Accept correction" placement="top" arrow>
-                            <ActionButton
-                                size="small"
-                                onClick={(e) => handleAction(e, onAccept)}
-                                aria-label="accept correction"
-                                sx={{ color: 'success.main' }}
-                            >
-                                <CheckCircleOutlineIcon />
-                            </ActionButton>
-                        </Tooltip>
-                    )}
-                </ActionsContainer>
-            )}
-        </WordContainer>
-    )
-}
-

lyrics_transcriber/frontend/src/components/CorrectionAnnotationModal.tsx

@@ -1,359 +0,0 @@
-import { useState, useEffect } from 'react'
-import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Button,
-    FormControl,
-    InputLabel,
-    Select,
-    MenuItem,
-    TextField,
-    Slider,
-    Typography,
-    Box,
-    Paper,
-    Chip,
-    Alert,
-    SelectChangeEvent
-} from '@mui/material'
-import { CorrectionAnnotation, CorrectionAnnotationType, CorrectionAction } from '../types'
-
-interface CorrectionAnnotationModalProps {
-    open: boolean
-    onClose: () => void
-    onSave: (annotation: Omit<CorrectionAnnotation, 'annotation_id' | 'timestamp'>) => void
-    onSkip: () => void
-    // Context about the correction being made
-    originalText: string
-    correctedText: string
-    wordIdsAffected: string[]
-    // Optional: What the AI suggested
-    agenticProposal?: {
-        action: string
-        replacement_text?: string
-        confidence: number
-        reason: string
-        gap_category?: string
-    }
-    // Reference lyrics that were consulted
-    referenceSources: string[]
-    // Song metadata
-    audioHash: string
-    artist: string
-    title: string
-    sessionId: string
-    gapId?: string
-}
-
-const ANNOTATION_TYPES: { value: CorrectionAnnotationType; label: string; description: string }[] = [
-    { 
-        value: 'SOUND_ALIKE' as CorrectionAnnotationType, 
-        label: 'Sound-Alike Error', 
-        description: 'Homophones or similar-sounding words (e.g., "out" vs "now")' 
-    },
-    { 
-        value: 'BACKGROUND_VOCALS' as CorrectionAnnotationType, 
-        label: 'Background Vocals', 
-        description: 'Backing vocals that should be removed from karaoke' 
-    },
-    { 
-        value: 'EXTRA_WORDS' as CorrectionAnnotationType, 
-        label: 'Extra Filler Words', 
-        description: 'Transcription added words like "And", "But", "Well"' 
-    },
-    { 
-        value: 'PUNCTUATION_ONLY' as CorrectionAnnotationType, 
-        label: 'Punctuation/Style Only', 
-        description: 'Only punctuation or capitalization differences' 
-    },
-    { 
-        value: 'REPEATED_SECTION' as CorrectionAnnotationType, 
-        label: 'Repeated Section', 
-        description: 'Chorus or verse repetition not in condensed references' 
-    },
-    { 
-        value: 'COMPLEX_MULTI_ERROR' as CorrectionAnnotationType, 
-        label: 'Complex Multi-Error', 
-        description: 'Multiple different error types in one section' 
-    },
-    { 
-        value: 'AMBIGUOUS' as CorrectionAnnotationType, 
-        label: 'Ambiguous', 
-        description: 'Unclear without listening to audio' 
-    },
-    { 
-        value: 'NO_ERROR' as CorrectionAnnotationType, 
-        label: 'No Error', 
-        description: 'Transcription matches at least one reference source' 
-    },
-    { 
-        value: 'MANUAL_EDIT' as CorrectionAnnotationType, 
-        label: 'Manual Edit', 
-        description: 'Human-initiated correction not from detected gap' 
-    }
-]
-
-const CONFIDENCE_LABELS: { [key: number]: string } = {
-    1: '1 - Very Uncertain',
-    2: '2 - Somewhat Uncertain',
-    3: '3 - Neutral',
-    4: '4 - Fairly Confident',
-    5: '5 - Very Confident'
-}
-
-export default function CorrectionAnnotationModal({
-    open,
-    onClose,
-    onSave,
-    onSkip,
-    originalText,
-    correctedText,
-    wordIdsAffected,
-    agenticProposal,
-    referenceSources,
-    audioHash,
-    artist,
-    title,
-    sessionId,
-    gapId
-}: CorrectionAnnotationModalProps) {
-    const [annotationType, setAnnotationType] = useState<CorrectionAnnotationType>('MANUAL_EDIT' as CorrectionAnnotationType)
-    const [actionTaken, setActionTaken] = useState<CorrectionAction>('REPLACE' as CorrectionAction)
-    const [confidence, setConfidence] = useState<number>(3)
-    const [reasoning, setReasoning] = useState<string>('')
-    const [agenticAgreed, setAgenticAgreed] = useState<boolean>(false)
-    const [error, setError] = useState<string>('')
-
-    // Pre-fill if we have an agentic proposal
-    useEffect(() => {
-        if (agenticProposal && agenticProposal.gap_category) {
-            setAnnotationType(agenticProposal.gap_category as CorrectionAnnotationType)
-            // Check if human correction matches AI suggestion
-            const agreed = agenticProposal.replacement_text 
-                ? correctedText.toLowerCase().includes(agenticProposal.replacement_text.toLowerCase())
-                : false
-            setAgenticAgreed(agreed)
-        }
-    }, [agenticProposal, correctedText])
-
-    // Determine action type based on correction
-    useEffect(() => {
-        if (originalText === correctedText) {
-            setActionTaken('NO_ACTION' as CorrectionAction)
-        } else if (correctedText === '') {
-            setActionTaken('DELETE' as CorrectionAction)
-        } else if (originalText === '') {
-            setActionTaken('INSERT' as CorrectionAction)
-        } else {
-            setActionTaken('REPLACE' as CorrectionAction)
-        }
-    }, [originalText, correctedText])
-
-    const handleSave = () => {
-        // Validate
-        if (reasoning.length < 10) {
-            setError('Reasoning must be at least 10 characters')
-            return
-        }
-
-        const annotation: Omit<CorrectionAnnotation, 'annotation_id' | 'timestamp'> = {
-            audio_hash: audioHash,
-            gap_id: gapId || null,
-            annotation_type: annotationType,
-            action_taken: actionTaken,
-            original_text: originalText,
-            corrected_text: correctedText,
-            confidence,
-            reasoning,
-            word_ids_affected: wordIdsAffected,
-            agentic_proposal: agenticProposal || null,
-            agentic_category: agenticProposal?.gap_category || null,
-            agentic_agreed: agenticAgreed,
-            reference_sources_consulted: referenceSources,
-            artist,
-            title,
-            session_id: sessionId
-        }
-
-        onSave(annotation)
-        handleClose()
-    }
-
-    const handleClose = () => {
-        // Reset form
-        setAnnotationType('MANUAL_EDIT' as CorrectionAnnotationType)
-        setConfidence(3)
-        setReasoning('')
-        setError('')
-        setAgenticAgreed(false)
-        onClose()
-    }
-
-    const handleSkipAndClose = () => {
-        handleClose()
-        onSkip()
-    }
-
-    return (
-        <Dialog 
-            open={open} 
-            onClose={handleClose}
-            maxWidth="md"
-            fullWidth
-        >
-            <DialogTitle>
-                <Typography variant="h6">Annotate Your Correction</Typography>
-                <Typography variant="caption" color="text.secondary">
-                    Help improve the AI by explaining your correction
-                </Typography>
-            </DialogTitle>
-
-            <DialogContent dividers>
-                {/* Show what changed */}
-                <Paper elevation={0} sx={{ p: 2, mb: 3, bgcolor: 'grey.50' }}>
-                    <Typography variant="subtitle2" gutterBottom>
-                        Your Correction:
-                    </Typography>
-                    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-                        <Box sx={{ flex: 1 }}>
-                            <Typography variant="caption" color="error">Original:</Typography>
-                            <Typography 
-                                sx={{ 
-                                    textDecoration: 'line-through', 
-                                    color: 'error.main',
-                                    fontFamily: 'monospace'
-                                }}
-                            >
-                                {originalText || '(empty)'}
-                            </Typography>
-                        </Box>
-                        <Typography variant="h6">→</Typography>
-                        <Box sx={{ flex: 1 }}>
-                            <Typography variant="caption" color="success.main">Corrected:</Typography>
-                            <Typography 
-                                sx={{ 
-                                    color: 'success.main',
-                                    fontWeight: 'bold',
-                                    fontFamily: 'monospace'
-                                }}
-                            >
-                                {correctedText || '(empty)'}
-                            </Typography>
-                        </Box>
-                    </Box>
-                </Paper>
-
-                {/* Show AI suggestion if available */}
-                {agenticProposal && (
-                    <Alert 
-                        severity={agenticAgreed ? "success" : "info"} 
-                        sx={{ mb: 3 }}
-                    >
-                        <Typography variant="subtitle2" gutterBottom>
-                            AI Suggestion:
-                        </Typography>
-                        <Typography variant="body2">
-                            Category: <strong>{agenticProposal.gap_category}</strong>
-                        </Typography>
-                        <Typography variant="body2">
-                            Action: <strong>{agenticProposal.action}</strong>
-                            {agenticProposal.replacement_text && ` → "${agenticProposal.replacement_text}"`}
-                        </Typography>
-                        <Typography variant="body2">
-                            Reason: {agenticProposal.reason}
-                        </Typography>
-                        <Typography variant="body2" sx={{ mt: 1 }}>
-                            {agenticAgreed 
-                                ? '✓ Your correction matches the AI suggestion' 
-                                : '✗ Your correction differs from the AI suggestion'}
-                        </Typography>
-                    </Alert>
-                )}
-
-                {/* Reference sources */}
-                {referenceSources.length > 0 && (
-                    <Box sx={{ mb: 3 }}>
-                        <Typography variant="subtitle2" gutterBottom>
-                            Reference Sources Consulted:
-                        </Typography>
-                        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-                            {referenceSources.map(source => (
-                                <Chip key={source} label={source} size="small" />
-                            ))}
-                        </Box>
-                    </Box>
-                )}
-
-                {/* Annotation type */}
-                <FormControl fullWidth sx={{ mb: 3 }}>
-                    <InputLabel>Correction Type *</InputLabel>
-                    <Select
-                        value={annotationType}
-                        label="Correction Type *"
-                        onChange={(e: SelectChangeEvent) => setAnnotationType(e.target.value as CorrectionAnnotationType)}
-                    >
-                        {ANNOTATION_TYPES.map(type => (
-                            <MenuItem key={type.value} value={type.value}>
-                                <Box>
-                                    <Typography variant="body1">{type.label}</Typography>
-                                    <Typography variant="caption" color="text.secondary">
-                                        {type.description}
-                                    </Typography>
-                                </Box>
-                            </MenuItem>
-                        ))}
-                    </Select>
-                </FormControl>
-
-                {/* Confidence slider */}
-                <Box sx={{ mb: 3 }}>
-                    <Typography variant="subtitle2" gutterBottom>
-                        Confidence in Your Correction *
-                    </Typography>
-                    <Slider
-                        value={confidence}
-                        onChange={(_, newValue) => setConfidence(newValue as number)}
-                        min={1}
-                        max={5}
-                        step={1}
-                        marks
-                        valueLabelDisplay="auto"
-                        valueLabelFormat={(value) => CONFIDENCE_LABELS[value]}
-                    />
-                    <Typography variant="caption" color="text.secondary">
-                        {CONFIDENCE_LABELS[confidence]}
-                    </Typography>
-                </Box>
-
-                {/* Reasoning text area */}
-                <TextField
-                    fullWidth
-                    multiline
-                    rows={4}
-                    label="Reasoning *"
-                    placeholder="Explain why this correction is needed (minimum 10 characters)..."
-                    value={reasoning}
-                    onChange={(e) => {
-                        setReasoning(e.target.value)
-                        setError('')
-                    }}
-                    error={!!error}
-                    helperText={error || `${reasoning.length}/10 minimum characters`}
-                    required
-                />
-            </DialogContent>
-
-            <DialogActions>
-                <Button onClick={handleSkipAndClose} color="inherit">
-                    Skip
-                </Button>
-                <Button onClick={handleSave} variant="contained" color="primary">
-                    Save & Continue
-                </Button>
-            </DialogActions>
-        </Dialog>
-    )
-}
-