karaoke-gen 0.75.54__py3-none-any.whl

lyrics_transcriber/frontend/src/components/ReplaceAllLyricsModal.tsx

@@ -0,0 +1,336 @@
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    IconButton,
+    Box,
+    Button,
+    Typography,
+    TextField
+} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import ContentPasteIcon from '@mui/icons-material/ContentPaste'
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import { LyricsSegment, Word } from '../types'
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { nanoid } from 'nanoid'
+import ModeSelectionModal from './ModeSelectionModal'
+import LyricsSynchronizer from './LyricsSynchronizer'
+
+// Augment window type for audio functions
+declare global {
+    interface Window {
+        getAudioDuration?: () => number;
+        toggleAudioPlayback?: () => void;
+        isAudioPlaying?: boolean;
+    }
+}
+
+type ModalMode = 'selection' | 'replace' | 'resync'
+
+interface ReplaceAllLyricsModalProps {
+    open: boolean
+    onClose: () => void
+    onSave: (newSegments: LyricsSegment[]) => void
+    onPlaySegment?: (startTime: number) => void
+    currentTime?: number
+    setModalSpacebarHandler: (handler: (() => (e: KeyboardEvent) => void) | undefined) => void
+    existingSegments?: LyricsSegment[]  // Current segments for re-sync mode
+}
+
+export default function ReplaceAllLyricsModal({
+    open,
+    onClose,
+    onSave,
+    onPlaySegment,
+    currentTime = 0,
+    setModalSpacebarHandler,
+    existingSegments = []
+}: ReplaceAllLyricsModalProps) {
+    const [mode, setMode] = useState<ModalMode>('selection')
+    const [inputText, setInputText] = useState('')
+    const [newSegments, setNewSegments] = useState<LyricsSegment[]>([])
+
+    // Reset state when modal opens
+    useEffect(() => {
+        if (open) {
+            setMode('selection')
+            setInputText('')
+            setNewSegments([])
+        }
+    }, [open])
+
+    // Parse the input text to get line and word counts
+    const parseInfo = useMemo(() => {
+        if (!inputText.trim()) return { lines: 0, words: 0 }
+        
+        const lines = inputText.trim().split('\n').filter(line => line.trim().length > 0)
+        const totalWords = lines.reduce((count, line) => {
+            return count + line.trim().split(/\s+/).length
+        }, 0)
+        
+        return { lines: lines.length, words: totalWords }
+    }, [inputText])
+
+    // Process the input text into segments and words
+    const processLyrics = useCallback(() => {
+        if (!inputText.trim()) return
+
+        const lines = inputText.trim().split('\n').filter(line => line.trim().length > 0)
+        const segments: LyricsSegment[] = []
+
+        lines.forEach((line) => {
+            const words = line.trim().split(/\s+/).filter(word => word.length > 0)
+            const segmentWords: Word[] = words.map((wordText) => ({
+                id: nanoid(),
+                text: wordText,
+                start_time: null,
+                end_time: null,
+                confidence: 1.0,
+                created_during_correction: true
+            }))
+
+            segments.push({
+                id: nanoid(),
+                text: line.trim(),
+                words: segmentWords,
+                start_time: null,
+                end_time: null
+            })
+        })
+
+        setNewSegments(segments)
+        setMode('resync')  // Go to synchronizer with the new segments
+    }, [inputText])
+
+    // Handle paste from clipboard
+    const handlePasteFromClipboard = useCallback(async () => {
+        try {
+            const text = await navigator.clipboard.readText()
+            setInputText(text)
+        } catch (error) {
+            console.error('Failed to read from clipboard:', error)
+            alert('Failed to read from clipboard. Please paste manually.')
+        }
+    }, [])
+
+    // Handle modal close
+    const handleClose = useCallback(() => {
+        setMode('selection')
+        setInputText('')
+        setNewSegments([])
+        onClose()
+    }, [onClose])
+
+    // Handle save from synchronizer
+    const handleSave = useCallback((segments: LyricsSegment[]) => {
+        onSave(segments)
+        handleClose()
+    }, [onSave, handleClose])
+
+    // Handle mode selection
+    const handleSelectReplace = useCallback(() => {
+        setMode('replace')
+    }, [])
+
+    const handleSelectResync = useCallback(() => {
+        setMode('resync')
+    }, [])
+
+    // Handle back to selection
+    const handleBackToSelection = useCallback(() => {
+        setMode('selection')
+        setInputText('')
+        setNewSegments([])
+    }, [])
+
+    // Determine which segments to use for synchronizer
+    const segmentsForSync = mode === 'resync' && newSegments.length > 0 
+        ? newSegments 
+        : existingSegments
+
+    // Check if we have existing lyrics
+    const hasExistingLyrics = existingSegments.length > 0 && 
+        existingSegments.some(s => s.words.length > 0)
+
+    return (
+        <>
+            {/* Mode Selection Modal */}
+            <ModeSelectionModal
+                open={open && mode === 'selection'}
+                onClose={handleClose}
+                onSelectReplace={handleSelectReplace}
+                onSelectResync={handleSelectResync}
+                hasExistingLyrics={hasExistingLyrics}
+            />
+
+            {/* Replace All Lyrics Modal (Paste Phase) */}
+            <Dialog
+                open={open && mode === 'replace'}
+                onClose={handleClose}
+                maxWidth="md"
+                fullWidth
+                PaperProps={{
+                    sx: {
+                        height: '80vh',
+                        maxHeight: '80vh'
+                    }
+                }}
+            >
+                <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <IconButton onClick={handleBackToSelection} size="small">
+                        <ArrowBackIcon />
+                    </IconButton>
+                    <Box sx={{ flex: 1 }}>
+                        Replace All Lyrics
+                    </Box>
+                    <IconButton onClick={handleClose} sx={{ ml: 'auto' }}>
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+
+                <DialogContent
+                    dividers
+                    sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        flexGrow: 1,
+                        overflow: 'hidden'
+                    }}
+                >
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, height: '100%' }}>
+                        <Typography variant="h6" gutterBottom>
+                            Paste your new lyrics below:
+                        </Typography>
+                        
+                        <Typography variant="body2" color="text.secondary" gutterBottom>
+                            Each line will become a separate segment. Words will be separated by spaces.
+                        </Typography>
+
+                        <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                            <Button
+                                variant="outlined"
+                                onClick={handlePasteFromClipboard}
+                                startIcon={<ContentPasteIcon />}
+                                size="small"
+                            >
+                                Paste from Clipboard
+                            </Button>
+                            <Typography variant="body2" sx={{ 
+                                alignSelf: 'center', 
+                                color: 'text.secondary',
+                                fontWeight: 'medium'
+                            }}>
+                                {parseInfo.lines} lines, {parseInfo.words} words
+                            </Typography>
+                        </Box>
+
+                        <TextField
+                            multiline
+                            rows={15}
+                            value={inputText}
+                            onChange={(e) => setInputText(e.target.value)}
+                            placeholder="Paste your lyrics here...&#10;Each line will become a segment&#10;Words will be separated by spaces"
+                            sx={{ 
+                                flexGrow: 1,
+                                '& .MuiInputBase-root': {
+                                    height: '100%',
+                                    alignItems: 'flex-start'
+                                }
+                            }}
+                        />
+                    </Box>
+                </DialogContent>
+
+                <DialogActions>
+                    <Button onClick={handleClose} color="inherit">
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="contained"
+                        onClick={processLyrics}
+                        disabled={!inputText.trim()}
+                        startIcon={<AutoFixHighIcon />}
+                    >
+                        Continue to Sync
+                    </Button>
+                </DialogActions>
+            </Dialog>
+
+            {/* Synchronizer Modal */}
+            <Dialog
+                open={open && mode === 'resync'}
+                onClose={handleClose}
+                maxWidth={false}
+                fullWidth
+                PaperProps={{
+                    sx: {
+                        height: '90vh',
+                        margin: '5vh 2vw',
+                        maxWidth: 'calc(100vw - 4vw)',
+                        width: 'calc(100vw - 4vw)'
+                    }
+                }}
+            >
+                <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <IconButton onClick={handleBackToSelection} size="small">
+                        <ArrowBackIcon />
+                    </IconButton>
+                    <Box sx={{ flex: 1 }}>
+                        {newSegments.length > 0 ? 'Sync New Lyrics' : 'Re-sync Existing Lyrics'}
+                    </Box>
+                    <IconButton onClick={handleClose} sx={{ ml: 'auto' }}>
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+
+                <DialogContent
+                    dividers
+                    sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        flexGrow: 1,
+                        overflow: 'hidden',
+                        p: 2
+                    }}
+                >
+                    {segmentsForSync.length > 0 ? (
+                        <LyricsSynchronizer
+                            segments={segmentsForSync}
+                            currentTime={currentTime}
+                            onPlaySegment={onPlaySegment}
+                            onSave={handleSave}
+                            onCancel={handleClose}
+                            setModalSpacebarHandler={setModalSpacebarHandler}
+                        />
+                    ) : (
+                        <Box sx={{ 
+                            display: 'flex', 
+                            flexDirection: 'column', 
+                            alignItems: 'center', 
+                            justifyContent: 'center',
+                            height: '100%',
+                            gap: 2
+                        }}>
+                            <Typography variant="h6" color="text.secondary">
+                                No lyrics to sync
+                            </Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                Go back and paste new lyrics, or close this modal.
+                            </Typography>
+                            <Button 
+                                variant="outlined" 
+                                onClick={handleBackToSelection}
+                                startIcon={<ArrowBackIcon />}
+                            >
+                                Back to Selection
+                            </Button>
+                        </Box>
+                    )}
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}

