Image Alphabetical Search Tool

/**
 * Finds all individual alphabetic characters in an image using OCR,
 * highlights them with bounding boxes, and lists the unique characters found in alphabetical order.
 * This function is asynchronous as it needs to load and run a client-side OCR engine.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} lang The 3-letter language code (e.g., 'eng', 'rus', 'deu') for Tesseract.js to use for recognition.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the processed image on a canvas and a list of found characters.
 */
async function processImage(originalImg, lang = 'eng') {
    // Create a container for the output. This will be returned.
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.textAlign = 'center';
    resultContainer.innerHTML = '<p>Initializing OCR engine...</p>';

    // Helper function to dynamically load the Tesseract.js script from a CDN.
    // It ensures the script is loaded only once.
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            // If Tesseract is already loaded, resolve immediately.
            if (window.Tesseract) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
            script.onload = () => resolve();
            script.onerror = (err) => {
                console.error('Failed to load Tesseract.js script.');
                reject(new Error('Failed to load OCR engine. Please check your internet connection and try again.'));
            };
            document.head.appendChild(script);
        });
    };

    try {
        await loadTesseract();
        resultContainer.innerHTML = `<p>Processing image with language code: <strong>${lang}</strong>.<br>This may take a moment...</p>`;

        // Create a Tesseract worker.
        const worker = await Tesseract.createWorker(lang);
        
        // Recognize symbols (characters) in the image to get their bounding boxes.
        const { data: { symbols } } = await worker.recognize(originalImg);
        
        // Terminate the worker to free up resources.
        await worker.terminate();

        // Create a canvas to draw the image and highlights on.
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
        canvas.style.maxWidth = '100%';
        canvas.style.height = 'auto'; // Maintain aspect ratio
        const ctx = canvas.getContext('2d');

        // Draw the original image onto the canvas.
        ctx.drawImage(originalImg, 0, 0);

        const foundLetters = new Set();
        ctx.strokeStyle = '#FF0000'; // Red for visibility
        // Adjust line width based on image size for better visuals.
        ctx.lineWidth = Math.max(1, Math.floor(canvas.width / 400)); 

        // Iterate over each symbol found by the OCR.
        symbols.forEach(symbol => {
            // We are looking for single alphabetic characters with reasonable confidence.
            if (symbol.confidence > 60 && /^[a-zA-Z]$/.test(symbol.text)) {
                foundLetters.add(symbol.text.toLowerCase());
                const { x0, y0, x1, y1 } = symbol.bbox;
                // Draw a rectangle around the detected character.
                ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
            }
        });

        // Create a text element to display the sorted list of found characters.
        const textElement = document.createElement('div');
        textElement.style.marginTop = '15px';
        textElement.style.textAlign = 'left';

        const sortedLetters = Array.from(foundLetters).sort();

        if (sortedLetters.length > 0) {
            textElement.innerHTML = `
                <h3 style="margin-bottom: 5px;">Detected Characters (Alphabetically)</h3>
                <p style="font-size: 1.2em; word-wrap: break-word; background-color: #f0f0f0; padding: 10px; border-radius: 5px;">
                    ${sortedLetters.join(', ')}
                </p>`;
        } else {
             textElement.innerHTML = `
                <h3 style="margin-bottom: 5px;">No Characters Found</h3>
                <p>Could not detect any alphabetical characters in the image with sufficient confidence. You could try a different image or language.</p>`;
        }
        
        // Clear the "Processing..." message and append the results.
        resultContainer.innerHTML = '';
        resultContainer.appendChild(canvas);
        resultContainer.appendChild(textElement);

    } catch (error) {
        console.error('Image processing failed:', error);
        resultContainer.innerHTML = `<p style="color: red;"><strong>Error:</strong> ${error.message || 'An unknown error occurred during image processing.'}</p>`;
    }

    return resultContainer;
}