Image To Language And Code Translator Converter

async function processImage(originalImg, defaultLanguage = 'eng') {
    // Container setup
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.maxWidth = '900px';
    container.style.margin = '0 auto';
    container.style.padding = '20px';
    container.style.boxSizing = 'border-box';
    container.style.background = '#f8f9fa';
    container.style.border = '1px solid #dee2e6';
    container.style.borderRadius = '10px';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';

    // Title
    const title = document.createElement('h2');
    title.innerText = 'Language & Code Translator / Converter';
    title.style.marginTop = '0';
    title.style.color = '#343a40';
    title.style.borderBottom = '2px solid #e9ecef';
    title.style.paddingBottom = '10px';
    container.appendChild(title);

    // Grid System
    const grid = document.createElement('div');
    grid.style.display = 'flex';
    grid.style.flexWrap = 'wrap';
    grid.style.gap = '20px';
    grid.style.marginTop = '20px';
    container.appendChild(grid);

    // Left Column
    const leftCol = document.createElement('div');
    leftCol.style.flex = '1 1 350px';
    grid.appendChild(leftCol);

    // Right Column
    const rightCol = document.createElement('div');
    rightCol.style.flex = '1 1 350px';
    grid.appendChild(rightCol);

    // Base Styles for inputs/buttons
    const inputStyle = 'width: 100%; padding: 8px; margin-bottom: 15px; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; font-family: inherit;';
    const btnStyle = 'padding: 10px 15px; cursor: pointer; border: none; border-radius: 5px; font-weight: 600; font-size: 14px; transition: 0.2s;';

    // --- Left Column: Image Area & Base64/Code Conversion ---
    const imgLabel = document.createElement('h4');
    imgLabel.innerText = 'Preview:';
    imgLabel.style.margin = '0 0 10px 0';
    leftCol.appendChild(imgLabel);

    const canvas = document.createElement('canvas');
    canvas.style.width = '100%';
    canvas.style.height = 'auto';
    canvas.style.border = '1px dashed #adb5bd';
    canvas.style.borderRadius = '6px';
    canvas.style.background = '#e9ecef';
    leftCol.appendChild(canvas);

    // Draw original image on canvas (scaled to prevent memory issues)
    const ctx = canvas.getContext('2d');
    const maxDim = 1500;
    let width = originalImg.width;
    let height = originalImg.height;

    if (width > maxDim || height > maxDim) {
        const ratio = Math.min(maxDim / width, maxDim / height);
        width = width * ratio;
        height = height * ratio;
    }
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(originalImg, 0, 0, width, height);

    // SECTION: Convert Image to Code (Base64/HTML)
    const codeSection = document.createElement('div');
    codeSection.style.marginTop = '25px';
    codeSection.style.padding = '15px';
    codeSection.style.background = '#ffffff';
    codeSection.style.border = '1px solid #dee2e6';
    codeSection.style.borderRadius = '8px';
    
    const codeHeader = document.createElement('h4');
    codeHeader.innerText = '1. Convert Image to Code';
    codeHeader.style.margin = '0 0 10px 0';
    codeSection.appendChild(codeHeader);

    const formatSelect = document.createElement('select');
    formatSelect.style.cssText = inputStyle;
    const formats = ['HTML Image Tag', 'CSS Background URL', 'Base64 Data URI', 'Markdown Image'];
    formats.forEach(f => {
        const opt = document.createElement('option');
        opt.value = opt.innerText = f;
        formatSelect.appendChild(opt);
    });
    codeSection.appendChild(formatSelect);

    const generateBtn = document.createElement('button');
    generateBtn.innerText = 'Generate Code';
    generateBtn.style.cssText = btnStyle + 'background: #28a745; color: white; width: 100%; margin-bottom: 10px;';
    codeSection.appendChild(generateBtn);

    const codeResult = document.createElement('textarea');
    codeResult.style.cssText = inputStyle + 'height: 100px; resize: vertical; margin-bottom: 5px;';
    codeResult.placeholder = 'Generated code strings will appear here...';
    codeSection.appendChild(codeResult);

    const copyCodeBtn = document.createElement('button');
    copyCodeBtn.innerText = 'Copy Code';
    copyCodeBtn.style.cssText = btnStyle + 'background: #6c757d; color: white; width: 100%;';
    codeSection.appendChild(copyCodeBtn);

    leftCol.appendChild(codeSection);

    // --- Right Column: OCR Extraction & Translation ---
    const ocrSection = document.createElement('div');
    ocrSection.style.padding = '15px';
    ocrSection.style.background = '#ffffff';
    ocrSection.style.border = '1px solid #dee2e6';
    ocrSection.style.borderRadius = '8px';

    const ocrHeader = document.createElement('h4');
    ocrHeader.innerText = '2. Extract Language & Translate (OCR)';
    ocrHeader.style.margin = '0 0 10px 0';
    ocrSection.appendChild(ocrHeader);

    const langSelect = document.createElement('select');
    langSelect.style.cssText = inputStyle;
    const langs = [
        { code: 'eng', name: 'English' },
        { code: 'spa', name: 'Spanish' },
        { code: 'fra', name: 'French' },
        { code: 'deu', name: 'German' },
        { code: 'chi_sim', name: 'Chinese (Simplified)' },
        { code: 'hin', name: 'Hindi' },
        { code: 'rus', name: 'Russian' }
    ];
    langs.forEach(l => {
        const opt = document.createElement('option');
        opt.value = l.code;
        opt.innerText = l.name;
        if (l.code === defaultLanguage) opt.selected = true;
        langSelect.appendChild(opt);
    });
    ocrSection.appendChild(langSelect);

    const extractBtn = document.createElement('button');
    extractBtn.innerText = 'Extract Language / Text';
    extractBtn.style.cssText = btnStyle + 'background: #007bff; color: white; width: 100%; margin-bottom: 10px;';
    ocrSection.appendChild(extractBtn);

    const progressContainer = document.createElement('div');
    progressContainer.style.width = '100%';
    progressContainer.style.height = '8px';
    progressContainer.style.background = '#e9ecef';
    progressContainer.style.borderRadius = '4px';
    progressContainer.style.overflow = 'hidden';
    progressContainer.style.marginBottom = '10px';
    progressContainer.style.display = 'none';

    const progressBar = document.createElement('div');
    progressBar.style.width = '0%';
    progressBar.style.height = '100%';
    progressBar.style.background = '#007bff';
    progressContainer.appendChild(progressBar);
    ocrSection.appendChild(progressContainer);

    const ocrResult = document.createElement('textarea');
    ocrResult.style.cssText = inputStyle + 'height: 250px; resize: vertical; margin-bottom: 10px;';
    ocrResult.placeholder = 'Extracted localized text or programming code will appear here...';
    ocrSection.appendChild(ocrResult);

    const btnGroup = document.createElement('div');
    btnGroup.style.display = 'flex';
    btnGroup.style.gap = '10px';

    const copyOcrBtn = document.createElement('button');
    copyOcrBtn.innerText = 'Copy Text';
    copyOcrBtn.style.cssText = btnStyle + 'background: #6c757d; color: white; flex: 1;';
    btnGroup.appendChild(copyOcrBtn);

    const translateBtn = document.createElement('button');
    translateBtn.innerText = 'Translate via Google';
    translateBtn.style.cssText = btnStyle + 'background: #17a2b8; color: white; flex: 1;';
    btnGroup.appendChild(translateBtn);

    ocrSection.appendChild(btnGroup);
    rightCol.appendChild(ocrSection);

    // --- Logic & Event Listeners ---
    
    // Tesseract script loader
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            if (window.Tesseract) {
                resolve();
            } else {
                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);
            }
        });
    };

    // Helper: System clipboard copier
    const copyToClipboard = (text, button) => {
        const copyAction = navigator.clipboard && navigator.clipboard.writeText 
            ? navigator.clipboard.writeText(text) 
            : Promise.resolve().then(() => {
                const tmp = document.createElement("textarea");
                tmp.value = text;
                document.body.appendChild(tmp);
                tmp.select();
                document.execCommand("copy");
                document.body.removeChild(tmp);
            });

        copyAction.then(() => {
            const originalText = button.innerText;
            button.innerText = 'Copied!';
            setTimeout(() => { button.innerText = originalText; }, 2000);
        });
    };

    // Event: Generate Base64/Code
    generateBtn.addEventListener('click', () => {
        const dataUrl = canvas.toDataURL('image/png');
        const format = formatSelect.value;
        
        switch (format) {
            case 'HTML Image Tag':
                codeResult.value = `<img src="${dataUrl}" alt="Converted Image" />`;
                break;
            case 'CSS Background URL':
                codeResult.value = `background-image: url('${dataUrl}');`;
                break;
            case 'Base64 Data URI':
                codeResult.value = dataUrl;
                break;
            case 'Markdown Image':
                codeResult.value = `![Converted Image](${dataUrl})`;
                break;
        }
    });

    copyCodeBtn.addEventListener('click', () => {
        if (codeResult.value) copyToClipboard(codeResult.value, copyCodeBtn);
    });

    // Event: Extract OCR
    extractBtn.addEventListener('click', async () => {
        extractBtn.disabled = true;
        extractBtn.innerText = 'Initializing OCR Engine...';
        progressContainer.style.display = 'block';
        progressBar.style.width = '0%';
        ocrResult.value = '';

        try {
            await loadTesseract();
            const lang = langSelect.value;
            const dataUrl = canvas.toDataURL('image/png');
            
            extractBtn.innerText = 'Extracting...';
            
            const result = await Tesseract.recognize(dataUrl, lang, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        progressBar.style.width = (m.progress * 100) + '%';
                        extractBtn.innerText = `Processing: ${Math.round(m.progress * 100)}%`;
                    }
                }
            });
            
            ocrResult.value = result.data.text;
            
        } catch (err) {
            console.error(err);
            ocrResult.value = 'An error occurred during extraction. Check browser console.';
        } finally {
            extractBtn.disabled = false;
            extractBtn.innerText = 'Extract Language / Text';
            progressContainer.style.display = 'none';
        }
    });

    // Event: Copy OCR Text
    copyOcrBtn.addEventListener('click', () => {
        if (ocrResult.value) copyToClipboard(ocrResult.value, copyOcrBtn);
    });

    // Event: Translate OCR Text
    translateBtn.addEventListener('click', () => {
        const textToTrans = encodeURIComponent(ocrResult.value.trim());
        if (textToTrans) {
            window.open(`https://translate.google.com/?sl=auto&tl=en&text=${textToTrans}&op=translate`, '_blank');
        } else {
            alert('Please extract text from the image first.');
        }
    });

    return container;
}