Upload 5 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: VietAutoSub
-emoji: 🏃
-colorFrom: gray
+title: Viet AutoSub Editor
+emoji: 🎬
+colorFrom: red
 colorTo: blue
-sdk: gradio
-sdk_version: 6.9.0
-app_file: app.py
+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,378 @@
+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, 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
+
+
+
+def transcribe_video(video_path: Path, model_size: str = DEFAULT_MODEL_SIZE) -> List[SegmentOut]:
+    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(...)):
+    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.")
+
+    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)
+        segments = transcribe_video(video_path)
+        save_job_meta(
+            job_dir,
+            {
+                "job_id": job_id,
+                "video_path": video_path.name,
+                "duration": duration,
+                "created_at": datetime.utcnow().isoformat() + "Z",
+            },
+        )
+        return JSONResponse(
+            {
+                "job_id": job_id,
+                "duration": duration,
+                "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)

index.html

@@ -0,0 +1,242 @@
+<!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">
+          <!-- 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>
+
+          <!-- 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>

requirements.txt

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