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

lyrics_transcriber/frontend/src/components/WordEditControls.tsx

@@ -0,0 +1,116 @@
+import { Button, Box, TextField } from '@mui/material'
+import DeleteIcon from '@mui/icons-material/Delete'
+import { useState, useEffect } from 'react'
+import { ModalContent } from './LyricsAnalyzer'
+
+interface WordEditControlsProps {
+    content: ModalContent
+    onUpdateCorrection?: (position: number, updatedWords: string[]) => void
+    onClose: () => void
+}
+
+export function useWordEdit(content: ModalContent | null) {
+    const [editedWord, setEditedWord] = useState('')
+    const [isEditing, setIsEditing] = useState(false)
+
+    useEffect(() => {
+        if (content) {
+            setEditedWord(content.type === 'gap' ? content.data.word : content.type === 'anchor' ? content.data.words[0] : '')
+            setIsEditing(false)
+        }
+    }, [content])
+
+    return {
+        editedWord,
+        setEditedWord,
+        isEditing,
+        setIsEditing
+    }
+}
+
+export default function WordEditControls({ content, onUpdateCorrection, onClose }: WordEditControlsProps) {
+    const {
+        editedWord,
+        setEditedWord,
+        isEditing,
+        setIsEditing
+    } = useWordEdit(content)
+
+    const handleStartEdit = () => {
+        if (content.type === 'gap') {
+            setEditedWord(content.data.word)
+        } else if (content.type === 'anchor') {
+            setEditedWord(content.data.words[0])
+        }
+        setIsEditing(true)
+    }
+
+    const handleDelete = () => {
+        if (!onUpdateCorrection) return
+        onUpdateCorrection(content.data.position, [])
+        onClose()
+    }
+
+    const handleSaveEdit = () => {
+        if (onUpdateCorrection) {
+            onUpdateCorrection(content.data.position, [editedWord])
+        }
+        onClose()
+    }
+
+    const handleCancelEdit = () => {
+        if (content.type === 'gap') {
+            setEditedWord(content.data.word)
+            setIsEditing(false)
+        }
+    }
+
+    const handleWordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setEditedWord(event.target.value)
+    }
+
+    return isEditing ? (
+        <Box>
+            <TextField
+                value={editedWord}
+                onChange={handleWordChange}
+                fullWidth
+                label="Edit word"
+                variant="outlined"
+                size="small"
+                sx={{ mb: 1 }}
+            />
+            <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button variant="contained" onClick={handleSaveEdit}>
+                    Save Changes
+                </Button>
+                <Button variant="outlined" onClick={handleCancelEdit}>
+                    Cancel
+                </Button>
+                <Button
+                    variant="outlined"
+                    color="error"
+                    startIcon={<DeleteIcon />}
+                    onClick={handleDelete}
+                >
+                    Delete
+                </Button>
+            </Box>
+        </Box>
+    ) : (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Button variant="outlined" size="small" onClick={handleStartEdit}>
+                Edit
+            </Button>
+            <Button
+                variant="outlined"
+                size="small"
+                color="error"
+                startIcon={<DeleteIcon />}
+                onClick={handleDelete}
+            >
+                Delete
+            </Button>
+        </Box>
+    )
+} 

lyrics_transcriber/frontend/src/components/shared/components/HighlightedText.tsx

