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

lyrics_transcriber/frontend/src/api.ts

@@ -0,0 +1,239 @@
+import { CorrectionData, CorrectionAnnotation } from './types';
+import { validateCorrectionData } from './validation';
+
+// New file to handle API communication
+export interface ApiClient {
+    getCorrectionData: () => Promise<CorrectionData>;
+    submitCorrections: (data: CorrectionData) => Promise<void>;
+    getAudioUrl: (audioHash: string) => string;
+    generatePreviewVideo: (data: CorrectionData) => Promise<PreviewVideoResponse>;
+    getPreviewVideoUrl: (previewHash: string) => string;
+    updateHandlers: (enabledHandlers: string[]) => Promise<CorrectionData>;
+    isUpdatingHandlers?: boolean;
+    addLyrics: (source: string, lyrics: string) => Promise<CorrectionData>;
+    submitAnnotations: (annotations: Omit<CorrectionAnnotation, 'annotation_id' | 'timestamp'>[]) => Promise<void>;
+    getAnnotationStats: () => Promise<any>;
+}
+
+// Add new interface for the minimal update payload
+interface CorrectionUpdate {
+    corrections: CorrectionData['corrections'];
+    corrected_segments: CorrectionData['corrected_segments'];
+}
+
+// Add new interface for preview response
+interface PreviewVideoResponse {
+    status: "success" | "error";
+    preview_hash?: string;
+    message?: string;
+}
+
+// Add new interface for adding lyrics
+interface AddLyricsRequest {
+    source: string;
+    lyrics: string;
+}
+
+export class LiveApiClient implements ApiClient {
+    constructor(private baseUrl: string) {
+        this.baseUrl = baseUrl.replace(/\/$/, '')
+    }
+
+    public isUpdatingHandlers = false;
+
+    async getCorrectionData(): Promise<CorrectionData> {
+        const response = await fetch(`${this.baseUrl}/correction-data`);
+        if (!response.ok) {
+            throw new Error(`API error: ${response.statusText}`);
+        }
+        const rawData = await response.json();
+
+        try {
+            // This will throw if validation fails
+            return validateCorrectionData(rawData);
+        } catch (error) {
+            console.error('Data validation failed:', error);
+            throw new Error('Invalid data received from server: missing or incorrect fields');
+        }
+    }
+
+    async submitCorrections(data: CorrectionData): Promise<void> {
+        // Extract only the needed fields
+        const updatePayload: CorrectionUpdate = {
+            corrections: data.corrections,
+            corrected_segments: data.corrected_segments
+        };
+
+        const response = await fetch(`${this.baseUrl}/complete`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(updatePayload)
+        });
+
+        if (!response.ok) {
+            throw new Error(`API error: ${response.statusText}`);
+        }
+    }
+
+    getAudioUrl(audioHash: string): string {
+        return `${this.baseUrl}/audio/${audioHash}`
+    }
+
+    async generatePreviewVideo(data: CorrectionData): Promise<PreviewVideoResponse> {
+        // Extract only the needed fields, just like in submitCorrections
+        const updatePayload: CorrectionUpdate = {
+            corrections: data.corrections,
+            corrected_segments: data.corrected_segments
+        };
+
+        const response = await fetch(`${this.baseUrl}/preview-video`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(updatePayload)
+        });
+
+        if (!response.ok) {
+            return {
+                status: 'error',
+                message: `API error: ${response.statusText}`
+            };
+        }
+
+        return await response.json();
+    }
+
+    getPreviewVideoUrl(previewHash: string): string {
+        return `${this.baseUrl}/preview-video/${previewHash}`;
+    }
+
+    async updateHandlers(enabledHandlers: string[]): Promise<CorrectionData> {
+        console.log('API: Starting handler update...');
+        this.isUpdatingHandlers = true;
+        console.log('API: Set isUpdatingHandlers to', this.isUpdatingHandlers);
+        
+        try {
+            const response = await fetch(`${this.baseUrl}/handlers`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(enabledHandlers)
+            });
+
+            if (!response.ok) {
+                throw new Error(`API error: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+            if (data.status === 'error') {
+                throw new Error(data.message || 'Failed to update handlers');
+            }
+
+            console.log('API: Handler update successful');
+            return validateCorrectionData(data.data);
+        } finally {
+            this.isUpdatingHandlers = false;
+            console.log('API: Set isUpdatingHandlers to', this.isUpdatingHandlers);
+        }
+    }
+
+    async addLyrics(source: string, lyrics: string): Promise<CorrectionData> {
+        const payload: AddLyricsRequest = {
+            source,
+            lyrics
+        };
+
+        const response = await fetch(`${this.baseUrl}/add-lyrics`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload)
+        });
+
+        if (!response.ok) {
+            throw new Error(`API error: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        if (data.status === 'error') {
+            throw new Error(data.message || 'Failed to add lyrics');
+        }
+
+        return validateCorrectionData(data.data);
+    }
+
+    async submitAnnotations(annotations: Omit<CorrectionAnnotation, 'annotation_id' | 'timestamp'>[]): Promise<void> {
+        // Submit each annotation to the backend
+        for (const annotation of annotations) {
+            const response = await fetch(`${this.baseUrl}/v1/annotations`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(annotation)
+            });
+
+            if (!response.ok) {
+                console.error(`Failed to submit annotation:`, annotation);
+                // Continue with other annotations even if one fails
+            }
+        }
+    }
+
+    async getAnnotationStats(): Promise<any> {
+        const response = await fetch(`${this.baseUrl}/v1/annotations/stats`);
+        if (!response.ok) {
+            throw new Error(`API error: ${response.statusText}`);
+        }
+        return await response.json();
+    }
+}
+
+export class FileOnlyClient implements ApiClient {
+    async getCorrectionData(): Promise<CorrectionData> {
+        throw new Error('Not supported in file-only mode');
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async submitCorrections(_data: CorrectionData): Promise<void> {
+        throw new Error('Not supported in file-only mode');
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getAudioUrl(_audioHash: string): string {
+        throw new Error('Not supported in file-only mode');
+    }
+
+    async generatePreviewVideo(): Promise<PreviewVideoResponse> {
+        throw new Error('Not supported in file-only mode');
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getPreviewVideoUrl(_previewHash: string): string {
+        throw new Error('Not supported in file-only mode');
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async updateHandlers(_enabledHandlers: string[]): Promise<CorrectionData> {
+        throw new Error('Not supported in file-only mode');
+    }
+
+    async addLyrics(): Promise<CorrectionData> {
+        throw new Error('Not supported in file-only mode');
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async submitAnnotations(_annotations: Omit<CorrectionAnnotation, 'annotation_id' | 'timestamp'>[]): Promise<void> {
+        throw new Error('Not supported in file-only mode');
+    }
+
+    async getAnnotationStats(): Promise<any> {
+        throw new Error('Not supported in file-only mode');
+    }
+}
+

lyrics_transcriber/frontend/src/components/AIFeedbackModal.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (payload: { reviewerAction: string; finalText?: string; reasonCategory: string; reasonDetail?: string }) => void;
+  suggestion?: { text: string; reasoning?: string; confidence?: number };
+};
+
+export const AIFeedbackModal: React.FC<Props> = ({ isOpen, onClose, onSubmit, suggestion }) => {
+  const [reviewerAction, setAction] = React.useState("ACCEPT");
+  const [finalText, setFinalText] = React.useState("");
+  const [reasonCategory, setReason] = React.useState("AI_CORRECT");
+  const [reasonDetail, setDetail] = React.useState("");
+
+  if (!isOpen) return null;
+
+  return (
+    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <div style={{ background: "#fff", padding: 16, width: 480, borderRadius: 8 }}>
+        <h3>AI Suggestion</h3>
+        <p style={{ marginTop: 8 }}>
+          {suggestion?.text ?? "No suggestion"}
+          {suggestion?.confidence != null ? ` (confidence ${Math.round((suggestion.confidence || 0) * 100)}%)` : null}
+        </p>
+        {suggestion?.reasoning ? <small>{suggestion.reasoning}</small> : null}
+
+        <div style={{ marginTop: 12 }}>
+          <label>Action</label>
+          <select value={reviewerAction} onChange={(e) => setAction(e.target.value)} style={{ marginLeft: 8 }}>
+            <option value="ACCEPT">Accept</option>
+            <option value="REJECT">Reject</option>
+            <option value="MODIFY">Modify</option>
+          </select>
+        </div>
+
+        {reviewerAction === "MODIFY" ? (
+          <div style={{ marginTop: 12 }}>
+            <label>Final Text</label>
+            <input value={finalText} onChange={(e) => setFinalText(e.target.value)} style={{ marginLeft: 8, width: "100%" }} />
+          </div>
+        ) : null}
+
+        <div style={{ marginTop: 12 }}>
+          <label>Reason</label>
+          <select value={reasonCategory} onChange={(e) => setReason(e.target.value)} style={{ marginLeft: 8 }}>
+            <option value="AI_CORRECT">AI_CORRECT</option>
+            <option value="AI_INCORRECT">AI_INCORRECT</option>
+            <option value="AI_SUBOPTIMAL">AI_SUBOPTIMAL</option>
+            <option value="CONTEXT_NEEDED">CONTEXT_NEEDED</option>
+            <option value="SUBJECTIVE_PREFERENCE">SUBJECTIVE_PREFERENCE</option>
+          </select>
+        </div>
+
+        <div style={{ marginTop: 12 }}>
+          <label>Details</label>
+          <textarea value={reasonDetail} onChange={(e) => setDetail(e.target.value)} style={{ marginLeft: 8, width: "100%" }} />
+        </div>
+
+        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 }}>
+          <button onClick={onClose}>Cancel</button>
+          <button
+            onClick={() =>
+              onSubmit({ reviewerAction, finalText: finalText || undefined, reasonCategory, reasonDetail: reasonDetail || undefined })
+            }
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AIFeedbackModal;
+
+

lyrics_transcriber/frontend/src/components/AddLyricsModal.tsx

@@ -0,0 +1,114 @@
+import { useState } from 'react'
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    TextField,
+    Box,
+    CircularProgress,
+    Typography
+} from '@mui/material'
+
+interface AddLyricsModalProps {
+    open: boolean
+    onClose: () => void
+    onSubmit: (source: string, lyrics: string) => Promise<void>
+    isSubmitting: boolean
+}
+
+export default function AddLyricsModal({
+    open,
+    onClose,
+    onSubmit,
+    isSubmitting
+}: AddLyricsModalProps) {
+    const [source, setSource] = useState('')
+    const [lyrics, setLyrics] = useState('')
+    const [error, setError] = useState<string | null>(null)
+
+    const handleSubmit = async () => {
+        if (!source.trim()) {
+            setError('Please enter a source name')
+            return
+        }
+        if (!lyrics.trim()) {
+            setError('Please enter lyrics text')
+            return
+        }
+
+        try {
+            await onSubmit(source.trim(), lyrics.trim())
+            // Reset form on success
+            setSource('')
+            setLyrics('')
+            setError(null)
+            onClose()
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to add lyrics')
+        }
+    }
+
+    const handleClose = () => {
+        // Don't allow closing if currently submitting
+        if (isSubmitting) return
+
+        setSource('')
+        setLyrics('')
+        setError(null)
+        onClose()
+    }
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            maxWidth="md"
+            fullWidth
+            disableEscapeKeyDown={isSubmitting}
+        >
+            <DialogTitle>Add Reference Lyrics</DialogTitle>
+            <DialogContent>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
+                    {error && (
+                        <Typography color="error" variant="body2">
+                            {error}
+                        </Typography>
+                    )}
+                    <TextField
+                        label="Source Name"
+                        value={source}
+                        onChange={(e) => setSource(e.target.value)}
+                        disabled={isSubmitting}
+                        fullWidth
+                        placeholder="e.g., Official Lyrics, Album Booklet"
+                    />
+                    <TextField
+                        label="Lyrics"
+                        value={lyrics}
+                        onChange={(e) => setLyrics(e.target.value)}
+                        disabled={isSubmitting}
+                        fullWidth
+                        multiline
+                        rows={10}
+                        placeholder="Paste lyrics text here (one line per segment)"
+                    />
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose} disabled={isSubmitting}>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleSubmit}
+                    variant="contained"
+                    disabled={isSubmitting}
+                    startIcon={isSubmitting ? <CircularProgress size={20} /> : undefined}
+                >
+                    {isSubmitting ? 'Adding...' : 'Add Lyrics'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+} 

lyrics_transcriber/frontend/src/components/AgenticCorrectionMetrics.tsx

@@ -0,0 +1,204 @@
+import { Paper, Box, Typography, Chip, Tooltip } from '@mui/material'
+import { WordCorrection } from '../types'
+import { useMemo } from 'react'
+
+interface GapCategoryMetric {
+    category: string
+    count: number
+    avgConfidence: number
+    corrections: WordCorrection[]
+}
+
+interface AgenticCorrectionMetricsProps {
+    corrections: WordCorrection[]
+    onCategoryClick?: (category: string) => void
+    onConfidenceFilterClick?: (filter: 'low' | 'high') => void
+}
+
+export default function AgenticCorrectionMetrics({
+    corrections,
+    onCategoryClick,
+    onConfidenceFilterClick
+}: AgenticCorrectionMetricsProps) {
+    
+    const metrics = useMemo(() => {
+        // Filter only agentic corrections
+        const agenticCorrections = corrections.filter(c => c.handler === 'AgenticCorrector')
+        
+        // Parse category from reason string (format: "reason [CATEGORY] (confidence: XX%)")
+        const categoryMap = new Map<string, GapCategoryMetric>()
+        
+        agenticCorrections.forEach(correction => {
+            const categoryMatch = correction.reason?.match(/\[([A-Z_]+)\]/)
+            const category = categoryMatch ? categoryMatch[1] : 'UNKNOWN'
+            
+            if (!categoryMap.has(category)) {
+                categoryMap.set(category, {
+                    category,
+                    count: 0,
+                    avgConfidence: 0,
+                    corrections: []
+                })
+            }
+            
+            const metric = categoryMap.get(category)!
+            metric.count++
+            metric.corrections.push(correction)
+        })
+        
+        // Calculate average confidence for each category
+        categoryMap.forEach((metric) => {
+            const totalConfidence = metric.corrections.reduce((sum, c) => sum + c.confidence, 0)
+            metric.avgConfidence = totalConfidence / metric.count
+        })
+        
+        // Convert to array and sort by count descending
+        const sortedMetrics = Array.from(categoryMap.values()).sort((a, b) => b.count - a.count)
+        
+        // Calculate overall stats
+        const totalCorrections = agenticCorrections.length
+        const avgConfidence = totalCorrections > 0
+            ? agenticCorrections.reduce((sum, c) => sum + c.confidence, 0) / totalCorrections
+            : 0
+        
+        const lowConfidenceCount = agenticCorrections.filter(c => c.confidence < 0.6).length
+        const highConfidenceCount = agenticCorrections.filter(c => c.confidence >= 0.8).length
+        
+        return {
+            categories: sortedMetrics,
+            totalCorrections,
+            avgConfidence,
+            lowConfidenceCount,
+            highConfidenceCount
+        }
+    }, [corrections])
+    
+    // Format category name for display
+    const formatCategory = (category: string): string => {
+        return category
+            .split('_')
+            .map(word => word.charAt(0) + word.slice(1).toLowerCase())
+            .join(' ')
+    }
+    
+    // Get emoji/icon for category
+    const getCategoryIcon = (category: string): string => {
+        const icons: Record<string, string> = {
+            'SOUND_ALIKE': '🎵',
+            'PUNCTUATION_ONLY': '✏️',
+            'BACKGROUND_VOCALS': '🎤',
+            'EXTRA_WORDS': '➕',
+            'REPEATED_SECTION': '🔁',
+            'COMPLEX_MULTI_ERROR': '🔧',
+            'AMBIGUOUS': '❓',
+            'NO_ERROR': '✅'
+        }
+        return icons[category] || '📝'
+    }
+    
+    return (
+        <Paper
+            sx={{
+                p: 0.8,
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column'
+            }}
+        >
+            <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 0.5, fontSize: '0.7rem' }}>
+                Agentic AI Corrections
+            </Typography>
+            
+            {/* Overall stats */}
+            <Box sx={{ mb: 1 }}>
+                <Typography variant="body2" sx={{ fontSize: '0.75rem', mb: 0.3 }}>
+                    Total: <strong>{metrics.totalCorrections}</strong>
+                </Typography>
+                <Typography variant="body2" sx={{ fontSize: '0.75rem', mb: 0.5 }}>
+                    Avg Confidence: <strong>{(metrics.avgConfidence * 100).toFixed(0)}%</strong>
+                </Typography>
+                
+                {/* Quick filters */}
+                <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
+                    <Chip
+                        label={`Low (<60%): ${metrics.lowConfidenceCount}`}
+                        size="small"
+                        variant="outlined"
+                        color="warning"
+                        onClick={() => onConfidenceFilterClick?.('low')}
+                        sx={{ fontSize: '0.65rem', height: '20px', cursor: 'pointer' }}
+                    />
+                    <Chip
+                        label={`High (≥80%): ${metrics.highConfidenceCount}`}
+                        size="small"
+                        variant="outlined"
+                        color="success"
+                        onClick={() => onConfidenceFilterClick?.('high')}
+                        sx={{ fontSize: '0.65rem', height: '20px', cursor: 'pointer' }}
+                    />
+                </Box>
+            </Box>
+            
+            {/* Category breakdown */}
+            <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 0.5, fontSize: '0.7rem' }}>
+                By Category
+            </Typography>
+            <Box sx={{ flex: 1, overflow: 'auto' }}>
+                {metrics.categories.map((metric) => (
+                    <Box
+                        key={metric.category}
+                        sx={{
+                            mb: 0.5,
+                            p: 0.5,
+                            borderRadius: 1,
+                            cursor: 'pointer',
+                            '&:hover': {
+                                bgcolor: 'action.hover'
+                            }
+                        }}
+                        onClick={() => onCategoryClick?.(metric.category)}
+                    >
+                        <Tooltip
+                            title={`${metric.count} correction${metric.count !== 1 ? 's' : ''} • Avg confidence: ${(metric.avgConfidence * 100).toFixed(0)}%`}
+                            placement="right"
+                        >
+                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                                    <span style={{ fontSize: '0.85rem' }}>{getCategoryIcon(metric.category)}</span>
+                                    <Typography variant="body2" sx={{ fontSize: '0.7rem' }}>
+                                        {formatCategory(metric.category)}
+                                    </Typography>
+                                </Box>
+                                <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
+                                    <Typography variant="body2" sx={{ fontSize: '0.65rem', color: 'text.secondary' }}>
+                                        {(metric.avgConfidence * 100).toFixed(0)}%
+                                    </Typography>
+                                    <Typography
+                                        variant="body2"
+                                        sx={{
+                                            fontSize: '0.7rem',
+                                            fontWeight: 600,
+                                            bgcolor: 'action.selected',
+                                            px: 0.5,
+                                            borderRadius: 0.5,
+                                            minWidth: '24px',
+                                            textAlign: 'center'
+                                        }}
+                                    >
+                                        {metric.count}
+                                    </Typography>
+                                </Box>
+                            </Box>
+                        </Tooltip>
+                    </Box>
+                ))}
+                {metrics.categories.length === 0 && (
+                    <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.7rem', fontStyle: 'italic' }}>
+                        No agentic corrections
+                    </Typography>
+                )}
+            </Box>
+        </Paper>
+    )
+}
+