Upload 7 files

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.11-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PORT=7860 \
+    WHISPER_MODEL_SIZE=small \
+    MAX_UPLOAD_MB=250 \
+    KEEP_HOURS=24
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ffmpeg \
+    fonts-dejavu-core \
+    fontconfig \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+EXPOSE 7860
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,835 @@
+import json
+import os
+import shutil
+import subprocess
+import threading
+import uuid
+from datetime import datetime, timedelta
+from pathlib import Path
+from typing import List, Optional
+
+from fastapi import FastAPI, File, Form, HTTPException, Request, UploadFile
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from faster_whisper import WhisperModel
+from pydantic import BaseModel, Field
+
+
+APP_DIR = Path(__file__).resolve().parent
+WORK_DIR = APP_DIR / "workspace"
+TEMPLATES_DIR = APP_DIR / "templates"
+STATIC_DIR = APP_DIR / "static"
+FONTS_DIR = APP_DIR / "fonts"
+WORK_DIR.mkdir(parents=True, exist_ok=True)
+FONTS_DIR.mkdir(parents=True, exist_ok=True)
+
+
+app = FastAPI(title="Viet AutoSub Editor")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+templates = Jinja2Templates(directory=str(TEMPLATES_DIR))
+
+
+MODEL_LOCK = threading.Lock()
+MODEL_CACHE = {}
+DEFAULT_MODEL_SIZE = os.getenv("WHISPER_MODEL_SIZE", "small")
+MAX_UPLOAD_MB = int(os.getenv("MAX_UPLOAD_MB", "250"))
+KEEP_HOURS = int(os.getenv("KEEP_HOURS", "24"))
+FFMPEG_TIMEOUT = int(os.getenv("FFMPEG_TIMEOUT", "600"))  # seconds
+
+# ============================================================
+#  FONT MANAGEMENT — download Google Fonts cho ffmpeg
+# ============================================================
+
+GOOGLE_FONT_URLS = {
+    "Bangers": "https://fonts.google.com/download?family=Bangers",
+    "Bebas Neue": "https://fonts.google.com/download?family=Bebas+Neue",
+    "Lobster": "https://fonts.google.com/download?family=Lobster",
+    "Permanent Marker": "https://fonts.google.com/download?family=Permanent+Marker",
+    "Pacifico": "https://fonts.google.com/download?family=Pacifico",
+    "Dancing Script": "https://fonts.google.com/download?family=Dancing+Script",
+    "Playfair Display": "https://fonts.google.com/download?family=Playfair+Display",
+}
+
+# Map font name → tên file TTF/OTF thực tế bên trong zip
+FONT_FILE_MAP = {
+    "Bangers": "Bangers-Regular.ttf",
+    "Bebas Neue": "BebasNeue-Regular.ttf",
+    "Lobster": "Lobster-Regular.ttf",
+    "Permanent Marker": "PermanentMarker-Regular.ttf",
+    "Pacifico": "Pacifico-Regular.ttf",
+    "Dancing Script": "DancingScript-Regular.ttf",
+    "Playfair Display": "PlayfairDisplay-Regular.ttf",
+}
+
+
+def ensure_font_available(font_name: str) -> str:
+    """
+    Đảm bảo font có sẵn cho FFmpeg.
+    Trả về tên font mà FFmpeg sẽ dùng.
+    Nếu không tải được, fallback về DejaVu Sans.
+    """
+    if font_name == "DejaVu Sans" or font_name not in FONT_FILE_MAP:
+        return "DejaVu Sans"
+
+    ttf_name = FONT_FILE_MAP[font_name]
+    # Kiểm tra font đã cài chưa (trong /usr/share/fonts hoặc ~/.fonts)
+    user_fonts_dir = Path.home() / ".fonts"
+    user_fonts_dir.mkdir(parents=True, exist_ok=True)
+    target = user_fonts_dir / ttf_name
+
+    if target.exists():
+        return font_name
+
+    # Thử tải font từ Google Fonts
+    try:
+        import zipfile
+        import io
+        import urllib.request
+
+        url = GOOGLE_FONT_URLS.get(font_name)
+        if not url:
+            return "DejaVu Sans"
+
+        req = urllib.request.Request(url, headers={"User-Agent": "Mozilla/5.0"})
+        with urllib.request.urlopen(req, timeout=30) as resp:
+            data = resp.read()
+
+        with zipfile.ZipFile(io.BytesIO(data)) as zf:
+            # Tìm file TTF/OTF phù hợp
+            for name in zf.namelist():
+                basename = Path(name).name
+                if basename.lower().endswith((".ttf", ".otf")):
+                    extracted = zf.read(name)
+                    dest = user_fonts_dir / basename
+                    dest.write_bytes(extracted)
+
+        # Cập nhật font cache
+        subprocess.run(["fc-cache", "-f", str(user_fonts_dir)],
+                       capture_output=True, timeout=30)
+
+        if target.exists() or any(user_fonts_dir.glob(f"*{font_name.replace(' ', '')}*")):
+            return font_name
+    except Exception as e:
+        print(f"[FONT] Không tải được font '{font_name}': {e}")
+
+    return "DejaVu Sans"
+
+
+class SegmentIn(BaseModel):
+    id: int
+    start: str
+    end: str
+    text: str = Field(default="")
+
+
+class SubtitleStyle(BaseModel):
+    font_name: str = "DejaVu Sans"
+    font_color: str = "#FFFFFF"          # Hex color for text
+    highlight_color: str = "#FFD700"     # Hex color for karaoke highlight
+    outline_color: str = "#000000"       # Hex color for outline
+    outline_width: int = 2               # Outline thickness (px)
+    font_size_pct: int = 100             # Font size percentage (50-200)
+    position_pct: int = 90               # Vertical position 0=top, 100=bottom
+    karaoke_mode: bool = False           # Word-by-word karaoke highlight
+
+
+class ExportRequest(BaseModel):
+    job_id: str
+    segments: List[SegmentIn]
+    burn_in: bool = True
+    style: Optional[SubtitleStyle] = None
+
+
+class SegmentOut(BaseModel):
+    id: int
+    start: float
+    end: float
+    text: str
+
+
+
+def cleanup_old_jobs() -> None:
+    cutoff = datetime.utcnow() - timedelta(hours=KEEP_HOURS)
+    for folder in WORK_DIR.iterdir():
+        if not folder.is_dir():
+            continue
+        try:
+            modified = datetime.utcfromtimestamp(folder.stat().st_mtime)
+            if modified < cutoff:
+                shutil.rmtree(folder, ignore_errors=True)
+        except Exception:
+            continue
+
+
+
+def get_model(model_size: str = DEFAULT_MODEL_SIZE) -> WhisperModel:
+    with MODEL_LOCK:
+        if model_size not in MODEL_CACHE:
+            MODEL_CACHE[model_size] = WhisperModel(
+                model_size,
+                device="cpu",
+                compute_type="int8",
+            )
+        return MODEL_CACHE[model_size]
+
+
+
+def ffmpeg_exists() -> bool:
+    return shutil.which("ffmpeg") is not None and shutil.which("ffprobe") is not None
+
+
+
+def save_upload(upload: UploadFile, target_dir: Path) -> Path:
+    suffix = Path(upload.filename or "video.mp4").suffix or ".mp4"
+    video_path = target_dir / f"source{suffix}"
+    with video_path.open("wb") as f:
+        while True:
+            chunk = upload.file.read(1024 * 1024)
+            if not chunk:
+                break
+            f.write(chunk)
+            if f.tell() > MAX_UPLOAD_MB * 1024 * 1024:
+                raise HTTPException(status_code=413, detail=f"File quá lớn. Giới hạn {MAX_UPLOAD_MB} MB.")
+    return video_path
+
+
+
+def run_ffprobe_duration(video_path: Path) -> Optional[float]:
+    try:
+        cmd = [
+            "ffprobe",
+            "-v",
+            "error",
+            "-show_entries",
+            "format=duration",
+            "-of",
+            "default=noprint_wrappers=1:nokey=1",
+            str(video_path),
+        ]
+        result = subprocess.run(cmd, capture_output=True, text=True, check=True)
+        return float(result.stdout.strip())
+    except Exception:
+        return None
+
+
+# ============================================================
+#  TRANSCRIPTION — 2 chế độ: "music" (lời bài hát) và "speech" (giọng nói)
+# ============================================================
+
+def merge_segments_music(raw_segments: list, max_gap: float = 0.8, max_len: float = 8.0) -> list:
+    """
+    Gộp các segment ngắn liên tiếp thành câu dài hơn, phù hợp lời bài hát.
+    - max_gap: khoảng trống tối đa giữa 2 segment để gộp (giây)
+    - max_len: độ dài tối đa 1 segment sau gộp (giây)
+    """
+    if not raw_segments:
+        return []
+
+    merged = []
+    current = {
+        "start": raw_segments[0]["start"],
+        "end": raw_segments[0]["end"],
+        "text": raw_segments[0]["text"],
+    }
+
+    for seg in raw_segments[1:]:
+        gap = seg["start"] - current["end"]
+        new_duration = seg["end"] - current["start"]
+
+        # Gộp nếu: khoảng trống nhỏ VÀ tổng thời lượng không quá dài
+        if gap <= max_gap and new_duration <= max_len:
+            current["end"] = seg["end"]
+            current["text"] = current["text"] + " " + seg["text"]
+        else:
+            merged.append(current)
+            current = {
+                "start": seg["start"],
+                "end": seg["end"],
+                "text": seg["text"],
+            }
+
+    merged.append(current)
+    return merged
+
+
+def fill_timeline_gaps(segments: list, total_duration: Optional[float] = None, min_gap: float = 0.3) -> list:
+    """
+    Lấp khoảng trống lớn giữa các segment.
+    Nếu khoảng trống > min_gap, điều chỉnh end/start của segment kề cho liền mạch.
+    Giúp subtitle phủ toàn bộ timeline video.
+    """
+    if not segments:
+        return segments
+
+    result = []
+    for i, seg in enumerate(segments):
+        s = dict(seg)
+
+        # Kéo start sớm hơn để lấp gap phía trước
+        if i > 0:
+            prev_end = result[-1]["end"]
+            gap = s["start"] - prev_end
+            if 0 < gap <= 1.5:
+                # Gap nhỏ: kéo start segment hiện tại lùi lại
+                s["start"] = prev_end
+            elif gap > 1.5:
+                # Gap lớn: kéo end segment trước ra + kéo start hiện tại lùi
+                half = gap / 2
+                result[-1]["end"] = prev_end + min(half, 0.5)
+                s["start"] = s["start"] - min(half, 0.5)
+
+        result.append(s)
+
+    # Xử lý end của segment cuối nếu có total_duration
+    if total_duration and result:
+        last = result[-1]
+        remaining = total_duration - last["end"]
+        if 0 < remaining <= 2.0:
+            last["end"] = total_duration
+
+    return result
+
+
+def transcribe_video_music(video_path: Path, duration: Optional[float] = None,
+                           model_size: str = DEFAULT_MODEL_SIZE) -> List[SegmentOut]:
+    """
+    Chế độ LỜI BÀI HÁT: tối ưu để nhận diện toàn bộ lyrics.
+    - Tắt VAD filter (không cắt đoạn nhạc nền)
+    - Tăng beam_size cho accuracy
+    - Bật word_timestamps cho khớp chính xác
+    - Gộp segment thông minh
+    - Lấp khoảng trống timeline
+    """
+    model = get_model(model_size)
+
+    segments, info = model.transcribe(
+        str(video_path),
+        language="vi",
+        vad_filter=False,           # QUAN TRỌNG: tắt VAD để không bỏ sót lời hát
+        beam_size=8,                # Tăng beam cho accuracy lời bài hát
+        best_of=5,                  # Sample nhiều hơn, chọn tốt nhất
+        patience=1.5,               # Kiên nhẫn hơn khi decode
+        condition_on_previous_text=True,
+        word_timestamps=True,       # Timestamp cấp từ → khớp chính xác
+        no_speech_threshold=0.3,    # Hạ threshold → ít bỏ sót đoạn hát nhỏ
+        log_prob_threshold=-1.5,    # Chấp nhận xác suất thấp hơn (lời hát khó nghe)
+        compression_ratio_threshold=2.8,  # Nới ngưỡng nén → ít reject segment
+    )
+
+    raw: list = []
+    for seg in segments:
+        text = (seg.text or "").strip()
+        if not text:
+            continue
+        raw.append({
+            "start": float(seg.start),
+            "end": float(seg.end),
+            "text": text,
+        })
+
+    if not raw:
+        raise HTTPException(status_code=400, detail="Không nhận diện được lời thoại/lời hát trong video.")
+
+    # Gộp segment ngắn thành câu lời bài hát tự nhiên
+    merged = merge_segments_music(raw, max_gap=0.8, max_len=8.0)
+
+    # Lấp khoảng trống timeline
+    filled = fill_timeline_gaps(merged, total_duration=duration)
+
+    rows: List[SegmentOut] = []
+    for idx, seg in enumerate(filled, start=1):
+        rows.append(SegmentOut(
+            id=idx,
+            start=seg["start"],
+            end=seg["end"],
+            text=seg["text"],
+        ))
+
+    return rows
+
+
+def transcribe_video_speech(video_path: Path, model_size: str = DEFAULT_MODEL_SIZE) -> List[SegmentOut]:
+    """
+    Chế độ GIỌNG NÓI: giữ nguyên logic cũ, tối ưu cho lời thoại/thuyết trình.
+    - Bật VAD filter (lọc tiếng ồn)
+    - beam_size vừa phải
+    """
+    model = get_model(model_size)
+    segments, _info = model.transcribe(
+        str(video_path),
+        language="vi",
+        vad_filter=True,
+        beam_size=5,
+        condition_on_previous_text=True,
+    )
+    rows: List[SegmentOut] = []
+    for idx, seg in enumerate(segments, start=1):
+        text = (seg.text or "").strip()
+        if not text:
+            continue
+        rows.append(
+            SegmentOut(
+                id=idx,
+                start=float(seg.start),
+                end=float(seg.end),
+                text=text,
+            )
+        )
+    if not rows:
+        raise HTTPException(status_code=400, detail="Không nhận diện được lời thoại trong video.")
+    return rows
+
+
+
+def format_srt_time(seconds: float) -> str:
+    total_ms = max(0, int(round(seconds * 1000)))
+    hours = total_ms // 3600000
+    total_ms %= 3600000
+    minutes = total_ms // 60000
+    total_ms %= 60000
+    secs = total_ms // 1000
+    millis = total_ms % 1000
+    return f"{hours:02d}:{minutes:02d}:{secs:02d},{millis:03d}"
+
+
+
+def parse_time_string(value: str) -> float:
+    value = value.strip()
+    if not value:
+        return 0.0
+    value = value.replace(".", ",")
+    try:
+        hhmmss, ms = value.split(",") if "," in value else (value, "0")
+        parts = hhmmss.split(":")
+        if len(parts) == 2:
+            hours = 0
+            minutes, secs = parts
+        elif len(parts) == 3:
+            hours, minutes, secs = parts
+        else:
+            raise ValueError
+        return int(hours) * 3600 + int(minutes) * 60 + int(secs) + int(ms.ljust(3, "0")[:3]) / 1000.0
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=f"Sai định dạng thời gian: {value}") from exc
+
+
+
+def write_srt(job_dir: Path, segments: List[SegmentIn]) -> Path:
+    srt_path = job_dir / "edited.srt"
+    lines: List[str] = []
+    cleaned = sorted(segments, key=lambda s: parse_time_string(s.start))
+    for idx, seg in enumerate(cleaned, start=1):
+        start_sec = parse_time_string(seg.start)
+        end_sec = parse_time_string(seg.end)
+        if end_sec <= start_sec:
+            end_sec = start_sec + 1.0
+        text = (seg.text or "").strip()
+        if not text:
+            continue
+        lines.extend(
+            [
+                str(idx),
+                f"{format_srt_time(start_sec)} --> {format_srt_time(end_sec)}",
+                text,
+                "",
+            ]
+        )
+    if not lines:
+        raise HTTPException(status_code=400, detail="Không có subtitle hợp lệ để xuất SRT.")
+    srt_path.write_text("\n".join(lines), encoding="utf-8")
+    return srt_path
+
+
+
+def hex_to_ass_color(hex_color: str) -> str:
+    """
+    Chuyển đổi hex color (#RRGGBB) thành ASS color (&HBBGGRR&).
+    ASS dùng format BGR ngược lại.
+    """
+    h = hex_color.lstrip("#")
+    if len(h) != 6:
+        h = "FFFFFF"  # fallback white
+    r, g, b = h[0:2], h[2:4], h[4:6]
+    return f"&H00{b.upper()}{g.upper()}{r.upper()}&"
+
+
+def build_force_style(style: Optional["SubtitleStyle"] = None) -> str:
+    """
+    Tạo chuỗi force_style cho FFmpeg subtitles filter dựa trên SubtitleStyle.
+    """
+    if style is None:
+        return "FontName=DejaVu Sans,FontSize=20,Outline=1,Shadow=0,MarginV=18,Alignment=2"
+
+    # Font name — dùng font_name gửi từ frontend
+    font_name = style.font_name or "DejaVu Sans"
+
+    # Font size: base 20, scale theo pct
+    base_size = 20
+    font_size = max(10, int(base_size * style.font_size_pct / 100))
+
+    # Colors (ASS format)
+    primary_color = hex_to_ass_color(style.font_color)
+    outline_color = hex_to_ass_color(style.outline_color)
+
+    # Outline width
+    outline = max(0, min(6, style.outline_width))
+
+    # MarginV: convert position_pct (0=top, 100=bottom)
+    # ASS MarginV: khoảng cách từ cạnh (lớn = xa cạnh dưới hơn = lên cao hơn)
+    # position_pct 90 = gần đáy → MarginV nhỏ
+    # position_pct 10 = gần đỉnh → MarginV lớn
+    # Quy đổi: MarginV = (100 - position_pct) * 3, clamp 5..280
+    margin_v = max(5, min(280, int((100 - style.position_pct) * 3)))
+
+    # Alignment: 2 = bottom center (mặc định phụ đề)
+    # Nếu position < 50, dùng alignment 8 (top center)
+    alignment = 8 if style.position_pct < 40 else 2
+
+    parts = [
+        f"FontName={font_name}",
+        f"FontSize={font_size}",
+        f"PrimaryColour={primary_color}",
+        f"OutlineColour={outline_color}",
+        f"Outline={outline}",
+        f"Shadow=0",
+        f"MarginV={margin_v}",
+        f"Alignment={alignment}",
+        f"Bold=1",
+    ]
+    return ",".join(parts)
+
+
+def write_ass_karaoke(job_dir: Path, segments: List["SegmentIn"], style: Optional["SubtitleStyle"] = None, resolved_font: Optional[str] = None) -> Path:
+    """
+    Tạo file ASS với karaoke word-by-word highlight (\kf tags).
+    Mỗi từ được highlight lần lượt theo thời gian segment.
+    resolved_font: tên font thực tế đã được ensure_font_available() kiểm tra.
+    """
+    ass_path = job_dir / "karaoke.ass"
+    s = style or SubtitleStyle()
+
+    # Ưu tiên resolved_font (font đã kiểm tra tồn tại), fallback về s.font_name
+    font_name = resolved_font or s.font_name or "DejaVu Sans"
+    base_size = 20
+    font_size = max(10, int(base_size * s.font_size_pct / 100))
+    primary_color = hex_to_ass_color(s.font_color)
+    highlight_color = hex_to_ass_color(s.highlight_color)
+    outline_color = hex_to_ass_color(s.outline_color)
+    outline = max(0, min(6, s.outline_width))
+    margin_v = max(5, min(280, int((100 - s.position_pct) * 3)))
+    alignment = 8 if s.position_pct < 40 else 2
+
+    header = f"""[Script Info]
+Title: Viet AutoSub Karaoke
+ScriptType: v4.00+
+PlayResX: 1280
+PlayResY: 720
+ScaledBorderAndShadow: yes
+
+[V4+ Styles]
+Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
+Style: Default,{font_name},{font_size},{primary_color},{highlight_color},{outline_color},&H80000000&,1,0,0,0,100,100,0,0,1,{outline},0,{alignment},20,20,{margin_v},1
+
+[Events]
+Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
+"""
+    lines_out: List[str] = [header.strip()]
+
+    cleaned = sorted(segments, key=lambda seg: parse_time_string(seg.start))
+    for seg in cleaned:
+        text = (seg.text or "").strip()
+        if not text:
+            continue
+
+        start_sec = parse_time_string(seg.start)
+        end_sec = parse_time_string(seg.end)
+        if end_sec <= start_sec:
+            end_sec = start_sec + 1.0
+
+        # ASS time format: H:MM:SS.cc
+        def sec_to_ass(seconds: float) -> str:
+            total_cs = max(0, int(round(seconds * 100)))
+            h = total_cs // 360000
+            total_cs %= 360000
+            m = total_cs // 6000
+            total_cs %= 6000
+            ss = total_cs // 100
+            cs = total_cs % 100
+            return f"{h}:{m:02d}:{ss:02d}.{cs:02d}"
+
+        ass_start = sec_to_ass(start_sec)
+        ass_end = sec_to_ass(end_sec)
+
+        # Split text into words, distribute time evenly
+        words = text.split()
+        if not words:
+            continue
+
+        duration_cs = max(1, int(round((end_sec - start_sec) * 100)))
+        per_word_cs = max(1, duration_cs // len(words))
+
+        # Build karaoke text with \kf tags
+        # \kf = smooth fill karaoke effect
+        karaoke_parts = []
+        for word in words:
+            karaoke_parts.append(f"{{\\kf{per_word_cs}}}{word}")
+
+        karaoke_text = " ".join(karaoke_parts)
+        # Override highlight color for karaoke fill: use SecondaryColour via \1c for filled portion
+        # Use \K (uppercase) style coloring: {\1c&highlight&} before karaoke
+        color_override = f"{{\\1c{highlight_color}}}"
+        line = f"Dialogue: 0,{ass_start},{ass_end},Default,,0,0,0,,{color_override}{karaoke_text}"
+        lines_out.append(line)
+
+    ass_path.write_text("\n".join(lines_out), encoding="utf-8")
+    return ass_path
+
+
+def burn_subtitles(job_dir: Path, video_path: Path, srt_path: Path,
+                   segments: Optional[List["SegmentIn"]] = None,
+                   style: Optional["SubtitleStyle"] = None) -> Path:
+    """
+    Burn subtitle vào video bằng FFmpeg.
+    - Nếu karaoke_mode: tạo file ASS với \kf tags từ segments, rồi dùng ass= filter
+    - Nếu không: dùng subtitles= filter với SRT + force_style
+    """
+    output_path = job_dir / "output_subtitled.mp4"
+
+    # Đảm bảo font khả dụng cho FFmpeg
+    actual_font = "DejaVu Sans"
+    if style and style.font_name:
+        actual_font = ensure_font_available(style.font_name)
+        if actual_font != style.font_name:
+            print(f"[FONT] Fallback: '{style.font_name}' → '{actual_font}'")
+
+    # Xác định dùng karaoke ASS hay SRT thường
+    if style and style.karaoke_mode and segments:
+        # Tạo file ASS karaoke từ segments thực
+        write_ass_karaoke(job_dir, segments, style, resolved_font=actual_font)
+        # Dùng absolute path để tránh escaping issues
+        ass_abs = str((job_dir / "karaoke.ass").resolve()).replace("\\", "/").replace(":", r"\\:")
+        subtitle_filter = f"ass='{ass_abs}'"
+    else:
+        # Cập nhật font name trong style thành font thực tế
+        effective_style = style
+        if effective_style and effective_style.font_name != actual_font:
+            effective_style = effective_style.model_copy()
+            effective_style.font_name = actual_font
+
+        force_style = build_force_style(effective_style)
+        # Escape đường dẫn SRT cho FFmpeg filter
+        srt_abs = str(srt_path.resolve()).replace("\\", "/").replace(":", r"\\:")
+        subtitle_filter = f"subtitles='{srt_abs}':force_style='{force_style}'"
+
+    cmd = [
+        "ffmpeg",
+        "-y",
+        "-i",
+        str(video_path.resolve()),
+        "-vf",
+        subtitle_filter,
+        "-c:v",
+        "libx264",
+        "-preset",
+        "veryfast",
+        "-crf",
+        "23",
+        "-c:a",
+        "aac",
+        "-b:a",
+        "192k",
+        "-movflags",
+        "+faststart",
+        str(output_path.resolve()),
+    ]
+    try:
+        result = subprocess.run(
+            cmd,
+            cwd=str(job_dir),
+            capture_output=True,
+            text=True,
+            check=True,
+            timeout=FFMPEG_TIMEOUT,
+        )
+    except subprocess.TimeoutExpired:
+        raise HTTPException(
+            status_code=500,
+            detail=f"FFmpeg quá thời gian ({FFMPEG_TIMEOUT}s). Video có thể quá lớn."
+        )
+    except subprocess.CalledProcessError as exc:
+        stderr = (exc.stderr or "").strip()
+        # Log full error for debugging
+        print(f"[FFMPEG ERROR] cmd: {' '.join(cmd)}")
+        print(f"[FFMPEG STDERR] {stderr}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"FFmpeg lỗi khi xuất MP4: {stderr[:1200]}"
+        ) from exc
+
+    if not output_path.exists() or output_path.stat().st_size < 1000:
+        raise HTTPException(
+            status_code=500,
+            detail="FFmpeg chạy xong nhưng file MP4 bị lỗi hoặc trống."
+        )
+
+    return output_path
+
+
+
+def job_meta_path(job_dir: Path) -> Path:
+    return job_dir / "meta.json"
+
+
+
+def save_job_meta(job_dir: Path, data: dict) -> None:
+    job_meta_path(job_dir).write_text(json.dumps(data, ensure_ascii=False, indent=2), encoding="utf-8")
+
+
+
+def load_job_meta(job_id: str) -> dict:
+    meta = job_meta_path(WORK_DIR / job_id)
+    if not meta.exists():
+        raise HTTPException(status_code=404, detail="Không tìm thấy job.")
+    return json.loads(meta.read_text(encoding="utf-8"))
+
+
+@app.get("/", response_class=HTMLResponse)
+def home(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+
+@app.get("/health")
+def health():
+    return {
+        "ok": True,
+        "ffmpeg": ffmpeg_exists(),
+        "workspace": str(WORK_DIR),
+        "default_model": DEFAULT_MODEL_SIZE,
+    }
+
+
+@app.post("/api/transcribe")
+def api_transcribe(
+    file: UploadFile = File(...),
+    mode: str = Form(default="music"),
+):
+    """
+    mode: "music" (lời bài hát) hoặc "speech" (giọng nói/thuyết trình)
+    """
+    cleanup_old_jobs()
+    if not ffmpeg_exists():
+        raise HTTPException(status_code=500, detail="Máy chủ chưa có FFmpeg.")
+
+    filename = file.filename or "video.mp4"
+    if not filename.lower().endswith((".mp4", ".mov", ".mkv", ".avi", ".webm", ".m4v")):
+        raise HTTPException(status_code=400, detail="Chỉ hỗ trợ video mp4, mov, mkv, avi, webm, m4v.")
+
+    if mode not in ("music", "speech"):
+        mode = "music"
+
+    job_id = uuid.uuid4().hex
+    job_dir = WORK_DIR / job_id
+    job_dir.mkdir(parents=True, exist_ok=True)
+    try:
+        video_path = save_upload(file, job_dir)
+        duration = run_ffprobe_duration(video_path)
+
+        if mode == "music":
+            segments = transcribe_video_music(video_path, duration=duration)
+        else:
+            segments = transcribe_video_speech(video_path)
+
+        # Tính coverage: tổng thời lượng sub / tổng video
+        total_sub_time = sum(s.end - s.start for s in segments)
+        coverage_pct = round((total_sub_time / duration * 100), 1) if duration and duration > 0 else 0
+
+        save_job_meta(
+            job_dir,
+            {
+                "job_id": job_id,
+                "video_path": video_path.name,
+                "duration": duration,
+                "mode": mode,
+                "created_at": datetime.utcnow().isoformat() + "Z",
+            },
+        )
+        return JSONResponse(
+            {
+                "job_id": job_id,
+                "duration": duration,
+                "mode": mode,
+                "coverage_pct": coverage_pct,
+                "segments": [
+                    {
+                        "id": seg.id,
+                        "start": format_srt_time(seg.start),
+                        "end": format_srt_time(seg.end),
+                        "text": seg.text,
+                    }
+                    for seg in segments
+                ],
+            }
+        )
+    except Exception:
+        shutil.rmtree(job_dir, ignore_errors=True)
+        raise
+
+
+@app.post("/api/export")
+def api_export(payload: ExportRequest):
+    job_dir = WORK_DIR / payload.job_id
+    if not job_dir.exists():
+        raise HTTPException(status_code=404, detail="Job đã hết hạn hoặc không tồn tại.")
+
+    meta = load_job_meta(payload.job_id)
+    video_path = job_dir / meta["video_path"]
+    if not video_path.exists():
+        raise HTTPException(status_code=404, detail="Không tìm thấy video gốc để xuất lại.")
+
+    srt_path = write_srt(job_dir, payload.segments)
+    response = {
+        "job_id": payload.job_id,
+        "srt_url": f"/download/{payload.job_id}/srt",
+        "mp4_url": None,
+    }
+
+    if payload.burn_in:
+        # burn_subtitles xử lý cả karaoke ASS lẫn SRT thường
+        mp4_path = burn_subtitles(job_dir, video_path, srt_path,
+                                  segments=payload.segments, style=payload.style)
+        response["mp4_url"] = f"/download/{payload.job_id}/mp4"
+        response["mp4_size_mb"] = round(mp4_path.stat().st_size / (1024 * 1024), 2)
+
+    return JSONResponse(response)
+
+
+@app.get("/download/{job_id}/srt")
+def download_srt(job_id: str):
+    path = WORK_DIR / job_id / "edited.srt"
+    if not path.exists():
+        raise HTTPException(status_code=404, detail="Chưa có file SRT.")
+    return FileResponse(path, media_type="application/x-subrip", filename=f"{job_id}.srt")
+
+
+@app.get("/download/{job_id}/mp4")
+def download_mp4(job_id: str):
+    path = WORK_DIR / job_id / "output_subtitled.mp4"
+    if not path.exists():
+        raise HTTPException(status_code=404, detail="Chưa có file MP4.")
+    return FileResponse(path, media_type="video/mp4", filename=f"{job_id}.mp4")
+
+
+if __name__ == "__main__":
+    import uvicorn
+
+    port = int(os.getenv("PORT", "7860"))
+    uvicorn.run("app:app", host="0.0.0.0", port=port, reload=False)

requirements.txt

@@ -0,0 +1,6 @@
+fastapi==0.115.12
+uvicorn[standard]==0.34.0
+jinja2==3.1.6
+python-multipart==0.0.20
+requests>=2.31.0
+faster-whisper==1.1.1

static/app.js

@@ -0,0 +1,968 @@
+/* ============================================================
+   Viet AutoSub Editor – Dashboard JavaScript
+   Tương thích cả offline (file://) và online (HF Spaces)
+   Hỗ trợ 2 chế độ: Lời bài hát (music) + Giọng nói (speech)
+   ============================================================ */
+
+const state = {
+  jobId: null,
+  file: null,
+  segments: [],
+  isOnline: false,
+  mode: "music", // "music" | "speech"
+  karaokeStyle: {
+    font: "Bangers",
+    color: "#FFFFFF",
+    highlight: "#FFD700",
+    outline: "#000000",
+    outlineWidth: 2,
+    sizePct: 100,
+    positionPct: 90,
+    karaokeMode: false,
+  },
+  cvnssMode: false, // false = Vietnamese (CQN), true = CVNSS4.0
+  originalTexts: [], // store original Vietnamese texts for round-trip conversion
+  subtitlePreviewVisible: false, // track overlay state
+};
+
+/* --- Detect environment ------------------------------------ */
+const IS_FILE_PROTOCOL = window.location.protocol === "file:";
+
+function getApiBase() {
+  if (IS_FILE_PROTOCOL) return null;
+  return "";
+}
+
+/* --- DOM refs ---------------------------------------------- */
+const $ = (id) => document.getElementById(id);
+
+const els = {
+  fileInput:       $("videoFile"),
+  preview:         $("preview"),
+  videoPlaceholder:$("videoPlaceholder"),
+  status:          $("status"),
+  statusText:      $("statusText"),
+  btnTranscribe:   $("btnTranscribe"),
+  btnAddRow:       $("btnAddRow"),
+  btnExportSrt:    $("btnExportSrt"),
+  btnExportMp4:    $("btnExportMp4"),
+  btnClearFile:    $("btnClearFile"),
+  subtitleBody:    $("subtitleBody"),
+  segmentCount:    $("segmentCount"),
+  downloadSrt:     $("downloadSrt"),
+  downloadMp4:     $("downloadMp4"),
+  downloadGroup:   $("downloadGroup"),
+  dropZone:        $("dropZone"),
+  uploadPanel:     $("uploadPanel"),
+  fileInfo:        $("fileInfo"),
+  fileName:        $("fileName"),
+  fileSize:        $("fileSize"),
+  progressWrap:    $("progressWrap"),
+  progressFill:    $("progressFill"),
+  progressText:    $("progressText"),
+  // Offline banner + badge
+  offlineBanner:     $("offlineBanner"),
+  offlineBannerText: $("offlineBannerText"),
+  offlineBannerClose:$("offlineBannerClose"),
+  badgeEnv:          $("badgeEnv"),
+  badgeEnvText:      $("badgeEnvText"),
+  pulseDot:          $("pulseDot"),
+  // Mode selector
+  modeToggle:      $("modeToggle"),
+  modeMusic:       $("modeMusic"),
+  modeSpeech:      $("modeSpeech"),
+  modeHint:        $("modeHint"),
+  // Coverage
+  coverageBar:     $("coverageBar"),
+  coveragePct:     $("coveragePct"),
+  coverageFill:    $("coverageFill"),
+  // CVNSS Toggle
+  btnToggleCvnss:  $("btnToggleCvnss"),
+  cvnssToggleLabel:$("cvnssToggleLabel"),
+  // Karaoke Style
+  ksFont:          $("ksFont"),
+  ksColor:         $("ksColor"),
+  ksColorHex:      $("ksColorHex"),
+  ksHighlight:     $("ksHighlight"),
+  ksHighlightHex:  $("ksHighlightHex"),
+  ksOutline:       $("ksOutline"),
+  ksOutlineHex:    $("ksOutlineHex"),
+  ksOutlineWidth:  $("ksOutlineWidth"),
+  ksOutlineWidthVal: $("ksOutlineWidthVal"),
+  ksSize:          $("ksSize"),
+  ksSizeVal:       $("ksSizeVal"),
+  ksPosition:      $("ksPosition"),
+  ksPositionVal:   $("ksPositionVal"),
+  ksKaraokeMode:   $("ksKaraokeMode"),
+  ksKaraokeHint:   $("ksKaraokeHint"),
+  btnPreviewStyle: $("btnPreviewStyle"),
+  videoWrap:       $("videoWrap"),
+  subPreviewOverlay: $("subPreviewOverlay"),
+  subPreviewText:  $("subPreviewText"),
+};
+
+/* --- Mode selector ----------------------------------------- */
+const MODE_HINTS = {
+  music: "Tối ưu cho Vietsub lời bài hát, nhận diện toàn bộ lyrics khớp timeline.",
+  speech: "Tối ưu cho giọng nói, thuyết trình, podcast. Lọc tiếng ồn nền.",
+};
+
+function setMode(mode) {
+  state.mode = mode;
+  // Update toggle buttons
+  if (els.modeMusic) els.modeMusic.classList.toggle("active", mode === "music");
+  if (els.modeSpeech) els.modeSpeech.classList.toggle("active", mode === "speech");
+  if (els.modeHint) els.modeHint.textContent = MODE_HINTS[mode] || "";
+}
+
+// Mode toggle event listeners
+if (els.modeToggle) {
+  els.modeToggle.addEventListener("click", (e) => {
+    const btn = e.target.closest(".mode-btn");
+    if (!btn) return;
+    const mode = btn.dataset.mode;
+    if (mode) setMode(mode);
+  });
+}
+
+/* --- Coverage display -------------------------------------- */
+function showCoverage(pct) {
+  if (!els.coverageBar) return;
+  els.coverageBar.hidden = false;
+  const val = Math.min(100, Math.max(0, pct));
+  if (els.coveragePct) els.coveragePct.textContent = val + "%";
+  if (els.coverageFill) els.coverageFill.style.width = val + "%";
+
+  // Color coding
+  if (els.coverageFill) {
+    els.coverageFill.classList.remove("cov-low", "cov-mid", "cov-high");
+    if (val >= 80) els.coverageFill.classList.add("cov-high");
+    else if (val >= 50) els.coverageFill.classList.add("cov-mid");
+    else els.coverageFill.classList.add("cov-low");
+  }
+}
+
+function hideCoverage() {
+  if (els.coverageBar) els.coverageBar.hidden = true;
+}
+
+/* --- Health check ------------------------------------------ */
+let healthRetryTimer = null;
+
+async function checkHealth() {
+  if (IS_FILE_PROTOCOL) {
+    setOnlineState(false, "Offline (file://)");
+    return;
+  }
+
+  try {
+    const res = await fetch("/health", { method: "GET", cache: "no-store" });
+    if (res.ok) {
+      const data = await res.json();
+      setOnlineState(true, "HF Space");
+      if (healthRetryTimer) { clearInterval(healthRetryTimer); healthRetryTimer = null; }
+    } else {
+      setOnlineState(false, "Server lỗi");
+    }
+  } catch (_) {
+    setOnlineState(false, "Không kết nối");
+  }
+}
+
+function setOnlineState(online, label) {
+  state.isOnline = online;
+
+  if (els.badgeEnv) {
+    els.badgeEnv.classList.toggle("badge-online", online);
+    els.badgeEnv.classList.toggle("badge-offline", !online);
+  }
+  if (els.badgeEnvText) {
+    els.badgeEnvText.textContent = label || (online ? "Online" : "Offline");
+  }
+  if (els.pulseDot) {
+    els.pulseDot.className = online ? "pulse-dot pulse-online" : "pulse-dot pulse-offline";
+  }
+
+  if (!online) {
+    if (els.offlineBanner) els.offlineBanner.hidden = false;
+    if (els.offlineBannerText) {
+      els.offlineBannerText.textContent = IS_FILE_PROTOCOL
+        ? "Đang chạy offline (file://) — Bạn có thể sửa subtitle và xuất SRT. Auto sub & xuất MP4 cần deploy lên HF Space."
+        : "Không kết nối được server — Đang thử lại mỗi 30 giây...";
+    }
+    if (!IS_FILE_PROTOCOL && !healthRetryTimer) {
+      healthRetryTimer = setInterval(checkHealth, 30000);
+    }
+  } else {
+    if (els.offlineBanner) els.offlineBanner.hidden = true;
+    if (healthRetryTimer) { clearInterval(healthRetryTimer); healthRetryTimer = null; }
+  }
+}
+
+if (els.offlineBannerClose) {
+  els.offlineBannerClose.addEventListener("click", () => {
+    if (els.offlineBanner) els.offlineBanner.hidden = true;
+  });
+}
+
+/* --- Steps ------------------------------------------------- */
+function setStep(num) {
+  document.querySelectorAll(".step").forEach((el) => {
+    const s = parseInt(el.dataset.step, 10);
+    el.classList.toggle("active", s === num);
+    el.classList.toggle("done", s < num);
+  });
+}
+
+/* --- Status ------------------------------------------------ */
+function setStatus(message, type = "idle") {
+  els.status.className = `status-box status-${type}`;
+  els.statusText.textContent = message;
+}
+
+/* --- Buttons state ----------------------------------------- */
+function setEditButtons(enabled) {
+  els.btnAddRow.disabled = !enabled;
+  els.btnExportSrt.disabled = !enabled;
+  els.btnExportMp4.disabled = !enabled;
+}
+
+/* --- Download link helpers --------------------------------- */
+function showDownload(el, url, visible) {
+  el.href = visible ? url : "#";
+  el.classList.toggle("disabled", !visible);
+}
+function showDownloadGroup(show) {
+  els.downloadGroup.hidden = !show;
+}
+
+/* --- Progress simulation ----------------------------------- */
+let progressTimer = null;
+function startProgress(label) {
+  els.progressWrap.hidden = false;
+  els.progressFill.style.width = "0%";
+  els.progressText.textContent = label || "Đang xử lý...";
+
+  let pct = 0;
+  clearInterval(progressTimer);
+  progressTimer = setInterval(() => {
+    const remaining = 90 - pct;
+    const step = Math.max(0.3, remaining * 0.04);
+    pct = Math.min(90, pct + step);
+    els.progressFill.style.width = pct + "%";
+  }, 300);
+}
+function finishProgress() {
+  clearInterval(progressTimer);
+  els.progressFill.style.width = "100%";
+  setTimeout(() => {
+    els.progressWrap.hidden = true;
+    els.progressFill.style.width = "0%";
+  }, 600);
+}
+function cancelProgress() {
+  clearInterval(progressTimer);
+  els.progressWrap.hidden = true;
+  els.progressFill.style.width = "0%";
+}
+
+/* --- File size formatter ----------------------------------- */
+function formatSize(bytes) {
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+}
+
+/* --- Create table cell inputs ------------------------------ */
+function createInput(value, className) {
+  const input = document.createElement("input");
+  input.type = "text";
+  input.value = value || "";
+  input.className = className;
+  input.spellcheck = false;
+  return input;
+}
+
+function createTextArea(value) {
+  const textarea = document.createElement("textarea");
+  textarea.value = value || "";
+  textarea.rows = 2;
+  textarea.className = "text-input";
+  return textarea;
+}
+
+/* --- Collect segments from table --------------------------- */
+function collectSegmentsFromTable() {
+  const rows = Array.from(els.subtitleBody.querySelectorAll("tr[data-row='1']"));
+  return rows.map((row, index) => ({
+    id: index + 1,
+    start: row.querySelector(".start-input").value.trim(),
+    end:   row.querySelector(".end-input").value.trim(),
+    text:  row.querySelector(".text-input").value.trim(),
+  }));
+}
+
+/* --- Render table ------------------------------------------ */
+function renderTable() {
+  els.subtitleBody.innerHTML = "";
+
+  if (!state.segments.length) {
+    els.subtitleBody.innerHTML = `
+      <tr class="empty-row">
+        <td colspan="5">
+          <div class="empty-state">
+            <svg viewBox="0 0 48 48" fill="none" class="empty-icon">
+              <rect x="6" y="10" width="36" height="28" rx="4" stroke="currentColor" stroke-width="1.5"/>
+              <line x1="12" y1="20" x2="36" y2="20" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
+              <line x1="12" y1="26" x2="30" y2="26" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
+              <line x1="12" y1="32" x2="24" y2="32" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
+            </svg>
+            <p>Chưa có subtitle. Upload video rồi bấm <strong>Auto sub tiếng Việt</strong> để bắt đầu.</p>
+          </div>
+        </td>
+      </tr>`;
+    els.segmentCount.textContent = "0 dòng";
+    setEditButtons(false);
+    return;
+  }
+
+  state.segments.forEach((seg, index) => {
+    const tr = document.createElement("tr");
+    tr.dataset.row = "1";
+
+    const tdIdx = document.createElement("td");
+    tdIdx.className = "idx-cell";
+    tdIdx.textContent = String(index + 1);
+
+    const tdStart = document.createElement("td");
+    tdStart.appendChild(createInput(seg.start, "start-input time-input"));
+
+    const tdEnd = document.createElement("td");
+    tdEnd.appendChild(createInput(seg.end, "end-input time-input"));
+
+    const tdText = document.createElement("td");
+    tdText.appendChild(createTextArea(seg.text));
+
+    const tdAct = document.createElement("td");
+    tdAct.style.textAlign = "center";
+    const delBtn = document.createElement("button");
+    delBtn.className = "btn btn-danger-sm";
+    delBtn.innerHTML = `<svg viewBox="0 0 20 20" fill="currentColor" style="width:14px;height:14px"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`;
+    delBtn.title = "Xóa dòng";
+    delBtn.addEventListener("click", () => {
+      state.segments = collectSegmentsFromTable();
+      state.segments.splice(index, 1);
+      renderTable();
+    });
+    tdAct.appendChild(delBtn);
+
+    tr.append(tdIdx, tdStart, tdEnd, tdText, tdAct);
+    els.subtitleBody.appendChild(tr);
+  });
+
+  els.segmentCount.textContent = `${state.segments.length} dòng`;
+  setEditButtons(true);
+}
+
+/* --- Transcribe -------------------------------------------- */
+async function transcribeVideo() {
+  if (!state.file) {
+    setStatus("Hãy chọn video trước.", "error");
+    return;
+  }
+
+  if (!state.isOnline) {
+    setStatus(
+      IS_FILE_PROTOCOL
+        ? "Đang offline — Auto sub cần chạy trên HF Space (server). Hãy upload ứng dụng lên HF Space trước."
+        : "Server không phản hồi. Đang thử kết nối lại...",
+      "error"
+    );
+    if (!IS_FILE_PROTOCOL) checkHealth();
+    return;
+  }
+
+  const fd = new FormData();
+  fd.append("file", state.file);
+  fd.append("mode", state.mode);
+
+  els.btnTranscribe.disabled = true;
+  els.btnTranscribe.classList.add("btn-loading");
+  const modeLabel = state.mode === "music" ? "lời bài hát" : "giọng nói";
+  setStatus(`Đang nhận diện ${modeLabel} tiếng Việt...`, "loading");
+  setStep(2);
+  startProgress(`Đang upload và nhận diện ${modeLabel}...`);
+  showDownload(els.downloadSrt, "#", false);
+  showDownload(els.downloadMp4, "#", false);
+  showDownloadGroup(false);
+  hideCoverage();
+
+  try {
+    const res = await fetch("/api/transcribe", {
+      method: "POST",
+      body: fd,
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.detail || "Không thể nhận diện subtitle.");
+
+    state.jobId = data.job_id;
+    state.segments = data.segments || [];
+    renderTable();
+    finishProgress();
+
+    // Show coverage
+    if (data.coverage_pct !== undefined) {
+      showCoverage(data.coverage_pct);
+    }
+
+    const coverageInfo = data.coverage_pct ? ` (phủ ${data.coverage_pct}% timeline)` : "";
+    setStatus(`Hoàn tất. Đã tạo ${state.segments.length} dòng Vietsub${coverageInfo}.`, "success");
+    setStep(3);
+  } catch (err) {
+    cancelProgress();
+    const msg = err.message.includes("Failed to fetch")
+      ? "Mất kết nối server. Kiểm tra lại mạng hoặc server HF Space."
+      : (err.message || "Có lỗi khi auto sub.");
+    setStatus(msg, "error");
+    setStep(1);
+    checkHealth();
+  } finally {
+    els.btnTranscribe.disabled = false;
+    els.btnTranscribe.classList.remove("btn-loading");
+  }
+}
+
+/* --- Client-side SRT generation (offline-capable) ---------- */
+function generateSrtString(segments) {
+  let lines = [];
+  segments.forEach((seg, idx) => {
+    const start = seg.start || "00:00:00,000";
+    const end = seg.end || "00:00:02,000";
+    const text = (seg.text || "").trim();
+    if (!text) return;
+    lines.push(String(idx + 1));
+    lines.push(`${start} --> ${end}`);
+    lines.push(text);
+    lines.push("");
+  });
+  return lines.join("\n");
+}
+
+function downloadSrtOffline() {
+  const segments = collectSegmentsFromTable();
+  if (!segments.length) {
+    setStatus("Chưa có subtitle để xuất.", "error");
+    return;
+  }
+  const srtContent = generateSrtString(segments);
+  const blob = new Blob([srtContent], { type: "text/plain;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "subtitle.srt";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+  setStatus("Đã xuất file SRT thành công (offline).", "success");
+  setStep(4);
+}
+
+/* --- Export ------------------------------------------------- */
+async function exportResult(burnIn) {
+  if (!burnIn && (!state.isOnline || !state.jobId)) {
+    downloadSrtOffline();
+    return;
+  }
+
+  if (burnIn && !state.isOnline) {
+    setStatus(
+      IS_FILE_PROTOCOL
+        ? "Xuất MP4 burn sub cần server HF Space. Hãy deploy ứng dụng lên HF Space trước."
+        : "Server không phản hồi. Xuất MP4 cần kết nối server.",
+      "error"
+    );
+    return;
+  }
+
+  if (!state.jobId) {
+    setStatus("Chưa có job để xuất file. Hãy bấm Auto sub trước.", "error");
+    return;
+  }
+
+  const ks = getKaraokeStyle();
+  const payload = {
+    job_id: state.jobId,
+    burn_in: burnIn,
+    segments: collectSegmentsFromTable(),
+    style: {
+      font_name: ks.font,
+      font_color: ks.color,
+      highlight_color: ks.highlight,
+      outline_color: ks.outline,
+      outline_width: ks.outlineWidth,
+      font_size_pct: ks.sizePct,
+      position_pct: ks.positionPct,
+      karaoke_mode: ks.karaokeMode,
+    },
+  };
+
+  const label = burnIn ? "Đang xuất MP4 có sub..." : "Đang tạo file SRT...";
+  setStatus(label, "loading");
+  startProgress(label);
+  setStep(4);
+  els.btnExportSrt.disabled = true;
+  els.btnExportMp4.disabled = true;
+
+  try {
+    const res = await fetch("/api/export", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.detail || "Xuất file thất bại.");
+
+    finishProgress();
+    showDownloadGroup(true);
+    showDownload(els.downloadSrt, data.srt_url, true);
+    if (data.mp4_url) {
+      showDownload(els.downloadMp4, data.mp4_url, true);
+    }
+
+    const msg = burnIn
+      ? `Xuất MP4 thành công${data.mp4_size_mb ? ` (${data.mp4_size_mb} MB)` : ""}.`
+      : "Đã tạo file SRT thành công.";
+    setStatus(msg, "success");
+  } catch (err) {
+    cancelProgress();
+    const msg = err.message.includes("Failed to fetch")
+      ? "Mất kết nối server. Kiểm tra lại mạng hoặc server HF Space."
+      : (err.message || "Có lỗi khi xuất file.");
+    setStatus(msg, "error");
+    checkHealth();
+  } finally {
+    setEditButtons(true);
+  }
+}
+
+/* --- File selection ---------------------------------------- */
+function handleFile(file) {
+  if (!file) return;
+  state.file = file;
+  state.jobId = null;
+  state.segments = [];
+  renderTable();
+  showDownload(els.downloadSrt, "#", false);
+  showDownload(els.downloadMp4, "#", false);
+  showDownloadGroup(false);
+  hideCoverage();
+
+  const url = URL.createObjectURL(file);
+  els.preview.src = url;
+  els.preview.classList.add("has-src");
+  els.videoPlaceholder.classList.add("hidden");
+
+  els.fileInfo.hidden = false;
+  els.fileName.textContent = file.name;
+  els.fileSize.textContent = formatSize(file.size);
+
+  setStatus(`Đã chọn: ${file.name}`, "idle");
+  setStep(1);
+}
+
+function clearFile() {
+  state.file = null;
+  state.jobId = null;
+  state.segments = [];
+  renderTable();
+  els.preview.removeAttribute("src");
+  els.preview.classList.remove("has-src");
+  els.videoPlaceholder.classList.remove("hidden");
+  els.fileInfo.hidden = true;
+  els.fileInput.value = "";
+  showDownloadGroup(false);
+  hideCoverage();
+  setStatus("Sẵn sàng. Hãy upload video để bắt đầu.", "idle");
+  setStep(1);
+}
+
+/* --- Event listeners --------------------------------------- */
+
+els.fileInput.addEventListener("change", (e) => {
+  const [file] = e.target.files || [];
+  if (file) handleFile(file);
+});
+
+els.dropZone.addEventListener("click", () => els.fileInput.click());
+
+els.dropZone.addEventListener("dragover", (e) => {
+  e.preventDefault();
+  els.dropZone.classList.add("drag-over");
+});
+els.dropZone.addEventListener("dragleave", () => {
+  els.dropZone.classList.remove("drag-over");
+});
+els.dropZone.addEventListener("drop", (e) => {
+  e.preventDefault();
+  els.dropZone.classList.remove("drag-over");
+  const file = e.dataTransfer.files[0];
+  if (file) {
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    els.fileInput.files = dt.files;
+    handleFile(file);
+  }
+});
+
+els.btnClearFile.addEventListener("click", clearFile);
+els.btnTranscribe.addEventListener("click", transcribeVideo);
+els.btnExportSrt.addEventListener("click", () => exportResult(false));
+els.btnExportMp4.addEventListener("click", () => exportResult(true));
+
+els.btnAddRow.addEventListener("click", () => {
+  state.segments = collectSegmentsFromTable();
+  state.segments.push({
+    id: state.segments.length + 1,
+    start: "00:00:00,000",
+    end: "00:00:02,000",
+    text: "Subtitle mới",
+  });
+  renderTable();
+  const scroll = $("tableScroll");
+  if (scroll) scroll.scrollTop = scroll.scrollHeight;
+});
+
+const btnCollapse = $("btnCollapseTable");
+const tableScroll = $("tableScroll");
+if (btnCollapse && tableScroll) {
+  btnCollapse.addEventListener("click", () => {
+    const collapsed = tableScroll.style.display === "none";
+    tableScroll.style.display = collapsed ? "" : "none";
+    btnCollapse.querySelector("svg").style.transform = collapsed ? "" : "rotate(180deg)";
+  });
+}
+
+/* --- Karaoke Style ----------------------------------------- */
+
+function getKaraokeStyle() {
+  return {
+    font: els.ksFont ? els.ksFont.value : "Bangers",
+    color: els.ksColor ? els.ksColor.value : "#FFFFFF",
+    highlight: els.ksHighlight ? els.ksHighlight.value : "#FFD700",
+    outline: els.ksOutline ? els.ksOutline.value : "#000000",
+    outlineWidth: els.ksOutlineWidth ? parseInt(els.ksOutlineWidth.value, 10) : 2,
+    sizePct: els.ksSize ? parseInt(els.ksSize.value, 10) : 100,
+    positionPct: els.ksPosition ? parseInt(els.ksPosition.value, 10) : 90,
+    karaokeMode: els.ksKaraokeMode ? els.ksKaraokeMode.checked : false,
+  };
+}
+
+/* --- Parse SRT timestamp to seconds ------------------------- */
+function srtTimeToSeconds(timeStr) {
+  if (!timeStr) return 0;
+  // Format: HH:MM:SS,mmm or HH:MM:SS.mmm
+  const parts = timeStr.replace(',', '.').split(':');
+  if (parts.length !== 3) return 0;
+  const h = parseFloat(parts[0]) || 0;
+  const m = parseFloat(parts[1]) || 0;
+  const s = parseFloat(parts[2]) || 0;
+  return h * 3600 + m * 60 + s;
+}
+
+/* --- Get current subtitle text at a given time -------------- */
+function getSubtitleAtTime(currentTime) {
+  const segs = state.segments;
+  if (!segs || !segs.length) return null;
+  for (let i = 0; i < segs.length; i++) {
+    const start = srtTimeToSeconds(segs[i].start);
+    const end = srtTimeToSeconds(segs[i].end);
+    if (currentTime >= start && currentTime <= end) {
+      return { text: segs[i].text, index: i, start, end };
+    }
+  }
+  return null;
+}
+
+function updatePreviewOverlay() {
+  const ks = getKaraokeStyle();
+  state.karaokeStyle = ks;
+
+  const overlay = els.subPreviewOverlay;
+  const textEl = els.subPreviewText;
+  if (!overlay || !textEl) return;
+
+  // Position: convert 0-100% to bottom offset
+  // 0% = top (bottom: 90%), 100% = bottom (bottom: 2%)
+  const bottomPct = Math.max(2, 90 - (ks.positionPct / 100) * 88);
+  overlay.style.bottom = bottomPct + "%";
+
+  // Font
+  textEl.style.fontFamily = "'" + ks.font + "', sans-serif";
+
+  // Size: base 1.3rem * sizePct / 100
+  textEl.style.fontSize = (1.3 * ks.sizePct / 100) + "rem";
+
+  // Color
+  textEl.style.color = ks.color;
+
+  // Text shadow for outline
+  const ow = ks.outlineWidth;
+  const oc = ks.outline;
+  if (ow > 0) {
+    textEl.style.textShadow = [
+      `${ow}px ${ow}px 0 ${oc}`,
+      `-${ow}px -${ow}px 0 ${oc}`,
+      `${ow}px -${ow}px 0 ${oc}`,
+      `-${ow}px ${ow}px 0 ${oc}`,
+      `0 0 8px rgba(0,0,0,0.7)`,
+    ].join(", ");
+  } else {
+    textEl.style.textShadow = "0 0 8px rgba(0,0,0,0.7)";
+  }
+
+  // Show actual subtitle text synced to video time, or demo text if no subtitles
+  const video = els.preview;
+  const currentTime = video && video.duration ? video.currentTime : 0;
+  const activeSub = getSubtitleAtTime(currentTime);
+
+  if (activeSub && activeSub.text) {
+    // Show real subtitle content
+    if (ks.karaokeMode && activeSub.start !== undefined) {
+      // Karaoke word-by-word: highlight words progressively
+      const words = activeSub.text.split(/\s+/);
+      const duration = activeSub.end - activeSub.start;
+      const elapsed = currentTime - activeSub.start;
+      const progress = duration > 0 ? elapsed / duration : 0;
+      const highlightCount = Math.ceil(progress * words.length);
+
+      let html = '';
+      words.forEach((word, i) => {
+        if (i < highlightCount) {
+          html += '<span class="ks-word-active" style="color:' + ks.highlight + '">' + escapeHtml(word) + '</span> ';
+        } else {
+          html += escapeHtml(word) + ' ';
+        }
+      });
+      textEl.innerHTML = html.trim();
+    } else {
+      textEl.textContent = activeSub.text;
+    }
+    overlay.hidden = false;
+  } else if (state.segments.length > 0) {
+    // Has subtitles but none active at this time — hide overlay
+    textEl.textContent = '';
+    overlay.hidden = true;
+  } else {
+    // No subtitles at all — show demo text
+    if (ks.karaokeMode) {
+      textEl.innerHTML = 'Ph\u1EE5 \u0111\u1EC1 <span class="ks-word-active" style="color:' + ks.highlight + '">m\u1EABu</span> — Xem tr\u01B0\u1EDBc <span class="ks-word-active" style="color:' + ks.highlight + '">Karaoke</span>';
+    } else {
+      textEl.textContent = "Ph\u1EE5 \u0111\u1EC1 m\u1EABu — Xem tr\u01B0\u1EDBc Karaoke";
+    }
+  }
+}
+
+/* --- HTML escape helper ------------------------------------ */
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function showSubtitlePreview() {
+  state.subtitlePreviewVisible = true;
+  if (els.subPreviewOverlay) {
+    els.subPreviewOverlay.hidden = false;
+    updatePreviewOverlay();
+  }
+  startSubtitleSync();
+}
+
+function hideSubtitlePreview() {
+  state.subtitlePreviewVisible = false;
+  if (els.subPreviewOverlay) els.subPreviewOverlay.hidden = true;
+  stopSubtitleSync();
+}
+
+/* --- Live subtitle sync with video playback ----------------- */
+let subtitleSyncRAF = null;
+let lastSyncCollectTime = 0;
+
+function syncSubtitleLoop() {
+  if (!state.subtitlePreviewVisible) return;
+  // Re-collect segments from table every 500ms (not every frame, for perf)
+  const now = Date.now();
+  if (now - lastSyncCollectTime > 500) {
+    const tableSegs = collectSegmentsFromTable();
+    if (tableSegs.length) state.segments = tableSegs;
+    lastSyncCollectTime = now;
+  }
+  updatePreviewOverlay();
+  subtitleSyncRAF = requestAnimationFrame(syncSubtitleLoop);
+}
+
+function startSubtitleSync() {
+  stopSubtitleSync();
+  lastSyncCollectTime = 0;
+  subtitleSyncRAF = requestAnimationFrame(syncSubtitleLoop);
+}
+
+function stopSubtitleSync() {
+  if (subtitleSyncRAF) {
+    cancelAnimationFrame(subtitleSyncRAF);
+    subtitleSyncRAF = null;
+  }
+}
+
+// Wire up karaoke control events
+function setupKaraokeEvents() {
+  // Font selector → update preview font display
+  if (els.ksFont) {
+    els.ksFont.addEventListener("change", () => {
+      els.ksFont.style.fontFamily = "'" + els.ksFont.value + "', sans-serif";
+      updatePreviewOverlay();
+    });
+    // Set initial font display
+    els.ksFont.style.fontFamily = "'" + els.ksFont.value + "', sans-serif";
+  }
+
+  // Color pickers
+  if (els.ksColor) {
+    els.ksColor.addEventListener("input", () => {
+      if (els.ksColorHex) els.ksColorHex.textContent = els.ksColor.value.toUpperCase();
+      updatePreviewOverlay();
+    });
+  }
+  if (els.ksHighlight) {
+    els.ksHighlight.addEventListener("input", () => {
+      if (els.ksHighlightHex) els.ksHighlightHex.textContent = els.ksHighlight.value.toUpperCase();
+      updatePreviewOverlay();
+    });
+  }
+  if (els.ksOutline) {
+    els.ksOutline.addEventListener("input", () => {
+      if (els.ksOutlineHex) els.ksOutlineHex.textContent = els.ksOutline.value.toUpperCase();
+      updatePreviewOverlay();
+    });
+  }
+  if (els.ksOutlineWidth) {
+    els.ksOutlineWidth.addEventListener("input", () => {
+      if (els.ksOutlineWidthVal) els.ksOutlineWidthVal.textContent = els.ksOutlineWidth.value + "px";
+      updatePreviewOverlay();
+    });
+  }
+
+  // Size slider
+  if (els.ksSize) {
+    els.ksSize.addEventListener("input", () => {
+      if (els.ksSizeVal) els.ksSizeVal.textContent = els.ksSize.value + "%";
+      updatePreviewOverlay();
+    });
+  }
+
+  // Position slider
+  if (els.ksPosition) {
+    els.ksPosition.addEventListener("input", () => {
+      if (els.ksPositionVal) els.ksPositionVal.textContent = els.ksPosition.value + "%";
+      updatePreviewOverlay();
+    });
+  }
+
+  // Karaoke mode toggle
+  if (els.ksKaraokeMode) {
+    els.ksKaraokeMode.addEventListener("change", () => {
+      updatePreviewOverlay();
+    });
+  }
+
+  // Preview button
+  if (els.btnPreviewStyle) {
+    let previewVisible = false;
+    els.btnPreviewStyle.addEventListener("click", () => {
+      previewVisible = !previewVisible;
+      if (previewVisible) {
+        showSubtitlePreview();
+        els.btnPreviewStyle.innerHTML = '<svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd"/><path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"/></svg> Ẩn phụ đề';
+      } else {
+        hideSubtitlePreview();
+        els.btnPreviewStyle.innerHTML = '<svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg> Xem trước phụ đề';
+      }
+    });
+  }
+}
+
+/* --- CVNSS4.0 Toggle --------------------------------------- */
+
+function toggleCvnss() {
+  if (typeof CVNSSConverter === 'undefined') {
+    setStatus('Th\u01B0 vi\u1EC7n CVNSS4.0 ch\u01B0a \u0111\u01B0\u1EE3c t\u1EA3i. Vui l\u00F2ng refresh trang.', 'error');
+    return;
+  }
+
+  // Collect current table data
+  state.segments = collectSegmentsFromTable();
+
+  if (!state.segments.length) {
+    setStatus('Ch\u01B0a c\u00F3 subtitle \u0111\u1EC3 chuy\u1EC3n \u0111\u1ED5i.', 'error');
+    return;
+  }
+
+  if (!state.cvnssMode) {
+    // Vietnamese → CVNSS4.0
+    // Save originals for round-trip
+    state.originalTexts = state.segments.map(s => s.text);
+    state.segments = state.segments.map(seg => {
+      try {
+        const result = CVNSSConverter.convert(seg.text, 'cqn');
+        return { ...seg, text: result.cvss };
+      } catch (_) {
+        return seg;
+      }
+    });
+    state.cvnssMode = true;
+  } else {
+    // CVNSS4.0 → Vietnamese
+    // Use saved originals if available, otherwise convert back
+    if (state.originalTexts.length === state.segments.length) {
+      state.segments = state.segments.map((seg, i) => ({
+        ...seg,
+        text: state.originalTexts[i],
+      }));
+    } else {
+      // Fallback: convert from CVSS back
+      state.segments = state.segments.map(seg => {
+        try {
+          const result = CVNSSConverter.convert(seg.text, 'cvss');
+          return { ...seg, text: result.cqn };
+        } catch (_) {
+          return seg;
+        }
+      });
+    }
+    state.cvnssMode = false;
+    state.originalTexts = [];
+  }
+
+  renderTable();
+  updateCvnssUI();
+}
+
+function updateCvnssUI() {
+  const btn = els.btnToggleCvnss;
+  const label = els.cvnssToggleLabel;
+  if (btn) btn.classList.toggle('cvnss-active', state.cvnssMode);
+  if (label) label.textContent = state.cvnssMode ? 'Ti\u1EBFng Vi\u1EC7t' : 'CVNSS4.0';
+}
+
+// Wire up CVNSS toggle button
+if (els.btnToggleCvnss) {
+  els.btnToggleCvnss.addEventListener('click', toggleCvnss);
+}
+
+/* --- Init -------------------------------------------------- */
+setStep(1);
+setMode("music");
+renderTable();
+checkHealth();
+setupKaraokeEvents();
+updateCvnssUI();

static/cvnss4.0-converter.js

@@ -0,0 +1,417 @@
+const CVNSSConverter = (function () {
+  // Bảng ánh xạ ký tự đặc biệt
+  const specialChars = [
+    "`", "“", "”", "<", ">", "@", "-", ";", "=", "…", " ", ",", ".", "?", "!",
+    '"', "'", "(", ")", "[", "]", "{", "}", "%", "#", "$", "&", "_", "\\", "/",
+    "*", ":", "+", "~", "^", "|", "\r\n", "\r", "\n"
+  ];
+
+  // Bảng ánh xạ phụ âm
+  const consonants = {
+    cqn: ["ngh", "ng", "ch", "gh", "kh", "nh", "ph", "th", "tr", "gi", "qu", "b", "k", "d", "đ", "g", "h", "c", "l", "m", "n", "r", "s", "t", "v", "x"],
+    cvn: ["w", "w", "ch", "g", "k", "nh", "f", "th", "tr", "j", "q", "b", "c", "z", "d", "g", "h", "c", "l", "m", "n", "r", "s", "t", "v", "x"]
+  };
+
+  // Bảng ánh xạ nguyên âm
+  const vowels = {
+    cqn: [
+      "a", "à", "ả", "ã", "á", "ạ", "oa", "òa", "ỏa", "õa", "óa", "ọa", "oà", "oả", "oã", "oá", "oạ", "oác", "oạc", "oách", "oạch",
+      "oai", "oài", "oải", "oãi", "oái", "oại", "oao", "oào", "oảo", "oão", "oáo", "oạo", "oáp", "oạp", "oát", "oạt", "oắt", "oặt", "oắc", "oặc",
+      "oăn", "oằn", "oẳn", "oẵn", "oắn", "oặn", "oăm", "oằm", "oẳm", "oẵm", "oắm", "oặm", "oăng", "oằng", "oẳng", "oẵng", "oắng", "oặng", "oay", "oày",
+      "oảy", "oãy", "oáy", "oạy", "ác", "ạc", "ách", "ạch", "ai", "ài", "ải", "ãi", "ái", "ại", "am", "àm", "ảm", "ãm", "ám", "ạm", "an", "àn",
+      "ản", "ãn", "án", "ạn", "oan", "oàn", "oản", "oãn", "oán", "oạn", "oanh", "oành", "oảnh", "oãnh", "oánh", "oạnh", "ang", "àng", "ảng", "ãng",
+      "áng", "ạng", "oang", "oàng", "oảng", "oãng", "oáng", "oạng", "anh", "ành", "ảnh", "ãnh", "ánh", "ạnh", "ao", "ào", "ảo", "ão", "áo", "ạo",
+      "áp", "ạp", "át", "ạt", "au", "àu", "ảu", "áu", "ạu", "ay", "ày", "ảy", "ãy", "áy", "ạy", "ắc", "ặc", "ăm", "ằm", "ẳm", "ẵm", "ắm", "ặm",
+      "ăn", "ằn", "ẳn", "ẵn", "ắn", "ặn", "ăng", "ằng", "ẳng", "ẵng", "ắng", "ặng", "ắp", "ặp", "ắt", "ặt", "ấc", "ậc", "âm", "ầm", "ẩm", "ẫm",
+      "ấm", "ậm", "ân", "ần", "ẩn", "ẫn", "ấn", "ận", "âng", "ầng", "ẩng", "ẫng", "ấng", "ậng", "uân", "uần", "uẩn", "uẫn", "uấn", "uận", "uâng",
+      "uầng", "uẩng", "uẫng", "uấng", "uậng", "ấp", "ập", "ất", "ật", "uất", "uật", "âu", "ầu", "ẩu", "ẫu", "ấu", "ậu", "ây", "ầy", "ẩy", "ẫy",
+      "ấy", "ậy", "uây", "uầy", "uẩy", "uẫy", "uấy", "uậy", "e", "è", "ẻ", "ẽ", "é", "ẹ", "oe", "òe", "ỏe", "õe", "óe", "ọe", "éc", "ẹc", "em",
+      "èm", "ẻm", "ẽm", "ém", "ẹm", "en", "èn", "ẻn", "ẽn", "én", "ẹn", "oen", "oèn", "oẻn", "oẽn", "oén", "oẹn", "eng", "èng", "ẻng", "ẽng",
+      "éng", "ẹng", "eo", "èo", "ẻo", "ẽo", "éo", "ẹo", "oeo", "oèo", "oẻo", "oẽo", "oéo", "oẹo", "ép", "ẹp", "ét", "ẹt", "oét", "oẹt", "ê",
+      "ề", "ể", "ễ", "ế", "ệ", "uê", "uề", "uể", "uễ", "uế", "uệ", "ếch", "ệch", "uếch", "uệch", "êm", "ềm", "ểm", "ễm", "ếm", "ệm", "ên", "ền",
+      "ển", "ễn", "ến", "ện", "ênh", "ềnh", "ểnh", "ễnh", "ếnh", "ệnh", "uênh", "uềnh", "uểnh", "uễnh", "uếnh", "uệnh", "ếp", "ệp", "ết", "ệt",
+      "êu", "ều", "ểu", "ễu", "ếu", "ệu", "i", "ì", "ỉ", "ĩ", "í", "ị", "uy", "ùy", "ủy", "ũy", "úy", "ụy", "uỳ", "uỷ", "uỹ", "uý", "uỵ", "ia",
+      "ìa", "ỉa", "ĩa", "ía", "ịa", "uya", "íc", "ích", "ịch", "uých", "uỵch", "iếc", "iệc", "iêm", "iềm", "iểm", "iễm", "iếm", "iệm", "iên",
+      "iền", "iển", "iễn", "iến", "iện", "uyên", "uyền", "uyển", "uyễn", "uyến", "uyện", "iêng", "iềng", "iểng", "iễng", "iếng", "iệng", "iếp",
+      "iệp", "iết", "iệt", "uyết", "uyệt", "iêu", "iều", "iểu", "iễu", "iếu", "iệu", "yêt", "yệt", "yên", "yền", "yển", "yễn", "yến", "yện",
+      "yêm", "yềm", "yểm", "yễm", "yếm", "yệm", "yêng", "yềng", "yểng", "yễng", "yếng", "yệnh", "yêu", "yều", "yểu", "yễu", "yếu", "yệu", "im",
+      "ìm", "ỉm", "ĩm", "ím", "ịm", "in", "ìn", "ỉn", "ĩn", "ín", "ịn", "inh", "ình", "ỉnh", "ĩnh", "ính", "ịnh", "uynh", "uỳnh", "uỷnh", "uỹnh",
+      "uýnh", "uỵnh", "íp", "ịp", "uýp", "uỵp", "ít", "ịt", "uýt", "uỵt", "iu", "ìu", "ỉu", "ĩu", "íu", "ịu", "uyu", "uỳu", "uỷu", "uỹu", "uýu",
+      "uỵu", "uỳn", "uỷn", "uỹn", "uýn", "uỵn", "o", "ò", "ỏ", "õ", "ó", "ọ", "óc", "ọc", "oi", "òi", "ỏi", "õi", "ói", "ọi", "om", "òm", "ỏm",
+      "õm", "óm", "ọm", "on", "òn", "ỏn", "õn", "ón", "ọn", "ong", "òng", "ỏng", "õng", "óng", "ọng", "oóc", "oong", "oòng", "oỏng", "oõng",
+      "oóng", "oòng", "oọng", "óp", "ọp", "ót", "ọt", "ô", "ồ", "ổ", "ỗ", "ố", "ộ", "ốc", "ộc", "ôi", "ồi", "ổi", "ỗi", "ối", "ội", "ôm", "ồm",
+      "ổm", "ỗm", "ốm", "ộm", "ôn", "ồn", "ổn", "ỗn", "ốn", "ộn", "ông", "ồng", "ổng", "ỗng", "ống", "ộng", "ốp", "ộp", "ốt", "ột", "ơ", "ờ",
+      "ở", "ỡ", "ớ", "ợ", "ơi", "ời", "ởi", "ỡi", "ới", "ợi", "ơm", "ờm", "ởm", "ỡm", "ớm", "ợm", "ơn", "ờn", "ởn", "ỡn", "ớn", "ợn", "ơng",
+      "ờng", "ởng", "ỡng", "ớng", "ợng", "ớp", "ợp", "ớt", "ợt", "u", "ù", "ủ", "ũ", "ú", "ụ", "ua", "ùa", "ủa", "ũa", "úa", "ụa", "úc", "ục",
+      "ui", "ùi", "ủi", "ũi", "úi", "ụi", "um", "ùm", "ủm", "ũm", "úm", "ụm", "un", "ùn", "ủn", "ũn", "ún", "ụn", "ung", "ùng", "ủng", "ũng",
+      "úng", "ụng", "uơ", "uờ", "uở", "uỡ", "uớ", "uợ", "uơn", "uờn", "uởn", "uỡn", "uớn", "uợn", "uớt", "uợt", "uốc", "uộc", "uôi", "uồi", "uổi",
+      "uỗi", "uối", "uội", "uôm", "uồm", "uổm", "uỗm", "uốm", "uộm", "uôn", "uồn", "uổn", "uỗn", "uốn", "uộn", "uông", "uồng", "uổng", "uỗng",
+      "uống", "uộng", "uốt", "uột", "uốp", "uộp", "úp", "ụp", "út", "ụt", "ư", "ừ", "ử", "ữ", "ứ", "ự", "ưa", "ừa", "ửa", "ữa", "ứa", "ựa",
+      "ức", "ực", "ưi", "ừi", "ửi", "ữi", "ứi", "ựi", "ưm", "ừm", "ửm", "ữm", "ứm", "ựm", "ưn", "ừn", "ửn", "ữn", "ứn", "ựn", "ưng", "ừng",
+      "ửng", "ững", "ứng", "ựng", "ước", "ược", "ươi", "ười", "ưởi", "ưỡi", "ưới", "ượi", "ươm", "ườm", "ưởm", "ưỡm", "ướm", "ượm", "ươn",
+      "ườn", "ưởn", "ưỡn", "ướn", "ượn", "ương", "ường", "ưởng", "ưỡng", "ướng", "ượng", "ướp", "ượp", "ướt", "ượt", "ươu", "ườu", "ưởu",
+      "ưỡu", "ướu", "ượu", "ứt", "ựt", "ưu", "ừu", "ửu", "ữu", "ứu", "ựu", "y", "ỳ", "ỷ", "ỹ", "ý", "ỵ", "ỳa", "ỷa", "ỹa", "ýa", "ỵa"
+    ],
+    cvn: [
+      "a", "al", "az", "as", "aj", "ar", "oa", "oal", "oaz", "oas", "oaj", "oar", "oal", "oaz", "oas", "oaj", "oar", "osj", "osr", "oakj", "oakr",
+      "ojp", "ojl", "ojz", "ojs", "ojj", "ojr", "owp", "owl", "owz", "ows", "owj", "owr", "ofj", "ofr", "odj", "odr", "adx", "adh", "asx", "ash",
+      "alo", "alk", "alv", "alw", "alx", "alh", "avo", "avk", "avv", "avw", "avx", "avh", "azo", "azk", "azv", "azw", "azx", "azh", "ajp", "ajl",
+      "ajz", "ajs", "ajj", "ajr", "ac", "acr", "akj", "akr", "ai", "ail", "aiz", "ais", "aij", "air", "am", "aml", "amz", "ams", "amj", "amr",
+      "an", "anl", "anz", "ans", "anj", "anr", "olp", "oll", "olz", "ols", "olj", "olr", "oahp", "oahl", "oahz", "oahs", "oahj", "oahr", "agp",
+      "agl", "agz", "ags", "agj", "agr", "ozp", "ozl", "ozz", "ozs", "ozj", "ozr", "ahp", "ahl", "ahz", "ahs", "ahj", "ahr", "ao", "aol", "aoz",
+      "aos", "aoj", "aor", "ap", "apr", "at", "atr", "au", "aul", "auz", "auj", "aur", "ay", "ayl", "ayz", "ays", "ayj", "ayr", "acx", "ach",
+      "amo", "amk", "amv", "amw", "amx", "amh", "ano", "ank", "anv", "anw", "anx", "anh", "ago", "agk", "agv", "agw", "agx", "agh", "apx", "aph",
+      "atx", "ath", "acb", "acf", "amy", "amd", "amq", "amg", "amb", "amf", "any", "and", "anq", "ang", "anb", "anf", "agy", "agd", "agq", "agg",
+      "agb", "agf", "aly", "ald", "alq", "alg", "alb", "alf", "azy", "azd", "azq", "azg", "azb", "azf", "apb", "apf", "atb", "atf", "adb", "adf",
+      "auy", "aud", "auq", "aug", "aub", "auf", "ayy", "ayd", "ayq", "ayg", "ayb", "ayf", "ajy", "ajd", "ajq", "ajg", "ajb", "ajf", "e", "el",
+      "ez", "es", "ej", "er", "oe", "oel", "oez", "oes", "oej", "oer", "ec", "ecr", "em", "eml", "emz", "ems", "emj", "emr", "en", "enl", "enz",
+      "ens", "enj", "enr", "elp", "ell", "elz", "els", "elj", "elr", "egp", "egl", "egz", "egs", "egj", "egr", "eo", "eol", "eoz", "eos", "eoj",
+      "eor", "ewp", "ewl", "ewz", "ews", "ewj", "ewr", "ep", "epr", "et", "etr", "edj", "edr", "ey", "ed", "eq", "eg", "eb", "ef", "uey", "ued",
+      "ueq", "ueg", "ueb", "uef", "ekb", "ekf", "uekb", "uekf", "emy", "emd", "emq", "emg", "emb", "emf", "eny", "end", "enq", "eng", "enb", "enf",
+      "ehy", "ehd", "ehq", "ehg", "ehb", "ehf", "uehy", "uehd", "uehq", "uehg", "uehb", "uehf", "epb", "epf", "etb", "etf", "euy", "eud", "euq",
+      "eug", "eub", "euf", "i", "il", "iz", "is", "ij", "ir", "y", "yl", "yz", "ys", "yj", "yr", "yl", "yz", "ys", "yj", "yr", "ia", "ial", "iaz",
+      "ias", "iaj", "iar", "ya", "ic", "ikj", "ikr", "ykj", "ykr", "isb", "isf", "ivy", "ivd", "ivq", "ivg", "ivb", "ivf", "ily", "ild", "ilq",
+      "ilg", "ilb", "ilf", "yly", "yld", "ylq", "ylg", "ylb", "ylf", "izy", "izd", "izq", "izg", "izb", "izf", "ifb", "iff", "idb", "idf", "ydb",
+      "ydf", "iwy", "iwd", "iwq", "iwg", "iwb", "iwf", "idb", "idf", "ily", "ild", "ilq", "ilg", "ilb", "ilf", "ivy", "ivd", "ivq", "ivg", "ivb",
+      "ivf", "izy", "izd", "izq", "izg", "izb", "izf", "iwy", "iwd", "iwq", "iwg", "iwb", "iwf", "im", "iml", "imz", "ims", "imj", "imr", "in",
+      "inl", "inz", "ins", "inj", "inr", "ihp", "ihl", "ihz", "ihs", "ihj", "ihr", "yhp", "yhl", "yhz", "yhs", "yhj", "yhr", "ip", "ipr", "yp",
+      "ypr", "it", "itr", "yt", "ytr", "iu", "iul", "iuz", "ius", "iuj", "iur", "yu", "yul", "yuz", "yus", "yuj", "yur", "ynl", "ynz", "yns",
+      "ynj", "ynr", "o", "ol", "oz", "os", "oj", "or", "oc", "ocr", "oi", "oil", "oiz", "ois", "oij", "oir", "om", "oml", "omz", "oms", "omj",
+      "omr", "on", "onl", "onz", "ons", "onj", "onr", "ogp", "ogl", "ogz", "ogs", "ogj", "ogr", "ooc", "oog", "oogl", "oogz", "oogs", "oogj",
+      "oogl", "oogr", "op", "opr", "ot", "otr", "oy", "od", "oq", "og", "ob", "of", "ocb", "ocf", "oiy", "oid", "oiq", "oig", "oib", "oif",
+      "omy", "omd", "omq", "omg", "omb", "omf", "ony", "ond", "onq", "ong", "onb", "onf", "ogy", "ogd", "ogq", "ogg", "ogb", "ogf", "opb",
+      "opf", "otb", "otf", "oo", "ok", "ov", "ow", "ox", "oh", "oio", "oik", "oiv", "oiw", "oix", "oih", "omo", "omk", "omv", "omw", "omx",
+      "omh", "ono", "onk", "onv", "onw", "onx", "onh", "ogo", "ogk", "ogv", "ogw", "ogx", "ogh", "opx", "oph", "otx", "oth", "u", "ul", "uz",
+      "us", "uj", "ur", "ua", "ual", "uaz", "uas", "uaj", "uar", "uc", "ucr", "ui", "uil", "uiz", "uis", "uij", "uir", "um", "uml", "umz", "ums",
+      "umj", "umr", "un", "unl", "unz", "uns", "unj", "unr", "ugp", "ugl", "ugz", "ugs", "ugj", "ugr", "uoo", "uok", "uov", "uow", "uox", "uoh",
+      "olo", "olk", "olv", "olw", "olx", "olh", "odx", "odh", "usb", "usf", "ujy", "ujd", "ujq", "ujg", "ujb", "ujf", "uvy", "uvd", "uvq", "uvg",
+      "uvb", "uvf", "uly", "uld", "ulq", "ulg", "ulb", "ulf", "uzy", "uzd", "uzq", "uzg", "uzb", "uzf", "udb", "udf", "ufb", "uff", "up", "upr",
+      "ut", "utr", "uo", "uk", "uv", "uw", "ux", "uh", "uao", "uak", "uav", "uaw", "uax", "uah", "ucx", "uch", "uio", "uik", "uiv", "uiw", "uix",
+      "uih", "umo", "umk", "umv", "umw", "umx", "umh", "uno", "unk", "unv", "unw", "unx", "unh", "ugo", "ugk", "ugv", "ugw", "ugx", "ugh", "usx",
+      "ush", "ujo", "ujk", "ujv", "ujw", "ujx", "ujh", "uvo", "uvk", "uvv", "uvw", "uvx", "uvh", "ulo", "ulk", "ulv", "ulw", "ulx", "ulh", "uzo",
+      "uzk", "uzv", "uzw", "uzx", "uzh", "ufx", "ufh", "udx", "udh", "uwo", "uwk", "uwv", "uww", "uwx", "uwh", "utx", "uth", "uuo", "uuk", "uuv",
+      "uuw", "uux", "uuh", "i", "il", "iz", "is", "ij", "ir", "ial", "iaz", "ias", "iaj", "iar"
+    ],
+    cvss: [
+      "a", "al", "az", "as", "aj", "ar", "oa", "oal", "oaz", "oas", "oaj", "oar", "oal", "oaz", "oas", "oaj", "oar", "osj", "osr", "oakj", "oakr",
+      "ojp", "ojl", "ojz", "ojs", "ojj", "ojr", "owp", "owl", "owz", "ows", "owj", "owr", "ofj", "ofr", "odj", "odr", "adx", "adh", "asx", "ash",
+      "alo", "alk", "alv", "alw", "alx", "alh", "avo", "avk", "avv", "avw", "avx", "avh", "azo", "azk", "azv", "azw", "azx", "azh", "ajp", "ajl",
+      "ajz", "ajs", "ajj", "ajr", "ac", "acr", "akj", "akr", "ai", "ail", "aiz", "ais", "aij", "air", "am", "aml", "amz", "ams", "amj", "amr",
+      "an", "anl", "anz", "ans", "anj", "anr", "olp", "oll", "olz", "ols", "olj", "olr", "oahp", "oahl", "oahz", "oahs", "oahj", "oahr", "agp",
+      "agl", "agz", "ags", "agj", "agr", "ozp", "ozl", "ozz", "ozs", "ozj", "ozr", "ahp", "ahl", "ahz", "ahs", "ahj", "ahr", "ao", "aol", "aoz",
+      "aos", "aoj", "aor", "ap", "apr", "at", "atr", "au", "aul", "auz", "auj", "aur", "ay", "ayl", "ayz", "ays", "ayj", "ayr", "acx", "ach",
+      "amo", "amk", "amv", "amw", "amx", "amh", "ano", "ank", "anv", "anw", "anx", "anh", "ago", "agk", "agv", "agw", "agx", "agh", "apx", "aph",
+      "atx", "ath", "acb", "acf", "amy", "amd", "amq", "amg", "amb", "amf", "any", "and", "anq", "ang", "anb", "anf", "agy", "agd", "agq", "agg",
+      "agb", "agf", "aly", "ald", "alq", "alg", "alb", "alf", "azy", "azd", "azq", "azg", "azb", "azf", "apb", "apf", "atb", "atf", "adb", "adf",
+      "auy", "aud", "auq", "aug", "aub", "auf", "ayy", "ayd", "ayq", "ayg", "ayb", "ayf", "ajy", "ajd", "ajq", "ajg", "ajb", "ajf", "e", "el",
+      "ez", "es", "ej", "er", "oe", "oel", "oez", "oes", "oej", "oer", "ec", "ecr", "em", "eml", "emz", "ems", "emj", "emr", "en", "enl", "enz",
+      "ens", "enj", "enr", "elp", "ell", "elz", "els", "elj", "elr", "egp", "egl", "egz", "egs", "egj", "egr", "eo", "eol", "eoz", "eos", "eoj",
+      "eor", "ewp", "ewl", "ewz", "ews", "ewj", "ewr", "ep", "epr", "et", "etr", "edj", "edr", "ey", "ed", "eq", "eg", "eb", "ef", "uey", "ued",
+      "ueq", "ueg", "ueb", "uef", "ekb", "ekf", "uekb", "uekf", "emy", "emd", "emq", "emg", "emb", "emf", "eny", "end", "enq", "eng", "enb", "enf",
+      "ehy", "ehd", "ehq", "ehg", "ehb", "ehf", "uehy", "uehd", "uehq", "uehg", "uehb", "uehf", "epb", "epf", "etb", "etf", "euy", "eud", "euq",
+      "eug", "eub", "euf", "i", "il", "iz", "is", "ij", "ir", "y", "yl", "yz", "ys", "yj", "yr", "yl", "yz", "ys", "yj", "yr", "ia", "ial", "iaz",
+      "ias", "iaj", "iar", "ya", "ic", "ikj", "ikr", "ykj", "ykr", "isb", "isf", "ivy", "ivd", "ivq", "ivg", "ivb", "ivf", "ily", "ild", "ilq",
+      "ilg", "ilb", "ilf", "yly", "yld", "ylq", "ylg", "ylb", "ylf", "izy", "izd", "izq", "izg", "izb", "izf", "ifb", "iff", "idb", "idf", "ydb",
+      "ydf", "iwy", "iwd", "iwq", "iwg", "iwb", "iwf", "idb", "idf", "ily", "ild", "ilq", "ilg", "ilb", "ilf", "ivy", "ivd", "ivq", "ivg", "ivb",
+      "ivf", "izy", "izd", "izq", "izg", "izb", "izf", "iwy", "iwd", "iwq", "iwg", "iwb", "iwf", "im", "iml", "imz", "ims", "imj", "imr", "in",
+      "inl", "inz", "ins", "inj", "inr", "ihp", "ihl", "ihz", "ihs", "ihj", "ihr", "yhp", "yhl", "yhz", "yhs", "yhj", "yhr", "ip", "ipr", "yp",
+      "ypr", "it", "itr", "yt", "ytr", "iu", "iul", "iuz", "ius", "iuj", "iur", "yu", "yul", "yuz", "yus", "yuj", "yur", "ynl", "ynz", "yns",
+      "ynj", "ynr", "o", "ol", "oz", "os", "oj", "or", "oc", "ocr", "oi", "oil", "oiz", "ois", "oij", "oir", "om", "oml", "omz", "oms", "omj",
+      "omr", "on", "onl", "onz", "ons", "onj", "onr", "ogp", "ogl", "ogz", "ogs", "ogj", "ogr", "ooc", "oog", "oogl", "oogz", "oogs", "oogj",
+      "oogl", "oogr", "op", "opr", "ot", "otr", "oy", "od", "oq", "og", "ob", "of", "ocb", "ocf", "oiy", "oid", "oiq", "oig", "oib", "oif",
+      "omy", "omd", "omq", "omg", "omb", "omf", "ony", "ond", "onq", "ong", "onb", "onf", "ogy", "ogd", "ogq", "ogg", "ogb", "ogf", "opb",
+      "opf", "otb", "otf", "oo", "ok", "ov", "ow", "ox", "oh", "oio", "oik", "oiv", "oiw", "oix", "oih", "omo", "omk", "omv", "omw", "omx",
+      "omh", "ono", "onk", "onv", "onw", "onx", "onh", "ogo", "ogk", "ogv", "ogw", "ogx", "ogh", "opx", "oph", "otx", "oth", "u", "ul", "uz",
+      "us", "uj", "ur", "ua", "ual", "uaz", "uas", "uaj", "uar", "uc", "ucr", "ui", "uil", "uiz", "uis", "uij", "uir", "um", "uml", "umz", "ums",
+      "umj", "umr", "un", "unl", "unz", "uns", "unj", "unr", "ugp", "ugl", "ugz", "ugs", "ugj", "ugr", "uoo", "uok", "uov", "uow", "uox", "uoh",
+      "olo", "olk", "olv", "olw", "olx", "olh", "odx", "odh", "usb", "usf", "ujy", "ujd", "ujq", "ujg", "ujb", "ujf", "uvy", "uvd", "uvq", "uvg",
+      "uvb", "uvf", "uly", "uld", "ulq", "ulg", "ulb", "ulf", "uzy", "uzd", "uzq", "uzg", "uzb", "uzf", "udb", "udf", "ufb", "uff", "up", "upr",
+      "ut", "utr", "uo", "uk", "uv", "uw", "ux", "uh", "uao", "uak", "uav", "uaw", "uax", "uah", "ucx", "uch", "uio", "uik", "uiv", "uiw", "uix",
+      "uih", "umo", "umk", "umv", "umw", "umx", "umh", "uno", "unk", "unv", "unw", "unx", "unh", "ugo", "ugk", "ugv", "ugw", "ugx", "ugh", "usx",
+      "ush", "ujo", "ujk", "ujv", "ujw", "ujx", "ujh", "uvo", "uvk", "uvv", "uvw", "uvx", "uvh", "ulo", "ulk", "ulv", "ulw", "ulx", "ulh", "uzo",
+      "uzk", "uzv", "uzw", "uzx", "uzh", "ufx", "ufh", "udx", "udh", "uwo", "uwk", "uwv", "uww", "uwx", "uwh", "utx", "uth", "uuo", "uuk", "uuv",
+      "uuw", "uux", "uuh", "i", "il", "iz", "is", "ij", "ir", "ial", "iaz", "ias", "iaj", "iar"
+    ]
+  };
+
+  // Bảng ánh xạ nguyên âm cơ bản
+  const baseVowels = [
+    "aàảãáạ", "ăằẳẵắặ", "âầẩẫấậ", "eèẻẽéẹ", "êềểễếệ", "iìỉĩíị",
+    "oòỏõóọ", "ôồổỗốộ", "ơờởỡớợ", "uùủũúụ", "ưừửữứự", "yỳỷỹýỵ"
+  ];
+
+  // Bảng ánh xạ thay thế đặc biệt
+  const specialReplacements = {
+    y: "yỳỷỹýỵ",
+    i: "iìỉĩíị"
+  };
+
+  // Quy tắc điều chỉnh phụ âm
+  const consonantAdjustments = {
+    phu_am: ["ngh", "gh", "k"],
+    phu_am_chuyen_doi: ["ng", "g", "c"],
+    nguyen_am: "ieê"
+  };
+
+  // Hàm kiểm tra chữ in hoa
+  function isUpperCase(str) {
+    return /^[A-ZÀÁẢÃẠĂẰẮẲẴẶÂẦẤẨẪẬĐÈÉẺẼẸÊỀẾỂỄỆÌÍỈĨỊÒÓỎÕỌÔỒỐỔỖỘƠỜỚỞỠỢÙÚỦŨỤƯỪỨỬỮỰỲÝỶỸỴ]+$/.test(str);
+  }
+
+  // Hàm lấy nguyên âm cơ bản
+  function getBaseVowel(char) {
+    for (const vowelGroup of baseVowels) {
+      if (vowelGroup.includes(char)) return vowelGroup[0];
+    }
+    return char;
+  }
+
+  // Hàm tách chuỗi thành token
+  function splitString(str) {
+    str = str.normalize("NFC");
+    const tokens = str.split(/([\s|,|;|`|@|<|>|“|”|.|=|…|?|!|\\|'|"|(|)|[|\]|{|}|%|#|$|&|\-|_|/|*|:|+|~|^|||\r\n|\n|\r])/gm);
+    return tokens.filter(token => token !== "");
+  }
+
+  // Hàm điều chỉnh phụ âm và nguyên âm
+  function adjustConsonantVowel(cqnPad, cqnVan) {
+    const firstChar = cqnVan[0] || "";
+    if (cqnPad === "qu" && getBaseVowel(firstChar) === "u") {
+      cqnPad = "q";
+    }
+    if (!cqnPad && getBaseVowel(firstChar) === "i") {
+      cqnVan = cqnVan.replace(firstChar, specialReplacements.y[specialReplacements.i.indexOf(firstChar)]);
+    }
+    if (cqnPad === "gi" && getBaseVowel(firstChar) === "i") {
+      cqnPad = "g";
+    }
+    if (consonantAdjustments.phu_am.includes(cqnPad) && !consonantAdjustments.nguyen_am.includes(getBaseVowel(firstChar))) {
+      cqnPad = consonantAdjustments.phu_am_chuyen_doi[consonantAdjustments.phu_am.indexOf(cqnPad)];
+    }
+    return { cqnPad, cqnVan };
+  }
+
+  // Hàm chuyển từ CQN sang CVN và CVSS
+  function cqnToCvnAndCvss(word) {
+    const lowerWord = word.toLowerCase();
+    let consonant = "", vowelPart = lowerWord, cvnConsonant = "", cqnResult = "", cvnResult = "", cvssResult = "";
+    
+    // Tìm phụ âm
+    for (const c of consonants.cqn) {
+      if (lowerWord.startsWith(c)) {
+        consonant = c;
+        vowelPart = lowerWord.replace(c, "");
+        break;
+      }
+    }
+
+    // Điều chỉnh đặc biệt
+    if (consonant === "gi" && vowelPart !== "a" && vowels.cqn.includes("i" + vowelPart)) {
+      vowelPart = "i" + vowelPart;
+    }
+    if (consonant === "qu" && getBaseVowel(vowelPart[0]) === "y") {
+      vowelPart = "u" + vowelPart;
+    }
+    if (consonant === "g" && getBaseVowel(vowelPart[0]) === "i") {
+      consonant = "gi";
+    }
+
+    // Ánh xạ phụ âm
+    cvnConsonant = consonants.cqn.includes(consonant) ? consonants.cvn[consonants.cqn.indexOf(consonant)] : consonant;
+
+    // Ánh xạ nguyên âm
+    const vowelIndex = vowels.cqn.indexOf(vowelPart);
+    if (vowelIndex !== -1) {
+      cqnResult = vowelPart;
+      cvnResult = vowels.cvn[vowelIndex];
+      cvssResult = vowels.cvss[vowelIndex];
+    } else {
+      cqnResult = vowelPart;
+      cvnResult = vowelPart;
+      cvssResult = vowelPart;
+    }
+
+    // Kết hợp kết quả
+    let cvnOutput = cvnConsonant + cvnResult;
+    let cvssOutput = cvnConsonant + cvssResult;
+
+    // Xử lý chữ hoa
+    if (word[0] !== word[0].toLowerCase()) {
+      if (cqnResult.length) cqnResult = cqnResult[0].toUpperCase() + cqnResult.slice(1);
+      if (cvnOutput.length) cvnOutput = cvnOutput[0].toUpperCase() + cvnOutput.slice(1);
+      if (cvssOutput.length) cvssOutput = cvssOutput[0].toUpperCase() + cvssOutput.slice(1);
+    }
+    if (isUpperCase(word)) {
+      cqnResult = cqnResult.toUpperCase();
+      cvnOutput = cvnOutput.toUpperCase();
+      cvssOutput = cvssOutput.toUpperCase();
+    }
+
+    return { cqn: cqnResult, cvn: cvnOutput, cvss: cvssOutput };
+  }
+
+  // Hàm chuyển từ CVN sang CQN và CVSS
+  function cvnToCqnAndCvss(word) {
+    const lowerWord = word.toLowerCase();
+    let consonant = "", vowelPart = lowerWord, cqnConsonant = "", cqnResult = "", cvnResult = "", cvssResult = "";
+
+    // Tìm phụ âm
+    for (const c of consonants.cvn) {
+      if (lowerWord.startsWith(c)) {
+        consonant = c;
+        cqnConsonant = consonants.cqn[consonants.cvn.indexOf(c)];
+        vowelPart = lowerWord.replace(c, "");
+        break;
+      }
+    }
+
+    // Ánh xạ nguyên âm
+    const vowelIndex = vowels.cvn.indexOf(vowelPart);
+    if (vowelIndex !== -1) {
+      cqnResult = vowels.cqn[vowelIndex];
+      cvnResult = vowelPart;
+      cvssResult = vowels.cvss[vowelIndex];
+    } else {
+      cqnResult = vowelPart;
+      cvnResult = vowelPart;
+      cvssResult = vowelPart;
+    }
+
+    // Điều chỉnh đặc biệt
+    if (consonant === "j" && vowelPart === "ịa") {
+      cqnConsonant = "gi";
+      cqnResult = "ỵa";
+    }
+
+    // Điều chỉnh phụ âm và nguyên âm
+    const adjusted = adjustConsonantVowel(cqnConsonant, cqnResult);
+    cqnConsonant = adjusted.cqnPad;
+    cqnResult = adjusted.cqnVan;
+
+    // Kết hợp kết quả
+    let cqnOutput = cqnConsonant + cqnResult;
+    let cvssOutput = consonant + cvssResult;
+
+    // Xử lý chữ hoa
+    if (word[0] !== word[0].toLowerCase()) {
+      if (cqnOutput.length) cqnOutput = cqnOutput[0].toUpperCase() + cqnOutput.slice(1);
+      if (cvnResult.length) cvnResult = cvnResult[0].toUpperCase() + cvnResult.slice(1);
+      if (cvssOutput.length) cvssOutput = cvssOutput[0].toUpperCase() + cvssOutput.slice(1);
+    }
+    if (isUpperCase(word)) {
+      cqnOutput = cqnOutput.toUpperCase();
+      cvnResult = cvnResult.toUpperCase();
+      cvssOutput = cvssOutput.toUpperCase();
+    }
+
+    return { cqn: cqnOutput, cvn: cvnResult, cvss: cvssOutput };
+  }
+
+  // Hàm chuyển từ CVSS sang CQN và CVN
+  function cvssToCqnAndCvn(word) {
+    const lowerWord = word.toLowerCase();
+    let consonant = "", vowelPart = lowerWord, cqnConsonant = "", cqnResult = "", cvnResult = "", cvssResult = "";
+
+    // Tìm phụ âm
+    for (const c of consonants.cvn) {
+      if (lowerWord.startsWith(c)) {
+        consonant = c;
+        cqnConsonant = consonants.cqn[consonants.cvn.indexOf(c)];
+        vowelPart = lowerWord.replace(c, "");
+        break;
+      }
+    }
+
+    // Ánh xạ nguyên âm
+    const vowelIndex = vowels.cvss.indexOf(vowelPart);
+    if (vowelIndex !== -1) {
+      cqnResult = vowels.cqn[vowelIndex];
+      cvnResult = vowels.cvn[vowelIndex];
+      cvssResult = vowelPart;
+    } else {
+      cqnResult = vowelPart;
+      cvnResult = vowelPart;
+      cvssResult = vowelPart;
+    }
+
+    // Điều chỉnh đặc biệt
+    if (consonant === "j" && vowelPart === "iar") {
+      cqnConsonant = "gi";
+      cqnResult = "ỵa";
+    }
+    if (lowerWord === "it") {
+      cqnResult = "ít";
+    }
+    if (lowerWord === "ikj") {
+      cqnResult = "ích";
+    }
+
+    // Điều chỉnh phụ âm và nguyên âm
+    const adjusted = adjustConsonantVowel(cqnConsonant, cqnResult);
+    cqnConsonant = adjusted.cqnPad;
+    cqnResult = adjusted.cqnVan;
+
+    // Kết hợp kết quả
+    let cqnOutput = cqnConsonant + cqnResult;
+    let cvnOutput = consonant + cvnResult;
+
+    // Xử lý chữ hoa
+    if (word[0] !== word[0].toLowerCase()) {
+      if (cqnOutput.length) cqnOutput = cqnOutput[0].toUpperCase() + cqnOutput.slice(1);
+      if (cvnOutput.length) cvnOutput = cvnOutput[0].toUpperCase() + cvnOutput.slice(1);
+      if (cvssResult.length) cvssResult = cvssResult[0].toUpperCase() + cvssResult.slice(1);
+    }
+    if (isUpperCase(word)) {
+      cqnOutput = cqnOutput.toUpperCase();
+      cvnOutput = cvnOutput.toUpperCase();
+      cvssResult = cvssResult.toUpperCase();
+    }
+
+    return { cqn: cqnOutput, cvn: cvnOutput, cvss: cvssResult };
+  }
+
+  // Hàm chuyển đổi toàn bộ văn bản
+  function convertText(input, mode) {
+    const tokens = splitString(input);
+    const result = { cqn: [], cvn: [], cvss: [] };
+
+    tokens.forEach(token => {
+      if (specialChars.includes(token)) {
+        result.cqn.push(token);
+        result.cvn.push(token);
+        result.cvss.push(token);
+      } else {
+        let converted;
+        if (mode === "cqn") {
+          converted = cqnToCvnAndCvss(token);
+        } else if (mode === "cvn") {
+          converted = cvnToCqnAndCvss(token);
+        } else if (mode === "cvss") {
+          converted = cvssToCqnAndCvn(token);
+        }
+        result.cqn.push(converted.cqn);
+        result.cvn.push(converted.cvn);
+        result.cvss.push(converted.cvss);
+      }
+    });
+
+    return {
+      cqn: result.cqn.join(""),
+      cvn: result.cvn.join(""),
+      cvss: result.cvss.join("")
+    };
+  }
+
+  // Xuất module
+  return {
+    convert: convertText,
+    specialChars
+  };
+})();
+
+// Xuất module cho môi trường Node.js hoặc trình duyệt
+if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
+  module.exports = CVNSSConverter;
+} else {
+  window.CVNSSConverter = CVNSSConverter;
+}

static/styles.css

@@ -0,0 +1,1089 @@
+/* ============================================================
+   Viet AutoSub Editor – Dashboard Stylesheet
+   Dark theme — Tương thích offline + HF Spaces online
+   ============================================================ */
+
+/* --- Tokens ------------------------------------------------- */
+:root {
+  --bg-base:    #0a0e1a;
+  --bg-surface: #111827;
+  --bg-raised:  #1a2236;
+  --bg-input:   #0f1629;
+  --border:     rgba(255,255,255,0.08);
+  --border-focus: #6366f1;
+
+  --text-primary:   #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted:     #64748b;
+
+  --accent:       #6366f1;
+  --accent-hover: #818cf8;
+  --accent-glow:  rgba(99,102,241,0.25);
+
+  --success:      #10b981;
+  --success-bg:   rgba(16,185,129,0.12);
+  --danger:       #ef4444;
+  --danger-bg:    rgba(239,68,68,0.10);
+  --warning:      #f59e0b;
+  --warning-bg:   rgba(245,158,11,0.12);
+
+  --radius-sm: 8px;
+  --radius:    12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+  --shadow:    0 4px 16px rgba(0,0,0,0.35);
+  --shadow-lg: 0 12px 40px rgba(0,0,0,0.45);
+}
+
+/* --- Reset -------------------------------------------------- */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 15px; -webkit-font-smoothing: antialiased; }
+body {
+  font-family: var(--font-sans);
+  background: var(--bg-base);
+  color: var(--text-primary);
+  min-height: 100vh;
+  line-height: 1.55;
+}
+
+/* --- Offline Banner ----------------------------------------- */
+.offline-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  background: linear-gradient(90deg, rgba(245,158,11,0.18), rgba(245,158,11,0.08));
+  border-bottom: 1px solid rgba(245,158,11,0.3);
+  color: #fde68a;
+  font-size: 0.84rem;
+  font-weight: 500;
+  position: relative;
+  z-index: 60;
+}
+.offline-banner-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: #f59e0b;
+}
+.offline-banner-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: #fde68a;
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+  line-height: 1;
+}
+.offline-banner-close:hover {
+  opacity: 1;
+  background: rgba(245,158,11,0.15);
+}
+
+/* --- Top Nav ------------------------------------------------ */
+.topbar {
+  position: sticky; top: 0; z-index: 50;
+  background: rgba(10,14,26,0.82);
+  backdrop-filter: blur(16px) saturate(1.4);
+  border-bottom: 1px solid var(--border);
+}
+.topbar-inner {
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 0 24px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.logo-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.logo-icon { width: 28px; height: 28px; color: var(--accent); }
+.logo-text {
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, #818cf8, #6366f1);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.topbar-right { display: flex; align-items: center; gap: 8px; }
+
+/* --- Badges ------------------------------------------------- */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 0.73rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  transition: all 0.3s;
+}
+/* Online state (green) */
+.badge-env.badge-online,
+.badge-env:not(.badge-offline) {
+  background: rgba(16,185,129,0.12);
+  color: #6ee7b7;
+  border: 1px solid rgba(16,185,129,0.25);
+}
+/* Offline state (amber/red) */
+.badge-env.badge-offline {
+  background: rgba(239,68,68,0.12);
+  color: #fca5a5;
+  border: 1px solid rgba(239,68,68,0.25);
+}
+.badge-model {
+  background: rgba(99,102,241,0.12);
+  color: #a5b4fc;
+  border: 1px solid rgba(99,102,241,0.25);
+  font-family: var(--font-mono);
+}
+.pulse-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+.pulse-dot.pulse-online {
+  background: var(--success);
+}
+.pulse-dot.pulse-offline {
+  background: var(--danger);
+  animation: pulse-fast 1.2s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.35; }
+}
+@keyframes pulse-fast {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.25; }
+}
+
+/* --- Main Layout -------------------------------------------- */
+.main {
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 20px 24px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* --- Step Indicator ----------------------------------------- */
+.steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  padding: 14px 0 4px;
+}
+.step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  opacity: 0.38;
+  transition: opacity 0.3s;
+}
+.step.active { opacity: 1; }
+.step.done   { opacity: 0.7; }
+.step-num {
+  width: 28px; height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  font-size: 0.78rem;
+  font-weight: 700;
+  background: var(--bg-raised);
+  border: 1.5px solid var(--border);
+  color: var(--text-secondary);
+  transition: all 0.3s;
+}
+.step.active .step-num {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  box-shadow: 0 0 12px var(--accent-glow);
+}
+.step.done .step-num {
+  background: var(--success);
+  border-color: var(--success);
+  color: #fff;
+}
+.step-label {
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+.step.active .step-label { color: var(--text-primary); }
+.step-line {
+  width: 40px;
+  height: 2px;
+  background: var(--border);
+  margin: 0 6px;
+  flex-shrink: 0;
+}
+
+/* --- Panel (card) ------------------------------------------- */
+.panel {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.icon-sm  { width: 16px; height: 16px; flex-shrink: 0; }
+.icon-xs  { width: 14px; height: 14px; }
+.icon-btn { width: 16px; height: 16px; flex-shrink: 0; }
+
+/* --- Upload Panel ------------------------------------------- */
+.upload-panel { padding: 0; }
+.drop-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 36px 24px;
+  cursor: pointer;
+  border: 2px dashed transparent;
+  transition: all 0.25s;
+  background: linear-gradient(180deg, rgba(99,102,241,0.04), transparent);
+}
+.drop-zone.drag-over {
+  border-color: var(--accent);
+  background: rgba(99,102,241,0.08);
+}
+.drop-icon { width: 44px; height: 44px; color: var(--accent); opacity: 0.7; }
+.drop-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.drop-hint {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.file-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 18px;
+  background: rgba(99,102,241,0.06);
+  border-top: 1px solid var(--border);
+}
+.file-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+.file-icon { width: 16px; height: 16px; color: var(--accent); }
+.file-size {
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  font-family: var(--font-mono);
+}
+
+/* --- Two-column Grid ---------------------------------------- */
+.grid-two {
+  display: grid;
+  grid-template-columns: 1.3fr 0.7fr;
+  gap: 18px;
+}
+@media (max-width: 960px) {
+  .grid-two { grid-template-columns: 1fr; }
+  .steps { flex-wrap: wrap; gap: 4px; }
+  .step-label { display: none; }
+}
+
+/* --- Video -------------------------------------------------- */
+.video-panel .panel-head + * { padding: 0; }
+.video-wrap {
+  position: relative;
+  background: #000;
+  aspect-ratio: 16/9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.video-wrap video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: none;
+}
+.video-wrap video.has-src { display: block; }
+.video-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+}
+.video-placeholder.hidden { display: none; }
+.placeholder-icon { width: 56px; height: 56px; opacity: 0.3; }
+
+/* --- Action Panel ------------------------------------------- */
+.action-panel { display: flex; flex-direction: column; max-height: 100%; }
+.action-stack {
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  flex: 1;
+  overflow-y: auto;
+  max-height: calc(100vh - 260px);
+}
+.divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 2px 0;
+}
+.export-title {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 6px;
+}
+
+/* --- Buttons ------------------------------------------------ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 16px;
+  cursor: pointer;
+  background: var(--bg-raised);
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+.btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+.btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+.btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  transform: none;
+}
+.btn-primary {
+  background: var(--accent);
+  border-color: transparent;
+  color: #fff;
+}
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  box-shadow: 0 4px 20px var(--accent-glow);
+}
+.btn-success {
+  background: var(--success);
+  border-color: transparent;
+  color: #fff;
+}
+.btn-success:hover:not(:disabled) {
+  background: #34d399;
+  box-shadow: 0 4px 20px rgba(16,185,129,0.3);
+}
+.btn-outline {
+  background: transparent;
+  border-color: var(--border);
+}
+.btn-outline:hover:not(:disabled) {
+  background: var(--bg-raised);
+  border-color: rgba(255,255,255,0.15);
+}
+.btn-ghost {
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  padding: 6px 10px;
+}
+.btn-ghost:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: rgba(255,255,255,0.05);
+}
+.btn-danger-sm {
+  background: var(--danger-bg);
+  border: 1px solid rgba(239,68,68,0.25);
+  color: #fca5a5;
+  padding: 6px 10px;
+  font-size: 0.78rem;
+}
+.btn-danger-sm:hover:not(:disabled) {
+  background: rgba(239,68,68,0.2);
+}
+.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
+.btn-lg { padding: 12px 20px; font-size: 0.92rem; }
+.btn-full { width: 100%; }
+.btn-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* --- Progress ----------------------------------------------- */
+.progress-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.progress-bar {
+  height: 6px;
+  background: var(--bg-raised);
+  border-radius: 99px;
+  overflow: hidden;
+}
+.progress-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--accent), #818cf8);
+  border-radius: 99px;
+  transition: width 0.4s ease;
+  animation: progressPulse 1.5s ease-in-out infinite;
+}
+@keyframes progressPulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.6; }
+}
+.progress-text {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+/* --- Status Box --------------------------------------------- */
+.status-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  font-size: 0.83rem;
+  font-weight: 500;
+  transition: all 0.3s;
+}
+.status-icon { width: 16px; height: 16px; flex-shrink: 0; }
+.status-idle {
+  background: rgba(255,255,255,0.03);
+  color: var(--text-secondary);
+}
+.status-loading {
+  background: var(--warning-bg);
+  color: #fde68a;
+}
+.status-success {
+  background: var(--success-bg);
+  color: #6ee7b7;
+}
+.status-error {
+  background: var(--danger-bg);
+  color: #fca5a5;
+}
+
+/* --- Download Links ----------------------------------------- */
+.download-group {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.dl-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: var(--radius);
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+.dl-srt {
+  background: rgba(99,102,241,0.12);
+  color: #a5b4fc;
+  border: 1px solid rgba(99,102,241,0.25);
+}
+.dl-srt:hover { background: rgba(99,102,241,0.2); }
+.dl-mp4 {
+  background: rgba(16,185,129,0.12);
+  color: #6ee7b7;
+  border: 1px solid rgba(16,185,129,0.25);
+}
+.dl-mp4:hover { background: rgba(16,185,129,0.2); }
+.dl-link.disabled { pointer-events: none; opacity: 0.35; }
+
+/* --- Table -------------------------------------------------- */
+.table-panel { }
+.table-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.seg-count {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  background: var(--bg-raised);
+  padding: 3px 10px;
+  border-radius: 999px;
+}
+.table-scroll {
+  overflow-x: auto;
+  max-height: 480px;
+  overflow-y: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 720px;
+}
+thead { position: sticky; top: 0; z-index: 5; }
+th {
+  text-align: left;
+  padding: 10px 14px;
+  font-size: 0.73rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  background: var(--bg-raised);
+  border-bottom: 1px solid var(--border);
+}
+td {
+  padding: 8px 14px;
+  vertical-align: top;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.85rem;
+}
+tr:last-child td { border-bottom: none; }
+tr:hover td { background: rgba(255,255,255,0.02); }
+.col-idx  { width: 48px; text-align: center; }
+.col-time { width: 155px; }
+.col-text { }
+.col-act  { width: 72px; text-align: center; }
+
+/* Row index number */
+td.idx-cell {
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+/* --- Table Inputs ------------------------------------------- */
+.time-input, .text-input {
+  width: 100%;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--text-primary);
+  padding: 8px 10px;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.time-input:focus, .text-input:focus {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+.text-input {
+  font-family: var(--font-sans);
+  resize: vertical;
+  min-height: 54px;
+  line-height: 1.45;
+}
+
+/* --- Empty State -------------------------------------------- */
+.empty-row td { padding: 40px 20px; }
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  color: var(--text-muted);
+  text-align: center;
+}
+.empty-icon { width: 48px; height: 48px; opacity: 0.35; }
+.empty-state p { font-size: 0.85rem; max-width: 380px; }
+
+/* --- CVNSS Toggle Button ------------------------------------ */
+.btn-cvnss {
+  background: rgba(168,85,247,0.12);
+  border: 1px solid rgba(168,85,247,0.3);
+  color: #c4b5fd;
+  font-weight: 700;
+  font-size: 0.73rem;
+  letter-spacing: 0.03em;
+  transition: all 0.2s;
+}
+.btn-cvnss:hover:not(:disabled) {
+  background: rgba(168,85,247,0.22);
+  border-color: rgba(168,85,247,0.45);
+  box-shadow: 0 2px 10px rgba(168,85,247,0.2);
+}
+.btn-cvnss.cvnss-active {
+  background: rgba(168,85,247,0.3);
+  border-color: #a855f7;
+  color: #e9d5ff;
+  box-shadow: 0 0 12px rgba(168,85,247,0.25);
+}
+
+/* --- Footer ------------------------------------------------- */
+.footer {
+  text-align: center;
+  padding: 20px 24px;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border);
+  line-height: 1.6;
+}
+.footer-link {
+  color: var(--accent-hover);
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.2s;
+}
+.footer-link:hover {
+  color: #a5b4fc;
+  text-decoration: underline;
+}
+
+/* --- Utilities ---------------------------------------------- */
+[hidden] { display: none !important; }
+
+/* --- Scrollbar ---------------------------------------------- */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.1);
+  border-radius: 99px;
+}
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
+
+/* --- Spinner for loading button ----------------------------- */
+.btn-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent !important;
+}
+.btn-loading::after {
+  content: '';
+  position: absolute;
+  width: 18px; height: 18px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* --- Mode Selector ------------------------------------------ */
+.mode-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.mode-label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.mode-toggle {
+  display: flex;
+  gap: 6px;
+  background: var(--bg-base);
+  border-radius: var(--radius);
+  padding: 4px;
+  border: 1px solid var(--border);
+}
+.mode-btn {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+.mode-btn:hover:not(.active) {
+  color: var(--text-primary);
+  background: rgba(255,255,255,0.04);
+}
+.mode-btn.active {
+  background: var(--accent);
+  color: #fff;
+  box-shadow: 0 2px 8px var(--accent-glow);
+}
+.mode-btn .icon-btn {
+  width: 14px;
+  height: 14px;
+}
+.mode-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+  margin: 0;
+}
+
+/* --- Coverage Bar ------------------------------------------- */
+.coverage-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 14px;
+  background: rgba(255,255,255,0.02);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+}
+.coverage-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.coverage-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.coverage-pct {
+  font-size: 0.82rem;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+}
+.coverage-track {
+  height: 6px;
+  background: var(--bg-raised);
+  border-radius: 99px;
+  overflow: hidden;
+}
+.coverage-fill {
+  height: 100%;
+  width: 0%;
+  border-radius: 99px;
+  transition: width 0.6s ease, background 0.3s;
+}
+.coverage-fill.cov-high {
+  background: linear-gradient(90deg, var(--success), #34d399);
+}
+.coverage-fill.cov-mid {
+  background: linear-gradient(90deg, var(--warning), #fbbf24);
+}
+.coverage-fill.cov-low {
+  background: linear-gradient(90deg, var(--danger), #f87171);
+}
+
+/* --- Subtitle Preview Overlay ------------------------------- */
+.sub-preview-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 10%;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 10;
+  transition: bottom 0.3s ease;
+}
+.sub-preview-text {
+  display: inline-block;
+  padding: 6px 18px;
+  font-family: 'Bangers', sans-serif;
+  font-size: 1.3rem;
+  color: #fff;
+  text-shadow: 0 0 6px rgba(0,0,0,0.9), 2px 2px 4px rgba(0,0,0,0.7);
+  background: rgba(0,0,0,0.45);
+  border-radius: var(--radius-sm);
+  letter-spacing: 0.02em;
+  line-height: 1.4;
+  text-align: center;
+  max-width: 90%;
+  word-break: break-word;
+  transition: all 0.3s ease;
+}
+.sub-preview-text .ks-word-active {
+  color: #FFD700;
+  transition: color 0.15s;
+}
+
+/* --- Karaoke Style Panel ------------------------------------ */
+.karaoke-style-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  background: rgba(99,102,241,0.04);
+  border: 1px solid rgba(99,102,241,0.12);
+  border-radius: var(--radius);
+}
+.ks-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--accent-hover);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0;
+}
+.ks-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ks-label {
+  font-size: 0.73rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* Font select */
+.ks-select {
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: border-color 0.2s;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 28px;
+}
+.ks-select option {
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  padding: 6px 10px;
+}
+.ks-select:focus {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+/* Color pickers */
+.ks-color-row {
+  flex-direction: row;
+  gap: 10px;
+}
+.ks-color-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ks-color-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ks-color-input {
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  padding: 0;
+  background: none;
+  flex-shrink: 0;
+}
+.ks-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
+.ks-color-input::-webkit-color-swatch {
+  border: none;
+  border-radius: 4px;
+}
+.ks-color-hex {
+  font-family: var(--font-mono);
+  font-size: 0.73rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+/* Range sliders */
+.ks-slider-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ks-range {
+  flex: 1;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--bg-raised);
+  border-radius: 99px;
+  outline: none;
+  cursor: pointer;
+}
+.ks-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 2px solid var(--bg-surface);
+  box-shadow: 0 0 6px var(--accent-glow);
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+.ks-range::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+.ks-range::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 2px solid var(--bg-surface);
+  box-shadow: 0 0 6px var(--accent-glow);
+  cursor: pointer;
+}
+.ks-range-val {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  min-width: 40px;
+  text-align: right;
+}
+
+/* Toggle switch */
+.ks-toggle-row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.ks-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+}
+.ks-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.ks-switch-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  transition: all 0.25s;
+}
+.ks-switch-slider::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 2px;
+  bottom: 2px;
+  background: var(--text-secondary);
+  border-radius: 50%;
+  transition: all 0.25s;
+}
+.ks-switch input:checked + .ks-switch-slider {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.ks-switch input:checked + .ks-switch-slider::before {
+  transform: translateX(18px);
+  background: #fff;
+}
+
+/* Hints */
+.ks-hint {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin: 0;
+  line-height: 1.3;
+}
+.ks-hint-karaoke {
+  padding-left: 2px;
+}
+
+/* --- Responsive tweaks -------------------------------------- */
+@media (max-width: 640px) {
+  .main { padding: 12px 12px 32px; gap: 12px; }
+  .topbar-inner { padding: 0 14px; }
+  .drop-zone { padding: 24px 16px; }
+  .action-stack { padding: 14px; }
+  .btn-lg { padding: 10px 14px; font-size: 0.85rem; }
+  table { min-width: 580px; }
+  .panel-head { padding: 12px 14px; }
+  .offline-banner { padding: 8px 14px; font-size: 0.78rem; }
+  .mode-btn { padding: 6px 8px; font-size: 0.78rem; }
+  .ks-color-row { flex-direction: column; }
+  .sub-preview-text { font-size: 1rem; }
+}

templates/index.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Viet AutoSub Editor</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Bangers&family=Pacifico&family=Dancing+Script:wght@400;700&family=Bebas+Neue&family=Lobster&family=Permanent+Marker&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="static/styles.css" />
+  <script src="static/cvnss4.0-converter.js"></script>
+</head>
+<body>
+
+  <!-- ===== OFFLINE BANNER ===== -->
+  <div class="offline-banner" id="offlineBanner" hidden>
+    <svg viewBox="0 0 20 20" fill="currentColor" class="offline-banner-icon">
+      <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+    </svg>
+    <span id="offlineBannerText">Đang chạy offline — Chức năng AI (auto sub, xuất MP4) cần kết nối server HF Space.</span>
+    <button class="offline-banner-close" id="offlineBannerClose" title="Đóng">&times;</button>
+  </div>
+
+  <!-- ===== TOP NAV ===== -->
+  <nav class="topbar">
+    <div class="topbar-inner">
+      <div class="logo-group">
+        <svg class="logo-icon" viewBox="0 0 32 32" fill="none" aria-label="Viet AutoSub">
+          <rect x="2" y="6" width="28" height="20" rx="4" stroke="currentColor" stroke-width="2"/>
+          <rect x="6" y="20" width="20" height="4" rx="1.5" fill="currentColor" opacity="0.25"/>
+          <rect x="8" y="21" width="7" height="2" rx="1" fill="currentColor"/>
+          <rect x="17" y="21" width="5" height="2" rx="1" fill="currentColor" opacity="0.6"/>
+          <circle cx="16" cy="13" r="4" stroke="currentColor" stroke-width="1.5"/>
+          <polygon points="14.5,11.5 18.5,13 14.5,14.5" fill="currentColor"/>
+        </svg>
+        <span class="logo-text">Viet AutoSub</span>
+      </div>
+      <div class="topbar-right">
+        <span class="badge badge-env" id="badgeEnv">
+          <span class="pulse-dot" id="pulseDot"></span>
+          <span id="badgeEnvText">Đang kiểm tra...</span>
+        </span>
+        <span class="badge badge-model" id="modelBadge">whisper-small</span>
+      </div>
+    </div>
+  </nav>
+
+  <!-- ===== MAIN LAYOUT ===== -->
+  <main class="main">
+
+    <!-- ===== STEP INDICATOR ===== -->
+    <div class="steps">
+      <div class="step active" data-step="1">
+        <div class="step-num">1</div>
+        <div class="step-label">Upload video</div>
+      </div>
+      <div class="step-line"></div>
+      <div class="step" data-step="2">
+        <div class="step-num">2</div>
+        <div class="step-label">Auto sub tiếng Việt</div>
+      </div>
+      <div class="step-line"></div>
+      <div class="step" data-step="3">
+        <div class="step-num">3</div>
+        <div class="step-label">Chỉnh sửa subtitle</div>
+      </div>
+      <div class="step-line"></div>
+      <div class="step" data-step="4">
+        <div class="step-num">4</div>
+        <div class="step-label">Xuất SRT / MP4</div>
+      </div>
+    </div>
+
+    <!-- ===== UPLOAD ZONE ===== -->
+    <section class="panel upload-panel" id="uploadPanel">
+      <div class="drop-zone" id="dropZone">
+        <svg class="drop-icon" viewBox="0 0 48 48" fill="none">
+          <rect x="4" y="8" width="40" height="32" rx="6" stroke="currentColor" stroke-width="2" stroke-dasharray="4 3"/>
+          <path d="M24 18v12M18 24l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <p class="drop-title">Kéo thả video vào đây</p>
+        <p class="drop-hint">hoặc click để chọn file &mdash; MP4, MOV, MKV, AVI, WebM &le; 250 MB</p>
+        <input id="videoFile" type="file" accept="video/*" hidden />
+      </div>
+      <div class="file-info" id="fileInfo" hidden>
+        <div class="file-meta">
+          <svg viewBox="0 0 20 20" fill="currentColor" class="file-icon"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V7.414A2 2 0 0017.414 6L14 2.586A2 2 0 0012.586 2H4zm8 1.414L15.586 8H13a1 1 0 01-1-1V4.414zM4 5h6v2a3 3 0 003 3h2v5a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1z"/></svg>
+          <span id="fileName">video.mp4</span>
+          <span class="file-size" id="fileSize">0 MB</span>
+        </div>
+        <button class="btn btn-ghost btn-sm" id="btnClearFile">Đổi file</button>
+      </div>
+    </section>
+
+    <!-- ===== TWO-COLUMN: VIDEO + CONTROLS ===== -->
+    <div class="grid-two">
+
+      <!-- LEFT: Video Preview -->
+      <section class="panel video-panel">
+        <div class="panel-head">
+          <h2 class="panel-title">
+            <svg viewBox="0 0 20 20" fill="currentColor" class="icon-sm"><path d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"/></svg>
+            Xem trước
+          </h2>
+        </div>
+        <div class="video-wrap" id="videoWrap">
+          <video id="preview" controls playsinline></video>
+          <div class="video-placeholder" id="videoPlaceholder">
+            <svg viewBox="0 0 64 64" fill="none" class="placeholder-icon">
+              <rect x="8" y="14" width="48" height="36" rx="6" stroke="currentColor" stroke-width="2"/>
+              <polygon points="26,24 42,32 26,40" fill="currentColor" opacity="0.3"/>
+            </svg>
+            <span>Chưa có video</span>
+          </div>
+          <!-- Subtitle Preview Overlay -->
+          <div class="sub-preview-overlay" id="subPreviewOverlay" hidden>
+            <span class="sub-preview-text" id="subPreviewText">Phụ đề mẫu — Xem trước Karaoke</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- RIGHT: Action Panel -->
+      <section class="panel action-panel">
+        <div class="panel-head">
+          <h2 class="panel-title">
+            <svg viewBox="0 0 20 20" fill="currentColor" class="icon-sm"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/></svg>
+            Điều khiển
+          </h2>
+        </div>
+
+        <div class="action-stack">
+          <!-- Mode Selector -->
+          <div class="mode-selector">
+            <label class="mode-label">Chế độ nhận diện</label>
+            <div class="mode-toggle" id="modeToggle">
+              <button class="mode-btn active" data-mode="music" id="modeMusic">
+                <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/></svg>
+                Lời bài hát
+              </button>
+              <button class="mode-btn" data-mode="speech" id="modeSpeech">
+                <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg>
+                Giọng nói
+              </button>
+            </div>
+            <p class="mode-hint" id="modeHint">Tối ưu cho Vietsub lời bài hát, nhận diện toàn bộ lyrics khớp timeline.</p>
+          </div>
+
+          <!-- Transcribe -->
+          <button id="btnTranscribe" class="btn btn-primary btn-lg btn-full">
+            <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg>
+            Auto sub tiếng Việt
+          </button>
+
+          <!-- Coverage Stats -->
+          <div class="coverage-bar" id="coverageBar" hidden>
+            <div class="coverage-header">
+              <span class="coverage-label">Phủ sóng timeline</span>
+              <span class="coverage-pct" id="coveragePct">0%</span>
+            </div>
+            <div class="coverage-track">
+              <div class="coverage-fill" id="coverageFill"></div>
+            </div>
+          </div>
+
+          <!-- Progress Bar -->
+          <div class="progress-wrap" id="progressWrap" hidden>
+            <div class="progress-bar">
+              <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <span class="progress-text" id="progressText">Đang xử lý...</span>
+          </div>
+
+          <!-- Status -->
+          <div id="status" class="status-box status-idle">
+            <svg viewBox="0 0 20 20" fill="currentColor" class="status-icon"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
+            <span id="statusText">Sẵn sàng. Hãy upload video để bắt đầu.</span>
+          </div>
+
+          <hr class="divider" />
+
+          <!-- ===== KARAOKE STYLE ===== -->
+          <div class="karaoke-style-panel">
+            <h3 class="ks-title">
+              <svg viewBox="0 0 20 20" fill="currentColor" class="icon-sm"><path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/></svg>
+              Kiểu Karaoke
+            </h3>
+
+            <!-- Font Selector -->
+            <div class="ks-group">
+              <label class="ks-label" for="ksFont">Font phụ đề</label>
+              <select class="ks-select" id="ksFont">
+                <option value="Bangers" style="font-family:'Bangers'">Bangers</option>
+                <option value="Bebas Neue" style="font-family:'Bebas Neue'">Bebas Neue</option>
+                <option value="Lobster" style="font-family:'Lobster'">Lobster</option>
+                <option value="Permanent Marker" style="font-family:'Permanent Marker'">Permanent Marker</option>
+                <option value="Pacifico" style="font-family:'Pacifico'">Pacifico</option>
+                <option value="Dancing Script" style="font-family:'Dancing Script'">Dancing Script</option>
+                <option value="Playfair Display" style="font-family:'Playfair Display'">Playfair Display</option>
+              </select>
+            </div>
+
+            <!-- Color Pickers -->
+            <div class="ks-group ks-color-row">
+              <div class="ks-color-item">
+                <label class="ks-label" for="ksColor">Màu chữ</label>
+                <div class="ks-color-wrap">
+                  <input type="color" id="ksColor" value="#FFFFFF" class="ks-color-input" />
+                  <span class="ks-color-hex" id="ksColorHex">#FFFFFF</span>
+                </div>
+              </div>
+              <div class="ks-color-item">
+                <label class="ks-label" for="ksHighlight">Màu highlight</label>
+                <div class="ks-color-wrap">
+                  <input type="color" id="ksHighlight" value="#FFD700" class="ks-color-input" />
+                  <span class="ks-color-hex" id="ksHighlightHex">#FFD700</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Outline Color -->
+            <div class="ks-group ks-color-row">
+              <div class="ks-color-item">
+                <label class="ks-label" for="ksOutline">Màu viền</label>
+                <div class="ks-color-wrap">
+                  <input type="color" id="ksOutline" value="#000000" class="ks-color-input" />
+                  <span class="ks-color-hex" id="ksOutlineHex">#000000</span>
+                </div>
+              </div>
+              <div class="ks-color-item">
+                <label class="ks-label" for="ksOutlineWidth">Độ dày viền</label>
+                <div class="ks-slider-wrap">
+                  <input type="range" id="ksOutlineWidth" min="0" max="6" step="1" value="2" class="ks-range" />
+                  <span class="ks-range-val" id="ksOutlineWidthVal">2px</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Font Size Slider -->
+            <div class="ks-group">
+              <label class="ks-label" for="ksSize">Cỡ chữ</label>
+              <div class="ks-slider-wrap">
+                <input type="range" id="ksSize" min="50" max="200" step="5" value="100" class="ks-range" />
+                <span class="ks-range-val" id="ksSizeVal">100%</span>
+              </div>
+            </div>
+
+            <!-- Vertical Position Slider -->
+            <div class="ks-group">
+              <label class="ks-label" for="ksPosition">Vị trí dọc</label>
+              <div class="ks-slider-wrap">
+                <input type="range" id="ksPosition" min="0" max="100" step="1" value="90" class="ks-range" />
+                <span class="ks-range-val" id="ksPositionVal">90%</span>
+              </div>
+              <p class="ks-hint">0% = trên cùng, 100% = dưới cùng</p>
+            </div>
+
+            <!-- Karaoke Word-by-word toggle -->
+            <div class="ks-group ks-toggle-row">
+              <label class="ks-label" for="ksKaraokeMode">Chế độ Karaoke từng từ</label>
+              <label class="ks-switch">
+                <input type="checkbox" id="ksKaraokeMode" />
+                <span class="ks-switch-slider"></span>
+              </label>
+            </div>
+            <p class="ks-hint ks-hint-karaoke" id="ksKaraokeHint">Bật để highlight từng từ theo nhạc khi xuất MP4.</p>
+
+            <!-- Preview Button -->
+            <button id="btnPreviewStyle" class="btn btn-outline btn-sm btn-full">
+              <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg>
+              Xem trước phụ đề
+            </button>
+          </div>
+
+          <hr class="divider" />
+
+          <!-- Edit Actions -->
+          <div class="btn-row">
+            <button id="btnAddRow" class="btn btn-outline" disabled>
+              <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
+              Thêm dòng
+            </button>
+          </div>
+
+          <hr class="divider" />
+
+          <!-- Export Actions -->
+          <div class="export-group">
+            <h3 class="export-title">Xuất file</h3>
+            <div class="btn-row">
+              <button id="btnExportSrt" class="btn btn-outline" disabled>
+                <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+                Xuất .SRT
+              </button>
+              <button id="btnExportMp4" class="btn btn-success" disabled>
+                <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"/></svg>
+                Xuất .MP4 burn sub
+              </button>
+            </div>
+          </div>
+
+          <!-- Download Links -->
+          <div class="download-group" id="downloadGroup" hidden>
+            <a id="downloadSrt" class="dl-link dl-srt" href="#" download>
+              <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+              Tải .SRT
+            </a>
+            <a id="downloadMp4" class="dl-link dl-mp4" href="#" download>
+              <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+              Tải .MP4
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- ===== SUBTITLE TABLE ===== -->
+    <section class="panel table-panel">
+      <div class="panel-head">
+        <h2 class="panel-title">
+          <svg viewBox="0 0 20 20" fill="currentColor" class="icon-sm"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>
+          Bảng Subtitle
+        </h2>
+        <div class="table-meta">
+          <button class="btn btn-cvnss btn-sm" id="btnToggleCvnss" title="Chuyển đổi Tiếng Việt ↔ CVNSS4.0">
+            <svg viewBox="0 0 20 20" fill="currentColor" class="icon-btn"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/></svg>
+            <span id="cvnssToggleLabel">CVNSS4.0</span>
+          </button>
+          <span class="seg-count" id="segmentCount">0 dòng</span>
+          <button class="btn btn-ghost btn-sm" id="btnCollapseTable" title="Thu gọn">
+            <svg viewBox="0 0 20 20" fill="currentColor" class="icon-xs"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="table-scroll" id="tableScroll">
+        <table>
+          <thead>
+            <tr>
+              <th class="col-idx">#</th>
+              <th class="col-time">Bắt đầu</th>
+              <th class="col-time">Kết thúc</th>
+              <th class="col-text">Nội dung</th>
+              <th class="col-act">Thao tác</th>
+            </tr>
+          </thead>
+          <tbody id="subtitleBody">
+            <tr class="empty-row">
+              <td colspan="5">
+                <div class="empty-state">
+                  <svg viewBox="0 0 48 48" fill="none" class="empty-icon">
+                    <rect x="6" y="10" width="36" height="28" rx="4" stroke="currentColor" stroke-width="1.5"/>
+                    <line x1="12" y1="20" x2="36" y2="20" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
+                    <line x1="12" y1="26" x2="30" y2="26" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
+                    <line x1="12" y1="32" x2="24" y2="32" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
+                  </svg>
+                  <p>Chưa có subtitle. Upload video rồi bấm <strong>Auto sub tiếng Việt</strong> để bắt đầu.</p>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+  </main>
+
+  <!-- ===== FOOTER ===== -->
+  <footer class="footer">
+    <span>Viet AutoSub Editor, 2026 &mdash; Ứng dụng này được sự tài trợ bởi CVNSS4.0 và Thầy Trần Tư Bình. Hoàn toàn miễn phí. Ủng hộ và học CVNSS4.0 <a href="https://chuvnsongsong.com/" target="_blank" rel="noopener noreferrer" class="footer-link">tại đây</a></span>
+  </footer>
+
+  <script src="static/app.js"></script>
+</body>
+</html>