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

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -1,266 +0,0 @@
-import { useState } from 'react'
-import { Paper, Typography, Box, IconButton, ToggleButton, ToggleButtonGroup } from '@mui/material'
-import { TranscriptionViewProps } from './shared/types'
-import { HighlightedText } from './shared/components/HighlightedText'
-import { styled } from '@mui/material/styles'
-import SegmentDetailsModal from './SegmentDetailsModal'
-import { TranscriptionWordPosition } from './shared/types'
-import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
-import TextFieldsIcon from '@mui/icons-material/TextFields'
-import TimelineIcon from '@mui/icons-material/Timeline'
-import { deleteSegment } from './shared/utils/segmentOperations'
-import DurationTimelineView from './DurationTimelineView'
-
-const SegmentIndex = styled(Typography)(({ theme }) => ({
-    color: theme.palette.text.secondary,
-    width: '1.8em',
-    minWidth: '1.8em',
-    textAlign: 'right',
-    marginRight: theme.spacing(0.8),
-    userSelect: 'none',
-    fontFamily: 'monospace',
-    cursor: 'pointer',
-    paddingTop: '1px',
-    fontSize: '0.8rem',
-    lineHeight: 1.2,
-    '&:hover': {
-        textDecoration: 'underline',
-    },
-}))
-
-const TextContainer = styled(Box)({
-    flex: 1,
-    minWidth: 0,
-})
-
-const SegmentControls = styled(Box)({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '2px',
-    minWidth: '2.5em',
-    paddingTop: '1px',
-    paddingRight: '4px'
-})
-
-export default function TranscriptionView({
-    data,
-    onElementClick,
-    onWordClick,
-    flashingType,
-    flashingHandler,
-    highlightInfo,
-    mode,
-    onPlaySegment,
-    currentTime = 0,
-    anchors = [],
-    onDataChange,
-    reviewMode = false,
-    onRevertCorrection,
-    onEditCorrection,
-    onAcceptCorrection,
-    onShowCorrectionDetail
-}: TranscriptionViewProps) {
-    const [selectedSegmentIndex, setSelectedSegmentIndex] = useState<number | null>(null)
-    const [viewMode, setViewMode] = useState<'text' | 'duration'>('text')
-
-    const handleDeleteSegment = (segmentIndex: number) => {
-        if (onDataChange) {
-            const updatedData = deleteSegment(data, segmentIndex)
-            onDataChange(updatedData)
-        }
-    }
-
-    return (
-        <Paper sx={{ p: 0.8 }}>
-            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
-                <Typography variant="h6" sx={{ fontSize: '0.9rem', mb: 0 }}>
-                    Corrected Transcription
-                </Typography>
-                <ToggleButtonGroup
-                    value={viewMode}
-                    exclusive
-                    onChange={(_, newMode) => newMode && setViewMode(newMode)}
-                    size="small"
-                    aria-label="view mode"
-                    sx={{
-                        '& .MuiToggleButton-root': {
-                            px: 1.5,
-                            py: 0.5,
-                            fontSize: '0.75rem'
-                        },
-                        '& .MuiToggleButton-root.Mui-selected': {
-                            backgroundColor: 'primary.main',
-                            color: 'white',
-                            '&:hover': {
-                                backgroundColor: 'primary.dark'
-                            }
-                        }
-                    }}
-                >
-                    <ToggleButton value="text" aria-label="text view">
-                        <TextFieldsIcon fontSize="small" sx={{ mr: 0.5 }} />
-                        <span>Text</span>
-                    </ToggleButton>
-                    <ToggleButton value="duration" aria-label="duration view">
-                        <TimelineIcon fontSize="small" sx={{ mr: 0.5 }} />
-                        <span>Timeline</span>
-                    </ToggleButton>
-                </ToggleButtonGroup>
-            </Box>
-            {viewMode === 'duration' ? (
-                <DurationTimelineView
-                    segments={data.corrected_segments}
-                    corrections={data.corrections || []}
-                    anchors={data.anchor_sequences || []}
-                    gaps={data.gap_sequences || []}
-                    onWordClick={(wordId) => {
-                        // Find word in segments
-                        for (const segment of data.corrected_segments) {
-                            const word = segment.words.find(w => w.id === wordId)
-                            if (word) {
-                                onWordClick?.({
-                                    word_id: wordId,
-                                    type: 'other',
-                                    anchor: undefined,
-                                    gap: undefined
-                                })
-                                break
-                            }
-                        }
-                    }}
-                />
-            ) : (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.2 }}>
-                {data.corrected_segments.map((segment, segmentIndex) => {
-                    const segmentWords: TranscriptionWordPosition[] = segment.words.map(word => {
-                        // Find if this word is part of a correction
-                        const correction = data.corrections?.find(c =>
-                            c.corrected_word_id === word.id ||
-                            c.word_id === word.id
-                        )
-
-                        // Find if this word is part of an anchor sequence
-                        const anchor = data.anchor_sequences?.find(a =>
-                            a.transcribed_word_ids.includes(word.id)
-                        )
-
-                        // If not in anchor, check if it belongs to a gap sequence
-                        const gap = data.gap_sequences?.find(g => {
-                            // Check transcribed words
-                            const inTranscribed = g.transcribed_word_ids.includes(word.id)
-
-                            // Check reference words
-                            const inReference = Object.values(g.reference_word_ids).some(ids =>
-                                ids.includes(word.id)
-                            )
-
-                            // Check if this word is a corrected version
-                            const isCorrection = data.corrections.some(c =>
-                                (c.corrected_word_id === word.id || c.word_id === word.id) &&
-                                g.transcribed_word_ids.includes(c.word_id)
-                            )
-
-                            return inTranscribed || inReference || isCorrection
-                        })
-
-                        return {
-                            word: {
-                                id: word.id,
-                                text: word.text,
-                                start_time: word.start_time ?? undefined,
-                                end_time: word.end_time ?? undefined
-                            },
-                            type: anchor ? 'anchor' : gap ? 'gap' : 'other',
-                            sequence: anchor || gap,
-                            sequencePosition: anchor?.transcription_position ?? gap?.transcription_position ?? undefined,
-                            isInRange: true,
-                            isCorrected: Boolean(correction),
-                            gap: gap
-                        }
-                    })
-
-                    return (
-                        <Box key={segment.id} sx={{
-                            display: 'flex',
-                            alignItems: 'flex-start',
-                            width: '100%',
-                            mb: 0,
-                            '&:hover': {
-                                backgroundColor: (theme) => theme.palette.action.hover
-                            }
-                        }}>
-                            <SegmentControls>
-                                <SegmentIndex
-                                    variant="body2"
-                                    onClick={() => setSelectedSegmentIndex(segmentIndex)}
-                                >
-                                    {segmentIndex}
-                                </SegmentIndex>
-                                <IconButton
-                                    size="small"
-                                    onClick={() => handleDeleteSegment(segmentIndex)}
-                                    sx={{
-                                        padding: '1px',
-                                        height: '18px',
-                                        width: '18px',
-                                        minHeight: '18px',
-                                        minWidth: '18px'
-                                    }}
-                                    title="Delete segment"
-                                >
-                                    <DeleteOutlineIcon sx={{ fontSize: '0.9rem', color: 'error.main' }} />
-                                </IconButton>
-                                {segment.start_time !== null && (
-                                    <IconButton
-                                        size="small"
-                                        onClick={() => onPlaySegment?.(segment.start_time!)}
-                                        sx={{
-                                            padding: '1px',
-                                            height: '18px',
-                                            width: '18px',
-                                            minHeight: '18px',
-                                            minWidth: '18px'
-                                        }}
-                                        title="Play segment"
-                                    >
-                                        <PlayCircleOutlineIcon sx={{ fontSize: '0.9rem' }} />
-                                    </IconButton>
-                                )}
-                            </SegmentControls>
-                            <TextContainer>
-                                <HighlightedText
-                                    wordPositions={segmentWords}
-                                    anchors={anchors}
-                                    onElementClick={onElementClick}
-                                    onWordClick={onWordClick}
-                                    flashingType={flashingType}
-                                    flashingHandler={flashingHandler}
-                                    highlightInfo={highlightInfo}
-                                    mode={mode}
-                                    preserveSegments={true}
-                                    currentTime={currentTime}
-                                    gaps={data.gap_sequences}
-                                    corrections={data.corrections}
-                                    reviewMode={reviewMode}
-                                    onRevertCorrection={onRevertCorrection}
-                                    onEditCorrection={onEditCorrection}
-                                    onAcceptCorrection={onAcceptCorrection}
-                                    onShowCorrectionDetail={onShowCorrectionDetail}
-                                />
-                            </TextContainer>
-                        </Box>
-                    )
-                })}
-            </Box>
-            )}
-
-            <SegmentDetailsModal
-                open={selectedSegmentIndex !== null}
-                onClose={() => setSelectedSegmentIndex(null)}
-                segment={selectedSegmentIndex !== null ? data.corrected_segments[selectedSegmentIndex] : null}
-                segmentIndex={selectedSegmentIndex}
-            />
-        </Paper>
-    )
-} 

