Spaces:

CVNSS
/

tudienhoangphe

Running

App Files Files Community

CVNSS commited on Feb 7

Commit

4179c74

verified ·

1 Parent(s): ecaf6f4

Update index.html

Browse files

Files changed (1) hide show

index.html +605 -18

index.html CHANGED Viewed

@@ -1,19 +1,606 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <title>TỪ ĐIỂN TIẾNG VIỆT – HOÀNG PHÊ (OFFLINE PRO)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- PWA -->
+  <link rel="manifest" href="manifest.webmanifest" />
+  <meta name="theme-color" content="#7a0000" />
+  <style>
+    :root{
+      --red:#b30000; --yellow:#ffd700; --dark-red:#7a0000;
+      --bg:#fffaf2; --border:#e0c97f; --card:#ffffff;
+      --muted:#666; --ink:#222;
+    }
+    *{ box-sizing:border-box; font-family:"Times New Roman", Georgia, serif; }
+    body{ margin:0; background:var(--bg); color:var(--ink); }
+    header{
+      background:linear-gradient(90deg,var(--red),var(--dark-red));
+      color:var(--yellow); padding:16px 24px; border-bottom:5px solid var(--yellow);
+    }
+    header h1{ margin:0; font-size:22px; text-transform:uppercase; letter-spacing:1px; }
+    header small{ display:block; margin-top:6px; font-size:13px; color:#ffeaa7; }
+    main{ padding:20px; max-width:1100px; margin:auto; }
+    .panel{ background:var(--card); border:2px solid var(--border); padding:16px; margin-bottom:16px; }
+    .grid{ display:grid; grid-template-columns: 1fr; gap:10px; }
+    @media (min-width: 860px){
+      .grid{ grid-template-columns: 2fr 1fr; }
+    }
+    .hint{
+      background:#fff3c4; border:1px dashed #d6b657; padding:12px; line-height:1.5;
+      font-size:14px;
+    }
+    .searchRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
+    .searchBox{ position:relative; flex: 1 1 420px; min-width: 280px; }
+    input[type="text"]{
+      width:100%; padding:12px; font-size:16px;
+      border:2px solid var(--red); outline:none; background:#fff;
+    }
+    input[type="text"]:focus{ border-color:var(--dark-red); }
+    select, button{
+      padding:10px 10px; font-size:14px;
+      border:2px solid var(--border); background:#fff; cursor:pointer;
+    }
+    button.primary{ border-color:var(--red); }
+    .stats{ font-size:14px; color:#555; margin-top:10px; display:flex; gap:12px; flex-wrap:wrap; }
+    /* Suggestions dropdown */
+    .suggest{
+      position:absolute; left:0; right:0; top:100%;
+      background:#fff; border:1px solid #ddd; z-index:20;
+      max-height: 320px; overflow:auto; display:none;
+    }
+    .suggest.open{ display:block; }
+    .suggest .item{
+      padding:10px 10px; border-bottom:1px dotted #ddd;
+      display:flex; justify-content:space-between; gap:10px;
+    }
+    .suggest .item:hover{ background:#fff7dc; }
+    .pill{ font-size:12px; color:#444; border:1px solid #ddd; padding:2px 6px; border-radius:999px; white-space:nowrap; }
+    /* A–Z bar */
+    .azbar{ display:flex; flex-wrap:wrap; gap:6px; }
+    .azbar button{
+      padding:6px 8px; font-size:13px; border:1px solid #ddd;
+    }
+    .azbar button.active{ border-color:var(--red); background:#fff2b2; }
+    .entry{ padding:12px 8px; border-bottom:1px dotted #ccc; line-height:1.65; }
+    .entry:last-child{ border-bottom:none; }
+    .word{ font-size:20px; font-weight:bold; color:var(--dark-red); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
+    .pos{ font-style:italic; color:var(--muted); font-size:14px; }
+    .meaning{ margin-top:6px; padding-left:12px; }
+    .meaning span{ display:block; margin-bottom:4px; }
+    .muted{ color:var(--muted); }
+    .highlight{ background:#fff2b2; font-weight:bold; }
+    footer{
+      text-align:center; padding:12px; font-size:13px; color:#555;
+      border-top:2px solid var(--border); margin-top:30px;
+    }
+    .kbd{ border:1px solid #bbb; background:#f7f7f7; padding:1px 6px; border-radius:4px; }
+  </style>
+</head>
+<body>
+<header>
+  <h1>TỪ ĐIỂN TIẾNG VIỆT – HOÀNG PHÊ</h1>
+  <small>Tra cứu offline · Không dấu + gợi ý · A–Z bucket · PWA · dev, 2026</small>
+</header>
+<main>
+  <div class="panel hint" id="hint100">
+    <b>Gợi ý tra cứu (100 từ):</b>
+    Gõ từ cần tra ở ô tìm kiếm; bạn có thể gõ <b>không dấu</b> (ví dụ <i>an</i> sẽ tìm <i>ăn, ân, ắn…</i>).
+    Dùng <b>gợi ý</b> xuất hiện ngay dưới ô để chọn nhanh (Enter để tra).
+    Bấm các nút <b>A–Z</b> để giới hạn phạm vi, giúp kết quả nhanh hơn khi từ khóa ngắn.
+    Dùng bộ lọc <b>Từ loại</b> để chỉ xem danh từ/động từ/tính từ…
+    Bật <b>Tìm mờ</b> để chịu lỗi gõ gần đúng (ví dụ “anng” vẫn ra “ăn”).
+    Mẹo: nhấn <span class="kbd">Esc</span> để xoá gõ, nhấn <span class="kbd">↓</span> để đi xuống danh sách gợi ý.
+  </div>
+  <div class="panel">
+    <div class="searchRow">
+      <div class="searchBox">
+        <input id="searchInput" type="text" placeholder="Nhập từ cần tra… (không dấu cũng được)" autocomplete="off" />
+        <div id="suggest" class="suggest" aria-label="Gợi ý"></div>
+      </div>
+      <select id="posFilter" title="Lọc theo từ loại">
+        <option value="">Tất cả từ loại</option>
+        <option value="d">Danh từ</option>
+        <option value="đg">Động từ</option>
+        <option value="t">Tính từ</option>
+        <option value="tr">Trợ từ</option>
+        <option value="c">Cảm từ</option>
+        <option value="p">Phụ từ</option>
+        <option value="k">Kết từ</option>
+        <option value="đ">Đại từ</option>
+      </select>
+      <label style="display:flex; align-items:center; gap:8px;">
+        <input id="fuzzyToggle" type="checkbox" />
+        <span>Tìm mờ (fuzzy)</span>
+      </label>
+      <button class="primary" id="btnInstall" style="display:none;">Cài như App</button>
+      <button id="btnClear">Xoá</button>
+    </div>
+    <div class="stats" id="stats">Đang tải dữ liệu…</div>
+  </div>
+  <div class="panel">
+    <div style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;">
+      <div>
+        <b>Giới hạn A–Z:</b> <span class="muted">giúp tìm nhanh khi từ khóa ngắn</span>
+      </div>
+      <div class="azbar" id="azbar"></div>
+    </div>
+  </div>
+  <div class="panel" id="results"></div>
+</main>
+<footer>
+  Dữ liệu: Từ điển tiếng Việt (Hoàng Phê) · Chạy offline hoàn toàn (qua localhost)
+</footer>
+<script>
+/* =========================
+   0) PWA: Service Worker
+========================= */
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("./sw.js").catch(() => {});
+  });
+}
+/* =========================
+   1) Utils: Normalize + Highlight
+========================= */
+function normalizeVN(s) {
+  // NFD tách dấu, bỏ dấu; riêng đ/Đ -> d
+  return (s || "")
+    .toLowerCase()
+    .replace(/đ/g, "d")
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9\s\-]/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+function escapeHTML(str){
+  return (str ?? "").replace(/[&<>"']/g, m => ({
+    "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"
+  }[m]));
+}
+function highlight(htmlText, needleNorm){
+  if(!needleNorm) return htmlText;
+  // highlight theo "không dấu": ta highlight thẳng keyword thô trong hiển thị nghĩa/từ (an toàn)
+  // tránh làm chậm: chỉ highlight theo chuỗi gõ gốc (không dấu) bằng regex nhẹ.
+  const raw = escapeHTML(htmlText);
+  const needle = escapeHTML(needleNorm);
+  if(!needle) return raw;
+  // regex an toàn (đã escape)
+  const re = new RegExp("(" + needle.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")", "ig");
+  return raw.replace(re, '<span class="highlight">$1</span>');
+}
+/* =========================
+   2) Fuzzy: Edit Distance (có chặn)
+========================= */
+function editDistanceWithin(a, b, maxDist){
+  // Damerau-Levenshtein giản lược + early-exit
+  if (Math.abs(a.length - b.length) > maxDist) return maxDist + 1;
+  const n=a.length, m=b.length;
+  const dp = Array.from({length:n+1}, () => new Array(m+1).fill(0));
+  for(let i=0;i<=n;i++) dp[i][0]=i;
+  for(let j=0;j<=m;j++) dp[0][j]=j;
+  for(let i=1;i<=n;i++){
+    let rowMin = Infinity;
+    for(let j=1;j<=m;j++){
+      const cost = a[i-1]===b[j-1] ? 0 : 1;
+      let val = Math.min(
+        dp[i-1][j] + 1,
+        dp[i][j-1] + 1,
+        dp[i-1][j-1] + cost
+      );
+      // transposition
+      if(i>1 && j>1 && a[i-1]===b[j-2] && a[i-2]===b[j-1]){
+        val = Math.min(val, dp[i-2][j-2] + 1);
+      }
+      dp[i][j]=val;
+      rowMin = Math.min(rowMin, val);
+    }
+    if(rowMin > maxDist) return maxDist + 1; // early exit
+  }
+  return dp[n][m];
+}
+/* =========================
+   3) Data: Load + Index A–Z
+========================= */
+const posLabel = {
+  "d":"danh từ","đg":"động từ","t":"tính từ","tr":"trợ từ","c":"cảm từ","p":"phụ từ","k":"kết từ","đ":"đại từ"
+};
+let ALL = [];                 // toàn bộ mục
+let INDEX = new Map();        // bucket A–Z + "0" (khác)
+let ACTIVE_BUCKET = "";       // "" = tất cả
+let SUGGEST_LIMIT = 12;
+let RESULTS_LIMIT = 400;
+function bucketKeyFromWord(word){
+  const n = normalizeVN(word);
+  const ch = n[0] || "";
+  if(ch >= "a" && ch <= "z") return ch.toUpperCase();
+  if(ch >= "0" && ch <= "9") return "0";
+  return "#";
+}
+function buildIndex(entries){
+  INDEX = new Map();
+  for(const e of entries){
+    const k = bucketKeyFromWord(e.tu);
+    if(!INDEX.has(k)) INDEX.set(k, []);
+    // precompute normalized fields để tìm nhanh
+    const tuNorm = normalizeVN(e.tu);
+    const nghiaText = (e.nghia || []).join(" ");
+    const nghiaNorm = normalizeVN(nghiaText);
+    INDEX.get(k).push({
+      ...e,
+      _tuNorm: tuNorm,
+      _nghiaNorm: nghiaNorm
+    });
+  }
+}
+function getWorkingSet(){
+  if(!ACTIVE_BUCKET) return ALL;
+  return INDEX.get(ACTIVE_BUCKET) || [];
+}
+/* =========================
+   4) Search: exact / contains / fuzzy + pos filter
+========================= */
+function searchEntries(queryRaw, pos, fuzzyOn){
+  const qNorm = normalizeVN(queryRaw);
+  const set = getWorkingSet();
+  if(!qNorm){
+    return set.slice(0, 200);
+  }
+  // Tối ưu: lọc từ loại trước (nhanh)
+  let candidates = pos ? set.filter(e => e.tu_loai === pos) : set;
+  // 1) Exact + Prefix + Contains (ưu tiên)
+  const exact = [];
+  const prefix = [];
+  const contains = [];
+  const inMeaning = [];
+  for(const e of candidates){
+    if(e._tuNorm === qNorm) exact.push(e);
+    else if(e._tuNorm.startsWith(qNorm)) prefix.push(e);
+    else if(e._tuNorm.includes(qNorm)) contains.push(e);
+    else if(e._nghiaNorm.includes(qNorm)) inMeaning.push(e);
+  }
+  // 2) Fuzzy (chỉ chạy trên phần còn lại, giới hạn)
+  let fuzzy = [];
+  if(fuzzyOn){
+    const pool = candidates
+      .filter(e => !exact.includes(e) && !prefix.includes(e) && !contains.includes(e))
+      .slice(0, 2500);
+    const maxDist = qNorm.length <= 4 ? 1 : (qNorm.length <= 7 ? 2 : 3);
+    const scored = [];
+    for(const e of pool){
+      // chỉ fuzzy theo "từ", không fuzzy theo nghĩa (đỡ nặng)
+      const d = editDistanceWithin(qNorm, e._tuNorm, maxDist);
+      if(d <= maxDist){
+        scored.push({e, d});
+      }
+    }
+    scored.sort((a,b) => a.d - b.d || a.e._tuNorm.length - b.e._tuNorm.length);
+    fuzzy = scored.slice(0, 120).map(x => x.e);
+  }
+  const merged = [...exact, ...prefix, ...contains, ...fuzzy, ...inMeaning];
+  // loại trùng
+  const seen = new Set();
+  const out = [];
+  for(const e of merged){
+    const key = e.tu + "||" + e.tu_loai + "||" + (e.nghia?.[0] || "");
+    if(seen.has(key)) continue;
+    seen.add(key);
+    out.push(e);
+    if(out.length >= RESULTS_LIMIT) break;
+  }
+  return out;
+}
+/* =========================
+   5) UI: Render Results + Suggestions
+========================= */
+const $ = (id) => document.getElementById(id);
+const input = $("searchInput");
+const suggestBox = $("suggest");
+const resultsBox = $("results");
+const statsBox = $("stats");
+const posFilter = $("posFilter");
+const fuzzyToggle = $("fuzzyToggle");
+const btnClear = $("btnClear");
+function renderResults(list, queryRaw){
+  const qNorm = normalizeVN(queryRaw);
+  resultsBox.innerHTML = "";
+  if(!list.length){
+    resultsBox.innerHTML = `<div class="muted">Không tìm thấy kết quả.</div>`;
+    return;
+  }
+  for(const item of list){
+    const div = document.createElement("div");
+    div.className = "entry";
+    const wordHTML = highlight(item.tu, qNorm);
+    const posText = item.tu_loai_day_du || posLabel[item.tu_loai] || item.tu_loai;
+    let html = `
+      <div class="word">
+        ${wordHTML}
+        <span class="pos">(${escapeHTML(posText)})</span>
+      </div>
+      <div class="meaning">
+    `;
+    const nghia = item.nghia || [];
+    for(let i=0;i<nghia.length;i++){
+      const m = highlight(nghia[i], qNorm);
+      html += `<span>${i+1}. ${m}</span>`;
+    }
+    html += `</div>`;
+    div.innerHTML = html;
+    resultsBox.appendChild(div);
+  }
+}
+function renderSuggestions(list){
+  suggestBox.innerHTML = "";
+  if(!list.length){
+    suggestBox.classList.remove("open");
+    return;
+  }
+  for(const item of list){
+    const row = document.createElement("div");
+    row.className = "item";
+    row.innerHTML = `
+      <div><b>${escapeHTML(item.tu)}</b> <span class="muted">(${escapeHTML(item.tu_loai_day_du || posLabel[item.tu_loai] || item.tu_loai)})</span></div>
+      <span class="pill">${escapeHTML(bucketKeyFromWord(item.tu))}</span>
+    `;
+    row.addEventListener("mousedown", (ev) => {
+      ev.preventDefault();
+      input.value = item.tu;
+      runSearch(true);
+      suggestBox.classList.remove("open");
+    });
+    suggestBox.appendChild(row);
+  }
+  suggestBox.classList.add("open");
+}
+function buildSuggestions(queryRaw){
+  const qNorm = normalizeVN(queryRaw);
+  if(!qNorm) return [];
+  const set = getWorkingSet();
+  const pos = posFilter.value;
+  const fuzzyOn = fuzzyToggle.checked;
+  // ưu tiên theo "từ" (không quét nghĩa) để nhanh
+  let pool = pos ? set.filter(e => e.tu_loai === pos) : set;
+  const exact = [];
+  const prefix = [];
+  const contains = [];
+  for(const e of pool){
+    if(e._tuNorm === qNorm) exact.push(e);
+    else if(e._tuNorm.startsWith(qNorm)) prefix.push(e);
+    else if(e._tuNorm.includes(qNorm)) contains.push(e);
+    if(exact.length + prefix.length >= SUGGEST_LIMIT) break;
+  }
+  let fuzzy = [];
+  if(fuzzyOn && (exact.length + prefix.length) < SUGGEST_LIMIT){
+    const maxDist = qNorm.length <= 4 ? 1 : 2;
+    const scored = [];
+    // fuzzy trên mẫu nhỏ để mượt
+    for(const e of pool.slice(0, 1800)){
+      if(e._tuNorm.startsWith(qNorm) || e._tuNorm === qNorm) continue;
+      const d = editDistanceWithin(qNorm, e._tuNorm, maxDist);
+      if(d <= maxDist) scored.push({e,d});
+    }
+    scored.sort((a,b) => a.d - b.d || a.e._tuNorm.length - b.e._tuNorm.length);
+    fuzzy = scored.slice(0, SUGGEST_LIMIT).map(x => x.e);
+  }
+  const merged = [...exact, ...prefix, ...contains, ...fuzzy];
+  const seen = new Set();
+  const out = [];
+  for(const e of merged){
+    const k = e.tu + "||" + e.tu_loai;
+    if(seen.has(k)) continue;
+    seen.add(k);
+    out.push(e);
+    if(out.length >= SUGGEST_LIMIT) break;
+  }
+  return out;
+}
+/* =========================
+   6) A–Z Bar
+========================= */
+function buildAZBar(){
+  const az = [];
+  for(let c=65;c<=90;c++) az.push(String.fromCharCode(c));
+  az.push("0", "#");
+  const bar = $("azbar");
+  bar.innerHTML = "";
+  const btnAll = document.createElement("button");
+  btnAll.textContent = "ALL";
+  btnAll.className = ACTIVE_BUCKET ? "" : "active";
+  btnAll.addEventListener("click", () => { ACTIVE_BUCKET=""; buildAZBar(); runSearch(true); });
+  bar.appendChild(btnAll);
+  for(const k of az){
+    const b = document.createElement("button");
+    b.textContent = k;
+    b.className = (ACTIVE_BUCKET === k) ? "active" : "";
+    b.title = "Giới hạn theo nhóm " + k;
+    b.addEventListener("click", () => {
+      ACTIVE_BUCKET = k;
+      buildAZBar();
+      runSearch(true);
+    });
+    bar.appendChild(b);
+  }
+}
+/* =========================
+   7) Controller: Debounce Search
+========================= */
+let tmr = null;
+function setStats(text){
+  statsBox.textContent = text;
+}
+function runSearch(fromPick=false){
+  const q = input.value || "";
+  const pos = posFilter.value;
+  const fuzzyOn = fuzzyToggle.checked;
+  const res = searchEntries(q, pos, fuzzyOn);
+  const scope = ACTIVE_BUCKET ? ` · Bucket ${ACTIVE_BUCKET}` : " · Tất cả";
+  setStats(
+    `Kết quả: ${res.length.toLocaleString("vi-VN")}${scope}` +
+    (pos ? ` · Lọc: ${posLabel[pos] || pos}` : "") +
+    (fuzzyOn ? " · Fuzzy: ON" : "")
+  );
+  renderResults(res, q);
+  // suggestions: chỉ hiện khi đang gõ, không phải khi click chọn
+  if(!fromPick){
+    const sug = buildSuggestions(q);
+    renderSuggestions(sug);
+  }
+}
+function debounceSearch(){
+  clearTimeout(tmr);
+  tmr = setTimeout(() => runSearch(false), 60);
+}
+/* =========================
+   8) Events
+========================= */
+input.addEventListener("input", () => debounceSearch());
+posFilter.addEventListener("change", () => runSearch(true));
+fuzzyToggle.addEventListener("change", () => runSearch(true));
+btnClear.addEventListener("click", () => {
+  input.value = "";
+  suggestBox.classList.remove("open");
+  runSearch(true);
+  input.focus();
+});
+document.addEventListener("click", (e) => {
+  if(!suggestBox.contains(e.target) && e.target !== input){
+    suggestBox.classList.remove("open");
+  }
+});
+input.addEventListener("keydown", (e) => {
+  if(e.key === "Escape"){
+    input.value = "";
+    suggestBox.classList.remove("open");
+    runSearch(true);
+  }
+  if(e.key === "Enter"){
+    suggestBox.classList.remove("open");
+    runSearch(true);
+  }
+});
+/* =========================
+   9) Load JSON (cùng thư mục)
+========================= */
+(async function boot(){
+  try{
+    setStats("Đang tải dữ liệu…");
+    const res = await fetch("./tu_dien_hoang_phe_clean.json", { cache: "no-cache" });
+    const data = await res.json();
+    // data.muc_tu theo file JSON bạn đang dùng
+    ALL = (data.muc_tu || []);
+    buildIndex(ALL);
+    buildAZBar();
+    setStats(`Đã tải: ${ALL.length.toLocaleString("vi-VN")} mục từ · Sẵn sàng tra cứu`);
+    renderResults(getWorkingSet().slice(0, 160), "");
+  }catch(err){
+    console.error(err);
+    setStats("❌ Không đọc được JSON. Hãy chạy bằng server nội bộ (localhost).");
+    resultsBox.innerHTML = `
+      <div class="muted">
+        <b>Không load được dữ liệu.</b><br/>
+        Mở terminal trong thư mục và chạy: <span class="kbd">python -m http.server</span><br/>
+        Sau đó mở: <span class="kbd">http://localhost:8000</span>
+      </div>
+    `;
+  }
+})();
+</script>
+<script>
+/* =========================
+   10) PWA Install Button
+========================= */
+let deferredPrompt = null;
+const btnInstall = document.getElementById("btnInstall");
+window.addEventListener("beforeinstallprompt", (e) => {
+  e.preventDefault();
+  deferredPrompt = e;
+  btnInstall.style.display = "inline-block";
+});
+btnInstall?.addEventListener("click", async () => {
+  if(!deferredPrompt) return;
+  deferredPrompt.prompt();
+  await deferredPrompt.userChoice;
+  deferredPrompt = null;
+  btnInstall.style.display = "none";
+});
+</script>
+</body>
 </html>