Image Episode Name Identifier

/**
 * Identifies text within an image using an OCR (Optical Character Recognition) library.
 * This function is an interpretation of "Image Episode Name Identifier", assuming the goal is
 * to extract text from a screenshot which may contain the episode name.
 * It dynamically loads the Tesseract.js library to perform the OCR.
 *
 * @param {Image} originalImg The original image object to be processed.
 * @param {string} language The language code for the OCR engine to use (e.g., 'eng', 'jpn', 'spa'). Defaults to 'eng' for English.
 * @returns {Promise<HTMLElement>} A promise that resolves to an HTML div element containing the analysis results.
 */
async function processImage(originalImg, language = 'eng') {
    // Create a container for the output
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.textAlign = 'center';
    container.style.padding = '20px';
    container.style.maxWidth = '600px';
    container.style.margin = 'auto';
    container.style.border = '1px solid #eee';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';

    // Create a status paragraph to show progress
    const statusP = document.createElement('p');
    statusP.textContent = 'Initializing OCR engine...';
    statusP.style.color = '#555';
    container.appendChild(statusP);

    // --- Step 1: Dynamically load Tesseract.js if not already loaded ---
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            if (window.Tesseract) {
                resolve(window.Tesseract);
                return;
            }
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
            script.onload = () => {
                statusP.textContent = 'OCR engine loaded successfully.';
                resolve(window.Tesseract);
            };
            script.onerror = (err) => {
                const errorMsg = 'Failed to load the OCR library. Please check your internet connection.';
                statusP.textContent = errorMsg;
                console.error(errorMsg, err);
                reject(new Error(errorMsg));
            };
            document.head.appendChild(script);
        });
    };

    try {
        const Tesseract = await loadTesseract();

        // --- Step 2: Use Tesseract to recognize text in the image ---
        statusP.textContent = 'Creating OCR worker...';

        const worker = await Tesseract.createWorker(language, 1, {
            logger: m => {
                // Provide detailed progress feedback to the user
                if (m.status === 'recognizing text') {
                    const progress = (m.progress * 100).toFixed(0);
                    statusP.textContent = `Analyzing text... ${progress}%`;
                } else {
                    // Capitalize first letter for better display
                    statusP.textContent = m.status.charAt(0).toUpperCase() + m.status.slice(1) + '...';
                }
            }
        });

        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);
        await worker.terminate();

        // --- Step 3: Display the results in the container ---
        container.innerHTML = ''; // Clear previous status messages

        // Add a title
        const title = document.createElement('h3');
        title.textContent = 'Image Analysis Complete';
        title.style.marginBottom = '20px';
        container.appendChild(title);

        // Display the original image for context
        const displayedImg = originalImg.cloneNode();
        displayedImg.style.maxWidth = '100%';
        displayedImg.style.maxHeight = '300px';
        displayedImg.style.borderRadius = '4px';
        displayedImg.style.marginBottom = '20px';
        container.appendChild(displayedImg);

        // Display the identified text
        const resultHeader = document.createElement('h4');
        resultHeader.textContent = 'Identified Text:';
        resultHeader.style.marginTop = '15px';
        resultHeader.style.marginBottom = '10px';
        resultHeader.style.color = '#333';
        container.appendChild(resultHeader);

        const resultText = document.createElement('pre');
        resultText.textContent = text.trim() ? text : 'No text could be identified in the image.';
        resultText.style.padding = '15px';
        resultText.style.backgroundColor = '#f9f9f9';
        resultText.style.border = '1px solid #ddd';
        resultText.style.borderRadius = '4px';
        resultText.style.whiteSpace = 'pre-wrap'; // Ensures text wraps
        resultText.style.textAlign = 'left';
        resultText.style.lineHeight = '1.6';
        container.appendChild(resultText);

    } catch (error) {
        console.error('OCR process failed:', error);
        statusP.textContent = `An error occurred: ${error.message}`;
        statusP.style.color = 'red';
    }

    return container;
}