Image Scanner Language Identifier And Dub Translator Tool

function processImage(originalImg, ocrLang = "eng", targetLang = "es", voiceRate = 1) {
    // Create the main container for the tool UI
    const container = document.createElement('div');
    container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    container.style.width = "100%";
    container.style.maxWidth = "800px";
    container.style.margin = "0 auto";
    container.style.padding = "20px";
    container.style.boxSizing = "border-box";
    container.style.backgroundColor = "#f9fafb";
    container.style.border = "1px solid #d1d5db";
    container.style.borderRadius = "12px";
    container.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)";

    // Header
    const header = document.createElement('h2');
    header.style.margin = "0 0 15px 0";
    header.style.color = "#111827";
    header.style.fontSize = "1.5rem";
    header.innerText = "Image Scanner, Identifier & Dub Translator";
    container.appendChild(header);

    // Image preview canvas
    const canvasContainer = document.createElement('div');
    canvasContainer.style.textAlign = "center";
    canvasContainer.style.marginBottom = "20px";
    canvasContainer.style.backgroundColor = "#e5e7eb";
    canvasContainer.style.padding = "10px";
    canvasContainer.style.borderRadius = "8px";

    const canvas = document.createElement('canvas');
    canvas.style.maxWidth = "100%";
    canvas.style.maxHeight = "300px";
    canvas.style.objectFit = "contain";
    canvas.style.borderRadius = "4px";
    
    // Draw original image on canvas to maintain standard sizing
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    ctx.drawImage(originalImg, 0, 0);
    
    canvasContainer.appendChild(canvas);
    container.appendChild(canvasContainer);

    // Status / Loading text
    const statusDiv = document.createElement('div');
    statusDiv.style.marginBottom = "15px";
    statusDiv.style.padding = "12px";
    statusDiv.style.borderRadius = "8px";
    statusDiv.style.backgroundColor = "#dbeafe";
    statusDiv.style.color = "#1e40af";
    statusDiv.style.fontWeight = "bold";
    statusDiv.style.textAlign = "center";
    statusDiv.innerText = "Initializing Scanner...";
    container.appendChild(statusDiv);

    // Text areas grid
    const gridDiv = document.createElement('div');
    gridDiv.style.display = "flex";
    gridDiv.style.gap = "15px";
    gridDiv.style.marginBottom = "20px";
    gridDiv.style.flexWrap = "wrap";
    
    // Source side
    const sourceCol = document.createElement('div');
    sourceCol.style.flex = "1";
    sourceCol.style.minWidth = "250px";
    const sourceLabel = document.createElement('div');
    sourceLabel.innerText = "Extracted Text:";
    sourceLabel.style.fontWeight = "bold";
    sourceLabel.style.marginBottom = "5px";
    sourceCol.appendChild(sourceLabel);
    
    const sourceText = document.createElement('textarea');
    sourceText.style.width = "100%";
    sourceText.style.height = "120px";
    sourceText.style.padding = "10px";
    sourceText.style.boxSizing = "border-box";
    sourceText.style.borderRadius = "6px";
    sourceText.style.border = "1px solid #d1d5db";
    sourceText.style.resize = "vertical";
    sourceText.readOnly = true;
    sourceText.placeholder = "Awaiting scan...";
    sourceCol.appendChild(sourceText);

    // Target side
    const targetCol = document.createElement('div');
    targetCol.style.flex = "1";
    targetCol.style.minWidth = "250px";
    const targetLabel = document.createElement('div');
    targetLabel.innerText = `Translated (${targetLang}):`;
    targetLabel.style.fontWeight = "bold";
    targetLabel.style.marginBottom = "5px";
    targetCol.appendChild(targetLabel);

    const targetText = document.createElement('textarea');
    targetText.style.width = "100%";
    targetText.style.height = "120px";
    targetText.style.padding = "10px";
    targetText.style.boxSizing = "border-box";
    targetText.style.borderRadius = "6px";
    targetText.style.border = "1px solid #d1d5db";
    targetText.style.resize = "vertical";
    targetText.readOnly = true;
    targetText.placeholder = "Awaiting translation...";
    targetCol.appendChild(targetText);

    gridDiv.appendChild(sourceCol);
    gridDiv.appendChild(targetCol);
    container.appendChild(gridDiv);

    // Audio Dubbing Controls
    const dubContainer = document.createElement('div');
    dubContainer.style.display = "flex";
    dubContainer.style.justifyContent = "center";
    dubContainer.style.paddingTop = "10px";
    dubContainer.style.borderTop = "1px solid #e5e7eb";

    const playBtn = document.createElement('button');
    playBtn.innerHTML = "► Play Translated Dub";
    playBtn.style.padding = "12px 24px";
    playBtn.style.fontSize = "1rem";
    playBtn.style.fontWeight = "bold";
    playBtn.style.color = "white";
    playBtn.style.backgroundColor = "#9ca3af"; // Disabled color
    playBtn.style.border = "none";
    playBtn.style.borderRadius = "6px";
    playBtn.style.cursor = "not-allowed";
    playBtn.style.transition = "background-color 0.2s";
    playBtn.disabled = true;
    dubContainer.appendChild(playBtn);
    container.appendChild(dubContainer);

    // Async execution chain
    (async () => {
        try {
            // 1. Load Tesseract.js if not available
            if (!window.Tesseract) {
                statusDiv.innerText = "Downloading OCR Library...";
                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);
                });
            }

            // 2. Perform OCR
            statusDiv.innerText = "Scanning Image for Text... (this may take a moment)";
            statusDiv.style.backgroundColor = "#fef08a";
            statusDiv.style.color = "#854d0e";
            
            const result = await window.Tesseract.recognize(canvas, ocrLang);
            const extractedString = result.data.text.trim();

            if (!extractedString) {
                statusDiv.innerText = "No text found in the image.";
                statusDiv.style.backgroundColor = "#fee2e2";
                statusDiv.style.color = "#991b1b";
                return;
            }

            sourceText.value = extractedString;

            // 3. Perform Language Translation and Identification via Google Translate Free API proxy URL
            statusDiv.innerText = "Translating Text...";
            
            const googleTranslateUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLang}&dt=t&q=${encodeURIComponent(extractedString)}`;
            const response = await fetch(googleTranslateUrl);
            if (!response.ok) throw new Error("Translation API encountered an error.");
            
            const jsonParams = await response.json();
            
            let finalTranslation = "";
            if (jsonParams && jsonParams[0]) {
                for (let i = 0; i < jsonParams[0].length; i++) {
                    finalTranslation += jsonParams[0][i][0];
                }
            }

            // Extract identified source language
            const identifiedLang = jsonParams[2] ? jsonParams[2] : "Unknown";

            targetText.value = finalTranslation;
            statusDiv.innerHTML = `&#10003; Success! Identified Source: <b>${identifiedLang.toUpperCase()}</b>  &#8594;  Translated to: <b>${targetLang.toUpperCase()}</b>`;
            statusDiv.style.backgroundColor = "#dcfce7";
            statusDiv.style.color = "#166534";

            // 4. Setup TTS / Dubbing logic
            let isPlaying = false;
            
            if ('speechSynthesis' in window) {
                playBtn.disabled = false;
                playBtn.style.backgroundColor = "#3b82f6";
                playBtn.style.cursor = "pointer";

                playBtn.onmouseenter = () => { if(!isPlaying) playBtn.style.backgroundColor = "#2563eb"; };
                playBtn.onmouseleave = () => { if(!isPlaying) playBtn.style.backgroundColor = "#3b82f6"; };

                playBtn.onclick = () => {
                    if (isPlaying) {
                        window.speechSynthesis.cancel();
                        isPlaying = false;
                        playBtn.innerHTML = "&#9658; Play Translated Dub";
                        playBtn.style.backgroundColor = "#3b82f6";
                    } else {
                        // Stop any ongoing speech
                        window.speechSynthesis.cancel();

                        const utterance = new SpeechSynthesisUtterance(finalTranslation);
                        utterance.lang = targetLang;
                        utterance.rate = Number(voiceRate) || 1;
                        
                        utterance.onend = () => {
                            isPlaying = false;
                            playBtn.innerHTML = "&#9658; Play Translated Dub";
                            playBtn.style.backgroundColor = "#3b82f6";
                        };

                        utterance.onerror = (e) => {
                            console.error("Speech Synthesis Error", e);
                            isPlaying = false;
                            playBtn.innerHTML = "&#9658; Play Translated Dub";
                            playBtn.style.backgroundColor = "#3b82f6";
                        };

                        window.speechSynthesis.speak(utterance);
                        
                        isPlaying = true;
                        playBtn.innerHTML = "&#11044; Stop Dub";
                        playBtn.style.backgroundColor = "#ef4444";
                    }
                };
            } else {
                playBtn.innerHTML = "Audio Dubbing Not Supported by Browser";
            }

        } catch (error) {
            console.error("Processing Error:", error);
            statusDiv.innerText = "Error during processing: " + error.message;
            statusDiv.style.backgroundColor = "#fee2e2";
            statusDiv.style.color = "#991b1b";
        }
    })();

    return container;
}