Image Search For Телеканал

/**
 * Searches for a specific text string within an image using OCR (Optical Character Recognition)
 * and highlights the found occurrences. This function interprets "Image Search" as a search
 * for text *inside* the image. Due to the Russian word "Телеканал", it defaults to the
 * Russian language for OCR.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {string} [searchText='Телеканал'] The text to search for within the image. Case-insensitive.
 * @param {string} [highlightColor='red'] The color of the highlight box around the found text.
 * @param {number} [lineWidth=2] The line width of the highlight box.
 * @returns {Promise<HTMLCanvasElement>} A canvas element with the original image and highlighted text.
 *                                      If an error occurs, it returns a canvas with an error message.
 */
async function processImage(originalImg, searchText = 'Телеканал', highlightColor = 'red', lineWidth = 2) {
    const TESSERACT_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';

    // Helper function to dynamically load the Tesseract.js script if it's not already loaded.
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            if (window.Tesseract) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = TESSERACT_CDN;
            script.onload = () => resolve();
            script.onerror = (err) => reject(new Error('Failed to load Tesseract.js script from CDN.'));
            document.head.appendChild(script);
        });
    };

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is loaded before trying to get its dimensions
    await new Promise(resolve => {
        if (originalImg.complete) {
            resolve();
        } else {
            originalImg.onload = () => resolve();
        }
    });

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);

    try {
        await loadTesseract();

        // Use Tesseract.js to recognize text in the image.
        // 'rus' is specified for the Russian language.
        // The logger option provides progress updates in the browser's console.
        const {
            data
        } = await Tesseract.recognize(originalImg, 'rus', {
            logger: m => console.log(m)
        });

        // Loop through the recognized words and highlight matches.
        data.words.forEach(word => {
            // Check if the recognized word includes the search text (case-insensitive).
            if (word.text && word.text.toLowerCase().includes(searchText.toLowerCase())) {
                const bbox = word.bbox;
                ctx.strokeStyle = highlightColor;
                ctx.lineWidth = lineWidth;
                ctx.strokeRect(bbox.x0, bbox.y0, bbox.x1 - bbox.x0, bbox.y1 - bbox.y0);
            }
        });

        return canvas;

    } catch (error) {
        console.error("Image processing with OCR failed:", error);

        // In case of an error, draw a user-friendly message on the canvas.
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        const message = "Error: Could not perform text recognition.";
        const details = error.message || "The OCR library might be unavailable or failed to load.";

        // Simple text wrapping for better display on various image sizes.
        const wrapText = (text, x, y, maxWidth, lineHeight) => {
            const words = text.split(' ');
            let line = '';
            for(let n = 0; n < words.length; n++) {
                const testLine = line + words[n] + ' ';
                const metrics = ctx.measureText(testLine);
                const testWidth = metrics.width;
                if (testWidth > maxWidth && n > 0) {
                    ctx.fillText(line, x, y);
                    line = words[n] + ' ';
                    y += lineHeight;
                } else {
                    line = testLine;
                }
            }
            ctx.fillText(line, x, y);
        };
        
        ctx.font = `bold ${Math.min(24, canvas.width / 20)}px Arial`;
        ctx.fillText(message, canvas.width / 2, canvas.height / 2 - 20);
        
        ctx.font = `${Math.min(18, canvas.width / 25)}px Arial`;
        wrapText(details, canvas.width / 2, canvas.height/2 + 20, canvas.width * 0.8, 25);

        return canvas;
    }
}