Image Translation And Language Tool

async function processImage(originalImg, ocrLanguages = 'eng+rus', translateLanguage = 'ru') {
    // Create the main wrapper
    const wrapper = document.createElement('div');
    wrapper.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    wrapper.style.display = 'flex';
    wrapper.style.flexDirection = 'column';
    wrapper.style.gap = '15px';
    wrapper.style.padding = '20px';
    wrapper.style.border = '1px solid #e0e0e0';
    wrapper.style.borderRadius = '12px';
    wrapper.style.background = '#fcfcfc';
    wrapper.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';
    wrapper.style.maxWidth = '100%';
    wrapper.style.color = '#333';

    // Title
    const title = document.createElement('h3');
    title.innerText = 'Image Translator & OCR';
    title.style.margin = '0';
    title.style.color = '#222';
    wrapper.appendChild(title);

    // Canvas to hold the original image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.border = '1px solid #ddd';
    canvas.style.borderRadius = '8px';
    canvas.style.backgroundColor = '#fff';
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    wrapper.appendChild(canvas);

    // Status label
    const statusLabel = document.createElement('div');
    statusLabel.innerText = 'Initializing processing...';
    statusLabel.style.fontWeight = '600';
    statusLabel.style.fontSize = '14px';
    statusLabel.style.color = '#555';
    wrapper.appendChild(statusLabel);

    // Progress bar
    const progressWrapper = document.createElement('div');
    progressWrapper.style.width = '100%';
    progressWrapper.style.height = '8px';
    progressWrapper.style.background = '#e0e0e0';
    progressWrapper.style.borderRadius = '4px';
    progressWrapper.style.overflow = 'hidden';

    const progressBar = document.createElement('div');
    progressBar.style.width = '0%';
    progressBar.style.height = '100%';
    progressBar.style.background = '#4caf50';
    progressBar.style.transition = 'width 0.2s ease';
    progressWrapper.appendChild(progressBar);
    wrapper.appendChild(progressWrapper);

    // Container for original and translated texts
    const resultsWrapper = document.createElement('div');
    resultsWrapper.style.display = 'none'; // Hidden until text is extracted
    resultsWrapper.style.gap = '15px';
    resultsWrapper.style.flexWrap = 'wrap';

    const createTextBox = (headingText) => {
        const box = document.createElement('div');
        box.style.flex = '1 1 300px';
        box.style.background = '#fff';
        box.style.border = '1px solid #ddd';
        box.style.borderRadius = '8px';
        box.style.padding = '15px';
        box.style.boxShadow = '0 2px 4px rgba(0,0,0,0.02)';

        const heading = document.createElement('div');
        heading.innerText = headingText;
        heading.style.fontWeight = 'bold';
        heading.style.fontSize = '14px';
        heading.style.borderBottom = '1px solid #eee';
        heading.style.paddingBottom = '10px';
        heading.style.marginBottom = '10px';
        box.appendChild(heading);

        const content = document.createElement('div');
        content.style.whiteSpace = 'pre-wrap';
        content.style.wordBreak = 'break-word';
        content.style.fontSize = '14px';
        content.style.lineHeight = '1.5';
        content.style.color = '#444';
        box.appendChild(content);

        return { box, content };
    };

    const originalTextObj = createTextBox('Recognized Text (' + ocrLanguages + ')');
    const translatedTextObj = createTextBox('Translated Text (' + translateLanguage + ')');

    resultsWrapper.appendChild(originalTextObj.box);
    resultsWrapper.appendChild(translatedTextObj.box);
    wrapper.appendChild(resultsWrapper);

    // Background Processing
    (async () => {
        try {
            // Dynamically load Tesseract.js if not available
            if (!window.Tesseract) {
                statusLabel.innerText = 'Downloading OCR Engine...';
                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(new Error('Failed to load Tesseract.js'));
                    document.head.appendChild(script);
                });
            }

            statusLabel.innerText = 'Extracting Text (OCR)...';

            // Extract text from the image using Tesseract.js
            const { data } = await Tesseract.recognize(canvas, ocrLanguages, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        progressBar.style.width = `${Math.round(m.progress * 100)}%`;
                        statusLabel.innerText = `Extracting Text... ${Math.round(m.progress * 100)}%`;
                    } else if (m.status) {
                        // Display initialization statuses
                        statusLabel.innerText = m.status.charAt(0).toUpperCase() + m.status.slice(1) + '...';
                    }
                }
            });

            // Hide the progress bar after completion
            progressWrapper.style.display = 'none';

            if (!data.text || !data.text.trim()) {
                statusLabel.innerText = 'No text was detected in the given image.';
                return;
            }

            // Display extracted text and show boxes
            statusLabel.innerText = 'Translating text...';
            resultsWrapper.style.display = 'flex';
            originalTextObj.content.innerText = data.text;

            // Fetch Translation from Google Translate free tier endpoint (Used for simple public tools without API keys)
            const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${encodeURIComponent(translateLanguage)}&dt=t&q=${encodeURIComponent(data.text)}`;
            
            try {
                const translateResponse = await fetch(url);
                if (!translateResponse.ok) throw new Error('Network error connecting to translation API');
                
                const json = await translateResponse.json();
                let translatedStr = '';
                
                if (json && json[0]) {
                    for (let i = 0; i < json[0].length; i++) {
                        if (json[0][i][0]) translatedStr += json[0][i][0];
                    }
                }
                
                translatedTextObj.content.innerText = translatedStr;
                statusLabel.innerText = 'Processing completely successfully.';
                statusLabel.style.color = '#2e7d32'; // Success Green
                
            } catch (e) {
                translatedTextObj.content.innerText = 'Error translating text: ' + e.message;
                statusLabel.innerText = 'OCR completed, but translation failed.';
                statusLabel.style.color = '#c62828'; // Error Red
            }

        } catch (err) {
            statusLabel.innerText = 'Error during processing: ' + err.message;
            statusLabel.style.color = '#c62828';
            progressWrapper.style.display = 'none';
        }
    })();

    return wrapper;
}