Updates to handle video in a dataset on ui

ui/src/app/api/datasets/create/route.tsx

@@ -6,7 +6,10 @@ import { getDatasetsRoot } from '@/server/settings';
 export async function POST(request: Request) {
   try {
     const body = await request.json();
-    const { name } = body;
+    let { name } = body;
+    // clean name by making lower case,  removing special characters, and replacing spaces with underscores
+    name = name.toLowerCase().replace(/[^a-z0-9]+/g, '_');
+
     let datasetsPath = await getDatasetsRoot();
     let datasetPath = path.join(datasetsPath, name);
 
@@ -15,7 +18,7 @@ export async function POST(request: Request) {
       fs.mkdirSync(datasetPath);
     }
 
-    return NextResponse.json({ success: true });
+    return NextResponse.json({ success: true, name: name });
   } catch (error) {
     return NextResponse.json({ error: 'Failed to create dataset' }, { status: 500 });
   }

ui/src/app/api/datasets/listImages/route.ts

@@ -36,7 +36,7 @@ export async function POST(request: Request) {
  * @returns Array of absolute paths to image files
  */
 function findImagesRecursively(dir: string): string[] {
-  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp'];
+  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.mp4', '.avi', '.mov', '.mkv', '.wmv', '.m4v', '.flv'];
   let results: string[] = [];
 
   const items = fs.readdirSync(dir);

ui/src/app/api/files/[...filePath]/route.ts

@@ -50,6 +50,14 @@ export async function GET(request: NextRequest, { params }: { params: { filePath
       '.svg': 'image/svg+xml',
       '.bmp': 'image/bmp',
       '.safetensors': 'application/octet-stream',
+      // Videos
+      '.mp4': 'video/mp4',
+      '.avi': 'video/x-msvideo',
+      '.mov': 'video/quicktime',
+      '.mkv': 'video/x-matroska',
+      '.wmv': 'video/x-ms-wmv',
+      '.m4v': 'video/x-m4v',
+      '.flv': 'video/x-flv'
     };
 
     const contentType = contentTypeMap[ext] || 'application/octet-stream';

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

@@ -39,6 +39,7 @@ export async function GET(request: NextRequest, { params }: { params: { imagePat
     // Determine content type
     const ext = path.extname(filepath).toLowerCase();
     const contentTypeMap: { [key: string]: string } = {
+      // Images
       '.jpg': 'image/jpeg',
       '.jpeg': 'image/jpeg',
       '.png': 'image/png',
@@ -46,6 +47,14 @@ export async function GET(request: NextRequest, { params }: { params: { imagePat
       '.webp': 'image/webp',
       '.svg': 'image/svg+xml',
       '.bmp': 'image/bmp',
+      // Videos
+      '.mp4': 'video/mp4',
+      '.avi': 'video/x-msvideo',
+      '.mov': 'video/quicktime',
+      '.mkv': 'video/x-matroska',
+      '.wmv': 'video/x-ms-wmv',
+      '.m4v': 'video/x-m4v',
+      '.flv': 'video/x-flv'
     };
 
     const contentType = contentTypeMap[ext] || 'application/octet-stream';

ui/src/app/api/jobs/[jobID]/files/route.ts

@@ -24,7 +24,7 @@ export async function GET(request: NextRequest, { params }: { params: { jobID: s
     return NextResponse.json({ files: [] });
   }
 
-  // find all img (png, jpg, jpeg) files in the samples folder
+  // find all safetensors files in the job folder
   let files = fs
     .readdirSync(jobFolder)
     .filter(file => {