 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extract Passport Data</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.0.2/tesseract.min.js"></script>
</head>
<body>

    <input type="file" id="uploadImage" accept="image/*">
    <div id="extractedText"></div>

    <script>
        $(document).ready(function () {
            $("#uploadImage").change(function (event) {
                let imageFile = event.target.files[0];

                if (imageFile) {
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        let imageData = e.target.result;

                        // Process image using Tesseract.js
                        Tesseract.recognize(
                            imageData,
                            'eng',  // Language
                            {
                                logger: m => console.log(m) // Log progress
                            }
                        ).then(({ data: { text } }) => {
                            $("#extractedText").html("<pre>" + text + "</pre>");

                            // Extract relevant fields
                            let passportNumber = text.match(/[A-Z]\d{7}/);
                            let name = text.match(/(?:Given Name|Name)\s*:\s*(.*)/);
                            let nationality = text.match(/Nationality\s*:\s*(\w+)/);
                            let dob = text.match(/\d{2}\/\d{2}\/\d{4}/);

                            $("#extractedText").append(`
                                <p><strong>Passport Number:</strong> ${passportNumber ? passportNumber[0] : "Not Found"}</p>
                                <p><strong>Name:</strong> ${name ? name[1] : "Not Found"}</p>
                                <p><strong>Nationality:</strong> ${nationality ? nationality[1] : "Not Found"}</p>
                                <p><strong>Date of Birth:</strong> ${dob ? dob[0] : "Not Found"}</p>
                            `);
                        });
                    };
                    reader.readAsDataURL(imageFile);
                }
            });
        });
    </script>

</body>
</html>
