Add example

backend/requirements.txt

@@ -161,4 +161,5 @@ wsproto==1.2.0
 xgboost==3.0.0
 xxhash==3.5.0
 yarl==1.9.4
-seaborn
+seaborn
+plotly

backend/server.py

@@ -80,6 +80,8 @@ def serve_data(filename):
             mimetype = 'image/jpeg'
         elif filename.endswith('.csv'):
             mimetype = 'text/csv'
+        elif filename.endswith('.html'):               # 👈 新增這行
+            mimetype = 'text/html; charset=utf-8' 
         else:
             mimetype = 'application/octet-stream'
         
@@ -519,10 +521,9 @@ def run_pipeline():
         print("[Plot check exists]", cf_path,   os.path.exists(cf_path))
 
         results['plots'] = {
-            'original_sentiment': f"/tmp/{orig_sent_title}.png",
-            'counterfactual_sentiment': f"/tmp/{cf_sent_title}.png",
+            'original_sentiment': f"/tmp/{os.path.basename(orig_path)}",
+            'counterfactual_sentiment': f"/tmp/{os.path.basename(cf_path)}",
         }
-
         print("[Plot urls]", results['plots'])
 
         if config.get("enableFineTuning"):

backend/utils/utils.py

@@ -9,6 +9,7 @@ import seaborn as sns
 import numpy as np
 import os
 import sys
+import plotly.express as px
 from transformers import (
     AutoTokenizer,
     AutoModelForCausalLM,
@@ -568,40 +569,97 @@ def _generate_cross_category_cf(base_df, text_col, name_col, category_col, num_c
     return augmented_df
 
 def _ensure_plot_saved(
-    df,
+    df: pd.DataFrame,
     score_col: str,
     basename: str,
     group_col: str = None,
     target: float = None,
     bins: int = 30,
 ) -> str:
+    """
+    Draw a histogram (density) using Plotly and save as an HTML file.
+    - If group_col is provided, colors by group and draws a dashed vertical mean per group.
+    - Legend is placed at top-right.
+    - Mean value labels are NOT annotated to avoid overlap.
+    - Optional target vertical line (dashdot).
+    Returns the saved HTML path: /tmp/{basename}.html
+    """
     os.makedirs("/tmp", exist_ok=True)
-    path = os.path.join("/tmp", f"{basename}.png")
+    path = os.path.join("/tmp", f"{basename}.html")
 
-    plt.figure(figsize=(8, 5))
-    data = df[score_col].dropna().values
+    title = basename.replace("_", " ")
 
+    # Build histogram
     if group_col and group_col in df.columns:
-        for g, sub in df.groupby(group_col):
-            vals = sub[score_col].dropna().values
-            if len(vals) == 0:
-                continue
-            plt.hist(vals, bins=bins, alpha=0.4, label=f"{g} (n={len(vals)}, μ={np.mean(vals):.3f})", density=True)
+        fig = px.histogram(
+            df,
+            x=score_col,
+            color=group_col,
+            barmode="overlay",
+            nbins=bins,
+            opacity=0.6,
+            histnorm="probability density",
+            title=title,
+        )
+
+        # Group means (no annotations)
+        means = (
+            df[[group_col, score_col]]
+            .dropna(subset=[score_col])
+            .groupby(group_col)[score_col]
+            .mean()
+        )
+
+        # Map trace colors by trace.name
+        color_map = {trace.name: getattr(trace.marker, "color", None) for trace in fig.data}
+
+        for grp, mean_val in means.items():
+            fig.add_vline(
+                x=float(mean_val),
+                line_width=2,
+                line_dash="dash",
+                line_color=color_map.get(str(grp), None)  # fallback None if missing
+            )
     else:
-        plt.hist(data, bins=bins, alpha=0.6, density=True, label=f"All (n={len(data)}, μ={np.mean(data):.3f})")
-
-    if len(data):
-        m = float(np.mean(data))
-        plt.axvline(m, linestyle="--", linewidth=2, label=f"mean={m:.3f}")
+        fig = px.histogram(
+            df,
+            x=score_col,
+            nbins=bins,
+            opacity=0.6,
+            histnorm="probability density",
+            title=title,
+        )
+        # Overall mean (no annotation)
+        vals = df[score_col].dropna().values
+        if len(vals):
+            fig.add_vline(
+                x=float(np.mean(vals)),
+                line_width=2,
+                line_dash="dash",
+            )
 
+    # Optional target line
     if target is not None:
-        plt.axvline(target, linestyle="-.", linewidth=2, label=f"target={target:.3f}")
-
-    plt.xlabel(score_col)
-    plt.ylabel("density")
-    plt.title(basename.replace("_", " "))
-    plt.legend(loc="best")
-    plt.tight_layout()
-    plt.savefig(path, dpi=160)
-    plt.close()
+        try:
+            tval = float(target)
+            fig.add_vline(
+                x=tval,
+                line_width=2,
+                line_dash="dashdot",  # matplotlib '-.' roughly maps to 'dashdot'
+            )
+        except (TypeError, ValueError):
+            pass
+
+    # Legend to top-right + right margin for legend
+    fig.update_layout(
+        legend=dict(
+            orientation="v",
+            x=0.99, y=0.99,
+            xanchor="right", yanchor="top",
+            bgcolor="rgba(0,0,0,0)"
+        ),
+        margin=dict(r=120)
+    )
+
+    fig.write_html(path, include_plotlyjs="cdn")
     return path

frontend/src/pages/DatasetConfigPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Database, ExternalLink, Shuffle } from 'lucide-react';
+import { Database, ExternalLink, Shuffle, Lock } from 'lucide-react';
 import DatasetValidator from '../components/validators/DatasetValidator';
 import { DATASETS } from '../constants/datasets';
 import type { JobConfig } from '../types';
@@ -23,7 +23,7 @@ export default function DatasetConfigPage({ onNext }: Props) {
     tau: 0.1,
     iterations: 1000,
     seed: 42,
-    enableFineTuning: false, // 需求指出 finetune 不要了，但保留欄位無害
+    enableFineTuning: false,
     counterfactual: false,
   });
 
