karaoke-gen 0.75.54__py3-none-any.whl

lyrics_transcriber/frontend/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.7.0.cjs

lyrics_transcriber/frontend/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

lyrics_transcriber/frontend/REPLACE_ALL_FUNCTIONALITY.md

@@ -0,0 +1,210 @@
+Please read this doc to understand the "Replace All" modal we implemented in a previous chat: @REPLACE_ALL_FUNCTIONALITY.md 
+
+The primary code for the new modal is here: @ReplaceAllLyricsModal.tsx 
+but the manual sync functionality relies heavily on @EditTimelineSection.tsx, @useManualSync.ts  and @EditActionBar.tsx 
+
+The functionality mostly works but we need to continue refining it and fixing issues until it is good enough for me and other users to use. Please let me know once you've reviewed the above and you're ready for me to explain the first issue.
+
+# Replace All Lyrics Functionality
+
+## Overview
+
+The "Replace All Lyrics" functionality provides a complete solution for replacing transcribed lyrics when the original transcription quality is too poor to edit word-by-word. This feature allows users to start fresh with clipboard content and manually sync timing for the entire song.
+
+## Key Components
+
+### 1. ReplaceAllLyricsModal.tsx
+- **Location**: `src/components/ReplaceAllLyricsModal.tsx`
+- **Purpose**: Standalone modal for replacing all lyrics with clipboard content
+- **Design**: Separate from EditModal.tsx to maintain clean separation of concerns
+
+### 2. Integration Points
+- **useManualSync Hook**: Reuses existing manual sync functionality
+- **AudioPlayer Integration**: Leverages global audio controls and duration
+- **Types**: Uses existing LyricsSegment and Word types
+
+## User Workflow
+
+### Phase 1: Input
+1. **Open Modal**: Access via "Replace All Lyrics" button/action
+2. **Paste Content**: Large textarea for pasting lyrics from clipboard
+3. **Real-time Feedback**: 
+   - Line count display
+   - Word count display
+   - Preview of how content will be parsed
+4. **Validation**: Ensures content is not empty before proceeding
+
+### Phase 2: Manual Sync
+1. **Automatic Conversion**: Each line becomes a LyricsSegment, each word becomes a Word object
+2. **Timeline View**: 
+   - Fixed 30-second zoom window
+   - Shows entire song duration (0 to audio duration)
+   - Visual indicators for word positions
+3. **Manual Timing**: 
+   - Spacebar to mark word timings during playback
+   - Pause/resume functionality for corrections
+   - Real-time progress tracking
+4. **Progress Panel**: 
+   - Shows all segments with sync status
+   - Active segment highlighting (blue)
+   - Completed segments (green) with timing display
+   - Progress indicators (X/Y words synced)
+   - Auto-scroll to follow playback
+
+## Technical Implementation
+
+### Data Structure
+```typescript
+// Each line becomes a LyricsSegment
+{
+  id: string,
+  text: string, // Full line text
+  start_time: number | null,
+  end_time: number | null,
+  words: Word[] // Each word in the line
+}
+
+// Each word becomes a Word object
+{
+  id: string,
+  text: string, // Individual word
+  start_time: number | null,
+  end_time: number | null,
+  confidence: number // Set to 1.0 for manual entries
+}
+```
+
+### Modal Layout
+- **Full Browser Width**: Uses `maxWidth={false}` and viewport-based calculations
+- **Split Layout**: 
+  - Timeline Section: 2/3 width
+  - Progress Panel: 1/3 width
+- **Responsive Design**: Adapts to different screen sizes
+
+### Audio Integration
+- **Duration Detection**: Uses `window.getAudioDuration()` for accurate song length
+- **Playback Control**: Integrates with existing audio controls
+- **Auto-cleanup**: Stops audio when canceling sync
+
+## Key Features Implemented
+
+### 1. Stable Timeline View
+- **Fixed Zoom**: Always shows 30-second window
+- **Full Song Range**: Timeline spans 0 to full audio duration
+- **Prevents Zoom Changes**: Disabled during manual sync to maintain consistency
+
+### 2. Manual Sync Enhancement
+- **Spacebar Timing**: Press spacebar to mark word timings
+- **Pause/Resume**: Alt+P to pause/resume for corrections
+- **Visual Feedback**: 
+  - Current word highlighting
+  - Spacebar press indication
+  - Progress tracking
+
+### 3. Progress Tracking
+- **Segment Status**: Visual indicators for sync progress
+- **Real-time Updates**: Timing updates as words are synced
+- **Auto-scroll**: Follows active segment during sync
+- **Completion Status**: Clear visual feedback for completed segments
+
+### 4. Error Prevention
+- **Input Validation**: Ensures content exists before proceeding
+- **Safe Navigation**: Proper cleanup when canceling
+- **State Management**: Prevents conflicts with existing edit modals
+
+## Bug Fixes Implemented
+
+### 1. Manual Sync Issues
+- **Problem**: Sync stopping after first spacebar press
+- **Solution**: Fixed infinite re-renders in useEffect dependencies
+- **Result**: Stable manual sync throughout entire song
+
+### 2. Timeline Zoom Problems
+- **Problem**: Timeline zooming to single word duration after sync
+- **Solution**: Fixed timeRange calculation to always use full song duration
+- **Result**: Consistent 30-second view regardless of sync progress
+
+### 3. Audio Duration
+- **Problem**: Hardcoded duration fallbacks causing inaccurate timelines
+- **Solution**: Integration with real audio duration from AudioPlayer
+- **Result**: Accurate timeline representation of song length
+
+### 4. Keyboard Conflicts
+- **Problem**: Multiple keyboard handlers causing conflicts
+- **Solution**: Proper handler cleanup and event management
+- **Result**: Clean keyboard interaction without conflicts
+
+## User Experience Improvements
+
+### 1. Visual Feedback
+- **Real-time Counts**: Live word/line counting during input
+- **Progress Indicators**: Clear visual feedback on sync progress
+- **Color Coding**: Blue for active, green for completed segments
+
+### 2. Navigation
+- **Auto-scroll**: Automatically follows playback position
+- **Manual Navigation**: Can manually scroll through segments
+- **Status Preservation**: Maintains state during navigation
+
+### 3. Error Recovery
+- **Pause/Resume**: Ability to pause and correct timing
+- **Cancel Support**: Safe cancellation with proper cleanup
+- **State Reset**: Clean state management between sessions
+
+## Integration with Existing Codebase
+
+### 1. Reused Components
+- **useManualSync**: Leverages existing manual sync logic
+- **Timeline Components**: Reuses timeline visualization
+- **Audio Controls**: Integrates with existing audio system
+
+### 2. Type Safety
+- **TypeScript**: Fully typed implementation
+- **Consistent Interfaces**: Uses existing type definitions
+- **Validation**: Runtime validation for data integrity
+
+### 3. State Management
+- **Isolated State**: Doesn't interfere with existing edit functionality
+- **Clean Separation**: Separate modal for replace vs. edit operations
+- **Proper Cleanup**: Ensures no state leakage between modals
+
+## Performance Considerations
+
+### 1. Rendering Optimization
+- **Memoization**: Strategic use of React.memo and useCallback
+- **Efficient Updates**: Minimal re-renders during sync
+- **Progressive Loading**: Handles large lyric sets efficiently
+
+### 2. Memory Management
+- **Cleanup**: Proper cleanup of event listeners and timers
+- **State Reset**: Clean state management between sessions
+- **Audio Integration**: Efficient audio control integration
+
+## Future Enhancement Opportunities
+
+### 1. Batch Operations
+- **Multi-line Selection**: Select and sync multiple segments at once
+- **Timing Adjustment**: Bulk timing adjustments
+- **Smart Defaults**: AI-suggested timing based on audio analysis
+
+### 2. Import/Export
+- **Format Support**: Support for various lyric file formats
+- **Backup/Restore**: Save and restore sync sessions
+- **Templates**: Predefined timing templates
+
+### 3. Advanced Sync
+- **Beat Detection**: Automatic beat-based timing suggestions
+- **Voice Activity**: Audio analysis for timing hints
+- **Collaborative Sync**: Multi-user timing collaboration
+
+## Summary
+
+The "Replace All Lyrics" functionality provides a comprehensive solution for handling poor-quality transcriptions by:
+
+1. **Complete Replacement**: Replaces all existing lyrics with fresh clipboard content
+2. **Manual Control**: Gives users full control over timing through manual sync
+3. **Visual Feedback**: Provides clear progress tracking and status indicators
+4. **Stable Interface**: Maintains consistent timeline view throughout the process
+5. **Clean Integration**: Works seamlessly with existing audio and editing systems
+
+This implementation significantly improves the user experience for cases where starting fresh is more efficient than editing individual words, while maintaining the high-quality timing precision needed for karaoke applications. 

