added backend-mgmt for dataset/dataset_entry and utterances, this includes upload and also displaying of the dataset on the admin pages

This commit is contained in:
averel10
2026-03-05 11:31:06 +01:00
parent 28c45bc133
commit c08dc46305
33 changed files with 5609 additions and 37 deletions

View File

@@ -0,0 +1,46 @@
'use server';
import db from '@/lib/db';
import { dataset } from '@/lib/model/dataset';
import { eq } from 'drizzle-orm';
import { revalidatePath } from 'next/cache';
export async function createDataset({ name }: { name: string }) {
if (!name || !name.trim()) {
throw new Error('Dataset name is required');
}
try {
const result = await db.insert(dataset).values({ name: name.trim() });
revalidatePath('/admin');
return result;
} catch (error) {
console.error('Error creating dataset:', error);
throw new Error('Failed to create dataset');
}
}
export async function updateDataset(
id: number,
updates: { name?: string }
) {
if (updates.name !== undefined && !updates.name.trim()) {
throw new Error('Dataset name cannot be empty');
}
try {
const result = await db
.update(dataset)
.set({
name: updates.name?.trim(),
updatedAt: new Date(),
})
.where(eq(dataset.id, id));
revalidatePath(`/admin/datasets/${id}`);
revalidatePath('/admin');
return result;
} catch (error) {
console.error('Error updating dataset:', error);
throw new Error('Failed to update dataset');
}
}

View File

@@ -0,0 +1,70 @@
'use server';
import db from '@/lib/db';
import { dataset_entry } from '@/lib/model/dataset_entry';
import { count, eq, and, like } from 'drizzle-orm';
const ENTRIES_PER_PAGE = 20;
interface FilterParams {
speakerId?: string;
modelName?: string;
dialect?: string;
iteration?: number;
utteranceId?: string;
}
export async function getDatasetEntries(
datasetId: number,
page: number = 1,
filters?: FilterParams
) {
const offset = (page - 1) * ENTRIES_PER_PAGE;
// Build where conditions
const conditions = [eq(dataset_entry.datasetId, datasetId)];
if (filters?.speakerId) {
conditions.push(like(dataset_entry.speakerId, `%${filters.speakerId}%`));
}
if (filters?.modelName) {
conditions.push(like(dataset_entry.modelName, `%${filters.modelName}%`));
}
if (filters?.dialect) {
conditions.push(like(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));
}
const whereClause = and(...conditions);
const entries = await db
.select()
.from(dataset_entry)
.where(whereClause)
.limit(ENTRIES_PER_PAGE)
.offset(offset);
const totalResult = await db
.select({ count: count() })
.from(dataset_entry)
.where(whereClause);
const total = totalResult[0]?.count || 0;
const hasMore = offset + ENTRIES_PER_PAGE < total;
return {
entries,
hasMore,
total,
page,
};
}

View File

@@ -0,0 +1,27 @@
'use server';
import db from '@/lib/db';
import { dataset_entry } from '@/lib/model/dataset_entry';
import { eq } from 'drizzle-orm';
export async function getFilterOptions(datasetId: number) {
const entries = await db
.select()
.from(dataset_entry)
.where(eq(dataset_entry.datasetId, datasetId));
// Extract unique values for each filter
const speakerIds = [...new Set(entries.map(e => e.speakerId))].sort();
const modelNames = [...new Set(entries.map(e => e.modelName))].sort();
const dialects = [...new Set(entries.map(e => e.dialect))].sort();
const iterations = [...new Set(entries.map(e => e.iteration))].sort((a, b) => a - b);
const utteranceIds = [...new Set(entries.map(e => e.utteranceId).filter(Boolean))].sort();
return {
speakerIds,
modelNames,
dialects,
iterations,
utteranceIds,
};
}

View File

@@ -0,0 +1,34 @@
'use server';
import db from '@/lib/db';
import { dataset_entry } from '@/lib/model/dataset_entry';
import { eq } from 'drizzle-orm';
import { revalidatePath } from 'next/cache';
import { rm } from 'fs/promises';
import { join } from 'path';
import { existsSync } from 'fs';
export async function removeAllDatasetEntries(datasetId: number) {
try {
// Delete all entries from database
await db.delete(dataset_entry).where(eq(dataset_entry.datasetId, datasetId));
// Delete dataset files from public folder
const datasetDir = join(process.cwd(), 'public', 'datasets', datasetId.toString());
if (existsSync(datasetDir)) {
await rm(datasetDir, { recursive: true, force: true });
}
revalidatePath(`/admin/datasets/${datasetId}`);
return {
success: true,
message: 'All dataset entries have been removed',
};
} catch (error) {
console.error('Error removing dataset entries:', error);
throw new Error(
error instanceof Error ? error.message : 'Failed to remove dataset entries'
);
}
}

View File

@@ -0,0 +1,119 @@
'use server';
import db from '@/lib/db';
import { dataset_utterance } from '@/lib/model/utterance';
import { eq, and } from 'drizzle-orm';
import { revalidatePath } from 'next/cache';
export async function uploadDatasetUtterances(
datasetId: number,
formData: FormData
) {
const file = formData.get('file') as File;
if (!file) {
throw new Error('No file provided');
}
if (!file.name.endsWith('.csv')) {
throw new Error('File must be a CSV file');
}
try {
const csvContent = await file.text();
const lines = csvContent.split('\n').filter((line) => line.trim());
if (lines.length < 2) {
throw new Error('CSV is empty or invalid');
}
// Parse CSV header
const headers = lines[0].split(',').map((h) => h.trim());
if (!headers.includes('id') || !headers.includes('text')) {
throw new Error('CSV must have "id" and "text" columns');
}
// Get indices of id and text columns
const idIndex = headers.indexOf('id');
const textIndex = headers.indexOf('text');
// Parse utterances
const utterances: typeof dataset_utterance.$inferInsert[] = [];
for (let i = 1; i < lines.length; i++) {
// Handle CSV parsing with quotes
const line = lines[i];
const parts: string[] = [];
let current = '';
let inQuotes = false;
for (let j = 0; j < line.length; j++) {
const char = line[j];
const nextChar = line[j + 1];
if (char === '"') {
if (inQuotes && nextChar === '"') {
current += '"';
j++; // Skip next quote
} else {
inQuotes = !inQuotes;
}
} else if (char === ',' && !inQuotes) {
parts.push(current.trim());
current = '';
} else {
current += char;
}
}
parts.push(current.trim());
if (parts.length > Math.max(idIndex, textIndex)) {
const id = parts[idIndex]?.trim();
const text = parts[textIndex]?.trim();
if (id && text) {
utterances.push({
datasetId,
id,
text,
});
}
}
}
if (utterances.length === 0) {
throw new Error('No valid utterances found in CSV');
}
// Check for existing utterances to avoid duplicates
const existingUtterances = await db
.select({ id: dataset_utterance.id })
.from(dataset_utterance)
.where(eq(dataset_utterance.datasetId, datasetId));
const existingIds = new Set(existingUtterances.map((u) => u.id));
// Filter out duplicates
const newUtterances = utterances.filter((u) => !existingIds.has(u.id));
if (newUtterances.length === 0) {
throw new Error('All utterances already exist in the dataset');
}
// Insert new utterances into database
await db.insert(dataset_utterance).values(newUtterances);
revalidatePath(`/admin/datasets/${datasetId}`);
return {
success: true,
utterancesCreated: newUtterances.length,
};
} catch (error) {
console.error('Error uploading utterances:', error);
throw new Error(
error instanceof Error ? error.message : 'Failed to upload utterances'
);
}
}

