Create JobForm.tsx

frontend/components/JobForm.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import ApiKeyInput from './ApiKeyInput';
+import EvolutionaryParams from './EvolutionaryParams';
+
+export default function JobForm() {
+  const { t } = useTranslation('common');
+  const [method, setMethod] = useState('linear');
+  const [modelASource, setModelASource] = useState('hf');
+  const [modelBSource, setModelBSource] = useState('hf');
+  const [modelAId, setModelAId] = useState('');
+  const [modelBId, setModelBId] = useState('');
+  const [alpha, setAlpha] = useState(0.5);
+  const [outputRepo, setOutputRepo] = useState('');
+  const [datasetFile, setDatasetFile] = useState<File | null>(null);
+  const [evoParams, setEvoParams] = useState({});
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    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;
+    }
+    const payload = {
+      model_a_source: modelASource,
+      model_a_id: modelAId,
+      model_b_source: modelBSource,
+      model_b_id: modelBId,
+      method,
+      linear_alpha: alpha,
+      output_repo_name: outputRepo,
+      dataset: datasetPath,
+      evo_params: method === 'evolutionary' ? evoParams : null,
+      // api keys passed via ApiKeyInput context, but we'll get from sessionStorage for simplicity
+      civitai_key: sessionStorage.getItem('civitai_key') || '',
+    };
+    const res = await fetch('/api/backend/submit-job', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    if (res.ok) {
+      alert(t('job_submitted'));
+      // clear
+    } else {
+      alert('Error submitting job');
+    }
+    setSubmitting(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 bg-white p-6 shadow rounded-lg">
+      <ApiKeyInput />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium">{t('model_a')}</label>
+          <select value={modelASource} onChange={e => setModelASource(e.target.value)} className="mt-1 block w-full border rounded p-2">
+            <option value="hf">HuggingFace</option>
+            <option value="civitai">Civitai</option>
+          </select>
+          <input type="text" placeholder={t('repo_id_or_url')} value={modelAId} onChange={e => setModelAId(e.target.value)} className="mt-1 block w-full border rounded p-2" required />
+        </div>
+        <div>
+          <label className="block text-sm font-medium">{t('model_b')}</label>
+          <select value={modelBSource} onChange={e => setModelBSource(e.target.value)} className="mt-1 block w-full border rounded p-2">
+            <option value="hf">HuggingFace</option>
+            <option value="civitai">Civitai</option>
+          </select>
+          <input type="text" placeholder={t('repo_id_or_url')} value={modelBId} onChange={e => setModelBId(e.target.value)} className="mt-1 block w-full border rounded p-2" required />
+        </div>
+      </div>
+      <div>
+        <label className="block text-sm font-medium">{t('method')}</label>
+        <select value={method} onChange={e => setMethod(e.target.value)} className="mt-1 block w-full border rounded p-2">
+          <option value="linear">{t('linear')}</option>
+          <option value="evolutionary">{t('evolutionary')}</option>
+        </select>
+      </div>
+      {method === 'linear' && (
+        <div>
+          <label className="block text-sm font-medium">{t('alpha')}: {alpha}</label>
+          <input type="range" min="0" max="1" step="0.01" value={alpha} onChange={e => setAlpha(parseFloat(e.target.value))} className="w-full" />
+        </div>
+      )}
+      {method === 'evolutionary' && (
+        <EvolutionaryParams onChange={setEvoParams} />
+      )}
+      <div>
+        <label className="block text-sm font-medium">{t('calibration_dataset')} ({t('optional')})</label>
+        <input type="file" onChange={e => setDatasetFile(e.target.files?.[0] || null)} />
+      </div>
+      <div>
+        <label className="block text-sm font-medium">{t('output_repo_name')}</label>
+        <input type="text" value={outputRepo} onChange={e => setOutputRepo(e.target.value)} placeholder="my-merged-model" className="mt-1 block w-full border rounded p-2" />
+      </div>
+      <button type="submit" disabled={submitting} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50">
+        {submitting ? t('submitting') : t('start_merge')}
+      </button>
+    </form>
+  );
+}