ภาพรวมหลักการทำงาน

หัวใจของ DevLingo คือระบบ “การสืบค้นแบบหลายชั้น” ที่ชาญฉลาด: เริ่มจากการสืบค้นในเครื่องที่รวดเร็ว แล้วยกระดับไปยังการประมวลผล AI ทีละขั้น ทำให้การสืบค้นส่วนใหญ่เสร็จสิ้นภายในมิลลิวินาที และการสืบค้นที่ซับซ้อนไม่เกิน 2 วินาที

กระบวนการทำงานทั้งหมด

ผู้ใช้เลือกข้อความในแอปใดก็ได้
    ↓
[ทริกเกอร์] กดปุ่มลัด ⌘⇧D
    ↓
[ดึงข้อมูล] TextExtractor รับ:
    • ข้อความที่เลือก
    • บริบท 50 ตัวอักษรก่อนและหลัง (สำหรับ AI เข้าใจบริบท)
    • bundleIdentifier ของแอปปัจจุบัน (Xcode / Slack / GitHub ฯลฯ)
    ↓
[จัดประเภท] InputTypeDetector กำหนดประเภทอินพุต:
    • ภาษาแม่ → โหมด Express
    • คำเดี่ยว → โหมด Word
    • 2-4 คำไม่มีโครงสร้างประโยค → โหมด Phrase
    • ประโยคสมบูรณ์ ≤20 คำ → โหมด Sentence
    • หลายประโยคหรือ >20 คำ → โหมด Paragraph
    ↓
[สืบค้น] LookupCoordinator สืบค้นแบบหลายชั้น (ดูรายละเอียดด้านล่าง)
    ↓
[แสดงผล] FloatingPanelController:
    • แสดงหน้าต่างลอย NSPanel ใต้เมาส์
    • แสดง skeleton screen (แอนิเมชันโหลด)
    • เลือก View ย่อยตามโหมด (WordView / PhraseView / SentenceView ฯลฯ)
    • เมื่อข้อมูลมาถึง ค่อยๆ แสดงผลลัพธ์
    ↓
[โต้ตอบ] ผู้ใช้สามารถ:
    • คลิกปุ่มเล่นเพื่อฟังการออกเสียง
    • คลิกคำเพื่อสืบค้นแบบเรียกซ้ำ
    • บันทึกลง "สมุดคำศัพท์" (SwiftData)
    • ปิดหน้าต่างลอยและทำงานต่อ

ระบบสืบค้นแบบหลายชั้น

นี่คือกุญแจสำคัญของประสิทธิภาพ DevLingo สืบค้นตามลำดับความสำคัญ คืนค่าทันทีเมื่อพบผลลัพธ์:

ชั้นที่ 1: คลังศัพท์เทคนิคในเครื่อง (<50ms)

สำหรับอินพุตภาษาอังกฤษ จะสืบค้นจากฐานข้อมูล SQLite ในเครื่องก่อน มีศัพท์เทคนิคที่ใช้บ่อย 85+ คำ:

idempotent, deployment, microservice, containerization,
latency, throughput, cache invalidation, API gateway,
circuit breaker, distributed tracing, ...

อัตราการตรง: ประมาณ 30% ของการสืบค้นศัพท์เทคนิค ตอบสนองเร็วมาก

ชั้นที่ 2: คลังวลีเทคนิคในเครื่อง (<100ms)

สำหรับวลี 2-4 คำ สืบค้นจากฐานข้อมูลวลีในเครื่อง (50+ วลีที่มีอยู่):

yak shaving, bikeshedding, rubber ducking, code smell,
low-hanging fruit, technical debt, nerd sniping, ...

อัตราการตรง: ประมาณ 20% ของการสืบค้นวลี

ชั้นที่ 3: แคช SwiftData (<10ms)

คำศัพท์ วลี ประโยคที่ผู้ใช้เคยสืบค้นจะถูกแคชใน SwiftData ในเครื่อง หากพบก็คืนค่าทันที

ผู้ใช้เคยสืบค้น "idempotent" → สืบค้นครั้งถัดไป <10ms

อัตราการตรง: ประมาณ 50% (ขึ้นอยู่กับประวัติการใช้งาน)

ชั้นที่ 4: Claude API (0.5-2s)

หากสามชั้นแรกไม่ตรง จะเรียกใช้ Claude API เพื่อรับผลลัพธ์แบบโครงสร้าง

คำขอ:{
  "text": "gracefully degrade",
  "mode": "phrase",
  "context": "when upstream dependencies are unavailable",
  "sourceApp": "Xcode",
  "userLanguage": "th"
}

ผลลัพธ์:{
  "type": "phrase", // compound verb
  "definition_en": "...",
  "definition_th": "...",
  "examples": [...],
  "pronunciation": {...},
  "register": "technical",
  "l1_tips": "..."
}

:::note ทำไมต้องออกแบบแบบหลายชั้น

• 95% ของคำศัพท์ที่ใช้บ่อย ตรงในสามชั้นแรก คืนค่าใน <100ms
• 5% ของคำศัพท์ที่ไม่ค่อยพบ ต้องใช้ Claude API แต่ก็เพียง 1-2 วินาที
• เมื่อไม่มีเครือข่าย ยังคงสืบค้นจากคลังในเครื่องและแคชได้
• ประหยัดโควตาผู้ใช้ Claude API คิดค่าตามจำนวนการใช้งาน การออกแบบหลายชั้นลดการเรียก API ลง 95% :::

สถาปัตยกรรมแบ็กเอนด์

แบ็กเอนด์ DevLingo ปรับใช้บน Cloudflare Workers edge node เพื่อจัดการคำขอ API

