feat(shuffle): bảng tổ hợp mirror video_cook — ảo hoá 300k + lọc bằng nút (JS)

Làm phần hiển thị list combo giống tool video_cook:
- Thứ tự combo: tuần tự từ điển nếu ≤ trần, LẤY MẪU ĐA DẠNG nếu vượt (bỏ cách cũ
chỉ lấy N cái đầu theo product). /plan trả sequences + clip_names (payload gọn).
- Trần 300.000 combo. Bảng FE ẢO HOÁ (chỉ vẽ dòng đang thấy) -> không treo dù
hàng trăm nghìn dòng. Hiển thị "tên + tên + tên" + cột 🎵 Source (xoay vòng
theo thứ hạng trong tập đang chọn) + STT + ✓, giống combo_model.py.
- Bộ lọc bằng NÚT nối chuỗi trên tập ĐANG CHỌN (giống tab2_output.py): Đặt lại /
Chọn hết / Bỏ hết / Lọc ngẫu nhiên % / Lọc tương đồng % + "Ưu tiên khúc khác
hoàn toàn". Lọc tương đồng port Y HỆT SimilarityWorker (greedy keep-first + nén,
0%=khác hoàn toàn), chạy Web Worker -> UI không đơ. Đã cross-check 40 case khớp
100% với bản Python.

Component mới: ComboTable.jsx, worker: simFilter.js.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

backend/app/api/shuffle.py

@@ -167,9 +167,10 @@ def _env_int(key: str, default: int) -> int:
         return default
 
 
-# Trần số dòng BẢNG trả về trình duyệt (chỉ là nhãn, chưa render). KHÔNG nên quá
-# lớn: mỗi dòng là JSON nhiều object -> vài chục nghìn dòng đã nặng payload/DOM.
-PLAN_CAP = _env_int("SHUFFLE_PLAN_CAP", 5000)
+# Trần số dòng BẢNG trả về trình duyệt (chỉ là nhãn, chưa render). Bảng FE ĐÃ ẢO
+# HOÁ (chỉ vẽ dòng đang thấy) + lọc bằng JS nên chịu được rất nhiều dòng. Payload
+# chỉ là mảng chỉ số clip (id) + 1 bảng tên -> gọn (300k dòng ~ vài MB).
+PLAN_CAP = _env_int("SHUFFLE_PLAN_CAP", 300000)
 # Tối đa số video RENDER mỗi lần. Nâng cao để "xào" ra nhiều biến thể hơn; mỗi
 # video = 1 file + thời gian ghép (concat copy nhanh, nhưng vẫn tốn đĩa/CPU).
 # Chỉnh qua env SHUFFLE_MAX_RENDER tùy sức máy. Render 10k ≈ chục phút + nhiều GB đĩa.
@@ -178,34 +179,31 @@ MAX_RENDER = _env_int("SHUFFLE_MAX_RENDER", 10000)
 
 @router.post("/plan")
 def plan(req: ShuffleReq):
-    """Sinh DANH SÁCH biến thể (chưa render) để user xem bảng & tick chọn.
+    """Sinh DANH SÁCH tổ hợp (chưa render) theo ĐÚNG THỨ TỰ như tool video_cook:
+    tuần tự từ điển nếu ≤ trần, LẤY MẪU ĐA DẠNG nếu vượt trần.
 
