TTS Dataset Collector for HF Spaces

.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+.next
+.git
+.vs
+dataset/audio
+dataset/transcriptions
+dataset/metadata/dataset_info.json
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*

.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Dataset folder (user data - created at runtime)
+/dataset/

Dockerfile

@@ -0,0 +1,65 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package.json package-lock.json* ./
+
+# Install dependencies
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Set environment variable for build
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Build the application
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Create a non-root user with UID 1000 (required for HF Spaces)
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1000 nextjs
+
+# Copy public folder
+COPY --from=builder /app/public ./public
+
+# Copy built application
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Create /data directory for HF Spaces persistent storage
+# This directory is mounted at runtime on HF Spaces
+RUN mkdir -p /data && chmod 777 /data
+
+# Create local dataset directory as fallback (for non-HF environments)
+RUN mkdir -p /app/dataset && chown nextjs:nodejs /app/dataset
+
+# Set default data directory (overridden by HF Spaces when /data is available)
+ENV DATA_DIR=/data
+
+USER nextjs
+
+# HF Spaces uses port 7860 by default
+EXPOSE 7860
+
+ENV PORT=7860
+ENV HOSTNAME="0.0.0.0"
+
+# Health check for container monitoring
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:7860/ || exit 1
+
+CMD ["node", "server.js"]

README.md

