lyrics-transcriber 0.35.1__py3-none-any.whl → 0.37.0__py3-none-any.whl

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

@@ -8,13 +8,12 @@ import React from 'react'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import IconButton from '@mui/material/IconButton';
 
-interface HighlightedTextProps {
+export 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
@@ -22,7 +21,7 @@ interface HighlightedTextProps {
     flashingType: FlashType
     // Reference-specific props
     isReference?: boolean
-    currentSource?: 'genius' | 'spotify'
+    currentSource?: string
     preserveSegments?: boolean
     linePositions?: LinePosition[]
     currentTime?: number
@@ -51,42 +50,37 @@ export function HighlightedText({
         currentSource
     })
 
-    const shouldWordFlash = (wordPos: TranscriptionWordPosition | { word: string; index: number }): boolean => {
+    const shouldWordFlash = (wordPos: TranscriptionWordPosition | { word: string; id: string }): boolean => {
         if (!flashingType) return false
 
         if ('type' in wordPos) {
             // Handle TranscriptionWordPosition
-            const hasCorrections = wordPos.type === 'gap' &&
-                Boolean((wordPos.sequence as GapSequence)?.corrections?.length)
+            const gap = wordPos.sequence as GapSequence
+            const isCorrected = wordPos.type === 'gap' &&
+                gap?.corrections?.some(correction =>
+                    correction.word_id === wordPos.word.id
+                )
 
             return Boolean(
                 (flashingType === 'anchor' && wordPos.type === 'anchor') ||
-                (flashingType === 'corrected' && hasCorrections) ||
-                (flashingType === 'uncorrected' && wordPos.type === 'gap' && !hasCorrections) ||
+                (flashingType === 'corrected' && isCorrected) ||
+                (flashingType === 'uncorrected' && wordPos.type === 'gap' && !isCorrected) ||
                 (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])
-                    ))
+                    wordPos.type === 'anchor' && wordPos.sequence &&
+                    highlightInfo.word_ids?.includes(wordPos.word.id))
             )
         } 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
-            })
+            if (!currentSource) return false
+
+            const anchor = anchors?.find(a =>
+                a?.reference_word_ids?.[currentSource]?.includes(wordPos.id)
+            )
 
             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])
-                ))
+                (flashingType === 'word' && highlightInfo?.type === 'anchor' &&
+                    highlightInfo.reference_word_ids?.[currentSource]?.includes(wordPos.id))
             )
         }
     }
