Improved the load time of dataset and sample images and videos by switching to streaming

ui/src/app/api/img/[...imagePath]/route.ts

@@ -4,41 +4,6 @@ import fs from 'fs';
 import path from 'path';
 import { getDatasetsRoot, getTrainingFolder, getDataRoot } from '@/server/settings';
 
-export async function GET(request: NextRequest, { params }: { params: { imagePath: string } }) {
-  const { imagePath } = await params;
-  try {
-    // Decode the path
-    const filepath = decodeURIComponent(imagePath);
-
-    // Get allowed directories
-    const datasetRoot = await getDatasetsRoot();
-    const trainingRoot = await getTrainingFolder();
-    const dataRoot = await getDataRoot();
-
-    const allowedDirs = [datasetRoot, trainingRoot, dataRoot];
-
-    // Security check: Ensure path is in allowed directory
-    const isAllowed = allowedDirs.some(allowedDir => filepath.startsWith(allowedDir)) && !filepath.includes('..');
-
-    if (!isAllowed) {
-      console.warn(`Access denied: ${filepath} not in ${allowedDirs.join(', ')}`);
-      return new NextResponse('Access denied', { status: 403 });
-    }
-
-    // Check if file exists
-    if (!fs.existsSync(filepath)) {
-      console.warn(`File not found: ${filepath}`);
-      return new NextResponse('File not found', { status: 404 });
-    }
-
-    // Get file info
-    const stat = fs.statSync(filepath);
-    if (!stat.isFile()) {
-      return new NextResponse('Not a file', { status: 400 });
-    }
-
-    // Determine content type
-    const ext = path.extname(filepath).toLowerCase();
 const contentTypeMap: { [key: string]: string } = {
   // Images
   '.jpg': 'image/jpeg',
@@ -61,17 +26,87 @@ export async function GET(request: NextRequest, { params }: { params: { imagePat
   '.wav': 'audio/wav',
 };
 
+export async function GET(request: NextRequest, { params }: { params: { imagePath: string } }) {
+  const { imagePath } = await params;
+  try {
+    // Decode the path
+    const filepath = decodeURIComponent(imagePath);
+
+    // Get allowed directories
+    const datasetRoot = await getDatasetsRoot();
+    const trainingRoot = await getTrainingFolder();
+    const dataRoot = await getDataRoot();
+
+    const allowedDirs = [datasetRoot, trainingRoot, dataRoot];
+
+    // Security check: Ensure path is in allowed directory
+    const isAllowed = allowedDirs.some(allowedDir => filepath.startsWith(allowedDir)) && !filepath.includes('..');
+
+    if (!isAllowed) {
+      console.warn(`Access denied: ${filepath} not in ${allowedDirs.join(', ')}`);
+      return new NextResponse('Access denied', { status: 403 });
+    }
+
+    // Stat file (async)
+    const stat = await fs.promises.stat(filepath).catch(() => null);
+    if (!stat || !stat.isFile()) {
+      return new NextResponse('File not found', { status: 404 });
+    }
+
+    const ext = path.extname(filepath).toLowerCase();
     const contentType = contentTypeMap[ext] || 'application/octet-stream';
 
-    // Read file as buffer
+    // Support range requests for video/audio seeking
-    const fileBuffer = fs.readFileSync(filepath);
+    const rangeHeader = request.headers.get('range');
+    if (rangeHeader) {
+      const parts = rangeHeader.replace(/bytes=/, '').split('-');
+      const start = parseInt(parts[0], 10);
+      const end = parts[1] ? parseInt(parts[1], 10) : stat.size - 1;
+      const chunkSize = end - start + 1;
 
-    // Return file with appropriate headers
+      const stream = fs.createReadStream(filepath, { start, end });
-    return new NextResponse(fileBuffer, {
+      const readable = new ReadableStream({
+        start(controller) {
+          stream.on('data', chunk => controller.enqueue(chunk));
+          stream.on('end', () => controller.close());
+          stream.on('error', err => controller.error(err));
+        },
+        cancel() {
+          stream.destroy();
+        },
+      });
+
+      return new NextResponse(readable as any, {
+        status: 206,
+        headers: {
+          'Content-Range': `bytes ${start}-${end}/${stat.size}`,
+          'Accept-Ranges': 'bytes',
+          'Content-Length': String(chunkSize),
+          'Content-Type': contentType,
+          'Cache-Control': 'public, max-age=86400',
+        },
+      });
+    }
+
+    // Stream the file instead of buffering it entirely
+    const stream = fs.createReadStream(filepath);
+    const readable = new ReadableStream({
+      start(controller) {
+        stream.on('data', chunk => controller.enqueue(chunk));
+        stream.on('end', () => controller.close());
+        stream.on('error', err => controller.error(err));
+      },
+      cancel() {
+        stream.destroy();
+      },
+    });
+
+    return new NextResponse(readable as any, {
       headers: {
         'Content-Type': contentType,
         'Content-Length': String(stat.size),
         'Cache-Control': 'public, max-age=86400',
+        'Accept-Ranges': 'bytes',
       },
     });
   } catch (error) {