feat: implement download functionality for filtered dataset entries as ZIP

src/app/actions/download-filtered-entries.ts

@@ -0,0 +1,102 @@
+'use server';
+
+import { requireAdmin } from '@/lib/auth';
+import db from '@/lib/db';
+import { dataset_entry } from '@/lib/model/dataset_entry';
+import { eq, and } from 'drizzle-orm';
+import * as fs from 'fs';
+import * as path from 'path';
+
+interface FilterParams {
+  speakerId?: string;
+  modelName?: string;
+  dialect?: string;
+  iteration?: number;
+  utteranceId?: string;
+}
+
+export async function downloadFilteredEntries(
+  datasetId: number,
+  filters: FilterParams
+) {
+  const result = await requireAdmin();
+  if (!result.authenticated || !result.admin) {
+    throw new Error('Unauthorized');
+  }
+  // Build the where clause based on active filters
+  const conditions = [eq(dataset_entry.datasetId, datasetId)];
+
+  if (filters.speakerId) {
+    conditions.push(eq(dataset_entry.speakerId, filters.speakerId));
+  }
+  if (filters.modelName) {
+    conditions.push(eq(dataset_entry.modelName, filters.modelName));
+  }
+  if (filters.dialect) {
+    conditions.push(eq(dataset_entry.dialect, filters.dialect));
+  }
+  if (filters.iteration !== undefined) {
+    conditions.push(eq(dataset_entry.iteration, filters.iteration));
+  }
+  if (filters.utteranceId) {
+    conditions.push(eq(dataset_entry.utteranceId, filters.utteranceId));
+  }
+
+  // Fetch all matching entries
+  const entries = await db
+    .select()
+    .from(dataset_entry)
+    .where(conditions.length > 1 ? and(...conditions) : conditions[0]);
+
+  // Create CSV content
+  const headers = [
+    'id',    
+    'audio_file',
+    'duration_ms',
+    'utt_id',
+    'text',
+    'speaker',
+    'model',
+    'dialect',
+    'iteration',
+  ];
+
+  const csvLines = [headers.join(',')];
+  entries.forEach((entry) => {
+    const row = [
+      `"${entry.externalId}"`,
+      entry.fileName,
+      '',
+      entry.utteranceId || '',
+      `"${(entry.utteranceText || '').replace(/"/g, '""')}"`,
+      entry.speakerId,
+      entry.modelName,
+      entry.dialect,
+      entry.iteration,
+    ];
+    csvLines.push(row.join(','));
+  });
+
+  const csvContent = csvLines.join('\n');
+
+  // Create filter metadata JSON
+  const filterMetadata = {
+    exportedAt: new Date().toISOString(),
+    datasetId,
+    filters,
+    entriesCount: entries.length,
+  };
+
+  const metadataContent = JSON.stringify(filterMetadata, null, 2);
+
+  // Return the data that will be zipped on the client
+  return {
+    csvContent,
+    metadataContent,
+    entriesCount: entries.length,
+    entries: entries.map(entry => ({
+      id: entry.externalId,
+      fileName: entry.fileName,
+    })),
+  };
+}

src/app/actions/remove-dataset-entries.ts

@@ -7,9 +7,14 @@ import { revalidatePath } from 'next/cache';
 import { rm } from 'fs/promises';
 import { join } from 'path';
 import { existsSync } from 'fs';
+import { requireAdmin } from '@/lib/auth';
 
 export async function removeAllDatasetEntries(datasetId: number) {
   try {
+    const result = await requireAdmin();
+    if (!result.authenticated || !result.admin) {
+      throw new Error('Unauthorized');
+    }
     // Delete all entries from database
     await db.delete(dataset_entry).where(eq(dataset_entry.datasetId, datasetId));
 

src/app/api/download-filtered-entries/route.ts

@@ -0,0 +1,106 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { downloadFilteredEntries } from '@/app/actions/download-filtered-entries';
+import JSZip from 'jszip';
+import { join } from 'path';
+import { readFile, existsSync } from 'fs';
+import { promisify } from 'util';
+import { requireAdmin } from '@/lib/auth';
+
+const readFileAsync = promisify(readFile);
+
+interface FilterParams {
+  speakerId?: string;
+  modelName?: string;
+  dialect?: string;
+  iteration?: number;
+  utteranceId?: string;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const resultAdmin = await requireAdmin();
+    if (!resultAdmin.authenticated || !resultAdmin.admin) {
+      return NextResponse.json(
+        { error: 'Unauthorized' },
+        { status: 401 }
+      );
+    }
+    const body = await request.json();
+    const { datasetId, filters } = body;
+
+    if (!datasetId) {
+      return NextResponse.json(
+        { error: 'datasetId is required' },
+        { status: 400 }
+      );
+    }
+
+    // Get filtered entries data from server action
+    const result = await downloadFilteredEntries(datasetId, filters || {});
+
+    // Create ZIP on server
+    const zip = new JSZip();
+
+    // Add CSV file
+    zip.file('metadata.csv', result.csvContent);
+
+    // Add metadata JSON
+    zip.file('filter-metadata.json', result.metadataContent);
+
+    // Add audio files to 'audio' folder
+    if (result.entries && result.entries.length > 0) {
+      const audioFolder = zip.folder('wavs');
+      if (audioFolder) {
+        let filesAdded = 0;
+        for (const entry of result.entries) {
+          try {
+            const fileExtension = entry.fileName.substring(entry.fileName.lastIndexOf('.'));
+            const audioPath = join(
+              process.cwd(),
+              'public',
+              'datasets',
+              datasetId.toString(),
+              `${entry.id}${fileExtension}`
+            );
+
+            if (existsSync(audioPath)) {
+              const fileBuffer = await readFileAsync(audioPath);
+              const fileName = `${entry.id}${fileExtension}`;
+              audioFolder.file(fileName, fileBuffer);
+              filesAdded++;
+            } else {
+              console.warn(`Audio file not found: ${audioPath}`);
+            }
+          } catch (error) {
+            console.error(`Failed to add audio file for entry ${entry.id}:`, error);
+            // Continue with other files
+          }
+        }
+        console.log(`Added ${filesAdded}/${result.entries.length} audio files to ZIP`);
+      }
+    } else {
+      console.warn('No entries to add audio files for');
+    }
+
+    // Generate ZIP blob
+    const zipBuffer = await zip.generateAsync({ type: 'nodebuffer' });
+
+    // Create response with ZIP file
+    const fileName = `dataset-${datasetId}-export-${new Date().toISOString().split('T')[0]}.zip`;
+
+    return new NextResponse(new Uint8Array(zipBuffer), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/zip',
+        'Content-Disposition': `attachment; filename="${fileName}"`,
+        'Content-Length': zipBuffer.length.toString(),
+      },
+    });
+  } catch (error) {
+    console.error('Error creating ZIP:', error);
+    return NextResponse.json(
+      { error: 'Failed to create ZIP file' },
+      { status: 500 }
+    );
+  }
+}

