Upload 18 files

.gitattributes

@@ -33,3 +33,16 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/1752755344481.jpg filter=lfs diff=lfs merge=lfs -text
+static/1753071647_ผลแล็ป.png filter=lfs diff=lfs merge=lfs -text
+static/1753072175_ผลแล็ป.png filter=lfs diff=lfs merge=lfs -text
+static/1753072439_ผลแล็ป.png filter=lfs diff=lfs merge=lfs -text
+static/1753072499_1752755344481.jpg filter=lfs diff=lfs merge=lfs -text
+static/1753072773_ผลแล็ป.png filter=lfs diff=lfs merge=lfs -text
+static/1753086977_ผลแล็ป.png filter=lfs diff=lfs merge=lfs -text
+static/1753088075_1752755344481.jpg filter=lfs diff=lfs merge=lfs -text
+static/card2.webp filter=lfs diff=lfs merge=lfs -text
+static/maxresdefault_processed.jpg filter=lfs diff=lfs merge=lfs -text
+static/maxresdefault.jpg filter=lfs diff=lfs merge=lfs -text
+static/ThaiIDCard_Mr._Sample500x500_processed.jpg filter=lfs diff=lfs merge=lfs -text
+static/ผลแล็ป.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,415 @@
+from flask import Flask, request, render_template, jsonify
+import easyocr
+import google.generativeai as genai
+import os
+import re
+
+app = Flask(__name__)
+
+# ตั้งค่า Gemini API Key
+genai.configure(api_key="AIzaSyCK_4YXWSEaZf6_E0RS_kNIsvHRBbAz8rQ")  # เปลี่ยนตรงนี้ให้เป็น API Key ของคุณ
+
+# โหลดโมเดล OCR
+reader = easyocr.Reader(['th', 'en'])
+
+# โหลดโมเดล Gemini
+model = genai.GenerativeModel("gemini-2.0-flash")
+
+# สร้างโฟลเดอร์สำหรับเก็บไฟล์อัปโหลด
+if not os.path.exists('static'):
+    os.makedirs('static')
+
+# ฟังก์ชันให้ Gemini ช่วยแก้ข้อความ OCR
+def refine_text_with_gemini(text):
+    try:
+        prompt = f"""
+        ด้านล่างนี้คือข้อความดิบที่ได้จาก OCR ซึ่งอาจมีคำผิดหรือรูปแบบไม่ถูกต้อง:
+        {text}
+
+        กรุณาช่วยแก้ไขให้ข้อความถูกต้องตามความเป็นจริงของบัตรประชาชนไทย:
+        - แก้คำสะกดผิด
+        - หากข้อความหายไปหรือผิดพลาดจาก OCR กรุณาเติมให้สมบูรณ์ โดยอิงจากบริบทของข้อความที่เหลือ
+        - ข้อมูลใดไม่ทราบข้อมูลได้ไม่ต้องแสดง
+        - ไม่ต้องอธิบายการทำงานเเค่ถอดข้อความออกมาให้อ่านเข้าใจ
+        - ไม่ต้องเเปลภาษา 
+        """
+        response = model.generate_content(prompt)
+        return response.text
+    except Exception as e:
+        print(f"Error in Gemini processing: {e}")
+        return text  # Return original text if Gemini fails
+
+# ฟังก์ชันแยกข้อมูลจากการตอบของ Gemini
+def parse_gemini_response(text):
+    """
+    แยกข้อมูลสำคัญจากข้อความที่ Gemini แก้ไขแล้ว
+    """
+    data = {
+        'fullname': '',
+        'idnumber': '',
+        'birthdate': '',
+        'religion': '',
+        'address': '',
+        'issuedate': '',
+        'expiredate': ''
+    }
+    
+    try:
+        # ใช้ regex patterns หาข้อมูล
+        lines = text.split('\n')
+        
+        for line in lines:
+            line = line.strip()
+            # หาชื่อ-นามสกุล (มักจะเป็นบรรทัดที่มีคำว่า "นาย" "นาง" "นางสาว" หรือเป็นชื่อภาษาไทย)
+            if re.search(r'(นาย|นาง|นางสาว|Mr\.|Mrs\.|Miss)', line):
+                data['fullname'] = line
+            
+            # หาเลขประจำตัวประชาชน (13 หลัก)
+            id_match = re.search(r'(\d{1}\s*\d{4}\s*\d{5}\s*\d{2}\s*\d{1}|\d{13})', line)
+            if id_match:
+                data['idnumber'] = id_match.group().replace(' ', '')
+            
+            # หาวันเกิด
+            if re.search(r'(เกิด|born)', line.lower()):
+                date_match = re.search(r'(\d{1,2}[\s/.-]\d{1,2}[\s/.-]\d{4})', line)
+                if date_match:
+                    data['birthdate'] = date_match.group()
+            
+            # หาศาสนา
+            if re.search(r'(ศาสนา|religion)', line.lower()):
+                religion_match = re.search(r'(พุทธ|คริสต์|อิสลาม|ฮินดู|ซิกข์)', line)
+                if religion_match:
+                    data['religion'] = religion_match.group()
+            
+            # หาที่อยู่ (บรรทัดที่มีเลขที่ หมู่ ถนน)
+            if re.search(r'(เลขที่|หมู่|ถนน|ตำบล|อำเภอ|จังหวัด)', line):
+                if not data['address']:  # เก็บที่อยู่บรรทัดแรกที่เจอ
+                    data['address'] = line
+                else:
+                    data['address'] += ' ' + line
+            
+            # หาวันออกบัตร
+            if re.search(r'(ออกบัตร|issued)', line.lower()):
+                date_match = re.search(r'(\d{1,2}[\s/.-]\d{1,2}[\s/.-]\d{4})', line)
+                if date_match:
+                    data['issuedate'] = date_match.group()
+            
+            # หาวันหมดอายุ
+            if re.search(r'(หมดอายุ|expire)', line.lower()):
+                date_match = re.search(r'(\d{1,2}[\s/.-]\d{1,2}[\s/.-]\d{4})', line)
+                if date_match:
+                    data['expiredate'] = date_match.group()
+    
+    except Exception as e:
+        print(f"Error parsing Gemini response: {e}")
+    
+    return data
+
+# หน้าเริ่มต้น
+@app.route("/", methods=["GET"])
+def index():
+    return render_template("index.html")
+
+# เมื่อมีการอัปโหลดภาพ
+@app.route("/upload", methods=["POST"])
+def upload():
+    try:
+        if "image" not in request.files:
+            return jsonify({"error": "ไม่พบไฟล์"}), 400
+
+        file = request.files["image"]
+        
+        if file.filename == '':
+            return jsonify({"error": "ไม่ได้เลือกไฟล์"}), 400
+        
+        # ตรวจสอบว่ามีนามสกุลไฟล์หรือไม่
+        if '.' not in file.filename:
+            return jsonify({"error": "ไฟล์ต้องมีนามสกุล"}), 400
+            
+        file_extension = file.filename.rsplit('.', 1)[1].lower()
+        
+        # ไฟล์ที่อันตรายที่ไม่ควรอนุญาต (blacklist)
+        dangerous_extensions = {
+            'exe', 'bat', 'cmd', 'scr', 'vbs', 'jar', 'com', 'pif',
+            'application', 'gadget', 'msi', 'msp', 'hta', 'cpl', 'msc',
+            'wsf', 'wsh', 'ps1', 'ps1xml', 'ps2', 'ps2xml', 'psc1', 'psc2'
+        }
+        
+        # ป้องกันไฟล์อันตราย
+        if file_extension in dangerous_extensions:
+            return jsonify({"error": f"ไฟล์ประเภท .{file_extension} อาจเป็นอันตราย"}), 400
+        
+        # ตรวจสอบขนาดไฟล์ (10MB = 10 * 1024 * 1024 bytes)
+        file.seek(0, 2)  # ไปที่ท้ายไฟล์
+        file_size = file.tell()  # ได้ขนาดไฟล์
+        file.seek(0)  # กลับไปต้นไฟล์
+        
+        if file_size > 10 * 1024 * 1024:  # 10MB
+            return jsonify({"error": "ไฟล์ใหญ่เกินไป (สูงสุด 10MB)"}), 400
+
+        # สร้างชื่อไฟล์ใหม่เพื่อป้องกันชื่อซ้ำ
+        import time
+        timestamp = str(int(time.time()))
+        safe_filename = f"{timestamp}_{file.filename}"
+        file_path = os.path.join("static", safe_filename)
+        
+        # บันทึกไฟล์
+        file.save(file_path)
+
+        # ตรวจสอบว่าไฟล์เป็นรูปภาพหรือ PDF ก่อนทำ OCR
+        image_extensions = {'png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'webp'}
+        pdf_extensions = {'pdf'}
+        
+        raw_text = ""
+        refined_text = ""
+        data = {}
+        
+        if file_extension in image_extensions or file_extension in pdf_extensions:
+            # OCR อ่านข้อความจากภาพหรือ PDF
+            try:
+                results = reader.readtext(file_path, detail=0)
+                raw_text = "\n".join(results)
+                
+                if not raw_text.strip():
+                    return render_template("index.html", 
+                                         error="ไม่สามารถอ่านข้อความจากไฟล์ได้ กรุณาลองใหม่ด้วยไฟล์ที่ชัดขึ้น",
+                                         file_info={"name": file.filename, "size": file_size, "type": file_extension})
+            
+            except Exception as e:
+                print(f"OCR Error: {e}")
+                return render_template("index.html", 
+                                     error="เกิดข้อผิดพลาดในการอ่านไฟล์ กรุณาลองใหม่อีกครั้ง",
+                                     file_info={"name": file.filename, "size": file_size, "type": file_extension})
+
+            # แก้ไขปัญหาการอ่านเลข 1 เป็น /
+            def fix_common_ocr_errors(text):
+                # แก้เฉพาะ / ที่น่าจะเป็นเลข 1 เช่น 2/3 → 213
+                return re.sub(r'(?<=\d)/(?=\d)', '1', text)
+
+            raw_text = fix_common_ocr_errors(raw_text)
+
+            # ส่งข้อความดิบให้ Gemini แก้ไข
+            try:
+                refined_text = refine_text_with_gemini(raw_text)
+            except Exception as e:
+                print(f"Gemini Error: {e}")
+                refined_text = raw_text  # ใช้ข้อความต้นฉบับถ้า Gemini ล้มเหลว
+
+            # แยกข้อมูลที่สำคัญออกมา
+            try:
+                data = parse_gemini_response(refined_text)
+            except Exception as e:
+                print(f"Parse Error: {e}")
+                data = {}
+        else:
+            # ไฟล์ประเภทอื่นที่ไม่ใช่รูปภาพหรือ PDF
+            raw_text = f"อัปโหลดไฟล์ {file.filename} สำเร็จ"
+            refined_text = f"ไฟล์ประเภท .{file_extension} ได้รับการอัปโหลดเรียบร้อยแล้ว"
+            data = {
+                "filename": file.filename,
+                "file_type": file_extension,
+                "file_size": f"{file_size / 1024:.2f} KB"
+            }
+
+        # ลบไฟล์ที่อัปโหลดเพื่อประหยัดพื้นที่ (ถ้าไม่ต้องการเก็บไว้)
+        try:
+            os.remove(file_path)
+        except:
+            pass
+
+        # ส่งข้อมูลไปหน้าเว็บ
+        return render_template("index.html", 
+                             raw_text=raw_text, 
+                             refined_text=refined_text, 
+                             data=data,
+                             file_info={
+                                 "name": file.filename,
+                                 "size": f"{file_size / 1024:.2f} KB",
+                                 "type": file_extension
+                             })
+
+    except Exception as e:
+        print(f"Unexpected error: {e}")
+        return render_template("index.html", 
+                             error="เกิดข้อผิดพลาดที่ไม่คาดคิด กรุณาลองใหม่อีกครั้ง")
+
+
+@app.route("/api/lucky-draw", methods=["POST"])
+def lucky_draw():
+    try:
+        if "image" not in request.files:
+            return jsonify({"success": False, "message": "ไม่พบไฟล์"}), 400
+
+        file = request.files["image"]
+        
+        if file.filename == '':
+            return jsonify({"success": False, "message": "ไม่ได้เลือกไฟล์"}), 400
+        
+        if '.' not in file.filename:
+            return jsonify({"success": False, "message": "ไฟล์ต้องมีนามสกุล"}), 400
+        
+        file_extension = file.filename.rsplit('.', 1)[1].lower()
+        allowed_extensions = {'png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'webp', 'pdf'}
+        if file_extension not in allowed_extensions:
+            return jsonify({"success": False, "message": "รองรับเฉพาะไฟล์รูปภาพและ PDF เท่านั้น"}), 400
+
+        file.seek(0, 2)
+        file_size = file.tell()
+        file.seek(0)
+        if file_size > 10 * 1024 * 1024:
+            return jsonify({"success": False, "message": "ไฟล์ใหญ่เกินไป (สูงสุด 10MB)"}), 400
+        
+        # บันทึกไฟล์ชั่วคราว
+        import time
+        timestamp = str(int(time.time()))
+        safe_filename = f"{timestamp}_{file.filename}"
+        file_path = os.path.join("static", safe_filename)
+        file.save(file_path)
+
+        # OCR อ่านข้อความ
+        results = []
+        try:
+            if file_extension == 'pdf':
+                # ถ้า PDF อาจต้องแปลงเป็นรูปก่อน (ง่ายๆ ใช้ pdf2image หรือ library อื่น) 
+                # แต่ถ้าอยากง่าย ให้บอกว่ารองรับเฉพาะรูปภาพก่อน
+                return jsonify({"success": False, "message": "ยังไม่รองรับ PDF สำหรับฟังก์ชันสุ่มชื่อ"}), 400
+            else:
+                results = reader.readtext(file_path, detail=0)
+        except Exception as e:
+            print(f"OCR Error: {e}")
+            return jsonify({"success": False, "message": "เกิดข้อผิดพลาดในการอ่านไฟล์"}), 500
+
+        raw_text = "\n".join(results)
+
+        # ฟังก์ชันช่วยแก้ปัญหาการอ่านเลข 1 ผิดเป็น /
+        def fix_common_ocr_errors(text):
+            return re.sub(r'(?<=\d)/(?=\d)', '1', text)
+        raw_text = fix_common_ocr_errors(raw_text)
+
+        # สร้าง prompt สำหรับให้ Gemini สุ่มชื่อผู้โชคดี 3 ราย
+        prompt = f"""
+        ข้อความด้านล่างเป็นรายชื่อผู้เข้าร่วมกิจกรรม (อาจมีหลายบรรทัด):
+        {raw_text}
+
+        กรุณาสุ่มเลือกชื่อผู้โชคดีจำนวน 3 คน และตอบกลับเป็นรายการชื่อแยกบรรทัดใหม่โดยไม่ต้องมีข้อความอื่น
+        """
+
+        # เรียก Gemini เพื่อสุ่มชื่อ
+        response = model.generate_content(prompt)
+        lucky_names_text = response.text.strip()
+
+        # แปลงข้อความชื่อผู้โชคดีเป็น list
+        lucky_names = [line.strip() for line in lucky_names_text.split('\n') if line.strip()]
+
+        # ลบไฟล์หลังใช้งาน
+        try:
+            os.remove(file_path)
+        except:
+            pass
+
+        return jsonify({
+            "success": True,
+            "lucky_names": lucky_names,
+            "raw_text": raw_text
+        })
+
+    except Exception as e:
+        print(f"Unexpected error in lucky_draw: {e}")
+        return jsonify({"success": False, "message": "เกิดข้อผิดพลาดที่ไม่คาดคิด"}), 500
+
+
+# ===== ทางเลือกอื่น: รองรับทุกไฟล์โดยไม่มีข้อจำกัด =====
+
+@app.route("/upload_no_limit", methods=["POST"])
+def upload_no_limit():
+    """เวอร์ชันที่รองรับทุกประเภทไฟล์โดยไม่มีข้อจำกัด"""
+    try:
+        if "image" not in request.files:
+            return jsonify({"error": "ไม่พบไฟล์"}), 400
+
+        file = request.files["image"]
+        
+        if file.filename == '':
+            return jsonify({"error": "ไม่ได้เลือกไฟล์"}), 400
+        
+        # ตรวจสอบขนาดไฟล์เท่านั้น (50MB)
+        file.seek(0, 2)  
+        file_size = file.tell()  
+        file.seek(0)  
+        
+        if file_size > 50 * 1024 * 1024:  # 50MB
+            return jsonify({"error": "ไฟล์ใหญ่เกินไป (สูงสุด 50MB)"}), 400
+
+        # สร้างชื่อไฟล์ใหม่
+        import time
+        timestamp = str(int(time.time()))
+        safe_filename = f"{timestamp}_{file.filename}"
+        file_path = os.path.join("static", safe_filename)
+        
+        # บันทึกไฟล์
+        file.save(file_path)
+        
+        # ได้นามสกุลไฟล์ (ถ้ามี)
+        file_extension = ""
+        if '.' in file.filename:
+            file_extension = file.filename.rsplit('.', 1)[1].lower()
+
+        # ลบไฟล์หลังอัปโหลด
+        try:
+            os.remove(file_path)
+        except:
+            pass
+
+        # ส่งข้อมูลกลับ
+        return render_template("index.html", 
+                             raw_text=f"อัปโหลด {file.filename} สำเร็จ", 
+                             refined_text=f"ไฟล์ {file.filename} ได้รับการอัปโหลดเรียบร้อย", 
+                             data={
+                                 "filename": file.filename,
+                                 "file_type": file_extension if file_extension else "ไม่มีนามสกุล",
+                                 "file_size": f"{file_size / 1024:.2f} KB"
+                             },
+                             file_info={
+                                 "name": file.filename,
+                                 "size": f"{file_size / 1024:.2f} KB",
+                                 "type": file_extension if file_extension else "unknown"
+                             })
+
+    except Exception as e:
+        print(f"Unexpected error: {e}")
+        return render_template("index.html", 
+                             error="เกิดข้อผิดพลาดที่ไม่คาดคิด กรุณาลองใหม่อีกครั้ง")
+
+# API สำหรับบันทึกข้อมูล
+@app.route("/save", methods=["POST"])
+def save_data():
+    try:
+        data = request.get_json()
+        
+        # ที่นี่คุณสามารถบันทึกข้อมูลลงฐานข้อมูลได้
+        # เช่น บันทึกลง SQLite, MySQL, MongoDB เป็นต้น
+        
+        print("Saving data:", data)
+        
+        return jsonify({"success": True, "message": "บันทึกข้อมูลสำเร็จ"})
+    
+    except Exception as e:
+        print(f"Save error: {e}")
+        return jsonify({"success": False, "error": "ไม่สามารถบันทึกข้อมูลได้"}), 500
+
+# Error handlers
+@app.errorhandler(404)
+def not_found(error):
+    return render_template("index.html", error="ไม่พบหน้าที่ต้องการ"), 404
+
+@app.errorhandler(500)
+def internal_error(error):
+    return render_template("index.html", error="เกิดข้อผิดพลาดภายในเซิร์ฟเวอร์"), 500
+
+@app.errorhandler(413)
+def too_large(error):
+    return render_template("index.html", error="ไฟล์ใหญ่เกินไป (สูงสุด 10MB)"), 413
+
+# รัน Flask app
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=5000)

templates/index.html

@@ -0,0 +1,961 @@
+<!DOCTYPE html>
+<html lang="th">
+  <head>
+    <meta charset="UTF-8" />
+    <title>OCR Result</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kanit&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: "Kanit", sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        padding: 20px;
+        color: #333;
+      }
+
+      .container {
+        max-width: 1000px;
+        margin: 0 auto;
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 20px;
+        padding: 40px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(10px);
+      }
+
+      h1 {
+        text-align: center;
+        color: #2c3e50;
+        margin-bottom: 30px;
+        font-size: 2.5em;
+        font-weight: 300;
+      }
+
+      .upload-section {
+        background: white;
+        border-radius: 15px;
+        padding: 30px;
+        margin-bottom: 30px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        border: 2px dashed #e1e8ed;
+        transition: all 0.3s ease;
+      }
+
+      .upload-section:hover {
+        border-color: #667eea;
+        transform: translateY(-2px);
+      }
+
+      .upload-area {
+        text-align: center;
+        padding: 40px 20px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .upload-area::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(255, 255, 255, 0.3),
+          transparent
+        );
+        transition: left 0.5s;
+      }
+
+      .upload-area:hover::before {
+        left: 100%;
+      }
+
+      .upload-icon {
+        font-size: 4em;
+        color: #667eea;
+        margin-bottom: 20px;
+        transition: transform 0.3s ease;
+      }
+
+      .upload-area:hover .upload-icon {
+        transform: scale(1.1);
+      }
+
+      .upload-text {
+        font-size: 1.2em;
+        color: #666;
+        margin-bottom: 10px;
+      }
+
+      .upload-subtext {
+        font-size: 0.9em;
+        color: #999;
+      }
+
+      input[type="file"] {
+        display: none;
+      }
+
+      .btn {
+        background: linear-gradient(45deg, #667eea, #764ba2);
+        color: white;
+        border: none;
+        padding: 12px 30px;
+        border-radius: 25px;
+        font-size: 1em;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        margin-top: 20px;
+        font-family: "Kanit", sans-serif;
+      }
+
+      .btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+      }
+
+      .btn:disabled {
+        background: #95a5a6;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+      }
+
+      .section {
+        background: white;
+        border-radius: 15px;
+        padding: 30px;
+        margin-bottom: 30px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        animation: fadeInUp 0.6s ease-out;
+      }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(30px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .section h2 {
+        color: #2c3e50;
+        margin-bottom: 25px;
+        font-size: 1.8em;
+        font-weight: 300;
+      }
+
+      .field-group {
+        margin-bottom: 25px;
+      }
+
+      .field-label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: #555;
+        font-size: 0.95em;
+      }
+
+      .input-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .field-input {
+        flex: 1;
+        padding: 15px 20px;
+        border: 2px solid #e1e8ed;
+        border-radius: 10px;
+        font-size: 1em;
+        transition: all 0.3s ease;
+        background: #f8f9fa;
+      }
+
+      .field-input:focus {
+        border-color: #667eea;
+        background: white;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        outline: none;
+      }
+
+      .field-input:hover {
+        border-color: #c1c8d1;
+      }
+
+      .icon-btn {
+        padding: 12px;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 1.1em;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 44px;
+        height: 44px;
+      }
+
+      .edit-btn {
+        background: #3498db;
+        color: white;
+      }
+
+      .edit-btn:hover {
+        background: #2980b9;
+        transform: scale(1.05);
+      }
+
+      .delete-btn {
+        background: #e74c3c;
+        color: white;
+      }
+
+      .delete-btn:hover {
+        background: #c0392b;
+        transform: scale(1.05);
+      }
+
+      .save-btn {
+        background: #27ae60;
+        color: white;
+      }
+
+      .save-btn:hover {
+        background: #229954;
+        transform: scale(1.05);
+      }
+
+      .raw-text {
+        background: #f8f9fa;
+        border: 1px solid #e1e8ed;
+        border-radius: 10px;
+        padding: 20px;
+        font-family: "Courier New", monospace;
+        font-size: 0.9em;
+        line-height: 1.6;
+        color: #555;
+        white-space: pre-wrap;
+        max-height: 300px;
+        overflow-y: auto;
+      }
+
+      .grid-2 {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+      }
+
+      .grid-3 {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 20px;
+      }
+
+      @media (max-width: 768px) {
+        .grid-2,
+        .grid-3 {
+          grid-template-columns: 1fr;
+        }
+
+        .container {
+          padding: 20px;
+        }
+
+        h1 {
+          font-size: 2em;
+        }
+      }
+
+      .readonly {
+        background: #f1f3f4;
+        color: #666;
+        cursor: not-allowed;
+      }
+
+      .editable {
+        background: white;
+      }
+
+      .field-group.editing .field-input {
+        border-color: #27ae60;
+        background: #f0fff4;
+      }
+
+      .tooltip {
+        position: relative;
+      }
+
+      .tooltip::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        background: #333;
+        color: white;
+        padding: 5px 10px;
+        border-radius: 4px;
+        font-size: 0.8em;
+        white-space: nowrap;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s;
+        z-index: 1000;
+      }
+
+      .tooltip:hover::after {
+        opacity: 1;
+      }
+
+      /* Loading spinner animation */
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .loading-spinner {
+        border: 3px solid #f3f3f3;
+        border-top: 3px solid #667eea;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 1s linear infinite;
+        display: inline-block;
+        margin-right: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>OCR</h1>
+
+      <div class="upload-section">
+        <form
+          action="/upload"
+          method="post"
+          enctype="multipart/form-data"
+          id="uploadForm"
+        >
+          <div
+            class="upload-area"
+            onclick="document.getElementById('fileInput').click()"
+          >
+            <div class="upload-icon">📤</div>
+            <div class="upload-text">คลิกเพื่ออัปโหลดภาพ</div>
+            <div class="upload-subtext">
+              รองรับไฟล์ JPG, PNG, PDF (ขนาดไม่เกิน 10MB)
+            </div>
+            <input
+              type="file"
+              id="fileInput"
+              name="image"
+              accept="image/*,.pdf"
+            />
+          </div>
+          <div style="text-align: center">
+            <button type="submit" class="btn" id="uploadBtn">
+              อัปโหลดและประมวลผล
+            </button>
+          </div>
+        </form>
+      </div>
+
+      <div style="text-align: center; margin-bottom: 40px">
+        <button class="btn" id="luckyDrawBtn">🎉 สุ่มผู้โชคดี</button>
+      </div>
+
+      {# {% if raw_text %}
+      <div class="section">
+        <h2>📄 ข้อความดิบจาก OCR</h2>
+        <div class="raw-text">{{ raw_text }}</div>
+      </div>
+      {% endif %} #} {# {% if refined_text %}
+      <div class="section">
+        <h2>ข้อมูล OCR</h2>
+
+        <div class="field-group">
+          <label class="field-label">ชื่อ-นามสกุล</label>
+          <div class="input-container">
+            <input
+              type="text"
+              class="field-input readonly"
+              value="{{ data.fullname or '' }}"
+              readonly
+              id="fullname"
+            />
+            <button
+              class="icon-btn edit-btn tooltip"
+              data-tooltip="แก้ไข"
+              onclick="toggleEdit('fullname')"
+            >
+              ✏️
+            </button>
+            <button
+              class="icon-btn delete-btn tooltip"
+              data-tooltip="ลบ"
+              onclick="clearField('fullname')"
+            >
+              🗑️
+            </button>
+          </div>
+        </div>
+
+        <div class="field-group">
+          <label class="field-label">เลขประจำตัวประชาชน</label>
+          <div class="input-container">
+            <input
+              type="text"
+              class="field-input readonly"
+              value="{{ data.idnumber or '' }}"
+              readonly
+              id="idnumber"
+            />
+            <button
+              class="icon-btn edit-btn tooltip"
+              data-tooltip="แก้ไข"
+              onclick="toggleEdit('idnumber')"
+            >
+              ✏️
+            </button>
+            <button
+              class="icon-btn delete-btn tooltip"
+              data-tooltip="ลบ"
+              onclick="clearField('idnumber')"
+            >
+              🗑️
+            </button>
+          </div>
+        </div>
+
+        <div class="grid-2">
+          <div class="field-group">
+            <label class="field-label">วัน/เดือน/ปีเกิด</label>
+            <div class="input-container">
+              <input
+                type="text"
+                class="field-input readonly"
+                value="{{ data.birthdate or '' }}"
+                readonly
+                id="birthdate"
+              />
+              <button
+                class="icon-btn edit-btn tooltip"
+                data-tooltip="แก้ไข"
+                onclick="toggleEdit('birthdate')"
+              >
+                ✏️
+              </button>
+              <button
+                class="icon-btn delete-btn tooltip"
+                data-tooltip="ลบ"
+                onclick="clearField('birthdate')"
+              >
+                🗑️
+              </button>
+            </div>
+          </div>
+
+          <div class="field-group">
+            <label class="field-label">ศาสนา</label>
+            <div class="input-container">
+              <input
+                type="text"
+                class="field-input readonly"
+                value="{{ data.religion or '' }}"
+                readonly
+                id="religion"
+              />
+              <button
+                class="icon-btn edit-btn tooltip"
+                data-tooltip="แก้ไข"
+                onclick="toggleEdit('religion')"
+              >
+                ✏️
+              </button>
+              <button
+                class="icon-btn delete-btn tooltip"
+                data-tooltip="ลบ"
+                onclick="clearField('religion')"
+              >
+                🗑️
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="field-group">
+          <label class="field-label">ที่อยู่</label>
+          <div class="input-container">
+            <input
+              type="text"
+              class="field-input readonly"
+              value="{{ data.address or '' }}"
+              readonly
+              id="address"
+            />
+            <button
+              class="icon-btn edit-btn tooltip"
+              data-tooltip="แก้ไข"
+              onclick="toggleEdit('address')"
+            >
+              ✏️
+            </button>
+            <button
+              class="icon-btn delete-btn tooltip"
+              data-tooltip="ลบ"
+              onclick="clearField('address')"
+            >
+              🗑️
+            </button>
+          </div>
+        </div>
+
+        <div class="grid-2">
+          <div class="field-group">
+            <label class="field-label">วันออกบัตร</label>
+            <div class="input-container">
+              <input
+                type="text"
+                class="field-input readonly"
+                value="{{ data.issuedate or '' }}"
+                readonly
+                id="issuedate"
+              />
+              <button
+                class="icon-btn edit-btn tooltip"
+                data-tooltip="แก้ไข"
+                onclick="toggleEdit('issuedate')"
+              >
+                ✏️
+              </button>
+              <button
+                class="icon-btn delete-btn tooltip"
+                data-tooltip="ลบ"
+                onclick="clearField('issuedate')"
+              >
+                🗑️
+              </button>
+            </div>
+          </div>
+
+          <div class="field-group">
+            <label class="field-label">วันหมดอายุ</label>
+            <div class="input-container">
+              <input
+                type="text"
+                class="field-input readonly"
+                value="{{ data.expiredate or '' }}"
+                readonly
+                id="expiredate"
+              />
+              <button
+                class="icon-btn edit-btn tooltip"
+                data-tooltip="แก้ไข"
+                onclick="toggleEdit('expiredate')"
+              >
+                ✏️
+              </button>
+              <button
+                class="icon-btn delete-btn tooltip"
+                data-tooltip="ลบ"
+                onclick="clearField('expiredate')"
+              >
+                🗑️
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div style="text-align: center; margin-top: 30px">
+          <button class="btn" onclick="saveAllData()">💾 บันทึกข้อมูล</button>
+        </div>
+      </div>
+      {% endif %}
+    </div>
+    #} {% if refined_text %}
+    <div class="section">
+      <h2>ข้อความที่ผ่านการ OCR</h2>
+      <textarea
+        rows="10"
+        style="
+          width: 100%;
+          font-size: 1.1em;
+          padding: 15px;
+          border-radius: 10px;
+          border: 1px solid #ccc;
+        "
+        readonly
+      >
+{{ refined_text }}</textarea
+      >
+    </div>
+    {% endif %}
+
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script>
+      document.getElementById("luckyDrawBtn").addEventListener("click", () => {
+        Swal.fire({
+          title: "สุ่มผู้โชคดี - อัปโหลดรูป",
+          html: `
+      <input type="file" id="luckyFileInput" accept="image/*,.pdf" style="display:none" />
+      <div class="upload-area" id="luckyUploadArea" style="cursor:pointer; padding:30px; border: 2px dashed #667eea; border-radius: 15px;">
+        <div style="font-size: 4em; color: #667eea; margin-bottom: 20px;">📤</div>
+        <div id="luckyUploadText" style="font-size: 1.2em; color: #666;">คลิกเพื่อเลือกไฟล์</div>
+        <div style="font-size: 0.9em; color: #999;">รองรับไฟล์ JPG, PNG, PDF (ไม่เกิน 10MB)</div>
+      </div>
+    `,
+          showCancelButton: true,
+          confirmButtonText: "สุ่มชื่อ",
+          cancelButtonText: "ยกเลิก",
+          preConfirm: () => {
+            const fileInput = document.getElementById("luckyFileInput");
+            if (!fileInput.files || fileInput.files.length === 0) {
+              Swal.showValidationMessage("กรุณาเลือกไฟล์ก่อน");
+              return false;
+            }
+            return fileInput.files[0];
+          },
+          didOpen: () => {
+            const uploadArea = document.getElementById("luckyUploadArea");
+            const fileInput = document.getElementById("luckyFileInput");
+            const uploadText = document.getElementById("luckyUploadText");
+
+            uploadArea.addEventListener("click", () => fileInput.click());
+            fileInput.addEventListener("change", (e) => {
+              if (fileInput.files.length > 0) {
+                uploadText.textContent = `เลือกไฟล์: ${fileInput.files[0].name}`;
+                uploadText.style.color = "#27ae60";
+              }
+            });
+          },
+        }).then((result) => {
+          if (result.isConfirmed) {
+            // เริ่มอัปโหลดและสุ่มชื่อ
+            const file = result.value;
+            const formData = new FormData();
+            formData.append("image", file);
+
+            Swal.fire({
+              title: "กำลังประมวลผลและสุ่มชื่อผู้โชคดี...",
+              html: '<div class="loading-spinner"></div>',
+              allowOutsideClick: false,
+              showConfirmButton: false,
+            });
+
+            fetch("/api/lucky-draw", {
+              method: "POST",
+              body: formData,
+            })
+              .then((res) => res.json())
+              .then((data) => {
+                if (data.success) {
+                  Swal.fire({
+                    title: "รายชื่อผู้โชคดี 3 ราย",
+                    html: `<ol style="text-align: left; font-size:1.2em;">
+      ${data.lucky_names.map((name) => `<li>${name}</li>`).join("")}
+    </ol>`,
+                    icon: "success",
+                    confirmButtonText: "ปิด",
+                  });
+                } else {
+                  Swal.fire({
+                    icon: "error",
+                    title: "เกิดข้อผิดพลาด",
+                    text: data.message || "ไม่สามารถสุ่มชื่อได้ กรุณาลองใหม่",
+                  });
+                }
+              })
+              .catch(() => {
+                Swal.fire({
+                  icon: "error",
+                  title: "เกิดข้อผิดพลาด",
+                  text: "ไม่สามารถเชื่อมต่อเซิร์ฟเวอร์ได้ กรุณาลองใหม่",
+                });
+              });
+          }
+        });
+      });
+
+      // Variable to track loading state
+      let isProcessing = false;
+
+      document
+        .getElementById("uploadForm")
+        .addEventListener("submit", function (e) {
+          const fileInput = document.getElementById("fileInput");
+          const uploadBtn = document.getElementById("uploadBtn");
+
+          // Check if file is selected
+          if (!fileInput.files || fileInput.files.length === 0) {
+            Swal.fire({
+              icon: "warning",
+              title: "กรุณาเลือกไฟล์ก่อนอัปโหลด",
+              confirmButtonText: "ตกลง",
+            });
+            e.preventDefault();
+            return false;
+          }
+
+          // Prevent multiple submissions
+          if (isProcessing) {
+            e.preventDefault();
+            return false;
+          }
+
+          isProcessing = true;
+
+          // Disable the upload button
+          uploadBtn.disabled = true;
+          uploadBtn.textContent = "กำลังประมวลผล...";
+
+          // Show loading alert with progress
+          let progressValue = 0;
+          const loadingAlert = Swal.fire({
+            title: "กำลังประมวลผลภาพ",
+            html: `
+              <div style="text-align: center; padding: 20px 0;">
+                <div class="loading-spinner"></div>
+                <p style="margin-top: 15px; color: #666;">
+                  กำลังอ่านข้อความจากภาพด้วย OCR และ AI...
+                </p>
+                <div style="margin-top: 20px;">
+                  <div style="background: #f0f0f0; border-radius: 10px; height: 8px; overflow: hidden;">
+                    <div id="progress-bar" style="background: linear-gradient(45deg, #667eea, #764ba2); height: 100%; width: 0%; transition: width 0.3s ease;"></div>
+                  </div>
+                  <p id="progress-text" style="margin-top: 10px; font-size: 0.9em; color: #888;">เริ่มต้นการประมวลผล...</p>
+                </div>
+              </div>
+            `,
+            allowOutsideClick: false,
+            allowEscapeKey: false,
+            showConfirmButton: false,
+            didOpen: () => {
+              // Simulate progress updates
+              const progressBar = document.getElementById("progress-bar");
+              const progressText = document.getElementById("progress-text");
+
+              const progressSteps = [
+                { percent: 20, text: "กำลังอัปโหลดไฟล์..." },
+                { percent: 40, text: "กำลังประมวลผลภาพ..." },
+                { percent: 60, text: "กำลังอ่านข้อความด้วย OCR..." },
+                { percent: 80, text: "กำลังปรับปรุงข้อความด้วย AI..." },
+                { percent: 95, text: "เกือบเสร็จแล้ว..." },
+              ];
+
+              let currentStep = 0;
+              const updateProgress = () => {
+                if (currentStep < progressSteps.length) {
+                  const step = progressSteps[currentStep];
+                  progressBar.style.width = step.percent + "%";
+                  progressText.textContent = step.text;
+                  currentStep++;
+                  setTimeout(updateProgress, 1000 + Math.random() * 1000);
+                }
+              };
+
+              setTimeout(updateProgress, 500);
+            },
+          });
+
+          // Handle form submission errors
+          const originalSubmit = this.submit;
+          this.addEventListener("error", function () {
+            isProcessing = false;
+            uploadBtn.disabled = false;
+            uploadBtn.textContent = "อัปโหลดและประมวลผล";
+            Swal.close();
+            Swal.fire({
+              icon: "error",
+              title: "เกิดข้อผิดพลาด",
+              text: "ไม่สามารถประมวลผลไฟล์ได้ กรุณาลองใหม่อีกครั้ง",
+              confirmButtonText: "ตกลง",
+            });
+          });
+        });
+
+      // Handle page unload to reset state
+      window.addEventListener("beforeunload", function () {
+        if (isProcessing) {
+          isProcessing = false;
+          const uploadBtn = document.getElementById("uploadBtn");
+          uploadBtn.disabled = false;
+          uploadBtn.textContent = "อัปโหลดและประมวลผล";
+        }
+      });
+
+      // Toggle edit mode for input fields
+      function toggleEdit(fieldId) {
+        const input = document.getElementById(fieldId);
+        const container = input.closest(".field-group");
+        const editBtn = container.querySelector(".edit-btn");
+
+        if (input.readOnly) {
+          // Enter edit mode
+          input.readOnly = false;
+          input.classList.remove("readonly");
+          input.classList.add("editable");
+          container.classList.add("editing");
+          editBtn.innerHTML = "💾";
+          editBtn.classList.remove("edit-btn");
+          editBtn.classList.add("save-btn");
+          editBtn.setAttribute("data-tooltip", "บันทึก");
+          input.focus();
+        } else {
+          // Save and exit edit mode
+          input.readOnly = true;
+          input.classList.remove("editable");
+          input.classList.add("readonly");
+          container.classList.remove("editing");
+          editBtn.innerHTML = "✏️";
+          editBtn.classList.remove("save-btn");
+          editBtn.classList.add("edit-btn");
+          editBtn.setAttribute("data-tooltip", "แก้ไข");
+
+          // Here you could add AJAX call to save data
+          showSaveNotification();
+        }
+      }
+
+      // Clear field value
+      function clearField(fieldId) {
+        Swal.fire({
+          title: "คุณแน่ใจหรือไม่?",
+          text: "ต้องการลบข้อมูลนี้?",
+          icon: "warning",
+          showCancelButton: true,
+          confirmButtonColor: "#e74c3c",
+          cancelButtonColor: "#95a5a6",
+          confirmButtonText: "ใช่, ลบเลย!",
+          cancelButtonText: "ยกเลิก",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            const input = document.getElementById(fieldId);
+            input.value = "";
+            input.focus();
+            Swal.fire({
+              title: "ลบแล้ว!",
+              text: "ข้อมูลได้ถูกลบเรียบร้อยแล้ว",
+              icon: "success",
+              timer: 1500,
+              showConfirmButton: false,
+            });
+          }
+        });
+      }
+
+      // Save all data
+      function saveAllData() {
+        const formData = {
+          fullname: document.getElementById("fullname").value,
+          idnumber: document.getElementById("idnumber").value,
+          birthdate: document.getElementById("birthdate").value,
+          religion: document.getElementById("religion").value,
+          address: document.getElementById("address").value,
+          issuedate: document.getElementById("issuedate").value,
+          expiredate: document.getElementById("expiredate").value,
+        };
+
+        // Show saving progress
+        Swal.fire({
+          title: "กำลังบันทึกข้อมูล...",
+          html: '<div class="loading-spinner"></div>',
+          allowOutsideClick: false,
+          showConfirmButton: false,
+          timer: 1500,
+        }).then(() => {
+          // Success message
+          Swal.fire({
+            icon: "success",
+            title: "บันทึกสำเร็จ!",
+            text: "ข้อมูลได้ถูกบันทึกเรียบร้อยแล้ว",
+            timer: 2000,
+            showConfirmButton: false,
+          });
+        });
+
+        console.log("Saving data:", formData);
+
+        // Here you would typically send data to server
+        // fetch('/save', { method: 'POST', body: JSON.stringify(formData) })
+      }
+
+      // Show save notification (for individual field edits)
+      function showSaveNotification() {
+        const notification = document.createElement("div");
+        notification.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: #27ae60;
+                color: white;
+                padding: 15px 20px;
+                border-radius: 8px;
+                z-index: 1000;
+                font-weight: 500;
+                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+                animation: slideIn 0.3s ease-out;
+            `;
+        notification.innerHTML = "✅ บันทึกข้อมูลเรียบร้อยแล้ว";
+        document.body.appendChild(notification);
+
+        setTimeout(() => {
+          notification.style.animation = "slideOut 0.3s ease-out";
+          setTimeout(() => notification.remove(), 300);
+        }, 2000);
+      }
+
+      // File input change event
+      document
+        .getElementById("fileInput")
+        .addEventListener("change", function (e) {
+          const file = e.target.files[0];
+          if (file) {
+            const uploadText = document.querySelector(".upload-text");
+            uploadText.textContent = `เลือกไฟล์: ${file.name}`;
+            uploadText.style.color = "#27ae60";
+          }
+        });
+
+      // Add CSS animations
+      const style = document.createElement("style");
+      style.textContent = `
+            @keyframes slideIn {
+                from { transform: translateX(100%); opacity: 0; }
+                to { transform: translateX(0); opacity: 1; }
+            }
+            @keyframes slideOut {
+                from { transform: translateX(0); opacity: 1; }
+                to { transform: translateX(100%); opacity: 0; }
+            }
+        `;
+      document.head.appendChild(style);
+    </script>
+  </body>
+</html>