Update frontend/components/JobForm.tsx

frontend/components/JobForm.tsx

@@ -6,7 +6,7 @@ import EvolutionaryParams from './EvolutionaryParams';
 export default function JobForm() {
   const { t } = useTranslation('common');
   const [method, setMethod] = useState('linear');
-  const [mergeType, setMergeType] = useState('linear'); // linear / slerp / franken
+  const [mergeType, setMergeType] = useState('linear');
   const [modelASource, setModelASource] = useState('hf');
   const [modelBSource, setModelBSource] = useState('hf');
   const [modelAId, setModelAId] = useState('');
@@ -15,20 +15,34 @@ export default function JobForm() {
   const [outputRepo, setOutputRepo] = useState('');
   const [datasetFile, setDatasetFile] = useState<File | null>(null);
   const [evoParams, setEvoParams] = useState({});
-  const [frankenLayers, setFrankenLayers] = useState(''); // カンマ区切り
+  const [frankenLayers, setFrankenLayers] = useState('');
   const [submitting, setSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setSubmitting(true);
+    setErrorMessage(null);
+
     let datasetPath = '';
     if (datasetFile) {
       const formData = new FormData();
       formData.append('file', datasetFile);
-      const res = await fetch('/api/backend/upload-dataset', { method: 'POST', body: formData });
-      const json = await res.json();
-      datasetPath = json.path;
+      try {
+        const res = await fetch('/api/backend/upload-dataset', { method: 'POST', body: formData });
+        if (!res.ok) {
+          const err = await res.json();
+          throw new Error(err.detail || err.error || 'Dataset upload failed');
+        }
+        const json = await res.json();
+        datasetPath = json.path;
+      } catch (err: any) {
+        setErrorMessage(err.message);
+        setSubmitting(false);
+        return;
+      }
     }
+
     const payload = {
       model_a_source: modelASource,
       model_a_id: modelAId,
@@ -43,22 +57,41 @@ export default function JobForm() {
       civitai_key: sessionStorage.getItem('civitai_key') || '',
       franken_layers: mergeType === 'franken' ? frankenLayers.split(',').map(s => s.trim()) : undefined,
     };
-    const res = await fetch('/api/backend/submit-job', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload),
-    });
-    if (res.ok) {
+
+    try {
+      const res = await fetch('/api/backend/submit-job', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || data.detail || `Request failed with status ${res.status}`);
+      }
+
       alert(t('job_submitted'));
-    } else {
-      alert('Error submitting job');
+      // Clear form
+      setModelAId('');
+      setModelBId('');
+      setOutputRepo('');
+      setDatasetFile(null);
+      setFrankenLayers('');
+    } catch (err: any) {
+      setErrorMessage(err.message);
+    } finally {
+      setSubmitting(false);
     }
-    setSubmitting(false);
   };
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4 bg-white p-6 shadow rounded-lg">
       <ApiKeyInput />
+      {errorMessage && (
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+          {errorMessage}
+        </div>
+      )}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div>
           <label className="block text-sm font-medium">{t('model_a')}</label>