update: down, cut, shuffle, trans video UX

backend/app/api/shuffle.py

@@ -104,6 +104,9 @@ class ShuffleReq(BaseModel):
     # danh sách biến thể user đã CHỌN render (mỗi phần tử = list clip_id).
     # None -> tự sinh theo cfg (giữ hành vi cũ).
     sequences: list[list[int]] | None = None
+    # độ phân giải xuất ra (khung dọc TikTok). Mặc định 1080x1920.
+    width: int = 1080
+    height: int = 1920
     username: str = ""
 
 
@@ -151,7 +154,8 @@ def estimate(req: ShuffleReq):
 
 # ------------------------------------------------------------------- plan ---
 
-PLAN_CAP = 500          # trần số dòng bảng trả về (tránh payload khổng lồ)
+PLAN_CAP = 3000         # trần số dòng bảng trả về (chỉ là danh sách nhãn, chưa render)
+MAX_RENDER = 150        # tối đa số video được RENDER mỗi lần (nặng CPU/đĩa)
 
 
 @router.post("/plan")
@@ -189,14 +193,21 @@ def generate(req: ShuffleReq):
     cfg, clip_map, _ = _build(req)
     # Chỉ render các biến thể user đã CHỌN (nếu gửi lên); không thì tự sinh như cũ.
     sequences = req.sequences if req.sequences else engine.generate(cfg)
+    # Trần cứng số video render mỗi lần để không quá tải máy.
+    capped_render = len(sequences) > MAX_RENDER
+    if capped_render:
+        sequences = sequences[:MAX_RENDER]
     audio_paths = _audio_paths(req)
+    w, h_res = max(64, req.width), max(64, req.height)
 
     job = jobs.create("shuffle")
 
     def work(h):
         from concurrent.futures import ThreadPoolExecutor
         import threading
