Image Scanner Finder And Translator

function processImage(originalImg, targetLanguage = 'en', ocrLanguage = 'eng') {
    // 1. Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.maxWidth = '800px';
    container.style.margin = '0 auto';
    container.style.padding = '20px';
    container.style.boxSizing = 'border-box';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#ffffff';

    // 2. Status/Progress text element
    const statusText = document.createElement('div');
    statusText.style.padding = '15px';
    statusText.style.marginBottom = '15px';
    statusText.style.borderRadius = '5px';
    statusText.style.backgroundColor = '#eef2f5';
    statusText.style.color = '#333';
    statusText.style.fontWeight = 'bold';
    statusText.textContent = "Initializing Scanner and Translator...";
    container.appendChild(statusText);

    // 3. Setup canvas to draw the original image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.width = '100%';
    canvas.style.maxHeight = '500px';
    canvas.style.objectFit = 'contain';
    canvas.style.border = '1px solid #ddd';
    canvas.style.borderRadius = '4px';
    canvas.style.display = 'block';

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // 4. Asynchronous processing block
    (async () => {
        try {
            // Dynamically load Tesseract.js if not available
            if (!window.Tesseract) {
                statusText.textContent = "Downloading OCR Engine (Tesseract.js)...";
                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);
                });
            }

            statusText.textContent = "Scanning image for text...";

            // Run OCR using Tesseract.js
            const { data } = await Tesseract.recognize(canvas, ocrLanguage, {
                logger: m => {
                    if (m.status) {
                        let progressMsg = m.status;
                        if (m.progress) progressMsg += ` (${Math.round(m.progress * 100)}%)`;
                        statusText.textContent = `Scanning: ${progressMsg}...`;
                    }
                }
            });

            const originalText = data.text.trim();

            // Highlight Bounding Boxes (Finder capability)
            if (data.lines && data.lines.length > 0) {
                ctx.strokeStyle = '#00ff00';
                ctx.lineWidth = Math.max(2, Math.floor(canvas.width / 400));
                
                data.lines.forEach(line => {
                    const { x0, y0, x1, y1 } = line.bbox;
                    ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
                });
            }

            if (!originalText) {
                statusText.textContent = "No text found in the image.";
                statusText.style.backgroundColor = '#fff3cd';
                statusText.style.color = '#856404';
                container.appendChild(canvas);
                return;
            }

            statusText.textContent = "Translating extracted text...";

            // Translate Text via Google Translate's free GTX endpoint
            let translatedText = "";
            try {
                const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLanguage}&dt=t`;
                const res = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: new URLSearchParams({ q: originalText })
                });

                const json = await res.json();
                
                // Parse out the translated text properly 
                if (json && json[0]) {
                    translatedText = json[0].map(item => item[0]).join('');
                } else {
                    throw new Error("Invalid response format.");
                }
            } catch (e) {
                translatedText = "[Translation failed: " + e.message + "]";
            }

            // Hide the status text as processing is done
            statusText.style.display = 'none';

            // Create Result Layout
            const resultDiv = document.createElement('div');
            resultDiv.style.marginTop = '20px';
            resultDiv.style.display = 'flex';
            resultDiv.style.flexDirection = 'column';
            resultDiv.style.gap = '15px';

            // Render Scanned and Translated text output
            resultDiv.innerHTML = `
                <div style="background: #fcfcfc; padding: 15px; border-radius: 6px; border: 1px solid #e1e1e1;">
                    <h4 style="margin: 0 0 10px 0; color: #444; font-size: 14px; text-transform: uppercase;">Scanned Text Context</h4>
                    <div style="white-space: pre-wrap; word-break: break-word; color: #555; font-size: 16px; line-height: 1.5;">${originalText}</div>
                </div>
                <div style="background: #f0f7ff; padding: 15px; border-radius: 6px; border: 1px solid #cce5ff;">
                    <h4 style="margin: 0 0 10px 0; color: #004085; font-size: 14px; text-transform: uppercase;">Translated Result (${targetLanguage})</h4>
                    <div style="white-space: pre-wrap; word-break: break-word; color: #002752; font-size: 16px; line-height: 1.5; font-weight: 500;">${translatedText}</div>
                </div>
            `;

            container.appendChild(canvas);
            container.appendChild(resultDiv);

        } catch (err) {
            statusText.textContent = "Error processing image: " + err.message;
            statusText.style.backgroundColor = '#f8d7da';
            statusText.style.color = '#721c24';
        }
    })();

    // Synchronously return the container; it will update as the async operations finish.
    return container;
}