# 📝 Quick Note — คู่มือฉบับสมบูรณ์ (v5.0.1)

> Personal note app with AI — Markdown · Semantic Search · RAG Q&A · Code Analysis · Share API · Public Library

**Live**: https://codehub.sj88ai.com/quick-note/
**Public Viewer**: https://codehub.sj88ai.com/quick-note-view/
**AI Maker**: https://codehub.sj88ai.com/quick-note-maker/

---

## 🚀 เริ่มต้นใช้งาน (30 วินาที)

1. **เปิดแอป**: https://codehub.sj88ai.com/quick-note/
2. **สร้างโน้ตใหม่**: กด `＋ โน้ตใหม่` หรือกด `⌘N` / `Ctrl+N`
3. **ตั้งชื่อ + เนื้อหา**: รองรับ Markdown
4. **บันทึก**: กดปุ่ม `💾 บันทึก`
5. **AI Enhance** (ถ้าตั้ง API key ไว้): กด `✨ AI` เพื่อตั้งชื่อ/แท็ก/สรุปอัตโนมัติ
6. **แชร์ Public**: กด `🔗 แชร์` → ได้ URL ส่งให้ใครก็ได้

> 💡 ทุกอย่างเก็บใน browser (localStorage + IndexedDB) — **ไม่มี server storage** ข้อมูลของคุณ

---

## 📦 ที่เก็บข้อมูล

| สิ่งที่เก็บ | ที่ไหน | หมายเหตุ |
|------|-------|---------|
| โน้ต (title, body, tags, color, pin) | `localStorage.qnotes` | ~5MB limit |
| ไฟล์แนบ (รูป/วิดีโอ) | `IndexedDB.attachments` | ไม่จำกัด (จำกัดด้วย disk) |
| Embeddings (สำหรับ semantic search) | `IndexedDB.embeddings` | 1536-dim per note |
| Settings (AI keys, theme) | `localStorage.q*` | ความปลอดภัยขึ้นกับ browser |
| Public Library (shared notes) | `localStorage.qpublic_lib` | max 50 notes |

---

## ✨ Features ครบ (22 features)

### พื้นฐาน
1. 📝 **สร้าง/แก้ไข/ลบโน้ต** — CRUD operations
2. 📌 **ปักหมุด** — pin notes ไว้บนสุด
3. 🎨 **8 สี** — แยกหมวดหมดด้วยสายตา
4. 🏷️ **แท็ก** — จัดหมวดอิสระ
5. 🗑️ **ถังขยะ** — restore ได้
6. 📎 **ไฟล์แนบ** — รูปภาพ, วิดีโอ, URL
7. 🔍 **Search** — title + body + tags + ค้นหาด้วย semantic
8. ⌘K **Command Palette** — เข้าถึงฟีเจอร์ทั้งหมดด้วยคีย์บอร์ด
9. 📜 **Search History** — จำการค้นหา 10 รายการล่าสุด
10. 📊 **Sort 7 options** — วันที่, ชื่อ, สี, ขนาด, ปักหมุด

### Markdown (v4.1)
11. ✏️ **Markdown Toolbar** — 14 ปุ่ม (B/I/S/H1-3/list/todo/link/code/quote)
12. 👁 **Preview Tab** — ดู markdown rendered ทันที
13. 🖼️ **Card Preview** — strip markdown ในหน้าการ์ด

### AI (v3.0+)
14. 🧠 **Semantic Search** — ค้นหาด้วย embeddings (1536-dim, embo-01 / OpenAI)
15. 💬 **RAG Q&A "ถามโน้ตของฉัน"** — AI ตอบคำถามจากโน้ตทั้งหมด
16. ✨ **AI Enhance** — ตั้งชื่อ/แท็ก/สรุปอัตโนมัติ
17. 💻 **Code Analysis** — 5 โหมด (อธิบาย/หา Bug/Refactor/Comment/Test)
18. 🤖 **3 Providers** — MiniMax, OpenAI, Anthropic

### UX
19. 🌙 **Dark Mode** — auto ตาม system หรือ toggle
20. 📱 **Mobile FAB** — ปุ่มใหญ่สร้างโน้ต บน mobile
21. 📖 **In-app Manual** — กด `Ctrl+/` เปิดคู่มือในแอป
22. 📋 **Command Palette** — ⌘K fuzzy search actions