@@ -0,0 +1,243 @@
+import { Typography, Box } from '@mui/material'
+import { Word } from './Word'
+import { useWordClick } from '../hooks/useWordClick'
+import { AnchorSequence, GapSequence, HighlightInfo, InteractionMode } from '../../../types'
+import { ModalContent } from '../../LyricsAnalyzer'
+import { WordClickInfo, TranscriptionWordPosition, FlashType, LinePosition } from '../types'
+import React from 'react'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import IconButton from '@mui/material/IconButton';
+
+interface HighlightedTextProps {
+    // Input can be either raw text or pre-processed word positions
+    text?: string
+    wordPositions?: TranscriptionWordPosition[]
+    // Common props
+    anchors: AnchorSequence[]
+    gaps: GapSequence[]
+    highlightInfo: HighlightInfo | null
+    mode: InteractionMode
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    flashingType: FlashType
+    // Reference-specific props
+    isReference?: boolean
+    currentSource?: 'genius' | 'spotify'
+    preserveSegments?: boolean
+    linePositions?: LinePosition[]
+    currentTime?: number
+}
+
+export function HighlightedText({
+    text,
+    wordPositions,
+    anchors,
+    highlightInfo,
+    mode,
+    onElementClick,
+    onWordClick,
+    flashingType,
+    isReference,
+    currentSource,
+    preserveSegments = false,
+    linePositions = [],
+    currentTime = 0
+}: HighlightedTextProps) {
+    const { handleWordClick } = useWordClick({
+        mode,
+        onElementClick,
+        onWordClick,
+        isReference,
+        currentSource
+    })
+
+    const shouldWordFlash = (wordPos: TranscriptionWordPosition | { word: string; index: number }): boolean => {
+        if (!flashingType) return false
+
+        if ('type' in wordPos) {
+            // Handle TranscriptionWordPosition
+            const hasCorrections = wordPos.type === 'gap' &&
+                Boolean((wordPos.sequence as GapSequence)?.corrections?.length)
+
+            return Boolean(
+                (flashingType === 'anchor' && wordPos.type === 'anchor') ||
+                (flashingType === 'corrected' && hasCorrections) ||
+                (flashingType === 'uncorrected' && wordPos.type === 'gap' && !hasCorrections) ||
+                (flashingType === 'word' && highlightInfo?.type === 'anchor' &&
+                    wordPos.type === 'anchor' && wordPos.sequence && (
+                        (wordPos.sequence as AnchorSequence).transcription_position === highlightInfo.transcriptionIndex ||
+                        (isReference && currentSource &&
+                            (wordPos.sequence as AnchorSequence).reference_positions[currentSource] === highlightInfo.referenceIndices?.[currentSource])
+                    ))
+            )
+        } else {
+            // Handle reference word
+            const thisWordIndex = wordPos.index
+            const anchor = anchors.find(a => {
+                const position = isReference
+                    ? a.reference_positions[currentSource!]
+                    : a.transcription_position
+                if (position === undefined) return false
+                return thisWordIndex >= position && thisWordIndex < position + a.length
+            })
+
+            return Boolean(
+                (flashingType === 'anchor' && anchor) ||
+                (flashingType === 'word' && highlightInfo?.type === 'anchor' && anchor && (
+                    anchor.transcription_position === highlightInfo.transcriptionIndex ||
+                    (isReference && currentSource && anchor.reference_positions[currentSource] === highlightInfo.referenceIndices?.[currentSource])
+                ))
+            )
+        }
+    }
+
+    const shouldHighlightWord = (wordPos: TranscriptionWordPosition): boolean => {
+        if (!currentTime || !wordPos.word.start_time || !wordPos.word.end_time) return false
+        return currentTime >= wordPos.word.start_time && currentTime <= wordPos.word.end_time
+    }
+
+    const handleCopyLine = (text: string) => {
+        navigator.clipboard.writeText(text);
+    };
+
+    const renderContent = () => {
+        if (wordPositions) {
+            return wordPositions.map((wordPos, index) => (
+                <React.Fragment key={`${wordPos.word.text}-${index}`}>
+                    <Word
+                        word={wordPos.word.text}
+                        shouldFlash={shouldWordFlash(wordPos)}
+                        isCurrentlyPlaying={shouldHighlightWord(wordPos)}
+                        isAnchor={wordPos.type === 'anchor'}
+                        isCorrectedGap={wordPos.type === 'gap' && Boolean((wordPos.sequence as GapSequence)?.corrections?.length)}
+                        isUncorrectedGap={wordPos.type === 'gap' && !(wordPos.sequence as GapSequence)?.corrections?.length}
+                        onClick={() => handleWordClick(
+                            wordPos.word.text,
+                            wordPos.position,
+                            wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
+                            wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
+                        )}
+                    />
+                    {index < wordPositions.length - 1 && ' '}
+                </React.Fragment>
+            ))
+        } else if (text) {
+            const lines = text.split('\n')
+            let globalWordIndex = 0
+
+            return lines.map((line, lineIndex) => {
+                const currentLinePosition = linePositions?.find((pos: LinePosition) => pos.position === globalWordIndex)
+                if (currentLinePosition?.isEmpty) {
+                    globalWordIndex++
+                    return (
+                        <Box key={`empty-${lineIndex}`} sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                            <Typography
+                                component="span"
+                                sx={{
+                                    color: 'text.secondary',
+                                    width: '2em',
+                                    minWidth: '2em',
+                                    textAlign: 'right',
+                                    marginRight: 1,
+                                    userSelect: 'none',
+                                    fontFamily: 'monospace',
+                                    paddingTop: '4px',
+                                }}
+                            >
+                                {currentLinePosition.lineNumber}
+                            </Typography>
+                            <Box sx={{ width: '28px' }} /> {/* Space for copy button */}
+                            <Box sx={{ flex: 1, height: '1.5em' }} />
+                        </Box>
+                    )
+                }
+
+                const lineContent = line.split(/(\s+)/)
+                return (
+                    <Box key={`line-${lineIndex}`} sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                        <Typography
+                            component="span"
+                            sx={{
+                                color: 'text.secondary',
+                                width: '2em',
+                                minWidth: '2em',
+                                textAlign: 'right',
+                                marginRight: 1,
+                                userSelect: 'none',
+                                fontFamily: 'monospace',
+                                paddingTop: '4px',
+                            }}
+                        >
+                            {lineIndex}
+                        </Typography>
+                        <IconButton
+                            size="small"
+                            onClick={() => handleCopyLine(line)}
+                            sx={{
+                                padding: '2px',
+                                marginRight: 1,
+                                height: '24px',
+                                width: '24px'
+                            }}
+                        >
+                            <ContentCopyIcon sx={{ fontSize: '1rem' }} />
+                        </IconButton>
+                        <Box sx={{ flex: 1 }}>
+                            {lineContent.map((word, wordIndex) => {
+                                if (word === '') return null
+                                if (/^\s+$/.test(word)) {
+                                    return <span key={`space-${lineIndex}-${wordIndex}`}> </span>
+                                }
+
+                                const position = globalWordIndex++
+                                const anchor = anchors.find(a => {
+                                    const refPos = a.reference_positions[currentSource!]
+                                    if (refPos === undefined) return false
+                                    return position >= refPos && position < refPos + a.length
+                                })
+
+                                // Create a mock TranscriptionWordPosition for highlighting
+                                const wordPos: TranscriptionWordPosition = {
+                                    word: { text: word },
+                                    position,
+                                    type: anchor ? 'anchor' : 'other',
+                                    sequence: anchor,
+                                    isInRange: true
+                                }
+
+                                return (
+                                    <Word
+                                        key={`${word}-${lineIndex}-${wordIndex}`}
+                                        word={word}
+                                        shouldFlash={shouldWordFlash({ word, index: position })}
+                                        isCurrentlyPlaying={shouldHighlightWord(wordPos)}
+                                        isAnchor={Boolean(anchor)}
+                                        isCorrectedGap={false}
+                                        isUncorrectedGap={false}
+                                        onClick={() => handleWordClick(word, position, anchor, undefined)}
+                                    />
+                                )
+                            })}
+                        </Box>
+                    </Box>
+                )
+            })
+        }
+
+        return null
+    }
+
+    return (
+        <Typography
+            component="div"
+            sx={{
+                fontFamily: 'monospace',
+                whiteSpace: preserveSegments ? 'normal' : 'pre-wrap',
+                margin: 0,
+                lineHeight: 1.5
+            }}
+        >
+            {renderContent()}
+        </Typography>
+    )
+} 

