Fix UI: input text visibility in dark mode, proper styling

src/app/api/export-dataset/route.ts

@@ -2,28 +2,23 @@ import { NextResponse } from 'next/server';
 import { promises as fs } from 'fs';
 import path from 'path';
 import archiver from 'archiver';
-import { getDataPath, sanitizePath } from '@/lib/dataPath';
+import { getDataDir, getAudioPath, getTranscriptionsPath, getMetadataPath } from '@/lib/dataPath';
 
 export async function GET(request: Request) {
     const { searchParams } = new URL(request.url);
-    const datasetName = searchParams.get('dataset_name');
+    const speakerId = searchParams.get('speaker_id');
 
-    if (!datasetName) {
-        return NextResponse.json({ error: 'Dataset name required' }, { status: 400 });
-    }
-
-    // Sanitize dataset name to prevent path traversal
-    const safeDatasetName = sanitizePath(datasetName);
-    const datasetDir = getDataPath(safeDatasetName);
+    // Get the base data directory
+    const dataDir = getDataDir();
 
     try {
-        await fs.access(datasetDir);
+        await fs.access(dataDir);
     } catch {
-        return NextResponse.json({ error: 'Dataset not found' }, { status: 404 });
+        return NextResponse.json({ error: 'Data directory not found' }, { status: 404 });
     }
 
     const archive = archiver('zip', {
-        zlib: { level: 9 } // Sets the compression level.
+        zlib: { level: 9 }
     });
 
     const stream = new ReadableStream({
@@ -41,36 +36,75 @@ export async function GET(request: Request) {
                 controller.error(err);
             });
 
-            // Generate metadata.csv for LJSpeech compatibility
             try {
-                const metadataPath = path.join(datasetDir, 'dataset_info.json');
-                const metadataContent = await fs.readFile(metadataPath, 'utf-8');
-                const metadata = JSON.parse(metadataContent);
-
-                if (metadata.recordings && Array.isArray(metadata.recordings)) {
-                    const csvContent = metadata.recordings.map((r: { filename?: string; text?: string }) =>
-                        `${r.filename || ''}|${r.text || ''}`
-                    ).join('\n');
-                    archive.append(csvContent, { name: 'metadata.csv' });
+                // Generate metadata.csv for LJSpeech compatibility
+                const metadataPath = path.join(getMetadataPath(), 'dataset_info.json');
+                try {
+                    const metadataContent = await fs.readFile(metadataPath, 'utf-8');
+                    const metadata = JSON.parse(metadataContent);
+
+                    if (metadata.recordings && Array.isArray(metadata.recordings)) {
+                        const csvContent = metadata.recordings.map((r: { filename?: string; text?: string }) =>
+                            `${r.filename || ''}|${r.text || ''}`
+                        ).join('\n');
+                        archive.append(csvContent, { name: 'metadata.csv' });
+                    }
+                } catch {
+                    console.warn('Could not generate metadata.csv');
+                }
+
+                // If speaker_id is provided, only export that speaker's data
+                if (speakerId) {
+                    const audioDir = getAudioPath(speakerId);
+                    const textDir = getTranscriptionsPath(speakerId);
+
+                    try {
+                        await fs.access(audioDir);
+                        archive.directory(audioDir, `audio/${speakerId}`);
+                    } catch {
+                        // No audio for this speaker
+                    }
+
+                    try {
+                        await fs.access(textDir);
+                        archive.directory(textDir, `transcriptions/${speakerId}`);
+                    } catch {
+                        // No transcriptions for this speaker
+                    }
+                } else {
+                    // Export all data
+                    const audioDir = getAudioPath();
+                    const textDir = getTranscriptionsPath();
+
+                    try {
+                        await fs.access(audioDir);
+                        archive.directory(audioDir, 'audio');
+                    } catch {
+                        // No audio folder
+                    }
+
+                    try {
+                        await fs.access(textDir);
+                        archive.directory(textDir, 'transcriptions');
+                    } catch {
+                        // No transcriptions folder
+                    }
                 }
-            } catch (e) {
-                console.warn('Could not generate metadata.csv', e);
-            }
 
-            try {
-                archive.directory(datasetDir, false);
                 archive.finalize();
             } catch (error) {
-                console.error('Error finalizing archive:', error);
+                console.error('Error creating archive:', error);
                 controller.error(error);
             }
         }
     });
 
+    const filename = speakerId ? `dataset_${speakerId}.zip` : 'dataset_full.zip';
+
     return new NextResponse(stream, {
         headers: {
             'Content-Type': 'application/zip',
-            'Content-Disposition': `attachment; filename="${safeDatasetName}.zip"`
+            'Content-Disposition': `attachment; filename="${filename}"`
         }
     });
 }

src/app/globals.css

@@ -82,4 +82,44 @@
 
 .glass-card {
     @apply bg-card/50 backdrop-blur-md border border-border/50 shadow-xl;
+}
+
+/* Form Elements */
+.label {
+    @apply block text-sm font-medium text-foreground mb-1.5;
+}
+
+.input {
+    @apply w-full px-4 py-2.5 rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all;
+}
+
+textarea.input {
+    @apply min-h-[100px] resize-y;
+}
+
+/* Buttons */
+.btn {
+    @apply px-4 py-2.5 rounded-lg font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+.btn-primary {
+    @apply bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-primary;
+}
+
+.btn-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:ring-secondary;
+}
+
+.btn-ghost {
+    @apply bg-transparent hover:bg-secondary text-foreground;
+}
+
+/* Container */
+.container {
+    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+}
+
+/* Sentence Display */
+.sentence-display {
+    @apply text-2xl md:text-3xl font-medium leading-relaxed text-center py-8 px-4;
 }