### **Sharing (v5.0)**
23. 🔗 **Share URL** — สร้าง public URL แบบ base64-encoded
24. 👁 **Public Viewer** — `/quick-note-view/` คนทั่วไปดูได้
25. 🤖 **AI Maker API** — `/api/quick-note-maker` รับ JSON/Form คืน URL
26. 🌐 **Public Library** — pill ใน sidebar เก็บ shared notes
27. 🖼️ **OG Image (v5.1)** — `/api/quick-note-og` generate 1200x630 PNG
28. ⏰ **Expiry Link (v5.1)** — note มี `exp` timestamp หมดอายุอัตโนมัติ

---

## 🤖 AI Setup (ใช้ 5 นาทีแรก)

1. กด **⚙️ Settings** (มุมขวาบน)
2. เลือก **Provider**: MiniMax / OpenAI / Anthropic
3. ใส่ **API Key** + กด **🧪 ทดสอบ**
4. เปิด **Auto features** ที่ต้องการ:
   - ✏️ Auto Title — ตั้งชื่ออัตโนมัติ
   - 📝 Auto Summary — สรุปสั้นๆ
   - 🏷️ Auto Tags — แท็กอัตโนมัติ
   - 🧠 Auto Embed — index สำหรับ semantic search

### Provider URLs

| Provider | LLM endpoint | Embedding endpoint | Models |
|----------|--------------|--------------------|----|
| **MiniMax** | `https://api.minimax.io/v1/text/chatcompletion_v2` | `https://api.minimax.io/v1/embeddings` | LLM: any, Embed: `embo-01` |
| **OpenAI** | `https://openai.com/v1/chat/completions` | `https://openai.com/v1/embeddings` | `gpt-4o-mini`, `text-embedding-3-small` |
| **Anthropic** | `https://api.anthropic.com/v1/messages` | ❌ ไม่มี (ใช้ MiniMax/OpenAI สำหรับ embed) | `claude-3-5-sonnet` |

---

## 🧠 Semantic Search

**Setup** (ครั้งแรก):
1. ตั้ง Provider + API key
2. กด **🧠 Index All Notes** ใน Settings
3. รอ 1-2 นาที (ขึ้นกับจำนวน note)

**ใช้งาน**:
1. กด **🧠 ปุ่ม** ใน search bar (เปลี่ยนเป็น semantic mode)
2. พิมพ์คำถาม เช่น "เรื่องการเงิน"
3. AI จะหา note ที่เกี่ยวข้องโดยดู **ความหมาย** ไม่ใช่แค่ keyword
4. **AI XX%** badge บนการ์ด = คะแนนความใกล้เคียง

**ตัวอย่าง**:
- ค้นหา: "กาแฟ" → เจอ note เรื่อง "ร้านกาแฟใกล้บ้าน" (95%), "Starbucks opening" (82%)
- ค้นหา: "งานประชุม" → เจอ "Meeting agenda", "Stand-up notes"

---

## 💬 RAG Q&A "ถามโน้ตของฉัน"

**วิธีใช้**:
1. กด ⌘K → พิมพ์ "ถามโน้ต" → Enter (หรือ shortcut `Q`)
2. พิมพ์คำถาม เช่น "เดือนที่แล้วใช้จ่ายเท่าไหร่"
3. AI จะ:
   - **Embed** คำถาม
   - **ค้นหา** top-5 notes ที่เกี่ยวข้อง (cosine > 0.15)
   - **ส่ง context** ไปให้ LLM
   - **ตอบ** พร้อม **[Note N]** citations (คลิกได้)

**ตัวอย่าง**:
- ❓ "สรุปงานที่ค้างไว้" → AI ตอบพร้อมอ้างอิง [Note 1] [Note 3]
- ❓ "ไอเดียทำอะไรได้บ้าง" → AI รวมไอเดียจาก notes ที่ index แล้ว
- ❓ "รายจ่ายเดือนนี้" → AI บอกยอดรวม + ลิงก์ไปยังต้นทาง

---

## 💻 Code Analysis (v4.4)

**5 โหมด**:
- 📖 **อธิบาย** — code ทำอะไร + แนะนำปรับปรุง
- 🐛 **หา Bug** — วิเคราะห์ bug + edge cases
- ✨ **Refactor** — code ใหม่ที่ดีกว่า + เหตุผล
- 📝 **ใส่ Comment** — JSDoc + inline + types
- 🧪 **Test** — unit test + edge cases

**วิธีใช้**:
1. เปิด note ที่มี code block (```python ... ```)
2. กด ⌘K → "วิเคราะห์" หรือ shortcut `C`
3. เลือกโหมด
4. AI วิเคราะห์ → คำตอบพร้อม Copy button

