Update app.js

app.js

@@ -0,0 +1,484 @@
+const DATASET_KEY = "humanlabeling_dataset";
+const AUTOSAVE_DELAY = 1500;
+
+let _dataset = [];
+let _activeRowId = null;
+let _autosaveTimer = null;
+let _currentReferences = [];
+let _currentVideoUrl = null;
+let _currentTitle = "";
+let _currentPage = 1;
+const PAGE_SIZE = 10;
+
+// ── Init ──────────────────────────────────────────────────────────────────────
+window.addEventListener("DOMContentLoaded", () => {
+  _loadDataset();
+
+  document.getElementById("transcriptArea").addEventListener("input", () => {
+    updateCharCount();
+    _scheduleAutosave();
+  });
+  document.getElementById("refInput").addEventListener("keydown", (e) => {
+    if (e.key === "Enter") addReference();
+  });
+});
+
+// ── References ────────────────────────────────────────────────────────────────
+function addReference() {
+  const input = document.getElementById("refInput");
+  const val = input.value.trim();
+  if (!val) return;
+  if (!_currentReferences.includes(val)) {
+    _currentReferences.push(val);
+    _renderRefPills();
+    _scheduleAutosave();
+  }
+  input.value = "";
+  input.focus();
+}
+
+function removeReference(idx) {
+  _currentReferences.splice(idx, 1);
+  _renderRefPills();
+  _scheduleAutosave();
+}
+
+function _renderRefPills() {
+  const container = document.getElementById("refPills");
+  if (_currentReferences.length === 0) {
+    container.innerHTML = "";
+    return;
+  }
+  container.innerHTML = _currentReferences
+    .map(
+      (ref, i) => `
+    <span class="ref-pill">
+      ${_esc(ref)}
+      <button onclick="removeReference(${i})" title="Xoá">×</button>
+    </span>
+  `,
+    )
+    .join("");
+}
+
+// ── Video preview ─────────────────────────────────────────────────────────────
+function loadVideoPreview(url) {
+  const container = document.getElementById("videoContainer");
+  const ytMatch = url.match(/(?:v=|youtu\.be\/|shorts\/)([A-Za-z0-9_-]{11})/);
+  if (!ytMatch) {
+    container.innerHTML = `<div class="video-placeholder"><p style="color:#475569;font-size:12px;">Không phải YouTube URL</p></div>`;
+    return;
+  }
+  container.innerHTML = "";
+  const iframe = document.createElement("iframe");
+  iframe.width = "100%";
+  iframe.height = "100%";
+  iframe.style.border = "none";
+  iframe.allow =
+    "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+  iframe.allowFullscreen = true;
+  iframe.src = `https://www.youtube.com/embed/${ytMatch[1]}`;
+  container.appendChild(iframe);
+}
+
+// ── Transcript ────────────────────────────────────────────────────────────────
+function setTranscript(text) {
+  document.getElementById("transcriptArea").value = text || "";
+  updateCharCount();
+}
+
+function updateCharCount() {
+  const text = document.getElementById("transcriptArea").value;
+  const el = document.getElementById("charCount");
+  if (text.length > 0) {
+    const words = text.trim().split(/\s+/).length;
+    el.textContent = `${words} từ · ${text.length} ký tự`;
+  } else {
+    el.textContent = "";
+  }
+}
+
+async function copyText() {
+  const text = document.getElementById("transcriptArea").value;
+  if (!text) return;
+  try {
+    await navigator.clipboard.writeText(text);
+    const btn = document.getElementById("copyBtn");
+    btn.innerHTML = '<i class="ri-check-line"></i> Đã copy!';
+    setTimeout(() => {
+      btn.innerHTML = '<i class="ri-file-copy-line"></i> Copy';
+    }, 1500);
+  } catch (_) {}
+}
+
+// ── Status bar ────────────────────────────────────────────────────────────────
+function setStatus(type, text) {
+  const bar = document.getElementById("statusBar");
+  bar.className = `status-bar ${type}`;
+  document.getElementById("statusText").textContent = text;
+}
+
+// ── Dataset ───────────────────────────────────────────────────────────────────
+function _loadDataset() {
+  try {
+    _dataset = JSON.parse(localStorage.getItem(DATASET_KEY) || "[]");
+  } catch (_) {
+    _dataset = [];
+  }
+  _renderDataset();
+}
+
+function _saveDataset() {
+  localStorage.setItem(DATASET_KEY, JSON.stringify(_dataset));
+  _showAutosaved();
+}
+
+function _scheduleAutosave() {
+  if (!_activeRowId) return;
+  clearTimeout(_autosaveTimer);
+  document.getElementById("autosaveIndicator").textContent = "lưu...";
+  document.getElementById("autosaveIndicator").className = "autosave-indicator";
+  _autosaveTimer = setTimeout(() => {
+    const entry = _dataset.find((e) => e.id === _activeRowId);
+    if (entry) {
+      entry.script = document.getElementById("transcriptArea").value;
+      entry.references = [..._currentReferences];
+      _saveDataset();
+      _renderDataset();
+    }
+  }, AUTOSAVE_DELAY);
+}
+
+function _showAutosaved() {
+  const el = document.getElementById("autosaveIndicator");
+  el.textContent = "đã lưu";
+  el.className = "autosave-indicator saved";
+  setTimeout(() => {
+    el.textContent = "";
+  }, 2000);
+}
+
+function saveCurrentToDataset() {
+  if (!_activeRowId) return;
+  const script = document.getElementById("transcriptArea").value.trim();
+  const entry = _dataset.find((e) => e.id === _activeRowId);
+  if (!entry) return;
+
+  entry.script = script;
+  entry.references = [..._currentReferences];
+  entry.status = "verified";
+  _saveDataset();
+  _renderDataset();
+  setStatus("done", `Đã verify: ${_esc(entry.title)}`);
+
+  // Auto-advance to next unverified entry
+  const currentIdx = _dataset.findIndex((e) => e.id === _activeRowId);
+  const next = _dataset.slice(currentIdx + 1).find((e) => (e.status || "none") !== "verified");
+  if (next) selectRow(next.id);
+}
+
+function selectRow(id) {
+  const entry = _dataset.find((e) => e.id === id);
+  if (!entry) return;
+  _activeRowId = id;
+  _currentVideoUrl = entry.url;
+  _currentTitle = entry.title;
+  _currentReferences = [...(entry.references || [])];
+  setTranscript(entry.script);
+  _renderRefPills();
+  loadVideoPreview(entry.url);
+  document.getElementById("videoMeta").textContent = entry.title || entry.url;
+  _renderDataset();
+}
+
+function deleteRow(id) {
+  _dataset = _dataset.filter((e) => e.id !== id);
+  if (_activeRowId === id) {
+    _activeRowId = null;
+    setTranscript("");
+    _currentReferences = [];
+    _renderRefPills();
+    document.getElementById("videoMeta").textContent = "";
+    document.getElementById("videoContainer").innerHTML = `
+      <div class="video-placeholder">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
+          <rect x="2" y="3" width="20" height="14" rx="2"/>
+          <path d="M8 21h8M12 17v4"/>
+        </svg>
+        <p>Chọn một video từ dataset để xem</p>
+      </div>`;
+  }
+  _saveDataset();
+  _renderDataset();
+}
+
+function clearDataset() {
+  if (!_dataset.length) return;
+  if (!confirm(`Xoá tất cả ${_dataset.length} video khỏi dataset?`)) return;
+  _dataset = [];
+  _activeRowId = null;
+  _saveDataset();
+  _renderDataset();
+}
+
+function _renderDataset() {
+  const tbody = document.getElementById("datasetBody");
+  const count = document.getElementById("datasetCount");
+
+  const verified = _dataset.filter((e) => (e.status || "none") === "verified").length;
+  count.textContent = _dataset.length
+    ? `${_dataset.length} video · ${verified} verified`
+    : "";
+
+  if (_dataset.length === 0) {
+    tbody.innerHTML =
+      '<tr><td colspan="7" class="empty-state">Import file JSON hoặc CSV để bắt đầu labeling.</td></tr>';
+    _renderPagination(0);
+    return;
+  }
+
+  const totalPages = Math.ceil(_dataset.length / PAGE_SIZE);
+  if (_currentPage > totalPages) _currentPage = totalPages;
+
+  const start = (_currentPage - 1) * PAGE_SIZE;
+  const pageItems = _dataset.slice(start, start + PAGE_SIZE);
+
+  tbody.innerHTML = pageItems
+    .map((e, i) => {
+      const refs = e.references || [];
+      const refText =
+        refs.length === 0
+          ? "—"
+          : refs.length === 1
+            ? refs[0]
+            : `${refs[0]} +${refs.length - 1}`;
+      const refTitle = refs.join(" | ");
+      const st = e.status || "none";
+      const statusBadge = `<span class="status-badge status-${st}">${st}</span>`;
+      return `
+    <tr data-id="${e.id}" class="${e.id === _activeRowId ? "active" : ""}" onclick="selectRow('${e.id}')">
+      <td class="td-num">${start + i + 1}</td>
+      <td class="td-title" title="${_esc(e.title)}">${_esc(e.title)}</td>
+      <td class="td-script" title="${_esc(e.script)}">${_esc(e.script)}</td>
+      <td class="td-refs" title="${_esc(refTitle)}">${_esc(refText)}</td>
+      <td style="max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
+        <a href="${_esc(e.url)}" target="_blank" style="color:#3b82f6;font-size:11px;" onclick="event.stopPropagation()">link</a>
+      </td>
+      <td>${statusBadge}</td>
+      <td class="td-actions">
+        <button onclick="event.stopPropagation();deleteRow('${e.id}')" title="Xoá">✕</button>
+      </td>
+    </tr>`;
+    })
+    .join("");
+
+  _renderPagination(totalPages);
+}
+
+function _renderPagination(totalPages) {
+  const bar = document.getElementById("paginationBar");
+  if (!bar) return;
+  if (totalPages <= 1) {
+    bar.innerHTML = "";
+    return;
+  }
+
+  const prev = _currentPage > 1;
+  const next = _currentPage < totalPages;
+
+  const pages = [];
+  const delta = 3;
+  for (let p = 1; p <= totalPages; p++) {
+    if (
+      p === 1 ||
+      p === totalPages ||
+      (p >= _currentPage - delta && p <= _currentPage + delta)
+    ) {
+      pages.push(p);
+    }
+  }
+
+  let html = `<button class="pg-btn" ${prev ? "" : "disabled"} onclick="gotoPage(${_currentPage - 1})"><i class="ri-arrow-left-s-line"></i></button>`;
+  let last = 0;
+  for (const p of pages) {
+    if (last && p - last > 1) html += `<span class="pg-ellipsis">…</span>`;
+    html += `<button class="pg-btn ${p === _currentPage ? "pg-active" : ""}" onclick="gotoPage(${p})">${p}</button>`;
+    last = p;
+  }
+  html += `<button class="pg-btn" ${next ? "" : "disabled"} onclick="gotoPage(${_currentPage + 1})"><i class="ri-arrow-right-s-line"></i></button>`;
+  bar.innerHTML = html;
+}
+
+function gotoPage(p) {
+  _currentPage = p;
+  _renderDataset();
+}
+
+// ── Import / Export ───────────────────────────────────────────────────────────
+function exportJSON() {
+  if (!_dataset.length) return;
+  const blob = new Blob([JSON.stringify(_dataset, null, 2)], {
+    type: "application/json;charset=utf-8",
+  });
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = `labeled_${new Date().toISOString().slice(0, 10)}.json`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+
+function importJSON(event) {
+  const file = event.target.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    try {
+      const imported = JSON.parse(e.target.result);
+      if (!Array.isArray(imported))
+        throw new Error("Không phải mảng JSON hợp lệ");
+
+      let added = 0;
+      for (const entry of imported) {
+        if (!entry.url) continue;
+        if (_dataset.find((d) => d.url === entry.url)) continue;
+        _dataset.push({
+          id: entry.id || (Date.now().toString(36) + Math.random().toString(36).slice(2, 6)),
+          title: entry.title || entry.url,
+          url: entry.url,
+          script: entry.script || "",
+          references: Array.isArray(entry.references) ? entry.references : [],
+          status: ["none", "extracted", "verified"].includes(entry.status)
+            ? entry.status
+            : entry.script
+              ? "extracted"
+              : "none",
+        });
+        added++;
+      }
+      _currentPage = 1;
+      _saveDataset();
+      _renderDataset();
+      alert(`Import thành công: +${added} video mới (bỏ qua ${imported.length - added} trùng URL).`);
+    } catch (err) {
+      alert(`Import thất bại: ${err.message}`);
+    }
+    event.target.value = "";
+  };
+  reader.readAsText(file, "utf-8");
+}
+
+function importCSV(event) {
+  const file = event.target.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    try {
+      const rows = _parseCSV(e.target.result);
+      if (rows.length < 2) throw new Error("File CSV không có dữ liệu");
+
+      const header = rows[0].map((h) => h.trim().toLowerCase());
+      const col = (name) => header.indexOf(name);
+      const iTitle = col("title"),
+        iUrl = col("url"),
+        iScript = col("script"),
+        iRefs = col("references"),
+        iStatus = col("status");
+
+      if (iUrl === -1) throw new Error('Không tìm thấy cột "url" trong CSV');
+
+      let added = 0;
+      for (let i = 1; i < rows.length; i++) {
+        const row = rows[i];
+        const url = (row[iUrl] || "").trim();
+        if (!url) continue;
+        if (_dataset.find((d) => d.url === url)) continue;
+        const refsRaw = iRefs !== -1 ? row[iRefs] || "" : "";
+        const references = refsRaw
+          ? refsRaw.split(";").map((r) => r.trim()).filter(Boolean)
+          : [];
+        const scriptVal = iScript !== -1 ? row[iScript] || "" : "";
+        const statusVal =
+          iStatus !== -1 && ["none", "extracted", "verified"].includes(row[iStatus])
+            ? row[iStatus]
+            : scriptVal
+              ? "extracted"
+              : "none";
+        _dataset.push({
+          id: Date.now().toString(36) + Math.random().toString(36).slice(2, 6) + i,
+          title: iTitle !== -1 ? row[iTitle] || url : url,
+          url,
+          script: scriptVal,
+          references,
+          status: statusVal,
+        });
+        added++;
+      }
+      _currentPage = 1;
+      _saveDataset();
+      _renderDataset();
+      alert(`Import CSV thành công: +${added} video mới (bỏ qua ${rows.length - 1 - added} trùng URL).`);
+    } catch (err) {
+      alert(`Import CSV thất bại: ${err.message}`);
+    }
+    event.target.value = "";
+  };
+  reader.readAsText(file, "utf-8");
+}
+
+function exportCSV() {
+  if (!_dataset.length) return;
+  const header = ["title", "url", "script", "references", "status"];
+  const rows = _dataset.map((e) =>
+    [e.title, e.url, e.script, (e.references || []).join("; "), e.status || "none"]
+      .map(_csvCell)
+      .join(","),
+  );
+  const csv = [header.join(","), ...rows].join("\n");
+  const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" });
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = `labeled_${new Date().toISOString().slice(0, 10)}.csv`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+
+function _parseCSV(text) {
+  if (text.charCodeAt(0) === 0xfeff) text = text.slice(1);
+  const rows = [];
+  let row = [], field = "", inQuotes = false, i = 0;
+  while (i < text.length) {
+    const ch = text[i];
+    if (inQuotes) {
+      if (ch === '"' && text[i + 1] === '"') { field += '"'; i += 2; continue; }
+      if (ch === '"') { inQuotes = false; i++; continue; }
+      field += ch;
+    } else {
+      if (ch === '"') { inQuotes = true; i++; continue; }
+      if (ch === ",") { row.push(field); field = ""; i++; continue; }
+      if (ch === "\n" || (ch === "\r" && text[i + 1] === "\n")) {
+        row.push(field); field = "";
+        if (row.some((c) => c !== "")) rows.push(row);
+        row = [];
+        i += ch === "\r" ? 2 : 1;
+        continue;
+      }
+      field += ch;
+    }
+    i++;
+  }
+  if (field || row.length) { row.push(field); if (row.some((c) => c !== "")) rows.push(row); }
+  return rows;
+}
+
+function _csvCell(val) {
+  const s = String(val ?? "").replace(/"/g, '""');
+  return `"${s}"`;
+}
+
+function _esc(s) {
+  return String(s ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}