157
src/app/actions/upload.ts Normal file
View File

@@ -0,0 +1,157 @@
'use server';
import db from '@/lib/db';
import { dataset_entry } from '@/lib/model/dataset_entry';
import { dataset_utterance } from '@/lib/model/utterance';
import { revalidatePath } from 'next/cache';
import { eq } from 'drizzle-orm';
import { writeFile, mkdir, readFile, rm, readdir } from 'fs/promises';
import { join } from 'path';
import { existsSync } from 'fs';
import extract from 'extract-zip';
interface DatasetEntryInput {
id: string;
audio_file: string;
duration_ms: string;
utt_id: string;
speaker: string;
model: string;
dialect: string;
iteration: string;
}
export async function uploadDatasetEntries(
datasetId: number,
formData: FormData
) {
const file = formData.get('file') as File;
if (!file) {
throw new Error('No file provided');
}
if (!file.name.endsWith('.zip')) {
throw new Error('File must be a ZIP archive');
}
const tempDir = join(process.cwd(), 'tmp', `upload-${Date.now()}`);
const datasetDir = join(process.cwd(), 'public', 'datasets', datasetId.toString());
try {
// Create temp directory
await mkdir(tempDir, { recursive: true });
// Save uploaded file to temp location
const tempZipPath = join(tempDir, file.name);
const arrayBuffer = await file.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);
await writeFile(tempZipPath, buffer);
// Extract ZIP file
await extract( tempZipPath, { dir: tempDir } );
// Read metadata.csv
const metadataPath = join(tempDir, 'metadata.csv');
if (!existsSync(metadataPath)) {
throw new Error('metadata.csv not found in ZIP');
}
const metadataContent = await readFile(metadataPath, 'utf-8');
const lines = metadataContent.split('\n').filter(line => line.trim());
if (lines.length < 2) {
throw new Error('metadata.csv is empty or invalid');
}
// Parse CSV header
const headers = lines[0].split(',').map(h => h.trim());
// Create dataset directory
await mkdir(datasetDir, { recursive: true });
// Parse and insert entries
const entries: typeof dataset_entry.$inferInsert[] = [];
for (let i = 1; i < lines.length; i++) {
const values = lines[i].split(',').map(v => v.trim());
if (values.length !== headers.length) {
continue; // Skip malformed lines
}
const row: Record<string, string> = {};
headers.forEach((header, index) => {
row[header] = values[index];
});
const audioFile = row.audio_file as string;
// Try different path separators and remove /output prefix
const relativePath = audioFile.replace(/\\/g, '/').replace(/^output\//, '');
const audioPath = join(tempDir, relativePath);
if (existsSync(audioPath)) {
// Copy audio file to dataset directory with external ID as filename
const audioBuffer = await readFile(audioPath);
const fileExtension = audioFile.substring(audioFile.lastIndexOf('.'));
const destPath = join(datasetDir, `${row.id}${fileExtension}`);
await writeFile(destPath, audioBuffer);
entries.push({
datasetId,
externalId: row.id,
speakerId: row.speaker,
modelName: row.model,
fileName: relativePath,
utteranceId: row.utt_id || undefined,
dialect: row.dialect,
iteration: parseInt(row.iteration, 10),
});
}
}
if (entries.length === 0) {
throw new Error('No valid entries found in metadata.csv');
}
// Check for existing entries to avoid duplicates
const existingEntries = await db
.select({ externalId: dataset_entry.externalId })
.from(dataset_entry)
.where(eq(dataset_entry.datasetId, datasetId));
const existingExternalIds = new Set(existingEntries.map(e => e.externalId));
// Filter out duplicates
const newEntries = entries.filter(entry => !existingExternalIds.has(entry.externalId));
if (newEntries.length === 0) {
throw new Error('All entries already exist in the dataset');
}
// Insert new entries into database
await db.insert(dataset_entry).values(newEntries);
revalidatePath(`/admin/datasets/${datasetId}`);
return {
success: true,
entriesCreated: entries.length,
};
} catch (error) {
console.error('Error uploading dataset entries:', error);
throw new Error(
error instanceof Error ? error.message : 'Failed to upload dataset entries'
);
} finally {
// Clean up temp directory
try {
if (existsSync(tempDir)) {
await rm(tempDir, { recursive: true, force: true });
}
} catch (cleanupError) {
console.error('Error cleaning up temp directory:', cleanupError);
}
}
}

View File

