Upload 7 files

Dockerfile

@@ -0,0 +1,21 @@
+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 \
+    && 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"]

README.md

@@ -1,12 +1,38 @@
 ---
-title: VietAutoSub3
-emoji: 🐨
+title: Viet AutoSub Editor
+emoji: 🎬
 colorFrom: red
-colorTo: purple
-sdk: gradio
-sdk_version: 6.9.0
-app_file: app.py
+colorTo: blue
+sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Viet AutoSub Editor
+
+Ứng dụng tối giản để:
+- Upload video
+- Tự động tạo subtitle tiếng Việt
+- Sửa text và time trong bảng
+- Xuất file `.srt`
+- Xuất lại `.mp4` đã burn subtitle
+
+## Chạy local
+
+```bash
+docker build -t viet-autosub .
+docker run -p 7860:7860 viet-autosub
+```
+
+Hoặc dùng Python trực tiếp:
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+## Ghi chú
+
+- Mặc định dùng model `small` để cân bằng tốc độ và độ chính xác.
+- Với video dài hoặc audio nhiều nhạc nền, nên nâng cấp phần model hoặc thêm căn chỉnh timestamp sâu hơn.
+- Dữ liệu lưu tạm trong thư mục `workspace` và tự dọn sau 24 giờ.

app.py

@@ -0,0 +1,703 @@
+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"
+WORK_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"))
+
+
+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) -> 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.
+    """
+    ass_path = job_dir / "karaoke.ass"
+    s = style or SubtitleStyle()
+
+    font_name = 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,
+                   style: Optional["SubtitleStyle"] = None) -> Path:
+    output_path = job_dir / "output_subtitled.mp4"
+
+    # Xác định dùng karaoke ASS hay SRT thường
+    if style and style.karaoke_mode:
+        # Tạo file ASS karaoke
+        ass_path = write_ass_karaoke(job_dir, [], style)  # placeholder, sẽ được ghi đè bên dưới
+        subtitle_filter = f"ass=karaoke.ass"
+    else:
+        force_style = build_force_style(style)
+        subtitle_filter = f"subtitles=edited.srt:force_style='{force_style}'"
+
+    cmd = [
+        "ffmpeg",
+        "-y",
+        "-i",
+        video_path.name,
+        "-vf",
+        subtitle_filter,
+        "-c:v",
+        "libx264",
+        "-preset",
+        "veryfast",
+        "-crf",
+        "23",
+        "-c:a",
+        "aac",
+        "-b:a",
+        "192k",
+        output_path.name,
+    ]
+    try:
+        subprocess.run(cmd, cwd=job_dir, capture_output=True, text=True, check=True)
+    except subprocess.CalledProcessError as exc:
+        stderr = (exc.stderr or "").strip()
+        raise HTTPException(status_code=500, detail=f"FFmpeg lỗi khi xuất MP4: {stderr[:1200]}") from exc
+    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:
+        # Nếu karaoke mode, tạo file ASS từ segments
+        if payload.style and payload.style.karaoke_mode:
+            write_ass_karaoke(job_dir, payload.segments, payload.style)
+        mp4_path = burn_subtitles(job_dir, video_path, srt_path, 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,792 @@
+/* ============================================================
+   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,
+  },
+};
+
+/* --- 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"),
+  // 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,
+  };
+}
+
+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)";
+  }
+
+  // Demo text with karaoke highlight
+  if (ks.karaokeMode) {
+    textEl.innerHTML = 'Phụ đề <span class="ks-word-active" style="color:' + ks.highlight + '">mẫu</span> — Xem trước <span class="ks-word-active" style="color:' + ks.highlight + '">Karaoke</span>';
+  } else {
+    textEl.textContent = "Phụ đề mẫu — Xem trước Karaoke";
+  }
+}
+
+function showSubtitlePreview() {
+  if (els.subPreviewOverlay) {
+    els.subPreviewOverlay.hidden = false;
+    updatePreviewOverlay();
+  }
+}
+
+function hideSubtitlePreview() {
+  if (els.subPreviewOverlay) els.subPreviewOverlay.hidden = true;
+}
+
+// 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ụ đề';
+      }
+    });
+  }
+}
+
+/* --- Init -------------------------------------------------- */
+setStep(1);
+setMode("music");
+renderTable();
+checkHealth();
+setupKaraokeEvents();

static/styles.css

@@ -0,0 +1,1056 @@
+/* ============================================================
+   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; }
+
+/* --- Footer ------------------------------------------------- */
+.footer {
+  text-align: center;
+  padding: 20px 24px;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border);
+}
+
+/* --- 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,368 @@
+<!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" />
+</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">
+          <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 &mdash; Nhận diện giọng nói tiếng Việt bằng Whisper</span>
+  </footer>
+
+  <script src="static/app.js"></script>
+</body>
+</html>