@@ -0,0 +1,47 @@
+---
+title: TTS Dataset Collector
+emoji: 🎙️
+colorFrom: purple
+colorTo: blue
+sdk: docker
+app_file: Dockerfile
+app_port: 7860
+pinned: false
+---
+
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3.8'
+
+services:
+  tts-collector:
+    container_name: tts-dataset-collector
+    build: .
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./dataset:/app/dataset
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=production

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,18 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+  env: {
+    DATA_DIR: process.env.DATA_DIR || '',
+  },
+  // Ensure server-side code can access environment variables
+  serverRuntimeConfig: {
+    DATA_DIR: process.env.DATA_DIR || '',
+  },
+  // Enable instrumentation for cleanup scheduler
+  experimental: {
+    instrumentationHook: true,
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "polar-interstellar",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@types/archiver": "^7.0.0",
+    "archiver": "^7.0.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.24",
+    "franc": "^6.2.0",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.555.0",
+    "next": "16.0.5",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^3.4.18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.5",
+    "postcss": "^8.5.6",
+    "typescript": "^5"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

src/app/api/bookmarks/route.ts

@@ -0,0 +1,103 @@
+import { NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { getMetadataPath, ensureDir, sanitizePath } from '@/lib/dataPath';
+
+export async function POST(request: Request) {
+    try {
+        const body = await request.json();
+        const { speaker_id, dataset_name, index } = body;
+
+        if (!speaker_id || !dataset_name || index === undefined) {
+            return NextResponse.json({ error: 'Missing parameters: speaker_id, dataset_name, and index are required' }, { status: 400 });
+        }
+
+        // Validate index is a number
+        if (typeof index !== 'number' || index < 0) {
+            return NextResponse.json({ error: 'Invalid index: must be a non-negative number' }, { status: 400 });
+        }
+
+        // Sanitize inputs
+        const safeSpeakerId = sanitizePath(speaker_id);
+        const safeDatasetName = sanitizePath(dataset_name);
+
+        const metadataDir = getMetadataPath();
+        await ensureDir(metadataDir);
+        const metadataPath = path.join(metadataDir, 'dataset_info.json');
+
+        let datasetInfo: Record<string, unknown> = { speakers: {} };
+        try {
+            const content = await fs.readFile(metadataPath, 'utf-8');
+            datasetInfo = JSON.parse(content);
+        } catch {
+            // File might not exist
+        }
+
+        // Ensure nested structure exists
+        const speakers = (datasetInfo.speakers || {}) as Record<string, { datasets?: Record<string, { bookmarks?: number[] }> }>;
+        if (!speakers[safeSpeakerId]) {
+            speakers[safeSpeakerId] = { datasets: {} };
+        }
+        if (!speakers[safeSpeakerId].datasets) {
+            speakers[safeSpeakerId].datasets = {};
+        }
+        if (!speakers[safeSpeakerId].datasets![safeDatasetName]) {
+            speakers[safeSpeakerId].datasets![safeDatasetName] = { bookmarks: [] };
+        }
+
+        const ds = speakers[safeSpeakerId].datasets![safeDatasetName];
+        if (!ds.bookmarks) ds.bookmarks = [];
+
+        // Toggle bookmark
+        if (ds.bookmarks.includes(index)) {
+            ds.bookmarks = ds.bookmarks.filter((i: number) => i !== index);
+        } else {
+            ds.bookmarks.push(index);
+            // Sort bookmarks for consistency
+            ds.bookmarks.sort((a, b) => a - b);
+        }
+
+        datasetInfo.speakers = speakers;
+        await fs.writeFile(metadataPath, JSON.stringify(datasetInfo, null, 2));
+
+        return NextResponse.json({ success: true, bookmarks: ds.bookmarks });
+
+    } catch (error) {
+        console.error('Error toggling bookmark:', error);
+        return NextResponse.json({
+            error: 'Internal Server Error',
+            details: error instanceof Error ? error.message : 'Unknown error'
+        }, { status: 500 });
+    }
+}
+
+export async function GET(request: Request) {
+    try {
+        const { searchParams } = new URL(request.url);
+        const speaker_id = searchParams.get('speaker_id');
+        const dataset_name = searchParams.get('dataset_name');
+
+        if (!speaker_id || !dataset_name) {
+            return NextResponse.json({ bookmarks: [] });
+        }
+
+        // Sanitize inputs
+        const safeSpeakerId = sanitizePath(speaker_id);
+        const safeDatasetName = sanitizePath(dataset_name);
+
+        const metadataPath = path.join(getMetadataPath(), 'dataset_info.json');
+
+        try {
+            const content = await fs.readFile(metadataPath, 'utf-8');
+            const datasetInfo = JSON.parse(content);
+            const speakers = datasetInfo.speakers as Record<string, { datasets?: Record<string, { bookmarks?: number[] }> }>;
+            const bookmarks = speakers[safeSpeakerId]?.datasets?.[safeDatasetName]?.bookmarks || [];
+            return NextResponse.json({ bookmarks });
+        } catch {
+            return NextResponse.json({ bookmarks: [] });
+        }
+    } catch (error) {
+        console.error('Error getting bookmarks:', error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}

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

@@ -0,0 +1,60 @@
+import { NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { getMetadataPath, ensureDir, getDataDir } from '@/lib/dataPath';
+import { getCleanupConfig } from '@/lib/cleanup';
+
+export async function GET() {
+    try {
+        const metadataDir = getMetadataPath();
+        await ensureDir(metadataDir);
+        const metadataPath = path.join(metadataDir, 'dataset_info.json');
+
+        let metadata: Record<string, unknown> = { speakers: {}, last_updated: null };
+        try {
+            const content = await fs.readFile(metadataPath, 'utf-8');
+            metadata = JSON.parse(content);
+        } catch {
+            // File might not exist yet
+        }
+
+        // Flatten statistics
+        let recordedSentences = 0;
+        const speakers = metadata.speakers as Record<string, { datasets?: Record<string, { recordings?: number }> }>;
+
+        for (const speakerId in speakers) {
+            const speaker = speakers[speakerId];
+            if (speaker?.datasets) {
+                for (const datasetName in speaker.datasets) {
+                    const dataset = speaker.datasets[datasetName];
+                    recordedSentences += dataset?.recordings || 0;
+                }
+            }
+        }
+
+        // Get cleanup configuration for display
+        const cleanupConfig = getCleanupConfig();
+
+        return NextResponse.json({
+            lastUpdated: metadata.last_updated || null,
+            total_recordings: Number(metadata.total_recordings) || 0,
+            total_duration: Number(metadata.total_duration) || 0,
+            recent_recordings: Array.isArray(metadata.recent_recordings) ? metadata.recent_recordings : [],
+            speakers: Object.keys(speakers).length,
+            recordedSentences,
+            // Include storage info for transparency
+            storage: {
+                dataDirectory: getDataDir(),
+                autoCleanupHours: cleanupConfig.maxFileAgeHours,
+                isHuggingFaceSpaces: getDataDir() === '/data'
+            },
+            details: metadata
+        });
+    } catch (error) {
+        console.error('Error getting stats:', error);
+        return NextResponse.json({
+            error: 'Internal Server Error',
+            details: error instanceof Error ? error.message : 'Unknown error'
+        }, { status: 500 });
+    }
+}

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

@@ -0,0 +1,76 @@
+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';
+
+export async function GET(request: Request) {
+    const { searchParams } = new URL(request.url);
+    const datasetName = searchParams.get('dataset_name');
+
+    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);
+
+    try {
+        await fs.access(datasetDir);
+    } catch {
+        return NextResponse.json({ error: 'Dataset not found' }, { status: 404 });
+    }
+
+    const archive = archiver('zip', {
+        zlib: { level: 9 } // Sets the compression level.
+    });
+
+    const stream = new ReadableStream({
+        async start(controller) {
+            archive.on('data', (chunk) => {
+                controller.enqueue(chunk);
+            });
+
+            archive.on('end', () => {
+                controller.close();
+            });
+
+            archive.on('error', (err) => {
+                console.error('Archive error:', err);
+                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' });
+                }
+            } 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);
+                controller.error(error);
+            }
+        }
+    });
+
+    return new NextResponse(stream, {
+        headers: {
+            'Content-Type': 'application/zip',
+            'Content-Disposition': `attachment; filename="${safeDatasetName}.zip"`
+        }
+    });
+}

src/app/api/fonts/[filename]/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { getFontsPath, sanitizePath } from '@/lib/dataPath';
+
+export async function GET(
+    request: Request,
+    { params }: { params: Promise<{ filename: string }> }
+) {
+    try {
+        const { filename } = await params;
+
+        // Security check: prevent directory traversal
+        if (!filename || filename.includes('..') || filename.includes('/') || filename.includes('\\')) {
+            return new NextResponse('Invalid filename', { status: 400 });
+        }
+
+        // Validate file extension
+        const ext = path.extname(filename).toLowerCase();
+        if (ext !== '.ttf' && ext !== '.otf') {
+            return new NextResponse('Invalid font file type', { status: 400 });
+        }
+
+        // Sanitize filename (but preserve extension)
+        const baseName = sanitizePath(path.basename(filename, ext), 100);
+        const safeFilename = `${baseName}${ext}`;
+
+        const fontsDir = getFontsPath();
+        const filePath = path.join(fontsDir, filename); // Use original filename for lookup
+
+        try {
+            const fileBuffer = await fs.readFile(filePath);
+            const contentType = ext === '.otf' ? 'font/otf' : 'font/ttf';
+
+            return new NextResponse(fileBuffer, {
+                headers: {
+                    'Content-Type': contentType,
+                    'Cache-Control': 'public, max-age=31536000, immutable',
+                },
+            });
+        } catch {
+            return new NextResponse('Font not found', { status: 404 });
+        }
+    } catch (error) {
+        console.error('Error serving font:', error);
+        return new NextResponse('Internal Server Error', { status: 500 });
+    }
+}

src/app/api/fonts/route.ts

@@ -0,0 +1,46 @@
+import { NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { getFontsPath, ensureDir } from '@/lib/dataPath';
+
+const DEFAULT_FONTS = [
+    { name: "Times New Roman", family: "Times New Roman", css: "font-family: 'Times New Roman', serif;" },
+    { name: "Arial", family: "Arial", css: "font-family: Arial, sans-serif;" },
+    { name: "Nastaliq", family: "Noto Nastaliq Urdu", css: "font-family: 'Noto Nastaliq Urdu', serif;" },
+    { name: "Naskh", family: "Scheherazade New", css: "font-family: 'Scheherazade New', serif;" }
+];
+
+export async function GET() {
+    try {
+        const fontsDir = getFontsPath();
+        await ensureDir(fontsDir);
+
+        let files: string[] = [];
+        try {
+            files = await fs.readdir(fontsDir);
+        } catch {
+            // Directory might not exist yet
+        }
+
+        const customFonts = files
+            .filter(file => file.endsWith('.ttf') || file.endsWith('.otf'))
+            .map(file => {
+                const family = path.basename(file, path.extname(file));
+                return {
+                    name: file,
+                    family: family,
+                    css: `font-family: '${family}', serif;`,
+                    url: `/api/fonts/${encodeURIComponent(file)}`,
+                    isCustom: true
+                };
+            });
+
+        return NextResponse.json({ fonts: [...DEFAULT_FONTS, ...customFonts] });
+    } catch (error) {
+        console.error('Error listing fonts:', error);
+        return NextResponse.json({
+            error: 'Internal Server Error',
+            details: error instanceof Error ? error.message : 'Unknown error'
+        }, { status: 500 });
+    }
+}

src/app/api/save-recording/route.ts

@@ -0,0 +1,104 @@
+import { NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { getAudioPath, getTranscriptionsPath, getMetadataPath, ensureDir, sanitizePath } from '@/lib/dataPath';
+
+export async function POST(request: Request) {
+    try {
+        const formData = await request.formData();
+        const audioFile = formData.get('audio') as File;
+        const metadataStr = formData.get('metadata') as string;
+
+        if (!audioFile || !metadataStr) {
+            return NextResponse.json({ error: 'Missing audio or metadata' }, { status: 400 });
+        }
+
+        let metadata;
+        try {
+            metadata = JSON.parse(metadataStr);
+        } catch {
+            return NextResponse.json({ error: 'Invalid metadata JSON' }, { status: 400 });
+        }
+
+        const { speaker_id, dataset_name, text, font_style, timestamp, emotion, rating, duration } = metadata;
+
+        // Validate required fields
+        if (!speaker_id || !dataset_name || !text) {
+            return NextResponse.json({ error: 'Missing required fields: speaker_id, dataset_name, or text' }, { status: 400 });
+        }
+
+        // Sanitize inputs to prevent path traversal
+        const safeSpeakerId = sanitizePath(speaker_id);
+        const safeDataset = sanitizePath(dataset_name);
+        const safeText = sanitizePath(text.substring(0, 20));
+
+        // Get paths using centralized data path utility
+        const audioDir = getAudioPath(safeSpeakerId);
+        const textDir = getTranscriptionsPath(safeSpeakerId);
+
+        // Ensure directories exist
+        await ensureDir(audioDir);
+        await ensureDir(textDir);
+
+        // Generate filename with timestamp for uniqueness
+        const timeStr = new Date().toISOString().replace(/-/g, '').replace(/:/g, '').replace(/\./g, '').substring(0, 14);
+        const index = metadata.index !== undefined ? `line${metadata.index + 1}` : `t${timeStr}`;
+
+        const baseName = `${safeDataset}_${safeSpeakerId}_${index}_${safeText}_${timeStr}`;
+        const audioName = `${baseName}.wav`;
+        const textName = `${baseName}.txt`;
+
+        // Save Audio
+        const audioBuffer = Buffer.from(await audioFile.arrayBuffer());
+        await fs.writeFile(path.join(audioDir, audioName), audioBuffer);
+
+        // Save Transcription
+        const transcriptionContent = `[METADATA]
+Recording_ID: ${audioName}
+Speaker_ID: ${speaker_id}
+Dataset_Name: ${dataset_name}
+Timestamp: ${timestamp || new Date().toISOString()}
+Font_Style: ${font_style || 'default'}
+Emotion: ${emotion || 'neutral'}
+Rating: ${rating || 3}
+Duration: ${duration || 0}
+[TEXT]
+${text}
+`;
+        await fs.writeFile(path.join(textDir, textName), transcriptionContent);
+
+        // Update Metadata
+        const metadataDir = getMetadataPath();
+        await ensureDir(metadataDir);
+        const metadataPath = path.join(metadataDir, 'dataset_info.json');
+
+        let datasetInfo: Record<string, unknown> = {
+            speakers: {},
+            last_updated: null,
+            total_duration: 0,
+            total_recordings: 0
+        };
+
+        try {
+            const content = await fs.readFile(metadataPath, 'utf-8');
+            datasetInfo = JSON.parse(content);
+        } catch {
+            // File doesn't exist yet, use defaults
+        }
+
+        datasetInfo.last_updated = new Date().toISOString();
+        datasetInfo.total_recordings = (Number(datasetInfo.total_recordings) || 0) + 1;
+        datasetInfo.total_duration = (Number(datasetInfo.total_duration) || 0) + (Number(duration) || 0);
+
+        await fs.writeFile(metadataPath, JSON.stringify(datasetInfo, null, 2));
+
+        return NextResponse.json({ success: true, filename: audioName });
+
+    } catch (error) {
+        console.error('Error saving recording:', error);
+        return NextResponse.json({
+            error: 'Internal Server Error',
+            details: error instanceof Error ? error.message : 'Unknown error'
+        }, { status: 500 });
+    }
+}

src/app/api/skip-recording/route.ts

@@ -0,0 +1,66 @@
+import { NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { getDataPath, ensureDir, sanitizePath } from '@/lib/dataPath';
+
+export async function POST(request: Request) {
+    try {
+        const data = await request.json();
+        const { speaker_id, dataset_name, index, text, reason } = data;
+
+        if (!speaker_id || !dataset_name) {
+            return NextResponse.json({ success: false, error: 'Missing required fields: speaker_id and dataset_name' }, { status: 400 });
+        }
+
+        // Sanitize inputs
+        const safeSpeakerId = sanitizePath(speaker_id);
+        const safeDatasetName = sanitizePath(dataset_name);
+
+        const datasetDir = getDataPath(safeDatasetName);
+        const skippedFile = path.join(datasetDir, 'skipped.json');
+
+        // Ensure dataset directory exists
+        await ensureDir(datasetDir);
+
+        let skippedData: Array<{
+            speaker_id: string;
+            index: number;
+            text: string;
+            reason: string;
+            timestamp: string;
+        }> = [];
+
+        try {
+            const fileContent = await fs.readFile(skippedFile, 'utf-8');
+            skippedData = JSON.parse(fileContent);
+
+            // Ensure it's an array
+            if (!Array.isArray(skippedData)) {
+                skippedData = [];
+            }
+        } catch {
+            // File doesn't exist or is empty, start new
+        }
+
+        const newSkip = {
+            speaker_id: safeSpeakerId,
+            index: typeof index === 'number' ? index : -1,
+            text: typeof text === 'string' ? text.substring(0, 500) : '', // Limit text length
+            reason: typeof reason === 'string' ? reason : 'Skipped by user',
+            timestamp: new Date().toISOString()
+        };
+
+        skippedData.push(newSkip);
+
+        await fs.writeFile(skippedFile, JSON.stringify(skippedData, null, 2));
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Error skipping recording:', error);
+        return NextResponse.json({
+            success: false,
+            error: 'Internal server error',
+            details: error instanceof Error ? error.message : 'Unknown error'
+        }, { status: 500 });
+    }
+}

src/app/api/upload-font/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { getFontsPath, ensureDir, sanitizePath } from '@/lib/dataPath';
+
+export async function POST(request: Request) {
+    try {
+        const formData = await request.formData();
+        const fontFile = formData.get('font') as File;
+
+        if (!fontFile) {
+            return NextResponse.json({ error: 'No font file provided' }, { status: 400 });
+        }
+
+        if (!fontFile.name.endsWith('.ttf') && !fontFile.name.endsWith('.otf')) {
+            return NextResponse.json({ error: 'Only .ttf and .otf files are supported' }, { status: 400 });
+        }
+
+        // Validate file size (max 10MB)
+        const MAX_FONT_SIZE = 10 * 1024 * 1024; // 10MB
+        if (fontFile.size > MAX_FONT_SIZE) {
+            return NextResponse.json({ error: 'Font file too large (max 10MB)' }, { status: 400 });
+        }
+
+        const fontsDir = getFontsPath();
+        await ensureDir(fontsDir);
+
+        // Sanitize original name and add timestamp for uniqueness
+        const timestamp = Date.now();
+        const safeName = sanitizePath(fontFile.name.replace(/\.(ttf|otf)$/i, ''), 40);
+        const extension = fontFile.name.endsWith('.otf') ? '.otf' : '.ttf';
+        const fileName = `font_${timestamp}_${safeName}${extension}`;
+
+        const buffer = Buffer.from(await fontFile.arrayBuffer());
+        await fs.writeFile(path.join(fontsDir, fileName), buffer);
+
+        return NextResponse.json({ success: true, filename: fileName });
+    } catch (error) {
+        console.error('Error uploading font:', error);
+        return NextResponse.json({
+            error: 'Internal Server Error',
+            details: error instanceof Error ? error.message : 'Unknown error'
+        }, { status: 500 });
+    }
+}

src/app/globals.css

@@ -0,0 +1,85 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        --primary: 221.2 83.2% 53.3%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 221.2 83.2% 53.3%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 217.2 91.2% 59.8%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+.glass {
+    @apply bg-white/10 backdrop-blur-lg border border-white/20;
+}
+
+.glass-card {
+    @apply bg-card/50 backdrop-blur-md border border-border/50 shadow-xl;
+}

src/app/layout.tsx

@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import { DM_Sans, Playfair_Display, JetBrains_Mono } from "next/font/google";
+import "./globals.css";
+import { Providers } from "@/components/Providers";
+
+const dmSans = DM_Sans({
+  subsets: ["latin"],
+  variable: '--font-dm-sans',
+  display: 'swap',
+});
+
+const playfair = Playfair_Display({
+  subsets: ["latin"],
+  variable: '--font-playfair',
+  display: 'swap',
+});
+
+const jetbrains = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: '--font-jetbrains',
+  display: 'swap',
+});
+
+export const metadata: Metadata = {
+  title: "TTS Dataset Collector - Build Speech Datasets",
+  description: "Advanced TTS Dataset Collection Tool",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark">
+      <body className={`${dmSans.variable} ${playfair.variable} ${jetbrains.variable} font-sans antialiased bg-background text-foreground min-h-screen selection:bg-primary/30 selection:text-primary-foreground`}>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}

src/app/page.module.css

@@ -0,0 +1,141 @@
+.page {
+  --background: #fafafa;
+  --foreground: #fff;
+
+  --text-primary: #000;
+  --text-secondary: #666;
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+  --button-secondary-border: #ebebeb;
+
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-geist-sans);
+  background-color: var(--background);
+}
+
+.main {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+  max-width: 800px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  background-color: var(--foreground);
+  padding: 120px 60px;
+}
+
+.intro {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  gap: 24px;
+}
+
+.intro h1 {
+  max-width: 320px;
+  font-size: 40px;
+  font-weight: 600;
+  line-height: 48px;
+  letter-spacing: -2.4px;
+  text-wrap: balance;
+  color: var(--text-primary);
+}
+
+.intro p {
+  max-width: 440px;
+  font-size: 18px;
+  line-height: 32px;
+  text-wrap: balance;
+  color: var(--text-secondary);
+}
+
+.intro a {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.ctas {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: 440px;
+  gap: 16px;
+  font-size: 14px;
+}
+
+.ctas a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  border-radius: 128px;
+  border: 1px solid transparent;
+  transition: 0.2s;
+  cursor: pointer;
+  width: fit-content;
+  font-weight: 500;
+}
+
+a.primary {
+  background: var(--text-primary);
+  color: var(--background);
+  gap: 8px;
+}
+
+a.secondary {
+  border-color: var(--button-secondary-border);
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  a.primary:hover {
+    background: var(--button-primary-hover);
+    border-color: transparent;
+  }
+
+  a.secondary:hover {
+    background: var(--button-secondary-hover);
+    border-color: transparent;
+  }
+}
+
+@media (max-width: 600px) {
+  .main {
+    padding: 48px 24px;
+  }
+
+  .intro {
+    gap: 16px;
+  }
+
+  .intro h1 {
+    font-size: 32px;
+    line-height: 40px;
+    letter-spacing: -1.92px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: invert();
+  }
+
+  .page {
+    --background: #000;
+    --foreground: #000;
+
+    --text-primary: #ededed;
+    --text-secondary: #999;
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+    --button-secondary-border: #1a1a1a;
+  }
+}

src/app/page.tsx

@@ -0,0 +1,429 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import HelpModal from '@/components/HelpModal';
+
+
+import TextInput from '@/components/TextInput';
+import AudioRecorder from '@/components/AudioRecorder';
+import FontSelector from '@/components/FontSelector';
+import DatasetStats from '@/components/DatasetStats';
+import SettingsModal from '@/components/SettingsModal';
+import { Mic2, Moon, Sun, Settings, Search, SkipForward, SkipBack, Bookmark, Hash, HelpCircle } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
+import { toast } from 'sonner';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import { detectLanguage, isRTL } from '@/lib/language';
+
+export default function Home() {
+  const [sentences, setSentences] = useState<string[]>([]);
+  const [currentIndex, setCurrentIndex] = useLocalStorage('currentIndex', 0);
+  const [speakerId, setSpeakerId] = useLocalStorage('speakerId', '');
+  const [datasetName, setDatasetName] = useLocalStorage('datasetName', 'dataset1');
+  const [fontStyle, setFontStyle] = useLocalStorage('fontStyle', 'Times New Roman');
+  const [fontFamily, setFontFamily] = useState('Times New Roman'); // Actual CSS font family
+  const [darkMode, setDarkMode] = useLocalStorage('darkMode', true);
+
+  // Settings
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isHelpOpen, setIsHelpOpen] = useState(false);
+  const [autoAdvance, setAutoAdvance] = useLocalStorage('autoAdvance', true);
+  const [autoSave, setAutoSave] = useLocalStorage('autoSave', false);
+  const [silenceThreshold, setSilenceThreshold] = useLocalStorage('silenceThreshold', 5);
+
+  // Navigation & Search
+  const [jumpIndex, setJumpIndex] = useState('');
+  const [bookmarks, setBookmarks] = useState<number[]>([]);
+  const [detectedLang, setDetectedLang] = useState('eng');
+  const [isRTLDir, setIsRTLDir] = useState(false);
+
+  useEffect(() => {
+    if (sentences.length > 0 && sentences[currentIndex]) {
+      const lang = detectLanguage(sentences[currentIndex]);
+      setDetectedLang(lang);
+      setIsRTLDir(isRTL(lang));
+    }
+  }, [currentIndex, sentences]);
+
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode]);
+
+  useEffect(() => {
+    if (speakerId && datasetName) {
+      fetch(`/api/bookmarks?speaker_id=${speakerId}&dataset_name=${datasetName}`)
+        .then(res => res.json())
+        .then(data => setBookmarks(data.bookmarks || []));
+    }
+  }, [speakerId, datasetName]);
+
+  // Keyboard Shortcuts
+  useKeyboardShortcuts({
+    'arrowright': () => handleNext(),
+    'arrowleft': () => handlePrev(),
+    'ctrl+s': () => document.getElementById('save-btn')?.click(),
+    ' ': () => document.getElementById('record-btn')?.click(),
+    'ctrl+f': () => document.getElementById('search-input')?.focus(),
+  });
+
+  const handleSentencesLoaded = (loadedSentences: string[]) => {
+    setSentences(loadedSentences);
+    setCurrentIndex(0);
+  };
+
+  const handleNext = () => {
+    if (currentIndex < sentences.length - 1) {
+      setCurrentIndex(prev => prev + 1);
+    } else {
+      toast.info('Reached end of sentences');
+    }
+  };
+
+  const handlePrev = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex(prev => prev - 1);
+    }
+  };
+
+  const handleJump = (e: React.FormEvent) => {
+    e.preventDefault();
+    const idx = parseInt(jumpIndex) - 1;
+    if (idx >= 0 && idx < sentences.length) {
+      setCurrentIndex(idx);
+      setJumpIndex('');
+    } else {
+      toast.error('Invalid sentence number');
+    }
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!searchQuery) return;
+
+    // Find next occurrence after current index
+    let nextIndex = sentences.findIndex((s, i) => i > currentIndex && s.toLowerCase().includes(searchQuery.toLowerCase()));
+
+    // If not found, wrap around
+    if (nextIndex === -1) {
+      nextIndex = sentences.findIndex((s) => s.toLowerCase().includes(searchQuery.toLowerCase()));
+    }
+
+    if (nextIndex !== -1) {
+      setCurrentIndex(nextIndex);
+      toast.success(`Found match at #${nextIndex + 1}`);
+    } else {
+      toast.error('No matches found');
+    }
+  };
+
+  const handleSkip = async () => {
+    try {
+      const res = await fetch('/api/skip-recording', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          speaker_id: speakerId,
+          dataset_name: datasetName,
+          index: currentIndex,
+          text: sentences[currentIndex],
+          reason: 'User skipped'
+        })
+      });
+
+      if (res.ok) {
+        toast.info('Sentence skipped');
+        handleNext();
+      } else {
+        toast.error('Failed to skip');
+      }
+    } catch (err) {
+      toast.error('Error skipping');
+    }
+  };
+
+  const handleFontChange = (font: string) => {
+    setFontStyle(font);
+    setFontFamily(font);
+  };
+
+  const toggleBookmark = async () => {
+    try {
+      const res = await fetch('/api/bookmarks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ speaker_id: speakerId, dataset_name: datasetName, index: currentIndex })
+      });
+      const data = await res.json();
+      if (data.success) {
+        setBookmarks(data.bookmarks);
+        toast.success(bookmarks.includes(currentIndex) ? 'Bookmark removed' : 'Bookmarked');
+      }
+    } catch (err) {
+      toast.error('Failed to toggle bookmark');
+    }
+  };
+
+  return (
+    <main className="min-h-screen pb-20 transition-colors duration-300 bg-background text-foreground">
+      <header className="sticky top-0 z-20 border-b border-border/40 bg-background/80 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60">
+        <div className="container py-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-primary-foreground shadow-lg shadow-primary/20">
+              <Mic2 className="w-6 h-6" />
+            </div>
+            <h1 className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-400">
+              TTS Dataset Collector
+            </h1>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full bg-secondary/50 border border-border/50 text-sm font-medium">
+              <span className="opacity-70">Sentence</span>
+              <span className="text-primary">{currentIndex + 1}</span>
+              <span className="opacity-40">/</span>
+              <span className="opacity-70">{sentences.length || 0}</span>
+            </div>
+
+            <button
+              onClick={() => setIsHelpOpen(true)}
+              className="btn btn-ghost rounded-full w-10 h-10 p-0"
+              title="Help"
+            >
+              <HelpCircle className="w-5 h-5" />
+            </button>
+
+            <button
+              onClick={() => setIsSettingsOpen(true)}
+              className="btn btn-ghost rounded-full w-10 h-10 p-0"
+              title="Settings"
+            >
+              <Settings className="w-5 h-5" />
+            </button>
+
+            <button
+              onClick={() => setDarkMode(!darkMode)}
+              className="btn btn-ghost rounded-full w-10 h-10 p-0"
+              title="Toggle Dark Mode"
+            >
+              {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <div className="container grid grid-cols-1 lg:grid-cols-12 gap-8 mt-8">
+        {/* Left Sidebar */}
+        <div className="lg:col-span-4 space-y-6">
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">Configuration</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div>
+                  <label className="label">Speaker ID</label>
+                  <input
+                    type="text"
+                    className="input"
+                    placeholder="e.g. spk_001"
+                    value={speakerId}
+                    onChange={(e) => setSpeakerId(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="label">Dataset Name</label>
+                  <input
+                    type="text"
+                    className="input"
+                    placeholder="e.g. common_voice"
+                    value={datasetName}
+                    onChange={(e) => setDatasetName(e.target.value)}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          <FontSelector currentFont={fontStyle} onFontChange={handleFontChange} />
+
+          <TextInput onSentencesLoaded={handleSentencesLoaded} />
+
+          <DatasetStats />
+        </div>
+
+        {/* Main Content */}
+        <div className="lg:col-span-8 space-y-6">
+          <AnimatePresence mode="wait">
+            {sentences.length > 0 ? (
+              <motion.div
+                key="content"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.3 }}
+                className="space-y-6"
+              >
+                {/* Navigation Bar */}
+                <div className="flex items-center gap-2 overflow-x-auto pb-2">
+                  <form onSubmit={handleJump} className="flex items-center gap-2">
+                    <div className="relative">
+                      <Hash className="absolute left-2.5 top-2.5 w-4 h-4 text-muted-foreground" />
+                      <input
+                        type="number"
+                        className="input w-24 pl-9"
+                        placeholder="Jump"
+                        value={jumpIndex}
+                        onChange={(e) => setJumpIndex(e.target.value)}
+                      />
+                    </div>
+                  </form>
+
+                  <form onSubmit={handleSearch} className="flex items-center gap-2">
+                    <div className="relative">
+                      <Search className="absolute left-2.5 top-2.5 w-4 h-4 text-muted-foreground" />
+                      <input
+                        id="search-input"
+                        type="text"
+                        className="input w-32 md:w-48 pl-9"
+                        placeholder="Find text..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                      />
+                    </div>
+                  </form>
+
+                  <div className="flex-1" />
+
+                  <button onClick={() => setCurrentIndex(0)} className="btn btn-secondary text-xs" title="First">
+                    First
+                  </button>
+                  <button onClick={() => setCurrentIndex(sentences.length - 1)} className="btn btn-secondary text-xs" title="Last">
+                    Last
+                  </button>
+                </div>
+
+                <Card className="border-primary/20 shadow-lg shadow-primary/5">
+                  <CardContent className="pt-6">
+                    <div className="flex justify-between items-center mb-6">
+                      <div className="flex gap-2">
+                        <Badge variant="outline" className="opacity-70">
+                          SENTENCE {currentIndex + 1}
+                        </Badge>
+                        <Badge variant="secondary" className="opacity-50 text-xs uppercase">
+                          {detectedLang}
+                        </Badge>
+                      </div>
+                      <div className="flex gap-2">
+                        <button
+                          className={cn(
+                            "p-2 rounded-full transition-colors",
+                            bookmarks.includes(currentIndex)
+                              ? "bg-primary text-primary-foreground shadow-lg shadow-primary/25"
+                              : "hover:bg-secondary opacity-50 hover:opacity-100"
+                          )}
+                          onClick={toggleBookmark}
+                          title="Bookmark"
+                        >
+                          <Bookmark className={cn("w-4 h-4", bookmarks.includes(currentIndex) && "fill-current")} />
+                        </button>
+                      </div>
+                    </div>
+
+                    <motion.div
+                      key={currentIndex}
+                      initial={{ opacity: 0, scale: 0.98 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ duration: 0.2 }}
+                      className={cn(
+                        "sentence-display",
+                        isRTLDir && "text-right"
+                      )}
+                      style={{ fontFamily: fontFamily, direction: isRTLDir ? 'rtl' : 'ltr' }}
+                    >
+                      {sentences[currentIndex]}
+                    </motion.div>
+                  </CardContent>
+                </Card>
+
+                {currentIndex < sentences.length - 1 && (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 0.6 }}
+                    className="rounded-xl border border-dashed border-border p-4 bg-secondary/10"
+                  >
+                    <div className="text-xs font-bold opacity-50 uppercase tracking-wider mb-2">Next Up</div>
+                    <div
+                      className="text-lg text-center opacity-70 line-clamp-1"
+                      style={{ fontFamily: fontFamily }}
+                    >
+                      {sentences[currentIndex + 1]}
+                    </div>
+                  </motion.div>
+                )}
+
+                <AudioRecorder
+                  speakerId={speakerId}
+                  datasetName={datasetName}
+                  text={sentences[currentIndex]}
+                  fontStyle={fontStyle}
+                  index={currentIndex}
+                  onSaved={() => { }}
+                  onNext={handleNext}
+                  onPrev={handlePrev}
+                  onSkip={handleSkip}
+                  hasPrev={currentIndex > 0}
+                  hasNext={currentIndex < sentences.length - 1}
+                  autoAdvance={autoAdvance}
+                  autoSave={autoSave}
+                  silenceThreshold={silenceThreshold}
+                />
+              </motion.div>
+            ) : (
+              <motion.div
+                key="empty"
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="flex flex-col items-center justify-center py-20 text-center opacity-70"
+              >
+                <div className="w-24 h-24 bg-secondary/50 rounded-full flex items-center justify-center mb-6">
+                  <Mic2 className="w-10 h-10 text-primary/50" />
+                </div>
+                <h3 className="text-2xl font-bold mb-3">No Sentences Loaded</h3>
+                <p className="text-lg max-w-md mx-auto text-muted-foreground">
+                  Import a text file or paste content to begin your recording session.
+                </p>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      <SettingsModal
+        isOpen={isSettingsOpen}
+        onClose={() => setIsSettingsOpen(false)}
+        autoAdvance={autoAdvance}
+        setAutoAdvance={setAutoAdvance}
+        autoSave={autoSave}
+        setAutoSave={setAutoSave}
+        silenceThreshold={silenceThreshold}
+        setSilenceThreshold={setSilenceThreshold}
+        datasetName={datasetName}
+      />
+      <HelpModal isOpen={isHelpOpen} onClose={() => setIsHelpOpen(false)} />
+    </main>
+  );
+}