---

## 🔗 Share API + Public Library (v5.0)

### แชร์ note จากในแอป
1. เปิด note
2. กด **🔗 แชร์** (ใน footer)
3. ใส่ **ผู้เขียน** (จะแสดงใน viewer)
4. เลือก ☑️ **เพิ่มใน Public Library** (เก็บใน localStorage)
5. **Copy URL** → ส่งให้ใครก็ได้

### ใช้ AI Maker (programmatic)
```
GET https://codehub.sj88ai.com/api/quick-note-maker?title=Hello&body=World&tags=demo&color=blue
```

ตอบ JSON:
```json
{
  "ok": true,
  "share_url": "https://codehub.sj88ai.com/quick-note-view/?d=eyJ0Ijoi...",
  "note": {"title": "Hello", "body": "World", "tags": ["demo"], "color": "blue", ...},
  "viewer_url": "https://codehub.sj88ai.com/quick-note-view/",
  "expires_at": null
}
```

POST variants:
```bash
# JSON body
curl -X POST https://codehub.sj88ai.com/api/quick-note-maker \
  -H "Content-Type: application/json" \
  -d '{"title":"Hello","body":"World","color":"purple","tags":["demo"],"author":"AI"}'

# Form-encoded
curl -X POST https://codehub.sj88ai.com/api/quick-note-maker \
  -d "title=Test" -d "body=Hello" -d "color=green"

# With expiry (7 days)
curl ".../api/quick-note-maker?title=Temp&ttl_days=7"
```

### Public Library
- pill สีเขียวที่ sidebar (ใต้ tags)
- แสดง count ของ shared notes ทั้งหมด
- คลิกเพื่อดู list + ลบ

### Social Preview (OG Image) v5.1
ทุก share URL มี **dynamic OG image** (1200×630 PNG):
- Title + author + color accent strip
- Body preview
- codehub.sj88ai.com branding
- Generated via `/api/quick-note-og?d=<base64>`

ทดสอบ: `https://codehub.sj88ai.com/api/quick-note-og?title=Hello&author=AI&color=purple`

### Expiry Link (v5.1)
เพิ่ม `ttl_days` ในการสร้าง note → note จะหมดอายุอัตโนมัติ:
```json
{"title": "Secret", "ttl_days": 7}
```
→ Viewer แสดง "⏰ Note หมดอายุแล้ว" เมื่อเลย 7 วัน

---

## ⌨️ Keyboard Shortcuts

| Key | Action |
|-----|--------|
| `⌘K` / `Ctrl+K` | เปิด Command Palette |
| `⌘N` / `Ctrl+N` | สร้างโน้ตใหม่ |
| `Ctrl+/` | เปิดคู่มือ |
| `Q` (palette) | เปิด RAG Q&A |
| `C` (palette) | เปิด Code Analysis |
| `?` (palette) | เปิด Manual |
| `Esc` | ปิด modal |
| `Ctrl+Enter` | Toggle markdown preview |

---

## ⌨️ Palette Actions (12 actions)

| Action | Shortcut | Description |
|--------|----------|-------------|
| 📖 คู่มือการใช้งาน | `?` | เปิด in-app manual |
| 💬 ถามโน้ตของฉัน (AI) | `Q` | RAG Q&A modal |
| 💻 วิเคราะห์ Code (AI) | `C` | Code Analysis modal |
| ✏️ โน้ตใหม่ | `N` | Open new note editor |
| 📌 ดูโน้ตปักหมุด | `P` | Filter pinned notes |
| 🗑️ ถังขยะ | `T` | View trash |
| 📚 ทั้งหมด | `A` | Show all notes |
| 🧠 Toggle Semantic | `S` | Switch keyword/semantic search |
| 🧠 Index All Notes | `I` | Re-embed all notes |
| 🌙 Toggle Theme | `D` | Light/dark mode |
| 📤 Export | `E` | Download JSON backup |
| 📥 Import | `M` | Restore from JSON |
| ⚙️ Settings | `,` | Open AI/theme settings |
| ✨ AI Enhance | — | Enhance current note |
| 📋 Grid/List View | — | Toggle view mode |

---

## ⚙️ Settings Reference

| Setting | Options | Default |
|---------|---------|---------|
| Provider | MiniMax/OpenAI/Anthropic | — |
| Model | per provider | auto |
| API Key | per provider | — |
| Auto Title | on/off | off |
| Auto Summary | on/off | off |
| Auto Tags | on/off | off |
| Auto Embed | on/off | off |
| Theme | light/dark/auto | auto |
| Embedding Provider | MiniMax/OpenAI | MiniMax |