lyrics_transcriber/frontend/__init__.py

@@ -0,0 +1,25 @@
+"""Frontend module for lyrics transcriber web interface."""
+
+import os
+
+# Get the directory containing this file
+__frontend_dir__ = os.path.dirname(os.path.abspath(__file__))
+
+def get_frontend_assets_dir():
+    """Get the path to the frontend assets directory.
+    
+    Returns the web_assets directory if it exists (packaged version),
+    otherwise returns the dist directory (development version).
+    """
+    web_assets_dir = os.path.join(__frontend_dir__, "web_assets")
+    dist_dir = os.path.join(__frontend_dir__, "dist")
+    
+    if os.path.exists(web_assets_dir):
+        return web_assets_dir
+    elif os.path.exists(dist_dir):
+        return dist_dir
+    else:
+        raise FileNotFoundError(
+            "Frontend assets not found. Please build the frontend first with: "
+            "./scripts/build_frontend.sh"
+        ) 

lyrics_transcriber/frontend/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

lyrics_transcriber/frontend/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
+    <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nomad Karaoke: Lyrics Review</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

lyrics_transcriber/frontend/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "lyrics-transcriber-frontend",
+  "private": true,
+  "homepage": "https://nomadkaraoke.github.io/lyrics-transcriber-frontend",
+  "version": "0.83.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build --mode development",
+    "build-prod": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "predeploy": "npm run build-prod",
+    "deploy": "gh-pages -d dist"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.3.0",
+    "@mui/material": "^6.3.0",
+    "@mui/system": "^6.4.3",
+    "nanoid": "^5.0.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "gh-pages": "^6.3.0",
+    "globals": "^15.14.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  },
+  "packageManager": "yarn@4.7.0"
+}

