lyrics-transcriber 0.34.0__py3-none-any.whl → 0.34.2__py3-none-any.whl

lyrics_transcriber/frontend/src/components/DebugPanel.tsx

@@ -0,0 +1,311 @@
+import { Box, Typography, Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { CorrectionData } from '../types'
+import { useMemo, useRef, useState } from 'react'
+
+export interface AnchorMatchInfo {
+    segment: string
+    lastWord: string
+    normalizedLastWord: string
+    overlappingAnchors: Array<{
+        text: string
+        range: [number, number]
+        words: string[]
+        hasMatchingWord: boolean
+    }>
+    matchingGap: {
+        text: string
+        position: number
+        length: number
+        corrections: Array<{
+            word: string
+            referencePosition: number | undefined
+        }>
+        followingAnchor: {
+            text: string
+            position: number | undefined
+        } | null
+    } | null
+    highlightDebug?: Array<{
+        wordIndex: number
+        refPos: number | undefined
+        highlightPos: number | undefined
+        anchorLength: number
+        isInRange: boolean
+    }>
+    wordPositionDebug?: {
+        anchorWords: string[]
+        wordIndex: number
+        referencePosition: number
+        finalPosition: number
+    }
+    debugLog?: string[]
+}
+
+interface DebugPanelProps {
+    data: CorrectionData
+    currentSource: 'genius' | 'spotify'
+    anchorMatchInfo: AnchorMatchInfo[]
+}
+
+export default function DebugPanel({ data, currentSource, anchorMatchInfo }: DebugPanelProps) {
+    // Create a ref to hold the content div
+    const contentRef = useRef<HTMLDivElement>(null)
+    const [expanded, setExpanded] = useState(false)
+
+    // Calculate newline positions for reference text using useMemo
+    const { newlineInfo, newlineIndices } = useMemo(() => {
+        const newlineInfo = new Map<number, string>()
+        const newlineIndices = new Set(
+            data.corrected_segments.slice(0, -1).map((segment, segmentIndex) => {
+                const segmentWords = segment.text.trim().split(/\s+/)
+                const lastWord = segmentWords[segmentWords.length - 1]
+
+                const matchingScoredAnchor = data.anchor_sequences.find(anchor => {
+                    const transcriptionStart = anchor.transcription_position
+                    const transcriptionEnd = transcriptionStart + anchor.length - 1
+                    const lastWordPosition = data.corrected_segments
+                        .slice(0, segmentIndex)
+                        .reduce((acc, s) => acc + s.text.trim().split(/\s+/).length, 0) + segmentWords.length - 1
+
+                    return lastWordPosition >= transcriptionStart && lastWordPosition <= transcriptionEnd
+                })
+
+                if (!matchingScoredAnchor) {
+                    console.warn(`Could not find anchor for segment end: "${segment.text.trim()}"`)
+                    return null
+                }
+
+                const refPosition = matchingScoredAnchor.reference_positions[currentSource]
+                if (refPosition === undefined) return null
+
+                const wordOffsetInAnchor = matchingScoredAnchor.words.indexOf(lastWord)
+                const finalPosition = refPosition + wordOffsetInAnchor
+
+                newlineInfo.set(finalPosition, segment.text.trim())
+                return finalPosition
+            }).filter((pos): pos is number => pos !== null)
+        )
+        return { newlineInfo, newlineIndices }
+    }, [data.corrected_segments, data.anchor_sequences, currentSource])
+
+    // Memoize the first 5 segments data
+    const firstFiveSegmentsData = useMemo(() =>
+        data.corrected_segments.slice(0, 5).map((segment, i) => {
+            const segmentWords = segment.text.trim().split(/\s+/)
+            const previousWords = data.corrected_segments
+                .slice(0, i)
+                .reduce((acc, s) => acc + s.text.trim().split(/\s+/).length, 0)
+            const lastWordPosition = previousWords + segmentWords.length - 1
+
+            const matchingScoredAnchor = data.anchor_sequences.find(anchor => {
+                const start = anchor.transcription_position
+                const end = start + anchor.length
+                return lastWordPosition >= start && lastWordPosition < end
+            })
+
+            return {
+                segment,
+                segmentWords,
+                previousWords,
+                lastWordPosition,
+                matchingAnchor: matchingScoredAnchor
+            }
+        }), [data.corrected_segments, data.anchor_sequences])
+
+    // Memoize relevant anchors
+    const relevantAnchors = useMemo(() =>
+        data.anchor_sequences
+            .filter(anchor => anchor.transcription_position < 50),
+        [data.anchor_sequences]
+    )
+
+    // Memoize relevant gaps
+    const relevantGaps = useMemo(() =>
+        data.gap_sequences.filter(g => g.transcription_position < 50),
+        [data.gap_sequences]
+    )
+
+    const handleCopy = (e: React.MouseEvent) => {
+        e.stopPropagation()  // Prevent accordion from toggling
+
+        // Temporarily expand to get content
+        setExpanded(true)
+
+        // Use setTimeout to allow the content to render
+        setTimeout(() => {
+            if (contentRef.current) {
+                const debugText = contentRef.current.innerText
+                navigator.clipboard.writeText(debugText)
+
+                // Restore previous state if it was collapsed
+                setExpanded(false)
+            }
+        }, 100)
+    }
+
+    return (
+        <Box sx={{ mb: 3 }}>
+            <Accordion
+                expanded={expanded}
+                onChange={(_, isExpanded) => setExpanded(isExpanded)}
+            >
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    sx={{
+                        '& .MuiAccordionSummary-content': {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            width: '100%'
+                        }
+                    }}
+                >
+                    <Typography>Debug Information</Typography>
+                    <Box
+                        onClick={(e) => e.stopPropagation()}  // Prevent accordion toggle
+                        sx={{ display: 'flex', alignItems: 'center', mr: 2 }}
+                    >
+                        <Typography
+                            component="span"
+                            variant="body2"
+                            sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                cursor: 'pointer',
+                                '&:hover': { opacity: 0.7 }
+                            }}
+                            onClick={handleCopy}
+                        >
+                            <ContentCopyIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
+                            Copy All
+                        </Typography>
+                    </Box>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Box ref={contentRef} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                        {/* Debug Logs */}
+                        <Box>
+                            <Typography variant="h6" gutterBottom>Debug Logs (first 5 segments)</Typography>
+                            <Typography component="pre" sx={{
+                                fontSize: '0.75rem',
+                                whiteSpace: 'pre-wrap',
+                                backgroundColor: '#f5f5f5',
+                                padding: 2,
+                                borderRadius: 1
+                            }}>
+                                {anchorMatchInfo.slice(0, 5).map((info, i) =>
+                                    `Segment ${i + 1}: "${info.segment}"\n` +
+                                    (info.debugLog ? info.debugLog.map(log => `  ${log}`).join('\n') : '  No debug logs\n')
+                                ).join('\n')}
+                            </Typography>
+                        </Box>
+
+                        {/* First 5 Segments */}
+                        <Box>
+                            <Typography variant="h6" gutterBottom>First 5 Segments (with position details)</Typography>
+                            <Typography component="pre" sx={{ fontSize: '0.75rem', whiteSpace: 'pre-wrap' }}>
+                                {firstFiveSegmentsData.map(({ segment, segmentWords, previousWords, lastWordPosition, matchingAnchor }, index) => {
+                                    return `Segment ${index + 1}: "${segment.text.trim()}"\n` +
+                                        `  Words: ${segment.words.length} (${segmentWords.length} after trimming)\n` +
+                                        `  Word count before segment: ${previousWords}\n` +
+                                        `  Last word position: ${lastWordPosition}\n` +
+                                        `  Matching anchor: ${matchingAnchor ?
+                                            `"${matchingAnchor.text}"\n    Position: ${matchingAnchor.transcription_position}\n` +
+                                            `    Length: ${matchingAnchor.length}\n` +
+                                            `    Reference positions: genius=${matchingAnchor.reference_positions.genius}, spotify=${matchingAnchor.reference_positions.spotify}`
+                                            : 'None'}\n`
+                                }).join('\n')}
+                            </Typography>
+                        </Box>
+
+                        {/* Relevant Anchors */}
+                        <Box>
+                            <Typography variant="h6" gutterBottom>Relevant Anchors</Typography>
+                            <Typography component="pre" sx={{ fontSize: '0.75rem', whiteSpace: 'pre-wrap' }}>
+                                {relevantAnchors.map((anchor, i) => {
+                                    return `Anchor ${i}: "${anchor.text}"\n` +
+                                        `  Position: ${anchor.transcription_position}\n` +
+                                        `  Length: ${anchor.length}\n` +
+                                        `  Words: ${anchor.words.join(' ')}\n` +
+                                        `  Reference Positions: genius=${anchor.reference_positions.genius}, spotify=${anchor.reference_positions.spotify}\n`
+                                }).join('\n')}
+                            </Typography>
+                        </Box>
+
+                        {/* Relevant Gaps */}
+                        <Box>
+                            <Typography variant="h6" gutterBottom>Relevant Gaps</Typography>
+                            <Typography component="pre" sx={{ fontSize: '0.75rem', whiteSpace: 'pre-wrap' }}>
+                                {relevantGaps.map((gap, i) => {
+                                    return `Gap ${i}: "${gap.text}"\n` +
+                                        `  Position: ${gap.transcription_position}\n` +
+                                        `  Length: ${gap.length}\n` +
+                                        `  Words: ${gap.words.join(' ')}\n` +
+                                        `  Corrections: ${gap.corrections.length}\n`
+                                }).join('\n')}
+                            </Typography>
+                        </Box>
+
+                        {/* First 5 Newlines */}
+                        <Box>
+                            <Typography variant="h6" gutterBottom>First 5 Newlines (with detailed anchor matching)</Typography>
+                            <Typography component="pre" sx={{ fontSize: '0.75rem', whiteSpace: 'pre-wrap' }}>
+                                {Array.from(newlineIndices).sort((a, b) => a - b).slice(0, 5).map(pos => {
+                                    const matchingAnchor = data.anchor_sequences.find(anchor => {
+                                        const start = anchor.reference_positions[currentSource]
+                                        const end = start + anchor.length
+                                        return pos >= start && pos < end
+                                    })
+
+                                    const matchingSegment = data.corrected_segments.find(segment =>
+                                        newlineInfo.get(pos) === segment.text.trim()
+                                    )
+
+                                    const segmentIndex = matchingSegment ? data.corrected_segments.indexOf(matchingSegment) : -1
+                                    const lastWord = matchingSegment?.text.trim().split(/\s+/).pop()
+                                    const wordIndex = matchingAnchor?.words.indexOf(lastWord ?? '') ?? -1
+                                    const expectedPosition = matchingAnchor && wordIndex !== -1 ?
+                                        matchingAnchor.reference_positions[currentSource] + wordIndex :
+                                        'Unknown'
+
+                                    return `Position ${pos}: "${newlineInfo.get(pos)}"\n` +
+                                        `  In Anchor: ${matchingAnchor ? `"${matchingAnchor.text}"` : 'None'}\n` +
+                                        `  Anchor Position: ${matchingAnchor?.reference_positions[currentSource]}\n` +
+                                        `  Matching Segment Index: ${segmentIndex}\n` +
+                                        `  Expected Position in Reference: ${expectedPosition}\n`
+                                }).join('\n')}
+                            </Typography>
+                        </Box>
+
+                        {/* Anchor Matching Debug section */}
+                        <Box>
+                            <Typography variant="h6" gutterBottom>Anchor Matching Debug (first 5 segments)</Typography>
+                            <Typography component="pre" sx={{ fontSize: '0.75rem', whiteSpace: 'pre-wrap' }}>
+                                {anchorMatchInfo.slice(0, 5).map((info, i) => `
+Segment ${i}: "${info.segment}"
+  Last word: "${info.lastWord}" (normalized: "${info.normalizedLastWord}")
+  Debug Log:
+${info.debugLog ? info.debugLog.map(log => `    ${log}`).join('\n') : '    none'}
+  Overlapping anchors:
+${info.overlappingAnchors.map(anchor => `    "${anchor.text}"
+      Range: ${anchor.range[0]}-${anchor.range[1]}
+      Words: ${anchor.words.join(', ')}
+      Has matching word: ${anchor.hasMatchingWord}
+`).join('\n')}
+  Word Position Debug: ${info.wordPositionDebug ?
+                                        `\n    Anchor words: ${info.wordPositionDebug.anchorWords.join(', ')}
+    Word index in anchor: ${info.wordPositionDebug.wordIndex}
+    Reference position: ${info.wordPositionDebug.referencePosition}
+    Final position: ${info.wordPositionDebug.finalPosition}`
+                                        : 'none'}
+`).join('\n')}
+                            </Typography>
+                        </Box>
+                    </Box>
+                </AccordionDetails>
+            </Accordion>
+        </Box>
+    )
+} 

