Image To Recipe Extractor

async function processImage(originalImg, language = 'rus+eng') {
    // Create the main container for the extracted recipe
    const container = document.createElement('div');
    container.style.backgroundColor = '#fdfbf7';
    container.style.border = '1px solid #eaddcf';
    container.style.borderRadius = '12px';
    container.style.padding = '30px';
    container.style.fontFamily = '"Palatino Linotype", "Book Antiqua", Palatino, serif';
    container.style.color = '#4a4031';
    container.style.maxWidth = '700px';
    container.style.margin = '20px auto';
    container.style.boxShadow = '0 6px 16px rgba(0,0,0,0.06)';

    // Add a stylized header
    const header = document.createElement('h2');
    header.textContent = 'Recipe Extractor / Рецепт';
    header.style.textAlign = 'center';
    header.style.borderBottom = '2px dashed #eaddcf';
    header.style.paddingBottom = '15px';
    header.style.marginTop = '0';
    header.style.marginBottom = '20px';
    header.style.color = '#8b5a2b';
    header.style.fontSize = '24px';
    container.appendChild(header);

    // Create a content area for the text with placeholder loading test
    const content = document.createElement('div');
    content.style.whiteSpace = 'pre-wrap';
    content.style.lineHeight = '1.8';
    content.style.fontSize = '16px';
    content.innerHTML = '<i>Initializing OCR engine... Please wait.</i>';
    container.appendChild(content);

    // Asynchronous function to perform OCR
    const extractText = async () => {
        try {
            // Dynamically load Tesseract.js if not available
            if (typeof window.Tesseract === 'undefined') {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            // Draw original image to canvas for passing into Tesseract
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.width;
            canvas.height = originalImg.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);

            content.innerHTML = '<i>Analyzing image and extracting text...</i>';

            // Run Tesseract OCR and display live progress updates
            const result = await window.Tesseract.recognize(
                canvas,
                language,
                {
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            const progress = Math.round(m.progress * 100);
                            content.innerHTML = `<i>Extracting recipe text... ${progress}%</i>`;
                        }
                    }
                }
            );

            const extractedText = result.data.text.trim();

            // Populate container with final extracted text or an error state
            if (extractedText) {
                content.textContent = extractedText;
            } else {
                content.textContent = 'No text could be found. Please try an image with clearer text.';
                content.style.color = '#c0392b';
            }

        } catch (error) {
            content.textContent = 'An error occurred while extracting the recipe: ' + error.message;
            content.style.color = '#c0392b';
        }
    };

    // Run the text extraction in the background
    extractText();

    // Immediately return the container. This allows the parent component to mount it
    // while the async text extraction and loading messages update the inner text directly.
    return container;
}