karaoke-gen 0.103.1__py3-none-any.whl → 0.107.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/MetricsDashboard.tsx

@@ -1,51 +0,0 @@
-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/ModeSelectionModal.tsx

@@ -1,127 +0,0 @@
-import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    IconButton,
-    Box,
-    Button,
-    Typography,
-    Paper
-} from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
-import ContentPasteIcon from '@mui/icons-material/ContentPaste'
-import SyncIcon from '@mui/icons-material/Sync'
-
-interface ModeSelectionModalProps {
-    open: boolean
-    onClose: () => void
-    onSelectReplace: () => void  // Goes to paste phase for replacing all lyrics
-    onSelectResync: () => void   // Goes directly to sync view with existing lyrics
-    hasExistingLyrics: boolean   // Whether there are existing lyrics to re-sync
-}
-
-export default function ModeSelectionModal({
-    open,
-    onClose,
-    onSelectReplace,
-    onSelectResync,
-    hasExistingLyrics
-}: ModeSelectionModalProps) {
-    return (
-        <Dialog
-            open={open}
-            onClose={onClose}
-            maxWidth="sm"
-            fullWidth
-        >
-            <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <Box sx={{ flex: 1 }}>
-                    Edit All Lyrics
-                </Box>
-                <IconButton onClick={onClose} sx={{ ml: 'auto' }}>
-                    <CloseIcon />
-                </IconButton>
-            </DialogTitle>
-
-            <DialogContent dividers>
-                <Typography variant="body1" sx={{ mb: 3 }}>
-                    Choose how you want to edit the lyrics:
-                </Typography>
-
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                    {/* Re-sync Existing option - only show if there are existing lyrics */}
-                    {hasExistingLyrics && (
-                        <Paper
-                            sx={{
-                                p: 2,
-                                cursor: 'pointer',
-                                border: 2,
-                                borderColor: 'primary.main',
-                                '&:hover': {
-                                    bgcolor: 'action.hover',
-                                    borderColor: 'primary.dark'
-                                }
-                            }}
-                            onClick={onSelectResync}
-                        >
-                            <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
-                                <SyncIcon color="primary" sx={{ fontSize: 40, mt: 0.5 }} />
-                                <Box>
-                                    <Typography variant="h6" color="primary">
-                                        Re-sync Existing Lyrics
-                                    </Typography>
-                                    <Typography variant="body2" color="text.secondary">
-                                        Keep the current lyrics text and fix timing issues.
-                                        Use this when lyrics are correct but timing has drifted,
-                                        especially in the second half of the song.
-                                    </Typography>
-                                    <Typography variant="caption" color="success.main" sx={{ mt: 1, display: 'block' }}>
-                                        Recommended for fixing timing drift
-                                    </Typography>
-                                </Box>
-                            </Box>
-                        </Paper>
-                    )}
-
-                    {/* Replace All option */}
-                    <Paper
-                        sx={{
-                            p: 2,
-                            cursor: 'pointer',
-                            border: 1,
-                            borderColor: 'divider',
-                            '&:hover': {
-                                bgcolor: 'action.hover',
-                                borderColor: 'text.secondary'
-                            }
-                        }}
-                        onClick={onSelectReplace}
-                    >
-                        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
-                            <ContentPasteIcon sx={{ fontSize: 40, mt: 0.5, color: 'text.secondary' }} />
-                            <Box>
-                                <Typography variant="h6">
-                                    Replace All Lyrics
-                                </Typography>
-                                <Typography variant="body2" color="text.secondary">
-                                    Paste completely new lyrics from clipboard and manually
-                                    sync timing for all words from scratch.
-                                </Typography>
-                                <Typography variant="caption" color="warning.main" sx={{ mt: 1, display: 'block' }}>
-                                    All existing timing data will be lost
-                                </Typography>
-                            </Box>
-                        </Box>
-                    </Paper>
-                </Box>
-            </DialogContent>
-
-            <DialogActions>
-                <Button onClick={onClose} color="inherit">
-                    Cancel
-                </Button>
-            </DialogActions>
-        </Dialog>
-    )
-}

lyrics_transcriber/frontend/src/components/ModeSelector.tsx

@@ -1,67 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,177 +0,0 @@
-import { Box, Typography, CircularProgress, Alert, Button, FormControlLabel, Checkbox } from '@mui/material'
-import { useState, useEffect, useCallback } 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' });
-
-    // Toggle for rendering with theme background image (slower) vs black background (faster)
-    const [useBackgroundImage, setUseBackgroundImage] = useState(false);
-
-    // Memoized function to generate preview
-    const generatePreview = useCallback(async () => {
-        if (!apiClient) return;
-
-        setPreviewState({ status: 'loading' });
-        try {
-            // Debug logging for timing offset
-            console.log(`[TIMING] PreviewVideoSection - Current timing offset: ${timingOffsetMs}ms`);
-            console.log(`[PREVIEW] Using background image: ${useBackgroundImage}`);
-
-            // 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, {
-                use_background_image: useBackgroundImage
-            });
-
-            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'
-            });
-        }
-    }, [apiClient, updatedData, timingOffsetMs, useBackgroundImage]);
-
-    // Generate preview when modal opens or when background toggle changes
-    useEffect(() => {
-        if (isModalOpen && apiClient) {
-            generatePreview();
-        }
-    }, [isModalOpen, apiClient, generatePreview]);
-
-    if (!apiClient) return null;
-
-    return (
-        <Box sx={{ mb: 2 }}>
-            {/* Background image toggle */}
-            <Box sx={{ px: 2, pt: 2, pb: 1 }}>
-                <FormControlLabel
-                    control={
-                        <Checkbox
-                            checked={useBackgroundImage}
-                            onChange={(e) => setUseBackgroundImage(e.target.checked)}
-                            disabled={previewState.status === 'loading'}
-                            size="small"
-                        />
-                    }
-                    label={
-                        <Box>
-                            <Typography variant="body2" component="span">
-                                Render with theme background
-                            </Typography>
-                            <Typography variant="caption" color="text.secondary" display="block">
-                                Preview uses black background for speed (~10s). Enable for theme background (~30-60s).
-                            </Typography>
-                        </Box>
-                    }
-                />
-            </Box>
-
-            {previewState.status === 'loading' && (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, p: 2 }}>
-                    <CircularProgress size={24} />
-                    <Typography>Generating preview video{useBackgroundImage ? ' with theme background' : ''}...</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>
-    );
-}