lyrics_transcriber/frontend/src/components/DetailsModal.tsx

@@ -0,0 +1,297 @@
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    IconButton,
+    Grid,
+    Typography,
+    Box,
+    TextField,
+    Button,
+} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import { ModalContent } from './LyricsAnalyzer'
+import { WordCorrection } from '../types'
+import { useState, useEffect } from 'react'
+
+interface DetailsModalProps {
+    open: boolean
+    content: ModalContent | null
+    onClose: () => void
+    onUpdateCorrection?: (position: number, updatedWords: string[]) => void
+    isReadOnly?: boolean
+}
+
+export default function DetailsModal({
+    open,
+    content,
+    onClose,
+    onUpdateCorrection,
+    isReadOnly = true
+}: DetailsModalProps) {
+    const [editedWord, setEditedWord] = useState('')
+    const [isEditing, setIsEditing] = useState(false)
+
+    useEffect(() => {
+        // Reset editing state when modal content changes
+        if (content?.type === 'gap') {
+            setEditedWord(content.data.word)
+            setIsEditing(false)
+        }
+    }, [content])
+
+    if (!content) return null
+
+    const handleStartEdit = () => {
+        console.group('DetailsModal Edit Debug')
+        console.log('Starting edit for content:', JSON.stringify(content, null, 2))
+        if (content.type === 'gap') {
+            console.log('Setting edited word:', content.data.word)
+            setEditedWord(content.data.word)
+        }
+        console.groupEnd()
+        setIsEditing(true)
+    }
+
+    const handleSaveEdit = () => {
+        console.group('DetailsModal Save Debug')
+        console.log('Current content:', JSON.stringify(content, null, 2))
+        console.log('Edited word:', editedWord)
+
+        if (content?.type === 'gap' && onUpdateCorrection) {
+            // Use the editedWord state instead of the original word
+            console.log('Saving edit with new word:', editedWord)
+            onUpdateCorrection(
+                content.data.position,
+                [editedWord]  // Use the edited word here
+            )
+        }
+        console.groupEnd()
+        onClose()
+    }
+
+    const handleCancelEdit = () => {
+        if (content.type === 'gap') {
+            setEditedWord(content.data.word)
+            setIsEditing(false)
+        }
+    }
+
+    const handleWordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        console.log('Word changed to:', event.target.value)
+        setEditedWord(event.target.value)
+    }
+
+    const renderContent = () => {
+        switch (content.type) {
+            case 'anchor':
+                return (
+                    <Grid container spacing={2}>
+                        <GridItem title="Text" value={`"${content.data.text}"`} />
+                        <GridItem title="Words" value={content.data.words.join(' ')} />
+                        <GridItem title="Position" value={content.data.position} />
+                        <GridItem
+                            title="Reference Positions"
+                            value={
+                                <Box component="pre" sx={{ margin: 0, fontSize: '0.875rem' }}>
+                                    {JSON.stringify(content.data.reference_positions, null, 2)}
+                                </Box>
+                            }
+                        />
+                        <GridItem
+                            title="Confidence"
+                            value={`${(content.data.confidence * 100).toFixed(2)}%`}
+                        />
+                        <GridItem title="Length" value={`${content.data.length} words`} />
+                        {content.data.phrase_score && (
+                            <>
+                                <GridItem title="Phrase Type" value={content.data.phrase_score.phrase_type} />
+                                <GridItem
+                                    title="Scores"
+                                    value={
+                                        <Box sx={{ pl: 2 }}>
+                                            <Typography>
+                                                Total: {content.data?.total_score?.toFixed(2) ?? 'N/A'}
+                                            </Typography>
+                                            <Typography>
+                                                Natural Break: {content.data?.phrase_score?.natural_break_score?.toFixed(2) ?? 'N/A'}
+                                            </Typography>
+                                            <Typography>
+                                                Length: {content.data.phrase_score.length_score.toFixed(2)}
+                                            </Typography>
+                                            <Typography>
+                                                Phrase: {content.data.phrase_score.total_score.toFixed(2)}
+                                            </Typography>
+                                        </Box>
+                                    }
+                                />
+                            </>
+                        )}
+                    </Grid>
+                )
+
+            case 'gap':
+                return (
+                    <Grid container spacing={2}>
+                        <GridItem
+                            title="Transcribed Text"
+                            value={`"${content.data.text}"`}
+                        />
+                        <GridItem
+                            title="Current Text"
+                            value={
+                                isEditing ? (
+                                    <Box>
+                                        <TextField
+                                            value={editedWord}
+                                            onChange={handleWordChange}
+                                            fullWidth
+                                            label="Edit word"
+                                            variant="outlined"
+                                            size="small"
+                                        />
+                                        <Box sx={{ display: 'flex', gap: 1 }}>
+                                            <Button
+                                                variant="contained"
+                                                onClick={handleSaveEdit}
+                                            >
+                                                Save Changes
+                                            </Button>
+                                            <Button
+                                                variant="outlined"
+                                                onClick={handleCancelEdit}
+                                            >
+                                                Cancel
+                                            </Button>
+                                        </Box>
+                                    </Box>
+                                ) : (
+                                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                                        <Typography>
+                                            "{content.data.words.map(word => {
+                                                const correction = content.data.corrections.find(
+                                                    c => c.original_word === word
+                                                );
+                                                return correction ? correction.corrected_word : word;
+                                            }).join(' ')}"
+                                        </Typography>
+                                        {!isReadOnly && (
+                                            <Button
+                                                variant="outlined"
+                                                size="small"
+                                                onClick={handleStartEdit}
+                                            >
+                                                Edit
+                                            </Button>
+                                        )}
+                                    </Box>
+                                )
+                            }
+                        />
+                        <GridItem title="Position" value={content.data.position} />
+                        <GridItem title="Length" value={`${content.data.length} words`} />
+                        {content.data.corrections.length > 0 && (
+                            <GridItem
+                                title="Corrections"
+                                value={
+                                    <Box sx={{ pl: 2 }}>
+                                        {content.data.corrections.map((correction: WordCorrection, i: number) => (
+                                            <Box key={i} sx={{ mb: 2 }}>
+                                                <Typography>
+                                                    "{correction.original_word}" → "{correction.corrected_word}"
+                                                </Typography>
+                                                <Typography>
+                                                    Confidence: {(correction.confidence * 100).toFixed(2)}%
+                                                </Typography>
+                                                <Typography>Source: {correction.source}</Typography>
+                                                <Typography>Reason: {correction.reason}</Typography>
+                                                {Object.keys(correction.alternatives).length > 0 && (
+                                                    <Typography component="pre" sx={{ fontSize: '0.875rem' }}>
+                                                        Alternatives: {JSON.stringify(correction.alternatives, null, 2)}
+                                                    </Typography>
+                                                )}
+                                            </Box>
+                                        ))}
+                                    </Box>
+                                }
+                            />
+                        )}
+                        <GridItem
+                            title="Reference Words"
+                            value={
+                                <Box component="pre" sx={{ margin: 0, fontSize: '0.875rem' }}>
+                                    {JSON.stringify(content.data.reference_words, null, 2)}
+                                </Box>
+                            }
+                        />
+                        {content.data.preceding_anchor && (
+                            <GridItem
+                                title="Preceding Anchor"
+                                value={`"${content.data.preceding_anchor.text}"`}
+                            />
+                        )}
+                        {content.data.following_anchor && (
+                            <GridItem
+                                title="Following Anchor"
+                                value={`"${content.data.following_anchor.text}"`}
+                            />
+                        )}
+                    </Grid>
+                )
+
+            default:
+                return null
+        }
+    }
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="sm"
+            fullWidth
+            PaperProps={{
+                sx: { position: 'relative' },
+            }}
+        >
+            <IconButton
+                onClick={onClose}
+                sx={{
+                    position: 'absolute',
+                    right: 8,
+                    top: 8,
+                }}
+            >
+                <CloseIcon />
+            </IconButton>
+            <DialogTitle>
+                {content.type.charAt(0).toUpperCase() + content.type.slice(1)} Details
+            </DialogTitle>
+            <DialogContent dividers>{renderContent()}</DialogContent>
+        </Dialog>
+    )
+}
+
+interface GridItemProps {
+    title: string
+    value: string | number | React.ReactNode
+}
+
+function GridItem({ title, value }: GridItemProps) {
+    return (
+        <>
+            <Grid item xs={4}>
+                <Typography variant="subtitle1" fontWeight="bold">
+                    {title}
+                </Typography>
+            </Grid>
+            <Grid item xs={8}>
+                {typeof value === 'string' || typeof value === 'number' ? (
+                    <Typography>{value}</Typography>
+                ) : (
+                    value
+                )}
+            </Grid>
+        </>
+    )
+} 