-        h.log(f"Sẽ render {len(sequences)} biến thể"
+        if capped_render:
+            h.log(f"Đã chọn quá {MAX_RENDER} biến thể — chỉ render {MAX_RENDER} video đầu.")
+        h.log(f"Sẽ render {len(sequences)} biến thể @ {w}x{h_res}"
               + (f" + lồng {len(audio_paths)} track âm thanh" if audio_paths else ""))
         out_dir = sub_dir(req.session, "variations")
         n = len(sequences)
@@ -213,12 +224,12 @@ def generate(req: ShuffleReq):
                 out = os.path.join(out_dir, name)
                 if audio_paths:
                     tmp = os.path.join(out_dir, f".tmp_{i+1:02d}.mp4")
-                    shuffle_render._concat_reencode(paths, tmp)
+                    shuffle_render._concat_reencode(paths, tmp, w, h_res)
                     track = audio_paths[i % len(audio_paths)]
                     shuffle_render.attach_audio(tmp, track, out)
                     os.remove(tmp)
                 else:
-                    shuffle_render._concat_reencode(paths, out)
+                    shuffle_render._concat_reencode(paths, out, w, h_res)
                 size = os.path.getsize(out)
                 results[i] = {"name": name, "path": out, "sequence": seq, "size": size}
                 h.item_status(it, "done", detail=f"{size//1024} KB", result={

backend/app/services/dubber/translate.py

@@ -35,11 +35,17 @@ def char_budget(seg: Segment, target_lang: str) -> int:
 def _prompt(seg: Segment, target_lang: str, budget: int) -> str:
     name = LANG_NAME.get(target_lang, target_lang)
     return (
-        f"Translate the following line into natural {name} for video dubbing.\n"
+        f"You are a professional advertising voice-over translator for short "
+        f"product videos (TikTok/Reels style).\n"
+        f"Translate the line below into natural, SPOKEN {name} with an ENGAGING "
+        f"ADVERTISING tone: catchy, persuasive, energetic, emphasizing the "
+        f"product's appeal and benefits — the way a native {name} marketer would "
+        f"actually pitch it — while staying faithful to the original meaning.\n"
         f"It must be speakable in about {seg.dur:.1f} seconds, so keep it within "
-        f"~{budget} characters. Prefer a concise, natural paraphrase over a literal "
-        f"translation if needed to fit the time. Keep proper nouns, numbers and "
-        f"punctuation. Return ONLY the translated line, no quotes, no notes.\n\n"
+        f"~{budget} characters. Prefer a punchy, concise paraphrase over a literal "
+        f"translation so it fits the time AND sounds catchy. Keep proper nouns, "
+        f"brand names and numbers. Return ONLY the translated line — no quotes, "
+        f"no notes, no explanation.\n\n"
         f"Line: {seg.text}"
     )
 

backend/app/services/dubber/tts.py

@@ -37,7 +37,9 @@ class VoiceConfig:
 def pick_engine(cfg: VoiceConfig) -> str:
     if cfg.engine and cfg.engine != "auto":
         return cfg.engine
-    return {"vi": "vieneu", "en": "xtts", "fil": "edge"}.get(cfg.target_lang, "edge")
+    # vi -> VieNeu (local, nhẹ). en & fil -> Edge TTS (online): XTTS/Coqui chưa cài
+    # và nặng RAM, Edge cho giọng tốt sẵn dùng ngay.
+    return {"vi": "vieneu", "en": "edge", "fil": "edge"}.get(cfg.target_lang, "edge")
 
 
 class TTSEngine:
@@ -109,13 +111,30 @@ class XTTSEngine(TTSEngine):  # pragma: no cover - cần model local
 
 # --------------------------------------------------------------- fil: Edge ----
 
-# Giọng Edge mặc định theo ngôn ngữ (Edge không clone, một giọng dựng sẵn).
+# Giọng Edge mặc định theo ngôn ngữ (Edge không clone, dùng giọng dựng sẵn).
 _EDGE_VOICES = {
     "fil": "fil-PH-BlessicaNeural",
     "vi": "vi-VN-HoaiMyNeural",
     "en": "en-US-AriaNeural",
 }
 
+# Danh sách giọng Edge (nhiều lựa chọn nam/nữ) cho các ngôn ngữ chạy Edge TTS.
+_EDGE_VOICE_LIST = {
+    "en": [
+        ("Aria — nữ, tự nhiên (US)", "en-US-AriaNeural"),
+        ("Jenny — nữ, ấm (US)", "en-US-JennyNeural"),
+        ("Guy — nam, rõ ràng (US)", "en-US-GuyNeural"),
+        ("Michelle — nữ, trẻ trung (US)", "en-US-MichelleNeural"),
+        ("Ana — nữ, tươi (US)", "en-US-AnaNeural"),
+        ("Ryan — nam, ấm (UK)", "en-GB-RyanNeural"),
+        ("Sonia — nữ, truyền cảm (UK)", "en-GB-SoniaNeural"),
+    ],
+    "fil": [
+        ("Blessica — nữ, tự nhiên", "fil-PH-BlessicaNeural"),
+        ("Angelo — nam, rõ ràng", "fil-PH-AngeloNeural"),
+    ],
+}
+
 
 class EdgeTTSEngine(TTSEngine):  # pragma: no cover - cần mạng
     def __init__(self):
@@ -160,7 +179,19 @@ def load_engine(cfg: VoiceConfig) -> TTSEngine:
     if cls is None:
         raise ValueError(f"engine không hợp lệ: {name}")
     if name not in _INSTANCES:
-        _INSTANCES[name] = cls()
+        try:
+            _INSTANCES[name] = cls()
+        except Exception as e:
+            # Model nặng chưa cài / lỗi nạp (vd XTTS-Coqui) -> lùi về Edge TTS
+            # (online, nhẹ) để vẫn LỒNG ĐƯỢC tiếng thay vì hỏng cả pipeline.
+            if name == "edge":
+                raise
+            import sys
+            print(f"[tts] engine '{name}' không nạp được ({e}); dùng Edge TTS thay.",
+                  file=sys.stderr)
+            if "edge" not in _INSTANCES:
+                _INSTANCES["edge"] = EdgeTTSEngine()
+            _INSTANCES[name] = _INSTANCES["edge"]
     return _INSTANCES[name]
 
 
@@ -179,19 +210,9 @@ _FALLBACK_VOICES: dict[str, list[tuple[str, str]]] = {
         ("Bình An — nam, giọng điềm đạm", "Bình An"),
         ("Ngọc Linh — nữ, giọng tươi sáng", "Ngọc Linh"),
     ],
-    "en": [
-        ("Ana Florence — nữ, ấm", "Ana Florence"),
-        ("Claribel Dervla — nữ, trong", "Claribel Dervla"),
-        ("Alison Dietlinde — nữ, truyền cảm", "Alison Dietlinde"),
-        ("Sofia Hellen — nữ, trẻ trung", "Sofia Hellen"),
-        ("Andrew Chipper — nam, vui tươi", "Andrew Chipper"),
-        ("Damien Black — nam, trầm", "Damien Black"),
-        ("Craig Gutsy — nam, chắc khỏe", "Craig Gutsy"),
-        ("Royston Min — nam, rõ ràng", "Royston Min"),
-        ("Viktor Eka — nam, điềm đạm", "Viktor Eka"),
-        ("Gitta Nikolina — nữ, nhẹ nhàng", "Gitta Nikolina"),
-    ],
-    "fil": [("Giọng Filipino (Edge TTS)", "fil-PH-BlessicaNeural")],
+    # en & fil chạy Edge TTS -> lấy từ _EDGE_VOICE_LIST cho khớp giọng thật.
+    "en": _EDGE_VOICE_LIST["en"],
+    "fil": _EDGE_VOICE_LIST["fil"],
 }
 
 
@@ -199,7 +220,9 @@ def list_voices(lang: str, allow_load: bool = False) -> list[dict]:
     """Trả danh sách giọng cho ngôn ngữ. Mặc định KHÔNG nạp model (tránh treo request);
     chỉ lấy động khi engine đã được cache sẵn (đã từng dịch) hoặc allow_load=True."""
     name = pick_engine(VoiceConfig(target_lang=lang))
-    if name in _INSTANCES or allow_load:
+    # Edge: danh sách giọng theo NGÔN NGỮ (engine.list_voices() không biết lang),
+    # nên lấy trực tiếp từ bảng giọng Edge để đúng nam/nữ từng thứ tiếng.
+    if name != "edge" and (name in _INSTANCES or allow_load):
         try:
             eng = load_engine(VoiceConfig(target_lang=lang))
             vs = eng.list_voices()

frontend/src/pages/CutVideo.jsx

@@ -29,6 +29,135 @@ const fmt = (s) => {
   return `${String(m).padStart(2, "0")}:${String(ss).padStart(2, "0")}`;
 };
 
+// Timeline của MỘT video, tự quản lý state riêng (playhead, dấu cắt đang chọn, kéo thả)
+// -> nhiều video hiển thị cùng lúc, điểm cắt của video nào đi theo video đó.
+function VideoTimeline({ video, index, patchVideo }) {
+  const [playFrame, setPlayFrame] = useState(0);
+  const [selCut, setSelCut] = useState(-1);
+  const stripRef = useRef();
+  const videoRef = useRef();
+  const dragIdx = useRef(-1);
+  const stopAt = useRef(null);
+
+  const cuts = video.cuts || [];
+  const nf = video.info?.nb_frames || 1;
+  const fps = video.info?.fps || 30;
+  const dur = video.info?.duration || 0;
+  const frameToPct = (f) => (f / nf) * 100;
+  const patch = (p) => patchVideo(index, p);
+  const xToFrame = (clientX) => {
+    const rect = stripRef.current.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+    return Math.round(ratio * nf);
+  };
+
+  // bấm dải -> seek video tới đó; playhead đen nhảy theo
+  const onStripClick = (e) => {
+    if (dragIdx.current >= 0) return;
+    const f = xToFrame(e.clientX);
+    setPlayFrame(f); setSelCut(-1);
+    if (videoRef.current) videoRef.current.currentTime = f / fps;
+  };
+
+  const addCut = () => {
+    const f = playFrame;
+    if (f <= 2 || f >= nf - 2) return;
+    patch({ cuts: [...cuts, f].sort((a, b) => a - b) });
+  };
+  const deleteCut = () => {
+    if (selCut < 0) return;
+    patch({ cuts: cuts.filter((_, j) => j !== selCut) });
+    setSelCut(-1);
+  };
+
+  const startDrag = (i) => (e) => { e.stopPropagation(); dragIdx.current = i; setSelCut(i); };
+  useEffect(() => {
+    const move = (e) => {
+      if (dragIdx.current < 0) return;
+      const f = Math.min(nf - 2, Math.max(2, xToFrame(e.clientX)));
+      patch({ cuts: cuts.map((c, j) => (j === dragIdx.current ? f : c)) });
+    };
+    const up = () => {
+      if (dragIdx.current >= 0) { dragIdx.current = -1; patch({ cuts: [...cuts].sort((a, b) => a - b) }); }
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
+    // eslint-disable-next-line
+  }, [cuts, nf]);
+
+  const playToNextCut = () => {
+    const v = videoRef.current; if (!v) return;
+    const times = cuts.map((f) => f / fps).sort((a, b) => a - b);
+    const next = times.find((t) => t > v.currentTime + 0.05);
+    stopAt.current = next != null ? next : dur;
+    v.play();
+  };
+  // playhead đen chạy MƯỢT theo requestAnimationFrame
+  useEffect(() => {
+    const v = videoRef.current; if (!v) return;
+    let raf;
+    const loop = () => {
+      setPlayFrame(Math.round(v.currentTime * fps));
+      if (stopAt.current != null && v.currentTime >= stopAt.current) { v.pause(); stopAt.current = null; }
+      raf = requestAnimationFrame(loop);
+    };
+    const onPlay = () => { cancelAnimationFrame(raf); loop(); };
+    const onStop = () => { cancelAnimationFrame(raf); setPlayFrame(Math.round(v.currentTime * fps)); };
+    v.addEventListener("play", onPlay);
+    v.addEventListener("pause", onStop);
+    v.addEventListener("seeked", onStop);
+    return () => {
+      cancelAnimationFrame(raf);
+      v.removeEventListener("play", onPlay);
+      v.removeEventListener("pause", onStop);
+      v.removeEventListener("seeked", onStop);
+    };
+    // eslint-disable-next-line
+  }, [fps]);
+
+  return (
+    <div className="card">
+      <div className="flex between center">
+        <div className="panel-title clip" style={{ margin: 0 }} title={video.name}>
+          Timeline — {video.name} ({cuts.length + 1} khúc)
+        </div>
+        <span className="small muted" style={{ flex: "0 0 auto" }}>kéo dấu cắt để chỉnh</span>
+      </div>
+
+      <video ref={videoRef} src={video.url} controls className="mt12"
+             style={{ display: "block", margin: "0 auto", maxWidth: "100%", maxHeight: 340, width: "auto", borderRadius: 10 }} />
+
+      <div className="cut-toolbar mt12">
+        <button className="btn sm" onClick={playToNextCut}><IcPlay size={14} /> Phát tới điểm cắt</button>
+        <button className="btn sm" onClick={addCut}><IcPlus size={14} /> Thêm cắt</button>
+        <button className="btn sm" onClick={deleteCut} disabled={selCut < 0}><IcTrash size={14} /> Xoá cắt</button>
+        <span className="small muted right">{fmt(playFrame / fps)} / {fmt(dur)}</span>
+      </div>
+
+      <div className="timeline-wrap mt12">
+        <div className="timeline" ref={stripRef} onClick={onStripClick}>
+          <div className="strip">
+            {(video.thumbs || []).map((t, i) => <img key={i} src={fileUrl(t.url)} alt="" draggable={false} />)}
+          </div>
+          <div className="playhead" style={{ left: frameToPct(playFrame) + "%" }} />
+          {cuts.map((f, i) => (
+            <div key={i} className={"cutmark" + (i === selCut ? " sel" : "")}
+                 style={{ left: frameToPct(f) + "%" }}
+                 onPointerDown={startDrag(i)}
+                 onClick={(e) => { e.stopPropagation(); setSelCut(i); }}>
+              <div className={"pin" + (i === selCut ? " sel" : "")}>{i + 1}</div>
+            </div>
+          ))}
+        </div>
+        <div className="timeline-ticks">
+          <span>00:00</span><span>{fmt(dur / 2)}</span><span>{fmt(dur)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function CutVideo() {
   const [sp] = useSearchParams();
   const nav = useNavigate();
@@ -43,21 +172,14 @@ export default function CutVideo() {
   const busy = st.busy;
   const setJob = (j) => set({ job: j });
   const setBusy = (b) => set({ busy: b });
-  const [playFrame, setPlayFrame] = useState(0);   // vị trí đầu phát (đen) chạy theo video
   const [prevBusy, setPrevBusy] = useState(false); // đang tạo xem trước -> hiện overlay chờ
-  const [selCut, setSelCut] = useState(-1);
   const [showNote, setShowNote] = useState(true);
-  const stripRef = useRef();
-  const videoRef = useRef();
-  const dragIdx = useRef(-1);
-  const stopAt = useRef(null);
+  const [uploading, setUploading] = useState(null); // {name,i,n} — video đang tải lên
 
   const videos = st.videos;
   const active = Math.min(st.active, Math.max(0, videos.length - 1));
   const cur = videos[active];
 
-  const patchActive = (patch) =>
-    set({ videos: videos.map((v, i) => (i === active ? { ...v, ...patch } : v)) });
   const patchVideo = (index, patch) =>
     set((s) => ({ videos: (s.videos || []).map((v, i) => (i === index ? { ...v, ...patch } : v)) }));
 
@@ -85,7 +207,10 @@ export default function CutVideo() {
   }, []);
 
   const onFiles = async (files) => {
-    for (const file of files) {
+    const arr = Array.from(files);
+    for (let i = 0; i < arr.length; i++) {
+      const file = arr[i];
+      setUploading({ name: file.name, i: i + 1, n: arr.length });
       try {
         const r = await api.cutUpload(file, cur?.session);
         const v = {
@@ -96,6 +221,7 @@ export default function CutVideo() {
         set((s) => ({ videos: [...(s.videos || []), v] }));
       } catch (e) { alert("Lỗi tải video: " + e.message); }
     }
+    setUploading(null);
   };
 
   const removeVideo = (i) => (e) => {
@@ -104,11 +230,11 @@ export default function CutVideo() {
     set({ videos: next, active: Math.max(0, Math.min(active, next.length - 1)) });
   };
 
-  // Xem trước cho 1 video CỤ THỂ (theo index) -> mỗi tab có dải ảnh riêng.
+  // Xem trước cho 1 video CỤ THỂ (theo index) -> tạo dải ảnh + điểm cắt tự động.
   const doPreview = async (index) => {
     const vid = videos[index];
-    if (!vid || vid.previewing) return;
-    patchVideo(index, { previewing: true }); setPrevBusy(true);
+    if (!vid) return;
+    patchVideo(index, { previewing: true });
     try {
       const r = await api.cutPreview({
         session: vid.session, file: vid.file, mode: st.mode,
@@ -116,93 +242,20 @@ export default function CutVideo() {
       });
       const interior = r.segments.slice(0, -1).map((s) => s.end_frame);
       patchVideo(index, { thumbs: r.thumbnails, cuts: interior, info: r.info, previewing: false });
-    } catch (e) { patchVideo(index, { previewing: false }); alert("Lỗi xem trước: " + e.message); }
-    finally { setPrevBusy(false); }
-  };
-  const preview = () => { doPreview(active); setSelCut(-1); setPlayFrame(0); };
-  // Đổi tab video: nếu video đó CHƯA có dải ảnh thì tự xem trước (để tab nào cũng hiện).
-  const switchTo = (i) => {
-    set({ active: i }); setSelCut(-1); setPlayFrame(0);
-    const v = videos[i];
-    if (v && !(v.thumbs && v.thumbs.length) && !v.previewing) doPreview(i);
+    } catch (e) { patchVideo(index, { previewing: false }); throw e; }
   };
 
-  const cuts = cur?.cuts || [];
-  const nf = cur?.info?.nb_frames || 1;
-  const fps = cur?.info?.fps || 30;
-  const frameToPct = (f) => (f / nf) * 100;
-  const xToFrame = (clientX) => {
-    const rect = stripRef.current.getBoundingClientRect();
-    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
-    return Math.round(ratio * nf);
-  };
-
-  // bấm dải -> seek video tới đó; playhead đen sẽ nhảy theo
-  const onStripClick = (e) => {
-    if (!cur || dragIdx.current >= 0) return;
-    const f = xToFrame(e.clientX);
-    setPlayFrame(f); setSelCut(-1);
-    if (videoRef.current) videoRef.current.currentTime = f / fps;
-  };
-
-  const addCut = () => {
-    if (!cur) return;
-    const f = playFrame;
-    if (f <= 2 || f >= nf - 2) return;
-    patchActive({ cuts: [...cuts, f].sort((a, b) => a - b) });
-  };
-  const deleteCut = () => {
-    if (selCut < 0) return;
-    patchActive({ cuts: cuts.filter((_, j) => j !== selCut) });
-    setSelCut(-1);
+  // Xem điểm cắt cho TẤT CẢ video đã tải (mỗi video có timeline riêng).
+  const previewAll = async () => {
+    if (!videos.length) return;
+    setPrevBusy(true);
+    try {
+      for (let i = 0; i < videos.length; i++) await doPreview(i);
+    } catch (e) { alert("Lỗi xem trước: " + e.message); }
+    finally { setPrevBusy(false); }
   };
 
-  const startDrag = (i) => (e) => { e.stopPropagation(); dragIdx.current = i; setSelCut(i); };
-  useEffect(() => {
-    const move = (e) => {
-      if (dragIdx.current < 0 || !cur) return;
-      const f = Math.min(nf - 2, Math.max(2, xToFrame(e.clientX)));
-      patchActive({ cuts: cuts.map((c, j) => (j === dragIdx.current ? f : c)) });
-    };
-    const up = () => {
-      if (dragIdx.current >= 0) { dragIdx.current = -1; patchActive({ cuts: [...cuts].sort((a, b) => a - b) }); }
-    };
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
-    return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
-    // eslint-disable-next-line
-  }, [cur, cuts]);
-
-  const playToNextCut = () => {
-    const v = videoRef.current; if (!v || !cur) return;
-    const times = cuts.map((f) => f / fps).sort((a, b) => a - b);
-    const next = times.find((t) => t > v.currentTime + 0.05);
-    stopAt.current = next != null ? next : cur.info.duration;
-    v.play();
-  };
-  // playhead đen chạy MƯỢT theo requestAnimationFrame (thay vì timeupdate ~4Hz giật cục)
-  useEffect(() => {
-    const v = videoRef.current;
-    if (!v || !cur) return;
-    let raf;
-    const loop = () => {
-      setPlayFrame(Math.round(v.currentTime * fps));
-      if (stopAt.current != null && v.currentTime >= stopAt.current) { v.pause(); stopAt.current = null; }
-      raf = requestAnimationFrame(loop);
-    };
-    const onPlay = () => { cancelAnimationFrame(raf); loop(); };
-    const onStop = () => { cancelAnimationFrame(raf); setPlayFrame(Math.round(v.currentTime * fps)); };
-    v.addEventListener("play", onPlay);
-    v.addEventListener("pause", onStop);
-    v.addEventListener("seeked", onStop);
-    return () => {
-      cancelAnimationFrame(raf);
-      v.removeEventListener("play", onPlay);
-      v.removeEventListener("pause", onStop);
-      v.removeEventListener("seeked", onStop);
-    };
-    // eslint-disable-next-line
-  }, [cur, fps]);
+  const switchTo = (i) => set({ active: i });
 
   const segmentsFromCuts = (video) => {
     const c = video.cuts || [];
@@ -259,6 +312,8 @@ export default function CutVideo() {
     }, i * 300));
   };
 
+  const anyPreviewed = videos.some((v) => v.thumbs && v.thumbs.length > 0);
+
   return (
     <div>
       <div className="h1"><IcStar size={22} /> Workspace: <span className="accent">Cut video</span></div>
@@ -270,6 +325,11 @@ export default function CutVideo() {
           <div className="card">
             <div className="panel-title">1. Tải lên video nguồn</div>
             <FileDrop onFiles={onFiles} hint="MP4, MOV, AVI, MKV, WebM · có thể thêm nhiều video" />
+            {uploading && (
+              <div className="small mt8" style={{ color: "var(--orange-700)" }}>
+                ⏳ Đang tải lên: <b>{uploading.name}</b> ({uploading.i}/{uploading.n})…
+              </div>
+            )}
             {videos.length > 0 && (
               <div className="vtabs mt12">
                 {videos.map((v, i) => (
@@ -318,54 +378,26 @@ export default function CutVideo() {
                   Gợi ý ~{cur.auto_count} khúc · {fmt(cur.info.duration)} · {cur.info.fps}fps
                 </div>
               )}
-              <button className="btn right" onClick={preview} disabled={!cur || cur?.previewing}>
-                {cur?.previewing ? "Đang tạo xem trước…" : "Xem trước điểm cắt"}
+              <button className="btn right" onClick={previewAll} disabled={!videos.length || prevBusy}>
+                {prevBusy ? "Đang tạo xem trước…" : `Xem điểm cắt${videos.length > 1 ? ` (${videos.length} video)` : ""}`}
               </button>
             </div>
           </div>
 
-          {cur && cur.thumbs?.length > 0 && (
-            <div className="card">
-              <div className="flex between center">
-                <div className="panel-title clip" style={{ margin: 0 }} title={cur.name}>3. Timeline — {cur.name} ({cuts.length + 1} khúc)</div>
-                <span className="small muted" style={{ flex: "0 0 auto" }}>kéo dấu cắt để chỉnh</span>
-              </div>
-
-              <video ref={videoRef} src={cur.url} controls className="mt12"
-                     style={{ display: "block", margin: "0 auto", maxWidth: "100%", maxHeight: 340, width: "auto", borderRadius: 10 }} />
-
-              <div className="cut-toolbar mt12">
-                <button className="btn sm" onClick={playToNextCut}><IcPlay size={14} /> Phát tới điểm cắt</button>
-                <button className="btn sm" onClick={addCut}><IcPlus size={14} /> Thêm cắt</button>
-                <button className="btn sm" onClick={deleteCut} disabled={selCut < 0}><IcTrash size={14} /> Xoá cắt</button>
-                <span className="small muted right">{fmt(playFrame / fps)} / {fmt(cur.info.duration)}</span>
-              </div>
-
-              <div className="timeline-wrap mt12">
-                <div className="timeline" ref={stripRef} onClick={onStripClick}>
-                  <div className="strip">
-                    {cur.thumbs.map((t, i) => <img key={i} src={fileUrl(t.url)} alt="" draggable={false} />)}
-                  </div>
-                  <div className="playhead" style={{ left: frameToPct(playFrame) + "%" }} />
-                  {cuts.map((f, i) => (
-                    <div key={i} className={"cutmark" + (i === selCut ? " sel" : "")}
-                         style={{ left: frameToPct(f) + "%" }}
-                         onPointerDown={startDrag(i)}
-                         onClick={(e) => { e.stopPropagation(); setSelCut(i); }}>
-                      <div className={"pin" + (i === selCut ? " sel" : "")}>{i + 1}</div>
-                    </div>
-                  ))}
-                </div>
-                <div className="timeline-ticks">
-                  <span>00:00</span><span>{fmt(cur.info.duration / 2)}</span><span>{fmt(cur.info.duration)}</span>
-                </div>
+          {anyPreviewed && (
+            <>
+              {videos.map((v, i) =>
+                (v.thumbs && v.thumbs.length > 0)
+                  ? <VideoTimeline key={i} video={v} index={i} patchVideo={patchVideo} />
+                  : null
+              )}
+              <div className="card">
+                <button className="btn primary block" onClick={executeAll} disabled={busy}>
+                  {busy ? "Đang cắt..." : <>Cắt {videos.length > 1 ? `tất cả ${videos.length} video` : "video"} <IcArrow size={16} /></>}
+                </button>
+                <p className="small muted mt8">Mỗi video dùng điểm cắt riêng của nó. Bấm “Cắt” sẽ xử lý tất cả video đã tải cùng lúc.</p>
               </div>
-
-              <button className="btn primary block mt16" onClick={executeAll} disabled={busy}>
-                {busy ? "Đang cắt..." : <>Cắt {videos.length > 1 ? `tất cả ${videos.length} video` : "video"} <IcArrow size={16} /></>}
-              </button>
-              <p className="small muted mt8">Mỗi video dùng điểm cắt riêng (xem trước từng tab). Bấm “Cắt” sẽ xử lý tất cả video đã tải.</p>
-            </div>
+            </>
           )}
 
           <ProcessingOverlay busy={busy || prevBusy} job={busy ? job : null}

frontend/src/pages/DownList.jsx

@@ -1,10 +1,10 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { api, pollJob, fileUrl } from "../api";
 import { useToolState } from "../store";
 import { useAuth } from "../stores/authStore";
 import { ProcessRail, Toggle, ProcessingOverlay, CacheNote } from "../components/ui";
-import { IcRefresh, IcTrash, IcDownload, IcArrow, IcScissors, IcMic, IcCheck } from "../components/Icons";
+import { IcTrash, IcDownload, IcArrow, IcScissors, IcMic, IcCheck } from "../components/Icons";
 
 const STEPS = [
   { t: "Dán danh sách link", d: "Dán hoặc nhập danh sách các link video cần tải." },
@@ -38,11 +38,25 @@ export default function DownList() {
   const setJob = (j) => set({ job: j });
   const setBusy = (b) => set({ busy: b });
   const [showNote, setShowNote] = useState(true);
+  const [analyzing, setAnalyzing] = useState(false);
+  const parseTimer = useRef(null);
 
-  const parse = async () => {
-    if (!st.raw.trim()) return;
-    const r = await api.parseLinks(st.raw);
-    set({ items: r.items });
+  // Phân tích danh sách link. Gọi tự động (debounce) mỗi khi textarea đổi.
+  const runParse = async (text) => {
+    if (!text.trim()) { set({ items: [] }); return; }
+    setAnalyzing(true);
+    try {
+      const r = await api.parseLinks(text);
+      set({ items: r.items });
+    } catch (e) { /* im lặng khi đang gõ dở */ }
+    finally { setAnalyzing(false); }
+  };
+
+  // Tự động phân tích khi dán / sửa / xóa link (debounce 500ms để không gọi API liên tục).
+  const onRawChange = (val) => {
+    set({ raw: val });
+    if (parseTimer.current) clearTimeout(parseTimer.current);
+    parseTimer.current = setTimeout(() => runParse(val), 500);
   };
 
   const start = async () => {
@@ -103,10 +117,10 @@ export default function DownList() {
             <div className="panel-title">1. Dán danh sách link</div>
             <textarea
               placeholder={"Dán nhiều link video, mỗi link một dòng...\nhttps://www.youtube.com/watch?v=abc123\nhttps://www.tiktok.com/@user/video/123"}
-              value={st.raw} onChange={(e) => set({ raw: e.target.value })} />
+              value={st.raw} onChange={(e) => onRawChange(e.target.value)} />
             <div className="flex between center mt12">
               <span className="muted small">Tối đa 200 link/lần ({st.items.length}/200)</span>
-              <button className="btn sm" onClick={parse}><IcRefresh size={15} /> Phân tích</button>
+              <span className="muted small">{analyzing ? "Đang phân tích…" : "Tự động phân tích khi dán / sửa link"}</span>
             </div>
             <div className="toggle-row mt16">
               <Toggle on={st.zip} onChange={(v) => set({ zip: v })} />
@@ -186,8 +200,8 @@ export default function DownList() {
                           <td className="muted">{(r.size / 1048576).toFixed(1)} MB</td>
                           <td><a className="btn sm" href={fileUrl(r.url)} download={`${r.title}.${r.ext}`}>Về máy</a></td>
                           <td>
-                            <div className="flex gap8 center" style={{ flexWrap: "wrap" }}>
-                              <div className="toolchips">
+                            <div className="flex gap8 center" style={{ flexWrap: "nowrap", whiteSpace: "nowrap" }}>
+                              <div className="toolchips" style={{ flexWrap: "nowrap" }}>
                                 {TOOLS.map((t) => (
                                   <span key={t.id} className={"toolchip" + (sel[t.id] ? " on" : "")} onClick={() => toggleTool(r.path, t.id)}>
                                     <span className="tick-mini">{sel[t.id] && <IcCheck size={10} />}</span>

frontend/src/pages/DubVideo.jsx

@@ -18,8 +18,8 @@ const LANGS = [
   { id: "en", label: "English" },
   { id: "fil", label: "Filipino" },
 ];
-// Model chốt theo ngôn ngữ (không cho chọn): vi→VieNeu, en→XTTS-v2, fil→Edge TTS.
-const MODEL_LABEL = { vi: "VieNeu-TTS", en: "XTTS-v2", fil: "Edge TTS" };
+// Model chốt theo ngôn ngữ (không cho chọn): vi→VieNeu (clone được), en & fil→Edge TTS.
+const MODEL_LABEL = { vi: "VieNeu-TTS", en: "Edge TTS", fil: "Edge TTS" };
 const BG = [
   { id: "duck", label: "Giảm tiếng gốc" },
   { id: "demucs", label: "Tách nhạc (giữ nền)" },
@@ -72,6 +72,7 @@ export default function DubVideo() {
     busy: false, ttsBusy: false, job: null,
   });
   const [showNote, setShowNote] = useState(true);
+  const [uploading, setUploading] = useState(null); // {name,i,n} — video đang tải lên
   const [voices, setVoices] = useState([]);        // giọng cho khu dịch video
   const [ttsVoices, setTtsVoices] = useState([]);  // giọng cho khu gen voice
   const job = st.job;
@@ -83,7 +84,8 @@ export default function DubVideo() {
   const sampleRef = useRef();
   const ttsSampleRef = useRef();
 
-  const isFil = (t) => t === "fil";
+  // en & fil chạy Edge TTS: có bộ chọn giọng dựng sẵn, KHÔNG clone. vi (VieNeu) clone được.
+  const isEdge = (t) => t === "fil" || t === "en";
 
   useEffect(() => {
     const sid = sp.get("session");
@@ -115,11 +117,17 @@ export default function DubVideo() {
   const addVideos = async (files) => {
     let sid = st.session;
     const added = [];
-    for (const file of files) {
-      const r = await api.dubUpload(file, sid);
-      sid = r.session;
-      added.push({ file: r.file, name: r.name, size: r.size, url: `/api/files/${sid}/${r.file}` });
+    const arr = Array.from(files);
+    for (let i = 0; i < arr.length; i++) {
+      const file = arr[i];
+      setUploading({ name: file.name, i: i + 1, n: arr.length });
+      try {
+        const r = await api.dubUpload(file, sid);
+        sid = r.session;
+        added.push({ file: r.file, name: r.name, size: r.size, url: `/api/files/${sid}/${r.file}` });
+      } catch (e) { alert("Lỗi tải video: " + e.message); }
     }
+    setUploading(null);
     set((cur) => ({ session: sid, videos: [...cur.videos, ...added] }));
   };
   const removeVideo = (i) => set((cur) => ({ videos: cur.videos.filter((_, j) => j !== i) }));
@@ -139,19 +147,19 @@ export default function DubVideo() {
     if (!st.videos.length) return;
     setBusy(true); set({ outputs: [] });
     try {
-      const fil = isFil(st.target);
+      const edge = isEdge(st.target);
       const src = st.voiceSource;                 // preset | video | upload
-      const doClone = !fil && (src === "video" || src === "upload");
+      const doClone = !edge && (src === "video" || src === "upload");
       const { job_id } = await api.dubStart({
         session: st.session, files: st.videos.map((v) => v.file),
         target_lang: st.target, bg_mode: st.bg,
         do_clone: doClone,
-        voice_source: fil ? "preset" : src,
+        voice_source: edge ? "preset" : src,
         speaker_file: st.speakerFile,
-        preset: (!fil && src === "preset") ? st.voice : "",
+        preset: edge ? st.voice : (src === "preset" ? st.voice : ""),
         style: st.style, engine: "auto", multi_speaker: st.multiSpeaker,
         username: user,
-        ...qualityPayload(!fil && st.useQuality, st.temperature, st.topK, st.repPen),
+        ...qualityPayload(!edge && st.useQuality, st.temperature, st.topK, st.repPen),
       });
       const done = await pollJob(job_id, setJob);
       const outs = done.result?.outputs ||
@@ -184,15 +192,15 @@ export default function DubVideo() {
     if (!tts.text.trim()) return alert("Nhập text cần đọc.");
     setTtsBusy(true); setTts({ result: null });
     try {
-      const fil = isFil(tts.target);
+      const edge = isEdge(tts.target);
       const src = tts.voiceSource;                // preset | upload
       const { job_id } = await api.dubTts({
         session: st.session || "", text: tts.text, target_lang: tts.target,
-        voice_source: fil ? "preset" : src,
+        voice_source: edge ? "preset" : src,
         speaker_file: tts.speakerFile,
-        preset: (!fil && src === "preset") ? tts.voice : "",
+        preset: edge ? tts.voice : (src === "preset" ? tts.voice : ""),
         style: tts.style, engine: "auto",
-        ...qualityPayload(!fil && tts.useQuality, tts.temperature, tts.topK, tts.repPen),
+        ...qualityPayload(!edge && tts.useQuality, tts.temperature, tts.topK, tts.repPen),
       });
       const done = await pollJob(job_id, setJob);
       const out = done.result?.output ||
@@ -216,6 +224,11 @@ export default function DubVideo() {
           <div className="card">
             <div className="panel-title">1. Tải lên video cần dịch</div>
             <FileDrop onFiles={addVideos} hint="MP4, MOV, AVI, MKV · có thể chọn nhiều video" />
+            {uploading && (
+              <div className="small mt8" style={{ color: "var(--orange-700)" }}>
+                ⏳ Đang tải lên: <b>{uploading.name}</b> ({uploading.i}/{uploading.n})…
+              </div>
+            )}
             {st.videos.length > 0 && (
               <div className="filelist mt12">
                 {st.videos.map((v, i) => (
@@ -253,9 +266,13 @@ export default function DubVideo() {
               </div>
             </div>
 
-            {isFil(st.target) ? (
-              <div className="small muted mt16">
-                Filipino dùng <b>Edge TTS</b> với một giọng dựng sẵn — không chọn nam/nữ, không clone.
+            {isEdge(st.target) ? (
+              <div className="mt16">
+                <span className="field-label">Chọn giọng ({voices.length})</span>
+                <select value={st.voice} onChange={(e) => set({ voice: e.target.value })} style={{ minWidth: 260 }}>
+                  {voices.map((v) => <option key={v.id} value={v.id}>{v.label}</option>)}
+                </select>
+                <div className="small muted mt8">Dùng <b>Edge TTS</b> — giọng dựng sẵn (chọn nam/nữ), không clone giọng.</div>
               </div>
             ) : (
               <>
@@ -374,8 +391,14 @@ export default function DubVideo() {
               </div>
             </div>
 
-            {isFil(tts.target) ? (
-              <div className="small muted mt12">Filipino dùng Edge TTS, một giọng dựng sẵn — không clone.</div>
+            {isEdge(tts.target) ? (
+              <div className="mt12">
+                <span className="field-label">Chọn giọng ({ttsVoices.length})</span>
+                <select value={tts.voice} onChange={(e) => setTts({ voice: e.target.value })} style={{ minWidth: 260 }}>
+                  {ttsVoices.map((v) => <option key={v.id} value={v.id}>{v.label}</option>)}
+                </select>
+                <div className="small muted mt8">Edge TTS — giọng dựng sẵn, không clone.</div>
+              </div>
             ) : (
               <>
                 <div className="mt12">
@@ -419,7 +442,8 @@ export default function DubVideo() {
           </div>
         </div>
 
-        <ProcessRail steps={STEPS} tip="Model theo ngôn ngữ: vi → VieNeu (10 giọng + clone); en → XTTS-v2 (giọng studio + clone); fil → Edge TTS (1 giọng). Tốc độ đọc máy tự khớp video." />
+        <ProcessRail steps={STEPS} tip="Model theo ngôn ngữ: vi → VieNeu (10 giọng + clone giọng); en & fil → Edge TTS (nhiều giọng nam/nữ, không clone). Dịch theo ngữ điệu quảng cáo; tốc độ đọc máy tự khớp video." />
+
       </div>
     </div>
   );

frontend/src/pages/ShuffleVideo.jsx

@@ -29,6 +29,7 @@ export default function ShuffleVideo() {
     useSim: false, sim: 80,
     useRandom: false, randomPct: 100,
     maxOut: "",
+    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})
     results: [],
     busy: false, job: null,        // giữ trong store -> chuyển tool vẫn thấy "đang xử lý"
@@ -38,9 +39,14 @@ export default function ShuffleVideo() {
   const setJob = (j) => set({ job: j });
   const setBusy = (b) => set({ busy: b });
   const [showNote, setShowNote] = useState(true);
+  const [uploading, setUploading] = useState(null); // {name,i,n,seg} — clip đang tải lên
 
   const segs = st.segs;
 
+  // độ phân giải khung dọc (TikTok) — width x height
+  const RES = { "1080": [1080, 1920], "720": [720, 1280], "480": [480, 854] };
+  const MAX_RENDER = 150;
+
   // nhận khúc đẩy từ Cut (?session=) -> nạp seg_* có sẵn
   useEffect(() => {
     const sid = sp.get("session");
@@ -80,11 +86,17 @@ export default function ShuffleVideo() {
   const addToSeg = (idx) => async (files) => {
     let sid = st.session;
     const added = [];
-    for (const file of files) {
-      const r = await api.shuffleUpload(file, idx, sid);
-      sid = r.session;
-      added.push({ file: r.file, name: r.name, size: r.size, url: r.url });
+    const arr = Array.from(files);
+    for (let i = 0; i < arr.length; i++) {
+      const file = arr[i];
+      setUploading({ name: file.name, i: i + 1, n: arr.length, seg: idx });
+      try {
+        const r = await api.shuffleUpload(file, idx, sid);
+        sid = r.session;
+        added.push({ file: r.file, name: r.name, size: r.size, url: r.url });
+      } catch (e) { alert("Lỗi tải clip: " + e.message); }
     }
+    setUploading(null);
     set((cur) => {
       const n = cur.segs.map((s) => ({ ...s, files: [...s.files] }));
       n[idx].files.push(...added);
@@ -99,10 +111,16 @@ export default function ShuffleVideo() {
       return alert("Hãy thêm clip vào khúc trước để khởi tạo phiên, rồi thêm âm thanh.");
     }
     const added = [];
-    for (const file of files) {
-      const r = await api.shuffleUploadAudio(file, sid);
-      added.push({ file: r.file, name: r.name, size: r.size, url: r.url });
+    const arr = Array.from(files);
+    for (let i = 0; i < arr.length; i++) {
+      const file = arr[i];
+      setUploading({ name: file.name, i: i + 1, n: arr.length, seg: "audio" });
+      try {
+        const r = await api.shuffleUploadAudio(file, sid);
+        added.push({ file: r.file, name: r.name, size: r.size, url: r.url });
+      } catch (e) { alert("Lỗi tải âm thanh: " + e.message); }
     }
+    setUploading(null);
     set((cur) => ({ audio: [...cur.audio, ...added] }));
   };
 
@@ -113,16 +131,20 @@ export default function ShuffleVideo() {
   const removeAudio = (ai) => set((cur) => ({ audio: cur.audio.filter((_, j) => j !== ai) }));
   const setOrder = (si, mode) => set((cur) => ({ segs: cur.segs.map((s, i) => (i === si ? { ...s, order_mode: mode } : s)) }));
 
-  const payload = () => ({
-    session: st.session,
-    segments: segs.map((s) => ({ files: s.files.map((f) => f.file), order_mode: s.order_mode })),
-    audio_files: st.audio.map((a) => a.file),
-    similarity_threshold: st.useSim ? st.sim / 100 : 1.0,   // 1.0 = lấy hết
-    random_ratio: st.useRandom ? st.randomPct / 100 : 1.0,  // 1.0 = lấy hết
-    max_outputs: st.maxOut ? parseInt(st.maxOut) : null,
-    seed: 42,
-    username: user,
-  });
+  const payload = () => {
+    const [w, h] = RES[st.res] || RES["1080"];
+    return {
+      session: st.session,
+      segments: segs.map((s) => ({ files: s.files.map((f) => f.file), order_mode: s.order_mode })),
+      audio_files: st.audio.map((a) => a.file),
+      similarity_threshold: st.useSim ? st.sim / 100 : 1.0,   // 1.0 = lấy hết
+      random_ratio: st.useRandom ? st.randomPct / 100 : 1.0,  // 1.0 = lấy hết
+      max_outputs: st.maxOut ? parseInt(st.maxOut) : null,
+      width: w, height: h,
+      seed: 42,
+      username: user,
+    };
+  };
 
   // khúc "bỏ" thì không cần clip; các khúc còn lại cần ít nhất 1 clip
   const ready = st.session && segs.some((s) => s.order_mode !== "drop") &&
@@ -157,8 +179,14 @@ export default function ShuffleVideo() {
   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ũ
-    const sequences = st.plan.length ? selectedSeqs() : null;
+    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.");
+    // 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.`))
+        return;
+      sequences = sequences.slice(0, MAX_RENDER);
+    }
     setBusy(true); set({ results: [] });
     try {
       const { job_id } = await api.shuffleGenerate({ ...payload(), sequences });
@@ -217,6 +245,12 @@ export default function ShuffleVideo() {
                 {s.order_mode === "drop" ? (
                   <div className="small muted">Khúc này bị bỏ khỏi video — không cần clip.</div>
                 ) : (
+                  <>
+                  {uploading?.seg === si && (
+                    <div className="small" style={{ color: "var(--orange-700)", marginBottom: 6 }}>
+                      ⏳ Đang tải lên: <b>{uploading.name}</b> ({uploading.i}/{uploading.n})…
+                    </div>
+                  )}
                   <div className="clip-row">
                     <div style={{ width: 150 }}>
                       <FileDrop compact folder onFiles={addToSeg(si)} title="Thả clip" hint="clip hoặc cả thư mục" />
@@ -229,6 +263,7 @@ export default function ShuffleVideo() {
                       </div>
                     ))}
                   </div>
+                  </>
                 )}
               </div>
             ))}
@@ -243,6 +278,11 @@ export default function ShuffleVideo() {
               <div style={{ width: 150 }}>
                 <FileDrop compact accept="audio/*" onFiles={addAudio} title="Thả âm thanh" hint="MP3, WAV, M4A" />
               </div>
+              {uploading?.seg === "audio" && (
+                <div className="small" style={{ color: "var(--orange-700)", alignSelf: "center" }}>
+                  ⏳ Đang tải lên: <b>{uploading.name}</b> ({uploading.i}/{uploading.n})…
+                </div>
+              )}
               {st.audio.map((a, ai) => (
                 <div className="audio-chip" key={ai}>
                   <IcMusic size={16} />
@@ -310,9 +350,9 @@ export default function ShuffleVideo() {
                 </div>
                 {st.useSim && (
                   <div className="sub">
-                    <span className="field-label">Độ tương đồng tối đa: {st.sim}%</span>
+                    <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">Bỏ tick các biến thể giống nhau quá mức.</div>
+                    <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>
@@ -333,12 +373,25 @@ export default function ShuffleVideo() {
                   <input type="number" placeholder="không giới hạn" value={st.maxOut}
                          onChange={(e) => set({ maxOut: e.target.value })} style={{ width: 160 }} />
                 </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 }}>
+                    <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>
+              )}
               <button className="btn primary block mt16" onClick={generate} disabled={!ready || busy}>
                 {busy ? "Đang xào..."
-                  : <><IcShuffle size={16} /> Render đã chọn ({st.plan.filter((v) => v.keep).length}/{st.plan.length})</>}
+                  : <><IcShuffle size={16} /> Render đã chọn ({Math.min(st.plan.filter((v) => v.keep).length, MAX_RENDER)}/{st.plan.filter((v) => v.keep).length})</>}
               </button>
             </div>
           )}