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: VietAutoSub2
-emoji: 🦀
-colorFrom: green
-colorTo: red
-sdk: gradio
-sdk_version: 6.9.0
-app_file: app.py
+title: Viet AutoSub Editor
+emoji: 🎬
+colorFrom: red
+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,539 @@
+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 ExportRequest(BaseModel):
+    job_id: str
+    segments: List[SegmentIn]
+    burn_in: bool = True
+
+
+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 burn_subtitles(job_dir: Path, video_path: Path, srt_path: Path) -> Path:
+    output_path = job_dir / "output_subtitled.mp4"
+    subtitle_filter = (
+        "subtitles=edited.srt:"
+        "force_style='FontName=DejaVu Sans,FontSize=20,Outline=1,Shadow=0,MarginV=18,Alignment=2'"
+    )
+    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:
+        mp4_path = burn_subtitles(job_dir, video_path, srt_path)
+        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,602 @@
+/* ============================================================
+   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"
+};
+
+/* --- 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"),
+};
+
+/* --- 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 payload = {
+    job_id: state.jobId,
+    burn_in: burnIn,
+    segments: collectSegmentsFromTable(),
+  };
+
+  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)";
+  });
+}
+
+/* --- Init -------------------------------------------------- */
+setStep(1);
+setMode("music");
+renderTable();
+checkHealth();

static/styles.css

@@ -0,0 +1,812 @@
+/* ============================================================
+   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; }
+.action-stack {
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  flex: 1;
+}
+.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);
+}
+
+/* --- 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; }
+}

templates/index.html

@@ -0,0 +1,269 @@
+<!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&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">
+          <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>
+        </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" />
+
+          <!-- 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>