src/components/AudioRecorder.tsx

@@ -0,0 +1,406 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Mic, Square, Save, Play, SkipForward, SkipBack, Star, Volume2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { toast } from 'sonner';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+interface AudioRecorderProps {
+    speakerId: string;
+    datasetName: string;
+    text: string;
+    fontStyle: string;
+    index: number;
+    onSaved: () => void;
+    onNext: () => void;
+    onPrev: () => void;
+    onSkip: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+    autoAdvance: boolean;
+    autoSave: boolean;
+    silenceThreshold: number;
+}
+
+const EMOTIONS = [
+    { id: 'neutral', label: 'Neutral', color: 'bg-gray-500' },
+    { id: 'happy', label: 'Happy', color: 'bg-yellow-500' },
+    { id: 'sad', label: 'Sad', color: 'bg-blue-500' },
+    { id: 'angry', label: 'Angry', color: 'bg-red-500' },
+    { id: 'surprised', label: 'Surprised', color: 'bg-purple-500' },
+    { id: 'whisper', label: 'Whisper', color: 'bg-indigo-500' },
+    { id: 'excited', label: 'Excited', color: 'bg-orange-500' },
+];
+
+export default function AudioRecorder({
+    speakerId,
+    datasetName,
+    text,
+    fontStyle,
+    index,
+    onSaved,
+    onNext,
+    onPrev,
+    onSkip,
+    hasPrev,
+    hasNext,
+    autoAdvance,
+    autoSave,
+    silenceThreshold
+}: AudioRecorderProps) {
+    const [isRecording, setIsRecording] = useState(false);
+    const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
+    const [audioUrl, setAudioUrl] = useState<string | null>(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const [isSilent, setIsSilent] = useState(false);
+    const [emotion, setEmotion] = useState('neutral');
+    const [rating, setRating] = useState(3);
+    const [duration, setDuration] = useState(0);
+    const [audioLevel, setAudioLevel] = useState(0);
+
+    const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+    const chunksRef = useRef<Blob[]>([]);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const audioContextRef = useRef<AudioContext | null>(null);
+    const analyserRef = useRef<AnalyserNode | null>(null);
+    const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
+    const animationFrameRef = useRef<number | null>(null);
+    const startTimeRef = useRef<number>(0);
+
+    useEffect(() => {
+        return () => {
+            if (audioUrl) URL.revokeObjectURL(audioUrl);
+            if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+            if (audioContextRef.current) audioContextRef.current.close();
+        };
+    }, [audioUrl]);
+
+    const startRecording = async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            mediaRecorderRef.current = new MediaRecorder(stream);
+            chunksRef.current = [];
+            startTimeRef.current = Date.now();
+
+            mediaRecorderRef.current.ondataavailable = (e) => {
+                if (e.data.size > 0) chunksRef.current.push(e.data);
+            };
+
+            mediaRecorderRef.current.onstop = () => {
+                const blob = new Blob(chunksRef.current, { type: 'audio/wav' });
+                setAudioBlob(blob);
+                setAudioUrl(URL.createObjectURL(blob));
+                setDuration((Date.now() - startTimeRef.current) / 1000);
+                stopVisualizer();
+
+                if (autoSave) {
+                    saveRecording(blob);
+                }
+            };
+
+            mediaRecorderRef.current.start();
+            setIsRecording(true);
+            startVisualizer(stream);
+            toast.info('Recording started');
+        } catch (err) {
+            console.error('Error accessing microphone:', err);
+            toast.error('Could not access microphone');
+        }
+    };
+
+    const stopRecording = () => {
+        if (mediaRecorderRef.current && isRecording) {
+            mediaRecorderRef.current.stop();
+            setIsRecording(false);
+            mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop());
+            toast.info('Recording stopped');
+        }
+    };
+
+    const startVisualizer = (stream: MediaStream) => {
+        if (!canvasRef.current) return;
+
+        // @ts-ignore
+        audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
+        analyserRef.current = audioContextRef.current.createAnalyser();
+        sourceRef.current = audioContextRef.current.createMediaStreamSource(stream);
+
+        sourceRef.current.connect(analyserRef.current);
+        analyserRef.current.fftSize = 256;
+
+        const bufferLength = analyserRef.current.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const draw = () => {
+            if (!analyserRef.current) return;
+
+            animationFrameRef.current = requestAnimationFrame(draw);
+            analyserRef.current.getByteTimeDomainData(dataArray);
+
+            // Calculate RMS for level meter
+            let sum = 0;
+            for (let i = 0; i < bufferLength; i++) {
+                const x = (dataArray[i] - 128) / 128.0;
+                sum += x * x;
+            }
+            const rms = Math.sqrt(sum / bufferLength);
+            const db = 20 * Math.log10(rms);
+            // Normalize db to 0-1 range (approx -60db to 0db)
+            const level = Math.max(0, (db + 60) / 60);
+            setAudioLevel(level);
+
+            // Silence detection
+            const isCurrentlySilent = level < (silenceThreshold / 100);
+            setIsSilent(isCurrentlySilent);
+
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = isCurrentlySilent ? 'rgb(239, 68, 68)' : 'rgb(139, 92, 246)';
+            ctx.beginPath();
+
+            const sliceWidth = canvas.width * 1.0 / bufferLength;
+            let x = 0;
+
+            for (let i = 0; i < bufferLength; i++) {
+                const v = dataArray[i] / 128.0;
+                const y = v * canvas.height / 2;
+
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+
+                x += sliceWidth;
+            }
+
+            ctx.lineTo(canvas.width, canvas.height / 2);
+            ctx.stroke();
+        };
+
+        draw();
+    };
+
+    const stopVisualizer = () => {
+        if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+        setAudioLevel(0);
+    };
+
+    const saveRecording = async (blobToSave: Blob | null = audioBlob) => {
+        if (!blobToSave || !speakerId || !datasetName) {
+            toast.error('Missing recording or metadata');
+            return;
+        }
+
+        setIsSaving(true);
+        const formData = new FormData();
+        formData.append('audio', blobToSave);
+        formData.append('metadata', JSON.stringify({
+            speaker_id: speakerId,
+            dataset_name: datasetName,
+            text: text,
+            font_style: fontStyle,
+            index: index,
+            emotion: emotion,
+            rating: rating,
+            duration: duration,
+            timestamp: new Date().toISOString()
+        }));
+
+        try {
+            const res = await fetch('/api/save-recording', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (res.ok) {
+                onSaved();
+                setAudioBlob(null);
+                setAudioUrl(null);
+                toast.success('Recording saved successfully');
+                if (autoAdvance) {
+                    onNext();
+                }
+            } else {
+                toast.error('Failed to save recording');
+            }
+        } catch (err) {
+            console.error('Error saving:', err);
+            toast.error('Error saving recording');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <Card className="border-primary/10">
+            <CardContent className="p-6 space-y-6">
+                {/* Meter Bar */}
+                <div className="w-full h-2 bg-secondary rounded-full overflow-hidden">
+                    <div
+                        className="h-full bg-primary transition-all duration-75 ease-out"
+                        style={{ width: `${Math.min(100, audioLevel * 100)}%` }}
+                    />
+                </div>
+
+                <div className="flex justify-center relative">
+                    <canvas
+                        ref={canvasRef}
+                        width={600}
+                        height={100}
+                        className="w-full h-24 bg-secondary/30 rounded-xl border border-border"
+                    />
+                    {isRecording && isSilent && (
+                        <Badge variant="destructive" className="absolute top-2 right-2 animate-pulse">
+                            SILENCE DETECTED
+                        </Badge>
+                    )}
+                </div>
+
+                <div className="flex justify-center gap-6 items-center">
+                    <AnimatePresence mode="wait">
+                        {!isRecording ? (
+                            <motion.button
+                                key="record"
+                                initial={{ scale: 0 }}
+                                animate={{ scale: 1 }}
+                                exit={{ scale: 0 }}
+                                whileHover={{ scale: 1.1 }}
+                                whileTap={{ scale: 0.9 }}
+                                className="w-20 h-20 rounded-full bg-gradient-to-br from-red-500 to-pink-600 flex items-center justify-center shadow-lg shadow-red-500/30 hover:shadow-red-500/50 transition-shadow"
+                                onClick={startRecording}
+                                id="record-btn"
+                            >
+                                <Mic className="w-8 h-8 text-white" />
+                            </motion.button>
+                        ) : (
+                            <motion.button
+                                key="stop"
+                                initial={{ scale: 0 }}
+                                animate={{ scale: 1 }}
+                                exit={{ scale: 0 }}
+                                whileHover={{ scale: 1.1 }}
+                                whileTap={{ scale: 0.9 }}
+                                className="w-20 h-20 rounded-full bg-secondary flex items-center justify-center shadow-lg hover:bg-secondary/80"
+                                onClick={stopRecording}
+                            >
+                                <Square className="w-8 h-8 fill-current" />
+                            </motion.button>
+                        )}
+                    </AnimatePresence>
+                </div>
+
+                <AnimatePresence>
+                    {audioUrl && (
+                        <motion.div
+                            initial={{ opacity: 0, height: 0 }}
+                            animate={{ opacity: 1, height: 'auto' }}
+                            exit={{ opacity: 0, height: 0 }}
+                            className="space-y-6 overflow-hidden"
+                        >
+                            <div className="flex items-center justify-between gap-4 p-4 bg-secondary/20 rounded-xl border border-border/50">
+                                <audio src={audioUrl} controls className="flex-1 h-8" />
+                                <div className="flex items-center gap-2 text-sm font-medium">
+                                    <Volume2 className="w-4 h-4 text-muted-foreground" />
+                                    {duration.toFixed(1)}s
+                                </div>
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <label className="label">Emotion</label>
+                                    <div className="flex flex-wrap gap-2">
+                                        {EMOTIONS.map((e) => (
+                                            <button
+                                                key={e.id}
+                                                onClick={() => setEmotion(e.id)}
+                                                className={cn(
+                                                    "px-3 py-1.5 rounded-full text-xs font-medium transition-all border",
+                                                    emotion === e.id
+                                                        ? "bg-primary text-primary-foreground border-primary"
+                                                        : "bg-secondary/50 text-muted-foreground border-transparent hover:bg-secondary"
+                                                )}
+                                            >
+                                                {e.label}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <label className="label">Quality Rating</label>
+                                    <div className="flex gap-1">
+                                        {[1, 2, 3, 4, 5].map((star) => (
+                                            <button
+                                                key={star}
+                                                onClick={() => setRating(star)}
+                                                className="p-1 hover:scale-110 transition-transform"
+                                            >
+                                                <Star
+                                                    className={cn(
+                                                        "w-6 h-6 transition-colors",
+                                                        star <= rating ? "fill-yellow-500 text-yellow-500" : "text-muted-foreground"
+                                                    )}
+                                                />
+                                            </button>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="flex gap-4 pt-4 border-t border-border/50">
+                                <button
+                                    className="btn btn-secondary flex-1"
+                                    onClick={onPrev}
+                                    disabled={!hasPrev}
+                                >
+                                    <SkipBack className="w-4 h-4 mr-2" />
+                                    Previous
+                                </button>
+
+                                <button
+                                    className="btn btn-secondary flex-1"
+                                    onClick={onSkip}
+                                    title="Skip this sentence"
+                                >
+                                    <SkipForward className="w-4 h-4 mr-2" />
+                                    Skip
+                                </button>
+
+                                <button
+                                    className="btn btn-primary flex-[2]"
+                                    onClick={() => saveRecording()}
+                                    disabled={isSaving}
+                                    id="save-btn"
+                                >
+                                    {isSaving ? 'Saving...' : (
+                                        <>
+                                            <Save className="w-4 h-4 mr-2" />
+                                            Save & Next
+                                        </>
+                                    )}
+                                </button>
+
+                                <button
+                                    className="btn btn-secondary flex-1"
+                                    onClick={onNext}
+                                    disabled={!hasNext}
+                                >
+                                    Next
+                                    <SkipForward className="w-4 h-4 ml-2" />
+                                </button>
+                            </div>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </CardContent>
+        </Card>
+    );
+}

src/components/DatasetStats.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { BarChart3, Clock, Mic, Users, History, Play } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+interface Recording {
+    filename: string;
+    text: string;
+    duration: number;
+    timestamp: string;
+    emotion: string;
+    rating: number;
+}
+
+interface Stats {
+    total_recordings: number;
+    total_duration: number;
+    speakers: number;
+    recent_recordings: Recording[];
+}
+
+export default function DatasetStats() {
+    const [stats, setStats] = useState<Stats>({
+        total_recordings: 0,
+        total_duration: 0,
+        speakers: 0,
+        recent_recordings: []
+    });
+
+    const fetchStats = () => {
+        fetch('/api/dataset-stats')
+            .then(res => res.json())
+            .then(data => setStats(data))
+            .catch(err => console.error('Error fetching stats:', err));
+    };
+
+    useEffect(() => {
+        fetchStats();
+        const interval = setInterval(fetchStats, 5000); // Refresh every 5s
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div className="space-y-6">
+            <Card className="bg-gradient-to-br from-primary/5 to-purple-500/5 border-primary/10">
+                <CardHeader>
+                    <CardTitle className="text-lg flex items-center gap-2">
+                        <BarChart3 className="w-4 h-4" />
+                        Session Stats
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                    <div className="flex items-center justify-between p-3 bg-background/50 rounded-lg border border-border/50">
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <Mic className="w-4 h-4" />
+                            <span>Recordings</span>
+                        </div>
+                        <span className="font-mono font-bold">{stats.total_recordings}</span>
+                    </div>
+
+                    <div className="flex items-center justify-between p-3 bg-background/50 rounded-lg border border-border/50">
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <Clock className="w-4 h-4" />
+                            <span>Duration</span>
+                        </div>
+                        <span className="font-mono font-bold">{(stats.total_duration / 60).toFixed(1)}m</span>
+                    </div>
+
+                    <div className="flex items-center justify-between p-3 bg-background/50 rounded-lg border border-border/50">
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <Users className="w-4 h-4" />
+                            <span>Speakers</span>
+                        </div>
+                        <span className="font-mono font-bold">{stats.speakers}</span>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card className="max-h-[400px] flex flex-col">
+                <CardHeader>
+                    <CardTitle className="text-lg flex items-center gap-2">
+                        <History className="w-4 h-4" />
+                        Recent History
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="flex-1 overflow-y-auto space-y-2 pr-2 custom-scrollbar">
+                    {stats.recent_recordings.length === 0 ? (
+                        <p className="text-sm text-muted-foreground text-center py-4">No recordings yet</p>
+                    ) : (
+                        stats.recent_recordings.map((rec, i) => (
+                            <div key={i} className="p-3 rounded-lg bg-secondary/20 border border-border/50 hover:bg-secondary/40 transition-colors group">
+                                <div className="flex justify-between items-start mb-1">
+                                    <span className="text-xs font-mono text-muted-foreground truncate max-w-[150px]" title={rec.filename}>
+                                        {rec.filename}
+                                    </span>
+                                    <Badge variant="outline" className="text-[10px] h-5 px-1.5">
+                                        {rec.emotion}
+                                    </Badge>
+                                </div>
+                                <p className="text-sm line-clamp-2 mb-2 text-foreground/90">{rec.text}</p>
+                                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                                    <div className="flex items-center gap-1">
+                                        <Clock className="w-3 h-3" />
+                                        {rec.duration.toFixed(1)}s
+                                    </div>
+                                    <div className="flex gap-0.5">
+                                        {[...Array(rec.rating)].map((_, i) => (
+                                            <span key={i} className="text-yellow-500">★</span>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                        ))
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

src/components/FontSelector.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Type, Upload, Check, Star } from 'lucide-react';
+import { toast } from 'sonner';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { getSuggestedFont } from '@/lib/language';
+
+interface Font {
+    name: string;
+    family: string;
+    css: string;
+    url?: string;
+}
+
+interface FontSelectorProps {
+    currentFont: string;
+    onFontChange: (font: string) => void;
+    detectedLang?: string;
+}
+
+export default function FontSelector({ currentFont, onFontChange, detectedLang }: FontSelectorProps) {
+    const [fonts, setFonts] = useState<Font[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [suggestedFont, setSuggestedFont] = useState<string | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const fetchFonts = async () => {
+        try {
+            const res = await fetch('/api/fonts');
+            const data = await res.json();
+            if (data.fonts) {
+                setFonts(data.fonts);
+
+                // Inject custom fonts styles
+                data.fonts.forEach((font: Font) => {
+                    if (font.url) {
+                        const style = document.createElement('style');
+                        style.textContent = `
+              @font-face {
+                font-family: '${font.family}';
+                src: url('${font.url}') format('truetype');
+              }
+            `;
+                        document.head.appendChild(style);
+                    }
+                });
+            }
+        } catch (error) {
+            console.error('Failed to fetch fonts', error);
+            toast.error('Failed to load fonts');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchFonts();
+    }, []);
+
+    useEffect(() => {
+        if (detectedLang) {
+            const suggested = getSuggestedFont(detectedLang);
+            setSuggestedFont(suggested);
+        }
+    }, [detectedLang]);
+
+    const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        const formData = new FormData();
+        formData.append('font', file);
+
+        const promise = fetch('/api/upload-font', {
+            method: 'POST',
+            body: formData,
+        }).then(async (res) => {
+            if (!res.ok) throw new Error('Upload failed');
+            await fetchFonts();
+            return 'Font uploaded successfully';
+        });
+
+        toast.promise(promise, {
+            loading: 'Uploading font...',
+            success: (data) => data,
+            error: 'Failed to upload font',
+        });
+    };
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="text-lg flex items-center gap-2">
+                    <Type className="w-4 h-4" />
+                    Typography
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="space-y-2">
+                    <label className="label">Display Font</label>
+                    <div className="space-y-2 max-h-[200px] overflow-y-auto pr-2 custom-scrollbar">
+                        {fonts.map((font) => (
+                            <div
+                                key={font.family}
+                                className={`
+                                    p-3 rounded-lg border cursor-pointer transition-all flex items-center justify-between group
+                                    ${currentFont === font.family
+                                        ? 'bg-primary/10 border-primary shadow-sm'
+                                        : 'bg-background hover:bg-secondary/50 border-border/50 hover:border-border'
+                                    }
+                                `}
+                                onClick={() => onFontChange(font.family)}
+                            >
+                                <div className="flex flex-col gap-1">
+                                    <span className="text-sm font-medium" style={{ fontFamily: font.family }}>
+                                        {font.name}
+                                    </span>
+                                    {suggestedFont === font.name && (
+                                        <Badge variant="secondary" className="text-[10px] w-fit px-1.5 h-4 gap-1">
+                                            <Star className="w-2 h-2 fill-current" /> Recommended
+                                        </Badge>
+                                    )}
+                                </div>
+                                {currentFont === font.family && (
+                                    <Check className="w-4 h-4 text-primary" />
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-2">
+                        Select a font optimized for the target language.
+                    </p>
+                </div>
+
+                <div className="relative">
+                    <div className="absolute inset-0 flex items-center">
+                        <span className="w-full border-t border-border" />
+                    </div>
+                    <div className="relative flex justify-center text-xs uppercase">
+                        <span className="bg-card px-2 text-muted-foreground">Custom Font</span>
+                    </div>
+                </div>
+
+                <button
+                    className="btn btn-secondary w-full"
+                    onClick={() => fileInputRef.current?.click()}
+                >
+                    <Upload className="w-4 h-4 mr-2" />
+                    Upload .ttf File
+                </button>
+                <input
+                    type="file"
+                    accept=".ttf"
+                    ref={fileInputRef}
+                    className="hidden"
+                    onChange={handleFileUpload}
+                />
+            </CardContent>
+        </Card>
+    );
+}

src/components/HelpModal.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import React from 'react';
+import { X, Keyboard, Mic, Save, Search, SkipForward, Bookmark, HelpCircle } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface HelpModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export default function HelpModal({ isOpen, onClose }: HelpModalProps) {
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <>
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+                        onClick={onClose}
+                    />
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                        className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl z-50 max-h-[85vh] overflow-y-auto"
+                    >
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center justify-between">
+                                    <div className="flex items-center gap-2">
+                                        <HelpCircle className="w-5 h-5 text-primary" />
+                                        <span>Help & Documentation</span>
+                                    </div>
+                                    <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
+                                        <X className="w-5 h-5" />
+                                    </button>
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-6">
+                                {/* Quick Start */}
+                                <section className="space-y-3">
+                                    <h3 className="text-lg font-semibold flex items-center gap-2">
+                                        🚀 Quick Start
+                                    </h3>
+                                    <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground ml-2">
+                                        <li>Enter a <strong>Speaker ID</strong> and <strong>Dataset Name</strong>.</li>
+                                        <li>Paste your text sentences into the text area and click <strong>Load Sentences</strong>.</li>
+                                        <li>Press <strong>Spacebar</strong> or click the microphone to start recording.</li>
+                                        <li>Rate the recording and select an emotion (optional).</li>
+                                        <li>Press <strong>Ctrl + S</strong> or click "Save & Next" to save and move to the next sentence.</li>
+                                        <li>When finished, go to <strong>Settings</strong> to export your dataset.</li>
+                                    </ol>
+                                </section>
+
+                                <div className="grid md:grid-cols-2 gap-6">
+                                    {/* Features */}
+                                    <section className="space-y-3">
+                                        <h3 className="text-lg font-semibold flex items-center gap-2">
+                                            ✨ Features
+                                        </h3>
+                                        <ul className="space-y-2 text-sm">
+                                            <li className="flex items-start gap-2">
+                                                <Mic className="w-4 h-4 mt-0.5 text-primary" />
+                                                <span><strong>Emotion Tagging:</strong> Label recordings with emotions like Happy, Sad, or Whisper.</span>
+                                            </li>
+                                            <li className="flex items-start gap-2">
+                                                <Bookmark className="w-4 h-4 mt-0.5 text-primary" />
+                                                <span><strong>Bookmarks:</strong> Flag difficult sentences to review later.</span>
+                                            </li>
+                                            <li className="flex items-start gap-2">
+                                                <Search className="w-4 h-4 mt-0.5 text-primary" />
+                                                <span><strong>Search:</strong> Find specific sentences by keyword.</span>
+                                            </li>
+                                            <li className="flex items-start gap-2">
+                                                <SkipForward className="w-4 h-4 mt-0.5 text-primary" />
+                                                <span><strong>Skip:</strong> Skip irrelevant or problematic sentences.</span>
+                                            </li>
+                                        </ul>
+                                    </section>
+
+                                    {/* Keyboard Shortcuts */}
+                                    <section className="space-y-3">
+                                        <h3 className="text-lg font-semibold flex items-center gap-2">
+                                            ⌨️ Shortcuts
+                                        </h3>
+                                        <div className="space-y-2 text-sm">
+                                            <div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
+                                                <span>Start/Stop Recording</span>
+                                                <kbd className="bg-background border border-border px-1.5 rounded text-xs">Space</kbd>
+                                            </div>
+                                            <div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
+                                                <span>Save & Next</span>
+                                                <kbd className="bg-background border border-border px-1.5 rounded text-xs">Ctrl + S</kbd>
+                                            </div>
+                                            <div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
+                                                <span>Next Sentence</span>
+                                                <kbd className="bg-background border border-border px-1.5 rounded text-xs">→</kbd>
+                                            </div>
+                                            <div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
+                                                <span>Previous Sentence</span>
+                                                <kbd className="bg-background border border-border px-1.5 rounded text-xs">←</kbd>
+                                            </div>
+                                            <div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
+                                                <span>Focus Search</span>
+                                                <kbd className="bg-background border border-border px-1.5 rounded text-xs">Ctrl + F</kbd>
+                                            </div>
+                                        </div>
+                                    </section>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </motion.div>
+                </>
+            )}
+        </AnimatePresence>
+    );
+}

src/components/Providers.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { Toaster } from 'sonner';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+    return (
+        <>
+            {children}
+            <Toaster position="top-center" richColors />
+        </>
+    );
+}

src/components/SettingsModal.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import React from 'react';
+import { X, Download, Save, Trash2, Mic, Settings } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { toast } from 'sonner';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Slider } from '@/components/ui/slider';
+
+interface SettingsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    autoAdvance: boolean;
+    setAutoAdvance: (value: boolean) => void;
+    autoSave: boolean;
+    setAutoSave: (value: boolean) => void;
+    silenceThreshold: number;
+    setSilenceThreshold: (value: number) => void;
+    datasetName: string;
+}
+
+export default function SettingsModal({
+    isOpen,
+    onClose,
+    autoAdvance,
+    setAutoAdvance,
+    autoSave,
+    setAutoSave,
+    silenceThreshold,
+    setSilenceThreshold,
+    datasetName
+}: SettingsModalProps) {
+    const handleExport = async () => {
+        try {
+            // Trigger download by navigating to the API endpoint
+            window.location.href = `/api/export-dataset?dataset_name=${datasetName}`;
+            toast.success('Export started');
+        } catch (error) {
+            console.error(error);
+            toast.error('Error exporting dataset');
+        }
+    };
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <>
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+                        onClick={onClose}
+                    />
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                        className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md z-50"
+                    >
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center justify-between">
+                                    <span>Settings</span>
+                                    <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
+                                        <X className="w-5 h-5" />
+                                    </button>
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-6">
+                                <div className="space-y-4">
+                                    <div className="flex items-center justify-between">
+                                        <div className="space-y-0.5">
+                                            <label className="text-sm font-medium">Auto-advance</label>
+                                            <p className="text-xs text-muted-foreground">
+                                                Go to next sentence after saving
+                                            </p>
+                                        </div>
+                                        <Switch checked={autoAdvance} onCheckedChange={setAutoAdvance} />
+                                    </div>
+
+                                    <div className="flex items-center justify-between">
+                                        <div className="space-y-0.5">
+                                            <label className="text-sm font-medium">Auto-save</label>
+                                            <p className="text-xs text-muted-foreground">
+                                                Save automatically when recording stops
+                                            </p>
+                                        </div>
+                                        <Switch checked={autoSave} onCheckedChange={setAutoSave} />
+                                    </div>
+
+                                    <div className="space-y-2">
+                                        <div className="flex justify-between">
+                                            <label className="text-sm font-medium">Silence Threshold</label>
+                                            <span className="text-xs text-muted-foreground">{silenceThreshold}%</span>
+                                        </div>
+                                        <Slider
+                                            value={[silenceThreshold]}
+                                            onValueChange={(vals) => setSilenceThreshold(vals[0])}
+                                            max={100}
+                                            step={1}
+                                        />
+                                    </div>
+
+                                    <div className="pt-4 border-t border-border">
+                                        <h4 className="text-sm font-medium mb-3">Data Management</h4>
+                                        <button
+                                            onClick={handleExport}
+                                            className="btn btn-secondary w-full flex items-center justify-center gap-2"
+                                        >
+                                            <Download className="w-4 h-4" />
+                                            Export Dataset (ZIP)
+                                        </button>
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </motion.div>
+                </>
+            )}
+        </AnimatePresence>
+    );
+}

src/components/TextInput.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { Upload, FileText } from 'lucide-react';
+import { toast } from 'sonner';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface TextInputProps {
+    onSentencesLoaded: (sentences: string[]) => void;
+}
+
+export default function TextInput({ onSentencesLoaded }: TextInputProps) {
+    const [text, setText] = useState('');
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const processText = (inputText: string) => {
+        if (!inputText.trim()) return;
+
+        // Simple sentence splitting (can be improved or use API)
+        // Split by . ! ? followed by space or newline
+        const sentences = inputText
+            .replace(/([.!?])\s+/g, '$1|')
+            .split('|')
+            .map(s => s.trim())
+            .filter(s => s.length > 0);
+
+        if (sentences.length > 0) {
+            onSentencesLoaded(sentences);
+            toast.success(`Loaded ${sentences.length} sentences`);
+            setText('');
+        } else {
+            toast.error('No valid sentences found');
+        }
+    };
+
+    const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setText(e.target.value);
+    };
+
+    const handlePaste = () => {
+        processText(text);
+    };
+
+    const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const content = event.target?.result as string;
+            setText(content);
+            processText(content);
+            toast.success(`File loaded: ${file.name}`);
+        };
+        reader.onerror = () => toast.error('Failed to read file');
+        reader.readAsText(file);
+    };
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="text-lg flex items-center gap-2">
+                    <FileText className="w-4 h-4" />
+                    Input Data
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div
+                    className="border-2 border-dashed border-border rounded-xl p-6 text-center hover:bg-secondary/50 transition-colors cursor-pointer relative group"
+                    onClick={() => fileInputRef.current?.click()}
+                >
+                    <input
+                        type="file"
+                        accept=".txt"
+                        ref={fileInputRef}
+                        className="hidden"
+                        onChange={handleFileUpload}
+                    />
+                    <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground group-hover:text-primary transition-colors" />
+                    <p className="text-sm font-medium">Drop text file or click to upload</p>
+                    <p className="text-xs text-muted-foreground mt-1">.txt files supported</p>
+                </div>
+
+                <div className="relative">
+                    <div className="absolute inset-0 flex items-center">
+                        <span className="w-full border-t border-border" />
+                    </div>
+                    <div className="relative flex justify-center text-xs uppercase">
+                        <span className="bg-card px-2 text-muted-foreground">Or paste text</span>
+                    </div>
+                </div>
+
+                <div className="space-y-2">
+                    <textarea
+                        className="input min-h-[100px] resize-none"
+                        placeholder="Paste your sentences here (one per line)..."
+                        value={text}
+                        onChange={handleTextChange}
+                    />
+                    <button
+                        onClick={handlePaste}
+                        disabled={!text.trim()}
+                        className="btn btn-secondary w-full"
+                    >
+                        Load Sentences
+                    </button>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

src/components/ui/badge.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive:
+                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+                outline: "text-foreground",
+                success:
+                    "border-transparent bg-green-500/15 text-green-600 dark:text-green-400 hover:bg-green-500/25",
+                warning:
+                    "border-transparent bg-yellow-500/15 text-yellow-600 dark:text-yellow-400 hover:bg-yellow-500/25",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+)
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> { }
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+    return (
+        <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    )
+}
+
+export { Badge, badgeVariants }

src/components/ui/card.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "rounded-xl border bg-card text-card-foreground shadow-sm glass-card",
+            className
+        )}
+        {...props}
+    />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex flex-col space-y-1.5 p-6", className)}
+        {...props}
+    />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={cn(
+            "text-2xl font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex items-center p-6 pt-0", className)}
+        {...props}
+    />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/slider.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SliderProps {
+    value: number[];
+    onValueChange: (value: number[]) => void;
+    max?: number;
+    step?: number;
+    className?: string;
+}
+
+export function Slider({ value, onValueChange, max = 100, step = 1, className }: SliderProps) {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onValueChange([parseFloat(e.target.value)]);
+    };
+
+    return (
+        <div className={cn("relative flex w-full touch-none select-none items-center", className)}>
+            <input
+                type="range"
+                min={0}
+                max={max}
+                step={step}
+                value={value[0]}
+                onChange={handleChange}
+                className="h-2 w-full cursor-pointer appearance-none rounded-full bg-secondary/50 accent-primary"
+            />
+        </div>
+    );
+}

src/components/ui/switch.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SwitchProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    className?: string;
+}
+
+export function Switch({ checked, onCheckedChange, className }: SwitchProps) {
+    return (
+        <button
+            type="button"
+            role="switch"
+            aria-checked={checked}
+            onClick={() => onCheckedChange(!checked)}
+            className={cn(
+                "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+                checked ? "bg-primary" : "bg-input/50 bg-gray-200 dark:bg-gray-700",
+                className
+            )}
+        >
+            <span
+                className={cn(
+                    "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+                    checked ? "translate-x-5 bg-white" : "translate-x-0 bg-white"
+                )}
+            />
+        </button>
+    );
+}

src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+interface Shortcuts {
+    [key: string]: () => void;
+}
+
+export function useKeyboardShortcuts(shortcuts: Shortcuts) {
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            // Ignore if typing in an input
+            if (
+                document.activeElement?.tagName === 'INPUT' ||
+                document.activeElement?.tagName === 'TEXTAREA' ||
+                document.activeElement?.tagName === 'SELECT'
+            ) {
+                return;
+            }
+
+            const key = event.key.toLowerCase();
+            const ctrl = event.ctrlKey || event.metaKey;
+            const shift = event.shiftKey;
+
+            // Construct key string like "ctrl+s" or "shift+arrowright"
+            let keyString = key;
+            if (shift) keyString = `shift+${keyString}`;
+            if (ctrl) keyString = `ctrl+${keyString}`;
+
+            if (shortcuts[keyString]) {
+                event.preventDefault();
+                shortcuts[keyString]();
+            } else if (shortcuts[key]) {
+                // Fallback for single keys
+                event.preventDefault();
+                shortcuts[key]();
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [shortcuts]);
+}

src/hooks/useLocalStorage.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+    const [storedValue, setStoredValue] = useState<T>(() => {
+        if (typeof window === 'undefined') {
+            return initialValue;
+        }
+        try {
+            const item = window.localStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.log(error);
+            return initialValue;
+        }
+    });
+
+    const setValue = (value: T | ((val: T) => T)) => {
+        try {
+            const valueToStore =
+                value instanceof Function ? value(storedValue) : value;
+            setStoredValue(valueToStore);
+            if (typeof window !== 'undefined') {
+                window.localStorage.setItem(key, JSON.stringify(valueToStore));
+            }
+        } catch (error) {
+            console.log(error);
+        }
+    };
+
+    return [storedValue, setValue] as const;
+}

src/instrumentation.ts

@@ -0,0 +1,26 @@
+/**
+ * Next.js Instrumentation
+ * This file is used to initialize code that runs when the server starts.
+ * Used here to start the cleanup scheduler on HF Spaces.
+ */
+
+export async function register() {
+    // Only run on server-side
+    if (process.env.NEXT_RUNTIME === 'nodejs') {
+        try {
+            // Dynamic import to avoid client-side bundling issues
+            const { initializeDataDirs } = await import('./lib/dataPath');
+            const { startCleanupScheduler } = await import('./lib/cleanup');
+
+            // Initialize data directories
+            await initializeDataDirs();
+
+            // Start the cleanup scheduler (only runs on HF Spaces)
+            startCleanupScheduler();
+
+            console.log('[Instrumentation] Server initialization complete');
+        } catch (error) {
+            console.error('[Instrumentation] Error during initialization:', error);
+        }
+    }
+}

src/lib/cleanup.ts

@@ -0,0 +1,195 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import { getDataDir, getAudioPath, getTranscriptionsPath, getMetadataPath, getFontsPath } from './dataPath';
+
+// Cleanup interval in milliseconds (6 hours)
+const CLEANUP_INTERVAL_MS = 6 * 60 * 60 * 1000;
+
+// Maximum age for files in milliseconds (24 hours)
+const MAX_FILE_AGE_MS = 24 * 60 * 60 * 1000;
+
+// Flag to track if cleanup scheduler is running
+let cleanupSchedulerRunning = false;
+
+/**
+ * Delete files older than MAX_FILE_AGE_MS from a directory
+ * Recursively processes subdirectories
+ */
+async function cleanupDirectory(dirPath: string, dryRun: boolean = false): Promise<number> {
+    let deletedCount = 0;
+    const now = Date.now();
+
+    try {
+        const entries = await fs.readdir(dirPath, { withFileTypes: true });
+
+        for (const entry of entries) {
+            const fullPath = path.join(dirPath, entry.name);
+
+            if (entry.isDirectory()) {
+                // Recursively clean subdirectories
+                deletedCount += await cleanupDirectory(fullPath, dryRun);
+
+                // Try to remove empty directories
+                try {
+                    const contents = await fs.readdir(fullPath);
+                    if (contents.length === 0) {
+                        if (!dryRun) {
+                            await fs.rmdir(fullPath);
+                        }
+                        console.log(`[Cleanup] Removed empty directory: ${fullPath}`);
+                    }
+                } catch {
+                    // Directory might not be empty or already removed
+                }
+            } else if (entry.isFile()) {
+                try {
+                    const stats = await fs.stat(fullPath);
+                    const fileAge = now - stats.mtimeMs;
+
+                    if (fileAge > MAX_FILE_AGE_MS) {
+                        if (!dryRun) {
+                            await fs.unlink(fullPath);
+                        }
+                        deletedCount++;
+                        console.log(`[Cleanup] Deleted old file: ${entry.name} (age: ${Math.round(fileAge / 3600000)}h)`);
+                    }
+                } catch (error) {
+                    console.error(`[Cleanup] Error processing file ${fullPath}:`, error);
+                }
+            }
+        }
+    } catch (error) {
+        // Directory might not exist yet
+        if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+            console.error(`[Cleanup] Error reading directory ${dirPath}:`, error);
+        }
+    }
+
+    return deletedCount;
+}
+
+/**
+ * Run cleanup on all data directories
+ */
+export async function runCleanup(dryRun: boolean = false): Promise<{ totalDeleted: number; timestamp: string }> {
+    const startTime = Date.now();
+    console.log(`[Cleanup] Starting cleanup at ${new Date().toISOString()}...`);
+
+    let totalDeleted = 0;
+
+    // Directories to clean
+    const directoriesToClean = [
+        getAudioPath(),
+        getTranscriptionsPath(),
+    ];
+
+    for (const dir of directoriesToClean) {
+        try {
+            const deleted = await cleanupDirectory(dir, dryRun);
+            totalDeleted += deleted;
+        } catch (error) {
+            console.error(`[Cleanup] Error cleaning ${dir}:`, error);
+        }
+    }
+
+    // Clean up old metadata entries
+    try {
+        await cleanupMetadata();
+    } catch (error) {
+        console.error('[Cleanup] Error cleaning metadata:', error);
+    }
+
+    const duration = Date.now() - startTime;
+    console.log(`[Cleanup] Completed in ${duration}ms. Deleted ${totalDeleted} files.`);
+
+    return {
+        totalDeleted,
+        timestamp: new Date().toISOString()
+    };
+}
+
+/**
+ * Clean up old entries from metadata file
+ */
+async function cleanupMetadata(): Promise<void> {
+    const metadataPath = path.join(getMetadataPath(), 'dataset_info.json');
+
+    try {
+        const content = await fs.readFile(metadataPath, 'utf-8');
+        const metadata = JSON.parse(content);
+
+        // Update last cleanup timestamp
+        metadata.last_cleanup = new Date().toISOString();
+
+        // Clear old recent_recordings if they exist
+        if (metadata.recent_recordings && Array.isArray(metadata.recent_recordings)) {
+            const now = Date.now();
+            metadata.recent_recordings = metadata.recent_recordings.filter((rec: { timestamp?: string }) => {
+                if (!rec.timestamp) return false;
+                const recTime = new Date(rec.timestamp).getTime();
+                return (now - recTime) < MAX_FILE_AGE_MS;
+            });
+        }
+
+        await fs.writeFile(metadataPath, JSON.stringify(metadata, null, 2));
+    } catch (error) {
+        // Metadata file might not exist
+        if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+            throw error;
+        }
+    }
+}
+
+/**
+ * Start the cleanup scheduler
+ * Runs cleanup on startup and then periodically
+ */
+export function startCleanupScheduler(): void {
+    // Only run on HF Spaces (when /data exists or SPACE_ID is set)
+    const isHFSpaces = !!process.env.SPACE_ID || getDataDir() === '/data';
+
+    if (!isHFSpaces) {
+        console.log('[Cleanup] Not running on HF Spaces, skipping cleanup scheduler');
+        return;
+    }
+
+    if (cleanupSchedulerRunning) {
+        console.log('[Cleanup] Scheduler already running');
+        return;
+    }
+
+    cleanupSchedulerRunning = true;
+    console.log('[Cleanup] Starting cleanup scheduler (24h max age, 6h interval)');
+
+    // Run cleanup on startup (with a small delay to let the app initialize)
+    setTimeout(async () => {
+        try {
+            await runCleanup();
+        } catch (error) {
+            console.error('[Cleanup] Error during startup cleanup:', error);
+        }
+    }, 5000);
+
+    // Schedule periodic cleanup
+    setInterval(async () => {
+        try {
+            await runCleanup();
+        } catch (error) {
+            console.error('[Cleanup] Error during scheduled cleanup:', error);
+        }
+    }, CLEANUP_INTERVAL_MS);
+}
+
+/**
+ * Get cleanup status information
+ */
+export function getCleanupConfig() {
+    return {
+        maxFileAgeMs: MAX_FILE_AGE_MS,
+        maxFileAgeHours: MAX_FILE_AGE_MS / 3600000,
+        cleanupIntervalMs: CLEANUP_INTERVAL_MS,
+        cleanupIntervalHours: CLEANUP_INTERVAL_MS / 3600000,
+        isSchedulerRunning: cleanupSchedulerRunning,
+        dataDir: getDataDir(),
+    };
+}

