swtich views

ui/src/app/jobs/new/SimplifiedJob.tsx

@@ -42,6 +42,8 @@ type SimplifiedJobProps = {
   forceHFBackend?: boolean;
   datasetOptions: SelectOption[];
   namespace?: string | null;
+  isEditing?: boolean;
+  onRequestOriginalView?: () => void;
 };
 
 const backendOptions = [
@@ -62,6 +64,8 @@ export default function SimplifiedJob({
   forceHFBackend = false,
   datasetOptions,
   namespace,
+  isEditing = false,
+  onRequestOriginalView,
 }: SimplifiedJobProps) {
   const [showAdvanced, setShowAdvanced] = useState(false);
   const process = jobConfig.config.process[0];
@@ -93,7 +97,7 @@ export default function SimplifiedJob({
 
   const dataset = process.datasets?.[0] ?? objectCopy(defaultDatasetConfig);
 
-  const [trainDatasetMode, setTrainDatasetMode] = useState<DatasetMode>(hasCustomTrainPath ? 'existing' : 'upload');
+  const [trainDatasetMode, setTrainDatasetMode] = useState<DatasetMode>('upload');
   const [trainModeTouched, setTrainModeTouched] = useState(hasCustomTrainPath);
   const [trainDatasetName, setTrainDatasetName] = useState(() =>
     slugify(jobConfig.config.name || 'training-data'),
@@ -108,9 +112,7 @@ export default function SimplifiedJob({
   const [trainUploadInfo, setTrainUploadInfo] = useState<string | null>(null);
   const [trainUploadError, setTrainUploadError] = useState<string | null>(null);
 
-  const [controlDatasetMode, setControlDatasetMode] = useState<DatasetMode>(
-    hasCustomControlPath ? 'existing' : 'upload',
-  );
+  const [controlDatasetMode, setControlDatasetMode] = useState<DatasetMode>('upload');
   const [controlModeTouched, setControlModeTouched] = useState(hasCustomControlPath);
   const [controlDatasetName, setControlDatasetName] = useState(() =>
     slugify(`${jobConfig.config.name || 'training'}-control`),
@@ -210,26 +212,22 @@ export default function SimplifiedJob({
   const effectiveBackendOptions = forceHFBackend ? backendOptions.filter(opt => opt.value === 'hf-jobs') : backendOptions;
 
   useEffect(() => {
-    if (!trainModeTouched) {
-      setTrainDatasetMode(hasCustomTrainPath ? 'existing' : 'upload');
-      if (hasCustomTrainPath) {
-        setTrainDatasetPath(process.datasets?.[0]?.folder_path ?? null);
-      }
+    if (!trainModeTouched && isEditing && hasCustomTrainPath) {
+      setTrainDatasetMode('existing');
+      setTrainDatasetPath(process.datasets?.[0]?.folder_path ?? null);
     }
-  }, [hasCustomTrainPath, process.datasets, trainModeTouched]);
+  }, [hasCustomTrainPath, isEditing, process.datasets, trainModeTouched]);
 
   useEffect(() => {
-    if (!controlModeTouched) {
-      setControlDatasetMode(hasCustomControlPath ? 'existing' : 'upload');
-      if (hasCustomControlPath) {
-        setControlDatasetPath(
-          typeof process.datasets?.[0]?.control_path === 'string'
-            ? (process.datasets?.[0]?.control_path as string)
-            : null,
-        );
-      }
+    if (!controlModeTouched && isEditing && hasCustomControlPath) {
+      setControlDatasetMode('existing');
+      setControlDatasetPath(
+        typeof process.datasets?.[0]?.control_path === 'string'
+          ? (process.datasets?.[0]?.control_path as string)
+          : null,
+      );
     }
-  }, [hasCustomControlPath, process.datasets, controlModeTouched]);
+  }, [controlModeTouched, hasCustomControlPath, isEditing, process.datasets]);
 
   useEffect(() => {
     if (!trainDatasetNameTouched) {
@@ -525,12 +523,28 @@ export default function SimplifiedJob({
           </Button>
         </div>
         {showAdvanced && (
-          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-            <SelectInput
-              label="Training Backend"
-              value={trainingBackend}
-              onChange={value => setTrainingBackend?.(value as 'local' | 'hf-jobs')}
-              options={effectiveBackendOptions}
+          <div className="mt-6 space-y-4">
+            <p className="text-xs text-gray-400">
+              If you want all AI Toolkit UI options,{' '}
+              {onRequestOriginalView ? (
+                <button
+                  type="button"
+                  className="text-blue-300 underline hover:text-blue-200"
+                  onClick={onRequestOriginalView}
+                >
+                  switch to the Original View
+                </button>
+              ) : (
+                <span className="text-blue-200">switch to the Original View</span>
+              )}
+              .
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <SelectInput
+                label="Training Backend"
+                value={trainingBackend}
+                onChange={value => setTrainingBackend?.(value as 'local' | 'hf-jobs')}
+                options={effectiveBackendOptions}
               disabled={forceHFBackend || !setTrainingBackend}
             />
             {trainingBackend === 'local' && (
@@ -565,17 +579,18 @@ export default function SimplifiedJob({
                 { value: 'adafactor', label: 'Adafactor' },
               ]}
             />
-            <div className="flex items-center gap-2 pt-2">
-              <Checkbox
-                label="Skip First Sample"
-                checked={process.train.skip_first_sample}
-                onChange={value => setJobConfig(value, 'config.process[0].train.skip_first_sample')}
-              />
-              <Checkbox
-                label="Disable Sampling"
-                checked={process.train.disable_sampling}
-                onChange={value => setJobConfig(value, 'config.process[0].train.disable_sampling')}
-              />
+              <div className="flex items-center gap-2 pt-2">
+                <Checkbox
+                  label="Skip First Sample"
+                  checked={process.train.skip_first_sample}
+                  onChange={value => setJobConfig(value, 'config.process[0].train.skip_first_sample')}
+                />
+                <Checkbox
+                  label="Disable Sampling"
+                  checked={process.train.disable_sampling}
+                  onChange={value => setJobConfig(value, 'config.process[0].train.disable_sampling')}
+                />
+              </div>
             </div>
           </div>
         )}
@@ -586,6 +601,11 @@ export default function SimplifiedJob({
           setTrainDatasetMode(value);
           setTrainModeTouched(true);
         })}
+        <p className="text-xs text-gray-400 mb-4">
+          {requiresControlDataset
+            ? 'Here upload the target images with their captions (e.g. cyclops1.png and cyclops1.txt with the caption "make him a cyclops").'
+            : 'Upload the images you want to train your model on. Add captions with the same name (e.g. photo1.jpg with photo1.txt).'}
+        </p>
 
         {trainDatasetMode === 'upload' ? (
           <div className="space-y-4">
@@ -664,6 +684,9 @@ export default function SimplifiedJob({
               setControlDatasetMode(value);
               setControlModeTouched(true);
             })}
+            <p className="text-xs text-gray-400 mb-4">
+              Upload the source images using the same filenames as your targets (e.g. cyclops1.png for the original). Captions are not required in the control dataset.
+            </p>
 
             {controlDatasetMode === 'upload' ? (
               <div className="space-y-4">

ui/src/app/jobs/new/page.tsx

@@ -250,7 +250,7 @@ export default function TrainingForm() {
           </div>
         </TopBar>
         {isAuthenticated && (
-          <div className="bg-gray-900/70 border-b border-gray-700">
+          <div className="bg-gray-900/70 border-b border-gray-700 pt-16">
             <div className="flex justify-center gap-4 px-6 py-3">
               {(
                 [
@@ -312,6 +312,8 @@ export default function TrainingForm() {
                 forceHFBackend={usingBrowserDb}
                 datasetOptions={datasetOptions}
                 namespace={authNamespace}
+                isEditing={Boolean(runId)}
+                onRequestOriginalView={() => setActiveTab('original')}
               />
             </MainContent>
           ) : showAdvancedView ? (