lyrics_transcriber/frontend/src/components/shared/components/SourceSelector.tsx

@@ -0,0 +1,28 @@
+import { Box, Button } from '@mui/material'
+
+interface SourceSelectorProps {
+    currentSource: 'genius' | 'spotify'
+    onSourceChange: (source: 'genius' | 'spotify') => void
+}
+
+export function SourceSelector({ currentSource, onSourceChange }: SourceSelectorProps) {
+    return (
+        <Box>
+            <Button
+                size="small"
+                variant={currentSource === 'genius' ? 'contained' : 'outlined'}
+                onClick={() => onSourceChange('genius')}
+                sx={{ mr: 1 }}
+            >
+                Genius
+            </Button>
+            <Button
+                size="small"
+                variant={currentSource === 'spotify' ? 'contained' : 'outlined'}
+                onClick={() => onSourceChange('spotify')}
+            >
+                Spotify
+            </Button>
+        </Box>
+    )
+} 

lyrics_transcriber/frontend/src/components/shared/components/Word.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { COLORS } from '../constants'
+import { HighlightedWord } from '../styles'
+import { WordProps } from '../types'
+
+export const Word = React.memo(function Word({
+    word,
+    shouldFlash,
+    isAnchor,
+    isCorrectedGap,
+    isUncorrectedGap,
+    isCurrentlyPlaying,
+    padding = '2px 4px',
+    onClick,
+}: WordProps) {
+    if (/^\s+$/.test(word)) {
+        return word
+    }
+
+    const backgroundColor = isCurrentlyPlaying
+        ? COLORS.playing
+        : shouldFlash
+            ? COLORS.highlighted
+            : isAnchor
+                ? COLORS.anchor
+                : isCorrectedGap
+                    ? COLORS.corrected
+                    : isUncorrectedGap
+                        ? COLORS.uncorrectedGap
+                        : 'transparent'
+
+    return (
+        <HighlightedWord
+            shouldFlash={shouldFlash}
+            style={{
+                backgroundColor,
+                padding,
+                cursor: 'pointer',
+                borderRadius: '3px',
+                color: isCurrentlyPlaying ? '#ffffff' : 'inherit',
+            }}
+            sx={{
+                '&:hover': {
+                    backgroundColor: '#e0e0e0'
+                }
+            }}
+            onClick={onClick}
+        >
+            {word}
+        </HighlightedWord>
+    )
+}) 

