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 => {

ui/src/app/datasets/page.tsx

@@ -11,8 +11,10 @@ import { openConfirm } from '@/components/ConfirmModal';
 import { TopBar, MainContent } from '@/components/layout';
 import UniversalTable, { TableColumn } from '@/components/UniversalTable';
 import { apiClient } from '@/utils/api';
+import { useRouter } from 'next/navigation';
 
 export default function Datasets() {
+  const router = useRouter();
   const { datasets, status, refreshDatasets } = useDatasetList();
   const [newDatasetName, setNewDatasetName] = useState('');
   const [isNewDatasetModalOpen, setIsNewDatasetModalOpen] = useState(false);
@@ -81,6 +83,33 @@ export default function Datasets() {
     }
   };
 
+  const openNewDatasetModal = () => {
+    openConfirm({
+      title: 'New Dataset',
+      message: 'Enter the name of the new dataset:',
+      type: 'info',
+      confirmText: 'Create',
+      inputTitle: 'Dataset Name',
+      onConfirm: async (name?: string) => {
+        if (!name) {
+          console.error('Dataset name is required.');
+          return;
+        }
+        try {
+          const data = await apiClient.post('/api/datasets/create', { name }).then(res => res.data);
+          console.log('New dataset created:', data);
+          if (data.name) {
+            router.push(`/datasets/${data.name}`);
+          } else {
+            refreshDatasets();
+          }
+        } catch (error) {
+          console.error('Error creating new dataset:', error);
+        }
+      },
+    });
+  };
+
   return (
     <>
       <TopBar>
@@ -91,7 +120,7 @@ export default function Datasets() {
         <div>
           <Button
             className="text-gray-200 bg-slate-600 px-4 py-2 rounded-md hover:bg-slate-500 transition-colors"
-            onClick={() => setIsNewDatasetModalOpen(true)}
+            onClick={() => openNewDatasetModal()}
           >
             New Dataset
           </Button>