@@ -0,0 +1,135 @@
import Link from 'next/link';
import db from '@/lib/db';
import { dataset_entry } from '@/lib/model/dataset_entry';
import { dataset_utterance } from '@/lib/model/utterance';
import { eq } from 'drizzle-orm';
import AudioPlayer from '@/components/AudioPlayer';
interface DatasetEntryPageProps {
params: {
id: string;
entryId: string;
};
}
export default async function DatasetEntryPage({ params }: DatasetEntryPageProps) {
const { id: datasetId, entryId } = await params;
const datasetIdNum = parseInt(datasetId, 10);
const entryIdNum = parseInt(entryId, 10);
const entries = await db
.select()
.from(dataset_entry)
.where(eq(dataset_entry.id, entryIdNum));
if (entries.length === 0 || entries[0].datasetId !== datasetIdNum) {
return (
<div className="min-h-screen">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Link
href={`/admin/datasets/${datasetId}`}
className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
>
Back to Dataset
</Link>
<div className="bg-white rounded-lg shadow p-6">
<p className="text-gray-600">Dataset entry not found</p>
</div>
</div>
</div>
);
}
const entry = entries[0];
// Fetch utterance if utteranceId is present
let utterance = null;
if (entry.utteranceId) {
const utterances = await db
.select()
.from(dataset_utterance)
.where(eq(dataset_utterance.id, entry.utteranceId));
utterance = utterances.length > 0 ? utterances[0] : null;
}
return (
<div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Link
href={`/admin/datasets/${datasetId}`}
className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
>
Back to Dataset
</Link>
<div className="bg-white rounded-lg shadow p-6">
<h1 className="text-3xl font-bold mb-6">Dataset Entry Details</h1>
<div className="grid grid-cols-2 gap-6">
<div className="bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">Entry ID</p>
<p className="text-lg font-semibold">{entry.id}</p>
</div>
<div className="bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">External ID</p>
<p className="text-lg font-semibold">{entry.externalId}</p>
</div>
<div className="bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">Speaker ID</p>
<p className="text-lg font-semibold">{entry.speakerId}</p>
</div>
<div className="bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">Model Name</p>
<p className="text-lg font-semibold">{entry.modelName}</p>
</div>
<div className="bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">Dialect</p>
<p className="text-lg font-semibold">{entry.dialect}</p>
</div>
<div className="bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">Iteration</p>
<p className="text-lg font-semibold">{entry.iteration}</p>
</div>
<div className="col-span-2 bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">File Name</p>
<p className="text-lg font-semibold break-all">{entry.fileName}</p>
</div>
<div className="col-span-2 bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-3">Audio Player</p>
<AudioPlayer datasetId={datasetIdNum} fileName={entry.fileName} externalId={entry.externalId} />
</div>
{utterance && (
<div className="col-span-2 bg-blue-50 p-4 rounded-lg border border-blue-200">
<p className="text-sm font-semibold text-gray-700 mb-2">Utterance {entry.utteranceId}</p>
<p className="text-lg text-gray-800 leading-relaxed">{utterance.text}</p>
</div>
)}
<div className="bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">Created</p>
<p className="text-lg font-semibold">
{new Date(entry.createdAt).toLocaleDateString()}
</p>
</div>
<div className="bg-white border border-gray-200 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">Last Updated</p>
<p className="text-lg font-semibold">
{new Date(entry.updatedAt).toLocaleDateString()}
</p>
</div>
</div>
</div>
</div>
</div>
);
}

View File

@@ -0,0 +1,68 @@
import Link from 'next/link';
import db from '@/lib/db';
import { dataset } from '@/lib/model/dataset';
import { eq } from 'drizzle-orm';
import EditableDatasetHeader from '@/components/EditableDatasetHeader';
import DatasetEntriesList from '@/components/DatasetEntriesList';
import UploadDatasetEntriesModal from '@/components/UploadDatasetEntriesModal';
import UploadUtterancesModal from '@/components/UploadUtterancesModal';
import RemoveAllEntriesButton from '@/components/RemoveAllEntriesButton';
interface DatasetPageProps {
params: {
id: string;
};
}
export default async function DatasetPage({ params }: DatasetPageProps) {
const {id} = await params;
const datasetId = parseInt(id, 10);
const datasets = await db
.select()
.from(dataset)
.where(eq(dataset.id, datasetId));
if (datasets.length === 0) {
return (
<div className="min-h-screen">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Link
href="/admin"
className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
>
Back to Admin
</Link>
<div className="bg-white rounded-lg shadow p-6">
<p className="text-gray-600">Dataset not found</p>
</div>
</div>
</div>
);
}
const ds = datasets[0];
return (
<div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Link
href="/admin"
className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
>
Back to Admin
</Link>
<EditableDatasetHeader dataset={ds} />
<div className="flex gap-3 mb-6">
<UploadDatasetEntriesModal datasetId={datasetId} />
<UploadUtterancesModal datasetId={datasetId} />
<RemoveAllEntriesButton datasetId={datasetId} />
</div>
<DatasetEntriesList datasetId={datasetId} />
</div>
</div>
);
}

View File