-    Mỗi biến thể: sequence (list clip_id) + nhãn "Khúc i: <clip>" theo thứ tự ghép.
-    Số dòng = sau khi áp lọc tương đồng/ngẫu nhiên hiện tại (mặc định đều được tick).
+    KHÔNG áp lọc tương đồng/ngẫu nhiên ở đây — FE lọc bằng nút (JS) như video_cook.
+    Trả về mảng `sequences` (mỗi phần tử = list clip_id theo thứ tự ghép) + bảng
+    `clip_names` (index = clip_id) để FE dựng nhãn "tên + tên + tên". Payload gọn.
     """
     cfg, _, clip_meta = _build(req)
-    # TẤT CẢ biến thể thô (chưa lọc) để hiện đủ bảng; cắt trần tránh payload lớn.
-    raw: list[list[int]] = []
-    capped = False
-    for s in engine._iter_raw_sequences(cfg):
-        raw.append(s)
-        if len(raw) > PLAN_CAP:
-            capped = True
-            raw = raw[:PLAN_CAP]
-            break
-    # tập biến thể SỐNG SÓT theo bộ lọc hiện tại (tương đồng/ngẫu nhiên/giới hạn).
-    # Dùng trần = PLAN_CAP (không phải DEFAULT_CAP nhỏ) để tick phản ánh ĐÚNG bộ
-    # lọc trên toàn bảng: không lọc gì -> tick hết; có lọc -> chỉ tick phần sống sót.
-    keep_cfg = replace(cfg, max_outputs=(req.max_outputs or PLAN_CAP))
-    kept = {tuple(s) for s in engine.generate(keep_cfg)}
-    variants = []
-    for i, seq in enumerate(raw):
-        labels = [{"segment": clip_meta.get(c, {}).get("segment", 0) + 1,
-                   "name": clip_meta.get(c, {}).get("name", str(c))} for c in seq]
-        variants.append({"i": i, "seq": seq, "labels": labels,
-                         "keep": tuple(seq) in kept})
-    return {"count": len(variants), "capped": capped, "variants": variants,
-            "max_render": MAX_RENDER, "plan_cap": PLAN_CAP}
+    est = engine.estimate(cfg)
+    raw_total = est.raw_total
+    # engine.generate (bê từ video_cook): ≤ trần -> tuần tự; vượt -> mẫu ngẫu nhiên
+    # đa dạng. Ép TẮT mọi lọc để lấy danh sách GỐC, mọi dòng mặc định được chọn.
+    base_cfg = replace(cfg, similarity_threshold=1.0, random_ratio=1.0,
+                       max_outputs=PLAN_CAP)
+    sequences = engine.generate(base_cfg)
+    capped = raw_total > len(sequences)
+    max_cid = max(clip_meta) if clip_meta else -1
+    clip_names = [clip_meta.get(i, {}).get("name", str(i)) for i in range(max_cid + 1)]
+    return {
+        "count": len(sequences), "capped": capped, "raw_total": raw_total,
+        "sequences": sequences, "clip_names": clip_names,
+        "n_seg": len(sequences[0]) if sequences else 0,
+        "sources": [os.path.basename(a) for a in req.audio_files],
+        "max_render": MAX_RENDER, "plan_cap": PLAN_CAP,
+    }
 
 
 # --------------------------------------------------------------- generate ---

frontend/src/components/ComboTable.jsx

@@ -0,0 +1,265 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+
+// Bảng tổ hợp ẢO HOÁ (chỉ vẽ dòng đang thấy) + bộ lọc bằng NÚT nối chuỗi —
+// mirror tool video_cook (ui/combo_model.py + ui/tab2_output.py).
+//   Cột: STT | "tên + tên + tên" | [🎵 Source] | ✓
+//   Lọc: Đặt lại / Chọn hết / Bỏ hết / Lọc ngẫu nhiên % / Lọc tương đồng %
+//        + "Ưu tiên khúc khác hoàn toàn". Tất cả chạy trên tập ĐANG CHỌN.
+// Trạng thái tick giữ trong Uint8Array (chịu được vài trăm nghìn dòng, thao tác
+// hàng loạt chỉ vài ms). Lọc tương đồng đẩy sang Web Worker để UI không đơ.
+
+const ROW_H = 30;
+const VIEW_H = 384;
+const RANK_BLOCK = 8192;
+const JOIN = "  +  ";
+
+const ComboTable = forwardRef(function ComboTable(
+  { sequences, clipNames, nSeg, sources = [], maxRender = 10000, onCount }, ref) {
+
+  const n = sequences.length;
+  const checkedRef = useRef(new Uint8Array(0));
+  const rankRef = useRef(null);                 // prefix-sum số dòng chọn / block
+  const workerRef = useRef(null);
+  const [checkedCount, setCheckedCount] = useState(0);
+  const [, force] = useState(0);
+  const bump = () => force((x) => x + 1);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [randPct, setRandPct] = useState(50);
+  const [simPct, setSimPct] = useState(50);
+  const [prio, setPrio] = useState([]);         // bool theo từng khúc
+  const [filtering, setFiltering] = useState(null);  // {msg,pct} | null
+  const [status, setStatus] = useState("");
+
+  // Nạp bộ dữ liệu mới -> tick hết, dọn mọi thứ.
+  useEffect(() => {
+    const buf = new Uint8Array(n);
+    buf.fill(1);
+    checkedRef.current = buf;
+    rankRef.current = null;
+    setCheckedCount(n);
+    setScrollTop(0);
+    setPrio(Array.from({ length: nSeg }, () => false));
+    setStatus("");
+    bump();
+    // eslint-disable-next-line
+  }, [sequences, clipNames, nSeg]);
+
+  // Worker lọc tương đồng (tạo 1 lần).
+  useEffect(() => {
+    const w = new Worker(new URL("../workers/simFilter.js", import.meta.url), { type: "module" });
+    workerRef.current = w;
+    return () => { try { w.terminate(); } catch { /* */ } };
+  }, []);
+
+  useEffect(() => { onCount && onCount(checkedCount); }, [checkedCount, onCount]);
+
+  useImperativeHandle(ref, () => ({
+    getSelected() {
+      const c = checkedRef.current;
+      const out = [];
+      for (let i = 0; i < c.length; i++) if (c[i]) out.push(sequences[i]);
+      return out;
+    },
+    selectedCount: () => checkedCount,
+  }), [sequences, checkedCount]);
+
+  // ── thao tác tick ──────────────────────────────────────────────────────
+  const invalidate = () => { rankRef.current = null; };
+  const recount = () => {
+    let s = 0; const c = checkedRef.current;
+    for (let i = 0; i < c.length; i++) s += c[i];
+    setCheckedCount(s);
+  };
+  const toggle = (i) => {
+    const c = checkedRef.current;
+    c[i] ^= 1;
+    setCheckedCount((v) => v + (c[i] ? 1 : -1));
+    invalidate(); bump();
+  };
+  const setAll = (v) => {
+    checkedRef.current.fill(v ? 1 : 0);
+    setCheckedCount(v ? n : 0);
+    invalidate(); bump();
+    setStatus(v ? `↺ Đã chọn tất cả ${n} tổ hợp` : "Đã bỏ chọn hết");
+  };
+  const setRows = (rows) => {
+    const buf = new Uint8Array(n);
+    for (const r of rows) if (r >= 0 && r < n) buf[r] = 1;
+    checkedRef.current = buf;
+    invalidate(); bump(); recount();
+  };
+  const checkedRows = () => {
+    const c = checkedRef.current; const out = [];
+    for (let i = 0; i < c.length; i++) if (c[i]) out.push(i);
+    return out;
+  };
+
+  // ── cột 🎵 Source: xoay vòng theo THỨ HẠNG trong các dòng ĐANG CHỌN ───────
+  const buildRank = () => {
+    const c = checkedRef.current;
+    const blocks = Math.ceil(n / RANK_BLOCK) + 1;
+    const idx = new Int32Array(blocks);
+    let total = 0;
+    for (let b = 0; b < blocks - 1; b++) {
+      idx[b] = total;
+      const end = Math.min((b + 1) * RANK_BLOCK, n);
+      for (let i = b * RANK_BLOCK; i < end; i++) total += c[i];
+    }
+    idx[blocks - 1] = total;
+    rankRef.current = idx;
+    return idx;
+  };
+  const sourceFor = (row) => {
+    if (!sources.length) return null;
+    const idx = rankRef.current || buildRank();
+    const block = (row / RANK_BLOCK) | 0;
+    let rank = idx[block];
+    const c = checkedRef.current;
+    for (let i = block * RANK_BLOCK; i < row; i++) rank += c[i];
+    return sources[rank % sources.length];
+  };
+
+  // ── bộ lọc ───────────────────────────────────────────────────────────────
+  const reset = () => setAll(true);
+
+  const randomFilter = () => {
+    const pool = checkedRows();
+    if (!pool.length) { setStatus("Chưa chọn tổ hợp nào để lọc."); return; }
+    const keepCount = Math.max(1, Math.round(pool.length * randPct / 100));
+    // Fisher–Yates một phần -> lấy keepCount phần tử ngẫu nhiên, không lệch.
+    for (let i = 0; i < keepCount; i++) {
+      const j = i + Math.floor(Math.random() * (pool.length - i));
+      const t = pool[i]; pool[i] = pool[j]; pool[j] = t;
+    }
+    setRows(pool.slice(0, keepCount));
+    setStatus(`🎲 Giữ ${keepCount}/${pool.length} ngẫu nhiên (${randPct}% của tập đang chọn)`);
+  };
+
+  const similarityFilter = () => {
+    const pool = checkedRows();
+    if (!pool.length) { setStatus("Chưa chọn tổ hợp nào để lọc."); return; }
+    const maxSame = Math.floor(simPct / 100 * nSeg + 1e-9);
+    const priorityCols = prio.map((p, i) => (p ? i : -1)).filter((i) => i >= 0);
+    // dựng mảng phẳng các hàng đang chọn -> chuyển thẳng sang worker (transferable)
+    const flat = new Int32Array(pool.length * nSeg);
+    for (let k = 0; k < pool.length; k++) {
+      const seq = sequences[pool[k]]; const base = k * nSeg;
+      for (let j = 0; j < nSeg; j++) flat[base + j] = seq[j];
+    }
+    setFiltering({ msg: `🔍 Đang lọc ${pool.length} tổ hợp…`, pct: 0 });
+    const w = workerRef.current;
+    w.onmessage = (e) => {
+      const d = e.data;
+      if (d.type === "progress") {
+        setFiltering({ msg: `🔍 Đang lọc tương đồng… ${Math.round(d.done / d.total * 100)}%`, pct: Math.round(d.done / d.total * 100) });
+        return;
+      }
+      // done
+      const keep = d.keep;
+      const keptRows = [];
+      for (let k = 0; k < pool.length; k++) if (keep[k]) keptRows.push(pool[k]);
+      setRows(keptRows);
+      setFiltering(null);
+      setStatus(`🔍 Xong! Còn ${keptRows.length}/${pool.length} (loại ${pool.length - keptRows.length} tổ hợp tương đồng)`);
+    };
+    w.postMessage({ flat, nSeg, maxSame, priorityCols }, [flat.buffer]);
+  };
+
+  // ── ảo hoá ────────────────────────────────────────────────────────────────
+  const start = Math.max(0, ((scrollTop / ROW_H) | 0) - 6);
+  const visN = Math.ceil(VIEW_H / ROW_H) + 12;
+  const end = Math.min(n, start + visN);
+  const rows = [];
+  const c = checkedRef.current;
+  for (let i = start; i < end; i++) {
+    const on = !!c[i];
+    const names = sequences[i].map((id) => clipNames[id] || String(id)).join(JOIN);
+    const src = sourceFor(i);
+    rows.push(
+      <div key={i} onClick={() => toggle(i)}
+           style={{ display: "flex", alignItems: "center", height: ROW_H, cursor: "pointer",
+                    background: i % 2 ? "var(--white)" : "var(--cream)", opacity: on ? 1 : 0.4,
+                    borderBottom: "1px solid var(--line)", fontSize: 12 }}>
+        <div style={{ width: 56, textAlign: "center", color: "var(--orange-700)", flexShrink: 0 }}>{i + 1}</div>
+        <div style={{ flex: 1, minWidth: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", paddingRight: 8 }}
+             title={sequences[i].map((id) => clipNames[id] || String(id)).join("\n")}>{names}</div>
+        {src != null && (
+          <div style={{ width: 150, flexShrink: 0, color: "#0a8f3c", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", paddingRight: 8 }} title={src}>🎵 {src}</div>
+        )}
+        <div style={{ width: 46, textAlign: "center", flexShrink: 0 }}>
+          <input type="checkbox" checked={on} readOnly tabIndex={-1} style={{ pointerEvents: "none" }} />
+        </div>
+      </div>
+    );
+  }
+
+  const over = checkedCount > maxRender;
+
+  return (
+    <div>
+      {/* thanh công cụ */}
+      <div className="flex center gap8" style={{ flexWrap: "wrap", marginBottom: 8 }}>
+        <button className="btn sm" onClick={reset} title="Chọn lại TẤT CẢ — huỷ mọi bộ lọc đã áp">↺ Đặt lại</button>
+        <button className="btn sm" onClick={() => setAll(true)}>☑ Tất cả</button>
+        <button className="btn sm ghost" onClick={() => setAll(false)}>☐ Bỏ hết</button>
+        <span style={{ width: 1, height: 22, background: "var(--line)" }} />
+        <span className="small muted">Ngẫu nhiên</span>
+        <input type="number" min="1" max="99" value={randPct} onChange={(e) => setRandPct(Math.max(1, Math.min(99, +e.target.value || 1)))} style={{ width: 60 }} />
+        <button className="btn sm" onClick={randomFilter} disabled={!!filtering} title="Giữ lại X% video ngẫu nhiên (trong tập đang chọn)">Lọc ngẫu nhiên</button>
+        <span style={{ width: 1, height: 22, background: "var(--line)" }} />
+        <span className="small muted">Tương đồng</span>
+        <input type="number" min="0" max="100" value={simPct} onChange={(e) => setSimPct(Math.max(0, Math.min(100, +e.target.value || 0)))} style={{ width: 60 }} />
+        <button className="btn sm" onClick={similarityFilter} disabled={!!filtering}
+                title="Chỉ giữ combo có mức tương đồng ≤ ngưỡng. 0% = khác nhau HOÀN TOÀN; 100% = giữ tất cả.">
+          {filtering ? "⏳ Đang lọc…" : "Lọc tương đồng"}
+        </button>
+        <span className="small" style={{ marginLeft: "auto", color: "var(--orange-700)", fontWeight: 600 }}>
+          Đã chọn: {checkedCount.toLocaleString()} / {n.toLocaleString()}
+        </span>
+      </div>
+
+      {/* ưu tiên khúc khác hoàn toàn */}
+      {nSeg > 0 && (
+        <div className="flex center gap8" style={{ flexWrap: "wrap", marginBottom: 8 }}>
+          <span className="small muted" title="Các khúc được tick sẽ bị ép KHÁC NHAU HOÀN TOÀN giữa các video giữ lại (kết hợp với ngưỡng % tương đồng).">Ưu tiên khác hoàn toàn ở khúc:</span>
+          {prio.map((p, i) => (
+            <label key={i} className="small" style={{ display: "inline-flex", alignItems: "center", gap: 4, cursor: "pointer" }}>
+              <input type="checkbox" checked={p} onChange={() => setPrio((cur) => cur.map((v, j) => (j === i ? !v : v)))} />
+              Khúc {i + 1}
+            </label>
+          ))}
+        </div>
+      )}
+
+      {/* tiêu đề cột */}
+      <div style={{ display: "flex", alignItems: "center", height: 26, fontSize: 11, fontWeight: 700, color: "var(--muted)", borderBottom: "2px solid var(--line)" }}>
+        <div style={{ width: 56, textAlign: "center", flexShrink: 0 }}>STT</div>
+        <div style={{ flex: 1 }}>Tổ hợp video</div>
+        {sources.length > 0 && <div style={{ width: 150, flexShrink: 0 }}>🎵 Source</div>}
+        <div style={{ width: 46, textAlign: "center", flexShrink: 0 }}>✓</div>
+      </div>
+
+      {/* danh sách ảo hoá */}
+      <div onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+           style={{ height: VIEW_H, overflow: "auto", border: "1px solid var(--line)", borderTop: "none" }}>
+        <div style={{ height: n * ROW_H, position: "relative" }}>
+          <div style={{ position: "absolute", top: start * ROW_H, left: 0, right: 0 }}>{rows}</div>
+        </div>
+      </div>
+
+      {filtering && (
+        <div className="small" style={{ color: "#b45309", marginTop: 6 }}>{filtering.msg}</div>
+      )}
+      {!filtering && status && (
+        <div className="small muted" style={{ marginTop: 6 }}>{status}</div>
+      )}
+      {over && (
+        <p className="small mt8" style={{ color: "var(--orange-700)" }}>
+          ⚠ Đang chọn {checkedCount.toLocaleString()} biến thể — chỉ render tối đa {maxRender.toLocaleString()} video/lần, phần dư sẽ bị bỏ.
+        </p>
+      )}
+    </div>
+  );
+});
+
+export default ComboTable;

frontend/src/pages/ShuffleVideo.jsx

@@ -5,6 +5,7 @@ import { useToolState } from "../store";
 import { useAuth } from "../stores/authStore";
 import { ProcessRail, FileDrop, ProcessingOverlay, CacheNote } from "../components/ui";
 import { IcShuffle, IcDownload, IcCheck, IcMusic } from "../components/Icons";
+import ComboTable from "../components/ComboTable";
 
 const STEPS = [
   { t: "Nhập số khúc", d: "Khai báo video gồm bao nhiêu khúc theo kịch bản." },
@@ -32,7 +33,7 @@ export default function ShuffleVideo() {
     maxOut: "",
     maxRender: 10000,              // trần render/lần (đồng bộ từ backend qua plan/estimate)
     res: "1080",                   // độ phân giải xuất ra (khung dọc)
-    plan: [],                      // bảng biến thể (mỗi dòng: {i, seq, labels, keep})
+    plan: null,                    // {sequences, clip_names, n_seg, sources, count, capped, raw_total}
     results: [],
     resStamp: 0,                   // mốc render -> cache-bust <video> khi render lại cùng tên file
     busy: false, job: null,        // giữ trong store -> chuyển tool vẫn thấy "đang xử lý"
@@ -42,6 +43,8 @@ export default function ShuffleVideo() {
   const setJob = (j) => set({ job: j });
   const setBusy = (b) => set({ busy: b });
   const [showNote, setShowNote] = useState(true);
+  const comboRef = useRef(null);          // bảng tổ hợp -> lấy các dòng đã chọn
+  const [selCount, setSelCount] = useState(0);
   // Loader tải lên: {seg, done, total, pct, name} — pct tính theo BYTE (chuẩn),
   // upload SONG SONG nên nhanh; seg = index khúc hoặc "audio".
   const [uploading, setUploading] = useState({});   // { [segKey]: {done,total,pct,name} }
@@ -204,7 +207,7 @@ export default function ShuffleVideo() {
   const ready = st.session && segs.some((s) => s.order_mode !== "drop") &&
     segs.filter((s) => s.order_mode !== "drop").every((s) => s.files.length > 0);
 
-  // Xem BẢNG biến thể (chưa render). keep = do bộ lọc hiện tại quyết định.
+  // Xem BẢNG tổ hợp (chưa render) — thứ tự & lọc giống tool video_cook.
   const [planBusy, setPlanBusy] = useState(false);
   const showPlan = async () => {
     if (!ready) return alert("Mỗi khúc (trừ khúc Bỏ) cần ít nhất một clip.");
@@ -212,33 +215,19 @@ export default function ShuffleVideo() {
     setPlanBusy(true);
     try {
       const r = await api.shufflePlan(payload());
-      set({ plan: r.variants || [], maxRender: r.max_render || 10000 });
-      if (r.capped) alert(`Danh sách lớn — chỉ hiển thị ${r.variants.length} biến thể đầu.`);
+      set({ plan: r, maxRender: r.max_render || 10000 });
+      if (r.capped) alert(
+        `Tổng ${Number(r.raw_total).toLocaleString()} tổ hợp — hiển thị MẪU ĐA DẠNG `
+        + `${Number(r.count).toLocaleString()} tổ hợp (trần ${Number(r.plan_cap).toLocaleString()}).`);
     } catch (e) { alert("Lỗi: " + e.message); }
     finally { setPlanBusy(false); }
   };
-  // Đổi bộ lọc (tương đồng / ngẫu nhiên / giới hạn) -> tự cập nhật lại tick trong bảng.
-  const refreshPlan = async () => {
-    try {
-      const r = await api.shufflePlan(payload());
-      set({ plan: r.variants || [], maxRender: r.max_render || 10000 });
-    } catch { /* noop */ }
-  };
-  useEffect(() => {
-    if (!st.plan.length) return;                 // chỉ khi bảng đang mở
-    const t = setTimeout(refreshPlan, 350);      // debounce khi kéo slider
-    return () => clearTimeout(t);
-    // eslint-disable-next-line
-  }, [st.useSim, st.sim, st.useRandom, st.randomPct, st.maxOut]);
-  const toggleRow = (i) => set((cur) => ({ plan: cur.plan.map((v) => (v.i === i ? { ...v, keep: !v.keep } : v)) }));
-  const toggleAll = (val) => set((cur) => ({ plan: cur.plan.map((v) => ({ ...v, keep: val })) }));
-  const selectedSeqs = () => st.plan.filter((v) => v.keep).map((v) => v.seq);
 
   const generate = async () => {
     if (!ready) return;
-    // nếu đã mở bảng -> chỉ render các dòng được tick; chưa mở bảng -> render tất cả như cũ
-    let sequences = st.plan.length ? selectedSeqs() : null;
-    if (st.plan.length && !sequences.length) return alert("Chưa chọn biến thể nào để render.");
+    // Lấy đúng các tổ hợp user đã tick trong bảng; chưa mở bảng -> render tất cả như cũ.
+    let sequences = st.plan ? (comboRef.current ? comboRef.current.getSelected() : []) : null;
+    if (st.plan && (!sequences || !sequences.length)) return alert("Chưa chọn tổ hợp nào để render.");
     // trần cứng 150 video/lần — nếu chọn nhiều hơn thì cảnh báo & chỉ lấy 150 đầu
     if (sequences && sequences.length > MAX_RENDER) {
       if (!confirm(`Bạn đã chọn ${sequences.length} biến thể, nhưng chỉ cho phép tạo tối đa ${MAX_RENDER} video mỗi lần.\n\nBấm OK để render ${MAX_RENDER} video đầu tiên.`))
@@ -386,91 +375,31 @@ export default function ShuffleVideo() {
             </button>
           </div>
 
-          {/* 5. bảng biến thể + bộ lọc (bật lọc -> tự bỏ tick) + render */}
-          {st.plan.length > 0 && (
+          {/* 5. bảng tổ hợp (ảo hoá tới 300k) + lọc bằng nút (giống video_cook) + render */}
+          {st.plan && st.plan.count > 0 && (
             <div className="card">
-              <div className="flex between center">
+              <div className="flex between center" style={{ flexWrap: "wrap", gap: 8 }}>
                 <div className="panel-title" style={{ margin: 0 }}>
-                  5. Bảng biến thể ({st.plan.filter((v) => v.keep).length}/{st.plan.length} sẽ render)
-                </div>
-                <div className="flex gap8">
-                  <button className="btn sm" onClick={() => toggleAll(true)}>Chọn hết</button>
-                  <button className="btn sm ghost" onClick={() => toggleAll(false)}>Bỏ hết</button>
-                </div>
-              </div>
-              <div className="tablewrap mt8" style={{ maxHeight: 340, overflow: "auto" }}>
-                <table className="list">
-                  <thead><tr><th style={{ width: 40 }}>#</th><th>Chuỗi ghép (khúc → clip)</th><th style={{ width: 70 }}>Render</th></tr></thead>
-                  <tbody>
-                    {st.plan.map((v) => (
-                      <tr key={v.i} style={{ opacity: v.keep ? 1 : 0.45 }}>
-                        <td className="muted">{v.i + 1}</td>
-                        <td className="small">
-                          {v.labels.map((l, k) => (
-                            <span key={k}>
-                              {k > 0 && <span className="muted"> → </span>}
-                              <b>K{l.segment}</b>:{l.name}
-                            </span>
-                          ))}
-                        </td>
-                        <td><input type="checkbox" checked={v.keep} onChange={() => toggleRow(v.i)} /></td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-
-              {/* bộ lọc: bật lên -> máy tự BỎ TICK các dòng tương ứng trong bảng */}
-              <div className="divider" />
-              <div className="small muted" style={{ marginBottom: 6 }}>Bộ lọc — bật lên sẽ tự bỏ tick bớt các biến thể trong bảng:</div>
-              <div className="filter-opt">
-                <div className={"tick" + (st.useSim ? " on" : "")} onClick={() => set({ useSim: !st.useSim })}>
-                  <span className="box"><IcCheck /></span> Lọc video trùng nhau
-                </div>
-                {st.useSim && (
-                  <div className="sub">
-                    <span className="field-label">Ngưỡng tương đồng: {st.sim}%</span>
-                    <input className="slider" type="range" min="20" max="99" value={st.sim} onChange={(e) => set({ sim: +e.target.value })} />
-                    <div className="small muted">Biến thể nào giống một biến thể đã giữ <b>trên {st.sim}%</b> (tính theo số khúc trùng vị trí) sẽ bị bỏ tick. Kéo <b>thấp xuống → lọc gắt hơn → còn ít video</b>.</div>
-                  </div>
-                )}
-              </div>
-              <div className="filter-opt">
-                <div className={"tick" + (st.useRandom ? " on" : "")} onClick={() => set({ useRandom: !st.useRandom })}>
-                  <span className="box"><IcCheck /></span> Lấy ngẫu nhiên một phần
-                </div>
-                {st.useRandom && (
-                  <div className="sub">
-                    <span className="field-label">Tỉ lệ lấy: {st.randomPct}%</span>
-                    <input className="slider" type="range" min="5" max="99" value={st.randomPct} onChange={(e) => set({ randomPct: +e.target.value })} />
-                  </div>
-                )}
-              </div>
-              <div className="flex center gap12 mt8" style={{ flexWrap: "wrap" }}>
-                <div>
-                  <span className="field-label">Số video tối đa</span>
-                  <input type="number" placeholder="không giới hạn" value={st.maxOut}
-                         onChange={(e) => set({ maxOut: e.target.value })} style={{ width: 160 }} />
+                  5. Bảng tổ hợp (Tổng: {Number(st.plan.count).toLocaleString()}{st.plan.capped ? " · mẫu đa dạng" : ""})
                 </div>
                 <div>
-                  <span className="field-label">Chất lượng (khung dọc)</span>
-                  <select value={st.res} onChange={(e) => set({ res: e.target.value })} style={{ width: 160 }}>
+                  <span className="field-label" style={{ marginRight: 6 }}>Chất lượng</span>
+                  <select value={st.res} onChange={(e) => set({ res: e.target.value })} style={{ width: 150 }}>
                     <option value="1080">1080 × 1920 (cao)</option>
                     <option value="720">720 × 1280 (vừa)</option>
                     <option value="480">480 × 854 (nhẹ)</option>
                   </select>
                 </div>
-                <span className="small muted">Bật lọc / nhập giới hạn → bảng tự bỏ tick bớt.</span>
               </div>
-
-              {st.plan.filter((v) => v.keep).length > MAX_RENDER && (
-                <p className="small mt8" style={{ color: "var(--orange-700)" }}>
-                  ⚠ Đang chọn {st.plan.filter((v) => v.keep).length} biến thể — chỉ render tối đa {MAX_RENDER} video/lần, phần dư sẽ bị bỏ.
-                </p>
-              )}
+              <div className="mt8">
+                <ComboTable ref={comboRef}
+                            sequences={st.plan.sequences} clipNames={st.plan.clip_names}
+                            nSeg={st.plan.n_seg} sources={st.plan.sources || []}
+                            maxRender={MAX_RENDER} onCount={setSelCount} />
+              </div>
               <button className="btn primary block mt16" onClick={generate} disabled={!ready || busy}>
                 {busy ? "Đang xào..."
-                  : <><IcShuffle size={16} /> Render đã chọn ({Math.min(st.plan.filter((v) => v.keep).length, MAX_RENDER)}/{st.plan.filter((v) => v.keep).length})</>}
+                  : <><IcShuffle size={16} /> Render đã chọn ({Math.min(selCount, MAX_RENDER).toLocaleString()}/{selCount.toLocaleString()})</>}
               </button>
             </div>
           )}

frontend/src/workers/simFilter.js

@@ -0,0 +1,64 @@
+// Web Worker: lọc tương đồng — PORT y hệt video_cook SimilarityWorker.
+//
+// Thuật toán greedy giữ-combo-đầu (pivot), loại các combo sau giống pivot quá
+// ngưỡng, rồi NÉN mảng còn lại và lặp trên phần sống sót. Kết quả giống hệt bản
+// gốc. Chạy trong worker -> UI không đơ dù vài trăm nghìn combo.
+//
+// Nhận: { flat: Int32Array (n*nSeg), nSeg, maxSame, priorityCols: number[] }
+//   flat = các hàng ĐANG CHỌN nối phẳng (mỗi hàng nSeg clip_id).
+// Trả:  { type:'progress', done, total } nhiều lần, rồi { type:'done', keep }
+//   keep = Uint8Array độ dài n, 1 = giữ.
+self.onmessage = (e) => {
+  const { flat, nSeg, maxSame, priorityCols } = e.data;
+  const n = nSeg ? (flat.length / nSeg) | 0 : 0;
+  const keep = new Uint8Array(n);
+  if (n === 0) { self.postMessage({ type: "done", keep }, [keep.buffer]); return; }
+
+  const prio = priorityCols || [];
+  // Sớm: không có khúc ưu tiên VÀ ngưỡng cho phép trùng tới (nSeg-1) khúc thì
+  // không combo nào bị loại (các combo đều phân biệt) -> giữ hết tức thì.
+  if (prio.length === 0 && maxSame >= nSeg - 1) {
+    keep.fill(1);
+    self.postMessage({ type: "done", keep }, [keep.buffer]);
+    return;
+  }
+
+  let rem = new Int32Array(n);
+  for (let i = 0; i < n; i++) rem[i] = i;
+  let processed = 0;
+  const step = Math.max(1, (n / 200) | 0);
+  let nextEmit = 0;
+
+  while (rem.length > 0) {
+    const pivot = rem[0];
+    keep[pivot] = 1;
+    if (rem.length === 1) { processed = n; break; }
+
+    const pb = pivot * nSeg;
+    const survivors = [];
+    for (let k = 1; k < rem.length; k++) {
+      const r = rem[k], b = r * nSeg;
+      let same = 0;
+      for (let j = 0; j < nSeg; j++) if (flat[b + j] === flat[pb + j]) same++;
+      let ok = same <= maxSame;
+      if (ok && prio.length) {
+        let ps = 0;
+        for (let t = 0; t < prio.length; t++) {
+          if (flat[b + prio[t]] === flat[pb + prio[t]]) { ps++; break; }
+        }
+        if (ps > 0) ok = false;   // khúc ưu tiên phải KHÁC hoàn toàn
+      }
+      if (ok) survivors.push(r);
+    }
+
+    processed += 1 + (rem.length - 1 - survivors.length);
+    rem = Int32Array.from(survivors);
+
+    if (processed >= nextEmit) {
+      self.postMessage({ type: "progress", done: Math.min(processed, n), total: n });
+      nextEmit = processed + step;
+    }
+  }
+
+  self.postMessage({ type: "done", keep }, [keep.buffer]);
+};