lyrics-transcriber 0.34.0__py3-none-any.whl → 0.34.2__py3-none-any.whl

lyrics_transcriber/frontend/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "lyrics-transcriber-frontend",
+  "private": true,
+  "homepage": "https://nomadkaraoke.github.io/lyrics-transcriber-frontend",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "predeploy": "npm run build",
+    "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",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.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"
+  }
+}

lyrics_transcriber/frontend/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

lyrics_transcriber/frontend/src/App.tsx

@@ -0,0 +1,192 @@
+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)
+
+  useEffect(() => {
+    // Parse query parameters
+    const params = new URLSearchParams(window.location.search)
+    const encodedApiUrl = params.get('baseApiUrl')
+
+    if (encodedApiUrl) {
+      const baseApiUrl = decodeURIComponent(encodedApiUrl)
+      setApiClient(new LiveApiClient(baseApiUrl))
+      setIsReadOnly(false)
+      // Fetch initial data
+      fetchData(baseApiUrl)
+    } else {
+      setApiClient(new FileOnlyClient())
+      setIsReadOnly(true)
+    }
+  }, [])
+
+  const fetchData = async (baseUrl: string) => {
+    try {
+      const client = new LiveApiClient(baseUrl)
+      const data = await client.getCorrectionData()
+      console.log('Fetched data:', 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()
+        console.log('File contents:', text.slice(0, 500) + '...') // Show first 500 chars
+        const parsedData = JSON.parse(text) as CorrectionData
+        console.log('Parsed file data:', parsedData)
+        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: 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>
+      )}
+      <LyricsAnalyzer
+        data={data}
+        onFileLoad={handleFileLoad}
+        onShowMetadata={() => setShowMetadata(true)}
+        apiClient={apiClient}
+        isReadOnly={isReadOnly}
+      />
+      {renderMetadataModal()}
+    </Box>
+  )
+}

lyrics_transcriber/frontend/src/api.ts

@@ -0,0 +1,59 @@
+import { CorrectionData } from './types';
+
+// New file to handle API communication
+export interface ApiClient {
+    getCorrectionData: () => Promise<CorrectionData>;
+    submitCorrections: (data: CorrectionData) => Promise<void>;
+}
+
+// Add new interface for the minimal update payload
+interface CorrectionUpdate {
+    corrections: CorrectionData['corrections'];
+    corrected_segments: CorrectionData['corrected_segments'];
+}
+
+export class LiveApiClient implements ApiClient {
+    constructor(private baseUrl: string) {
+        this.baseUrl = baseUrl.replace(/\/$/, '')
+    }
+
+    async getCorrectionData(): Promise<CorrectionData> {
+        const response = await fetch(`${this.baseUrl}/correction-data`);
+        if (!response.ok) {
+            throw new Error(`API error: ${response.statusText}`);
+        }
+        const data = await response.json();
+        return data;
+    }
+
+    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}`);
+        }
+    }
+}
+
+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');
+    }
+}

lyrics_transcriber/frontend/src/components/CorrectionMetrics.tsx

@@ -0,0 +1,155 @@
+import { Grid, Paper, Box, Typography } from '@mui/material'
+import { COLORS } from './constants'
+
+interface MetricProps {
+    color?: string
+    label: string
+    value: string | number
+    description: string
+    details?: Array<{ label: string, value: number }>
+    onClick?: () => void
+}
+
+function Metric({ color, label, value, description, details, onClick }: MetricProps) {
+    return (
+        <Paper
+            sx={{
+                p: 2,
+                cursor: onClick ? 'pointer' : 'default',
+                '&:hover': onClick ? {
+                    bgcolor: 'action.hover'
+                } : undefined
+            }}
+            onClick={onClick}
+        >
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                {color && (
+                    <Box
+                        sx={{
+                            width: 16,
+                            height: 16,
+                            borderRadius: 1,
+                            bgcolor: color,
+                            mr: 1,
+                        }}
+                    />
+                )}
+                <Typography variant="subtitle2" color="text.secondary">
+                    {label}
+                </Typography>
+            </Box>
+            <Typography variant="h6">
+                {value}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+                {description}
+            </Typography>
+            {details && (
+                <Box sx={{ mt: 1, pt: 1, borderTop: 1, borderColor: 'divider' }}>
+                    {details.map((detail, index) => (
+                        <Box key={index} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 0.5 }}>
+                            <Typography variant="caption" color="text.secondary">
+                                {detail.label}
+                            </Typography>
+                            <Typography variant="caption">
+                                {detail.value}
+                            </Typography>
+                        </Box>
+                    ))}
+                </Box>
+            )}
+        </Paper>
+    )
+}
+
+interface CorrectionMetricsProps {
+    // Anchor metrics
+    anchorCount?: number
+    multiSourceAnchors?: number
+    singleSourceMatches?: {
+        spotify: number
+        genius: number
+    }
+    // Gap metrics
+    correctedGapCount?: number
+    uncorrectedGapCount?: number
+    uncorrectedGaps?: Array<{
+        position: number
+        length: number
+    }>
+    // Correction details
+    replacedCount?: number
+    addedCount?: number
+    deletedCount?: number
+    onMetricClick?: {
+        anchor?: () => void
+        corrected?: () => void
+        uncorrected?: () => void
+    }
+}
+
+export default function CorrectionMetrics({
+    anchorCount,
+    multiSourceAnchors = 0,
+    singleSourceMatches = { spotify: 0, genius: 0 },
+    correctedGapCount = 0,
+    uncorrectedGapCount = 0,
+    uncorrectedGaps = [],
+    replacedCount = 0,
+    addedCount = 0,
+    deletedCount = 0,
+    onMetricClick
+}: CorrectionMetricsProps) {
+    const formatPositionLabel = (position: number, length: number) => {
+        if (length === 1) {
+            return `Position ${position}`;
+        }
+        return `Positions ${position}-${position + length - 1}`;
+    };
+
+    return (
+        <Grid container spacing={2}>
+            <Grid item xs={12} sm={6} md={4}>
+                <Metric
+                    color={COLORS.anchor}
+                    label="Anchor Sequences"
+                    value={anchorCount ?? '-'}
+                    description="Matched sections between transcription and reference"
+                    details={[
+                        { label: "Multi-source Matches", value: multiSourceAnchors },
+                        { label: "Spotify Only", value: singleSourceMatches.spotify },
+                        { label: "Genius Only", value: singleSourceMatches.genius },
+                    ]}
+                    onClick={onMetricClick?.anchor}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <Metric
+                    color={COLORS.corrected}
+                    label="Corrected Gaps"
+                    value={correctedGapCount ?? '-'}
+                    description="Successfully corrected sections"
+                    details={[
+                        { label: "Words Replaced", value: replacedCount },
+                        { label: "Words Added", value: addedCount },
+                        { label: "Words Deleted", value: deletedCount },
+                    ]}
+                    onClick={onMetricClick?.corrected}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <Metric
+                    color={COLORS.uncorrectedGap}
+                    label="Uncorrected Gaps"
+                    value={uncorrectedGapCount}
+                    description="Sections that may need manual review"
+                    details={uncorrectedGaps.map(gap => ({
+                        label: formatPositionLabel(gap.position, gap.length),
+                        value: gap.length
+                    }))}
+                    onClick={onMetricClick?.uncorrected}
+                />
+            </Grid>
+        </Grid>
+    )
+}