Image Text Search And Description Finder

function processImage(originalImg, language = 'eng+rus') {
    // Create the main container div
    const container = document.createElement('div');
    container.style.fontFamily = "Arial, sans-serif";
    container.style.padding = "20px";
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.gap = "20px";
    container.style.maxWidth = "800px";
    container.style.boxSizing = "border-box";
    container.style.color = "#333";
    container.style.backgroundColor = "#fff";
    container.style.borderRadius = "10px";
    container.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)";

    // Title
    const title = document.createElement('h2');
    title.innerText = "Image Text & Description Finder";
    title.style.margin = "0";
    title.style.fontSize = "22px";
    container.appendChild(title);

    // Canvas to process and display the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    // Scale image down to a reasonable size to speed up inference and OCR safely
    const MAX_DIM = 800;
    let scale = Math.min(1, MAX_DIM / originalImg.width, MAX_DIM / originalImg.height);
    canvas.width = originalImg.width * scale;
    canvas.height = originalImg.height * scale;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    canvas.style.maxWidth = "100%";
    canvas.style.borderRadius = "6px";
    canvas.style.border = "1px solid #ddd";
    canvas.style.alignSelf = "center";
    container.appendChild(canvas);

    // Status message
    const statusBox = document.createElement('div');
    statusBox.style.padding = "10px";
    statusBox.style.borderRadius = "6px";
    statusBox.style.backgroundColor = "#e7f3fe";
    statusBox.style.color = "#0b5ed7";
    statusBox.style.fontWeight = "bold";
    statusBox.innerText = "Loading AI models... this might take a moment.";
    container.appendChild(statusBox);

    // Results container
    const resultsContainer = document.createElement('div');
    resultsContainer.style.display = "flex";
    resultsContainer.style.flexDirection = "column";
    resultsContainer.style.gap = "15px";
    container.appendChild(resultsContainer);

    // Helper to add output boxes visually
    function addResultBox(boxTitle, content) {
        const wrapper = document.createElement('div');
        wrapper.style.border = "1px solid #e0e0e0";
        wrapper.style.borderRadius = "6px";
        wrapper.style.backgroundColor = "#fdfdfd";

        const titleEl = document.createElement('div');
        titleEl.innerText = boxTitle;
        titleEl.style.padding = "10px 15px";
        titleEl.style.borderBottom = "1px solid #e0e0e0";
        titleEl.style.backgroundColor = "#f4f4f4";
        titleEl.style.fontWeight = "bold";
        titleEl.style.borderTopLeftRadius = "6px";
        titleEl.style.borderTopRightRadius = "6px";

        const contentEl = document.createElement('div');
        contentEl.innerText = content || "No content generated.";
        contentEl.style.padding = "15px";
        contentEl.style.whiteSpace = "pre-wrap";
        contentEl.style.wordBreak = "break-word";
        contentEl.style.fontFamily = "monospace";
        contentEl.style.fontSize = "14px";
        contentEl.style.color = "#444";

        wrapper.appendChild(titleEl);
        wrapper.appendChild(contentEl);
        resultsContainer.appendChild(wrapper);
    }

    // Run the heavy asynchronous loading and processing logic
    (async () => {
        try {
            // ============================================
            // 1. Load and execute Tesseract.js for OCR (Text Search)
            // ============================================
            statusBox.innerText = `Extracting text details (OCR: ${language})...`;
            
            await new Promise((resolve, reject) => {
                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 = reject;
                document.head.appendChild(script);
            });

            // Create worker, detect and extract text
            const worker = await Tesseract.createWorker(language);
            const ret = await worker.recognize(canvas);
            const extractedText = ret.data.text.trim();
            await worker.terminate();

            addResultBox("Extracted Text (OCR)", extractedText ? extractedText : "(No text recognized within the image)");

            // ============================================
            // 2. Load and execute Transformers.js for Image Captioning (Description)
            // ============================================
            statusBox.innerText = "Generating AI image description (Transformers.js)...";

            // Dynamically import the transformers.js browser module
            const transformersUrl = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
            const { pipeline, env } = await import(transformersUrl);
            
            // Explicitly force web environment so it doesn't search for local node.js fetches
            env.allowLocalModels = false;

            // Load visual language model
            const captioner = await pipeline('image-to-text', 'Xenova/vit-gpt2-image-captioning');
            
            // Get base64 string Data URL output to feed precisely to Transformers.js
            const imgDataUrl = canvas.toDataURL('image/jpeg');
            const output = await captioner(imgDataUrl);
            const description = output[0]?.generated_text;

            addResultBox("Image Description (Caption)", description);

            // Mark completion
            statusBox.style.backgroundColor = "#d1e7dd";
            statusBox.style.color = "#0f5132";
            statusBox.innerText = "Task complete! Found Text & Description successfully.";

        } catch (error) {
            console.error(error);
            statusBox.style.backgroundColor = "#f8d7da";
            statusBox.style.color = "#842029";
            statusBox.innerText = "An error occurred during processing.";
            addResultBox("Error Details", error.toString());
        }
    })();

    // Return the container immediately while processing completes asynchronously
    return container;
}