lyrics_transcriber/frontend/src/App.tsx

@@ -0,0 +1,214 @@
+import UploadFileIcon from '@mui/icons-material/UploadFile'
+import { Alert, Box, Button, Modal, Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { ApiClient, FileOnlyClient, LiveApiClient } from './api'
+import CorrectionMetrics from './components/CorrectionMetrics'
+import LyricsAnalyzer from './components/LyricsAnalyzer'
+import { CorrectionData } from './types'
+
+export default function App() {
+  const [data, setData] = useState<CorrectionData | null>(null)
+  const [showMetadata, setShowMetadata] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [apiClient, setApiClient] = useState<ApiClient | null>(null)
+  const [isReadOnly, setIsReadOnly] = useState(true)
+  const [audioHash, setAudioHash] = useState<string>('')
+
+  useEffect(() => {
+    // Parse query parameters
+    const params = new URLSearchParams(window.location.search)
+    const encodedApiUrl = params.get('baseApiUrl')
+    const audioHashParam = params.get('audioHash')
+    const reviewTokenParam = params.get('reviewToken')
+
+    if (encodedApiUrl) {
+      const baseApiUrl = decodeURIComponent(encodedApiUrl)
+      // Pass reviewToken to LiveApiClient for authentication
+      setApiClient(new LiveApiClient(baseApiUrl, reviewTokenParam || undefined))
+      setIsReadOnly(false)
+      if (audioHashParam) {
+        setAudioHash(audioHashParam)
+      }
+      // Fetch initial data
+      fetchData(baseApiUrl, reviewTokenParam || undefined)
+    } else {
+      setApiClient(new FileOnlyClient())
+      setIsReadOnly(true)
+    }
+  }, [])
+
+  const fetchData = async (baseUrl: string, reviewToken?: string) => {
+    try {
+      const client = new LiveApiClient(baseUrl, reviewToken)
+      const data = await client.getCorrectionData()
+      // console.log('Full correction data from API:', data)
+      setData(data)
+    } catch (err) {
+      const error = err as Error
+      setError(`Failed to fetch data: ${error.message}`)
+    }
+  }
+
+  const handleFileLoad = async () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.json'
+
+    input.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (!file) return
+
+      try {
+        const text = await file.text()
+        const parsedData = JSON.parse(text) as CorrectionData
+        console.log('File data loaded:', {
+          sampleGap: parsedData.gap_sequences?.[0],
+          sampleWord: parsedData.corrected_segments?.[0]?.words?.[0],
+          sampleCorrection: parsedData.corrections?.[0]
+        })
+
+        // Validate the structure
+        if (!parsedData.corrected_segments || !parsedData.gap_sequences) {
+          throw new Error('Invalid file format: missing required fields')
+        }
+
+        setData(parsedData)
+      } catch (err) {
+        const error = err as Error
+        setError(`Error loading file: ${error.message}. Please make sure it is a valid JSON file.`)
+      }
+    }
+
+    input.click()
+  }
+
+  const renderMetadataModal = () => {
+    if (!data) return null
+
+    return (
+      <Modal
+        open={showMetadata}
+        onClose={() => setShowMetadata(false)}
+        aria-labelledby="metadata-modal"
+      >
+        <Box sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 400,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4,
+          borderRadius: 1,
+        }}>
+          <Typography variant="h6" gutterBottom>
+            Correction Process Details
+          </Typography>
+          <Box sx={{ mb: 2 }}>
+            <Typography variant="subtitle2" color="text.secondary">
+              Total Words
+            </Typography>
+            <Typography>
+              {data.metadata.total_words}
+            </Typography>
+          </Box>
+          <Box sx={{ mb: 2 }}>
+            <Typography variant="subtitle2" color="text.secondary">
+              Gap Sequences
+            </Typography>
+            <Typography>
+              {data.metadata.gap_sequences_count}
+            </Typography>
+          </Box>
+          <Box sx={{ mb: 2 }}>
+            <Typography variant="subtitle2" color="text.secondary">
+              Corrections Made
+            </Typography>
+            <Typography>
+              {data.corrections_made}
+            </Typography>
+          </Box>
+          <Box sx={{ mb: 2 }}>
+            <Typography variant="subtitle2" color="text.secondary">
+              Correction Ratio
+            </Typography>
+            <Typography>
+              {(data.metadata.correction_ratio * 100).toFixed(1)}%
+            </Typography>
+          </Box>
+          {/* Add any other metadata fields that are available */}
+        </Box>
+      </Modal>
+    )
+  }
+
+  if (!data) {
+    return (
+      <Box sx={{ p: 3 }}>
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
+            {error}
+          </Alert>
+        )}
+        {isReadOnly ? (
+          <>
+            <Alert severity="info" sx={{ mb: 2 }}>
+              Running in read-only mode. Connect to an API to enable editing.
+            </Alert>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+              <Typography variant="h4">
+                Lyrics Correction Review
+              </Typography>
+              <Button
+                variant="outlined"
+                startIcon={<UploadFileIcon />}
+                onClick={handleFileLoad}
+              >
+                Load File
+              </Button>
+            </Box>
+            <Box sx={{ mb: 3 }}>
+              <CorrectionMetrics />
+            </Box>
+          </>
+        ) : (
+          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+            <Typography variant="h6" color="text.secondary">
+              Loading Lyrics Correction Review...
+            </Typography>
+          </Box>
+        )}
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={{
+      p: 1.5,
+      pb: 3,
+      maxWidth: '100%',
+      overflowX: 'hidden'
+    }}>
+      {error && (
+        <Alert severity="error" sx={{ mb: 1 }} onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      )}
+      {isReadOnly && (
+        <Alert severity="info" sx={{ mb: 1 }}>
+          Running in read-only mode. Connect to an API to enable editing.
+        </Alert>
+      )}
+      <LyricsAnalyzer
+        data={data}
+        onFileLoad={handleFileLoad}
+        onShowMetadata={() => setShowMetadata(true)}
+        apiClient={apiClient}
+        isReadOnly={isReadOnly}
+        audioHash={audioHash}
+      />
+      {renderMetadataModal()}
+    </Box>
+  )
+}