Hoc-han-tu

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #golang #macos #nodejs #windows #awesome #cli #awesome-list #pytorch #openai #open-source

(★ 9)

Vibe code 1 chiếc tool hỗ trợ học từ vựng Hán tự

Hoc-han-tu Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 漢字 Kho — Hán Tự Cá Nhân

Công cụ học và quản lý Hán tự cá nhân, chạy hoàn toàn trên trình duyệt, không cần server/backend. Dữ liệu lưu trong `localStorage` của trình duyệt.

**🌐 Xem online:** https://hoponluu.github.io/Hoc-han-tu/

---

## Tính năng

**Graph view** — hiển thị toàn bộ kho chữ dưới dạng mạng lưới node. Ba loại kết nối:
- Tím: cùng bộ thủ
- Vàng: đồng âm Hán Việt (so sánh chính xác, có dấu thanh)
- Xanh ngọc: từ ghép chung

**List view** — bảng danh sách, có thể sort theo Hán Việt / Pinyin / Jyutping (click vào tiêu đề cột).

**Flashcard — 3 chế độ:**

| Chế độ | Pool | Cơ chế |
|--------|------|--------|
| ✦ Học mới | `status: new` | Nhập âm HV → đúng → mastered, sai → reviewing |
| ↻ Ôn tập | `status: reviewing` | Nhập âm HV → đúng → mastered, sai → reviewing |
| ★ Kiểm tra | `status: mastered` | Nhập âm HV → đúng → giữ mastered, sai → reviewing |

Phím tắt: `Enter` kiểm tra · `Del` undo thẻ vừa xong.

**Filter** — lọc theo trạng thái (Tất cả / Mới / Đang ôn / Đã thuộc) + ô tìm kiếm.

---

## Cấu trúc thư mục

```
.
├── index.html   # toàn bộ app (HTML/CSS/JS), chỉ phụ thuộc CDN d3.js
└── data/        # các bộ từ vựng mẫu, dùng để Import vào app
    ├── loi-bai-hat-nguon.json   # dữ liệu thô rút từ lời bài hát (Quảng Đông)
    ├── import-gan-day.json      # bộ "近日離開"
    ├── import-thong-khoc.json   # bộ "痛哭"
    └── import-ban-vong.json     # bộ "盼望"
```

`index.html` là single-page app độc lập — mở trực tiếp bằng trình duyệt hoặc host tĩnh (GitHub Pages, Netlify, v.v.) là chạy được, không cần build.

---

## Chạy thử / host online

Trang đã được deploy tự động qua **GitHub Pages** (xem `.github/workflows/deploy-pages.yml`) mỗi khi có commit mới vào nhánh `main`. Truy cập:

👉 **https://hoponluu.github.io/Hoc-han-tu/**

> Lần đầu setup: vào repo **Settings → Pages → Build and deployment → Source**, chọn **GitHub Actions**. Sau đó mỗi lần push lên `main`, workflow sẽ tự build & deploy lại.

### Chạy local

Không cần cài gì thêm, chỉ cần mở file:

```bash
open index.html        # macOS
xdg-open index.html    # Linux
```

Hoặc dùng static server bất kỳ, ví dụ:

```bash
python3 -m http.server 8000
# rồi mở http://localhost:8000
```

---

## Cấu trúc data mỗi chữ

```json
{
  "id": "lyr001",
  "char": "心",
  "hanViet": "Tâm",
  "pinyin": "xīn",
  "jyutping": "sam1",
  "meaning": "Tim; tâm; lòng",
  "compounds": [
    { "word": "真心", "reading": "chân tâm", "meaning": "chân thành" }
  ],
  "radical": "心",
  "notes": "",
  "status": "new",
  "dateAdded": "2026-04-14"
}
```

`status` có 3 giá trị: `new` · `reviewing` · `mastered`

---

## Import JSON

Tạo file `.json` là mảng các object theo cấu trúc trên, rồi dùng nút **↑ Import** trên header (có thể thử ngay với các file mẫu trong `data/`).

Logic dedup khi import:
- Chữ chưa có → thêm mới
- Chữ đã có, status trong file ≠ `new` → khôi phục status + notes (dùng khi chuyển máy)
- Chữ đã có, status trong file là `new` → giữ nguyên status hiện tại

Khi chữ có nhiều âm HV (ví dụ `"Vi / Vị"`), flashcard chấp nhận cả hai cách nhập, phân cách bằng `/`.

## Export JSON

Nút **↓ Export** tải về file `hantu-kho-YYYY-MM-DD.json` chứa toàn bộ dữ liệu kèm status. Dùng làm backup hoặc chuyển sang trình duyệt/máy khác.

---

## Nguồn từ vựng đã nhập (`data/`)

| File | Nguồn | Số chữ |
|------|-------|--------|
| `data/loi-bai-hat-nguon.json` | 站在樹林內就如沒氧氣... (Quảng Đông) | ~89 |
| `data/import-gan-day.json` | 近日像每樣話題總不適合你... | 124 |
| `data/import-thong-khoc.json` | 痛哭的你 擁抱著痛苦的我... | 125 |
| `data/import-ban-vong.json` | 盼望你没有为我又再度暗中淌泪... | 35 |

VOCAB_300 (300 chữ thông dụng nhất Mandarin) cũng từng được nhập nhưng không có file nguồn riêng trong repo.

---

## Thêm từ vựng thủ công

Nút **+ Thêm** trên header — điền đầy đủ char / Hán Việt / Pinyin / Jyutping / nghĩa / bộ thủ.

Hoc-han-tu

Hoc-han-tu Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Hoc-han-tu

Hoc-han-tu Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README