Upload 3 files

static/app.js

@@ -0,0 +1,566 @@
+/* ============================================================
+   Viet AutoSub Editor – Dashboard JavaScript
+   Tương thích cả offline (file://) và online (HF Spaces)
+   ============================================================ */
+
+const state = {
+  jobId: null,
+  file: null,
+  segments: [],
+  isOnline: false, // server reachable?
+};
+
+/* --- Detect environment ------------------------------------ */
+const IS_FILE_PROTOCOL = window.location.protocol === "file:";
+
+/**
+ * Determine the API base URL.
+ * - file:// → cannot reach backend at all
+ * - http(s):// → use same origin (relative paths)
+ */
+function getApiBase() {
+  if (IS_FILE_PROTOCOL) return null;
+  return ""; // same-origin: "/api/transcribe" etc.
+}
+
+/* --- 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"),
+  // New: offline banner + badge
+  offlineBanner:     $("offlineBanner"),
+  offlineBannerText: $("offlineBannerText"),
+  offlineBannerClose:$("offlineBannerClose"),
+  badgeEnv:          $("badgeEnv"),
+  badgeEnvText:      $("badgeEnvText"),
+  pulseDot:          $("pulseDot"),
+};
+
+/* --- Health check ------------------------------------------ */
+let healthRetryTimer = null;
+
+async function checkHealth() {
+  // file:// → always offline
+  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");
+      // Stop retrying
+      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;
+
+  // Badge
+  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";
+  }
+
+  // Offline banner
+  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...";
+    }
+    // Auto-retry every 30s if on http but server is down
+    if (!IS_FILE_PROTOCOL && !healthRetryTimer) {
+      healthRetryTimer = setInterval(checkHealth, 30000);
+    }
+  } else {
+    if (els.offlineBanner) els.offlineBanner.hidden = true;
+    if (healthRetryTimer) { clearInterval(healthRetryTimer); healthRetryTimer = null; }
+  }
+}
+
+// Close banner button
+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);
+
+    // Start
+    const tdStart = document.createElement("td");
+    tdStart.appendChild(createInput(seg.start, "start-input time-input"));
+
+    // End
+    const tdEnd = document.createElement("td");
+    tdEnd.appendChild(createInput(seg.end, "end-input time-input"));
+
+    // Text
+    const tdText = document.createElement("td");
+    tdText.appendChild(createTextArea(seg.text));
+
+    // Delete
+    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;
+  }
+
+  // Offline guard
+  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);
+
+  els.btnTranscribe.disabled = true;
+  els.btnTranscribe.classList.add("btn-loading");
+  setStatus("Đang nhận diện lời nói tiếng Việt...", "loading");
+  setStep(2);
+  startProgress("Đang upload và nhận diện giọng nói...");
+  showDownload(els.downloadSrt, "#", false);
+  showDownload(els.downloadMp4, "#", false);
+  showDownloadGroup(false);
+
+  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();
+    setStatus(`Hoàn tất. Đã tạo ${state.segments.length} dòng subtitle.`, "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);
+    // Re-check health
+    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 offline or no jobId and requesting SRT only → use client-side export
+  if (!burnIn && (!state.isOnline || !state.jobId)) {
+    downloadSrtOffline();
+    return;
+  }
+
+  // MP4 burn-in requires server
+  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;
+  }
+
+  // Collect latest from table
+  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);
+
+  // Show video preview
+  const url = URL.createObjectURL(file);
+  els.preview.src = url;
+  els.preview.classList.add("has-src");
+  els.videoPlaceholder.classList.add("hidden");
+
+  // Show file info
+  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);
+  setStatus("Sẵn sàng. Hãy upload video để bắt đầu.", "idle");
+  setStep(1);
+}
+
+/* --- Event listeners --------------------------------------- */
+
+// File input
+els.fileInput.addEventListener("change", (e) => {
+  const [file] = e.target.files || [];
+  if (file) handleFile(file);
+});
+
+// Click on drop zone
+els.dropZone.addEventListener("click", () => els.fileInput.click());
+
+// Drag & drop
+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);
+  }
+});
+
+// Clear file
+els.btnClearFile.addEventListener("click", clearFile);
+
+// Transcribe
+els.btnTranscribe.addEventListener("click", transcribeVideo);
+
+// Export
+els.btnExportSrt.addEventListener("click", () => exportResult(false));
+els.btnExportMp4.addEventListener("click", () => exportResult(true));
+
+// Add row
+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;
+});
+
+// Collapse table toggle
+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);
+renderTable();
+checkHealth();

static/styles.css

@@ -0,0 +1,702 @@
+/* ============================================================
+   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); } }
+
+/* --- 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; }
+}

templates/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>