apply scroll shenanigans

ui/src/app/api/hf-jobs/route.ts

@@ -152,6 +152,7 @@ import os
 import sys
 import subprocess
 import argparse
+import re
 import oyaml as yaml
 from datasets import load_dataset
 from huggingface_hub import HfApi, create_repo, upload_folder, snapshot_download
@@ -694,15 +695,42 @@ def generate_model_card_readme(repo_id: str, config: dict, model_name: str, cura
             gallery_section = "<Gallery />\\n\\n" + "### Prompts\\n\\n" + "\\n".join(prompt_bullets) + "\\n\\n"
 
         # Determine torch dtype based on model
-        dtype = "torch.bfloat16" if "flux" in arch.lower() else "torch.float16"
-        
+        dtype = "torch.bfloat16"
+        try:
+            arch_lower = arch.lower()
+        except AttributeError:
+            arch_lower = ""
+        if "sd15" in arch_lower or "sdxl" in arch_lower:
+            dtype = "torch.float16"
+
         # Find the main safetensors file for usage example
         main_safetensors = f"{model_name}.safetensors"
         if uploaded_files:
             safetensors_files = [f for f in uploaded_files if f.endswith('.safetensors')]
             if safetensors_files:
-                main_safetensors = safetensors_files[0]
-        
+                preferred_name = f"{model_name}.safetensors"
+                exact_match = next(
+                    (
+                        f
+                        for f in safetensors_files
+                        if os.path.basename(f) == preferred_name or f == preferred_name
+                    ),
+                    None,
+                )
+
+                if exact_match:
+                    main_safetensors = exact_match
+                else:
+                    def extract_step(filename: str) -> int:
+                        match = re.search(r"_(\d+)\.safetensors$", os.path.basename(filename))
+                        return int(match.group(1)) if match else -1
+
+                    safetensors_files.sort(
+                        key=lambda f: (extract_step(f), f),
+                        reverse=True,
+                    )
+                    main_safetensors = safetensors_files[0]
+
         # Construct YAML frontmatter
         frontmatter = {
             "tags": tags,

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

@@ -501,32 +501,62 @@ export default function SimplifiedJob({
   }, [datasetOptions]);
 
   useEffect(() => {
-    if (trainDatasetResolvedName) {
-      return;
-    }
     const currentFolder = dataset.folder_path;
     if (!currentFolder || currentFolder === defaultDatasetConfig.folder_path) {
       return;
     }
+
     const match = existingOptions.find(option => option.value === currentFolder);
-    if (match) {
+    if (!match) {
+      return;
+    }
+
+    if (trainDatasetResolvedName !== match.label) {
       setTrainDatasetResolvedName(match.label);
     }
-  }, [existingOptions, dataset.folder_path, trainDatasetResolvedName]);
 
-  useEffect(() => {
-    if (controlDatasetResolvedName) {
-      return;
+    if (!trainDatasetNameTouched) {
+      if (trainDatasetName !== match.label) {
+        setTrainDatasetName(match.label);
+      }
+      setTrainDatasetNameTouched(true);
     }
+  }, [
+    existingOptions,
+    dataset.folder_path,
+    trainDatasetResolvedName,
+    trainDatasetNameTouched,
+    trainDatasetName,
+  ]);
+
+  useEffect(() => {
     const controlPathValue = typeof dataset.control_path === 'string' ? dataset.control_path : null;
     if (!controlPathValue) {
       return;
     }
+
     const match = existingOptions.find(option => option.value === controlPathValue);
-    if (match) {
+    if (!match) {
+      return;
+    }
+
+    if (controlDatasetResolvedName !== match.label) {
       setControlDatasetResolvedName(match.label);
     }
-  }, [existingOptions, dataset.control_path, controlDatasetResolvedName]);
+
+    if (!controlDatasetNameTouched) {
+      if (controlDatasetName !== match.label) {
+        setControlDatasetName(match.label);
+      }
+      setControlDatasetNameTouched(true);
+    }
+  }, [
+    existingOptions,
+    dataset.control_path,
+    controlDatasetResolvedName,
+    controlDatasetNameTouched,
+    controlDatasetName,
+  ]);
 
   const handleDatasetRename = useCallback(
     async (target: 'train' | 'control') => {
@@ -823,6 +853,10 @@ export default function SimplifiedJob({
                   const selected = existingOptions.find(option => option.value === value);
                   setTrainDatasetResolvedName(selected?.label || null);
                   setTrainPreviewRefresh(prev => prev + 1);
+                  if (selected?.label) {
+                    setTrainDatasetName(selected.label);
+                    setTrainDatasetNameTouched(true);
+                  }
                 }}
                 options={existingOptions}
               />
@@ -838,6 +872,10 @@ export default function SimplifiedJob({
                 const matched = existingOptions.find(option => option.value === trimmed);
                 setTrainDatasetResolvedName(matched?.label || null);
                 setTrainPreviewRefresh(prev => prev + 1);
+                if (matched?.label) {
+                  setTrainDatasetName(matched.label);
+                  setTrainDatasetNameTouched(true);
+                }
               }}
               placeholder="/path/to/your/dataset"
               required
@@ -927,6 +965,10 @@ export default function SimplifiedJob({
                       const selected = existingOptions.find(option => option.value === value);
                       setControlDatasetResolvedName(selected?.label || null);
                       setControlPreviewRefresh(prev => prev + 1);
+                      if (selected?.label) {
+                        setControlDatasetName(selected.label);
+                        setControlDatasetNameTouched(true);
+                      }
                     }}
                     options={existingOptions}
                   />
@@ -943,6 +985,10 @@ export default function SimplifiedJob({
                     const matched = existingOptions.find(option => option.value === trimmed);
                     setControlDatasetResolvedName(matched?.label || null);
                     setControlPreviewRefresh(prev => prev + 1);
+                    if (matched?.label) {
+                      setControlDatasetName(matched.label);
+                      setControlDatasetNameTouched(true);
+                    }
                   }}
                   placeholder="/path/to/control/images"
                 />

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { defaultJobConfig, defaultDatasetConfig, migrateJobConfig } from './jobConfig';
@@ -25,6 +25,7 @@ import { getUserDatasetPath, updateUserDatasetPath } from '@/utils/storage/datas
 import { apiClient } from '@/utils/api';
 import { useAuth } from '@/contexts/AuthContext';
 import HFLoginButton from '@/components/HFLoginButton';
+import { Modal } from '@/components/Modal';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -50,6 +51,7 @@ export default function TrainingForm() {
     usingBrowserDb ? 'hf-jobs' : 'local',
   );
   const [hfJobSubmitted, setHfJobSubmitted] = useState(false);
+  const [showHFSaveModal, setShowHFSaveModal] = useState(false);
 
   useEffect(() => {
     if (!isSettingsLoaded || !isAuthenticated) return;
@@ -122,7 +124,7 @@ export default function TrainingForm() {
 
           if (parsedJobConfig.is_hf_job) {
             setTrainingBackend('hf-jobs');
-            setHfJobSubmitted(true);
+            setHfJobSubmitted(Boolean((parsedJobConfig as any)?.hf_job_submitted));
           }
         })
         .catch(error => console.error('Error fetching training:', error));
@@ -149,6 +151,14 @@ export default function TrainingForm() {
     }
   }, [activeTab, showAdvancedView]);
 
+  const scrollToHFStart = useCallback(() => {
+    if (typeof window === 'undefined') return;
+    const target = document.getElementById('hf-start-training');
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, []);
+
   const saveJob = async () => {
     if (!isAuthenticated) return;
     if (status === 'saving') return;
@@ -184,11 +194,39 @@ export default function TrainingForm() {
     }
   };
 
+  const handleCreateJobClick = () => {
+    if (!isAuthenticated || status === 'saving') return;
+    if (trainingBackend === 'hf-jobs' && !hfJobSubmitted) {
+      setShowHFSaveModal(true);
+      return;
+    }
+    saveJob();
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    saveJob();
+    handleCreateJobClick();
   };
 
+  const handleStartFirst = () => {
+    setShowHFSaveModal(false);
+    if (typeof window !== 'undefined') {
+      window.location.hash = '#hf-start-training';
+    }
+    setTimeout(() => {
+      scrollToHFStart();
+    }, 100);
+  };
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (window.location.hash === '#hf-start-training') {
+      setTimeout(() => {
+        scrollToHFStart();
+      }, 100);
+    }
+  }, [activeTab, scrollToHFStart]);
+
   return (
     <>
       <div className="relative z-20">
@@ -228,7 +266,7 @@ export default function TrainingForm() {
           <div>
             <Button
               className="text-gray-200 bg-green-800 hover:bg-green-700 px-3 py-1 rounded-md"
-              onClick={() => saveJob()}
+              onClick={handleCreateJobClick}
               disabled={!isAuthenticated || status === 'saving'}
             >
               {status === 'saving' 
@@ -364,6 +402,34 @@ export default function TrainingForm() {
           )}
         </>
       )}
+      <Modal
+        isOpen={showHFSaveModal}
+        onClose={() => setShowHFSaveModal(false)}
+        title="Create job without starting?"
+      >
+        <p className="text-sm text-gray-300">
+          You are about to create this job without launching it on HF Jobs. Would you like to start the submission flow instead?
+        </p>
+        <div className="mt-6 flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={handleStartFirst}
+            className="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold"
+          >
+            Start first
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setShowHFSaveModal(false);
+              saveJob();
+            }}
+            className="px-4 py-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-200 text-sm"
+          >
+            Create without starting
+          </button>
+        </div>
+      </Modal>
     </>
   );
 }