lyrics_transcriber/frontend/src/components/FileUpload.tsx

@@ -0,0 +1,77 @@
+import { ChangeEvent, DragEvent, useState } from 'react'
+import { Paper, Typography } from '@mui/material'
+import CloudUploadIcon from '@mui/icons-material/CloudUpload'
+import { LyricsData } from '../types'
+
+interface FileUploadProps {
+    onUpload: (data: LyricsData) => void
+}
+
+export default function FileUpload({ onUpload }: FileUploadProps) {
+    const [isDragging, setIsDragging] = useState(false)
+
+    const handleDragOver = (e: DragEvent) => {
+        e.preventDefault()
+        setIsDragging(true)
+    }
+
+    const handleDragLeave = () => {
+        setIsDragging(false)
+    }
+
+    const handleDrop = async (e: DragEvent) => {
+        e.preventDefault()
+        setIsDragging(false)
+        const file = e.dataTransfer.files[0]
+        await processFile(file)
+    }
+
+    const handleFileInput = async (e: ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files?.length) {
+            await processFile(e.target.files[0])
+        }
+    }
+
+    const processFile = async (file: File) => {
+        try {
+            const text = await file.text()
+            const data = JSON.parse(text)
+            onUpload(data)
+        } catch (error) {
+            console.error('Error processing file:', error)
+            // TODO: Add error handling UI
+        }
+    }
+
+    return (
+        <Paper
+            sx={{
+                p: 4,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                backgroundColor: isDragging ? 'action.hover' : 'background.paper',
+                cursor: 'pointer',
+            }}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onClick={() => document.getElementById('file-input')?.click()}
+        >
+            <input
+                type="file"
+                id="file-input"
+                style={{ display: 'none' }}
+                accept="application/json"
+                onChange={handleFileInput}
+            />
+            <CloudUploadIcon sx={{ fontSize: 48, mb: 2 }} />
+            <Typography variant="h6" gutterBottom>
+                Upload Lyrics Correction Review JSON
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+                Drag and drop a file here, or click to select
+            </Typography>
+        </Paper>
+    )
+}