Video Platform Language Dubbing Text Downloader And Translator Tool

async function processImage(originalImg, sourceLanguageOCR = "eng", sourceLanguageAPI = "en", targetLanguageAPI = "es") {
    // 1. Create main container interface
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.maxWidth = '900px';
    container.style.margin = '0 auto';
    container.style.backgroundColor = '#1e1e2f';
    container.style.color = '#ffffff';
    container.style.border = '1px solid #333';
    container.style.padding = '20px';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 8px 16px rgba(0,0,0,0.4)';
    container.style.boxSizing = 'border-box';

    // Title
    const title = document.createElement('h2');
    title.innerText = 'Video Subtitle Extractor & Translator';
    title.style.marginTop = '0';
    title.style.textAlign = 'center';
    title.style.color = '#4CAF50';
    container.appendChild(title);

    // Description text
    const subtitle = document.createElement('p');
    subtitle.innerText = 'Extracts dubbing/subtitle text from video screenshots, translates into your target language, and allows downloading text.';
    subtitle.style.textAlign = 'center';
    subtitle.style.fontSize = '14px';
    subtitle.style.color = '#aaaaaa';
    subtitle.style.marginBottom = '20px';
    container.appendChild(subtitle);

    // Display Original Image
    const imgContainer = document.createElement('div');
    imgContainer.style.textAlign = 'center';
    imgContainer.style.marginBottom = '20px';
    
    const imgClone = new Image();
    imgClone.src = originalImg.src;
    imgClone.style.maxWidth = '100%';
    imgClone.style.maxHeight = '350px';
    imgClone.style.borderRadius = '6px';
    imgClone.style.border = '2px solid #444';
    imgClone.style.objectFit = 'contain';
    imgContainer.appendChild(imgClone);
    container.appendChild(imgContainer);

    // Status Indicator
    const statusText = document.createElement('div');
    statusText.innerText = 'Initializing...';
    statusText.style.fontWeight = 'bold';
    statusText.style.textAlign = 'center';
    statusText.style.marginBottom = '15px';
    statusText.style.color = '#ffeb3b';
    container.appendChild(statusText);

    // Layout for OCR and Translation Text Areas
    const textContainer = document.createElement('div');
    textContainer.style.display = 'flex';
    textContainer.style.gap = '20px';
    textContainer.style.flexWrap = 'wrap';

    const createTextAreaCol = (labelText) => {
        const col = document.createElement('div');
        col.style.flex = '1';
        col.style.minWidth = '250px';
        
        const label = document.createElement('h3');
        label.innerText = labelText;
        label.style.fontSize = '16px';
        label.style.marginTop = '0';
        label.style.color = '#dddddd';
        label.style.borderBottom = '1px solid #444';
        label.style.paddingBottom = '8px';
        
        const area = document.createElement('textarea');
        area.style.width = '100%';
        area.style.height = '150px';
        area.style.backgroundColor = '#2a2a40';
        area.style.color = '#ffffff';
        area.style.border = '1px solid #555';
        area.style.borderRadius = '4px';
        area.style.padding = '10px';
        area.style.boxSizing = 'border-box';
        area.style.resize = 'vertical';
        area.style.fontFamily = 'monospace';
        area.placeholder = 'Processing...';

        col.appendChild(label);
        col.appendChild(area);
        return { col, area };
    };

    const sourceSection = createTextAreaCol(`Extracted Subtitle (${sourceLanguageOCR})`);
    const transSection = createTextAreaCol(`Translated Subtitle (${targetLanguageAPI})`);

    textContainer.appendChild(sourceSection.col);
    textContainer.appendChild(transSection.col);
    container.appendChild(textContainer);

    // Download Buttons
    const btnContainer = document.createElement('div');
    btnContainer.style.marginTop = '25px';
    btnContainer.style.display = 'flex';
    btnContainer.style.gap = '15px';
    btnContainer.style.justifyContent = 'center';
    btnContainer.style.flexWrap = 'wrap';

    const createBtn = (text, bgHoverColor, bgColor) => {
        const btn = document.createElement('button');
        btn.innerText = text;
        btn.style.padding = '12px 20px';
        btn.style.backgroundColor = bgColor;
        btn.style.color = '#ffffff';
        btn.style.border = 'none';
        btn.style.borderRadius = '4px';
        btn.style.cursor = 'pointer';
        btn.style.fontWeight = 'bold';
        btn.style.fontSize = '14px';
        btn.style.transition = 'all 0.2s ease-in-out';
        
        btn.onmouseover = () => { btn.style.backgroundColor = bgHoverColor; };
        btn.onmouseout = () => { btn.style.backgroundColor = bgColor; };
        
        return btn;
    };

    const downOrigBtn = createBtn('⬇ Download Original', '#1976D2', '#2196F3');
    const downTransBtn = createBtn('⬇ Download Translation', '#388E3C', '#4CAF50');

    btnContainer.appendChild(downOrigBtn);
    btnContainer.appendChild(downTransBtn);
    container.appendChild(btnContainer);

    // Subtitle file download logic
    const downloadTextFile = (content, filename) => {
        if (!content || !content.trim()) {
            alert('No text is available to download.');
            return;
        }
        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };

    downOrigBtn.onclick = () => downloadTextFile(sourceSection.area.value, 'original_subtitles.txt');
    downTransBtn.onclick = () => downloadTextFile(transSection.area.value, 'translated_subtitles.txt');

    // 2. Perform Processing Work (OCR + Translating)
    (async () => {
        try {
            // Dynamically load Tesseract.js (Optical Character Recognition)
            if (typeof Tesseract === 'undefined') {
                statusText.innerText = 'Loading OCR Engine from CDN...';
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            // Create canvas snapshot of image
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth || originalImg.width;
            canvas.height = originalImg.naturalHeight || originalImg.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);

            // Start Text Extraction
            statusText.innerText = 'Starting Subtitle Extraction...';
            const { data: { text } } = await Tesseract.recognize(canvas, sourceLanguageOCR, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        statusText.innerText = `Recognizing sub text: ${Math.round(m.progress * 100)}%`;
                    } else {
                        statusText.innerText = `OCR System: ${m.status}...`;
                    }
                }
            });

            // Update UI with extracted text
            sourceSection.area.value = text;
            sourceSection.area.placeholder = '';

            if (!text.trim()) {
                statusText.innerText = 'No text or subtitles found in the video screenshot.';
                statusText.style.color = '#f44336';
                transSection.area.placeholder = 'No text to translate.';
                return;
            }

            // Start Translation via public Translation API (MyMemory)
            statusText.innerText = 'Translating Subtitles...';
            const apiUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text.trim())}&langpair=${sourceLanguageAPI}|${targetLanguageAPI}`;
            
            try {
                const response = await fetch(apiUrl);
                const json = await response.json();
                
                if (json.responseData && json.responseData.translatedText) {
                    transSection.area.value = json.responseData.translatedText;
                    transSection.area.placeholder = '';
                    statusText.innerText = 'Extraction & Translation Successfully Completed!';
                    statusText.style.color = '#4CAF50';
                } else {
                    throw new Error(json.responseDetails || "Unknown API response error.");
                }
            } catch (transErr) {
                transSection.area.value = 'Notice: Translation service failed to respond.\n\nError: ' + transErr.message;
                statusText.innerText = 'OCR completed successfully, but Translation failed.';
                statusText.style.color = '#ff9800';
            }

        } catch (err) {
            console.error(err);
            statusText.innerText = 'An error occurred during image processing.';
            statusText.style.color = '#f44336';
        }
    })();

    // 3. Return the fully bound UI Element
    return container;
}