src/components/DatasetEntriesList.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import AudioPlayer from './AudioPlayer';
 import { getDatasetEntries } from '@/app/actions/get-dataset-entries';
 import { getFilterOptions } from '@/app/actions/get-filter-options';
+import { downloadFilteredEntriesAsZip } from '@/lib/download-utils';
 
 interface DatasetEntriesListProps {
   datasetId: number;
@@ -38,6 +39,7 @@ export default function DatasetEntriesList({
 }: DatasetEntriesListProps) {
   const [entries, setEntries] = useState<DatasetEntry[]>([]);
   const [loading, setLoading] = useState(false);
+  const [downloading, setDownloading] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(0);
@@ -145,6 +147,26 @@ export default function DatasetEntriesList({
     });
   }
 
+  async function handleDownloadFiltered() {
+    setDownloading(true);
+    try {
+      const filterParams = {
+        speakerId: filters.speakerId || undefined,
+        modelName: filters.modelName || undefined,
+        dialect: filters.dialect || undefined,
+        iteration: filters.iteration ? parseInt(filters.iteration, 10) : undefined,
+        utteranceId: filters.utteranceId || undefined,
+      };
+
+      await downloadFilteredEntriesAsZip(datasetId, filterParams);
+    } catch (error) {
+      console.error('Error downloading entries:', error);
+      alert('Failed to download entries. Please try again.');
+    } finally {
+      setDownloading(false);
+    }
+  }
+
   if (entries.length === 0 && !loading) {
     return (
       <div className="bg-white rounded-lg shadow p-6">
@@ -154,12 +176,21 @@ export default function DatasetEntriesList({
         <div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
           <div className="flex items-center justify-between mb-4">
             <h3 className="text-lg font-semibold text-gray-700">Filters</h3>
-            <button
-              onClick={handleClearFilters}
-              className="text-sm text-blue-500 hover:text-blue-600"
-            >
-              Clear all
-            </button>
+            <div className="flex gap-3">
+              <button
+                onClick={handleDownloadFiltered}
+                disabled={downloading || total === 0}
+                className="text-sm px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+              >
+                {downloading ? 'Downloading...' : 'Download as ZIP'}
+              </button>
+              <button
+                onClick={handleClearFilters}
+                className="text-sm text-blue-500 hover:text-blue-600"
+              >
+                Clear all
+              </button>
+            </div>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
           <div>
@@ -263,12 +294,21 @@ export default function DatasetEntriesList({
       <div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
         <div className="flex items-center justify-between mb-4">
           <h3 className="text-lg font-semibold text-gray-700">Filters</h3>
-          <button
-            onClick={handleClearFilters}
-            className="text-sm text-blue-500 hover:text-blue-600"
-          >
-            Clear all
-          </button>
+          <div className="flex gap-3">
+            <button
+              onClick={handleDownloadFiltered}
+              disabled={downloading || total === 0}
+              className="text-sm px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+            >
+              {downloading ? 'Downloading...' : 'Download as ZIP'}
+            </button>
+            <button
+              onClick={handleClearFilters}
+              className="text-sm text-blue-500 hover:text-blue-600"
+            >
+              Clear all
+            </button>
+          </div>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
           <div>

src/lib/download-utils.ts

@@ -0,0 +1,46 @@
+interface FilterParams {
+  speakerId?: string;
+  modelName?: string;
+  dialect?: string;
+  iteration?: number | string;
+  utteranceId?: string;
+}
+
+export async function downloadFilteredEntriesAsZip(
+  datasetId: number,
+  filters: FilterParams
+) {
+  try {
+    const response = await fetch('/api/download-filtered-entries', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        datasetId,
+        filters,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || 'Failed to download ZIP');
+    }
+
+    // Get the ZIP blob from response
+    const blob = await response.blob();
+
+    // Trigger download
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `dataset-${datasetId}-export-${new Date().toISOString().split('T')[0]}.zip`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error('Error downloading ZIP:', error);
+    throw error;
+  }
+}