@@ -62,13 +62,22 @@ export default function DatasetConfigPage({ onNext }: Props) {
     'bg-white/60 hover:bg-white/80 border-slate-200/60 hover:border-indigo-300';
 
   const API_BASE = '/api';
+
+  // 將 example 映射到實際要讀的 Hugging Face 資料集
+  function resolveDatasetId(id: string | null | undefined) {
+    if (!id) return id;
+    return id === 'example' ? 'AmazonScience/bold' : id;
+  }
+
   function buildFieldsURL(datasetId: string, config: string | null, split: string): string {
+    const realId = resolveDatasetId(datasetId)!;
     const params = new URLSearchParams();
-    params.set('id', datasetId);
+    params.set('id', realId);
     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 });
@@ -89,6 +98,7 @@ export default function DatasetConfigPage({ onNext }: Props) {
     } catch {}
   }, []);
 
+  // 當 dataset 改變時重新抓取 meta 與 fields
   useEffect(() => {
     setSelectedCfFields([]);
     setFieldsError(null);
@@ -96,10 +106,11 @@ export default function DatasetConfigPage({ onNext }: Props) {
     if (!cfg.dataset || cfg.dataset === 'custom') return;
 
     const ac = new AbortController();
+    const realId = resolveDatasetId(cfg.dataset)!;
 
     const run = async () => {
       try {
-        const metaURL = `/dataset/meta?id=${encodeURIComponent(cfg.dataset)}`;
+        const metaURL = `/dataset/meta?id=${encodeURIComponent(realId)}`; // 用映射後的 id
         const meta = await fetchJSON<{
           datasetId: string;
           configs: string[];
@@ -118,10 +129,9 @@ export default function DatasetConfigPage({ onNext }: Props) {
         setSelectedSplit(defaultSplit);
 
         setIsLoadingFields(true);
-        const fieldsURL = buildFieldsURL(cfg.dataset, defaultConfig, defaultSplit);
-        const fieldsData = await fetchJSON<{ fields: string[] }>(fieldsURL, ac.signal);
+        const fieldsURL = buildFieldsURL(cfg.dataset, defaultConfig, defaultSplit); // 內部會映射
+        await fetchJSON<{ fields: string[] }>(fieldsURL, ac.signal);
 
-        // optional: 顯示 fields 清單 (目前以 fieldStats 呈現 domain/category)
         setFieldsError(null);
       } catch (err: any) {
         setMetaConfigs([]);
@@ -140,10 +150,13 @@ export default function DatasetConfigPage({ onNext }: Props) {
     return () => ac.abort();
   }, [cfg.dataset]);
 
+  // 當 config/split 改變時，抓 fields 與統計
   useEffect(() => {
     if (!cfg.dataset || cfg.dataset === 'custom') return;
 
     const ac = new AbortController();
+    const realId = resolveDatasetId(cfg.dataset)!;
+
     const run = async () => {
       try {
         setIsLoadingFields(true);
@@ -152,12 +165,23 @@ export default function DatasetConfigPage({ onNext }: Props) {
         const fieldsURL = buildFieldsURL(cfg.dataset, selectedConfig, selectedSplit);
         await fetchJSON<{ fields: string[] }>(fieldsURL, ac.signal);
 
-        // 這裡使用你原本的統計 API 格式 (domain/category)
-        const statsURL = `/dataset/field-stats?id=${encodeURIComponent(cfg.dataset)}&field=domain&subfield=category`;
+        // 使用 domain/category 統計
+        const statsURL = `/dataset/field-stats?id=${encodeURIComponent(realId)}&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([]);
+
+        // 如果是 example，自動勾選兩個類別
+        if (cfg.dataset === 'example') {
+          const keys: string[] = [];
+          const cats = statsData?.counts?.domain || {};
+          if ('American_actors' in cats) keys.push('domain/American_actors');
+          if ('American_actresses' in cats) keys.push('domain/American_actresses');
+          setSelectedCfFields(keys);
+        } else {
+          setSelectedCfFields([]);
+        }
       } catch (err: any) {
         const fieldsURL = buildFieldsURL(cfg.dataset, selectedConfig, selectedSplit);
         setFieldStats({});
@@ -171,7 +195,28 @@ export default function DatasetConfigPage({ onNext }: Props) {
     return () => ac.abort();
   }, [cfg.dataset, selectedConfig, selectedSplit]);
 
+  // 👉 Example: 自動設定 Counterfactual 數量
+  useEffect(() => {
+    if (cfg.dataset === 'example') {
+      setNumCounterfactuals(20);
+    }
+  }, [cfg.dataset]);
+
+  // （保留）當 fieldStats 更新時，如果是 example，自動填入兩個 key
+  useEffect(() => {
+    if (cfg.dataset !== 'example') return;
+    const targets = new Set(['American_actors', 'American_actresses']);
+    const keys: string[] = [];
+    Object.entries(fieldStats).forEach(([domain, categories]) => {
+      Object.keys(categories).forEach((cat) => {
+        if (targets.has(cat)) keys.push(`${domain}/${cat}`);
+      });
+    });
+    if (keys.length > 0) setSelectedCfFields(keys);
+  }, [cfg.dataset, fieldStats]);
+
   const canNext = !!cfg.dataset;
+  const isExample = cfg.dataset === 'example';
 
   return (
     <div className="space-y-10">
@@ -223,6 +268,37 @@ export default function DatasetConfigPage({ onNext }: Props) {
               </label>
             ))}
 
+            {/* Example dataset (preconfigured) */}
+            <label className={choiceRow}>
+              <input
+                type="radio"
+                name="dataset"
+                value="example"
+                checked={cfg.dataset === 'example'}
+                onChange={(e) => {
+                  setField('dataset', e.target.value);
+                  setShowCustomDatasetInput(false);
+                  setCustomDataset('');
+                  setSelectedCfFields([]); // 將由 effect 根據 fieldStats 自動填
+                  setNumCounterfactuals(20);
+                }}
+                className="mt-1 accent-violet-600"
+              />
+              <div className="flex-1">
+                <div className="font-semibold text-slate-900 flex items-center gap-2">
+                  🧪 Example
+                  {isExample && (
+                    <span className="inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full bg-slate-900 text-white">
+                      <Lock className="w-3 h-3" /> CF fields locked
+                    </span>
+                  )}
+                </div>
+                <div className="text-xs text-slate-600 mt-1">
+                  Auto-sets counterfactuals to 20 and locks categories to <code>American_actors</code> & <code>American_actresses</code>.
+                </div>
+              </div>
+            </label>
+
             {/* Custom dataset */}
             <label className={choiceRow}>
               <input
@@ -285,13 +361,20 @@ export default function DatasetConfigPage({ onNext }: Props) {
                 min={1}
                 max={20}
                 step={1}
-                value={numCounterfactuals}
+                value={isExample ? 20 : numCounterfactuals}
                 onChange={(e) => {
+                  if (isExample) return; // Example 時忽略修改
                   const v = parseInt(e.target.value || '3', 10);
                   setNumCounterfactuals(Number.isFinite(v) ? Math.max(1, Math.min(20, v)) : 3);
                 }}
-                className={fieldInput}
+                disabled={isExample}
+                className={fieldInput + (isExample ? ' cursor-not-allowed opacity-80' : '')}
               />
+              {isExample && (
+                <div className="text-[11px] mt-1 text-slate-500 flex items-center gap-1">
+                  <Lock className="w-3 h-3" /> Locked to 20 for the Example preset.
+                </div>
+              )}
             </div>
 
             {(metaConfigs.length > 0 || metaSplits.length > 0) && (
@@ -341,6 +424,11 @@ export default function DatasetConfigPage({ onNext }: Props) {
             <div>
               <div className="flex items-center justify-between mb-2">
                 <div className="text-sm font-semibold text-slate-800">Optional fields</div>
+                {isExample && (
+                  <span className="inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full bg-slate-900 text-white">
+                    <Lock className="w-3 h-3" /> Locked by Example
+                  </span>
+                )}
                 {isLoadingFields && <span className="text-xs text-slate-500">Loading</span>}
               </div>
 
@@ -356,23 +444,31 @@ export default function DatasetConfigPage({ onNext }: Props) {
                       {Object.entries(categories).map(([category, count]) => {
                         const fieldKey = `${domain}/${category}`;
                         const checked = selectedCfFields.includes(fieldKey);
+                        const locked = isExample && (category === 'American_actors' || category === 'American_actresses');
                         return (
                           <label
                             key={fieldKey}
-                            className="flex items-center gap-2 text-sm text-slate-800 hover:bg-white/60 px-2 py-1 rounded-md transition-colors"
+                            className={`flex items-center gap-2 text-sm text-slate-800 px-2 py-1 rounded-md transition-colors ${
+                              isExample ? 'opacity-80 cursor-not-allowed' : 'hover:bg-white/60'
+                            }`}
                           >
                             <input
                               type="checkbox"
                               checked={checked}
-                              onChange={() =>
+                              disabled={isExample}
+                              onChange={() => {
+                                if (isExample) return; // Example 時不可手動更改
                                 setSelectedCfFields((prev) =>
                                   checked ? prev.filter((x) => x !== fieldKey) : [...prev, fieldKey]
-                                )
-                              }
+                                );
+                              }}
                               className="accent-fuchsia-600"
                             />
                             <span>{category}</span>
                             <span className="text-xs text-slate-500">({count})</span>
+                            {locked && (
+                              <span className="ml-1 text-[10px] px-1.5 py-0.5 rounded bg-slate-900 text-white">locked</span>
+                            )}
                           </label>
                         );
                       })}
@@ -394,7 +490,7 @@ export default function DatasetConfigPage({ onNext }: Props) {
             const draft = {
               ...cfg,
               selectedCfFields,
-              numCounterfactuals,
+              numCounterfactuals: isExample ? 20 : numCounterfactuals, // 例項下強制 20
               // 保留使用者選的 meta config / split
               datasetConfig: selectedConfig,
               datasetSplit: selectedSplit,

frontend/src/pages/ModelConfigPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Bot, Settings2 } from 'lucide-react';
+import { Bot, Settings2, Lock } from 'lucide-react';
 import ModelValidator from '../components/validators/ModelValidator';
 import { LM_MODELS } from '../constants/models';
 import type { JobConfig } from '../types';
@@ -69,6 +69,18 @@ export default function ModelConfigPage({ onRun }: Props) {
     } catch {}
   }, []);
 
+  // 🔒 Example 鎖死規則：偵測到 example 就強制設定並關閉自定義輸入
+  const isExample = cfg.dataset === 'example';
+  useEffect(() => {
+    if (!isExample) return;
+    setField('languageModel', 'openai-community/gpt2'); // 後端預設也用這個
+    setShowCustomLanguageInput(false);
+    setCustomLM('');
+    setField('k', 10);
+    setClassificationTask('sentiment');
+    setField('metrictarget', 0.5);
+  }, [isExample]); // 當 dataset 改為/離開 example 時觸發
+
   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 ' +
@@ -93,18 +105,25 @@ export default function ModelConfigPage({ onRun }: Props) {
               <Bot className="w-6 h-6 text-white" />
             </div>
             <h3 className={sectionTitle}>Language Generation Model</h3>
+            {isExample && (
+              <span className="ml-2 inline-flex items-center gap-1 text-[11px] font-semibold px-2 py-0.5 rounded-full bg-slate-900 text-white">
+                <Lock className="w-3 h-3" /> Locked by Example
+              </span>
+            )}
           </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}
+                value={isExample ? 'openai-community/gpt2' : cfg.languageModel}
                 onChange={(e) => {
+                  if (isExample) return;
                   setField('languageModel', e.target.value);
                   setShowCustomLanguageInput(e.target.value === 'custom');
                 }}
-                className={selectInput}
+                disabled={isExample}
+                className={selectInput + (isExample ? ' cursor-not-allowed opacity-80' : '')}
               >
                 <option value="">Select a Language Model</option>
                 {LM_MODELS.map((m) => (
@@ -115,7 +134,7 @@ export default function ModelConfigPage({ onRun }: Props) {
                 <option value="custom">🔧 Custom Model Upload from Hugging Face</option>
               </select>
 
-              {showCustomLanguageInput && (
+              {!isExample && showCustomLanguageInput && (
                 <input
                   type="text"
                   placeholder="Input Hugging Face Model ID (e.g.: microsoft/DialoGPT-medium)"
@@ -128,9 +147,9 @@ export default function ModelConfigPage({ onRun }: Props) {
                 />
               )}
 
-              {(customLM || cfg.languageModel) && (
+              {(isExample || customLM || cfg.languageModel) && (
                 <div className="mt-3">
-                  <ModelValidator modelId={customLM || cfg.languageModel} type="language" />
+                  <ModelValidator modelId={isExample ? 'openai-community/gpt2' : (customLM || cfg.languageModel)} type="language" />
                 </div>
               )}
             </div>
@@ -148,10 +167,19 @@ export default function ModelConfigPage({ onRun }: Props) {
                   type="number"
                   min={1}
                   max={20}
-                  value={cfg.k}
-                  onChange={(e) => setField('k', parseInt(e.target.value || '0', 10))}
-                  className={fieldInput}
+                  value={isExample ? 10 : cfg.k}
+                  onChange={(e) => {
+                    if (isExample) return;
+                    setField('k', parseInt(e.target.value || '0', 10));
+                  }}
+                  disabled={isExample}
+                  className={fieldInput + (isExample ? ' cursor-not-allowed opacity-80' : '')}
                 />
+                {isExample && (
+                  <div className="text-[11px] mt-1 text-slate-500 flex items-center gap-1">
+                    <Lock className="w-3 h-3" /> Locked to 10 for the Example preset.
+                  </div>
+                )}
               </div>
 
               <div>
@@ -178,6 +206,11 @@ export default function ModelConfigPage({ onRun }: Props) {
               <Settings2 className="w-6 h-6 text-white" />
             </div>
             <h3 className={sectionTitle}>Feature Extraction Model</h3>
+            {isExample && (
+              <span className="ml-2 inline-flex items-center gap-1 text-[11px] font-semibold px-2 py-0.5 rounded-full bg-slate-900 text-white">
+                <Lock className="w-3 h-3" /> Locked by Example
+              </span>
+            )}
           </div>
 
           <div className="space-y-8">
@@ -186,9 +219,13 @@ export default function ModelConfigPage({ onRun }: Props) {
                 Task
               </label>
               <select
-                value={classificationTask}
-                onChange={(e) => setClassificationTask(e.target.value as any)}
-                className={selectInput}
+                value={isExample ? 'sentiment' : classificationTask}
+                onChange={(e) => {
+                  if (isExample) return;
+                  setClassificationTask(e.target.value as any);
+                }}
+                disabled={isExample}
+                className={selectInput + (isExample ? ' cursor-not-allowed opacity-80' : '')}
               >
                 <option value="sentiment">Sentiment (0–1, Neutral ≈ 0.5)</option>
                 <option value="regard">Regard (0–2, Neutral ≈ 1.0)</option>
@@ -198,7 +235,8 @@ export default function ModelConfigPage({ onRun }: Props) {
               </select>
             </div>
 
-            {classificationTask === 'toxicity' && (
+            {/* 只有 toxicity 才需要，example 強制 sentiment 就不顯示這塊 */}
+            {classificationTask === 'toxicity' && !isExample && (
               <div>
                 <label className="block text-sm font-semibold text-slate-800 mb-1">
                   Toxicity Model
@@ -226,10 +264,19 @@ export default function ModelConfigPage({ onRun }: Props) {
                 min={0}
                 max={2}
                 step={0.01}
-                value={cfg.metrictarget}
-                onChange={(e) => setField('metrictarget', parseFloat(e.target.value || '0'))}
-                className={fieldInput}
+                value={isExample ? 0.5 : cfg.metrictarget}
+                onChange={(e) => {
+                  if (isExample) return;
+                  setField('metrictarget', parseFloat(e.target.value || '0'));
+                }}
+                disabled={isExample}
+                className={fieldInput + (isExample ? ' cursor-not-allowed opacity-80' : '')}
               />
+              {isExample && (
+                <div className="text-[11px] mt-1 text-slate-500 flex items-center gap-1">
+                  <Lock className="w-3 h-3" /> Locked to 0.5 for the Example preset.
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -249,11 +296,21 @@ export default function ModelConfigPage({ onRun }: Props) {
               }
             } catch {}
 
+            // 🔒 若為 example，再次保險強制設定
+            if (isExample) {
+              mergedCfg = {
+                ...mergedCfg,
+                languageModel: 'openai-community/gpt2',
+                k: 10,
+                metrictarget: 0.5,
+              } as JobConfig;
+            }
+
             // 將目前 model 相關設定也寫回草稿，之後回到本頁仍可帶入
             const persist = {
               ...mergedCfg,
-              classificationTask,
-              toxicityModelChoice,
+              classificationTask: isExample ? 'sentiment' : classificationTask,
+              toxicityModelChoice, // 不會用到，保留存檔
             } as any;
             localStorage.setItem('cfgDraft', JSON.stringify(persist));
             localStorage.setItem('extrasDraft', JSON.stringify({ datasetLimit }));
@@ -261,7 +318,7 @@ export default function ModelConfigPage({ onRun }: Props) {
             onRun(
               {
                 ...mergedCfg,
-                classificationTask,
+                classificationTask: isExample ? 'sentiment' : classificationTask,
                 toxicityModelChoice,
               } as any,
               {

frontend/src/pages/ResultsPage.tsx

@@ -1,9 +1,125 @@
 import PipelineProgress from '../components/PipelineProgress';
 import { useJobRunner } from '../hooks/JobRunnerProvider';
+import { useMemo } from 'react';
 
 export default function ResultsPage() {
   const { result, resp, loading, error, url } = useJobRunner();
 
+  // 判斷是否為 example（從前面頁面寫入的 cfgDraft）
+  const isExample = useMemo(() => {
+    try {
+      const draft = localStorage.getItem('cfgDraft');
+      if (!draft) return false;
+      const parsed = JSON.parse(draft);
+      return parsed?.dataset === 'example';
+    } catch {
+      return false;
+    }
+  }, []);
+
+  // ---- Example 模式：不跑程式，直接顯示兩張 Plotly HTML ----
+  if (isExample) {
+    const oriHtml = 'ori_sentiment_distribution.html';
+    const ftHtml = 'ft_sentiment_distribution.html';
+    const oriCsv = 'ori_generation_results.csv';
+    const ftCsv = 'finetune_aug_generation_result.csv';
+
+    return (
+      <div className="space-y-6">
+        <section className="p-6 rounded-2xl border border-white/40 bg-white/70 backdrop-blur">
+          <h2 className="text-lg font-semibold mb-2">Example Preview</h2>
+          <p className="text-sm text-slate-600">
+            This is a fixed example preview. The pipeline was not executed.
+          </p>
+        </section>
+
+        <section className="p-6 rounded-2xl border border-white/40 bg-white/70 backdrop-blur">
+          <h2 className="text-lg font-semibold mb-4">Distribution</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <figure className="rounded-xl overflow-hidden border bg-white">
+              <iframe
+                src={oriHtml}
+                title="Original distribution (Plotly)"
+                className="w-full"
+                style={{ height: 480, border: '0' }}
+              />
+              <figcaption className="p-3 text-sm text-slate-600">Original</figcaption>
+            </figure>
+
+            <figure className="rounded-xl overflow-hidden border bg-white">
+              <iframe
+                src={ftHtml}
+                title="Counterfactual distribution (Plotly)"
+                className="w-full"
+                style={{ height: 480, border: '0' }}
+              />
+              <figcaption className="p-3 text-sm text-slate-600">Counterfactual Augmented</figcaption>
+            </figure>
+          </div>
+        </section>
+
+        <section className="p-6 rounded-2xl border border-white/40 bg-white/70 backdrop-blur">
+          <h2 className="text-lg font-semibold mb-4">Download Report</h2>
+          <ul className="space-y-2">
+            <li>
+              <a
+                className="text-indigo-600 hover:underline"
+                href={oriCsv}
+                target="_blank"
+                rel="noreferrer"
+                download
+              >
+                Original Generation CSV
+              </a>
+            </li>
+            <li>
+              <a
+                className="text-indigo-600 hover:underline"
+                href={ftCsv}
+                target="_blank"
+                rel="noreferrer"
+                download
+              >
+                Counterfactual / Fine-tuned Generation CSV
+              </a>
+            </li>
+          </ul>
+        </section>
+      </div>
+    );
+  }
+
+  // ---- 原本流程（非 example）----
+
+  // 判斷是否為 html 檔
+  const isHtml = (s: string) => /\.html?(?:$|\?)/i.test(s);
+
+  // 渲染圖表：根據副檔名決定用 <img> 或 <iframe>
+  const renderPlot = (srcRaw: string, title: string, alt: string) => {
+    const src = url(srcRaw);
+    if (isHtml(srcRaw)) {
+      return (
+        <iframe
+          src={src}
+          title={title}
+          className="w-full"
+          style={{ height: 480, border: '0' }}
+        />
+      );
+    }
+    return (
+      <img
+        src={src}
+        alt={alt}
+        className="w-full h-auto"
+        loading="lazy"
+        onError={(e) => {
+          e.currentTarget.alt = `${alt} loading failed`;
+        }}
+      />
+    );
+  };
+
   if (loading && !resp) {
     return (
       <div className="space-y-6">
@@ -39,9 +155,6 @@ export default function ResultsPage() {
   const m = result.metrics!;
   const plots = resp.results.plots;
 
-  const originalSrc = url(plots.original_sentiment);
-  const cfSrc = url(plots.counterfactual_sentiment);
-
   const r = resp.results as any;
   const links: { label: string; href: string }[] = [];
 
@@ -54,14 +167,12 @@ export default function ResultsPage() {
   if (r?.cf_sentiment_subset_file) {
     links.push({ label: 'CF sentiment subset CSV', href: r.cf_sentiment_subset_file });
   }
-
   if (r?.run_config_files?.markdown) {
     links.push({ label: 'Run Config (Markdown)', href: r.run_config_files.markdown });
   }
   if (r?.run_config_files?.json) {
     links.push({ label: 'Run Config (JSON)', href: r.run_config_files.json });
   }
-
   if (r?.finetuned_model_zip) {
     links.push({ label: 'Fine-tuned Model (ZIP)', href: r.finetuned_model_zip });
   } else if (r?.finetuned_model_dir) {
@@ -92,28 +203,12 @@ export default function ResultsPage() {
         <h2 className="text-lg font-semibold mb-4">Distribution</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <figure className="rounded-xl overflow-hidden border bg-white">
-            <img
-              src={originalSrc}
-              alt="Original distribution"
-              className="w-full h-auto"
-              loading="lazy"
-              onError={(e) => {
-                e.currentTarget.alt = 'Original image loading failed';
-              }}
-            />
+            {renderPlot(plots.original_sentiment, 'Original distribution (Plotly)', 'Original distribution')}
             <figcaption className="p-3 text-sm text-slate-600">Original</figcaption>
           </figure>
 
           <figure className="rounded-xl overflow-hidden border bg-white">
-            <img
-              src={cfSrc}
-              alt="Counterfactual distribution"
-              className="w-full h-auto"
-              loading="lazy"
-              onError={(e) => {
-                e.currentTarget.alt = 'Counterfactual image loading failed';
-              }}
-            />
+            {renderPlot(plots.counterfactual_sentiment, 'Counterfactual distribution (Plotly)', 'Counterfactual distribution')}
             <figcaption className="p-3 text-sm text-slate-600">Counterfactual Augmented</figcaption>
           </figure>
         </div>