แอป Mac
  ↓ HTTPS (Bearer token)
Cloudflare Workers (Edge)
  ├─ API Gateway (เราท์ Hono)
  ├─ Auth Middleware (ยืนยัน JWT)
  ├─ Lookup Endpoint (/api/lookup)
  │   └─ Claude API Client (พร็อกซีคำขอ AI)
  ├─ TTS Endpoint (/api/tts)
  │   └─ Google Cloud TTS (พร็อกซีการสังเคราะห์เสียง)
  └─ Data Sync Endpoints
      └─ Cloudflare D1 (ฐานข้อมูลผู้ใช้)

ส่วนประกอบสำคัญ

• เฟรมเวิร์ก Hono: เฟรมเวิร์ก HTTP น้ำหนักเบา ปรับให้เหมาะกับ Cloudflare Workers
• ฐานข้อมูล D1: SQLite บน Cloudflare จัดเก็บสมุดคำศัพท์และข้อมูลซิงค์ของผู้ใช้
• KV Storage: โทเค็นเซสชัน แคชจำกัดอัตรา แคชผลลัพธ์ API
• พร็อกซี Claude API: แอป Mac ส่งคำขอไปยัง Claude ผ่าน Workers เพื่อไม่ต้องเปิดเผย API key ในเครื่อง

การดึงข้อความและบริบท

TextExtractor ใช้ AXUIElement (macOS Accessibility API) เพื่อรับ:

ผู้ใช้เลือกใน Slack: "idempotent"

ผลลัพธ์การดึง:
{
  "selectedText": "idempotent",
  "beforeContext": "We need to make sure this endpoint is ",
  "afterContext": " for retry requests.",
  "sourceApp": "com.tinyspeck.slackmacgap",  // Slack
  "fullSentence": "We need to make sure this endpoint is idempotent for retry requests."
}

บริบทนี้ถูกส่งไปยัง Claude ช่วยให้ AI เข้าใจว่า “idempotent ที่นี่คือบริบทการออกแบบ API” ไม่ใช่อย่างอื่น

อัลกอริทึมตรวจจับประเภทอินพุต

if ข้อความมีภาษาแม่:
  → โหมด Express
elif จำนวนคำ == 1:
  → โหมด Word
elif จำนวนคำ in [2, 3, 4]:
  if มีโครงสร้างประโยคสมบูรณ์:
    → โหมด Sentence
  else:
    → โหมด Phrase
elif จำนวนประโยค > 1 or จำนวนคำ > 20:
  → โหมด Paragraph
else:
  → โหมด Sentence

:::tip การตรวจจับอัจฉริยะ การตรวจจับอินพุตทำในเครื่องทันที ไม่ต้องเรียก API ทำให้ผู้ใช้ไม่รู้สึกถึงความล่าช้าในขั้นตอน “การกำหนดประเภทอินพุต” :::

การแสดงหน้าต่างลอย

FloatingPanelController สร้าง NSPanel (หน้าต่างลอย):

คุณสมบัติ:
• แสดงเหนือแอปทั้งหมด (Level: screenSaver)
• ตำแหน่ง: ใต้เมาส์ (y offset +20px เพื่อไม่บัง)
• สถานะเริ่มต้น: skeleton screen (โครงร่างโหลด)
• เมื่อข้อมูลมาถึง: ค่อยๆ แสดง ทำลาย skeleton
• การโต้ตอบ: ส่งผ่านเมาส์ทั้งหมด (ไม่บล็อกแอปพื้นหลัง)
• วิธีปิด: คลิกภายนอก กด ESC หรือปิดอัตโนมัติหลัง 5 นาทีไม่มีการดำเนินการ

เป้าหมายประสิทธิภาพ

• สืบค้นคลังในเครื่อง: <50ms (เปอร์เซ็นไทล์ที่ 99)
• แคชตรง: <10ms
• end-to-end ทั้งหมด (รวม API): <2s (เปอร์เซ็นไทล์ที่ 99)
• เวลาแสดงหน้าต่างลอย: <300ms (ผู้ใช้รู้สึกว่าเร็ว)
• การสร้างเสียง TTS: ครั้งแรก <2s ครั้งถัดไปแคช <100ms

:::note กลยุทธ์แคช เสียง TTS ก็ถูกแคชทั้งในเครื่องและ KV การออกเสียงคำเดียวกันจะสังเคราะห์เพียงครั้งเดียว :::

ความเป็นส่วนตัวของข้อมูล

ข้อความผู้ใช้
  ↓
แอป Mac (เข้ารหัส HTTPS)
  ↓
Cloudflare Edge (ประมวลผลทันที)
  ├─ คำขอ Claude API (ชั่วคราว ไม่ใช้สำหรับฝึกโมเดล)
  └─ แคชผลลัพธ์ใน KV (หมดอายุอัตโนมัติ)
  ↓
คืนผลลัพธ์ไปยัง Mac
  ↓
จัดเก็บ SwiftData ในเครื่อง (ในอุปกรณ์ เลือกซิงค์คลาวด์ไปยัง D1 ได้)

เนื้อหาข้อความจะไม่ถูกจัดเก็บ ยกเว้นผู้ใช้บันทึกลงสมุดคำศัพท์ด้วยตนเอง ดูรายละเอียดที่ ความเป็นส่วนตัวและความปลอดภัยของข้อมูล

แนวคิดการออกแบบสถาปัตยกรรมของ DevLingo คือ: “ความเร็วเป็นหลัก AI เป็นตัวเสริม ความเป็นส่วนตัวมาก่อน”