lyrics_transcriber/frontend/src/components/ReviewChangesModal.tsx

@@ -0,0 +1,354 @@
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Box,
+    Typography,
+    Paper
+} from '@mui/material'
+import { CorrectionData } from '../types'
+import { useMemo, useRef, useEffect } from 'react'
+import { ApiClient } from '../api'
+import PreviewVideoSection from './PreviewVideoSection'
+import { CloudUpload, ArrowBack } from '@mui/icons-material'
+
+interface ReviewChangesModalProps {
+    open: boolean
+    onClose: () => void
+    originalData: CorrectionData
+    updatedData: CorrectionData
+    onSubmit: () => void
+    apiClient: ApiClient | null
+    setModalSpacebarHandler: (handler: (() => (e: KeyboardEvent) => void) | undefined) => void
+    timingOffsetMs?: number
+}
+
+interface DiffResult {
+    type: 'added' | 'removed' | 'modified'
+    path: string
+    segmentIndex?: number
+    oldValue?: string
+    newValue?: string
+    wordChanges?: DiffResult[]
+}
+
+// Add interfaces for the word and segment structures
+interface Word {
+    text: string
+    start_time: number | null
+    end_time: number | null
+    id?: string
+}
+
+interface Segment {
+    text: string
+    start_time: number | null
+    end_time: number | null
+    words: Word[]
+    id?: string
+}
+
+const normalizeWordForComparison = (word: Word): Omit<Word, 'id'> => ({
+    text: word.text,
+    start_time: word.start_time ?? 0,  // Default to 0 for comparison
+    end_time: word.end_time ?? 0       // Default to 0 for comparison
+})
+
+const normalizeSegmentForComparison = (segment: Segment): Omit<Segment, 'id'> => ({
+    text: segment.text,
+    start_time: segment.start_time ?? 0,  // Default to 0 for comparison
+    end_time: segment.end_time ?? 0,      // Default to 0 for comparison
+    words: segment.words.map(normalizeWordForComparison)
+})
+
+export default function ReviewChangesModal({
+    open,
+    onClose,
+    originalData,
+    updatedData,
+    onSubmit,
+    apiClient,
+    setModalSpacebarHandler,
+    timingOffsetMs = 0
+}: ReviewChangesModalProps) {
+    // Add ref to video element
+    const videoRef = useRef<HTMLVideoElement>(null)
+
+    // Stop audio playback when modal opens
+    useEffect(() => {
+        if (open && window.isAudioPlaying && window.toggleAudioPlayback) {
+            window.toggleAudioPlayback()
+        }
+    }, [open])
+
+    // Add effect to handle spacebar
+    useEffect(() => {
+        if (open) {
+            setModalSpacebarHandler(() => (e: KeyboardEvent) => {
+                if (e.type === 'keydown') {
+                    e.preventDefault()
+                    e.stopPropagation()
+
+                    if (videoRef.current) {
+                        if (videoRef.current.paused) {
+                            videoRef.current.play()
+                        } else {
+                            videoRef.current.pause()
+                        }
+                    }
+                }
+            })
+        } else {
+            setModalSpacebarHandler(undefined)
+        }
+
+        return () => {
+            setModalSpacebarHandler(undefined)
+        }
+    }, [open, setModalSpacebarHandler])
+
+    // Debug logging for timing offset
+    useEffect(() => {
+        if (open) {
+            console.log(`[TIMING] ReviewChangesModal opened - timingOffsetMs: ${timingOffsetMs}ms`);
+        }
+    }, [open, timingOffsetMs]);
+
+    const differences = useMemo(() => {
+        const diffs: DiffResult[] = []
+
+        originalData.corrected_segments.forEach((originalSegment, index) => {
+            const updatedSegment = updatedData.corrected_segments[index]
+            if (!updatedSegment) {
+                diffs.push({
+                    type: 'removed',
+                    path: `Segment ${index}`,
+                    segmentIndex: index,
+                    oldValue: originalSegment.text
+                })
+                return
+            }
+
+            const normalizedOriginal = normalizeSegmentForComparison(originalSegment)
+            const normalizedUpdated = normalizeSegmentForComparison(updatedSegment)
+            const wordChanges: DiffResult[] = []
+
+            // Compare word-level changes
+            normalizedOriginal.words.forEach((word, wordIndex) => {
+                const updatedWord = normalizedUpdated.words[wordIndex]
+                if (!updatedWord) {
+                    wordChanges.push({
+                        type: 'removed',
+                        path: `Word ${wordIndex}`,
+                        oldValue: `"${word.text}" (${word.start_time?.toFixed(4) ?? 'N/A'} - ${word.end_time?.toFixed(4) ?? 'N/A'})`
+                    })
+                    return
+                }
+
+                if (word.text !== updatedWord.text ||
+                    Math.abs((word.start_time ?? 0) - (updatedWord.start_time ?? 0)) > 0.0001 ||
+                    Math.abs((word.end_time ?? 0) - (updatedWord.end_time ?? 0)) > 0.0001) {
+                    wordChanges.push({
+                        type: 'modified',
+                        path: `Word ${wordIndex}`,
+                        oldValue: `"${word.text}" (${word.start_time?.toFixed(4) ?? 'N/A'} - ${word.end_time?.toFixed(4) ?? 'N/A'})`,
+                        newValue: `"${updatedWord.text}" (${updatedWord.start_time?.toFixed(4) ?? 'N/A'} - ${updatedWord.end_time?.toFixed(4) ?? 'N/A'})`
+                    })
+                }
+            })
+
+            // Check for added words
+            if (normalizedUpdated.words.length > normalizedOriginal.words.length) {
+                for (let i = normalizedOriginal.words.length; i < normalizedUpdated.words.length; i++) {
+                    const word = normalizedUpdated.words[i]
+                    wordChanges.push({
+                        type: 'added',
+                        path: `Word ${i}`,
+                        newValue: `"${word.text}" (${word.start_time?.toFixed(4) ?? 'N/A'} - ${word.end_time?.toFixed(4) ?? 'N/A'})`
+                    })
+                }
+            }
+
+            // Compare segment-level changes
+            if (normalizedOriginal.text !== normalizedUpdated.text ||
+                Math.abs((normalizedOriginal.start_time ?? 0) - (normalizedUpdated.start_time ?? 0)) > 0.0001 ||
+                Math.abs((normalizedOriginal.end_time ?? 0) - (normalizedUpdated.end_time ?? 0)) > 0.0001 ||
+                wordChanges.length > 0) {
+                diffs.push({
+                    type: 'modified',
+                    path: `Segment ${index}`,
+                    segmentIndex: index,
+                    oldValue: `"${normalizedOriginal.text}" (${normalizedOriginal.start_time?.toFixed(4) ?? 'N/A'} - ${normalizedOriginal.end_time?.toFixed(4) ?? 'N/A'})`,
+                    newValue: `"${normalizedUpdated.text}" (${normalizedUpdated.start_time?.toFixed(4) ?? 'N/A'} - ${normalizedUpdated.end_time?.toFixed(4) ?? 'N/A'})`,
+                    wordChanges: wordChanges.length > 0 ? wordChanges : undefined
+                })
+            }
+        })
+
+        // Check for added segments
+        if (updatedData.corrected_segments.length > originalData.corrected_segments.length) {
+            for (let i = originalData.corrected_segments.length; i < updatedData.corrected_segments.length; i++) {
+                const segment = updatedData.corrected_segments[i]
+                diffs.push({
+                    type: 'added',
+                    path: `Segment ${i}`,
+                    segmentIndex: i,
+                    newValue: `"${segment.text}" (${segment.start_time?.toFixed(4) ?? 'N/A'} - ${segment.end_time?.toFixed(4) ?? 'N/A'})`
+                })
+            }
+        }
+
+        return diffs
+    }, [originalData, updatedData])
+
+    const renderCompactDiff = (diff: DiffResult) => {
+        if (diff.type !== 'modified') {
+            // For added/removed segments, show them as before but in a single line
+            return (
+                <Typography
+                    key={diff.path}
+                    color={diff.type === 'added' ? 'success.main' : 'error.main'}
+                    sx={{ mb: 0.5 }}
+                >
+                    {diff.segmentIndex}: {diff.type === 'added' ? '+ ' : '- '}
+                    {diff.type === 'added' ? diff.newValue : diff.oldValue}
+                </Typography>
+            )
+        }
+
+        // For modified segments, create a unified inline diff view
+        const oldText = diff.oldValue?.split('"')[1] || ''
+        const newText = diff.newValue?.split('"')[1] || ''
+        const oldWords = oldText.split(' ')
+        const newWords = newText.split(' ')
+
+        // Extract timing info and format with 2 decimal places
+        const timingMatch = diff.newValue?.match(/\(([\d.]+) - ([\d.]+)\)/)
+        const timing = timingMatch ?
+            `(${parseFloat(timingMatch[1]).toFixed(2)} - ${parseFloat(timingMatch[2]).toFixed(2)})` :
+            ''
+
+        // Create unified diff of words
+        const unifiedDiff = []
+        let i = 0, j = 0
+
+        while (i < oldWords.length || j < newWords.length) {
+            if (i < oldWords.length && j < newWords.length && oldWords[i] === newWords[j]) {
+                // Unchanged word
+                unifiedDiff.push({ type: 'unchanged', text: oldWords[i] })
+                i++
+                j++
+            } else if (i < oldWords.length && (!newWords[j] || oldWords[i] !== newWords[j])) {
+                // Deleted word
+                unifiedDiff.push({ type: 'deleted', text: oldWords[i] })
+                i++
+            } else if (j < newWords.length) {
+                // Added word
+                unifiedDiff.push({ type: 'added', text: newWords[j] })
+                j++
+            }
+        }
+
+        return (
+            <Box key={diff.path} sx={{ mb: 0.5, display: 'flex', alignItems: 'center' }}>
+                <Typography variant="body2" color="text.secondary" sx={{ mr: 1, minWidth: '30px' }}>
+                    {diff.segmentIndex}:
+                </Typography>
+                <Box sx={{ display: 'flex', flexWrap: 'wrap', flexGrow: 1, alignItems: 'center' }}>
+                    {unifiedDiff.map((word, idx) => (
+                        <Typography
+                            key={idx}
+                            component="span"
+                            color={
+                                word.type === 'unchanged' ? 'text.primary' :
+                                    word.type === 'deleted' ? 'error.main' : 'success.main'
+                            }
+                            sx={{
+                                textDecoration: word.type === 'deleted' ? 'line-through' : 'none',
+                                mr: 0.5
+                            }}
+                        >
+                            {word.text}
+                        </Typography>
+                    ))}
+                    <Typography variant="body2" color="text.secondary" sx={{ ml: 1 }}>
+                        {timing}
+                    </Typography>
+                </Box>
+            </Box>
+        )
+    }
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="md"
+            fullWidth
+        >
+            <DialogTitle>Preview Video (With Vocals)</DialogTitle>
+            <DialogContent
+                dividers
+                sx={{
+                    p: 0,  // Remove default padding
+                    '&:first-of-type': { pt: 0 }  // Remove default top padding
+                }}
+            >
+                <PreviewVideoSection
+                    apiClient={apiClient}
+                    isModalOpen={open}
+                    updatedData={updatedData}
+                    videoRef={videoRef}  // Pass the ref to PreviewVideoSection
+                    timingOffsetMs={timingOffsetMs}
+                />
+
+                <Box sx={{ p: 2, mt: 0 }}>
+                    {timingOffsetMs !== 0 && (
+                        <Typography variant="body2" fontWeight="bold" sx={{ mt: 1 }}>
+                            Global Timing Offset applied to all words: {timingOffsetMs > 0 ? '+' : ''}{timingOffsetMs}ms
+                        </Typography>
+                    )}
+                    {differences.length === 0 ? (
+                        <Box>
+                            <Typography color="text.secondary">
+                                No manual corrections detected. If everything looks good in the preview, click submit and the server will generate the final karaoke video.
+                            </Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                Total segments: {updatedData.corrected_segments.length}
+                            </Typography>
+                        </Box>
+                    ) : (
+                        <Box>
+                            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                                {differences.length} segment{differences.length !== 1 ? 's' : ''} modified:
+                            </Typography>
+                            <Paper sx={{ p: 2 }}>
+                                {differences.map(renderCompactDiff)}
+                            </Paper>
+                        </Box>
+                    )}
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button 
+                    onClick={onClose}
+                    color="warning"
+                    startIcon={<ArrowBack />}
+                    sx={{ mr: 'auto' }}
+                >
+                    Cancel
+                </Button>
+                <Button
+                    onClick={onSubmit}
+                    variant="contained"
+                    color="success"
+                    endIcon={<CloudUpload />}
+                >
+                    Complete Review
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}