@@ -1,12 +1,22 @@
import AuthRedirect from "@/components/AuthRedirect";
import DatasetsList from "@/components/DatasetsList";
import CreateDatasetModal from "@/components/CreateDatasetModal";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";
export default function AdminPage() {
export default async function AdminPage() {
const session = await auth.api.getSession({
headers: await headers()
})
if(!session) {
redirect("/user/sign-in")
}
return (
<div>
<AuthRedirect />
<h1>Admin Dashboard</h1>
<p>Welcome to the admin dashboard. Here you can manage the application.</p>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<CreateDatasetModal />
<DatasetsList />
</div>
);
}

View File

@@ -1,5 +0,0 @@
import { NextResponse } from "next/server";
export async function GET() {
return NextResponse.json({ message: "Hello world!" });
}

View File

@@ -1,6 +1,7 @@
import './globals.css';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { AudioProvider } from '@/components/AudioProvider';
export default function RootLayout({
children,
@@ -10,11 +11,13 @@ export default function RootLayout({
return (
<html>
<body className="flex flex-col min-h-screen">
<Header />
<main className="flex-grow mt-4 mb-4 mr-8 ml-8">
{children}
</main>
<Footer />
<AudioProvider>
<Header />
<main className="flex-grow mt-4 mb-4 mr-8 ml-8">
{children}
</main>
<Footer />
</AudioProvider>
</body>
</html>
)

View File

@@ -0,0 +1,83 @@
'use client';
import { useState, useRef, useEffect } from 'react';
import { useAudio } from './AudioProvider';
interface AudioPlayerProps {
fileName: string;
datasetId: number;
externalId?: string;
}
export default function AudioPlayer({ fileName, datasetId, externalId }: AudioPlayerProps) {
const [isPlaying, setIsPlaying] = useState(false);
const audioRef = useRef<HTMLAudioElement>(null);
const { currentAudioId, setCurrentAudio } = useAudio();
const audioId = `${datasetId}-${externalId}`;
// Extract file extension from original fileName and construct URL using externalId
const fileExtension = fileName.substring(fileName.lastIndexOf('.'));
const audioPath = `/datasets/${datasetId}/${externalId}${fileExtension}`;
// Stop playing if another audio started
useEffect(() => {
if (currentAudioId !== audioId && audioRef.current && isPlaying) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
setIsPlaying(false);
}
}, [currentAudioId, audioId, isPlaying]);
const handlePlay = () => {
if (audioRef.current) {
setCurrentAudio(audioId);
audioRef.current.currentTime = 0;
audioRef.current.play();
setIsPlaying(true);
}
};
const handleStop = () => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
setCurrentAudio(null);
setIsPlaying(false);
}
};
const handlePlaybackEnd = () => {
setIsPlaying(false);
setCurrentAudio(null);
};
return (
<div className="flex items-center gap-2">
<audio
ref={audioRef}
src={audioPath}
onEnded={handlePlaybackEnd}
/>
<button
onClick={isPlaying ? handleStop : handlePlay}
className={`inline-flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
isPlaying
? 'bg-red-500 hover:bg-red-600 text-white'
: 'bg-blue-500 hover:bg-blue-600 text-white'
}`}
title={isPlaying ? 'Stop' : 'Play'}
>
{isPlaying ? (
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<rect x="6" y="4" width="2" height="12" />
<rect x="12" y="4" width="2" height="12" />
</svg>
) : (
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
</svg>
)}
</button>
</div>
);
}

View File

@@ -0,0 +1,28 @@
'use client';
import React, { createContext, useContext, useState, ReactNode } from 'react';
interface AudioContextType {
currentAudioId: string | null;
setCurrentAudio: (id: string | null) => void;
}
const AudioContext = createContext<AudioContextType | undefined>(undefined);
export function AudioProvider({ children }: { children: ReactNode }) {
const [currentAudioId, setCurrentAudioId] = useState<string | null>(null);
return (
<AudioContext.Provider value={{ currentAudioId, setCurrentAudio: setCurrentAudioId }}>
{children}
</AudioContext.Provider>
);
}
export function useAudio() {
const context = useContext(AudioContext);
if (context === undefined) {
throw new Error('useAudio must be used within AudioProvider');
}
return context;
}

View File

@@ -1,16 +0,0 @@
"use client";
import { authClient } from "@/lib/auth-client";
import { redirect } from "next/navigation";
import { useEffect } from "react";
export default function AuthRedirect() {
const { data: session, isPending: loading } = authClient.useSession();
useEffect(() => {
if (!loading && !session) {
redirect("/user/sign-in");
}
}, [loading, session]);
return <div></div>
}

View File

@@ -0,0 +1,78 @@
'use client';
import { useState } from 'react';
import { createDataset } from '@/app/actions/datasets';
export default function CreateDatasetForm() {
const [name, setName] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
setSuccess(false);
if (!name.trim()) {
setError('Dataset name is required');
return;
}
setLoading(true);
try {
await createDataset({ name: name.trim() });
setName('');
setSuccess(true);
setTimeout(() => setSuccess(false), 3000);
// Refresh the page to show the new dataset
window.location.reload();
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to create dataset');
} finally {
setLoading(false);
}
}
return (
<div className="mt-8 mb-8">
<h2 className="text-2xl font-bold mb-4">Create New Dataset</h2>
<form onSubmit={handleSubmit} className="border border-gray-300 rounded-lg p-6 bg-white shadow-sm max-w-md">
<div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium mb-2">
Dataset Name
</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter dataset name"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
disabled={loading}
/>
</div>
{error && (
<div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
{error}
</div>
)}
{success && (
<div className="mb-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded">
Dataset created successfully!
</div>
)}
<button
type="submit"
disabled={loading}
className="w-full px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
>
{loading ? 'Creating...' : 'Create Dataset'}
</button>
</form>
</div>
);
}

View File

@@ -0,0 +1,114 @@
'use client';
import { useState } from 'react';
import { createDataset } from '@/app/actions/datasets';
import Modal from '@/components/Modal';
export default function CreateDatasetModal() {
const [isOpen, setIsOpen] = useState(false);
const [name, setName] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
setSuccess(false);
if (!name.trim()) {
setError('Dataset name is required');
return;
}
setLoading(true);
try {
await createDataset({ name: name.trim() });
setName('');
setSuccess(true);
setTimeout(() => {
setSuccess(false);
setIsOpen(false);
// Refresh the page to show the new dataset
window.location.reload();
}, 1500);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to create dataset');
} finally {
setLoading(false);
}
}
function handleClose() {
if (!loading) {
setIsOpen(false);
setName('');
setError(null);
setSuccess(false);
}
}
return (
<>
<button
onClick={() => setIsOpen(true)}
className="mb-6 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors"
>
+ Create New Dataset
</button>
<Modal
isOpen={isOpen}
onClose={handleClose}
title="Create New Dataset"
actions={[
{
label: 'Cancel',
onClick: handleClose,
variant: 'secondary',
disabled: loading,
},
{
label: loading ? 'Creating...' : 'Create',
onClick: (e) => {
const form = document.getElementById('datasetForm') as HTMLFormElement;
form?.dispatchEvent(new Event('submit', { bubbles: true }));
},
variant: 'primary',
disabled: loading,
},
]}
>
<form id="datasetForm" onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium mb-2">
Dataset Name
</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter dataset name"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
disabled={loading}
autoFocus
/>
</div>
{error && (
<div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
{error}
</div>
)}
{success && (
<div className="p-3 bg-green-100 border border-green-400 text-green-700 rounded text-sm">
Dataset created successfully!
</div>
)}
</form>
</Modal>
</>
);
}

View File