@@ -103,7 +97,7 @@ export function HighlightedText({
     const renderContent = () => {
         if (wordPositions) {
             return wordPositions.map((wordPos, index) => (
-                <React.Fragment key={`${wordPos.word.text}-${index}`}>
+                <React.Fragment key={wordPos.word.id}>
                     <Word
                         word={wordPos.word.text}
                         shouldFlash={shouldWordFlash(wordPos)}
@@ -113,7 +107,7 @@ export function HighlightedText({
                         isUncorrectedGap={wordPos.type === 'gap' && !(wordPos.sequence as GapSequence)?.corrections?.length}
                         onClick={() => handleWordClick(
                             wordPos.word.text,
-                            wordPos.position,
+                            wordPos.word.id,
                             wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
                             wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
                         )}
@@ -123,12 +117,12 @@ export function HighlightedText({
             ))
         } else if (text) {
             const lines = text.split('\n')
-            let globalWordIndex = 0
+            let wordCount = 0
 
             return lines.map((line, lineIndex) => {
-                const currentLinePosition = linePositions?.find((pos: LinePosition) => pos.position === globalWordIndex)
+                const currentLinePosition = linePositions?.find(pos => pos.position === wordCount)
                 if (currentLinePosition?.isEmpty) {
-                    globalWordIndex++
+                    wordCount++
                     return (
                         <Box key={`empty-${lineIndex}`} sx={{ display: 'flex', alignItems: 'flex-start' }}>
                             <Typography
@@ -168,7 +162,7 @@ export function HighlightedText({
                                 paddingTop: '4px',
                             }}
                         >
-                            {lineIndex}
+                            {currentLinePosition?.lineNumber ?? lineIndex}
                         </Typography>
                         <IconButton
                             size="small"
@@ -189,32 +183,24 @@ export function HighlightedText({
                                     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
-                                }
+                                // Generate word ID based on position in the reference text
+                                const wordId = `${currentSource}-word-${wordCount}`
+                                wordCount++
+
+                                // Find if this word is part of any anchor sequence
+                                const anchor = currentSource ? anchors?.find(a =>
+                                    a?.reference_word_ids?.[currentSource]?.includes(wordId)
+                                ) : undefined
 
                                 return (
                                     <Word
-                                        key={`${word}-${lineIndex}-${wordIndex}`}
+                                        key={wordId}
                                         word={word}
-                                        shouldFlash={shouldWordFlash({ word, index: position })}
-                                        isCurrentlyPlaying={shouldHighlightWord(wordPos)}
+                                        shouldFlash={shouldWordFlash({ word, id: wordId })}
                                         isAnchor={Boolean(anchor)}
                                         isCorrectedGap={false}
                                         isUncorrectedGap={false}
-                                        onClick={() => handleWordClick(word, position, anchor, undefined)}
+                                        onClick={() => handleWordClick(word, wordId, anchor, undefined)}
                                     />
                                 )
                             })}
@@ -223,7 +209,6 @@ export function HighlightedText({
                 )
             })
         }
-
         return null
     }
 

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

@@ -1,28 +1,26 @@
 import { Box, Button } from '@mui/material'
 
-interface SourceSelectorProps {
-    currentSource: 'genius' | 'spotify'
-    onSourceChange: (source: 'genius' | 'spotify') => void
+export interface SourceSelectorProps {
+    currentSource: string
+    onSourceChange: (source: string) => void
+    availableSources: string[]
 }
 
-export function SourceSelector({ currentSource, onSourceChange }: SourceSelectorProps) {
+export function SourceSelector({ currentSource, onSourceChange, availableSources }: 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>
+            {availableSources.map((source) => (
+                <Button
+                    key={source}
+                    size="small"
+                    variant={currentSource === source ? 'contained' : 'outlined'}
+                    onClick={() => onSourceChange(source)}
+                    sx={{ mr: 1 }}
+                >
+                    {/* Capitalize first letter of source */}
+                    {source.charAt(0).toUpperCase() + source.slice(1)}
+                </Button>
+            ))}
         </Box>
     )
 } 

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

@@ -3,12 +3,22 @@ import { AnchorSequence, GapSequence, InteractionMode } from '../../../types'
 import { ModalContent } from '../../LyricsAnalyzer'
 import { WordClickInfo } from '../types'
 
-interface UseWordClickProps {
+// Define debug info type
+interface WordDebugInfo {
+    wordSplitInfo?: {
+        text: string
+        startIndex: number
+        endIndex: number
+    }
+    nearbyAnchors?: AnchorSequence[]
+}
+
+export interface UseWordClickProps {
     mode: InteractionMode
     onElementClick: (content: ModalContent) => void
     onWordClick?: (info: WordClickInfo) => void
     isReference?: boolean
-    currentSource?: 'genius' | 'spotify'
+    currentSource?: string
 }
 
 export function useWordClick({
@@ -20,72 +30,69 @@ export function useWordClick({
 }: UseWordClickProps) {
     const handleWordClick = useCallback((
         word: string,
-        position: number,
+        wordId: string,
         anchor?: AnchorSequence,
         gap?: GapSequence,
-        debugInfo?: any
+        debugInfo?: WordDebugInfo
     ) => {
         console.log(JSON.stringify({
             debug: {
                 clickedWord: word,
-                position,
+                wordId,
                 isReference,
                 currentSource,
                 wordInfo: debugInfo?.wordSplitInfo,
                 nearbyAnchors: debugInfo?.nearbyAnchors,
                 anchorInfo: anchor && {
-                    transcriptionPos: anchor.transcription_position,
+                    wordIds: anchor.word_ids,
                     length: anchor.length,
                     words: anchor.words,
-                    refPositions: anchor.reference_positions
+                    referenceWordIds: anchor.reference_word_ids
                 },
                 gapInfo: gap && {
-                    transcriptionPos: gap.transcription_position,
+                    wordIds: gap.word_ids,
                     length: gap.length,
                     words: gap.words,
                     corrections: gap.corrections.map(c => ({
+                        original_word: c.original_word,
+                        corrected_word: c.corrected_word,
+                        word_id: c.word_id,
                         length: c.length,
-                        refPositions: c.reference_positions
+                        is_deletion: c.is_deletion,
+                        split_index: c.split_index,
+                        split_total: c.split_total
                     }))
                 },
                 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)
+                        ? anchor.reference_word_ids[currentSource!]?.includes(wordId)
+                        : anchor.word_ids.includes(wordId)
                 ),
                 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)
-                )
+                        ? gap.corrections.some(c => c.word_id === wordId)
+                        : gap.word_ids.includes(wordId)
+                ),
+                wordIndexInGap: gap && gap.words.indexOf(word),
+                hasMatchingCorrection: gap && gap.corrections.some(c => c.word_id === wordId)
             }
         }, 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)
+                ? anchor.reference_word_ids[currentSource!]?.includes(wordId)
+                : anchor.word_ids.includes(wordId)
         )
 
         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)
+                ? gap.corrections.some(c => c.word_id === wordId)
+                : gap.word_ids.includes(wordId)
         )
 
         if (mode === 'highlight' || mode === 'edit') {
             onWordClick?.({
-                wordIndex: position,
+                word_id: wordId,
                 type: belongsToAnchor ? 'anchor' : belongsToGap ? 'gap' : 'other',
                 anchor: belongsToAnchor ? anchor : undefined,
                 gap: belongsToGap ? gap : undefined
@@ -96,7 +103,7 @@ export function useWordClick({
                     type: 'anchor',
                     data: {
                         ...anchor,
-                        position,
+                        wordId,
                         word
                     }
                 })
@@ -105,16 +112,17 @@ export function useWordClick({
                     type: 'gap',
                     data: {
                         ...gap,
-                        position,
+                        wordId,
                         word
                     }
                 })
             } else if (!isReference) {
                 // Create synthetic gap for non-sequence words (transcription view only)
                 const syntheticGap: GapSequence = {
+                    id: `synthetic-${wordId}`,
                     text: word,
                     words: [word],
-                    transcription_position: position,
+                    word_ids: [wordId],
                     length: 1,
                     corrections: [],
                     preceding_anchor: null,
@@ -125,7 +133,7 @@ export function useWordClick({
                     type: 'gap',
                     data: {
                         ...syntheticGap,
-                        position: 0,
+                        wordId,
                         word
                     }
                 })

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

@@ -6,7 +6,7 @@ export type FlashType = 'anchor' | 'corrected' | 'uncorrected' | 'word' | null
 
 // Common word click handling
 export interface WordClickInfo {
-    wordIndex: number
+    word_id: string
     type: 'anchor' | 'gap' | 'other'
     anchor?: AnchorSequence
     gap?: GapSequence
@@ -29,13 +29,13 @@ export interface BaseWordPosition {
 
 // Transcription-specific word position with timing info
 export interface TranscriptionWordPosition extends BaseWordPosition {
-    position: number
-    isInRange: boolean
     word: {
+        id: string
         text: string
         start_time?: number
         end_time?: number
     }
+    isInRange: boolean
 }
 
 // Reference-specific word position with simple string word
@@ -81,8 +81,8 @@ 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
+    currentSource: string
+    onSourceChange: (source: string) => void
     corrected_segments: LyricsSegment[]
 }
 
@@ -93,7 +93,7 @@ export interface HighlightedTextProps extends BaseViewProps {
     anchors: AnchorSequence[]
     gaps: GapSequence[]
     isReference?: boolean
-    currentSource?: 'genius' | 'spotify'
+    currentSource?: string
     preserveSegments?: boolean
     linePositions?: LinePosition[]
 } 

lyrics_transcriber/frontend/src/components/shared/utils/initializeDataWithIds.tsx

@@ -0,0 +1,146 @@
+import { CorrectionData, LyricsSegment, Word, AnchorSequence, GapSequence, WordCorrection } from '@/types';
+import { nanoid } from 'nanoid';
+
+// Define server-side types just for this file
+interface ServerData {
+    transcription_position: number;
+    length: number;
+    words: string[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+}
+
+export function normalizeDataForSubmission(data: CorrectionData): CorrectionData {
+    // Create a deep clone to avoid modifying the original
+    const normalized = JSON.parse(JSON.stringify(data));
+
+    // Preserve floating point numbers with original precision
+    const preserveFloats = (obj: Record<string, unknown>): void => {
+        for (const key in obj) {
+            const value = obj[key];
+            if (typeof value === 'number') {
+                // Handle integers and floats differently
+                let formatted: string;
+                if (Number.isInteger(value)) {
+                    formatted = value.toFixed(1); // Force decimal point for integers
+                } else {
+                    formatted = value.toString(); // Keep original precision for floats
+                }
+                obj[key] = parseFloat(formatted);
+            } else if (typeof value === 'object' && value !== null) {
+                preserveFloats(value as Record<string, unknown>);
+            }
+        }
+    };
+    preserveFloats(normalized);
+    return normalized;
+}
+
+// Helper function to find word IDs for a sequence based on original positions
+function findWordIdsForSequence(
+    segments: LyricsSegment[],
+    sequence: ServerData
+): string[] {
+    const allWords = segments.flatMap(s => s.words);
+    const startIndex = sequence.transcription_position;
+    const endIndex = startIndex + sequence.length;
+
+    console.log('Finding word IDs for sequence:', JSON.stringify({
+        position: sequence.transcription_position,
+        length: sequence.length,
+        words: allWords.slice(startIndex, endIndex).map(w => w.text)
+    }));
+
+    return allWords.slice(startIndex, endIndex).map(word => word.id);
+}
+
+// Helper function to find word ID for a correction
+function findWordIdForCorrection(
+    segments: LyricsSegment[],
+    correction: { original_word: string; }
+): string {
+    for (const segment of segments) {
+        const word = segment.words.find(w => w.text === correction.original_word);
+        if (word) return word.id;
+    }
+    return nanoid(); // Fallback if word not found
+}
+
+// Helper function to find word IDs in reference text
+function findReferenceWordIds(
+    referenceSource: string,
+    sequence: ServerData
+): string[] {
+    const referencePosition = sequence.reference_positions?.[referenceSource];
+    if (typeof referencePosition !== 'number') {
+        return [];
+    }
+
+    // Generate IDs in the same format as HighlightedText
+    const wordIds = Array.from({ length: sequence.length },
+        (_, i) => `${referenceSource}-word-${referencePosition + i}`
+    );
+
+    return wordIds;
+}
+
+export function initializeDataWithIds(data: CorrectionData): CorrectionData {
+    const newData = JSON.parse(JSON.stringify(data)) as CorrectionData;
+
+    // Initialize segment and word IDs
+    newData.corrected_segments = newData.corrected_segments.map((segment: LyricsSegment) => ({
+        ...segment,
+        id: segment.id || nanoid(),
+        words: segment.words.map((word: Word) => ({
+            ...word,
+            id: word.id || nanoid()
+        }))
+    }));
+
+    console.log('Segments after ID initialization:', JSON.stringify({
+        segmentCount: newData.corrected_segments.length,
+        totalWords: newData.corrected_segments.reduce((sum, seg) => sum + seg.words.length, 0),
+        sampleWords: newData.corrected_segments[0].words.map(w => ({ id: w.id, text: w.text }))
+    }));
+
+    // Update anchor sequences with word IDs based on positions
+    newData.anchor_sequences = newData.anchor_sequences.map((anchor) => {
+        const serverAnchor = anchor as unknown as ServerData;
+
+        // Get reference word IDs for each source
+        const referenceWordIds: Record<string, string[]> = {};
+        Object.keys(data.reference_texts || {}).forEach(source => {
+            referenceWordIds[source] = findReferenceWordIds(source, serverAnchor);
+        });
+
+        console.log('Processing anchor with references:', JSON.stringify({
+            words: anchor.words,
+            reference_positions: serverAnchor.reference_positions,
+            reference_word_ids: referenceWordIds
+        }));
+
+        return {
+            ...anchor,
+            id: anchor.id || nanoid(),
+            word_ids: findWordIdsForSequence(newData.corrected_segments, serverAnchor),
+            reference_word_ids: referenceWordIds
+        } as AnchorSequence;
+    });
+
+    // Update gap sequences to use word IDs
+    newData.gap_sequences = newData.gap_sequences.map((gap) => {
+        const serverGap = gap as unknown as ServerData;
+        return {
+            ...gap,
+            id: gap.id || nanoid(),
+            word_ids: gap.word_ids || findWordIdsForSequence(newData.corrected_segments, serverGap),
+            corrections: gap.corrections.map((correction: WordCorrection) => ({
+                ...correction,
+                id: correction.id || nanoid(),
+                word_id: correction.word_id || findWordIdForCorrection(newData.corrected_segments, correction)
+            }))
+        } as GapSequence;
+    });
+
+    return newData;
+}

lyrics_transcriber/frontend/src/components/shared/utils/referenceLineCalculator.ts

@@ -4,40 +4,37 @@ import { LinePosition } from '../types'
 export function calculateReferenceLinePositions(
     corrected_segments: LyricsSegment[],
     anchors: LyricsData['anchor_sequences'],
-    currentSource: 'genius' | 'spotify'
+    currentSource: string
 ): { linePositions: LinePosition[] } {
     const linePositions: LinePosition[] = []
     let currentReferencePosition = 0
 
     // First, find all anchor sequences that cover entire lines
-    const fullLineAnchors = anchors.map(anchor => {
-        const referencePos = anchor.reference_positions[currentSource]
-        if (referencePos === undefined) return null
+    const fullLineAnchors = anchors?.map(anchor => {
+        // Add null checks for anchor and reference_word_ids
+        if (!anchor?.reference_word_ids?.[currentSource]) return null
 
-        return {
-            referenceStart: referencePos,
-            referenceLength: anchor.length,
-            transcriptionLine: corrected_segments.findIndex((segment, segmentIndex) => {
-                const words = segment.words
-                if (!words.length) return false
-
-                // Calculate the absolute position of the first and last words in this segment
-                let absolutePosition = 0
-                for (let i = 0; i < segmentIndex; i++) {
-                    absolutePosition += corrected_segments[i].words.length
-                }
+        const referenceWordIds = anchor.reference_word_ids[currentSource]
+        if (!referenceWordIds?.length) return null
 
-                const firstWordPosition = absolutePosition
-                const lastWordPosition = absolutePosition + words.length - 1
+        return {
+            referenceWordIds,
+            transcriptionLine: corrected_segments.findIndex((segment) => {
+                const wordIds = segment.words.map(w => w.id)
+                if (!wordIds.length) return false
 
-                return firstWordPosition >= anchor.transcription_position &&
-                    lastWordPosition < anchor.transcription_position + anchor.length
+                // Check if all word IDs in this segment are part of the anchor
+                return wordIds.every(id => anchor.word_ids?.includes(id))
             })
         }
-    }).filter((a): a is NonNullable<typeof a> => a !== null)
+    })?.filter((a): a is NonNullable<typeof a> => a !== null) ?? []
 
-    // Sort by reference position to process in order
-    fullLineAnchors.sort((a, b) => a.referenceStart - b.referenceStart)
+    // Sort by first reference word ID to process in order
+    fullLineAnchors.sort((a, b) => {
+        const firstIdA = a.referenceWordIds[0]
+        const firstIdB = b.referenceWordIds[0]
+        return firstIdA.localeCompare(firstIdB)
+    })
 
     // Add line positions with padding
     let currentLine = 0
@@ -55,10 +52,12 @@ export function calculateReferenceLinePositions(
 
         // Add the actual line position
         linePositions.push({
-            position: anchor.referenceStart,
-            lineNumber: currentLine
+            position: currentReferencePosition,
+            lineNumber: currentLine,
+            isEmpty: false
         })
         currentLine++
+        currentReferencePosition++
     })
 
     // Add any remaining lines after the last anchor