Whisperer — แพลตฟอร์ม AI Voice Agent & Transcription อัตโนมัติ

1. Overview#

Whisperer คือแพลตฟอร์ม Full-stack AI Voice Agent และระบบถอดเสียงแปลงคำพูดเป็นข้อความ (Speech-to-Text Transcription) อัตโนมัติระดับ Production ที่ออกแบบมาเพื่อตอบโจทย์ผู้ใช้งานและธุรกิจในไทย ผสานโมเดล AI สำหรับประมวลผลเสียงภาษาไทยและสากล เข้ากับระบบคลัง Prompt เฉพาะทางสำหรับแปลงผลลัพธ์เป็นบทสรุป รายงานการประชุม หรือบันทึกข้อตกลงได้ในทันที

ระบบถูกออกแบบให้ทำงานแบบครบวงจร (End-to-End) ตั้งแต่การล็อกอินด้วย LINE Login และ Email Auth, ระบบจัดสรรเครดิตตามระดับสมาชิก (Multi-tier RBAC), การออกคำสั่งซื้อและสร้าง Dynamic PromptPay QR Code, ตลอดจนระบบตรวจสอบสลิปโอนเงินอัตโนมัติผ่าน Webhook OCR พร้อมมาตรการรักษาความปลอดภัยระดับสูง

2. Stories & Visual Tour#

3. Architecture & Workflows#

1
flowchart TB
2
    subgraph Client["Client Tier (Next.js 16 App Router)"]
3
        UI_HOME["Landing & Audio Studio\n(Audio Uploader / Waveform Preview)"]
4
        UI_AUTH["Auth Layer\n(LINE Login OAuth 2.0 / Supabase Auth)"]
5
        UI_SUB["Subscription & Checkout\n(Dynamic PromptPay QR / Slip Ingestion)"]
6
        UI_MGMT["Prompt & Agent Studio\n(Prompt Injection & Output Formatter)"]
7
    end
8

9
    subgraph Edge["Gateway & Edge (Vercel Edge sin1)"]
10
        GATEWAY["API Gateway & Webhook Router\n(HMAC-SHA256 Signature Verification)"]
11
        IDEM_GUARD["Idempotency Guard & Rate Limiter\n(Atomic DB Key Lock)"]
12
    end
13

14
    subgraph Core["Backend & AI Pipeline (Next.js Server Actions)"]
15
        AUDIO_SVC["Audio Transcription Service\n(Chunking / Speech-to-Text Pipeline)"]
16
        PAY_SVC["Payment & SlipOK Ingestion\n(Webhook OCR & Payload Parser)"]
17
        QUOTA_SVC["Quota & Tier Manager\n(Atomic Balance Adjustment)"]
18
    end
19

20
    subgraph Storage["Database & Storage Tier (Supabase sin1)"]
21
        DB[(PostgreSQL Database\nProfiles, Orders, Quotas, Subscriptions)]
22
        FILES["Supabase Storage\n(Encrypted Audio Chunks & Transcripts)"]
23
    end
24

25
    Client --> GATEWAY
26
    GATEWAY --> IDEM_GUARD
27
    IDEM_GUARD --> Core
28
    Core --> DB
29
    Core --> FILES

1
sequenceDiagram
2
    autonumber
3
    actor User as ผู้ใช้งาน (User)
4
    participant Client as Whisperer Client
5
    participant Edge as Edge Webhook Gateway
6
    participant Core as Payment Service (Next.js)
7
    participant SlipOK as SlipOK / Webhook OCR
8
    participant DB as Supabase PostgreSQL
9

10
    Note over User, DB: 1. สร้างคำสั่งซื้อและรับ Dynamic PromptPay QR
11
    User->>Client: เลือกแพ็กเกจสมาชิก (Subscription Tier)
12
    Client->>Core: ร้องขอสร้างคำสั่งซื้อ (Create Order)
13
    Core->>DB: บันทึก Order ใหม่ (สถานะ Pending, มี Order Ref เฉพาะ)
14
    Core-->>Client: ส่งข้อมูล PromptPay Payload & QR Code
15
    User->>Client: สแกนชำระเงินผ่าน Mobile Banking และอัปโหลดสลิป
16

17
    Note over Client, DB: 2. Webhook Ingestion & Security Guards
18
    Client->>Edge: ส่งสลิปเข้า Inbound Webhook Pipeline
19
    Edge->>Edge: ตรวจสอบ HMAC-SHA256 Signature Header
20
    Edge->>Core: ส่งต่อ Payload ที่ผ่านการยืนยัน
21
    Core->>DB: ตรวจสอบ Idempotency Key (ป้องกัน Double-credit / Replay)
22

23
    alt ตรวจพบ Idempotency ซ้ำ