lyrics_transcriber/frontend/src/components/WordDivider.tsx

@@ -1,191 +0,0 @@
-import { Box, Button, Typography } from '@mui/material'
-import AddIcon from '@mui/icons-material/Add'
-import MergeIcon from '@mui/icons-material/CallMerge'
-import CallSplitIcon from '@mui/icons-material/CallSplit'
-import { SxProps, Theme } from '@mui/material/styles'
-
-interface WordDividerProps {
-    onAddWord: () => void
-    onMergeWords?: () => void
-    onAddSegmentBefore?: () => void
-    onAddSegmentAfter?: () => void
-    onSplitSegment?: () => void
-    onMergeSegment?: () => void
-    canMerge?: boolean
-    isFirst?: boolean
-    isLast?: boolean
-    sx?: SxProps<Theme>
-}
-
-const buttonTextStyle = {
-    color: 'text.secondary',
-    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-    fontWeight: 400,
-    fontSize: '0.7rem',
-    lineHeight: '1.4375em',
-    textTransform: 'none'
-}
-
-const buttonBaseStyle = {
-    minHeight: 0,
-    padding: '2px 8px',
-    '& .MuiButton-startIcon': {
-        marginRight: 0.5
-    },
-    '& .MuiSvgIcon-root': {
-        fontSize: '1.2rem'
-    }
-}
-
-export default function WordDivider({
-    onAddWord,
-    onMergeWords,
-    onAddSegmentBefore,
-    onAddSegmentAfter,
-    onSplitSegment,
-    onMergeSegment,
-    canMerge = false,
-    isFirst = false,
-    isLast = false,
-    sx = {}
-}: WordDividerProps) {
-    return (
-        <Box
-            sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: 'auto',
-                minHeight: '20px',
-                my: 0,
-                width: '100%',
-                bgcolor: 'background.paper',
-                overflow: 'hidden',
-                ...sx
-            }}
-        >
-            <Box sx={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1,
-                flexWrap: 'wrap',
-                justifyContent: 'center',
-                bgcolor: 'background.paper',
-                padding: '0 8px',
-                zIndex: 1
-            }}>
-                <Button
-                    onClick={onAddWord}
-                    title="Add Word"
-                    size="small"
-                    startIcon={<AddIcon />}
-                    sx={{
-                        ...buttonBaseStyle,
-                        color: 'primary.main',
-                    }}
-                >
-                    <Typography sx={buttonTextStyle}>
-                        Add Word
-                    </Typography>
-                </Button>
-                {isFirst && onAddSegmentBefore && onMergeSegment && (
-                    <>
-                        <Button
-                            onClick={onAddSegmentBefore}
-                            title="Add Segment"
-                            size="small"
-                            startIcon={<AddIcon sx={{ transform: 'rotate(90deg)' }} />}
-                            sx={{
-                                ...buttonBaseStyle,
-                                color: 'success.main',
-                            }}
-                        >
-                            <Typography sx={buttonTextStyle}>
-                                Add Segment
-                            </Typography>
-                        </Button>
-                        <Button
-                            onClick={onMergeSegment}
-                            title="Merge with Previous Segment"
-                            size="small"
-                            startIcon={<MergeIcon sx={{ transform: 'rotate(90deg)' }} />}
-                            sx={{
-                                ...buttonBaseStyle,
-                                color: 'warning.main',
-                            }}
-                        >
-                            <Typography sx={buttonTextStyle}>
-                                Merge Segment
-                            </Typography>
-                        </Button>
-                    </>
-                )}
-                {onMergeWords && !isLast && (
-                    <Button
-                        onClick={onMergeWords}
-                        title="Merge Words"
-                        size="small"
-                        startIcon={<MergeIcon sx={{ transform: 'rotate(90deg)' }} />}
-                        disabled={!canMerge}
-                        sx={{
-                            ...buttonBaseStyle,
-                            color: 'primary.main',
-                        }}
-                    >
-                        <Typography sx={buttonTextStyle}>
-                            Merge Words
-                        </Typography>
-                    </Button>
-                )}
-                {onSplitSegment && !isLast && (
-                    <Button
-                        onClick={onSplitSegment}
-                        title="Split Segment"
-                        size="small"
-                        startIcon={<CallSplitIcon sx={{ transform: 'rotate(90deg)' }} />}
-                        sx={{
-                            ...buttonBaseStyle,
-                            color: 'warning.main',
-                        }}
-                    >
-                        <Typography sx={buttonTextStyle}>
-                            Split Segment
-                        </Typography>
-                    </Button>
-                )}
-                {isLast && onAddSegmentAfter && onMergeSegment && (
-                    <>
-                        <Button
-                            onClick={onAddSegmentAfter}
-                            title="Add Segment"
-                            size="small"
-                            startIcon={<AddIcon sx={{ transform: 'rotate(90deg)' }} />}
-                            sx={{
-                                ...buttonBaseStyle,
-                                color: 'success.main',
-                            }}
-                        >
-                            <Typography sx={buttonTextStyle}>
-                                Add Segment
-                            </Typography>
-                        </Button>
-                        <Button
-                            onClick={onMergeSegment}
-                            title="Merge with Next Segment"
-                            size="small"
-                            startIcon={<MergeIcon sx={{ transform: 'rotate(90deg)' }} />}
-                            sx={{
-                                ...buttonBaseStyle,
-                                color: 'warning.main',
-                            }}
-                        >
-                            <Typography sx={buttonTextStyle}>
-                                Merge Segment
-                            </Typography>
-                        </Button>
-                    </>
-                )}
-            </Box>
-        </Box>
-    )
-}