Add tabs

frontend/src/App.tsx

@@ -3,13 +3,14 @@ import { Target } from 'lucide-react';
 import type { JobConfig, Extras } from './types';
 import { JobRunnerProvider, useJobRunner } from './hooks/JobRunnerProvider';
 
-const ConfigPage  = lazy(() => import('./pages/ConfigPage'));
-const ResultsPage = lazy(() => import('./pages/ResultsPage'));
+const DatasetConfigPage = lazy(() => import('./pages/DatasetConfigPage'));
+const ModelConfigPage   = lazy(() => import('./pages/ModelConfigPage'));
+const ResultsPage       = lazy(() => import('./pages/ResultsPage'));
 
-type Tab = 'config'|'results'|'reports';
+type Tab = 'dataset' | 'model' | 'results';
 
 function AppInner() {
-  const [tab, setTab] = useState<Tab>('config');
+  const [tab, setTab] = useState<Tab>('dataset');
   const { start } = useJobRunner();
 
   const run = (cfg: JobConfig, extras: Extras) => {
@@ -48,8 +49,15 @@ function AppInner() {
 
         <div className="border-b border-white/40 bg-white/30 backdrop-blur supports-[backdrop-filter]:bg-white/20">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex gap-3">
-            <button className={tabBtn(tab==='config')}  onClick={() => setTab('config')}>Config Setting</button>
-            <button className={tabBtn(tab==='results')} onClick={() => setTab('results')}>Results</button>
+            <button className={tabBtn(tab==='dataset')} onClick={() => setTab('dataset')}>
+              Dataset Config
+            </button>
+            <button className={tabBtn(tab==='model')} onClick={() => setTab('model')}>
+              Model Config
+            </button>
+            <button className={tabBtn(tab==='results')} onClick={() => setTab('results')}>
+              Results
+            </button>
           </div>
         </div>
       </header>
@@ -60,8 +68,9 @@ function AppInner() {
             Loading
           </div>
         }>
-          {/* 改成把 extras 一起傳 */}
-          {tab === 'config'  && <ConfigPage onRun={run} />}
+          {/* Dataset -> Model -> Results 流程：dataset 填完再進 model，model 送出後執行並進 results */}
+          {tab === 'dataset' && <DatasetConfigPage onNext={() => setTab('model')} />}
+          {tab === 'model'   && <ModelConfigPage onRun={run} />}
           {tab === 'results' && <ResultsPage />}
         </Suspense>
       </main>

frontend/src/pages/{ConfigPage.tsx → DatasetConfigPage.tsx}

@@ -1,16 +1,18 @@
 import { useEffect, useState } from 'react';
-import { Database, Bot, ExternalLink, Shuffle } from 'lucide-react';
+import { Database, ExternalLink, Shuffle } from 'lucide-react';
 import DatasetValidator from '../components/validators/DatasetValidator';
-import ModelValidator from '../components/validators/ModelValidator';
 import { DATASETS } from '../constants/datasets';
-import { LM_MODELS} from '../constants/models';
 import type { JobConfig } from '../types';
 
-type Extras = {
-  datasetLimit: number,
+type Props = {
+  onNext: () => void;
 };
 
-export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras: Extras) => void }) {
+type ExtrasDraft = {
+  datasetLimit?: number; // 由 Model 頁設定，這裡不動它
+};
+
+export default function DatasetConfigPage({ onNext }: Props) {
   const [cfg, setCfg] = useState<JobConfig>({
     dataset: '',
     languageModel: '',
@@ -21,58 +23,52 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
     tau: 0.1,
     iterations: 1000,
     seed: 42,
-    enableFineTuning: false,
+    enableFineTuning: false, // 需求指出 finetune 不要了，但保留欄位無害
     counterfactual: false,
   });
 
-  const [datasetLimit, setDatasetLimit] = useState<number>(10);
   const [customDataset, setCustomDataset] = useState('');
-  const [customLM, setCustomLM] = useState('');
   const [showCustomDatasetInput, setShowCustomDatasetInput] = useState(false);
-  const [showCustomLanguageInput, setShowCustomLanguageInput] = useState(false);
+
   const [fieldStats, setFieldStats] = useState<Record<string, Record<string, number>>>({});
   const [numCounterfactuals, setNumCounterfactuals] = useState<number>(3);
-  const [classificationTask, setClassificationTask] = useState<'sentiment' | 'regard' | 'stereotype' | 'personality' | 'toxicity'>('sentiment');
-  const [toxicityModelChoice, setToxicityModelChoice] = useState<'detoxify' | 'junglelee'>('detoxify');
   const [selectedCfFields, setSelectedCfFields] = useState<string[]>([]);
-  const [availableFields, setAvailableFields] = useState<string[]>([]);
   const [isLoadingFields, setIsLoadingFields] = useState(false);
   const [fieldsError, setFieldsError] = useState<string | null>(null);
+
   const [metaConfigs, setMetaConfigs] = useState<string[]>([]);
   const [metaSplits, setMetaSplits] = useState<string[]>([]);
   const [selectedConfig, setSelectedConfig] = useState<string | null>(null);
   const [selectedSplit, setSelectedSplit] = useState<string>('train');
 
-  const canStart = !!(cfg.dataset && cfg.languageModel);
-  const [ftEpochs, setFtEpochs] = useState(3);
-  const [ftBatchSize, setFtBatchSize] = useState(8);
-  const [ftLR, setFtLR] = useState(5e-5);
   const setField = <K extends keyof JobConfig>(k: K, v: JobConfig[K]) =>
     setCfg((prev) => ({ ...prev, [k]: v }));
 
-  const card = 'group relative rounded-2xl p-8 border border-white/30 bg-white/60 backdrop-blur-xl ' +
+  const card =
+    'group relative rounded-2xl p-8 border border-white/30 bg-white/60 backdrop-blur-xl ' +
     'shadow-[0_15px_40px_-20px_rgba(30,41,59,0.35)] transition-all duration-300 ' +
     'hover:shadow-[0_20px_50px_-20px_rgba(79,70,229,0.45)] hover:-translate-y-0.5';
 
   const sectionTitle = 'text-xl font-bold tracking-tight text-slate-900';
   const subtext = 'text-sm text-slate-600';
-  const fieldInput = 'w-full rounded-xl border-2 border-slate-200/70 bg-white/70 px-4 py-3 ' +
+  const fieldInput =
+    'w-full rounded-xl border-2 border-slate-200/70 bg-white/70 px-4 py-3 ' +
     'focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/20 transition-all';
-  const selectInput = 'w-full rounded-xl border-2 border-slate-200/70 bg-white/70 px-3 py-2.5 ' +
+  const selectInput =
+    'w-full rounded-xl border-2 border-slate-200/70 bg-white/70 px-3 py-2.5 ' +
     'focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/20 transition-all';
-  const choiceRow = 'flex items-start gap-4 cursor-pointer p-4 rounded-xl border transition-colors ' +
+  const choiceRow =
+    'flex items-start gap-4 cursor-pointer p-4 rounded-xl border transition-colors ' +
     'bg-white/60 hover:bg-white/80 border-slate-200/60 hover:border-indigo-300';
 
-  const currentDataset = DATASETS.find((d) => d.id === cfg.dataset);
-  const fallbackFields: string[] = (currentDataset as any)?.fields || ['text', 'label', 'group'];
-
-  const toggleCfField = (f: string) =>
-    setSelectedCfFields((prev) =>
-      (prev.includes(f) ? prev.filter((x) => x !== f) : [...prev, f])
-    );
-
   const API_BASE = '/api';
-
+  function buildFieldsURL(datasetId: string, config: string | null, split: string): string {
+    const params = new URLSearchParams();
+    params.set('id', datasetId);
+    if (config && config.trim() !== '') params.set('config', config);
+    if (split && split.trim() !== '') params.set('split', split);
+    return `/dataset/fields?${params.toString()}`;
+  }
   async function fetchJSON<T>(url: string, signal?: AbortSignal): Promise<T> {
     const fullURL = url.startsWith('http') ? url : `${API_BASE}${url}`;
     const res = await fetch(fullURL, { signal });
@@ -80,73 +76,59 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
     return (await res.json()) as T;
   }
 
-
-  function buildFieldsURL(datasetId: string, config: string | null, split: string): string {
-    const params = new URLSearchParams();
-    params.set('id', datasetId);
-    
-    if (config && config.trim() !== '') {
-      params.set('config', config);
-    }
-    
-    if (split && split.trim() !== '') {
-      params.set('split', split);
-    }
-    
-    return `/dataset/fields?${params.toString()}`;
-  }
+  // 若 localStorage 之前有草稿，載入 (用於返回 Dataset 頁時保留狀態)
+  useEffect(() => {
+    try {
+      const draft = localStorage.getItem('cfgDraft');
+      if (draft) {
+        const parsed = JSON.parse(draft);
+        setCfg((prev) => ({ ...prev, ...parsed }));
+        if (parsed.numCounterfactuals) setNumCounterfactuals(parsed.numCounterfactuals);
+        if (parsed.selectedCfFields) setSelectedCfFields(parsed.selectedCfFields);
+      }
+    } catch {}
+  }, []);
 
   useEffect(() => {
-    console.log('📊 Dataset changed:', cfg.dataset);
     setSelectedCfFields([]);
     setFieldsError(null);
-    setAvailableFields([]);
-    
+
     if (!cfg.dataset || cfg.dataset === 'custom') return;
 
     const ac = new AbortController();
-    
+
     const run = async () => {
       try {
-        console.log('🔍 Fetching dataset meta...');
         const metaURL = `/dataset/meta?id=${encodeURIComponent(cfg.dataset)}`;
         const meta = await fetchJSON<{
           datasetId: string;
           configs: string[];
           splits: string[];
         }>(metaURL, ac.signal);
-        
-        console.log('📋 Meta data received:', meta);
-        
+
         setMetaConfigs(meta.configs || []);
         setMetaSplits(meta.splits || []);
-        
+
         const defaultConfig = meta.configs?.length ? meta.configs[0] : null;
-        const defaultSplit = meta.splits?.length ? 
-          (meta.splits.includes('train') ? 'train' : meta.splits[0]) : 
-          'train';
-        
+        const defaultSplit = meta.splits?.length
+          ? meta.splits.includes('train') ? 'train' : meta.splits[0]
+          : 'train';
+
         setSelectedConfig(defaultConfig);
         setSelectedSplit(defaultSplit);
-        
-        console.log('🏷️ Fetching fields with config:', defaultConfig, 'split:', defaultSplit);
+
         setIsLoadingFields(true);
-        
         const fieldsURL = buildFieldsURL(cfg.dataset, defaultConfig, defaultSplit);
         const fieldsData = await fetchJSON<{ fields: string[] }>(fieldsURL, ac.signal);
-        
-        setAvailableFields(fieldsData.fields || []);
+
+        // optional: 顯示 fields 清單 (目前以 fieldStats 呈現 domain/category)
         setFieldsError(null);
-        
       } catch (err: any) {
-        console.error('❌ Error in dataset effect:', err);
-        
         setMetaConfigs([]);
         setMetaSplits([]);
         setSelectedConfig(null);
         setSelectedSplit('train');
-        
-        setAvailableFields([]);
+
         const fieldsURL = buildFieldsURL(cfg.dataset, null, 'train');
         setFieldsError(`(${fieldsURL}) → ${err?.message || '欄位讀取失敗'}`);
       } finally {
@@ -160,30 +142,25 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
 
   useEffect(() => {
     if (!cfg.dataset || cfg.dataset === 'custom') return;
-    
-    console.log('🔄 Config/Split changed - config:', selectedConfig, 'split:', selectedSplit);
-    
+
     const ac = new AbortController();
-    
     const run = async () => {
       try {
         setIsLoadingFields(true);
-        
+
+        // 重新抓 fields
         const fieldsURL = buildFieldsURL(cfg.dataset, selectedConfig, selectedSplit);
-        const fieldsData = await fetchJSON<{ fields: string[] }>(fieldsURL, ac.signal);
-        
-        setAvailableFields(fieldsData.fields || []);
-        setFieldsError(null);
-        setSelectedCfFields([]); 
+        await fetchJSON<{ fields: string[] }>(fieldsURL, ac.signal);
 
+        // 這裡使用你原本的統計 API 格式 (domain/category)
         const statsURL = `/dataset/field-stats?id=${encodeURIComponent(cfg.dataset)}&field=domain&subfield=category`;
         const statsData = await fetchJSON<{ counts: Record<string, Record<string, number>> }>(statsURL, ac.signal);
-        setFieldStats(statsData.counts || {});
-        
+        setFieldStats(statsData.counts || []);
+        setFieldsError(null);
+        setSelectedCfFields([]);
       } catch (err: any) {
-        console.error('❌ Error fetching fields after config/split change:', err);
         const fieldsURL = buildFieldsURL(cfg.dataset, selectedConfig, selectedSplit);
-        setAvailableFields([]);
+        setFieldStats({});
         setFieldsError(`(${fieldsURL}) → ${err?.message || 'Field Read Failed'}`);
       } finally {
         setIsLoadingFields(false);
@@ -194,10 +171,12 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
     return () => ac.abort();
   }, [cfg.dataset, selectedConfig, selectedSplit]);
 
+  const canNext = !!cfg.dataset;
+
   return (
     <div className="space-y-10">
       <div className="grid grid-cols-1 lg:grid-cols-6 gap-8">
-        {/* 數據集選擇 */}
+        {/* Dataset selection */}
         <div className={`${card} lg:col-span-3`}>
           <div className="flex items-center gap-3 mb-8">
             <div className="p-3 rounded-xl bg-gradient-to-br from-indigo-600 to-fuchsia-600 shadow-md shadow-indigo-600/30">
@@ -226,9 +205,9 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
                   <div className="font-semibold text-slate-900">{dataset.name}</div>
                   <div className="flex items-center gap-4 text-xs text-slate-500 mt-2">
                     {'entities' in dataset && (
-                      <span>📊 {(dataset as any).entities?.toLocaleString?.() || '-'} entities</span>
+                      <span>📊 {(dataset as any).entities?.toLocaleString?.() || '-' } entities</span>
                     )}
-                    {'groups' in dataset && <span>👥 {(dataset as any).groups || '-'} groups</span>}
+                    {'groups' in dataset && <span>👥 {(dataset as any).groups || '-' } groups</span>}
                   </div>
                   <a
                     href={`https://huggingface.co/datasets/${dataset.id}`}
@@ -244,7 +223,7 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
               </label>
             ))}
 
-            {/* 自訂數據集 */}
+            {/* Custom dataset */}
             <label className={choiceRow}>
               <input
                 type="radio"
@@ -287,7 +266,7 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
           </div>
         </div>
 
-        {/* 反事實分析（置於中間欄） */}
+        {/* Counterfactual */}
         <div className={`${card} lg:col-span-3`}>
           <div className="flex items-center gap-3 mb-8">
             <div className="p-3 rounded-xl bg-gradient-to-br from-pink-600 to-rose-600 shadow-md shadow-pink-600/30">
@@ -297,27 +276,24 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
           </div>
 
           <div className="space-y-6">
+            <div className="pt-2">
+              <label className="block text-sm font-semibold text-slate-800 mb-1">
+                Number of Counterfactual
+              </label>
+              <input
+                type="number"
+                min={1}
+                max={20}
+                step={1}
+                value={numCounterfactuals}
+                onChange={(e) => {
+                  const v = parseInt(e.target.value || '3', 10);
+                  setNumCounterfactuals(Number.isFinite(v) ? Math.max(1, Math.min(20, v)) : 3);
+                }}
+                className={fieldInput}
+              />
+            </div>
 
-          <div className="pt-2">
-            <label className="block text-sm font-semibold text-slate-800 mb-1">
-              Number of Counterfactual
-            </label>
-            <input
-              type="number"
-              min={1}
-              max={20}
-              step={1}
-              value={numCounterfactuals}
-              onChange={(e) => {
-                const v = parseInt(e.target.value || '3', 10);
-                setNumCounterfactuals(Number.isFinite(v) ? Math.max(1, Math.min(20, v)) : 3);
-              }}
-              className={fieldInput}
-            />
-          </div>
-
-
-            {/* Dataset meta（若有 configs/splits 就顯示下拉） */}
             {(metaConfigs.length > 0 || metaSplits.length > 0) && (
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 {metaConfigs.length > 0 && (
@@ -352,7 +328,6 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
               </div>
             )}
 
-            {/* 狀態列 */}
             <div className="text-xs text-slate-500 flex items-center gap-2">
               <span>Selected Dataset</span>
               <span className="inline-flex items-center rounded-full bg-slate-800/90 text-white px-2.5 py-1">
@@ -362,13 +337,17 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
               {selectedSplit && <span className="ml-1">/ {selectedSplit}</span>}
             </div>
 
-            {/* 欄位清單 */}
+            {/* Optional fields (domain/category) */}
             <div>
               <div className="flex items-center justify-between mb-2">
                 <div className="text-sm font-semibold text-slate-800">Optional fields</div>
                 {isLoadingFields && <span className="text-xs text-slate-500">Loading</span>}
               </div>
 
+              {!!fieldsError && (
+                <div className="text-xs text-rose-600 mb-2">{fieldsError}</div>
+              )}
+
               <div className="space-y-4 max-h-64 overflow-auto pr-1">
                 {Object.entries(fieldStats).map(([domain, categories]) => (
                   <div key={domain} className="bg-white/50 border border-slate-200 rounded-xl p-3 shadow-sm">
@@ -376,6 +355,7 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 pl-1">
                       {Object.entries(categories).map(([category, count]) => {
                         const fieldKey = `${domain}/${category}`;
+                        const checked = selectedCfFields.includes(fieldKey);
                         return (
                           <label
                             key={fieldKey}
@@ -383,12 +363,10 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
                           >
                             <input
                               type="checkbox"
-                              checked={selectedCfFields.includes(fieldKey)}
+                              checked={checked}
                               onChange={() =>
                                 setSelectedCfFields((prev) =>
-                                  prev.includes(fieldKey)
-                                    ? prev.filter((x) => x !== fieldKey)
-                                    : [...prev, fieldKey]
+                                  checked ? prev.filter((x) => x !== fieldKey) : [...prev, fieldKey]
                                 )
                               }
                               className="accent-fuchsia-600"
@@ -406,244 +384,36 @@ export default function ConfigPage({ onRun }: { onRun: (cfg: JobConfig, extras:
           </div>
         </div>
 
-        {/* 模型選擇（包含 K / datasetLimit 與 metrictarget 的指定位置） */}
-        <div className={`${card} lg:col-span-3`}>
-          <div className="flex items-center gap-3 mb-8">
-            <div className="p-3 rounded-xl bg-gradient-to-br from-emerald-600 to-teal-600 shadow-md shadow-emerald-600/30">
-              <Bot className="w-6 h-6 text-white" />
-            </div>
-            <h3 className={sectionTitle}>Model Selection</h3>
-          </div>
-
-          <div className="space-y-8">
-            {/* 語言模型 */}
-            <div>
-              <label className="block text-sm font-semibold text-slate-800 mb-2">🤖 Language Generation Model</label>
-              <select
-                value={cfg.languageModel}
-                onChange={(e) => {
-                  setField('languageModel', e.target.value);
-                  setShowCustomLanguageInput(e.target.value === 'custom');
-                }}
-                className={selectInput}
-              >
-                <option value="">Select a Language Model</option>
-                {LM_MODELS.map((m) => (
-                  <option key={m.id} value={m.id}>
-                    {m.name}（{m.provider}）
-                  </option>
-                ))}
-                <option value="custom">🔧 Custom Model Upload from Hugging Face</option>
-              </select>
-
-              {showCustomLanguageInput && (
-                <input
-                  type="text"
-                  placeholder="Input Hugging Face Model ID (e.g.：microsoft/DialoGPT-medium)"
-                  value={customLM}
-                  onChange={(e) => {
-                    setCustomLM(e.target.value);
-                    setField('languageModel', e.target.value);
-                  }}
-                  className={`${fieldInput} mt-3`}
-                />
-              )}
-
-              {(customLM || cfg.languageModel) && (
-                <div className="mt-3">
-                  <ModelValidator modelId={customLM || cfg.languageModel} type="language" />
-                </div>
-              )}
-
-              {/* 語言模型下方：K 與 datasetLimit */}
-              <div className="mt-6 space-y-5">
-                <div>
-                  <label className="block text-sm font-semibold text-slate-800 mb-1">
-                    Number of Candidates
-                    <span className="ml-2 text-xs font-normal text-slate-500">The number of candidates generated for each entity</span>
-                  </label>
-                  <input
-                    type="number"
-                    min={1}
-                    max={20}
-                    value={cfg.k}
-                    onChange={(e) => setField('k', parseInt(e.target.value || '0', 10))}
-                    className={fieldInput}
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-semibold text-slate-800 mb-1">
-                    Testing Data Limit
-                  </label>
-                  <input
-                    type="number"
-                    min={1}
-                    max={10000}
-                    value={datasetLimit}
-                    onChange={(e) => setDatasetLimit(parseInt(e.target.value || '0', 10))}
-                    className={fieldInput}
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* 分類任務（固定選項） */}
-            <div className="mt-6">
-              <label className="block text-sm font-semibold text-slate-800 mb-1">
-                👻 Feature Extraction Model
-              </label>
-              <select
-                value={classificationTask}
-                onChange={(e) => setClassificationTask(e.target.value as any)}
-                className={selectInput}
-              >
-              <option value="sentiment">Sentiment (0–1, Neutral ≈ 0.5)</option>
-              <option value="regard">Regard (0–2, Neutral ≈ 1.0)</option>
-              <option value="stereotype">Stereotype (0–1, Neutral ≈ 0.0)</option>
-              <option value="personality">Personality (0–1, Neutral ≈ 0.2)</option>
-              <option value="toxicity">Toxicity (0–1, Neutral ≈ 0.0)</option>
-
-              </select>
-            </div>
-
-            {/* 毒性模型選擇（只有當任務為 toxicity 時顯示） */}
-            {classificationTask === 'toxicity' && (
-              <div className="mt-4">
-                <label className="block text-sm font-semibold text-slate-800 mb-1">
-                  Toxicity Model Selection
-                </label>
-                <select
-                  value={toxicityModelChoice}
-                  onChange={(e) => setToxicityModelChoice(e.target.value as any)}
-                  className={selectInput}
-                >
-                  <option value="detoxify">unitary/toxic-bert（detoxify）</option>
-                  <option value="junglelee">JungleLee/bert-toxic-comment-classification</option>
-                </select>
-              </div>
-            )}
-
-              {/* 評分模型下方：目標指標值 */}
-              <div className="mt-6">
-                <label className="block text-sm font-semibold text-slate-800 mb-1">
-                  Metric Target Value
-                  <span className="ml-2 text-xs font-normal text-slate-500">Indicator thresholds used to determine compliance</span>
-                </label>
-                <input
-                  type="number"
-                  min={0}
-                  max={2}
-                  step={0.01}
-                  value={cfg.metrictarget}
-                  onChange={(e) => setField('metrictarget', parseFloat(e.target.value || '0'))}
-                  className={fieldInput}
-                />
-
-
-            </div>
-          </div>
-        </div>
-        {/* Fine-tuning 設定 */}
-        <div className={`${card} lg:col-span-3`}>
-          <div className="flex items-center gap-3 mb-8">
-            <div className="p-3 rounded-xl bg-gradient-to-br from-orange-500 to-yellow-500 shadow-md shadow-orange-500/30">
-              <Database className="w-6 h-6 text-white" />
-            </div>
-            <h3 className={sectionTitle}>Fine-tuning Setting</h3>
-          </div>
-
-          <div className="space-y-6">
-            <label className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                checked={cfg.enableFineTuning}
-                onChange={(e) => setField('enableFineTuning', e.target.checked)}
-                className="accent-orange-500"
-              />
-              <span className="text-sm text-slate-800 font-semibold">Enable Fine-tuning</span>
-            </label>
-
-            {cfg.enableFineTuning && (
-              <div className="space-y-4 pl-4 border-l-2 border-orange-200">
-                {/* Epochs */}
-                <div>
-                  <label className="block text-sm font-semibold text-slate-800 mb-1">
-                    Training Epochs
-                  </label>
-                  <input
-                    type="number"
-                    min={1}
-                    max={100}
-                    value={ftEpochs}
-                    onChange={(e) => setFtEpochs(parseInt(e.target.value || '3', 10))}
-                    className={fieldInput}
-                  />
-                </div>
-
-                {/* Batch Size */}
-                <div>
-                  <label className="block text-sm font-semibold text-slate-800 mb-1">
-                    Batch Size
-                  </label>
-                  <input
-                    type="number"
-                    min={1}
-                    max={256}
-                    value={ftBatchSize}
-                    onChange={(e) => setFtBatchSize(parseInt(e.target.value || '8', 10))}
-                    className={fieldInput}
-                  />
-                </div>
-
-                {/* Learning Rate */}
-                <div>
-                  <label className="block text-sm font-semibold text-slate-800 mb-1">
-                    Learning Rate
-                  </label>
-                  <input
-                    type="number"
-                    step={0.00001}
-                    value={ftLR}
-                    onChange={(e) => setFtLR(parseFloat(e.target.value || '0.00005'))}
-                    className={fieldInput}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
       </div>
 
-      {/* 開始按鈕 */}
+      {/* Next */}
       <div className="flex">
         <button
           onClick={() => {
-            const fullCfg = {
+            // 將 Dataset/Counterfactual 的草稿寫入 localStorage，供 Model 頁讀取
+            const draft = {
               ...cfg,
-              selectedCfFields, 
+              selectedCfFields,
               numCounterfactuals,
-              classificationTask,
-              toxicityModelChoice,
-              finetuneParams: {
-              epochs: ftEpochs,
-              batchSize: ftBatchSize,
-              learningRate: ftLR,
-            },         
-            };
-            onRun(fullCfg, {
-              datasetLimit
-            });
+              // 保留使用者選的 meta config / split
+              datasetConfig: selectedConfig,
+              datasetSplit: selectedSplit,
+            } as any;
+            localStorage.setItem('cfgDraft', JSON.stringify(draft));
+
+            // 保留 extras（目前 Dataset 頁沒有調整 extras）
+            const extrasDraft: ExtrasDraft = JSON.parse(localStorage.getItem('extrasDraft') || '{}');
+            localStorage.setItem('extrasDraft', JSON.stringify(extrasDraft));
+
+            onNext();
           }}
-          disabled={!canStart}
+          disabled={!canNext}
           className="relative w-full group overflow-hidden rounded-2xl px-6 py-4 text-white font-semibold bg-gradient-to-r from-indigo-600 via-violet-600 to-fuchsia-600 shadow-lg shadow-indigo-600/20 enabled:hover:shadow-indigo-600/40 transition-all enabled:hover:translate-y-[-1px] enabled:active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed"
         >
-          <span className="relative z-10">🚀 Start</span>
+          <span className="relative z-10">Next: Model Config</span>
           <span className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity bg-[radial-gradient(1200px_200px_at_50%_-40%,rgba(255,255,255,0.35),transparent_60%)]" />
         </button>
       </div>
-
     </div>
   );
-}
+}

frontend/src/pages/ModelConfigPage.tsx

@@ -0,0 +1,281 @@
+import { useEffect, useState } from 'react';
+import { Bot, Settings2 } from 'lucide-react';
+import ModelValidator from '../components/validators/ModelValidator';
+import { LM_MODELS } from '../constants/models';
+import type { JobConfig } from '../types';
+
+type Extras = {
+  datasetLimit: number;
+};
+
+type Props = {
+  onRun: (cfg: JobConfig, extras: Extras) => void;
+};
+
+export default function ModelConfigPage({ onRun }: Props) {
+  // 從 localStorage 載入 Dataset 頁的草稿
+  const [cfg, setCfg] = useState<JobConfig>(() => {
+    try {
+      const draft = localStorage.getItem('cfgDraft');
+      if (draft) return JSON.parse(draft);
+    } catch {}
+    // fallback 預設
+    return {
+      dataset: '',
+      languageModel: '',
+      scorerModel: '',
+      k: 5,
+      numCounterfactuals: 3,
+      metrictarget: 0.5,
+      tau: 0.1,
+      iterations: 1000,
+      seed: 42,
+      enableFineTuning: false,
+      counterfactual: false,
+    };
+  });
+
+  const [datasetLimit, setDatasetLimit] = useState<number>(() => {
+    try {
+      const extrasDraft = JSON.parse(localStorage.getItem('extrasDraft') || '{}');
+      return typeof extrasDraft.datasetLimit === 'number' ? extrasDraft.datasetLimit : 10;
+    } catch {
+      return 10;
+    }
+  });
+
+  const [customLM, setCustomLM] = useState('');
+  const [showCustomLanguageInput, setShowCustomLanguageInput] = useState(false);
+
+  const [classificationTask, setClassificationTask] = useState<
+    'sentiment' | 'regard' | 'stereotype' | 'personality' | 'toxicity'
+  >('sentiment');
+  const [toxicityModelChoice, setToxicityModelChoice] = useState<'detoxify' | 'junglelee'>('detoxify');
+
+  const setField = <K extends keyof JobConfig>(k: K, v: JobConfig[K]) =>
+    setCfg((prev) => ({ ...prev, [k]: v }));
+
+  // 若有草稿中的 model 設定也載回
+  useEffect(() => {
+    try {
+      const draft = localStorage.getItem('cfgDraft');
+      if (!draft) return;
+      const parsed = JSON.parse(draft);
+      setClassificationTask(parsed.classificationTask ?? 'sentiment');
+      setToxicityModelChoice(parsed.toxicityModelChoice ?? 'detoxify');
+      if (parsed.languageModel) setField('languageModel', parsed.languageModel);
+      if (parsed.k) setField('k', parsed.k);
+      if (typeof parsed.metrictarget === 'number') setField('metrictarget', parsed.metrictarget);
+    } catch {}
+  }, []);
+
+  const card =
+    'group relative rounded-2xl p-8 border border-white/30 bg-white/60 backdrop-blur-xl ' +
+    'shadow-[0_15px_40px_-20px_rgba(30,41,59,0.35)] transition-all duration-300 ' +
+    'hover:shadow-[0_20px_50px_-20px_rgba(79,70,229,0.45)] hover:-translate-y-0.5';
+  const sectionTitle = 'text-xl font-bold tracking-tight text-slate-900';
+  const fieldInput =
+    'w-full rounded-xl border-2 border-slate-200/70 bg-white/70 px-4 py-3 ' +
+    'focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/20 transition-all';
+  const selectInput =
+    'w-full rounded-xl border-2 border-slate-200/70 bg-white/70 px-3 py-2.5 ' +
+    'focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/20 transition-all';
+
+  const canRun = !!(cfg.dataset && (cfg.languageModel || customLM));
+
+  return (
+    <div className="space-y-10">
+      <div className="grid grid-cols-1 lg:grid-cols-6 gap-8">
+        {/* 卡片 1：Language Generation Model */}
+        <div className={`${card} lg:col-span-3`}>
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-3 rounded-xl bg-gradient-to-br from-emerald-600 to-teal-600 shadow-md shadow-emerald-600/30">
+              <Bot className="w-6 h-6 text-white" />
+            </div>
+            <h3 className={sectionTitle}>Language Generation Model</h3>
+          </div>
+
+          <div className="space-y-8">
+            <div>
+              <label className="block text-sm font-semibold text-slate-800 mb-2">Model</label>
+              <select
+                value={cfg.languageModel}
+                onChange={(e) => {
+                  setField('languageModel', e.target.value);
+                  setShowCustomLanguageInput(e.target.value === 'custom');
+                }}
+                className={selectInput}
+              >
+                <option value="">Select a Language Model</option>
+                {LM_MODELS.map((m) => (
+                  <option key={m.id} value={m.id}>
+                    {m.name}（{m.provider}）
+                  </option>
+                ))}
+                <option value="custom">🔧 Custom Model Upload from Hugging Face</option>
+              </select>
+
+              {showCustomLanguageInput && (
+                <input
+                  type="text"
+                  placeholder="Input Hugging Face Model ID (e.g.: microsoft/DialoGPT-medium)"
+                  value={customLM}
+                  onChange={(e) => {
+                    setCustomLM(e.target.value);
+                    setField('languageModel', e.target.value);
+                  }}
+                  className={`${fieldInput} mt-3`}
+                />
+              )}
+
+              {(customLM || cfg.languageModel) && (
+                <div className="mt-3">
+                  <ModelValidator modelId={customLM || cfg.languageModel} type="language" />
+                </div>
+              )}
+            </div>
+
+            {/* K 與 datasetLimit */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              <div>
+                <label className="block text-sm font-semibold text-slate-800 mb-1">
+                  Number of Candidates
+                  <span className="ml-2 text-xs font-normal text-slate-500">
+                    The number of candidates generated for each entity
+                  </span>
+                </label>
+                <input
+                  type="number"
+                  min={1}
+                  max={20}
+                  value={cfg.k}
+                  onChange={(e) => setField('k', parseInt(e.target.value || '0', 10))}
+                  className={fieldInput}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold text-slate-800 mb-1">
+                  Testing Data Limit
+                </label>
+                <input
+                  type="number"
+                  min={1}
+                  max={10000}
+                  value={datasetLimit}
+                  onChange={(e) => setDatasetLimit(parseInt(e.target.value || '0', 10))}
+                  className={fieldInput}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 卡片 2：Feature Extraction / Classification */}
+        <div className={`${card} lg:col-span-3`}>
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-3 rounded-xl bg-gradient-to-br from-indigo-600 to-fuchsia-600 shadow-md shadow-indigo-600/30">
+              <Settings2 className="w-6 h-6 text-white" />
+            </div>
+            <h3 className={sectionTitle}>Feature Extraction Model</h3>
+          </div>
+
+          <div className="space-y-8">
+            <div>
+              <label className="block text-sm font-semibold text-slate-800 mb-1">
+                Task
+              </label>
+              <select
+                value={classificationTask}
+                onChange={(e) => setClassificationTask(e.target.value as any)}
+                className={selectInput}
+              >
+                <option value="sentiment">Sentiment (0–1, Neutral ≈ 0.5)</option>
+                <option value="regard">Regard (0–2, Neutral ≈ 1.0)</option>
+                <option value="stereotype">Stereotype (0–1, Neutral ≈ 0.0)</option>
+                <option value="personality">Personality (0–1, Neutral ≈ 0.2)</option>
+                <option value="toxicity">Toxicity (0–1, Neutral ≈ 0.0)</option>
+              </select>
+            </div>
+
+            {classificationTask === 'toxicity' && (
+              <div>
+                <label className="block text-sm font-semibold text-slate-800 mb-1">
+                  Toxicity Model
+                </label>
+                <select
+                  value={toxicityModelChoice}
+                  onChange={(e) => setToxicityModelChoice(e.target.value as any)}
+                  className={selectInput}
+                >
+                  <option value="detoxify">unitary/toxic-bert（detoxify）</option>
+                  <option value="junglelee">JungleLee/bert-toxic-comment-classification</option>
+                </select>
+              </div>
+            )}
+
+            <div>
+              <label className="block text-sm font-semibold text-slate-800 mb-1">
+                Metric Target Value
+                <span className="ml-2 text-xs font-normal text-slate-500">
+                  Indicator thresholds used to determine compliance
+                </span>
+              </label>
+              <input
+                type="number"
+                min={0}
+                max={2}
+                step={0.01}
+                value={cfg.metrictarget}
+                onChange={(e) => setField('metrictarget', parseFloat(e.target.value || '0'))}
+                className={fieldInput}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Run */}
+      <div className="flex">
+        <button
+          onClick={() => {
+            // 讀回 Dataset 頁草稿並合併
+            let mergedCfg: JobConfig = { ...cfg };
+            try {
+              const draft = localStorage.getItem('cfgDraft');
+              if (draft) {
+                const parsed = JSON.parse(draft);
+                mergedCfg = { ...parsed, ...cfg, languageModel: cfg.languageModel || parsed.languageModel };
+              }
+            } catch {}
+
+            // 將目前 model 相關設定也寫回草稿，之後回到本頁仍可帶入
+            const persist = {
+              ...mergedCfg,
+              classificationTask,
+              toxicityModelChoice,
+            } as any;
+            localStorage.setItem('cfgDraft', JSON.stringify(persist));
+            localStorage.setItem('extrasDraft', JSON.stringify({ datasetLimit }));
+
+            onRun(
+              {
+                ...mergedCfg,
+                classificationTask,
+                toxicityModelChoice,
+              } as any,
+              {
+                datasetLimit,
+              }
+            );
+          }}
+          disabled={!canRun}
+          className="relative w-full group overflow-hidden rounded-2xl px-6 py-4 text-white font-semibold bg-gradient-to-r from-indigo-600 via-violet-600 to-fuchsia-600 shadow-lg shadow-indigo-600/20 enabled:hover:shadow-indigo-600/40 transition-all enabled:hover:translate-y-[-1px] enabled:active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          <span className="relative z-10">🚀 Start</span>
+          <span className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity bg-[radial-gradient(1200px_200px_at_50%_-40%,rgba(255,255,255,0.35),transparent_60%)]" />
+        </button>
+      </div>
+    </div>
+  );
+}