src/lib/dataPath.ts

@@ -0,0 +1,126 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+
+/**
+ * Determines the base data directory path based on environment.
+ * On Hugging Face Spaces with persistent storage, uses /data
+ * Otherwise, uses the local dataset folder.
+ */
+export function getDataDir(): string {
+    // Check for explicit environment variable first
+    if (process.env.DATA_DIR) {
+        return process.env.DATA_DIR;
+    }
+    
+    // On HF Spaces with persistent storage, /data is available
+    // We check this at runtime since /data only exists at runtime, not build time
+    if (process.env.SPACE_ID || isHuggingFaceSpaces()) {
+        return '/data';
+    }
+    
+    // Default to local dataset directory
+    return path.join(process.cwd(), 'dataset');
+}
+
+/**
+ * Check if running on Hugging Face Spaces
+ */
+function isHuggingFaceSpaces(): boolean {
+    // HF Spaces sets SPACE_ID environment variable
+    return !!process.env.SPACE_ID;
+}
+
+/**
+ * Get the full path to a subdirectory within the data directory
+ */
+export function getDataPath(...subPaths: string[]): string {
+    return path.join(getDataDir(), ...subPaths);
+}
+
+/**
+ * Get audio directory path for a speaker
+ */
+export function getAudioPath(speakerId?: string): string {
+    if (speakerId) {
+        return getDataPath('audio', speakerId);
+    }
+    return getDataPath('audio');
+}
+
+/**
+ * Get transcriptions directory path for a speaker
+ */
+export function getTranscriptionsPath(speakerId?: string): string {
+    if (speakerId) {
+        return getDataPath('transcriptions', speakerId);
+    }
+    return getDataPath('transcriptions');
+}
+
+/**
+ * Get metadata directory path
+ */
+export function getMetadataPath(): string {
+    return getDataPath('metadata');
+}
+
+/**
+ * Get fonts directory path
+ */
+export function getFontsPath(): string {
+    return getDataPath('fonts');
+}
+
+/**
+ * Safely create a directory, handling errors gracefully
+ */
+export async function ensureDir(dirPath: string): Promise<void> {
+    try {
+        await fs.mkdir(dirPath, { recursive: true });
+    } catch (error: unknown) {
+        // Ignore EEXIST errors (directory already exists)
+        if (error instanceof Error && 'code' in error && (error as NodeJS.ErrnoException).code !== 'EEXIST') {
+            console.error(`Failed to create directory ${dirPath}:`, error);
+            throw error;
+        }
+    }
+}
+
+/**
+ * Sanitize a string for use in file paths
+ * Prevents path traversal attacks and invalid characters
+ */
+export function sanitizePath(input: string, maxLength: number = 50): string {
+    if (!input || typeof input !== 'string') {
+        return 'unknown';
+    }
+    
+    // Remove any path traversal attempts and invalid characters
+    return input
+        .replace(/\.\./g, '') // Prevent path traversal
+        .replace(/[\/\\:*?"<>|]/g, '_') // Remove invalid path characters
+        .replace(/[^a-zA-Z0-9_-]/g, '_') // Keep only safe characters
+        .substring(0, maxLength)
+        .replace(/^_+|_+$/g, '') // Trim leading/trailing underscores
+        || 'unknown';
+}
+
+/**
+ * Initialize the data directory structure
+ * Creates all necessary subdirectories
+ */
+export async function initializeDataDirs(): Promise<void> {
+    const dirs = [
+        getDataPath(),
+        getAudioPath(),
+        getTranscriptionsPath(),
+        getMetadataPath(),
+        getFontsPath(),
+    ];
+    
+    for (const dir of dirs) {
+        await ensureDir(dir);
+    }
+    
+    console.log(`[DataPath] Initialized data directories at: ${getDataDir()}`);
+}

src/lib/language.ts

@@ -0,0 +1,30 @@
+import { franc } from 'franc';
+
+export const RTL_LANGUAGES = ['arb', 'heb', 'urd', 'per', 'ara', 'fas', 'urd'];
+
+export function detectLanguage(text: string): string {
+    // franc returns 'und' if undetermined
+    // We can set a minimum length threshold to avoid noise
+    if (!text || text.length < 5) return 'eng';
+    return franc(text);
+}
+
+export function isRTL(langCode: string): boolean {
+    return RTL_LANGUAGES.includes(langCode);
+}
+
+export function getSuggestedFont(langCode: string): string {
+    switch (langCode) {
+        case 'arb':
+        case 'ara':
+            return 'Amiri'; // Assuming we have this or similar
+        case 'jpn':
+            return 'Noto Sans JP';
+        case 'kor':
+            return 'Noto Sans KR';
+        case 'cmn':
+            return 'Noto Sans SC';
+        default:
+            return 'DM Sans';
+    }
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}

start_app.bat

@@ -0,0 +1,9 @@
+@echo off
+echo Starting TTS Dataset Collector...
+docker-compose up -d
+echo.
+echo Application started!
+echo Opening browser...
+timeout /t 5
+start http://localhost:3000
+pause

tailwind.config.ts

@@ -0,0 +1,61 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ["var(--font-dm-sans)", "sans-serif"],
+                serif: ["var(--font-playfair)", "serif"],
+                mono: ["var(--font-jetbrains)", "monospace"],
+            },
+            colors: {
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+        },
+    },
+    plugins: [],
+};
+export default config;

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}