ui/src/components/HFJobsWorkflow.tsx

@@ -716,7 +716,7 @@ export default function HFJobsWorkflow({ jobConfig, onComplete, hackathonEligibl
 
   return (
     <div className="space-y-6">
-      <h2 className="text-lg font-semibold text-gray-100">Start training</h2>
+      <h2 id="hf-start-training" className="text-lg font-semibold text-gray-100">Start training</h2>
       {/* Progress indicator */}
       <div className="flex items-center justify-between mb-6">
         {(['validate', 'upload', 'submit', 'complete'] as Step[]).map((step, index) => (

ui/src/components/JobActionBar.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { Eye, Trash2, Pen, Play, Pause, ExternalLink, Upload } from 'lucide-react';
+import { Eye, Trash2, Pen, Play, Pause, ExternalLink } from 'lucide-react';
 import { Button } from '@headlessui/react';
 import { openConfirm } from '@/components/ConfirmModal';
 import { startJob, stopJob, deleteJob, getAvaliableJobActions } from '@/utils/jobs';
@@ -34,15 +34,6 @@ export default function JobActionBar({ job, onRefresh, afterDelete, className, h
 
   return (
     <div className={`${className}`}>
-      {isHFJob && !hfJobSubmitted && (
-        <Link
-          href={`/jobs/new?id=${job.id}`}
-          className="ml-2 text-yellow-400 hover:text-yellow-300 inline-block"
-          title="Submit to HF Jobs"
-        >
-          <Upload size={16} />
-        </Link>
-      )}
       {canStart && !isHFJob && (
         <Button
           onClick={async () => {

ui/src/components/JobOverview.tsx

@@ -7,12 +7,14 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import useJobLog from '@/hooks/useJobLog';
 import { JobConfig, JobRecord } from '@/types';
 import HFJobStatus from './HFJobStatus';
+import { useRouter } from 'next/navigation';
 
 interface JobOverviewProps {
   job: JobRecord;
 }
 
 export default function JobOverview({ job }: JobOverviewProps) {
+  const router = useRouter();
   // Parse job config to check if it's an HF Job
   const jobConfig = useMemo(() => {
     try {
@@ -112,9 +114,18 @@ export default function JobOverview({ job }: JobOverviewProps) {
               hfJobNamespace={jobConfig.hf_job_namespace}
             />
           ) : isHFJob && !hfJobSubmitted ? (
-            <span className="px-3 py-1 rounded-full text-sm bg-yellow-500/10 text-yellow-500">
-              Pending Submission
-            </span>
+            <div className="flex items-center gap-2">
+              <span className="px-3 py-1 rounded-full text-sm bg-yellow-500/10 text-yellow-500">
+                Pending Submission
+              </span>
+              <button
+                type="button"
+                onClick={() => router.push(`/jobs/new?id=${job.id}#hf-start-training`)}
+                className="px-3 py-1 rounded text-sm bg-blue-600 hover:bg-blue-500 text-white transition-colors"
+              >
+                Submit
+              </button>
+            </div>
           ) : (
             <span className={`px-3 py-1 rounded-full text-sm ${getStatusColor(job.status)}`}>
               {job.status}

ui/src/components/JobsTable.tsx

@@ -102,14 +102,20 @@ export default function JobsTable({ onlyActive = false }: JobsTableProps) {
                 hfJobNamespace={jobConfig.hf_job_namespace}
               />
             );
-          } else {
-            // HF Job that hasn't been submitted yet
-            return (
-              <span className="text-yellow-400">
-                Pending Submission
-              </span>
-            );
           }
+
+          // HF Job that hasn't been submitted yet
+          return (
+            <div className="flex items-center gap-2 text-sm">
+              <span className="text-yellow-400">Pending Submission</span>
+              <Link
+                href={`/jobs/new?id=${row.id}#hf-start-training`}
+                className="font-semibold text-blue-400 hover:text-blue-300"
+              >
+                Submit
+              </Link>
+            </div>
+          );
         }
         
         // Local job status