karaoke-gen 0.57.0__py3-none-any.whl → 0.71.27__py3-none-any.whl

lyrics_transcriber/frontend/src/components/MetricsDashboard.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+type Metrics = {
+  timeRange: string;
+  totalSessions: number;
+  averageAccuracy: number;
+  errorReduction: number;
+  averageProcessingTime: number;
+  modelPerformance: { counts: Record<string, number>; avgLatencyMs: Record<string, number>; fallbacks: number };
+  costSummary: Record<string, number>;
+  userSatisfaction: number;
+};
+
+type Props = { metrics: Metrics };
+
+export const MetricsDashboard: React.FC<Props> = ({ metrics }) => {
+  const modelIds = Object.keys(metrics.modelPerformance.counts || {});
+  return (
+    <div>
+      <h3>Agentic Metrics</h3>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
+        <div><b>Total Sessions</b><div>{metrics.totalSessions}</div></div>
+        <div><b>Avg Proc Time (ms)</b><div>{metrics.averageProcessingTime}</div></div>
+        <div><b>Fallbacks</b><div>{metrics.modelPerformance.fallbacks}</div></div>
+      </div>
+      <h4 style={{ marginTop: 16 }}>Per-Model</h4>
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr>
+            <th style={{ textAlign: "left" }}>Model</th>
+            <th style={{ textAlign: "right" }}>Count</th>
+            <th style={{ textAlign: "right" }}>Avg Latency (ms)</th>
+          </tr>
+        </thead>
+        <tbody>
+          {modelIds.map((id) => (
+            <tr key={id}>
+              <td>{id}</td>
+              <td style={{ textAlign: "right" }}>{metrics.modelPerformance.counts[id] || 0}</td>
+              <td style={{ textAlign: "right" }}>{metrics.modelPerformance.avgLatencyMs[id] || 0}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default MetricsDashboard;
+
+

lyrics_transcriber/frontend/src/components/ModeSelector.tsx

@@ -0,0 +1,67 @@
+import { ToggleButton, ToggleButtonGroup, Box, Typography, Tooltip } from '@mui/material';
+import HighlightIcon from '@mui/icons-material/Highlight';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { InteractionMode } from '../types';
+
+interface ModeSelectorProps {
+    effectiveMode: InteractionMode;
+    onChange: (mode: InteractionMode) => void;
+}
+
+export default function ModeSelector({ effectiveMode, onChange }: ModeSelectorProps) {
+    return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.2, height: '32px' }}>
+            <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.8rem' }}>
+                Mode:
+            </Typography>
+            <ToggleButtonGroup
+                value={effectiveMode}
+                exclusive
+                onChange={(_, newMode) => newMode === 'edit' && onChange(newMode)}
+                size="small"
+                sx={{ 
+                    height: '32px',
+                    '& .MuiToggleButton-root': {
+                        padding: '3px 8px',
+                        fontSize: '0.75rem',
+                        height: '32px'
+                    }
+                }}
+            >
+                <Tooltip title="Default mode; click words to edit that lyrics segment">
+                    <ToggleButton 
+                        value="edit"
+                    >
+                        <EditIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
+                        Edit
+                    </ToggleButton>
+                </Tooltip>
+                
+                <Tooltip title="Hold SHIFT and click words to highlight the matching anchor sequence in the reference lyrics">
+                    <span>
+                        <ToggleButton 
+                            value="highlight"
+                            disabled
+                        >
+                            <HighlightIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
+                            Highlight
+                        </ToggleButton>
+                    </span>
+                </Tooltip>
+                
+                <Tooltip title="Hold CTRL and click words to delete them">
+                    <span>
+                        <ToggleButton 
+                            value="delete_word"
+                            disabled
+                        >
+                            <DeleteIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
+                            Delete
+                        </ToggleButton>
+                    </span>
+                </Tooltip>
+            </ToggleButtonGroup>
+        </Box>
+    );
+} 

lyrics_transcriber/frontend/src/components/ModelSelector.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+type Props = {
+  models: { id: string; name: string; available: boolean }[];
+  value?: string;
+  onChange: (modelId: string) => void;
+};
+
+export const ModelSelector: React.FC<Props> = ({ models, value, onChange }) => {
+  return (
+    <select value={value} onChange={(e) => onChange(e.target.value)}>
+      {models.map((m) => (
+        <option key={m.id} value={m.id} disabled={!m.available}>
+          {m.name} {m.available ? "" : "(unavailable)"}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default ModelSelector;
+
+

lyrics_transcriber/frontend/src/components/PreviewVideoSection.tsx

@@ -0,0 +1,144 @@
+import { Box, Typography, CircularProgress, Alert, Button } from '@mui/material'
+import { useState, useEffect } from 'react'
+import { ApiClient } from '../api'
+import { CorrectionData } from '../types'
+import { applyOffsetToCorrectionData } from './shared/utils/timingUtils'
+
+interface PreviewVideoSectionProps {
+    apiClient: ApiClient | null
+    isModalOpen: boolean
+    updatedData: CorrectionData
+    videoRef?: React.RefObject<HTMLVideoElement>
+    timingOffsetMs?: number
+}
+
+export default function PreviewVideoSection({
+    apiClient,
+    isModalOpen,
+    updatedData,
+    videoRef,
+    timingOffsetMs = 0
+}: PreviewVideoSectionProps) {
+    const [previewState, setPreviewState] = useState<{
+        status: 'loading' | 'ready' | 'error';
+        videoUrl?: string;
+        error?: string;
+    }>({ status: 'loading' });
+
+    // Generate preview when modal opens
+    useEffect(() => {
+        if (isModalOpen && apiClient) {
+            const generatePreview = async () => {
+                setPreviewState({ status: 'loading' });
+                try {
+                    // Debug logging for timing offset
+                    console.log(`[TIMING] PreviewVideoSection - Current timing offset: ${timingOffsetMs}ms`);
+                    
+                    // Apply timing offset if needed
+                    const dataToPreview = timingOffsetMs !== 0 
+                        ? applyOffsetToCorrectionData(updatedData, timingOffsetMs) 
+                        : updatedData;
+                    
+                    // Log some example timestamps after potential offset application
+                    if (dataToPreview.corrected_segments.length > 0) {
+                        const firstSegment = dataToPreview.corrected_segments[0];
+                        console.log(`[TIMING] Preview - First segment id: ${firstSegment.id}`);
+                        console.log(`[TIMING] - start_time: ${firstSegment.start_time}, end_time: ${firstSegment.end_time}`);
+                        
+                        if (firstSegment.words.length > 0) {
+                            const firstWord = firstSegment.words[0];
+                            console.log(`[TIMING] - first word "${firstWord.text}" time: ${firstWord.start_time} -> ${firstWord.end_time}`);
+                        }
+                    }
+                    
+                    const response = await apiClient.generatePreviewVideo(dataToPreview);
+
+                    if (response.status === 'error') {
+                        setPreviewState({
+                            status: 'error',
+                            error: response.message || 'Failed to generate preview video'
+                        });
+                        return;
+                    }
+
+                    if (!response.preview_hash) {
+                        setPreviewState({
+                            status: 'error',
+                            error: 'No preview hash received from server'
+                        });
+                        return;
+                    }
+
+                    const videoUrl = apiClient.getPreviewVideoUrl(response.preview_hash);
+                    setPreviewState({
+                        status: 'ready',
+                        videoUrl
+                    });
+                } catch (error) {
+                    setPreviewState({
+                        status: 'error',
+                        error: (error as Error).message || 'Failed to generate preview video'
+                    });
+                }
+            };
+
+            generatePreview();
+        }
+    }, [isModalOpen, apiClient, updatedData, timingOffsetMs]);
+
+    if (!apiClient) return null;
+
+    return (
+        <Box sx={{ mb: 2 }}>
+            {previewState.status === 'loading' && (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, p: 2 }}>
+                    <CircularProgress size={24} />
+                    <Typography>Generating preview video...</Typography>
+                </Box>
+            )}
+
+            {previewState.status === 'error' && (
+                <Box sx={{ mb: 2 }}>
+                    <Alert
+                        severity="error"
+                        action={
+                            <Button
+                                color="inherit"
+                                size="small"
+                                onClick={() => {
+                                    // Re-trigger the effect by toggling isModalOpen
+                                    setPreviewState({ status: 'loading' });
+                                }}
+                            >
+                                Retry
+                            </Button>
+                        }
+                    >
+                        {previewState.error}
+                    </Alert>
+                </Box>
+            )}
+
+            {previewState.status === 'ready' && previewState.videoUrl && (
+                <Box sx={{
+                    width: '100%',
+                    margin: '0',
+                }}>
+                    <video
+                        ref={videoRef}
+                        controls
+                        autoPlay
+                        src={previewState.videoUrl}
+                        style={{
+                            display: 'block',
+                            width: '100%',
+                            height: 'auto',
+                        }}
+                    >
+                        Your browser does not support the video tag.
+                    </video>
+                </Box>
+            )}
+        </Box>
+    );
+} 

lyrics_transcriber/frontend/src/components/ReferenceView.tsx

@@ -0,0 +1,268 @@
+import { useMemo } from 'react'
+import { Paper, Typography, Box, IconButton } from '@mui/material'
+import { ReferenceViewProps } from './shared/types'
+import { calculateReferenceLinePositions } from './shared/utils/referenceLineCalculator'
+import { SourceSelector } from './shared/components/SourceSelector'
+import { HighlightedText } from './shared/components/HighlightedText'
+import { TranscriptionWordPosition } from './shared/types'
+import { getWordsFromIds } from './shared/utils/wordUtils'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import { styled } from '@mui/material/styles'
+
+const SegmentControls = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '2px',
+    paddingTop: '1px',
+    paddingRight: '4px'
+})
+
+const TextContainer = styled(Box)({
+    flex: 1,
+    minWidth: 0,
+})
+
+export default function ReferenceView({
+    referenceSources,
+    anchors,
+    onElementClick,
+    onWordClick,
+    flashingType,
+    corrected_segments,
+    currentSource,
+    onSourceChange,
+    highlightInfo,
+    mode,
+    gaps,
+    corrections,
+    onAddLyrics
+}: ReferenceViewProps) {
+    // Get available sources from referenceSources object
+    const availableSources = useMemo(() =>
+        Object.keys(referenceSources),
+        [referenceSources]
+    )
+
+    // Ensure we always have a valid currentSource
+    const effectiveCurrentSource = useMemo(() =>
+        currentSource || (availableSources.length > 0 ? availableSources[0] : ''),
+        [currentSource, availableSources]
+    )
+
+    // Create word positions for the reference view
+    const referenceWordPositions = useMemo(() => {
+        const positions: TranscriptionWordPosition[] = [];
+        const allPositions = new Map<number, TranscriptionWordPosition[]>();
+
+        // Map anchor words
+        anchors?.forEach(anchor => {
+            const position = anchor.reference_positions[effectiveCurrentSource];
+            if (position === undefined) return;
+
+            if (!allPositions.has(position)) {
+                allPositions.set(position, []);
+            }
+
+            const referenceWords = getWordsFromIds(
+                referenceSources[effectiveCurrentSource].segments,
+                anchor.reference_word_ids[effectiveCurrentSource] || []
+            );
+
+            referenceWords.forEach(word => {
+                const wordPosition: TranscriptionWordPosition = {
+                    word: {
+                        id: word.id,
+                        text: word.text,
+                        start_time: word.start_time ?? undefined,
+                        end_time: word.end_time ?? undefined
+                    },
+                    type: 'anchor',
+                    sequence: anchor,
+                    isInRange: true
+                };
+                allPositions.get(position)!.push(wordPosition);
+            });
+        });
+
+        // Map gap words
+        gaps?.forEach(gap => {
+            const precedingAnchor = gap.preceding_anchor_id ?
+                anchors?.find(a => a.id === gap.preceding_anchor_id) :
+                undefined;
+            const followingAnchor = gap.following_anchor_id ?
+                anchors?.find(a => a.id === gap.following_anchor_id) :
+                undefined;
+
+            const position = precedingAnchor?.reference_positions[effectiveCurrentSource] ??
+                followingAnchor?.reference_positions[effectiveCurrentSource];
+
+            if (position === undefined) return;
+
+            const gapPosition = precedingAnchor ? position + 1 : position - 1;
+
+            if (!allPositions.has(gapPosition)) {
+                allPositions.set(gapPosition, []);
+            }
+
+            const referenceWords = getWordsFromIds(
+                referenceSources[effectiveCurrentSource].segments,
+                gap.reference_word_ids[effectiveCurrentSource] || []
+            );
+
+            referenceWords.forEach(word => {
+                // Find if this word has a correction
+                const isWordCorrected = corrections?.some(correction =>
+                    correction.reference_positions?.[effectiveCurrentSource]?.toString() === word.id &&
+                    gap.transcribed_word_ids.includes(correction.word_id)
+                );
+
+                const wordPosition: TranscriptionWordPosition = {
+                    word: {
+                        id: word.id,
+                        text: word.text,
+                        start_time: word.start_time ?? undefined,
+                        end_time: word.end_time ?? undefined
+                    },
+                    type: 'gap',
+                    sequence: gap,
+                    isInRange: true,
+                    isCorrected: isWordCorrected
+                };
+                allPositions.get(gapPosition)!.push(wordPosition);
+            });
+        });
+
+        // Sort by position and flatten
+        Array.from(allPositions.entries())
+            .sort(([a], [b]) => a - b)
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            .forEach(([_, words]) => {
+                positions.push(...words);
+            });
+
+        return positions;
+    }, [anchors, gaps, effectiveCurrentSource, referenceSources, corrections]);
+
+    const { linePositions } = useMemo(() =>
+        calculateReferenceLinePositions(
+            corrected_segments,
+            anchors,
+            effectiveCurrentSource
+        ),
+        [corrected_segments, anchors, effectiveCurrentSource]
+    )
+
+    // Create a mapping of reference words to their corrections
+    const referenceCorrections = useMemo(() => {
+        const correctionMap = new Map<string, string>();
+
+        corrections?.forEach(correction => {
+            const referencePosition = correction.reference_positions?.[effectiveCurrentSource];
+            if (referencePosition !== undefined) {
+                correctionMap.set(referencePosition.toString(), correction.corrected_word);
+            }
+        });
+
+        return correctionMap;
+    }, [corrections, effectiveCurrentSource]);
+
+    // Get the segments for the current source
+    const currentSourceSegments = referenceSources[effectiveCurrentSource]?.segments || [];
+
+    // Helper function to copy text to clipboard
+    const copyToClipboard = (text: string) => {
+        navigator.clipboard.writeText(text);
+    };
+
+    // Helper function to copy all reference text from current source
+    const copyAllReferenceText = () => {
+        const allText = currentSourceSegments
+            .map(segment => segment.words.map(w => w.text).join(' '))
+            .join('\n');
+        copyToClipboard(allText);
+    };
+
+    return (
+        <Paper sx={{ p: 0.8, position: 'relative' }}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography variant="h6" sx={{ fontSize: '0.9rem', mb: 0 }}>
+                        Reference Lyrics
+                    </Typography>
+                    <IconButton
+                        size="small"
+                        onClick={copyAllReferenceText}
+                        sx={{ 
+                            padding: '2px',
+                            height: '20px',
+                            width: '20px',
+                            minHeight: '20px',
+                            minWidth: '20px'
+                        }}
+                        title="Copy all reference lyrics"
+                    >
+                        <ContentCopyIcon sx={{ fontSize: '1rem' }} />
+                    </IconButton>
+                </Box>
+                <SourceSelector
+                    availableSources={availableSources}
+                    currentSource={effectiveCurrentSource}
+                    onSourceChange={onSourceChange}
+                    onAddLyrics={onAddLyrics}
+                />
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.2 }}>
+                {currentSourceSegments.map((segment, index) => (
+                    <Box 
+                        key={index} 
+                        sx={{ 
+                            display: 'flex', 
+                            alignItems: 'flex-start', 
+                            width: '100%', 
+                            mb: 0,
+                            '&:hover': {
+                                backgroundColor: 'rgba(0, 0, 0, 0.03)'
+                            }
+                        }}
+                    >
+                        <SegmentControls>
+                            <IconButton
+                                size="small"
+                                onClick={() => copyToClipboard(segment.words.map(w => w.text).join(' '))}
+                                sx={{ 
+                                    padding: '1px',
+                                    height: '18px',
+                                    width: '18px',
+                                    minHeight: '18px',
+                                    minWidth: '18px'
+                                }}
+                            >
+                                <ContentCopyIcon sx={{ fontSize: '0.9rem' }} />
+                            </IconButton>
+                        </SegmentControls>
+                        <TextContainer>
+                            <HighlightedText
+                                wordPositions={referenceWordPositions.filter(wp => 
+                                    segment.words.some(w => w.id === wp.word.id)
+                                )}
+                                segments={[segment]}
+                                anchors={anchors}
+                                onElementClick={onElementClick}
+                                onWordClick={onWordClick}
+                                flashingType={flashingType}
+                                highlightInfo={highlightInfo}
+                                mode={mode}
+                                isReference={true}
+                                currentSource={effectiveCurrentSource}
+                                linePositions={linePositions}
+                                referenceCorrections={referenceCorrections}
+                                gaps={gaps}
+                                preserveSegments={true}
+                            />
+                        </TextContainer>
+                    </Box>
+                ))}
+            </Box>
+        </Paper>
+    )
+}