karaoke-gen 0.75.54__py3-none-any.whl

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -0,0 +1,256 @@
+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
+}: 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: 'rgba(0, 0, 0, 0.03)'
+                            }
+                        }}>
+                            <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}
+                                />
+                            </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

@@ -0,0 +1,187 @@
+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: 'rgba(0, 0, 0, 0.6)',
+    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: '20px',
+                my: -0.5,
+                width: '50%',
+                backgroundColor: '#fff',
+                ...sx
+            }}
+        >
+            <Box sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                backgroundColor: '#fff',
+                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>
+    )
+}