lyrics_transcriber/frontend/src/components/{constants.ts → shared/constants.ts}

@@ -5,6 +5,7 @@ export const COLORS = {
     corrected: '#e8f5e9', // Pale green
     uncorrectedGap: '#fff3e0', // Pale orange
     highlighted: '#ffeb3b',  // or any color you prefer for highlighting
+    playing: '#1976d2', // Blue
 } as const
 
 export const flashAnimation = keyframes`

lyrics_transcriber/frontend/src/components/shared/hooks/useWordClick.ts

@@ -0,0 +1,137 @@
+import { useCallback } from 'react'
+import { AnchorSequence, GapSequence, InteractionMode } from '../../../types'
+import { ModalContent } from '../../LyricsAnalyzer'
+import { WordClickInfo } from '../types'
+
+interface UseWordClickProps {
+    mode: InteractionMode
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    isReference?: boolean
+    currentSource?: 'genius' | 'spotify'
+}
+
+export function useWordClick({
+    mode,
+    onElementClick,
+    onWordClick,
+    isReference,
+    currentSource
+}: UseWordClickProps) {
+    const handleWordClick = useCallback((
+        word: string,
+        position: number,
+        anchor?: AnchorSequence,
+        gap?: GapSequence,
+        debugInfo?: any
+    ) => {
+        console.log(JSON.stringify({
+            debug: {
+                clickedWord: word,
+                position,
+                isReference,
+                currentSource,
+                wordInfo: debugInfo?.wordSplitInfo,
+                nearbyAnchors: debugInfo?.nearbyAnchors,
+                anchorInfo: anchor && {
+                    transcriptionPos: anchor.transcription_position,
+                    length: anchor.length,
+                    words: anchor.words,
+                    refPositions: anchor.reference_positions
+                },
+                gapInfo: gap && {
+                    transcriptionPos: gap.transcription_position,
+                    length: gap.length,
+                    words: gap.words,
+                    corrections: gap.corrections.map(c => ({
+                        length: c.length,
+                        refPositions: c.reference_positions
+                    }))
+                },
+                belongsToAnchor: anchor && (
+                    isReference
+                        ? position >= (anchor.reference_positions[currentSource!] ?? -1) &&
+                        position < ((anchor.reference_positions[currentSource!] ?? -1) + anchor.length)
+                        : position >= anchor.transcription_position &&
+                        position < (anchor.transcription_position + anchor.length)
+                ),
+                belongsToGap: gap && (
+                    isReference
+                        ? gap.corrections[0]?.reference_positions?.[currentSource!] !== undefined &&
+                        position >= (gap.corrections[0].reference_positions![currentSource!]) &&
+                        position < (gap.corrections[0].reference_positions![currentSource!] + gap.corrections[0].length)
+                        : position >= gap.transcription_position &&
+                        position < (gap.transcription_position + gap.length)
+                )
+            }
+        }, null, 2))
+
+        const belongsToAnchor = anchor && (
+            isReference
+                ? position >= (anchor.reference_positions[currentSource!] ?? -1) &&
+                position < ((anchor.reference_positions[currentSource!] ?? -1) + anchor.length)
+                : position >= anchor.transcription_position &&
+                position < (anchor.transcription_position + anchor.length)
+        )
+
+        const belongsToGap = gap && (
+            isReference
+                ? gap.corrections[0]?.reference_positions?.[currentSource!] !== undefined &&
+                position >= (gap.corrections[0].reference_positions![currentSource!]) &&
+                position < (gap.corrections[0].reference_positions![currentSource!] + gap.corrections[0].length)
+                : position >= gap.transcription_position &&
+                position < (gap.transcription_position + gap.length)
+        )
+
+        if (mode === 'highlight' || mode === 'edit') {
+            onWordClick?.({
+                wordIndex: position,
+                type: belongsToAnchor ? 'anchor' : belongsToGap ? 'gap' : 'other',
+                anchor: belongsToAnchor ? anchor : undefined,
+                gap: belongsToGap ? gap : undefined
+            })
+        } else if (mode === 'details') {
+            if (belongsToAnchor && anchor) {
+                onElementClick({
+                    type: 'anchor',
+                    data: {
+                        ...anchor,
+                        position,
+                        word
+                    }
+                })
+            } else if (belongsToGap && gap) {
+                onElementClick({
+                    type: 'gap',
+                    data: {
+                        ...gap,
+                        position,
+                        word
+                    }
+                })
+            } else if (!isReference) {
+                // Create synthetic gap for non-sequence words (transcription view only)
+                const syntheticGap: GapSequence = {
+                    text: word,
+                    words: [word],
+                    transcription_position: position,
+                    length: 1,
+                    corrections: [],
+                    preceding_anchor: null,
+                    following_anchor: null,
+                    reference_words: {}
+                }
+                onElementClick({
+                    type: 'gap',
+                    data: {
+                        ...syntheticGap,
+                        position: 0,
+                        word
+                    }
+                })
+            }
+        }
+    }, [mode, onWordClick, onElementClick, isReference, currentSource])
+
+    return { handleWordClick }
+} 

lyrics_transcriber/frontend/src/components/{styles.ts → shared/styles.ts}

@@ -10,4 +10,4 @@ export const HighlightedWord = styled('span')<{ shouldFlash: boolean }>(
             animation: `${flashAnimation} 0.4s ease-in-out 3`,
         }),
     })
-)
+) 

lyrics_transcriber/frontend/src/components/shared/types.ts

@@ -0,0 +1,99 @@
+import { AnchorSequence, GapSequence, HighlightInfo, InteractionMode, LyricsData, LyricsSegment } from '../../types'
+import { ModalContent } from '../LyricsAnalyzer'
+
+// Add FlashType definition directly in shared types
+export type FlashType = 'anchor' | 'corrected' | 'uncorrected' | 'word' | null
+
+// Common word click handling
+export interface WordClickInfo {
+    wordIndex: number
+    type: 'anchor' | 'gap' | 'other'
+    anchor?: AnchorSequence
+    gap?: GapSequence
+}
+
+// Base props shared between components
+export interface BaseViewProps {
+    onElementClick: (content: ModalContent) => void
+    onWordClick?: (info: WordClickInfo) => void
+    flashingType: FlashType
+    highlightInfo: HighlightInfo | null
+    mode: InteractionMode
+}
+
+// Base word position interface - remove the word property from here
+export interface BaseWordPosition {
+    type: 'anchor' | 'gap' | 'other'
+    sequence?: AnchorSequence | GapSequence
+}
+
+// Transcription-specific word position with timing info
+export interface TranscriptionWordPosition extends BaseWordPosition {
+    position: number
+    isInRange: boolean
+    word: {
+        text: string
+        start_time?: number
+        end_time?: number
+    }
+}
+
+// Reference-specific word position with simple string word
+export interface ReferenceWordPosition extends BaseWordPosition {
+    index: number
+    isHighlighted: boolean
+    word: string  // Simple string word for reference view
+}
+
+// Word component props
+export interface WordProps {
+    word: string
+    shouldFlash: boolean
+    isAnchor?: boolean
+    isCorrectedGap?: boolean
+    isUncorrectedGap?: boolean
+    isCurrentlyPlaying?: boolean
+    padding?: string
+    onClick?: () => void
+}
+
+// Text segment props
+export interface TextSegmentProps extends BaseViewProps {
+    wordPositions: TranscriptionWordPosition[] | ReferenceWordPosition[]
+}
+
+// View-specific props
+export interface TranscriptionViewProps extends BaseViewProps {
+    data: LyricsData
+    onPlaySegment?: (startTime: number) => void
+    currentTime?: number
+}
+
+// Add LinePosition type here since it's used in multiple places
+export interface LinePosition {
+    position: number
+    lineNumber: number
+    isEmpty?: boolean
+}
+
+// Reference-specific props
+export interface ReferenceViewProps extends BaseViewProps {
+    referenceTexts: Record<string, string>
+    anchors: LyricsData['anchor_sequences']
+    gaps: LyricsData['gap_sequences']
+    currentSource: 'genius' | 'spotify'
+    onSourceChange: (source: 'genius' | 'spotify') => void
+    corrected_segments: LyricsSegment[]
+}
+
+// Update HighlightedTextProps to include linePositions
+export interface HighlightedTextProps extends BaseViewProps {
+    text?: string
+    wordPositions?: TranscriptionWordPosition[]
+    anchors: AnchorSequence[]
+    gaps: GapSequence[]
+    isReference?: boolean
+    currentSource?: 'genius' | 'spotify'
+    preserveSegments?: boolean
+    linePositions?: LinePosition[]
+}