24
        Core-->>Client: คืนสถานะคำสั่งซื้อเดิม (ปฏิเสธการประมวลผลซ้ำ)
25
    else รายการใหม่ถูกต้อง
26
        Core->>SlipOK: ส่งภาพสลิปให้ SlipOK OCR วิเคราะห์
27
        SlipOK-->>Core: ส่งข้อมูลผลตรวจ (ยอดเงิน, วันเวลา, บัญชีผู้รับ)
28
        Core->>Core: Validate ยอดเงินตรงกับ Order Amount
29
        Core->>DB: อัปเดต Order เป็น "Paid" + เพิ่ม Quota ทันที (Atomic Transaction)
30
        Core-->>Client: แจ้งเตือนยืนยันสำเร็จ และปลดล็อกสิทธิ์ใช้งานทันที
31
    end

4. Key Engineering Highlights#

• Automated Slip Verification with Webhook OCR: ผสานการทำงานร่วมกับ SlipOK เพื่ออ่านข้อมูลจากสลิปโอนเงินผ่านระบบ OCR ตรวจสอบยอดเงิน วันที่ และบัญชีปลายทางแบบเรียลไทม์ พร้อมตรวจสอบลายเซ็น HMAC-SHA256 Signature ทุก Request เพื่อการันตีว่าข้อมูลมาจากเกตเวย์จริง
• Idempotency Guard & Replay Attack Defense: วางโครงสร้างฐานข้อมูลและ Service Layer ด้วยระบบ Idempotency Key บนระดับฐานข้อมูล ป้องกันปัญหา Race Condition และการส่งสลิปซ้ำ (Duplicate Submissions) เพื่อตัดเครดิตอย่างแม่นยำ 100%
• Multi-tier Subscription & Dynamic QR: รองรับแพ็กเกจสมาชิกหลากหลายระดับ พร้อมกลไกคำนวณและสร้าง PromptPay QR Code ตามมาตรฐานสากล เชื่อมโยงกับระบบโควตานาทีและจำนวนคำถอดความอย่างเป็นระบบ
• Robust Audio Processing Pipeline: ออกแบบระบบประมวลผลไฟล์เสียงที่สามารถรองรับไฟล์เสียงขนาดยาว โดยใช้เทคนิคการตัดแบ่งไฟล์ (Audio Chunking) และจัดการคิวแบบ Non-blocking ไม่ให้ชนขีดจำกัด Serverless Execution Timeout
• 100% Green Test Suite with Vitest: ผ่านการทดสอบอย่างเข้มงวดด้วย Vitest ทั้งหมด 68/68 Test Cases (100% green) ครอบคลุม Webhook Security, Idempotency Logic, Slip Payload Parsing และ Quota Allocation

5. My Role & What I Built#

ในฐานะ Full-stack Developer ผมออกแบบและพัฒนาระบบนี้แบบ End-to-End:

• Frontend Architecture: สร้าง UI ด้วย Next.js 16 (App Router), Tailwind CSS v4, TypeScript ออกแบบหน้าจอ Audio Workspace, แดชบอร์ดมอนิเตอร์ และระบบ Checkout ที่ตอบสนองรวดเร็ว
• Backend & Security Services: พัฒนา Inbound Webhook Pipeline, HMAC Signature Validator, ตัวสร้าง QR Code มาตรฐาน PromptPay และระบบประมวลผล OCR ร่วมกับ SlipOK
• Database & Multi-tier RBAC: ออกแบบ Schema บน Supabase (PostgreSQL sin1) สำหรับการควบคุมสิทธิ์ผู้ใช้ (RBAC), การนับโควตานาทีแบบ Atomic, และระบบบันทึก Transaction
• Testing & Quality Assurance: เขียนชุดทดสอบ Unit และ Integration Tests ด้วย Vitest จำนวน 68 ชุด เพื่อทดสอบ Edge Cases ด้านการเงินและความปลอดภัยทั้งหมด

6. Result & Current State#

• Test Suite Status: ผ่านการทดสอบ Vitest 68/68 ชุด (100% Green) ทุกโมดูลหลัก
• Production Ready: ระบบถูกปรับจูนสถาปัตยกรรมให้รันบน Vercel Edge ร่วมกับ Supabase Singapore Region (sin1) อย่างมีเสถียรภาพ รองรับการขยายตัวและมี Latency ต่ำสำหรับผู้ใช้ในเอเชียตะวันออกเฉียงใต้

7. Demo & Code#

• Production Live (เข้าใช้งานได้จริง): whispererr.tech
• GitHub (Private Repository): Manchinn/whisperer
• Architecture: Next.js 16 (App Router) + Supabase (PostgreSQL sin1) + Tailwind CSS v4 + Vitest
• Deployment Target: Vercel Production Environment