# User Experience & Interface Design (UX/UI): ai_rekogition_smart

> **Date Reference:** 2026-08-31  
> **Commit Hash:** `[ต้องยืนยันกับทีม: ไม่พบ .git history ในไดเรกทอรีโปรเจกต์ (ไดเรกทอรี .git ว่างเปล่า) / uncommitted]`

---

## 1. องค์ประกอบด้านการออกแบบและ Design Tokens (Design System)

ตรวจสอบจากไฟล์ CSS หลัก [public/assets/app.css](file:///d:/XAMPP/htdocs/smart/ai_rekogition_smart/public/assets/app.css) และ [public/assets/@app.css](file:///d:/XAMPP/htdocs/smart/ai_rekogition_smart/public/assets/@app.css):

### 1.1 Color Palette & Theme Tokens
- **ธีมหลัก (Theme)**: Dark / Modern Luxury Theme สไตล์งานอีเวนต์ระดับพรีเมียม
- **สีพื้นหลังหลัก (Background)**: `#0b0f19` (Dark Navy/Black) และ `#111827` (Card Panels)
- **สีเน้น (Accent Colors)**:
  - น้ำเงิน/ฟ้าโปรเจกต์ (`#2563eb`, `#3b82f6`, `#60a5fa`) สำหรับปุ่ม Action หลักและแถบความคืบหน้า
  - สีเขียว Success (`#10b981`, `#059669`) สำหรับสถานะความสำเร็จและ Similarity สูง
  - สีส้ม/ทอง VIP (`#f59e0b`, `#d97706`) สำหรับป้ายกำกับ VIP Badge และระดับความสำคัญ
  - สีแดง Error (`#ef4444`) สำหรับข้อผิดพลาดและการแจ้งเตือน
- **ตัวอักษร (Typography)**: System UI Font Stack (`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`) รองรับฟอนต์ภาษาไทยอย่างคมชัด

### 1.2 คอมโพเนนต์ UI หลักที่มีอยู่ในโค้ด (Key UI Components)
1. **Top Navigation Bar (`header.topbar`)**:
   - แถบเมนูด้านบนพร้อมโลโก้ [public/assets/logo_pic.png](file:///d:/XAMPP/htdocs/smart/ai_rekogition_smart/public/assets/logo_pic.png)
   - เมนูนำทางแบบ Responsive ไปยังหน้า Events, Upload Graphic, Upload Atmosphere, และ Search Selfie
2. **Upload Dropzone Panel (`.dropzone`)**:
   - พื้นที่ Drag & Drop ไฟล์ภาพ พร้อมรองรับการคลิกเพื่อเลือกไฟล์
   - ตัวนับจำนวนไฟล์และขนาดรวม
   - แถบสถานะการอัปโหลดแบบขนาน (Parallel Upload Progress Bar) พร้อมแสดงจำนวนไฟล์ที่สำเร็จ ล้มเหลว หรือถูกข้าม
3. **Live Camera & Photo Capture Module**:
   - หน้าจอจับสัญญาณกล้อง Webcam/สมาร์ตโฟนผ่าน WebRTC MediaDevices API
   - ปรับสลับกล้องหน้า/กล้องหลัง (Facing Mode) ได้
   - แสดงสถานะการแปลงไฟล์ HEIC แบบเรียลไทม์ (heic2any)
4. **OTP Verification Modal / Card**:
   - ช่องกรอกหมายเลขโทรศัพท์พร้อมฟังก์ชัน Mask เบอร์โทร (`+6681****1234`)
   - ช่องกรอก OTP 6 หลัก และปุ่มนับเวลาถอยหลังสำหรับขอรหัสใหม่ (Cooldown 40 วินาที)
5. **Search Results Gallery (`#matchedGalleryPanel`)**:
   - แถบสลับโหมดผลลัพธ์ (Mode Tabs): `Rekognition Faces` vs `Atmosphere Photos`
   - การ์ดแสดงรูปภาพผลลัพธ์พร้อมแถบแสดงความเหมือน (Match Similarity %) เช่น `98.5% Match`
   - Lightbox Modal สำหรับดูภาพขยายใหญ่
   - ปุ่มดาวน์โหลดภาพต้นฉบับความละเอียดสูงผ่าน Secure Token
6. **VIP Customer Insight Panel (`.ecrs-profile-panel`)**:
   - แสดงข้อมูลโปรไฟล์ลูกค้าแบบย่อ: ชื่อ-นามสกุล, ชื่อเล่น, บริษัท, ตำแหน่ง, รถยนต์ที่ใช้, ทะเบียนรถ, ผู้ช่วย, และ Key Insights

---

## 2. เส้นทางการใช้งานหลัก (User Journeys)

### Journey 1: ผู้ดูแลระบบอัปโหลดรูปภาพงานกิจกรรม (Admin / Graphic Upload Flow)
```
[เข้าหน้า events.php] ──> [เลือกหรือสร้าง Event] ──> [ไปที่ upload-graphic.php]
         │
         ▼
[เลือก/ลากรูปภาพหลายไฟล์ลง Dropzone] ──> [กดปุ่ม Start Upload]
         │
         ▼
[Client แปลง HEIC / บีบอัดถ้าจำเป็น] ──> [AJAX Upload แบบ Parallel เข้า S3]
         │
         ▼
[Backend ตรวจสอบใบหน้า & IndexFaces เข้า AWS Rekognition]
         │
         ▼
[แสดงผลลัพธ์การ Index: สำเร็จ / รูปที่ไม่มีใบหน้า / รูปที่ล้มเหลว]
```

### Journey 2: ผู้ร่วมงานค้นหารูปถ่ายเซลฟี่พร้อม OTP (Guest Selfie Search with OTP)
```
[เข้าหน้า search-selfie.php] ──> [กรอกเบอร์โทรศัพท์] ──> [กดขอรหัส OTP]
         │
         ▼
[รับ SMS OTP จาก ThaiBulkSMS] ──> [กรอก OTP 6 หลักในระบบ]
         │
         ▼
[ยืนยันตัวตนสำเร็จ (Session เก็บสถานะ)]
         │
         ▼
[เปิดกล้องถ่าย Selfie หรือเลือกรูปจากคลังภาพ]
         │
         ▼
[Client ประมวลผลภาพ] ──> [ส่งภาพเข้า API api-search-selfie.php]
         │
         ▼
[AWS Rekognition ค้นหาใบหน้าใน Collection] ──> [MySQL ค้นหารูปที่ตรงกัน]
         │
         ▼
[แสดง Gallery รูปภาพที่พบ] ──> [คลิกดาวน์โหลดรูปความละเอียดสูงผ่าน S3 Presigned URL]
```

### Journey 3: ผู้ร่วมงานค้นหารูปแบบไม่ต้องยืนยันตัวตน (Non-Auth Fast Search)
```
[เข้าหน้า search-selfie-none-auth.php] ──> [ถ่ายรูปเซลฟี่หรืออัปโหลดทันที]
         │
         ▼
[ส่งภาพเข้า api-search-selfie-none-auth.php] ──> [Rekognition Search]
         │
         ▼
[แสดงผล Gallery: แท็บภาพเดี่ยวที่มีใบหน้า + แท็บภาพบรรยากาศงานทั้งหมด]
```