@@ -0,0 +1,429 @@
'use client';
import { useState, useEffect } from 'react';
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';
interface DatasetEntriesListProps {
datasetId: number;
}
interface DatasetEntry {
id: number;
datasetId: number;
externalId: string;
speakerId: string;
modelName: string;
fileName: string;
utteranceId: string | null;
dialect: string;
iteration: number;
createdAt: Date;
updatedAt: Date;
}
interface FilterOptions {
speakerIds: string[];
modelNames: string[];
dialects: string[];
iterations: number[];
utteranceIds: string[];
}
export default function DatasetEntriesList({
datasetId,
}: DatasetEntriesListProps) {
const [entries, setEntries] = useState<DatasetEntry[]>([]);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);
const [page, setPage] = useState(1);
const [total, setTotal] = useState(0);
// Filter states
const [filters, setFilters] = useState({
speakerId: '',
modelName: '',
dialect: '',
iteration: '',
utteranceId: '',
});
// Filter options
const [filterOptions, setFilterOptions] = useState<FilterOptions>({
speakerIds: [],
modelNames: [],
dialects: [],
iterations: [],
utteranceIds: [],
});
// Load filter options on mount
useEffect(() => {
async function loadFilterOptions() {
try {
const options = await getFilterOptions(datasetId);
setFilterOptions(options);
} catch (error) {
console.error('Error loading filter options:', error);
}
}
loadFilterOptions();
}, [datasetId]);
useEffect(() => {
setPage(1);
loadEntries(1);
}, [filters]);
async function loadEntries(pageNum: number = page) {
setLoading(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,
};
const result = await getDatasetEntries(datasetId, pageNum, filterParams);
if (pageNum === 1) {
setEntries(result.entries);
} else {
setEntries((prev) => [...prev, ...result.entries]);
}
setHasMore(result.hasMore);
setTotal(result.total);
setPage(pageNum);
} catch (error) {
console.error('Error loading entries:', error);
} finally {
setLoading(false);
}
}
async function handleLoadMore() {
setLoading(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,
};
const result = await getDatasetEntries(datasetId, page + 1, filterParams);
setEntries((prev) => [...prev, ...result.entries]);
setHasMore(result.hasMore);
setTotal(result.total);
setPage(page + 1);
} catch (error) {
console.error('Error loading more entries:', error);
} finally {
setLoading(false);
}
}
function handleFilterChange(field: string, value: string) {
setFilters((prev) => ({
...prev,
[field]: value,
}));
}
function handleClearFilters() {
setFilters({
speakerId: '',
modelName: '',
dialect: '',
iteration: '',
utteranceId: '',
});
}
if (entries.length === 0 && !loading) {
return (
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-2xl font-bold mb-6">Dataset Entries</h2>
{/* Filter Section */}
<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>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Speaker ID
</label>
<select
value={filters.speakerId}
onChange={(e) => handleFilterChange('speakerId', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All speakers</option>
{filterOptions.speakerIds.map((id) => (
<option key={id} value={id}>
{id}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Model Name
</label>
<select
value={filters.modelName}
onChange={(e) => handleFilterChange('modelName', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All models</option>
{filterOptions.modelNames.map((name) => (
<option key={name} value={name}>
{name}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Dialect
</label>
<select
value={filters.dialect}
onChange={(e) => handleFilterChange('dialect', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All dialects</option>
{filterOptions.dialects.map((dialect) => (
<option key={dialect} value={dialect}>
{dialect}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Iteration
</label>
<select
value={filters.iteration}
onChange={(e) => handleFilterChange('iteration', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All iterations</option>
{filterOptions.iterations.map((iter) => (
<option key={iter} value={iter.toString()}>
{iter}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Utterance ID
</label>
<select
value={filters.utteranceId}
onChange={(e) => handleFilterChange('utteranceId', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All utterances</option>
{filterOptions.utteranceIds.map((id) => (
<option key={id} value={id}>
{id}
</option>
))}
</select>
</div>
</div>
</div>
<p className="text-gray-500">No entries found for this dataset.</p>
</div>
);
}
return (
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-2xl font-bold mb-6">Dataset Entries</h2>
{/* Filter Section */}
<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>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Speaker ID
</label>
<select
value={filters.speakerId}
onChange={(e) => handleFilterChange('speakerId', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All speakers</option>
{filterOptions.speakerIds.map((id) => (
<option key={id} value={id}>
{id}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Model Name
</label>
<select
value={filters.modelName}
onChange={(e) => handleFilterChange('modelName', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All models</option>
{filterOptions.modelNames.map((name) => (
<option key={name} value={name}>
{name}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Dialect
</label>
<select
value={filters.dialect}
onChange={(e) => handleFilterChange('dialect', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All dialects</option>
{filterOptions.dialects.map((dialect) => (
<option key={dialect} value={dialect}>
{dialect}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Iteration
</label>
<select
value={filters.iteration}
onChange={(e) => handleFilterChange('iteration', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All iterations</option>
{filterOptions.iterations.map((iter) => (
<option key={iter} value={iter.toString()}>
{iter}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Utterance ID
</label>
<select
value={filters.utteranceId}
onChange={(e) => handleFilterChange('utteranceId', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All utterances</option>
{filterOptions.utteranceIds.map((id) => (
<option key={id} value={id}>
{id}
</option>
))}
</select>
</div>
</div>
</div>
{/* Results info */}
<div className="mb-4 text-sm text-gray-600">
Found {total} {total === 1 ? 'entry' : 'entries'}
</div>
{/* Table */}
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-gray-200">
<th className="text-left py-3 px-4 font-semibold text-gray-700">Play</th>
<th className="text-left py-3 px-4 font-semibold text-gray-700">External ID</th>
<th className="text-left py-3 px-4 font-semibold text-gray-700">Speaker ID</th>
<th className="text-left py-3 px-4 font-semibold text-gray-700">Model Name</th>
<th className="text-left py-3 px-4 font-semibold text-gray-700">Dialect</th>
<th className="text-left py-3 px-4 font-semibold text-gray-700">Utterance ID</th>
<th className="text-left py-3 px-4 font-semibold text-gray-700">File Name</th>
<th className="text-left py-3 px-4 font-semibold text-gray-700">Iteration</th>
</tr>
</thead>
<tbody>
{entries.map((entry) => (
<tr key={entry.id} className="hover:bg-blue-50 transition-colors border-b border-gray-200">
<td className="py-3 px-4">
<AudioPlayer datasetId={datasetId} fileName={entry.fileName} externalId={entry.externalId} />
</td>
<td className="py-3 px-4">
<Link
href={`/admin/datasets/${datasetId}/entries/${entry.id}`}
className="text-blue-500 hover:text-blue-600"
>
{entry.externalId}
</Link>
</td>
<td className="py-3 px-4">{entry.speakerId}</td>
<td className="py-3 px-4">{entry.modelName}</td>
<td className="py-3 px-4">{entry.dialect}</td>
<td className="py-3 px-4">{entry.utteranceId || '-'}</td>
<td className="py-3 px-4 truncate">{entry.fileName}</td>
<td className="py-3 px-4">{entry.iteration}</td>
</tr>
))}
</tbody>
</table>
</div>
{hasMore && (
<div className="mt-6 flex items-center justify-center gap-4">
<button
onClick={handleLoadMore}
disabled={loading}
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
>
{loading ? 'Loading...' : 'Load More'}
</button>
<span className="text-sm text-gray-600">
Showing {entries.length} of {total} entries
</span>
</div>
)}
{!hasMore && entries.length > 0 && (
<div className="mt-6 text-center text-sm text-gray-600">
All {total} entries loaded
</div>
)}
</div>
);
}

View File

@@ -0,0 +1,36 @@
'use server';
import db from '@/lib/db';
import { dataset } from '@/lib/model/dataset';
import Link from 'next/link';
export default async function DatasetsList() {
const datasets = await db.select().from(dataset).orderBy(dataset.createdAt);
return (
<div className="mt-8">
<h2 className="text-2xl font-bold mb-4">Datasets</h2>
{datasets.length === 0 ? (
<p className="text-gray-500">No datasets found.</p>
) : (
<div className="grid gap-4">
{datasets.map((ds) => (
<Link
key={ds.id}
href={`/admin/datasets/${ds.id}`}
className="border border-gray-300 rounded-lg p-4 bg-white shadow-sm hover:shadow-md transition-shadow block cursor-pointer"
>
<h3 className="text-lg font-semibold">{ds.name}</h3>
<p className="text-sm text-gray-600 mt-2">
ID: {ds.id}
</p>
<p className="text-sm text-gray-500 mt-1">
Created: {new Date(ds.createdAt).toLocaleDateString()}
</p>
</Link>
))}
</div>
)}
</div>
);
}

View File

@@ -0,0 +1,116 @@
'use client';
import { useState } from 'react';
import { updateDataset } from '@/app/actions/datasets';
import { Dataset } from '@/lib/model/dataset';
interface EditableDatasetHeaderProps {
dataset: Dataset;
}
export default function EditableDatasetHeader({
dataset,
}: EditableDatasetHeaderProps) {
const [isEditing, setIsEditing] = useState(false);
const [name, setName] = useState(dataset.name);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
async function handleSave() {
if (!name.trim()) {
setError('Dataset name cannot be empty');
return;
}
setLoading(true);
setError(null);
try {
await updateDataset(dataset.id, { name: name.trim() });
setIsEditing(false);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to update dataset');
} finally {
setLoading(false);
}
}
function handleCancel() {
setName(dataset.name);
setError(null);
setIsEditing(false);
}
return (
<div className="bg-white rounded-lg shadow p-6 mb-6">
{isEditing ? (
<div>
<label htmlFor="name" className="block text-sm font-medium mb-2">
Dataset Name
</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4"
disabled={loading}
/>
{error && (
<div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
{error}
</div>
)}
<div className="flex gap-2">
<button
onClick={handleSave}
disabled={loading}
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
>
{loading ? 'Saving...' : 'Save'}
</button>
<button
onClick={handleCancel}
disabled={loading}
className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
>
Cancel
</button>
</div>
</div>
) : (
<div>
<div className="flex justify-between items-start mb-4">
<h1 className="text-3xl font-bold">{dataset.name}</h1>
<button
onClick={() => setIsEditing(true)}
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
>
Edit
</button>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-600">Dataset ID</p>
<p className="text-lg font-semibold">{dataset.id}</p>
</div>
<div>
<p className="text-sm text-gray-600">Created</p>
<p className="text-lg font-semibold">
{new Date(dataset.createdAt).toLocaleDateString()}
</p>
</div>
<div>
<p className="text-sm text-gray-600">Last Updated</p>
<p className="text-lg font-semibold">
{new Date(dataset.updatedAt).toLocaleDateString()}
</p>
</div>
</div>
</div>
)}
</div>
);
}

65
src/components/Modal.tsx Normal file
View File

@@ -0,0 +1,65 @@
'use client';
import { ReactNode } from 'react';
interface ModalProps {
isOpen: boolean;
onClose: () => void;
title: string;
children: ReactNode;
actions?: {
label: string;
onClick: () => void;
variant?: 'primary' | 'secondary';
disabled?: boolean;
}[];
}
export default function Modal({
isOpen,
onClose,
title,
children,
actions = [],
}: ModalProps) {
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-lg max-w-md w-full mx-4">
<div className="flex justify-between items-center p-6 border-b border-gray-200">
<h2 className="text-xl font-bold">{title}</h2>
<button
onClick={onClose}
className="text-gray-500 hover:text-gray-700"
>
</button>
</div>
<div className="p-6">
{children}
</div>
{actions.length > 0 && (
<div className="flex gap-2 px-6 pb-6">
{actions.map((action) => (
<button
key={action.label}
onClick={action.onClick}
disabled={action.disabled}
className={`flex-1 px-4 py-2 rounded-md transition-colors ${
action.variant === 'primary'
? 'bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-400'
: 'border border-gray-300 hover:bg-gray-50 disabled:bg-gray-100'
} disabled:cursor-not-allowed`}
>
{action.label}
</button>
))}
</div>
)}
</div>
</div>
);
}

View File

@@ -0,0 +1,83 @@
'use client';
import { useState } from 'react';
import { removeAllDatasetEntries } from '@/app/actions/remove-dataset-entries';
interface RemoveAllEntriesButtonProps {
datasetId: number;
}
export default function RemoveAllEntriesButton({ datasetId }: RemoveAllEntriesButtonProps) {
const [isConfirming, setIsConfirming] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
async function handleConfirm() {
setLoading(true);
setError(null);
try {
await removeAllDatasetEntries(datasetId);
setIsConfirming(false);
// Show success message and reload
setTimeout(() => {
window.location.reload();
}, 1000);
} catch (err) {
const message = err instanceof Error ? err.message : 'Failed to remove entries';
setError(message);
} finally {
setLoading(false);
}
}
if (isConfirming) {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 max-w-sm">
<h3 className="text-lg font-semibold text-gray-900 mb-2">
Remove all entries?
</h3>
<p className="text-gray-600 mb-4">
This will permanently delete all dataset entries and their files. This action cannot be undone.
</p>
{error && (
<div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
{error}
</div>
)}
<div className="flex gap-3">
<button
onClick={() => {
setIsConfirming(false);
setError(null);
}}
disabled={loading}
className="flex-1 px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
>
Cancel
</button>
<button
onClick={handleConfirm}
disabled={loading}
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:bg-red-400 disabled:cursor-not-allowed transition-colors"
>
{loading ? 'Deleting...' : 'Delete All'}
</button>
</div>
</div>
</div>
);
}
return (
<button
onClick={() => setIsConfirming(true)}
className="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
>
🗑 Remove All Entries
</button>
);
}

View File

@@ -0,0 +1,177 @@
'use client';
import { useState } from 'react';
import { uploadDatasetEntries } from '@/app/actions/upload';
import Modal from '@/components/Modal';
interface UploadDatasetEntriesModalProps {
datasetId: number;
}
export default function UploadDatasetEntriesModal({
datasetId,
}: UploadDatasetEntriesModalProps) {
const [isOpen, setIsOpen] = useState(false);
const [file, setFile] = useState<File | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
const [entriesCreated, setEntriesCreated] = useState(0);
const [status, setStatus] = useState<string>('');
const [isDragging, setIsDragging] = useState(false);
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
const selectedFile = e.target.files?.[0];
if (selectedFile) {
setFile(selectedFile);
setError(null);
}
}
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
setSuccess(false);
if (!file) {
setError('Please select a ZIP file');
return;
}
setLoading(true);
setStatus('Preparing upload...');
try {
const formData = new FormData();
formData.append('file', file);
const result = await uploadDatasetEntries(datasetId, formData);
setSuccess(true);
setEntriesCreated(result.entriesCreated);
setStatus(`Successfully created ${result.entriesCreated} entries!`);
setFile(null);
setTimeout(() => {
setSuccess(false);
setIsOpen(false);
setStatus('');
window.location.reload();
}, 2500);
} catch (err) {
const errorMsg =
err instanceof Error ? err.message : 'Failed to upload dataset entries';
setError(errorMsg);
setStatus('');
} finally {
setLoading(false);
}
}
function handleClose() {
if (!loading) {
setIsOpen(false);
setFile(null);
setError(null);
setSuccess(false);
setStatus('');
}
}
return (
<>
<button
onClick={() => setIsOpen(true)}
className="mb-6 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors"
>
+ Upload Entries
</button>
<Modal
isOpen={isOpen}
onClose={handleClose}
title="Upload Dataset Entries"
actions={[
{
label: 'Cancel',
onClick: handleClose,
variant: 'secondary',
disabled: loading,
},
{
label: loading ? 'Uploading...' : 'Upload',
onClick: () => {
const form = document.getElementById(
'uploadForm'
) as HTMLFormElement;
form?.dispatchEvent(new Event('submit', { bubbles: true }));
},
variant: 'primary',
disabled: loading || !file,
},
]}
>
<form id="uploadForm" onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="file" className="block text-sm font-medium mb-2">
ZIP File
</label>
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
<input
id="file"
type="file"
accept=".zip"
onChange={handleFileChange}
disabled={loading}
className="hidden"
/>
<label htmlFor="file" className="cursor-pointer block">
{file ? (
<div>
<p className="text-sm font-medium text-blue-600">
{file.name}
</p>
<p className="text-xs text-gray-500 mt-1">
{(file.size / 1024 / 1024).toFixed(2)} MB
</p>
</div>
) : (
<div>
<p className="text-sm font-medium text-gray-700">
Click to select or drag and drop
</p>
<p className="text-xs text-gray-500 mt-1">ZIP file only</p>
</div>
)}
</label>
</div>
</div>
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
<p className="font-semibold mb-2">ZIP file should contain:</p>
<ul className="list-disc list-inside space-y-1 text-xs">
<li>
<code className="bg-blue-100 px-1 rounded">metadata.csv</code>{' '}
with columns: id, audio_file, duration_ms, utt_id, speaker,
model, dialect, iteration
</li>
<li>Audio files (.wav) referenced in metadata.csv</li>
</ul>
</div>
{error && (
<div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
{error}
</div>
)}
{success && (
<div className="p-3 bg-green-100 border border-green-400 text-green-700 rounded text-sm">
{status}
</div>
)}
</form>
</Modal>
</>
);
}

View File

@@ -0,0 +1,215 @@
'use client';
import { useState } from 'react';
import { uploadDatasetUtterances } from '@/app/actions/upload-utterances';
import Modal from '@/components/Modal';
interface UploadUtterancesModalProps {
datasetId: number;
}
export default function UploadUtterancesModal({
datasetId,
}: UploadUtterancesModalProps) {
const [isOpen, setIsOpen] = useState(false);
const [file, setFile] = useState<File | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
const [utterancesCreated, setUtterancesCreated] = useState(0);
const [status, setStatus] = useState<string>('');
const [isDragging, setIsDragging] = useState(false);
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
const selectedFile = e.target.files?.[0];
if (selectedFile) {
setFile(selectedFile);
setError(null);
}
}
function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
e.preventDefault();
e.stopPropagation();
setIsDragging(true);
}
function handleDragLeave(e: React.DragEvent<HTMLDivElement>) {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
}
function handleDrop(e: React.DragEvent<HTMLDivElement>) {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
const droppedFiles = e.dataTransfer.files;
if (droppedFiles.length > 0) {
const droppedFile = droppedFiles[0];
if (droppedFile.name.endsWith('.csv')) {
setFile(droppedFile);
setError(null);
} else {
setError('Please upload a CSV file');
}
}
}
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
setSuccess(false);
if (!file) {
setError('Please select a CSV file');
return;
}
setLoading(true);
setStatus('Preparing upload...');
try {
const formData = new FormData();
formData.append('file', file);
const result = await uploadDatasetUtterances(datasetId, formData);
setSuccess(true);
setUtterancesCreated(result.utterancesCreated);
setStatus(`Successfully created ${result.utterancesCreated} utterances!`);
setFile(null);
setTimeout(() => {
setSuccess(false);
setIsOpen(false);
setStatus('');
window.location.reload();
}, 2500);
} catch (err) {
const errorMsg =
err instanceof Error ? err.message : 'Failed to upload utterances';
setError(errorMsg);
setStatus('');
} finally {
setLoading(false);
}
}
function handleClose() {
if (!loading) {
setIsOpen(false);
setFile(null);
setError(null);
setSuccess(false);
setStatus('');
}
}
return (
<>
<button
onClick={() => setIsOpen(true)}
className="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 transition-colors"
>
📝 Upload Utterances
</button>
<Modal
isOpen={isOpen}
onClose={handleClose}
title="Upload Utterances CSV"
actions={[
{
label: 'Cancel',
onClick: handleClose,
variant: 'secondary',
disabled: loading,
},
{
label: loading ? 'Uploading...' : 'Upload',
onClick: () => {
const form = document.getElementById(
'uploadUtterancesForm'
) as HTMLFormElement;
form?.dispatchEvent(new Event('submit', { bubbles: true }));
},
variant: 'primary',
disabled: loading || !file,
},
]}
>
<form id="uploadUtterancesForm" onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="utterances-file" className="block text-sm font-medium mb-2">
CSV File
</label>
<div
className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
isDragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300'
}`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<input
id="utterances-file"
type="file"
accept=".csv"
onChange={handleFileChange}
disabled={loading}
className="hidden"
/>
<label htmlFor="utterances-file" className="cursor-pointer block">
{file ? (
<div>
<p className="text-sm font-medium text-blue-600">
{file.name}
</p>
<p className="text-xs text-gray-500 mt-1">
{(file.size / 1024).toFixed(2)} KB
</p>
</div>
) : (
<div>
<p className="text-sm font-medium text-gray-700">
Click to select or drag and drop
</p>
<p className="text-xs text-gray-500 mt-1">CSV file only</p>
</div>
)}
</label>
</div>
</div>
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
<p className="font-semibold mb-2">CSV file should contain:</p>
<ul className="list-disc list-inside space-y-1 text-xs">
<li>
<code className="bg-blue-100 px-1 rounded">id</code> column with
utterance IDs (e.g., utt_001)
</li>
<li>
<code className="bg-blue-100 px-1 rounded">text</code> column with the
utterance text
</li>
</ul>
</div>
{error && (
<div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
{error}
</div>
)}
{success && (
<div className="p-3 bg-green-100 border border-green-400 text-green-700 rounded text-sm">
{status}
</div>
)}
</form>
</Modal>
</>
);
}

6
src/lib/db.ts Normal file
View File

@@ -0,0 +1,6 @@
import { drizzle } from 'drizzle-orm/better-sqlite3';
import Database from 'better-sqlite3';
const sqlite = new Database('sqlite_data.db');
const db = drizzle({ client: sqlite });
export default db;

23
src/lib/model/dataset.ts Normal file
View File

@@ -0,0 +1,23 @@
import { sqliteTable, text, integer, real } from 'drizzle-orm/sqlite-core';
import { relations } from 'drizzle-orm';
import { dataset_entry } from './dataset_entry';
// Define the dataset table schema
export const dataset = sqliteTable('dataset', {
id: integer('id').primaryKey({ autoIncrement: true }),
name: text('name').notNull(),
createdAt: integer('created_at', { mode: 'timestamp' })
.notNull()
.default(new Date()),
updatedAt: integer('updated_at', { mode: 'timestamp' })
.notNull()
.default(new Date())
});
export const datasetRelations = relations(dataset, ({ many }) => ({
entries: many(dataset_entry)
}));
// Create a type for dataset records based on the schema
export type Dataset = typeof dataset.$inferSelect;
export type NewDataset = typeof dataset.$inferInsert;

View File

@@ -0,0 +1,40 @@
import { sqliteTable, text, integer, real } from 'drizzle-orm/sqlite-core';
import { relations } from 'drizzle-orm';
import { dataset } from './dataset';
import { dataset_utterance } from './utterance';
// Define the dataset table schema
export const dataset_entry = sqliteTable('dataset_entry', {
id: integer('id').primaryKey({ autoIncrement: true }),
externalId: text('external_id').notNull(),
speakerId: text('speaker_id').notNull(),
modelName: text('model_name').notNull(),
datasetId: integer('dataset_id')
.notNull()
.references(() => dataset.id),
utteranceId: text('utterance_id').references(() => dataset_utterance.id),
fileName: text('file_name').notNull(),
dialect: text('dialect').notNull(),
iteration: integer('iteration').notNull(),
createdAt: integer('created_at', { mode: 'timestamp' })
.notNull()
.default(new Date()),
updatedAt: integer('updated_at', { mode: 'timestamp' })
.notNull()
.default(new Date())
});
export const dataset_entryRelations = relations(dataset_entry, ({ one }) => ({
dataset: one(dataset, {
fields: [dataset_entry.datasetId],
references: [dataset.id]
}),
utterance: one(dataset_utterance, {
fields: [dataset_entry.utteranceId],
references: [dataset_utterance.id]
})
}));
// Create a type for dataset records based on the schema
export type DatasetEntry = typeof dataset_entry.$inferSelect;
export type NewDatasetEntry = typeof dataset_entry.$inferInsert;

3
src/lib/model/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export * from "./dataset";
export * from "./dataset_entry";
export * from "./utterance";

View File

@@ -0,0 +1,29 @@
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
import { relations } from 'drizzle-orm';
import { dataset } from './dataset';
// Define the dataset_utterance table schema
export const dataset_utterance = sqliteTable('dataset_utterance', {
id: text('id').primaryKey(),
datasetId: integer('dataset_id')
.notNull()
.references(() => dataset.id),
text: text('text').notNull(),
createdAt: integer('created_at', { mode: 'timestamp' })
.notNull()
.default(new Date()),
updatedAt: integer('updated_at', { mode: 'timestamp' })
.notNull()
.default(new Date()),
});
export const dataset_utteranceRelations = relations(dataset_utterance, ({ one }) => ({
dataset: one(dataset, {
fields: [dataset_utterance.datasetId],
references: [dataset.id],
}),
}));
// Create types for dataset_utterance records based on the schema
export type DatasetUtterance = typeof dataset_utterance.$inferSelect;
export type NewDatasetUtterance = typeof dataset_utterance.$inferInsert;