# Smart Slip Verifier

ระบบตรวจสอบและดึงข้อมูลสลิปการโอนเงินแบบครบวงจร โดยใช้เทคโนโลยี QR Code Scanner และ OCR (Optical Character Recognition)

## ⚠️ คำเตือนสำคัญ

**โปรเจ็คนี้เป็นเพียงตัวอย่างการใช้งานเทคโนโลยี QR Scanner และ OCR เท่านั้น ไม่สามารถตรวจสอบสลิปจริงหรือไม่ได้ กรุณาใช้ระบบตรวจสอบที่เชื่อถือได้จากธนาคารหรือสถาบันการเงินโดยตรง**

## ✨ คุณสมบัติ

- 📱 **สแกน QR Code** - อ่านข้อมูลจาก QR Code ในสลิปการโอนเงิน
- 🔍 **OCR Processing** - ดึงข้อมูลข้อความจากรูปภาพสลิป
- 📷 **Image Preview** - แสดงตัวอย่างภาพที่อัพโหลด
- 🎯 **QR Crop Selector** - เลือกพื้นที่ QR Code เพื่อความแม่นยำ
- 📊 **Slip Parser** - แยกและจัดรูปแบบข้อมูลจากสลิป
- 🌐 **Web-based** - ใช้งานผ่านเว็บเบราว์เซอร์
- 📱 **Responsive Design** - รองรับการใช้งานบนมือถือและเดสก์ท็อป

## 🚀 Demo

### GitHub Pages
[https://goragodwiriya.github.io/smart-slip-verifier/](https://goragodwiriya.github.io/smart-slip-verifier/)

## 🛠️ เทคโนโลยีที่ใช้

- **HTML5** - โครงสร้างหน้าเว็บ
- **CSS3** - การตกแต่งและ Responsive Design
- **JavaScript (ES6+)** - Logic หลักของแอปพลิเคชัน
- **Tesseract.js** - OCR Engine สำหรับการอ่านข้อความ
- **QR Code Scanner** - ไลบรารีสำหรับสแกน QR Code
- **Bootstrap Icons** - ไอคอนสวยงาม
- **Google Fonts (Kanit)** - ฟอนต์ภาษาไทย

## 📦 การติดตั้งและใช้งาน

### วิธีที่ 1: ใช้งานผ่าน GitHub Pages
เข้าไปที่: [https://goragodwiriya.github.io/smart-slip-verifier/](https://goragodwiriya.github.io/smart-slip-verifier/)

### วิธีที่ 2: รันบนเครื่องของคุณ

1. **Clone Repository**
   ```bash
   git clone https://github.com/goragodwiriya/smart-slip-verifier.git
   cd smart-slip-verifier
   ```

2. **รันเซิร์ฟเวอร์ (เลือกวิธีใดวิธีหนึ่ง)**

   ใช้ Python:
   ```bash
   # Python 3
   python -m http.server 8000

   # หรือ Python 2
   python -m SimpleHTTPServer 8000
   ```

   ใช้ Node.js:
   ```bash
   npx http-server -p 8000
   ```

   ใช้ PHP:
   ```bash
   php -S localhost:8000
   ```

3. **เปิดเบราว์เซอร์**
   ```
   http://localhost:8000
   ```

## 📖 วิธีใช้งาน

1. **อัพโหลดรูปภาพ** - เลือกไฟล์รูปภาพสลิปการโอนเงิน
2. **เลือกโหมดการประมวลผล**:
   - 🔍 **QR Scanner** - สแกน QR Code อัตโนมัติ
   - 📝 **OCR Processing** - อ่านข้อความจากภาพ
   - 🎯 **Manual Crop** - เลือกพื้นที่ด้วยตนเอง
3. **ดูผลลัพธ์** - ระบบจะแสดงข้อมูลที่ดึงได้จากสลิป

## 📁 โครงสร้างโปรเจ็คต์

```
smart-slip-verifier/
├── index.html              # หน้าเว็บหลัก
├── package.json            # ข้อมูลโปรเจ็คต์
├── LICENSE                 # ใบอนุญาต
├── README.md              # เอกสารนี้
├── css/
│   └── styles.css         # ไฟล์ CSS หลัก
├── js/
│   ├── app.js             # ไฟล์ JavaScript หลัก
│   ├── ImagePreviewManager.js  # จัดการแสดงภาพ
│   ├── OCRProcessor.js    # ประมวลผล OCR
│   ├── QRCropSelector.js  # เลือกพื้นที่ QR
│   ├── QRScanner.js       # สแกน QR Code
│   ├── SlipParser.js      # แยกข้อมูลสลิป
│   └── SlipVerifier.js    # ตัวหลักของระบบ
└── test/                  # ไฟล์ทดสอบ
```

## 🌟 คุณสมบัติหลัก

### QR Code Scanner
- สแกน QR Code จากสลิปการโอนเงิน
- รองรับรูปแบบ QR Code ของธนาคารไทย
- ประมวลผลและแสดงข้อมูลในรูปแบบที่อ่านง่าย

### OCR Processing
- ใช้ Tesseract.js ในการอ่านข้อความ
- รองรับภาษาไทยและภาษาอังกฤษ
- ประมวลผลและจัดรูปแบบข้อมูล

### Image Management
- ตัวอย่างภาพก่อนประมวลผล
- เครื่องมือครอปรูปภาพ
- รองรับหลายรูปแบบไฟล์ (JPEG, PNG, WebP)

## 🔧 การพัฒนา

### ข้อกำหนดระบบ
- เบราว์เซอร์ที่รองรับ ES6+
- การเชื่อมต่ออินเทอร์เน็ต (สำหรับ CDN)

### การ Contribute
1. Fork โปรเจ็คต์
2. สร้าง Branch ใหม่ (`git checkout -b feature/amazing-feature`)
3. Commit การเปลี่ยนแปลง (`git commit -m 'Add amazing feature'`)
4. Push ไปยัง Branch (`git push origin feature/amazing-feature`)
5. สร้าง Pull Request

## 📝 License

โปรเจ็คต์นี้ใช้ลิขสิทธิ์ [MIT License](LICENSE)

## 👤 ผู้พัฒนา

**Goragod Wiriya**
- GitHub: [@goragodwiriya](https://github.com/goragodwiriya)
- Website: [https://www.kotchasan.com](https://www.kotchasan.com)

## 🔗 ลิงก์ที่เกี่ยวข้อง

- [GitHub Repository](https://github.com/goragodwiriya/smart-slip-verifier)
- [GitHub Pages Demo](https://goragodwiriya.github.io/smart-slip-verifier/)
- [Issues](https://github.com/goragodwiriya/smart-slip-verifier/issues)

---

<div align="center">

**⚠️ ข้อแนะนำ: โปรเจ็คต์นี้เป็นเพียงตัวอย่างการใช้งานเทคโนโลยี ไม่ควรใช้สำหรับการตรวจสอบสลิปจริงในเชิงพาณิชย์**

Made with ❤️ by [Goragod Wiriya](https://github.com/goragodwiriya)

</div>