karaoke-gen 0.99.3__py3-none-any.whl → 0.101.0__py3-none-any.whl

lyrics_transcriber/frontend/src/api.ts

@@ -6,7 +6,7 @@ export interface ApiClient {
     getCorrectionData: () => Promise<CorrectionData>;
     submitCorrections: (data: CorrectionData) => Promise<void>;
     getAudioUrl: (audioHash: string) => string;
-    generatePreviewVideo: (data: CorrectionData) => Promise<PreviewVideoResponse>;
+    generatePreviewVideo: (data: CorrectionData, options?: PreviewOptions) => Promise<PreviewVideoResponse>;
     getPreviewVideoUrl: (previewHash: string) => string;
     updateHandlers: (enabledHandlers: string[]) => Promise<CorrectionData>;
     isUpdatingHandlers?: boolean;
@@ -21,6 +21,11 @@ interface CorrectionUpdate {
     corrected_segments: CorrectionData['corrected_segments'];
 }
 
+// Add interface for preview generation options
+export interface PreviewOptions {
+    use_background_image?: boolean;
+}
+
 // Add new interface for preview response
 interface PreviewVideoResponse {
     status: "success" | "error";
@@ -96,11 +101,13 @@ export class LiveApiClient implements ApiClient {
         return this.buildUrl(`/audio/${audioHash}`)
     }
 
-    async generatePreviewVideo(data: CorrectionData): Promise<PreviewVideoResponse> {
+    async generatePreviewVideo(data: CorrectionData, options?: PreviewOptions): Promise<PreviewVideoResponse> {
         // Extract only the needed fields, just like in submitCorrections
-        const updatePayload: CorrectionUpdate = {
+        // Include use_background_image option (defaults to false for fast black background)
+        const updatePayload = {
             corrections: data.corrections,
-            corrected_segments: data.corrected_segments
+            corrected_segments: data.corrected_segments,
+            use_background_image: options?.use_background_image ?? false,
         };
 
         const response = await fetch(this.buildUrl('/preview-video'), {
@@ -224,7 +231,8 @@ export class FileOnlyClient implements ApiClient {
         throw new Error('Not supported in file-only mode');
     }
 
-    async generatePreviewVideo(): Promise<PreviewVideoResponse> {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async generatePreviewVideo(_data: CorrectionData, _options?: PreviewOptions): Promise<PreviewVideoResponse> {
         throw new Error('Not supported in file-only mode');
     }
 

lyrics_transcriber/frontend/src/components/PreviewVideoSection.tsx

@@ -1,5 +1,5 @@
-import { Box, Typography, CircularProgress, Alert, Button } from '@mui/material'
-import { useState, useEffect } from 'react'
+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'
@@ -25,75 +25,108 @@ export default function PreviewVideoSection({
         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;
-                    }
+    // Toggle for rendering with theme background image (slower) vs black background (faster)
+    const [useBackgroundImage, setUseBackgroundImage] = useState(false);
 
-                    if (!response.preview_hash) {
-                        setPreviewState({
-                            status: 'error',
-                            error: 'No preview hash received from server'
-                        });
-                        return;
-                    }
+    // 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;
 
-                    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'
-                    });
+            // 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, updatedData, timingOffsetMs]);
+    }, [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...</Typography>
+                    <Typography>Generating preview video{useBackgroundImage ? ' with theme background' : ''}...</Typography>
                 </Box>
             )}