+
+ Dashboard
+
+ {isAuthenticated ? (
+ Welcome, {namespace || 'user'}
+ ) : (
+ <>
+ Welcome, Guest
+
+
+
+
+
+ {isAuthenticated ? (
+ Active Jobs
+
+ View All
+
+
+ Sign in with Hugging Face or add an access token in Settings to view and manage jobs.
+
+ )}
+
+
+
+
+
+
+ Dataset: {datasetName}
+
+
+ You need to sign in with Hugging Face or provide a valid token to view this dataset.
+
+
+
+
+ );
+ }, [status, imgList.length]);
+
+ return (
+ <>
+ {/* Fixed top bar */}
+ {icon}
+ {text}
+{subtitle}
+
+
+
+
+
+
+ Dataset: {datasetName}
+
+
+
+
+ {imgList.map(img => (
+ refreshImageList(datasetName)}
+ />
+ ))}
+
+ )}
+
+
+
+ Datasets
+
+ {isAuthenticated ? (
+
+ ) : (
+
+ Sign in to add datasets
+
+ )}
+
+
+
+ )}
+ Sign in with Hugging Face or add an access token to manage datasets.
+
+
+
+
+
+
+
+
+
+
+
+ Job Details
+
+
+ Sign in with Hugging Face or add an access token to view job details.
+
+
+
+
+
+
+
+
+ {job && (
+ Job: {job?.name}
+Loading...
} + {status === 'error' && job == null &&Error fetching job
} + {job && ( + <> + {pages.map(page => { + const Component = page.component; + return page.value === pageKey ?
+ {pages.map(page => (
+
+ ))}
+ {
+ page?.menuItem && (
+ <>
+
+
+ );
+}
diff --git a/ui/src/app/jobs/new/AdvancedJob.tsx b/ui/src/app/jobs/new/AdvancedJob.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bccc4da22a57660ae23e0882f641362f1dfd4dec
--- /dev/null
+++ b/ui/src/app/jobs/new/AdvancedJob.tsx
@@ -0,0 +1,146 @@
+'use client';
+import { useEffect, useState, useRef } from 'react';
+import { JobConfig } from '@/types';
+import YAML from 'yaml';
+import Editor, { OnMount } from '@monaco-editor/react';
+import type { editor } from 'monaco-editor';
+import { SettingsData } from '@/types';
+import { migrateJobConfig } from './jobConfig';
+
+type Props = {
+ jobConfig: JobConfig;
+ setJobConfig: (value: any, key?: string) => void;
+ status: 'idle' | 'saving' | 'success' | 'error';
+ handleSubmit: (event: React.FormEvent
+
+
+ {
+ console.log('HF Job submitted:', jobId, 'Local job ID:', localJobId);
+ if (onHFJobComplete) {
+ onHFJobComplete(jobId, localJobId);
+ }
+ }}
+ />
+
+ )}
+
+
+
+
+
+
+
+ {showAdvancedView && isAuthenticated && (
+ <>
+ {runId ? 'Edit Training Job' : 'New Training Job'}
+
+ setGpuIDs(value)}
+ options={gpuList.map((gpu: any) => ({ value: `${gpu.index}`, label: `GPU #${gpu.index}` }))}
+ />
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ You need to sign in with Hugging Face or provide a valid access token before creating or editing jobs.
+
+
+
+
+ ) : (
+
+
+
+ Training Jobs
+
+ {isAuthenticated ? (
+
+ New Training Job
+
+ ) : (
+
+ Sign in to create jobs
+
+ )}
+
+
+
+ )}
+ Sign in with Hugging Face or add a personal access token to view and manage training jobs.
+
+
+
+
+ {children}
+
+
+
+
+
+ Settings
+
+ {isAuthenticated ? (
+ Welcome, {namespace || 'user'}
+ ) : (
+ Authenticate to unlock training features
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isAuthenticated && (
+ Authenticated
+ )}
+ Sign in with Hugging Face
+{authDescription}
+
+ {isAuthenticated ? (
+
+ ) : (
+ <>
+
+ {!isAuthenticated && authError && (
+ {authError}
+ )} +
+ {/* Left side - decorative or brand area */}
+
+ );
+}
diff --git a/ui/src/components/Card.tsx b/ui/src/components/Card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..13c7409b8be089a104eb6613664a188cb35d78d7
--- /dev/null
+++ b/ui/src/components/Card.tsx
@@ -0,0 +1,15 @@
+interface CardProps {
+ title?: string;
+ children?: React.ReactNode;
+}
+
+const Card: React.FC
+
+
+ {/* Right side - login form */}
+
+ {/* Replace with your own logo */}
+
+
+ 
+
+
+ AI Toolkit
+
+
+
+
+
+ {/* Mobile logo */}
+
+
+
+
+
+
+ AI Toolkit
+ + +{title}
} + {children ? children : null} +
+ {/* Square image container */}
+
+
+
+ {inViewport && isVisible && (
+ <>
+ {isItAVideo ? (
+
+ ) : (
+ }`})
+ )}
+
+ )}
+ {!isVisible && (
+
+ {inViewport && isVisible && (
+
+ )}
+
+ )}
+ {!isVisible && (
+
+
+
+ )}
+ {children && {children}
}
+
+
+
+
+ {imageUrl}
+
+ )}
+
+ {inViewport && isVisible && isCaptionLoaded && (
+