---

## 🛡️ Privacy

- ✅ ทุกอย่างเก็บใน browser ของคุณ
- ✅ ไม่มี server storage สำหรับ notes
- ✅ AI calls ส่งเฉพาะ note content ไป LLM (ไม่มี metadata)
- ⚠️ ถ้าใช้ Share API — URL มี note data (base64) ใครเห็น URL ก็อ่านได้
- ⚠️ ใช้ `ttl_days` ถ้าต้องการ auto-expire

---

## 💾 Backup & Restore

**Export**:
- ⌘K → "Export" → download `.json`
- มี notes + tags + colors + attachments (เป็น base64)

**Import**:
- ⌘K → "Import" → เลือก `.json` file
- รวมเข้ากับ notes เดิม (ไม่ทับ)

**Manual backup** (เก็บไว้ local):
```bash
# Browser DevTools Console:
JSON.stringify(localStorage)  # copy output to file
```

---

## ❓ FAQ

### Q: ข้อมูลหายได้ไหม?
A: ขึ้นกับ browser — ถ้า clear data หรือ uninstall ข้อมูลหาย ใช้ Export เป็นประจำ

### Q: AI คิดตังค์ไหม?
A: ขึ้นกับ Provider — คุณจ่ายตรงกับ MiniMax/OpenAI/Anthropic ตาม usage

### Q: ใช้บน mobile ได้ไหม?
A: ได้ — มี FAB button + responsive layout

### Q: Sync ระหว่างเครื่องได้ไหม?
A: ตอนนี้ยังไม่ — ใช้ Export/Import หรือ Share URL

### Q: เปรียบเทียบกับ Notion/Keep?
A: Quick Note = local-first, AI-heavy, share-friendly, no signup

---

## 🔧 Troubleshooting

**ปัญหา**: AI ไม่ตอบ
- ตรวจ API key ใน Settings
- กด 🧪 ทดสอบการเชื่อมต่อ
- ดู Console (F12) หา error

**ปัญหา**: Semantic search ไม่เจอ
- กด "Index All Notes" ใน Settings
- รอ 1-2 นาที
- ลอง toggle semantic mode (🧠 button)

**ปัญหา**: Share URL ไม่ทำงาน
- ตรวจ URL ครบ
- ตรวจ note ยังไม่หมดอายุ (ถ้าใช้ ttl_days)
- ลอง decode base64 ใน DevTools console: `atob('...')`

---

## 🗺 Roadmap (อนาคต)

- ☁️ **Cloud Sync** — sync ระหว่างอุปกรณ์
- 📱 **PWA + Offline** — ติดตั้งเป็น app + ใช้ offline
- 🎤 **Voice Notes** — อัดเสียง + auto-transcribe
- 🖼️ **OCR from Images** — ดึงข้อความจากรูป
- 🎨 **Drawing/Canvas** — วาดแทนพิมพ์
- 📅 **Calendar View** — ดูตามวันที่
- 🔗 **Backlinks** — เชื่อม note ถึงกัน
- 📊 **Stats Dashboard** — สถิติการเขียน

---

## 📡 API Reference

### `GET /api/quick-note-maker`
Generate share URL.

**Params**:
- `title` (required) — หัวข้อ
- `body` (optional) — เนื้อหา
- `tags` (optional) — comma-separated
- `color` (optional) — red/blue/green/amber/purple/pink/cyan/indigo
- `author` (optional) — ชื่อผู้เขียน
- `ttl_days` (optional) — จำนวนวันก่อนหมดอายุ (0-365)

**Response**:
```json
{
  "ok": true,
  "share_url": "https://codehub.sj88ai.com/quick-note-view/?d=...",
  "note": {...},
  "viewer_url": "https://codehub.sj88ai.com/quick-note-view/",
  "expires_at": null
}
```

### `POST /api/quick-note-maker`
Same as GET but body in JSON/form.

**JSON Example**:
```json
{
  "title": "Hello",
  "body": "World",
  "tags": ["demo"],
  "color": "blue",
  "author": "AI",
  "ttl_days": 0
}
```

### `GET /api/quick-note-og`
Generate OG preview image (PNG).

**Params**: Same as quick-note-maker + `width`/`height`
**Response**: `image/png` (1200×630 default)

---

**ทำโดย**: Quick Note team · **Live ที่**: https://codehub.sj88ai.com/quick-note/
**Last updated**: v5.0.1 (2026-07-09)