Spaces:
Running
Running
| import { useEffect, useRef, useState } from "react"; | |
| import { api, pollJob, fileUrl } from "../api"; | |
| import { useToolState } from "../store"; | |
| import { useAuth } from "../stores/authStore"; | |
| import { ProcessRail, FileDrop, ProcessingOverlay, CacheNote } from "../components/ui"; | |
| import { IcText, IcDownload, IcVideo } from "../components/Icons"; | |
| import SubtitleEditor from "../components/SubtitleEditor"; | |
| import track from "../lib/track"; | |
| import ThumbsFeedback from "../components/ThumbsFeedback"; | |
| const STEPS = [ | |
| { t: "Tải video", d: "Tải 1 hoặc nhiều video cần chèn chữ." }, | |
| { t: "Lấy lời & tạo kiểu chữ", d: "Tự nhận dạng lời trong video (hoặc gõ tay), chọn phông/màu/nền, kéo đặt vị trí." }, | |
| { t: "Áp form cho mọi video", d: "Làm 1 video rồi áp cùng kiểu (và cả lời nếu muốn) cho các video còn lại." }, | |
| { t: "Tạo tất cả", d: "Burn chữ vào từng video — vào bao nhiêu ra bấy nhiêu." }, | |
| ]; | |
| const clone = (x) => JSON.parse(JSON.stringify(x)); | |
| export default function TextVideo() { | |
| const { user } = useAuth(); | |
| const [st, set] = useToolState("textvid", { | |
| session: null, | |
| videos: [], // [{file,name,size,url}] | |
| selIdx: 0, // video đang mở trong trình chèn chữ (-1 = chưa mở) | |
| forms: {}, // { [file]: {segs, mode, payload} } — chữ của từng video | |
| outputs: [], // [{name, video_url, srcName, srcUrl}] | |
| outStamp: 0, | |
| busy: false, job: null, | |
| }); | |
| const [showNote, setShowNote] = useState(true); | |
| const [uploading, setUploading] = useState(null); // {name,i,n} | |
| const [msg, setMsg] = useState(""); // báo nhẹ sau khi áp form | |
| const busy = st.busy; | |
| const job = st.job; | |
| const setBusy = (b) => set({ busy: b }); | |
| const setJob = (j) => set({ job: j }); | |
| const pollAbort = useRef(new AbortController()); | |
| useEffect(() => () => pollAbort.current.abort(), []); | |
| useEffect(() => { | |
| if (!msg) return; | |
| const t = setTimeout(() => setMsg(""), 4000); | |
| return () => clearTimeout(t); | |
| }, [msg]); | |
| const addVideos = async (files) => { | |
| let sid = st.session; | |
| const added = []; | |
| 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], | |
| // nếu chưa mở video nào -> mở video đầu tiên vừa thêm | |
| selIdx: cur.selIdx < 0 || !cur.videos.length ? cur.videos.length : cur.selIdx, | |
| })); | |
| if (added.length) track.step("upload_done", "prepare", { count: added.length }); | |
| }; | |
| const removeVideo = (i) => set((cur) => { | |
| const v = cur.videos[i]; | |
| const forms = { ...cur.forms }; | |
| if (v) delete forms[v.file]; | |
| const videos = cur.videos.filter((_, j) => j !== i); | |
| let selIdx = cur.selIdx; | |
| if (selIdx === i) selIdx = videos.length ? Math.min(i, videos.length - 1) : -1; | |
| else if (selIdx > i) selIdx -= 1; | |
| return { videos, forms, selIdx }; | |
| }); | |
| // Lưu chữ của video đang mở (editor gọi mỗi khi segs/mode đổi). | |
| const onEditorChange = (file) => (segs, mode, payload) => | |
| set((cur) => ({ forms: { ...cur.forms, [file]: { segs, mode, payload } } })); | |
| // Áp FORM chữ (segs + kiểu + vị trí) của video đang mở cho MỌI video còn lại — | |
| // để hàng loạt video quảng cáo cùng chiến dịch có chữ giống hệt nhau. | |
| const applyFormAll = () => { | |
| const curV = st.videos[st.selIdx]; | |
| if (!curV) return; | |
| const f = st.forms[curV.file]; | |
| if (!f || !(f.segs || []).length) { setMsg("⚠ Video này chưa có chữ để áp."); return; } | |
| let count = 0; | |
| set((cur) => { | |
| const forms = { ...cur.forms }; | |
| for (const v of cur.videos) { | |
| if (v.file === curV.file) continue; | |
| forms[v.file] = { segs: clone(f.segs), mode: f.mode, payload: clone(f.payload || []) }; | |
| count++; | |
| } | |
| return { forms }; | |
| }); | |
| setMsg(count > 0 | |
| ? `✅ Đã áp form chữ cho ${count} video khác (cùng kiểu, cùng vị trí).` | |
| : "Không có video nào khác để áp."); | |
| }; | |
| // Áp KIỂU CHỮ (phông/màu/nền/cỡ/vị trí) của video đang mở cho MỌI video còn lại, | |
| // NHƯNG GIỮ NGUYÊN lời riêng của từng video. Hợp khi mỗi video tự nhận dạng lời | |
| // khác nhau mà vẫn muốn nhìn giống nhau. Template = kiểu của đoạn đầu video đang mở. | |
| const applyStyleAll = () => { | |
| const curV = st.videos[st.selIdx]; | |
| if (!curV) return; | |
| const f = st.forms[curV.file]; | |
| const tmpl = f?.segs?.[0]?.style; | |
| if (!tmpl) { setMsg("⚠ Video này chưa có chữ để lấy kiểu."); return; } | |
| let count = 0; | |
| set((cur) => { | |
| const forms = { ...cur.forms }; | |
| for (const v of cur.videos) { | |
| if (v.file === curV.file) continue; | |
| const g = forms[v.file]; | |
| if (!g || !(g.segs || []).length) continue; // video chưa có chữ -> bỏ qua | |
| const segs = g.segs.map((s) => ({ ...s, style: clone(tmpl) })); | |
| forms[v.file] = { ...g, segs, payload: (g.payload || []).map((p) => ({ ...p, style: clone(tmpl) })) }; | |
| count++; | |
| } | |
| return { forms }; | |
| }); | |
| setMsg(count > 0 | |
| ? `✅ Đã áp KIỂU chữ cho ${count} video (giữ lời riêng từng video).` | |
| : "Không có video nào khác đang có chữ để áp kiểu."); | |
| if (count > 0) track.step("apply_form_all", "prepare", { count }); | |
| }; | |
| // Nhận dạng lời gốc trong video đang mở (ASR) -> trả lines cho editor đổ vào. | |
| const fetchLines = async () => { | |
| if (!selV) return []; | |
| setBusy(true); | |
| track.runClick({ phase: "asr" }); | |
| try { | |
| const { job_id } = await api.dubTranscribe({ session: st.session, video: selV.file }); | |
| const done = await pollJob(job_id, setJob, 1000, pollAbort.current.signal); | |
| const out = done.result?.output || | |
| (done.items || []).find((i) => i.status === "done")?.result; | |
| if (done.status === "error" || !out) | |
| throw new Error(done.items?.[0]?.error || done.error || "Không nhận dạng được lời"); | |
| return out.lines || []; | |
| } finally { setBusy(false); } | |
| }; | |
| // Burn chữ vào TẤT CẢ video có chữ -> mỗi video 1 kết quả (vào bao nhiêu ra bấy nhiêu). | |
| const burnAll = async () => { | |
| const targets = st.videos.filter((v) => (st.forms[v.file]?.payload || []).length); | |
| if (!targets.length) { | |
| alert("Chưa video nào có chữ. Mở video, thêm chữ (hoặc bấm “Áp form cho mọi video”)."); | |
| return; | |
| } | |
| setBusy(true); set({ outputs: [] }); | |
| track.runClick({ phase: "burn", videos: targets.length }); | |
| const outs = []; | |
| try { | |
| for (const v of targets) { | |
| const f = st.forms[v.file]; | |
| const { job_id } = await api.subtitleBurn({ | |
| session: st.session, video: v.file, mode: f.mode || "whole", | |
| segments: f.payload, username: user || "", | |
| }); | |
| const done = await pollJob(job_id, setJob, 1000, pollAbort.current.signal); | |
| const out = done.result?.output || | |
| (done.items || []).find((i) => i.status === "done")?.result; | |
| if (out) outs.push({ ...out, srcName: v.name, srcUrl: v.url }); | |
| } | |
| set({ outputs: outs, outStamp: Date.now() }); | |
| track.step("burn_batch_done", "review", { videos_in: targets.length, videos_out: outs.length }); | |
| if (!outs.length) alert("Không tạo được video nào (xem log)."); | |
| } catch (e) { alert("Lỗi: " + e.message); } | |
| finally { setBusy(false); } | |
| }; | |
| const startNew = () => { | |
| if (busy) return; | |
| if (!st.videos.length && !st.outputs.length) return; | |
| if (!window.confirm("Xoá video & kết quả hiện tại để làm mẻ khác?")) return; | |
| track.restart({ reason: "start_new" }); | |
| set({ videos: [], forms: {}, outputs: [], selIdx: -1, job: null, outStamp: 0 }); | |
| }; | |
| const nText = (file) => (st.forms[file]?.segs || []).length; | |
| const selV = st.selIdx >= 0 ? st.videos[st.selIdx] : null; | |
| const nWithText = st.videos.filter((v) => nText(v.file) > 0).length; | |
| const vidStyle = { display: "block", margin: "0 auto", maxWidth: "100%", maxHeight: 360, width: "auto", borderRadius: 10 }; | |
| return ( | |
| <div> | |
| <div className="h1"><IcText size={22} /> Workspace: <span className="accent">Chèn chữ vào video</span></div> | |
| <p className="subtitle">Đầu vào 1 hoặc nhiều video, tự nhận dạng lời trong video (hoặc gõ tay), chèn chữ (đủ kiểu phông/màu/nền/hiển thị), làm 1 video rồi áp form cho tất cả. Vào bao nhiêu ra bấy nhiêu.</p> | |
| {showNote && <CacheNote onClose={() => setShowNote(false)} />} | |
| <div className="grid-2"> | |
| <div className="stack"> | |
| {/* 1. upload */} | |
| <div className="card"> | |
| <div className="panel-title">1. Tải lên video cần chèn 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="small muted mt12" style={{ marginBottom: 6 }}> | |
| {st.videos.length} video · {nWithText} video đã có chữ. Bấm để mở/chèn chữ: | |
| </div> | |
| <div className="filelist"> | |
| {st.videos.map((v, i) => ( | |
| <div className="filerow" key={v.file} | |
| style={{ cursor: "pointer", borderColor: i === st.selIdx ? "var(--orange)" : undefined, background: i === st.selIdx ? "var(--orange-soft)" : undefined }} | |
| onClick={() => set({ selIdx: i })}> | |
| <div style={{ flex: 1, minWidth: 0 }}> | |
| <div className="fn">{i === st.selIdx ? "✏ " : ""}{v.name}</div> | |
| <div className="meta"> | |
| {(v.size / 1048576).toFixed(1)} MB | |
| {nText(v.file) > 0 && <span style={{ color: "var(--green)", fontWeight: 600 }}> · {nText(v.file)} đoạn chữ</span>} | |
| </div> | |
| </div> | |
| <button className="x" onClick={(e) => { e.stopPropagation(); removeVideo(i); }} title="Xoá">✕</button> | |
| </div> | |
| ))} | |
| </div> | |
| </> | |
| )} | |
| </div> | |
| <ProcessingOverlay busy={busy} job={job} title="Đang chèn chữ vào video…" /> | |
| {/* 2. trình chèn chữ cho video đang chọn */} | |
| {selV ? ( | |
| <SubtitleEditor | |
| key={selV.file} | |
| session={st.session} | |
| videoUrl={fileUrl(selV.url)} | |
| videoRel={selV.file} | |
| username={user} | |
| initialSegs={st.forms[selV.file]?.segs || null} | |
| initialMode={st.forms[selV.file]?.mode || null} | |
| onChange={onEditorChange(selV.file)} | |
| onFetchLines={fetchLines} | |
| onClose={null} | |
| headerExtra={ | |
| <> | |
| <span className="small muted" style={{ maxWidth: 200 }}>{selV.name}</span> | |
| {st.videos.length > 1 && ( | |
| <> | |
| <button className="btn sm" onClick={applyFormAll} | |
| title="Áp CẢ lời + kiểu + vị trí của video này cho MỌI video còn lại (khi mọi video cùng nội dung)"> | |
| ⇊ Áp cả lời + kiểu | |
| </button> | |
| <button className="btn sm" onClick={applyStyleAll} | |
| title="Chỉ áp KIỂU chữ (phông/màu/nền/vị trí), GIỮ lời riêng của từng video (khi mỗi video tự nhận dạng lời khác nhau)"> | |
| 🎨 Áp kiểu (giữ lời riêng) | |
| </button> | |
| </> | |
| )} | |
| </> | |
| } | |
| /> | |
| ) : st.videos.length > 0 ? ( | |
| <div className="card"><div className="small muted">Chọn một video ở trên để bắt đầu chèn chữ.</div></div> | |
| ) : null} | |
| {msg && ( | |
| <div className="small" style={{ | |
| padding: "8px 12px", borderRadius: 8, | |
| background: "var(--green-soft)", color: "var(--green)", fontWeight: 600, | |
| }}>{msg}</div> | |
| )} | |
| {/* 3. tạo tất cả */} | |
| {st.videos.length > 0 && ( | |
| <div className="card"> | |
| <div className="panel-title">Tạo video</div> | |
| <p className="small muted" style={{ marginTop: -6 }}> | |
| Burn chữ vào <b>{nWithText}</b> video có chữ. Mỗi video vào → một video ra. | |
| {st.videos.length > 1 && " Muốn mọi video giống nhau: chèn chữ 1 video rồi bấm “Áp form cho mọi video”."} | |
| </p> | |
| <button className="btn primary block mt8" onClick={burnAll} disabled={busy || !nWithText}> | |
| {busy ? "Đang tạo video…" : <><IcVideo size={16} /> Tạo tất cả video có chữ ({nWithText})</>} | |
| </button> | |
| </div> | |
| )} | |
| {/* kết quả */} | |
| {st.outputs.length > 0 && ( | |
| <div className="card"> | |
| <div className="flex between center" style={{ marginBottom: 10, gap: 8, flexWrap: "wrap" }}> | |
| <div className="panel-title" style={{ margin: 0 }}>Kết quả ({st.outputs.length})</div> | |
| <button className="btn sm primary" onClick={startNew} disabled={busy} | |
| title="Xoá video & kết quả hiện tại để làm mẻ khác (không cần tải lại trang)"> | |
| ＋ Làm mẻ mới | |
| </button> | |
| </div> | |
| <div style={{ marginBottom: 10 }}> | |
| <ThumbsFeedback key={st.outStamp} label="Chữ chèn vào video có đúng ý không?" /> | |
| </div> | |
| <div className="stack"> | |
| {st.outputs.map((o) => { | |
| const bust = st.outStamp ? `?v=${st.outStamp}` : ""; | |
| return ( | |
| <div key={o.video_url} style={{ border: "1px solid var(--line)", borderRadius: 12, padding: 14 }}> | |
| <div className="flex between center" style={{ marginBottom: 10 }}> | |
| <b className="small">{o.srcName}</b> | |
| <span className="badge done"><span className="dot" /> đã chèn chữ</span> | |
| </div> | |
| <div className="row wrap"> | |
| {o.srcUrl && ( | |
| <div style={{ flex: 1, minWidth: 220 }}> | |
| <div className="small muted" style={{ marginBottom: 6 }}>Trước (gốc)</div> | |
| <video src={fileUrl(o.srcUrl)} controls style={vidStyle} /> | |
| </div> | |
| )} | |
| <div style={{ flex: 1, minWidth: 220 }}> | |
| <div className="small muted" style={{ marginBottom: 6 }}>Sau (đã chèn chữ)</div> | |
| <video key={fileUrl(o.video_url) + bust} src={fileUrl(o.video_url) + bust} controls style={vidStyle} /> | |
| </div> | |
| </div> | |
| <div className="flex gap8 mt12" style={{ flexWrap: "wrap" }}> | |
| <a className="btn sm" href={fileUrl(o.video_url)} download | |
| onClick={() => track.output("mp4", { count: 1 })}><IcDownload size={14} /> Tải video MP4</a> | |
| </div> | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| <ProcessRail steps={STEPS} tip="Chèn chữ dùng chung bộ công cụ với “Dịch / đổi giọng”: đủ phông tiếng Việt, 11 kiểu nền, 3 kiểu hiển thị (cả câu / hiện dần / highlight). Kéo tay trái–phải đổi bề rộng, trên–dưới đổi cỡ chữ. Xem trước khớp 100% khi tạm dừng." /> | |
| </div> | |
| </div> | |
| ); | |
| } | |